diff --git a/demo/400.html b/demo/400.html
index 8b9a32874..3ec574ac0 100644
--- a/demo/400.html
+++ b/demo/400.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,46 +24,91 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">400</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but your request contains bad syntax and cannot be fulfilled
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">400</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but your request contains bad syntax and cannot be fulfilled
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/autosize/dist/autosize.min.js?1578694044"></script>
-    <script src="./dist/libs/imask/dist/imask.min.js?1578694044"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/autosize/dist/autosize.min.js?1580338609"></script>
+    <script src="./dist/libs/imask/dist/imask.min.js?1580338609"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580338609"></script>
+    <script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-simple'), {
+      	start: 20,
+      	connect: [true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-connect'), {
+      	start: [60, 90],
+      	connect: [false, true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      noUiSlider.create(document.getElementById('range-color'), {
+      	start: 40,
+      	connect: [true, false],
+      	step: 10,
+      	range: {
+      		min: 0,
+      		max: 100
+      	}
+      });
+      // @formatter:on
+    </script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {
@@ -80,6 +124,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -93,10 +140,29 @@
       			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',
       		},
-      		labels: [...Array(30).keys()].map(n => '2019-09-' + (n + 1)),
+      		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,
@@ -106,16 +172,14 @@
       // @formatter:on
     </script>
     <script>
-      if (window.autosize) {
-      	(function () {
-      		const elements = document.querySelectorAll('[data-toggle="autosize"]');
-      		if (elements.length) {
-      			elements.forEach(function (element) {
-      				autosize(element);
-      			});
-      		}
-      	})();
-      }
+      (function () {
+      	const elements = document.querySelectorAll('[data-toggle="autosize"]');
+      	if (elements.length) {
+      		elements.forEach(function (element) {
+      			autosize(element);
+      		});
+      	}
+      })();
     </script>
     <script>
       (function () {
diff --git a/demo/401.html b/demo/401.html
index 5c7ab05be..a9105cfdd 100644
--- a/demo/401.html
+++ b/demo/401.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 401 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">401</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but you are not authorized to access this page
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">401</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but you are not authorized to access this page
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/403.html b/demo/403.html
index 877d57095..b7be710b0 100644
--- a/demo/403.html
+++ b/demo/403.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 403 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">403</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but you do not have permission to access this page
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">403</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but you do not have permission to access this page
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/404.html b/demo/404.html
index 5fb70f3fb..352f06580 100644
--- a/demo/404.html
+++ b/demo/404.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">404</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but the page you are looking for was not found
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">404</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but the page you are looking for was not found
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/500.html b/demo/500.html
index 09a00e129..c4bf5b9ed 100644
--- a/demo/500.html
+++ b/demo/500.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 500 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">500</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but our server encountered an internal error
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">500</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but our server encountered an internal error
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/503.html b/demo/503.html
index 167c031b4..b03475479 100644
--- a/demo/503.html
+++ b/demo/503.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Page 503 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <div class="empty">
-        <div class="empty-icon">
-          <div class="display-4">503</div>
-        </div>
-        <p class="empty-title h3">Oops&hellip; You just found an error page</p>
-        <p class="empty-subtitle text-muted">
-          We are sorry but our service is currently not available
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <div class="display-4">503</div>
+          </div>
+          <p class="empty-title h3">Oops… You just found an error page</p>
+          <p class="empty-subtitle text-muted">
+            We are sorry but our service is currently not available
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/all.html b/demo/all.html
index 8e14391cb..4da3b0a55 100644
--- a/demo/all.html
+++ b/demo/all.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Index - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -493,6 +484,11 @@
                   </div>
                   <div class="card-body">
                     <ul>
+                      <li>
+                        <a href="/search-results.html">
+                          search-results.html
+                        </a>
+                      </li>
                       <li>
                         <a href="/redirects.json">
                           redirects.json
@@ -504,18 +500,63 @@
                         </a>
                       </li>
                       <li>
-                        <a href="/tmp2.html">
-                          tmp2.html
+                        <a href="/welcome.html">
+                          welcome.html
                         </a>
                       </li>
                       <li>
-                        <a href="/sitemap.xml">
-                          sitemap.xml
+                        <a href="/tmp.html">
+                          tmp.html
                         </a>
                       </li>
                       <li>
-                        <a href="/search-results.html">
-                          search-results.html
+                        <a href="/tmp-dark.html">
+                          tmp-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/terms-of-service.html">
+                          terms-of-service.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark-navigation.html">
+                          layout-dark-navigation.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark-topnav.html">
+                          layout-dark-topnav.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-dark.html">
+                          layout-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-dark.html">
+                          layout-sidebar-dark.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-narrow.html">
+                          layout-sidebar-narrow.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-only.html">
+                          layout-sidebar-only.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar-right.html">
+                          layout-sidebar-right.html
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/layout-sidebar.html">
+                          layout-sidebar.html
                         </a>
                       </li>
                       <li>
@@ -523,6 +564,11 @@
                           layouts.html
                         </a>
                       </li>
+                      <li>
+                        <a href="/sitemap.xml">
+                          sitemap.xml
+                        </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>
@@ -649,13 +695,8 @@
                         </a>
                       </li>
                       <li>
-                        <a href="/layout-test.html">
-                          Layout test
-                        </a>
-                      </li>
-                      <li>
-                        <a href="/login.html">
-                          Login
+                        <a href="/lists.html">
+                          Lists
                         </a>
                       </li>
                       <li>
@@ -741,17 +782,22 @@
                           RTL mode
                         </a>
                       </li>
-                      <li>
-                        <a href="/register.html">
-                          Register
-                        </a>
-                      </li>
                       <li>
                         <a href="/ribbons.html">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
                           Ribbons
                         </a>
                       </li>
+                      <li>
+                        <a href="/sign-in.html">
+                          Sign in
+                        </a>
+                      </li>
+                      <li>
+                        <a href="/sign-up.html">
+                          Sign up
+                        </a>
+                      </li>
                       <li>
                         <a href="/snippets.html">
                           Snippets
@@ -801,9 +847,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/blank.html b/demo/blank.html
index e5416e878..e2a78366c 100644
--- a/demo/blank.html
+++ b/demo/blank.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -482,7 +473,7 @@
                 Try adjusting your search or filter to find what you're looking for.
               </p>
               <div class="empty-action">
-                <a href="./index.html" class="btn btn-primary">
+                <a href="./." class="btn btn-primary">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                   Add your first client
                 </a>
@@ -493,9 +484,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/blog.html b/demo/blog.html
index 611c4fed6..c22e37013 100644
--- a/demo/blog.html
+++ b/demo/blog.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -735,9 +726,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/buttons.html b/demo/buttons.html
index 4d1d25f72..1eaa4e7ce 100644
--- a/demo/buttons.html
+++ b/demo/buttons.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -1097,98 +1088,98 @@
                   <div class="card-body">
                     <div class="row row-sm align-items-center mb-n3">
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-facebook btn-block btn-icon">
+                        <a href="#" class="btn btn-facebook btn-block btn-icon" aria-label="Facebook">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-twitter btn-block btn-icon">
+                        <a href="#" class="btn btn-twitter btn-block btn-icon" aria-label="Twitter">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-google btn-block btn-icon">
+                        <a href="#" class="btn btn-google btn-block btn-icon" aria-label="Google">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-youtube btn-block btn-icon">
+                        <a href="#" class="btn btn-youtube btn-block btn-icon" aria-label="Youtube">
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
                             <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-vimeo btn-block btn-icon">
+                        <a href="#" class="btn btn-vimeo btn-block btn-icon" aria-label="Vimeo">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-dribbble btn-block btn-icon">
+                        <a href="#" class="btn btn-dribbble btn-block btn-icon" aria-label="Dribbble">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.161 10.161 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a65.473 65.473 0 0 0-3.8-5.928 10.275 10.275 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702A10.19 10.19 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-github btn-block btn-icon">
+                        <a href="#" class="btn btn-github btn-block btn-icon" aria-label="Github">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-instagram btn-block btn-icon">
+                        <a href="#" class="btn btn-instagram btn-block btn-icon" aria-label="Instagram">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-pinterest btn-block btn-icon">
+                        <a href="#" class="btn btn-pinterest btn-block btn-icon" aria-label="Pinterest">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-vk btn-block btn-icon">
+                        <a href="#" class="btn btn-vk btn-block btn-icon" aria-label="VK">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M11.701 18.771h1.437s.433-.047.654-.284c.21-.221.21-.63.21-.63s-.031-1.927.869-2.21c.887-.281 2.012 1.86 3.211 2.683.916.629 1.605.494 1.605.494l3.211-.044s1.682-.105.887-1.426c-.061-.105-.451-.975-2.371-2.76-2.012-1.861-1.742-1.561.676-4.787 1.469-1.965 2.07-3.166 1.875-3.676-.166-.48-1.26-.361-1.26-.361l-3.602.031s-.27-.031-.465.09c-.195.119-.314.391-.314.391s-.572 1.529-1.336 2.82c-1.623 2.729-2.268 2.879-2.523 2.699-.604-.391-.449-1.58-.449-2.432 0-2.641.404-3.75-.781-4.035-.39-.091-.681-.15-1.685-.166-1.29-.014-2.378.01-2.995.311-.405.203-.72.652-.539.675.24.03.779.146 1.064.537.375.506.359 1.636.359 1.636s.211 3.116-.494 3.503c-.495.262-1.155-.28-2.595-2.756-.735-1.26-1.291-2.67-1.291-2.67s-.105-.256-.299-.406c-.227-.165-.557-.225-.557-.225l-3.435.03s-.51.016-.689.24c-.166.195-.016.615-.016.615s2.686 6.287 5.732 9.453c2.79 2.902 5.956 2.715 5.956 2.715l-.05-.055z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-rss btn-block btn-icon">
+                        <a href="#" class="btn btn-rss btn-block btn-icon" aria-label="RSS">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-flickr btn-block btn-icon">
+                        <a href="#" class="btn btn-flickr btn-block btn-icon" aria-label="Flickr">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M0 12a5.565 5.565 0 0 0 5.565 5.564c3.075 0 5.569-2.49 5.569-5.564S8.641 6.436 5.565 6.436A5.566 5.566 0 0 0 0 12zm12.866 0a5.565 5.565 0 0 0 5.567 5.564C21.496 17.564 24 15.074 24 12s-2.492-5.564-5.564-5.564A5.567 5.567 0 0 0 12.866 12z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-bitbucket btn-block btn-icon">
+                        <a href="#" class="btn btn-bitbucket btn-block btn-icon" aria-label="Bitbucker">
                           <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                             <path d="M.778 1.211a.768.768 0 0 0-.768.892l3.263 19.811c.084.499.515.867 1.022.872H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891L.778 1.211zM14.52 15.528H9.522L8.17 8.464h7.561l-1.211 7.064z"/>
                           </svg>
                         </a>
                       </div>
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-tabler btn-block btn-icon">
+                        <a href="#" class="btn btn-tabler btn-block btn-icon" aria-label="Tabler">
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
                             <path d="M23.5 5.3C22.9 3 21 1.1 18.7.5 14.3-.2 9.8-.2 5.4.5 3 1.1 1.1 3 .5 5.3c-.7 4.4-.7 8.9 0 13.3.6 2.4 2.5 4.3 4.8 4.9 4.4.7 8.9.7 13.3 0 2.4-.6 4.2-2.4 4.8-4.8.8-4.5.8-8.9.1-13.4zm-11.8 7.6c-1 1.6-2.5 3.1-4.2 4.1-.6.3-1.2.3-1.8 0s-.9-.9-.9-1.5.3-1.2.9-1.5c.9-.5 1.6-1.2 2.3-2-.7-.8-1.4-1.4-2.3-2-.8-.5-1.1-1.6-.6-2.4S6.7 6.5 7.5 7c1.7 1 3.1 2.4 4.2 4.1.4.5.4 1.2 0 1.8zm6 3.6h-4.3c-.8 0-1.4-.4-1.4-1.1 0-.7.6-1.1 1.4-1.1h4.3c.8 0 1.4.4 1.4 1.1 0 .7-.6 1.1-1.4 1.1z"/>
                           </svg>
@@ -1325,9 +1316,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/calendar.html b/demo/calendar.html
index 492c6d37d..d851a1e6d 100644
--- a/demo/calendar.html
+++ b/demo/calendar.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -502,15 +493,15 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/fullcalendar/core/main.min.js?1578694044"></script>
-    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1578694044"></script>
-    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1578694044"></script>
-    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1578694044"></script>
-    <script src="./dist/libs/fullcalendar/list/main.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/fullcalendar/core/main.min.js?1580338609"></script>
+    <script src="./dist/libs/fullcalendar/daygrid/main.min.js?1580338609"></script>
+    <script src="./dist/libs/fullcalendar/interaction/main.min.js?1580338609"></script>
+    <script src="./dist/libs/fullcalendar/timegrid/main.min.js?1580338609"></script>
+    <script src="./dist/libs/fullcalendar/list/main.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
             var calendarEl = document.getElementById('calendar-main'),
diff --git a/demo/cards.html b/demo/cards.html
index 8d5df4f83..f4dc7603b 100644
--- a/demo/cards.html
+++ b/demo/cards.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -633,7 +624,7 @@
                       Try adjusting your search or filter to find what you're looking for.
                     </p>
                     <div class="empty-action">
-                      <a href="./index.html" class="btn btn-primary">
+                      <a href="./." class="btn btn-primary">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                         Search again
                       </a>
@@ -898,9 +889,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/carousel.html b/demo/carousel.html
index d850eae03..35110bb08 100644
--- a/demo/carousel.html
+++ b/demo/carousel.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -650,9 +641,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/changelog.html b/demo/changelog.html
index e6d36fdef..73bf4f900 100644
--- a/demo/changelog.html
+++ b/demo/changelog.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Changelog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -488,7 +479,7 @@
                 <div class="mb-4">
                   <div class="mb-2">
                     <span class="badge bg-blue-lt">1.0.0</span> —
-                    <span class="text-muted">January 10, 2020</span>
+                    <span class="text-muted">January 29, 2020</span>
                   </div>
                   <div>
                     <p>Coming soon</p>
@@ -501,9 +492,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/charts-heatmap.html b/demo/charts-heatmap.html
index a870156fa..33e35cf32 100644
--- a/demo/charts-heatmap.html
+++ b/demo/charts-heatmap.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Heatmap Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -721,9 +712,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/charts.html b/demo/charts.html
index 38328a88a..083745110 100644
--- a/demo/charts.html
+++ b/demo/charts.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item active">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -484,6 +475,20 @@
               </div>
             </div>
             <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <div id="chart-tasks-overview" ></div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-6 col-xl-4">
+                <div class="card">
+                  <div class="card-body">
+                    <div id="chart-mentions" ></div>
+                  </div>
+                </div>
+              </div>
               <div class="col-lg-6 col-xl-4">
                 <div class="card">
                   <div class="card-body">
@@ -644,11 +649,156 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+    <script>
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-tasks-overview'), {
+      		chart: {
+      			type: "bar",
+      			fontFamily: 'inherit',
+      			height: 320,
+      			parentHeightOffset: 0,
+      			toolbar: {
+      				show: false,
+      			},
+      			animations: {
+      				enabled: false
+      			},
+      		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
+      		fill: {
+      			opacity: 1,
+      		},
+      		series: [{
+      			name: "A",
+      			data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
+      		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			categories: ["Sprint 1", "Sprint 2", "Sprint 3", "Sprint 4", "Sprint 5", "Sprint 6", "Sprint 7", "Sprint 8", "Sprint 9", "Sprint 10", "Sprint 11", "Sprint 12", "Sprint 13", "Sprint 14", "Sprint 15", "Sprint 16", "Sprint 17", "Sprint 18", "Sprint 19", "Sprint 20", "Sprint 21", "Sprint 22", "Sprint 23", "Sprint 24"],
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		colors: ["#206bc4"],
+      		legend: {
+      			show: false,
+      		},
+      	})).render();
+      });
+      // @formatter:on
+    </script>
+    <script>
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
+      		chart: {
+      			type: "bar",
+      			fontFamily: 'inherit',
+      			height: 240,
+      			parentHeightOffset: 0,
+      			toolbar: {
+      				show: false,
+      			},
+      			animations: {
+      				enabled: false
+      			},
+      			stacked: true,
+      		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
+      		fill: {
+      			opacity: 1,
+      		},
+      		series: [{
+      			name: "Web",
+      			data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
+      		},{
+      			name: "Social",
+      			data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
+      		},{
+      			name: "Other",
+      			data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
+      		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      			xaxis: {
+      				lines: {
+      					show: true
+      				}
+      			},
+      		},
+      		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', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
+      		],
+      		colors: ["#206bc4", "#79a6dc", "#bfe399"],
+      		legend: {
+      			show: false,
+      		},
+      	})).render();
+      });
+      // @formatter:on
+    </script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {
@@ -665,6 +815,14 @@
       				enabled: false
       			},
       		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -672,10 +830,35 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -712,10 +895,32 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -740,6 +945,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -753,10 +961,35 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -793,10 +1026,32 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -833,10 +1088,32 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -863,9 +1140,13 @@
       		},
       		plotOptions: {
       			bar: {
+      				barHeight: '50%',
       		 		horizontal: true,
       			}
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -873,10 +1154,35 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -901,9 +1207,6 @@
       				enabled: false
       			},
       		},
-      		dataLabels: {
-      			enabled: true,
-      		},
       		fill: {
       			opacity: 1,
       		},
@@ -916,10 +1219,32 @@
       			name: "Tasks completion",
       			data: [155, 65, 465, 265, 225, 325, 80]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(7).keys()].map(n => '2019-09-' + (n + 1)),
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4"],
       		legend: {
       			show: false,
@@ -944,6 +1269,14 @@
       				enabled: false
       			},
       		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -954,6 +1287,35 @@
       			name: "",
       			data: [113, 42, 65, 54, 76, 65, 35]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4", "#fa4654"],
       		legend: {
       			show: false,
@@ -979,6 +1341,14 @@
       			},
       			stacked: true,
       		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -989,6 +1359,35 @@
       			name: "",
       			data: [113, 42, 65, 54, 76, 65, 35]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4", "#fa4654"],
       		legend: {
       			show: false,
@@ -1013,6 +1412,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1029,6 +1431,35 @@
       			name: "",
       			data: [113, 42, 65, 54, 76, 65, 35]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4", "#fa4654"],
       		legend: {
       			show: false,
@@ -1054,6 +1485,9 @@
       			},
       			stacked: true,
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1070,6 +1504,35 @@
       			name: "",
       			data: [113, 42, 65, 54, 76, 65, 35]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
+      		],
       		colors: ["#206bc4", "#fa4654"],
       		legend: {
       			show: false,
@@ -1096,12 +1559,18 @@
       		fill: {
       			opacity: 1,
       		},
-      		series: [44, 55, 35, 12],
-      		labels: ["Direct", "Affilliate", "Sponsored", "E-mail"],
-      		colors: ["#206bc4", "#5eba00", "#fa4654", "#fab005"],
+      		series: [44, 55, 12, 2],
+      		labels: ["Direct", "Affilliate", "E-mail", "Other"],
+      		grid: {
+      			strokeDashArray: 4,
+      		},
+      		colors: ["#206bc4", "#79a6dc", "#bfe399", "#e9ecf1"],
       		legend: {
       			show: false,
       		},
+      		tooltip: {
+      			fillSeriesColor: false
+      		},
       	})).render();
       });
       // @formatter:on
@@ -1140,15 +1609,35 @@
       			name: "Closed",
       			data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			categories: ["M", "T", "W", "T", "F", "S", "S", "M", "T", "W", "T", "F", "S", "S", "M", "T", "W"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#7bd235", "#ff922b"],
       		legend: {
       			show: false,
       		},
       		tooltip: {
-      			enabled: false
+      			enabled: false,
       		},
       		point: {
       			show: false
@@ -1191,9 +1680,29 @@
       			name: "Sales",
       			data: [7, 10, 11, 18, 18, 18, 24]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			categories: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#ff922b", "#206bc4", "#5eba00"],
       		legend: {
       			show: false,
@@ -1230,6 +1739,20 @@
       			name: "Development",
       			data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#ff922b"],
       		legend: {
       			show: false,
@@ -1269,12 +1792,32 @@
       			name: "London",
       			data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		dataLabels: {
       			enabled: true,
       		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#5eba00"],
       		legend: {
       			show: false,
@@ -1302,6 +1845,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1318,9 +1864,32 @@
       			name: "Minimum",
       			data: [7, 7, 5, 7, 9, 12]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#f66d9b"],
       		legend: {
       			show: false,
@@ -1345,6 +1914,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1361,9 +1933,32 @@
       			name: "Minimum",
       			data: [7, 7, 5, 7, 9, 12]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#f66d9b"],
       		legend: {
       			show: false,
@@ -1389,6 +1984,9 @@
       			},
       			stacked: true,
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1405,9 +2003,32 @@
       			name: "Minimum",
       			data: [7, 7, 5, 7, 9, 12]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#f66d9b"],
       		legend: {
       			show: false,
@@ -1447,9 +2068,29 @@
       			name: "Vik",
       			data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#5eba00"],
       		legend: {
       			show: false,
@@ -1484,9 +2125,29 @@
       			name: "Minimum",
       			data: [7, 7, 5, 7, 9, 12]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#206bc4", "#f66d9b"],
       		legend: {
       			show: false,
@@ -1511,6 +2172,14 @@
       				enabled: false
       			},
       		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -1527,9 +2196,32 @@
       			name: "Sales",
       			data: [200, 130, 90, 240, 130, 220]
       		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			categories: ["2013", "2014", "2015", "2016", "2017", "2018"],
       		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
       		colors: ["#5eba00", "#f66d9b", "#5eba00", "#206bc4"],
       		legend: {
       			show: false,
diff --git a/demo/components.html b/demo/components.html
index 692c83ebb..a9a603588 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <meta charset="utf-8">
-  <title>Redirecting&hellip;</title>
+  <title>Redirecting…</title>
   <link rel="canonical" href="./components/card-buttons.html">
   <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
   <meta name="robots" content="noindex">
diff --git a/demo/crypto-currencies.html b/demo/crypto-currencies.html
index 84235dbd9..acd0ef7a0 100644
--- a/demo/crypto-currencies.html
+++ b/demo/crypto-currencies.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Crypto currencies - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -1704,9 +1695,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/datatables.html b/demo/datatables.html
index a97290c9a..408c522d2 100644
--- a/demo/datatables.html
+++ b/demo/datatables.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Data Tables - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -519,7 +510,7 @@
                   </thead>
                   <tbody>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001401</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td>
                       <td>
@@ -555,7 +546,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001402</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td>
                       <td>
@@ -591,7 +582,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001403</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td>
                       <td>
@@ -627,7 +618,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001404</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td>
                       <td>
@@ -663,7 +654,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001405</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td>
                       <td>
@@ -699,7 +690,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001406</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td>
                       <td>
@@ -735,7 +726,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001407</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Logo & Print</a></td>
                       <td>
@@ -771,7 +762,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                      <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                       <td><span class="text-muted">001408</span></td>
                       <td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td>
                       <td>
@@ -836,9 +827,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/dist/img/payments/blik-dark.svg b/demo/dist/img/payments/blik-dark.svg
index e9652bd54..ec6e1109b 100644
--- a/demo/dist/img/payments/blik-dark.svg
+++ b/demo/dist/img/payments/blik-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st1{fill:#fff}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="60" x2="50" y2="0"><stop offset="0" stop-color="#262626"/><stop offset="1"/></linearGradient><path fill="url(#SVGID_1_)" d="M0 0h100v60H0z"/><path class="st1" d="M43.29 17.54h4.64v26.01h-4.64zM51.9 26.32h4.64v17.23H51.9zM77.35 43.55l-6.98-9.12 6.42-8.11h-5.48l-6.15 7.87V17.54h-4.65v26.01h4.65V34.7l6.15 8.85zM31.46 26.13c-1.51 0-2.93.38-4.17 1.05v-9.63h-4.64v17.39c0 4.86 3.94 8.81 8.81 8.81s8.81-3.94 8.81-8.81-3.94-8.81-8.81-8.81zm0 12.97c-2.3 0-4.17-1.87-4.17-4.17s1.87-4.17 4.17-4.17 4.17 1.87 4.17 4.17c0 2.31-1.87 4.17-4.17 4.17z"/><radialGradient id="SVGID_2_" cx="32.625" cy="16.032" r="13.569" fx="32.466" fy="15.992" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle cx="35.99" cy="20.39" r="4.14" fill="url(#SVGID_2_)"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="50" y1=".646" x2="50" y2="60.646" gradientTransform="matrix(1 0 0 -1 0 60.646)"><stop offset="0" stop-color="#262626"/><stop offset="1"/></linearGradient><rect fill="url(#a)" width="100" height="60" rx="4"/><path fill="#FFF" d="M43.3 17.5h4.6v26h-4.6v-26zm8.6 8.8h4.6v17.2h-4.6V26.3zm25.4 17.2l-7-9.1 6.4-8.1h-5.5L65 34.2V17.5h-4.7v26H65v-8.9l6.2 8.9h6.1zM31.5 26.1c-1.5 0-2.9.4-4.2 1v-9.6h-4.6v17.4c0 4.9 3.9 8.8 8.8 8.8s8.8-3.9 8.8-8.8-4-8.8-8.8-8.8zm0 13c-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2 4.2 1.9 4.2 4.2c-.1 2.3-1.9 4.2-4.2 4.2z"/><circle fill="#e83e49" cx="36" cy="20.4" r="4.1"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/blik.svg b/demo/dist/img/payments/blik.svg
index d9a044dc7..b44c11d9b 100644
--- a/demo/dist/img/payments/blik.svg
+++ b/demo/dist/img/payments/blik.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#333}</style><path class="st0" d="M43.29 17.54h4.64v26.01h-4.64zM51.9 26.32h4.64v17.23H51.9zM77.35 43.55l-6.98-9.12 6.42-8.11h-5.48l-6.15 7.87V17.54h-4.65v26.01h4.65V34.7l6.15 8.85zM31.46 26.13c-1.51 0-2.93.38-4.17 1.05v-9.63h-4.64v17.39c0 4.86 3.94 8.81 8.81 8.81s8.81-3.94 8.81-8.81-3.94-8.81-8.81-8.81zm0 12.97c-2.3 0-4.17-1.87-4.17-4.17s1.87-4.17 4.17-4.17 4.17 1.87 4.17 4.17c0 2.31-1.87 4.17-4.17 4.17z"/><radialGradient id="SVGID_1_" cx="32.625" cy="16.032" r="13.569" fx="32.466" fy="15.992" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle cx="35.99" cy="20.39" r="4.14" fill="url(#SVGID_1_)"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#333" d="M43.3 17.5h4.6v26h-4.6v-26zm8.6 8.8h4.6v17.2h-4.6V26.3zm25.4 17.2l-7-9.1 6.4-8.1h-5.5L65 34.2V17.5h-4.7v26H65v-8.9l6.2 8.9h6.1zM31.5 26.1c-1.5 0-2.9.4-4.2 1v-9.6h-4.6v17.4c0 4.9 3.9 8.8 8.8 8.8s8.8-3.9 8.8-8.8-4-8.8-8.8-8.8zm0 13c-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2 4.2 1.9 4.2 4.2c-.1 2.3-1.9 4.2-4.2 4.2z"/><radialGradient id="a" cx="32.625" cy="44.614" r="13.569" fx="32.466" fy="44.574" gradientTransform="matrix(1 0 0 -1 0 60.646)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle fill="url(#a)" cx="36" cy="20.4" r="4.1"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/dotpay-dark.svg b/demo/dist/img/payments/dotpay-dark.svg
index 5492a4157..2e350d4a1 100644
--- a/demo/dist/img/payments/dotpay-dark.svg
+++ b/demo/dist/img/payments/dotpay-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#9f221f}.st1{fill:#fff}</style><path d="M0 0h100v60H0z"/><path class="st0" d="M39.21 23.86h2.57V19h2.71v4.86h3.61v2.29h-3.47v7.15s-.14.97.56.97h2.91v2.36h-3.89c-.23-.01-.47-.01-.7-.02-.12-.02-.88-.12-1.38-.82-.43-.6-.37-1.24-.35-1.39v-8.26h-2.57v-2.28z"/><path class="st1" d="M75.01 24v9.16s0 3.47 3.19 3.47h5.27v.97s.14 1.11-1.25 1.11H75v2.36h8.19s3.19-.42 3.19-4.44V24h-2.91v10.34h-4.16s-1.39-.07-1.39-2.01c0-2.5-.14-8.33-.14-8.33h-2.77zM56.97 23.99h-7.91l-.14 17.07h2.92v-4.44h5.27s4.02-.55 4.02-6.66c0-6.1-4.16-5.97-4.16-5.97zm-.99 10.41h-4.14v-8.19h4.14s2.79.14 2.79 4.03c0 3.88-2.79 4.16-2.79 4.16zM70.71 24h-8.33v2.08h6.52c2.22 0 2.36 1.39 2.36 1.39V29h-5.83s-3.89-.06-3.89 3.47c0 3.89 3.33 4.16 3.33 4.16h9.16v-9.44c0-3.33-3.32-3.19-3.32-3.19zm.42 10.41H66s-1.25 0-1.25-1.67S66 31.21 66 31.21h5.13v3.2z"/><path class="st0" d="M33.31 24a6.31 6.31 0 106.31 6.31c.01-3.48-2.82-6.31-6.31-6.31zm2.16 10.04h-4.6s-.68-.05-.68-.68v-2.98s0-.68.68-.68v-2.17s0-.81.81-.81h2.98s.81 0 .81.68v2.3s.69-.02.68.68c-.01.81 0 2.98 0 2.98s.14.68-.68.68z"/><path class="st0" d="M34.05 27.47H32.3c-.4 0-.72.32-.72.72v.78c0 .4.32.72.72.72h1.75c.4 0 .72-.32.72-.72v-.78c0-.4-.32-.72-.72-.72zM23.12 18.93V24h-4.06s-5.45.21-5.45 6.45 5.45 6.24 5.45 6.24h7.04V18.93h-2.98zm0 15.48h-4.15s-2.79-.14-2.79-4.02 2.79-4.16 2.79-4.16h4.15v8.18z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#9F221F" width="100" height="60" rx="4"/><path fill="#FFF" d="M39.2 23.9h2.6V19h2.7v4.9h3.6v2.3h-3.5v7.1s-.1 1 .6 1h2.9v2.4h-4.6c-.1 0-.9-.1-1.4-.8-.4-.6-.4-1.2-.3-1.4v-8.3h-2.6v-2.3zM75 24v9.2s0 3.5 3.2 3.5h5.3v1s.1 1.1-1.2 1.1H75v2.4h8.2s3.2-.4 3.2-4.4V24h-2.9v10.3h-4.2s-1.4-.1-1.4-2c0-2.5-.1-8.3-.1-8.3H75zm-18 0h-7.9L49 41.1h2.9v-4.4h5.3s4-.5 4-6.7c-.1-6.1-4.2-6-4.2-6zm-1 10.4h-4.1v-8.2H56s2.8.1 2.8 4-2.8 4.2-2.8 4.2zM70.7 24h-8.3v2.1h6.5c2.2 0 2.4 1.4 2.4 1.4V29h-5.8s-3.9-.1-3.9 3.5c0 3.9 3.3 4.2 3.3 4.2H74v-9.4c0-3.4-3.3-3.3-3.3-3.3zm.4 10.4H66s-1.2 0-1.2-1.7 1.2-1.5 1.2-1.5h5.1v3.2zM33.3 24c-3.5 0-6.3 2.8-6.3 6.3s2.8 6.3 6.3 6.3 6.3-2.8 6.3-6.3-2.8-6.3-6.3-6.3zm2.2 10h-4.6s-.7 0-.7-.7v-3s0-.7.7-.7v-2.2s0-.8.8-.8h3s.8 0 .8.7v2.3s.7 0 .7.7v3s.1.7-.7.7z"/><path fill="#FFF" d="M34 27.5h-1.8c-.4 0-.7.3-.7.7v.8c0 .4.3.7.7.7H34c.4 0 .7-.3.7-.7v-.8c.1-.4-.2-.7-.7-.7zm-10.9-8.6V24H19s-5.4.2-5.4 6.5 5.4 6.2 5.4 6.2h7V18.9h-2.9zm0 15.5H19s-2.8-.1-2.8-4 2.8-4.2 2.8-4.2h4.1v8.2z"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/dotpay.svg b/demo/dist/img/payments/dotpay.svg
index d6dc54e40..75cd67099 100644
--- a/demo/dist/img/payments/dotpay.svg
+++ b/demo/dist/img/payments/dotpay.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#9f221f}</style><path class="st0" d="M39.21 23.86h2.57V19h2.71v4.86h3.61v2.29h-3.47v7.15s-.14.97.56.97h2.91v2.36h-3.89c-.23-.01-.47-.01-.7-.02-.12-.02-.88-.12-1.38-.82-.43-.6-.37-1.24-.35-1.39v-8.26h-2.57v-2.28z"/><path d="M75.01 24v9.16s0 3.47 3.19 3.47h5.27v.97s.14 1.11-1.25 1.11H75v2.36h8.19s3.19-.42 3.19-4.44V24h-2.91v10.34h-4.16s-1.39-.07-1.39-2.01c0-2.5-.14-8.33-.14-8.33h-2.77zM56.97 23.99h-7.91l-.14 17.07h2.92v-4.44h5.27s4.02-.55 4.02-6.66c0-6.1-4.16-5.97-4.16-5.97zm-.99 10.41h-4.14v-8.19h4.14s2.79.14 2.79 4.03c0 3.88-2.79 4.16-2.79 4.16zM70.71 24h-8.33v2.08h6.52c2.22 0 2.36 1.39 2.36 1.39V29h-5.83s-3.89-.06-3.89 3.47c0 3.89 3.33 4.16 3.33 4.16h9.16v-9.44c0-3.33-3.32-3.19-3.32-3.19zm.42 10.41H66s-1.25 0-1.25-1.67S66 31.21 66 31.21h5.13v3.2z"/><path class="st0" d="M33.31 24a6.31 6.31 0 106.31 6.31c.01-3.48-2.82-6.31-6.31-6.31zm2.16 10.04h-4.6s-.68-.05-.68-.68v-2.98s0-.68.68-.68v-2.17s0-.81.81-.81h2.98s.81 0 .81.68v2.3s.69-.02.68.68c-.01.81 0 2.98 0 2.98s.14.68-.68.68z"/><path class="st0" d="M34.05 27.47H32.3c-.4 0-.72.32-.72.72v.78c0 .4.32.72.72.72h1.75c.4 0 .72-.32.72-.72v-.78c0-.4-.32-.72-.72-.72zM23.12 18.93V24h-4.06s-5.45.21-5.45 6.45 5.45 6.24 5.45 6.24h7.04V18.93h-2.98zm0 15.48h-4.15s-2.79-.14-2.79-4.02 2.79-4.16 2.79-4.16h4.15v8.18z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#9F221F" d="M39.2 23.9h2.6V19h2.7v4.9h3.6v2.3h-3.5v7.1s-.1 1 .6 1h2.9v2.4h-4.6c-.1 0-.9-.1-1.4-.8-.4-.6-.4-1.2-.3-1.4v-8.3h-2.6v-2.3z"/><path d="M75 24v9.2s0 3.5 3.2 3.5h5.3v1s.1 1.1-1.2 1.1H75v2.4h8.2s3.2-.4 3.2-4.4V24h-2.9v10.3h-4.2s-1.4-.1-1.4-2c0-2.5-.1-8.3-.1-8.3H75zm-18 0h-7.9L49 41.1h2.9v-4.4h5.3s4-.5 4-6.7c-.1-6.1-4.2-6-4.2-6zm-1 10.4h-4.1v-8.2H56s2.8.1 2.8 4-2.8 4.2-2.8 4.2zM70.7 24h-8.3v2.1h6.5c2.2 0 2.4 1.4 2.4 1.4V29h-5.8s-3.9-.1-3.9 3.5c0 3.9 3.3 4.2 3.3 4.2H74v-9.4c0-3.4-3.3-3.3-3.3-3.3zm.4 10.4H66s-1.2 0-1.2-1.7 1.2-1.5 1.2-1.5h5.1v3.2z"/><path fill="#9F221F" d="M33.3 24c-3.5 0-6.3 2.8-6.3 6.3s2.8 6.3 6.3 6.3 6.3-2.8 6.3-6.3-2.8-6.3-6.3-6.3zm2.2 10h-4.6s-.7 0-.7-.7v-3s0-.7.7-.7v-2.2s0-.8.8-.8h3s.8 0 .8.7v2.3s.7 0 .7.7v3s.1.7-.7.7z"/><path fill="#9F221F" d="M34 27.5h-1.8c-.4 0-.7.3-.7.7v.8c0 .4.3.7.7.7H34c.4 0 .7-.3.7-.7v-.8c.1-.4-.2-.7-.7-.7zm-10.9-8.6V24H19s-5.4.2-5.4 6.5 5.4 6.2 5.4 6.2h7V18.9h-2.9zm0 15.5H19s-2.8-.1-2.8-4 2.8-4.2 2.8-4.2h4.1v8.2z"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/przelewy24-dark.svg b/demo/dist/img/payments/przelewy24-dark.svg
index a40d8970e..6a2a30851 100644
--- a/demo/dist/img/payments/przelewy24-dark.svg
+++ b/demo/dist/img/payments/przelewy24-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}.st0,.st1{fill:#d13239}.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#b3b2b1}</style><path d="M0 0h100v60H0z"/><path class="st0" d="M29.08 31.85h5.95l-.22 1.35-4.97 4.75 4.17-.01-.24 1.46h-6.15l.26-1.51 4.77-4.56h-3.81zM22.58 29.54c-.13-.14-.32-.24-.52-.33a4.15 4.15 0 00-.69-.19c-.26-.05-.53-.07-.79-.08-.19-.01-.31-.01-.31-.01h-4.53L14 39.4h1.62l.64-3.88 3.14.02s1.22.05 2.09-.41 1.1-1.5 1.1-1.5.1-.39.17-.86c.09-.52.17-1.14.22-1.47.02-.14.03-.24.03-.24.02-.09.02-.18.02-.27.01-.32-.07-.63-.21-.92-.06-.12-.15-.23-.24-.33zm-1.25 1.85c0 .02-.14.86-.33 1.85-.07.38-.36.59-.7.66-.55.12-1.15.1-1.15.1l-2.62-.01.58-3.48 2.38.01h.38c.29 0 .58.02.87.05.24.03.43.08.49.16.07.1.11.22.12.34 0 .1 0 .21-.02.32zM43.09 28.94h1.55L42.9 39.4h-1.56zM51.4 31.85h1.49l.53 5.31 2.3-5.32 1.84.01.55 5.33 2.29-5.33h1.55l-3.29 7.54h-1.84l-.53-5.28-2.32 5.28-1.81.01z"/><path class="st1" d="M40.21 31.91c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5.3 1.2 1.01 1.47c.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17-1.34.06-1.51.05c-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.41.09-2.49-1.21-2.92zm-.34 2.76h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03zM36.01 37.25v0zM45.58 37.25v0zM49.78 31.92c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5.3 1.2 1.01 1.47c.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.5.06-1.01.08-1.51.06-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.42.09-2.51-1.21-2.93zm-.35 2.75h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03z"/><path class="st0" d="M63.75 31.85l1 5.52 2.82-5.52 1.59.02-4.07 7.89s-.74 1.43-1.19 1.79-.74.52-1.11.56-.52.06-.88 0l-.38-.07.24-1.41s.63.12 1-.03.68-.79.68-.79l.19-.32-1.47-7.64h1.58z"/><path class="st2" d="M69.74 32.6h1.64l.1-.63s.17-1.15.57-1.37c.13-.07.33-.14.56-.18.43-.08.97-.08 1.42-.07.68.02.94.03 1.63.11s.52.75.52.75l-.14 1s-.06.45-.22.73c-.14.25-.53.41-.75.49-.54.17-2.39.65-2.39.65l-1.45.42s-.89.26-1.39.81c-.38.43-.65.95-.77 1.51-.07.33-.45 2.59-.45 2.59h7.84l.26-1.57-6.2.01.11-.64s.07-.66.34-.87c.08-.07.13-.16.62-.33.3-.11 1.31-.38 1.31-.38l2.34-.64s1.28-.33 1.78-1.03.7-2.03.7-2.03.14-1.3.03-1.7-.49-.89-.95-1.1c-.47-.21-.95-.33-2.36-.31s-2.11.08-2.82.35-1.13.74-1.39 1.42c-.33.63-.49 2.01-.49 2.01zM84.49 36.3l1.1-6.58h-1.95l-6.06 6.51-.27 1.65h5.3l-.39 2.31h1.63l.38-2.31h1.5L86 36.3h-1.51zm-1.62.01h-3.42l4.17-4.44-.75 4.44zM26.02 29.8h4.99s1.12-.9 1.91-1.49 2.24-1.5 2.24-1.5l-2.82-1.32s-2.38 1.47-3.39 2.17c-.99.65-2.93 2.14-2.93 2.14zM36.74 25.88l-2.31-1.56c1.58-.87 3.21-1.63 4.88-2.3 2.78-1.11 4.27-1.57 4.27-1.57l.47 2.21s-2.68.9-4.21 1.62c-1.6.68-3.1 1.6-3.1 1.6zM45.75 22.18l-.4-2.26s2.86-.76 5.47-1.25 6.09-.72 6.09-.72l-1.15 3.49s-3.05-.42-5.92-.03c-1.37.18-2.74.43-4.09.77zM57.58 21.74l1.93-3.88s4.23-.08 7.88.48c3.65.57 6.98 1.43 6.91 1.47l-9.25 4.84s-2.16-1.37-4.85-2.21c-1.51-.45-2.62-.7-2.62-.7zM66.71 25.7l2.03 1.54h16.71s-.03-.54-.48-1.31c-.28-.48-.78-.99-1.31-1.52-.19-.19-.96-.79-1.54-1.17-1.47-.96-2.3-1.33-3.83-2.02L66.71 25.7z"/><path class="st1" d="M27.1 31.85c-.63 0-1.22.25-1.73.52l.09-.52H23.8l-1.33 7.51h1.66l.74-4.16c.15-.84.78-1.89 2.01-1.89h.86l.26-1.46h-.9z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#D13239" width="100" height="60" rx="4"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M29.1 31.8H35l-.2 1.3-5 4.8H34l-.2 1.5h-6.1l.3-1.5 4.8-4.6H29l.1-1.5zm-6.5-2.3c-.1-.1-.3-.2-.5-.3-.2-.1-.5-.1-.7-.2-.3 0-.5-.1-.8-.1h-4.8L14 39.4h1.6l.6-3.9h3.1s1.2 0 2.1-.4 1.1-1.5 1.1-1.5.1-.4.2-.9.2-1.1.2-1.5v-.5c0-.3-.1-.6-.2-.9.1-.1 0-.2-.1-.3zm-1.3 1.9s-.1.9-.3 1.8c-.1.4-.4.6-.7.7-.5.1-1.2.1-1.2.1h-2.6l.6-3.5h3.7c.2 0 .4.1.5.2s.1.2.1.3c-.1.2-.1.3-.1.4zm21.8-2.5h1.5l-1.7 10.5h-1.6l1.8-10.5zm8.3 2.9h1.5l.5 5.3 2.3-5.3h1.8l.5 5.3 2.3-5.3H62l-3.3 7.5h-1.8l-.5-5.3-2.4 5.4h-1.8l-.8-7.6z"/><path fill="#FFF" d="M40.2 31.9c-.4-.1-1.2-.2-1.8-.2s-.9 0-1.1.1c0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2-1.4-.1-1.6-.1-1.1 0-1-.8c0-.9.1-1.1.1-1.1h5.1l.2-1.2c.3-1.5.1-2.6-1.2-3zm-.3 2.8h-3.5l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2s1.1-.1 1.7 0c.2 0 .4.2.5.3.1.3 0 1 0 1zM36 37.2zm9.6 0zm4.2-5.3c-.4-.1-1.2-.2-1.8-.2s-.9 0-1.1.1c0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2c-.5.1-1 .1-1.5.1-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.2-1.7 0-2.8-1.3-3.2zm-.4 2.8H46l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2s1.1-.1 1.7 0c.2 0 .4.2.5.3.1.3-.1 1-.1 1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M63.8 31.8l1 5.5 2.8-5.5h1.6l-4.1 7.9s-.7 1.4-1.2 1.8-.7.5-1.1.6-.5.1-.9 0l-.4-.1.2-1.4s.6.1 1 0 .7-.8.7-.8l.2-.3-1.5-7.6c.1-.1 1.6-.1 1.7-.1zm5.9.8h1.6l.1-.6s.2-1.1.6-1.4c.1-.1.3-.1.6-.2.4-.1 1-.1 1.4-.1.7 0 .9 0 1.6.1s.5.8.5.8l-.1 1s-.1.5-.2.7-.5.4-.8.5c-.5.2-2.4.7-2.4.7l-1.4.4s-.9.3-1.4.8c-.4.4-.7 1-.8 1.5-.1.3-.4 2.6-.4 2.6h7.8l.3-1.6h-6.2l.1-.6s.1-.7.3-.9c.1-.1.1-.2.6-.3.3-.1 1.3-.4 1.3-.4l2.3-.6s1.3-.3 1.8-1 .7-2 .7-2 .1-1.3 0-1.7-.5-.9-.9-1.1c-.5-.2-.9-.3-2.4-.3s-2.1.1-2.8.4-1.1.7-1.4 1.4c-.2.5-.4 1.9-.4 1.9zm14.8 3.7l1.1-6.6h-1.9l-6.1 6.5-.3 1.7h5.3l-.4 2.3h1.6l.4-2.3h1.5l.3-1.6h-1.5zm-1.6 0h-3.4l4.2-4.4-.8 4.4zM26 29.8h5s1.1-.9 1.9-1.5 2.2-1.5 2.2-1.5l-2.8-1.3s-2.4 1.5-3.4 2.2c-.9.6-2.9 2.1-2.9 2.1zm10.7-3.9l-2.3-1.6c1.6-.9 3.2-1.6 4.9-2.3 2.8-1.1 4.3-1.6 4.3-1.6l.5 2.2s-2.7.9-4.2 1.6c-1.7.8-3.2 1.7-3.2 1.7zm9.1-3.7l-.4-2.3s2.9-.8 5.5-1.2S57 18 57 18l-1.2 3.5s-3-.4-5.9 0c-1.4.1-2.8.3-4.1.7zm11.8-.5l1.9-3.9s4.2-.1 7.9.5 7 1.4 6.9 1.5l-9.2 4.8s-2.2-1.4-4.8-2.2c-1.6-.4-2.7-.7-2.7-.7zm9.1 4l2 1.5h16.7s0-.5-.5-1.3c-.3-.5-.8-1-1.3-1.5-.2-.2-1-.8-1.5-1.2-1.5-1-2.3-1.3-3.8-2l-11.6 4.5z"/><path fill="#FFF" d="M27.1 31.8c-.6 0-1.2.2-1.7.5l.1-.5h-1.7l-1.3 7.5h1.7l.7-4.2c.1-.8.8-1.9 2-1.9h.9l.3-1.5c-.1.1-1 .1-1 .1z"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/przelewy24.svg b/demo/dist/img/payments/przelewy24.svg
index 498b9751f..23b079c62 100644
--- a/demo/dist/img/payments/przelewy24.svg
+++ b/demo/dist/img/payments/przelewy24.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}.st0,.st1{fill:#d13239}.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#b3b2b1}</style><path class="st0" d="M29.08 31.85h5.95l-.22 1.35-4.97 4.75 4.17-.01-.24 1.46h-6.15l.26-1.51 4.77-4.56h-3.81zM22.58 29.54c-.13-.14-.32-.24-.52-.33a4.15 4.15 0 00-.69-.19c-.26-.05-.53-.07-.79-.08-.19-.01-.31-.01-.31-.01h-4.53L14 39.4h1.62l.64-3.88 3.14.02s1.22.05 2.09-.41 1.1-1.5 1.1-1.5.1-.39.17-.86c.09-.52.17-1.14.22-1.47.02-.14.03-.24.03-.24.02-.09.02-.18.02-.27.01-.32-.07-.63-.21-.92-.06-.12-.15-.23-.24-.33zm-1.25 1.85c0 .02-.14.86-.33 1.85-.07.38-.36.59-.7.66-.55.12-1.15.1-1.15.1l-2.62-.01.58-3.48 2.38.01h.38c.29 0 .58.02.87.05.24.03.43.08.49.16.07.1.11.22.12.34 0 .1 0 .21-.02.32zM43.09 28.94h1.55L42.9 39.4h-1.56zM51.4 31.85h1.49l.53 5.31 2.3-5.32 1.84.01.55 5.33 2.29-5.33h1.55l-3.29 7.54h-1.84l-.53-5.28-2.32 5.28-1.81.01z"/><path class="st1" d="M40.21 31.91c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5c.11.63.3 1.2 1.01 1.47.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.87.1-1.34.06-1.51.05-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.41.09-2.49-1.21-2.92zm-.34 2.76h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03zM36.01 37.25v0zM45.58 37.25v0zM49.78 31.92c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5c.11.63.3 1.2 1.01 1.47.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.5.06-1.01.08-1.51.06-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.42.09-2.51-1.21-2.93zm-.35 2.75h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03z"/><path class="st0" d="M63.75 31.85l1 5.52 2.82-5.52 1.59.02-4.07 7.89s-.74 1.43-1.19 1.79-.74.52-1.11.56c-.37.04-.52.06-.88 0l-.38-.07.24-1.41s.63.12 1-.03.68-.79.68-.79l.19-.32-1.47-7.64h1.58z"/><path class="st2" d="M69.74 32.6h1.64l.1-.63s.17-1.15.57-1.37c.13-.07.33-.14.56-.18.43-.08.97-.08 1.42-.07.68.02.94.03 1.63.11s.52.75.52.75l-.14 1s-.06.45-.22.73c-.14.25-.53.41-.75.49-.54.17-2.39.65-2.39.65l-1.45.42s-.89.26-1.39.81c-.38.43-.65.95-.77 1.51-.07.33-.45 2.59-.45 2.59h7.84l.26-1.57-6.2.01.11-.64s.07-.66.34-.87c.08-.07.13-.16.62-.33.3-.11 1.31-.38 1.31-.38l2.34-.64s1.28-.33 1.78-1.03.7-2.03.7-2.03.14-1.3.03-1.7-.49-.89-.95-1.1c-.47-.21-.95-.33-2.36-.31s-2.11.08-2.82.35c-.71.27-1.13.74-1.39 1.42-.33.63-.49 2.01-.49 2.01zM84.49 36.3l1.1-6.58h-1.95l-6.06 6.51-.27 1.65h5.3l-.39 2.31h1.63l.38-2.31h1.5L86 36.3h-1.51zm-1.62.01h-3.42l4.17-4.44-.75 4.44zM26.02 29.8h4.99s1.12-.9 1.91-1.49 2.24-1.5 2.24-1.5l-2.82-1.32s-2.38 1.47-3.39 2.17c-.99.65-2.93 2.14-2.93 2.14zM36.74 25.88l-2.31-1.56c1.58-.87 3.21-1.63 4.88-2.3 2.78-1.11 4.27-1.57 4.27-1.57l.47 2.21s-2.68.9-4.21 1.62c-1.6.68-3.1 1.6-3.1 1.6zM45.75 22.18l-.4-2.26s2.86-.76 5.47-1.25 6.09-.72 6.09-.72l-1.15 3.49s-3.05-.42-5.92-.03c-1.37.18-2.74.43-4.09.77zM57.58 21.74l1.93-3.88s4.23-.08 7.88.48c3.65.57 6.98 1.43 6.91 1.47l-9.25 4.84s-2.16-1.37-4.85-2.21c-1.51-.45-2.62-.7-2.62-.7zM66.71 25.7l2.03 1.54h16.71s-.03-.54-.48-1.31c-.28-.48-.78-.99-1.31-1.52-.19-.19-.96-.79-1.54-1.17-1.47-.96-2.3-1.33-3.83-2.02L66.71 25.7z"/><path class="st1" d="M27.1 31.85c-.63 0-1.22.25-1.73.52l.09-.52H23.8l-1.33 7.51h1.66l.74-4.16c.15-.84.78-1.89 2.01-1.89h.86l.26-1.46h-.9z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D13239" d="M29.1 31.8H35l-.2 1.3-5 4.8H34l-.2 1.5h-6.1l.3-1.5 4.8-4.6H29l.1-1.5zm-6.5-2.3c-.1-.1-.3-.2-.5-.3-.2-.1-.5-.1-.7-.2-.3 0-.5-.1-.8-.1h-4.8L14 39.4h1.6l.6-3.9h3.1s1.2 0 2.1-.4 1.1-1.5 1.1-1.5.1-.4.2-.9.2-1.1.2-1.5v-.5c0-.3-.1-.6-.2-.9.1-.1 0-.2-.1-.3zm-1.3 1.9s-.1.9-.3 1.8c-.1.4-.4.6-.7.7-.5.1-1.2.1-1.2.1h-2.6l.6-3.5h3.7c.2 0 .4.1.5.2.1.1.1.2.1.3-.1.2-.1.3-.1.4zm21.8-2.5h1.5l-1.7 10.5h-1.6l1.8-10.5zm8.3 2.9h1.5l.5 5.3 2.3-5.3h1.8l.5 5.3 2.3-5.3H62l-3.3 7.5h-1.8l-.5-5.3-2.4 5.4h-1.8l-.8-7.6z"/><path fill="#D13239" d="M40.2 31.9c-.4-.1-1.2-.2-1.8-.2-.6 0-.9 0-1.1.1 0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2-1.4-.1-1.6-.1c-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.3-1.5.1-2.6-1.2-3zm-.3 2.8h-3.5l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2.3 0 1.1-.1 1.7 0 .2 0 .4.2.5.3.1.3 0 1 0 1zM36 37.2zm9.6 0zm4.2-5.3c-.4-.1-1.2-.2-1.8-.2-.6 0-.9 0-1.1.1 0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2c-.5.1-1 .1-1.5.1-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.2-1.7 0-2.8-1.3-3.2zm-.4 2.8H46l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2.3 0 1.1-.1 1.7 0 .2 0 .4.2.5.3.1.3-.1 1-.1 1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D13239" d="M63.8 31.8l1 5.5 2.8-5.5h1.6l-4.1 7.9s-.7 1.4-1.2 1.8-.7.5-1.1.6-.5.1-.9 0l-.4-.1.2-1.4s.6.1 1 0 .7-.8.7-.8l.2-.3-1.5-7.6c.1-.1 1.6-.1 1.7-.1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#B3B2B1" d="M69.7 32.6h1.6l.1-.6s.2-1.1.6-1.4c.1-.1.3-.1.6-.2.4-.1 1-.1 1.4-.1.7 0 .9 0 1.6.1s.5.8.5.8l-.1 1s-.1.5-.2.7c-.1.2-.5.4-.8.5-.5.2-2.4.7-2.4.7l-1.4.4s-.9.3-1.4.8c-.4.4-.7 1-.8 1.5-.1.3-.4 2.6-.4 2.6h7.8l.3-1.6h-6.2l.1-.6s.1-.7.3-.9c.1-.1.1-.2.6-.3.3-.1 1.3-.4 1.3-.4l2.3-.6s1.3-.3 1.8-1 .7-2 .7-2 .1-1.3 0-1.7-.5-.9-.9-1.1c-.5-.2-.9-.3-2.4-.3s-2.1.1-2.8.4-1.1.7-1.4 1.4c-.2.5-.4 1.9-.4 1.9zm14.8 3.7l1.1-6.6h-1.9l-6.1 6.5-.3 1.7h5.3l-.4 2.3h1.6l.4-2.3h1.5l.3-1.6h-1.5zm-1.6 0h-3.4l4.2-4.4-.8 4.4zM26 29.8h5s1.1-.9 1.9-1.5 2.2-1.5 2.2-1.5l-2.8-1.3s-2.4 1.5-3.4 2.2c-.9.6-2.9 2.1-2.9 2.1zm10.7-3.9l-2.3-1.6c1.6-.9 3.2-1.6 4.9-2.3 2.8-1.1 4.3-1.6 4.3-1.6l.5 2.2s-2.7.9-4.2 1.6c-1.7.8-3.2 1.7-3.2 1.7zm9.1-3.7l-.4-2.3s2.9-.8 5.5-1.2S57 18 57 18l-1.2 3.5s-3-.4-5.9 0c-1.4.1-2.8.3-4.1.7zm11.8-.5l1.9-3.9s4.2-.1 7.9.5 7 1.4 6.9 1.5l-9.2 4.8s-2.2-1.4-4.8-2.2c-1.6-.4-2.7-.7-2.7-.7zm9.1 4l2 1.5h16.7s0-.5-.5-1.3c-.3-.5-.8-1-1.3-1.5-.2-.2-1-.8-1.5-1.2-1.5-1-2.3-1.3-3.8-2l-11.6 4.5z"/><path fill="#D13239" d="M27.1 31.8c-.6 0-1.2.2-1.7.5l.1-.5h-1.7l-1.3 7.5h1.7l.7-4.2c.1-.8.8-1.9 2-1.9h.9l.3-1.5c-.1.1-1 .1-1 .1z"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/tpay-dark.svg b/demo/dist/img/payments/tpay-dark.svg
index 11c635da9..0b20da0fc 100644
--- a/demo/dist/img/payments/tpay-dark.svg
+++ b/demo/dist/img/payments/tpay-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st1{fill:#fff}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100" y1="32" x2=".273" y2="32" gradientTransform="matrix(1 0 0 -1 0 62)"><stop offset="0" stop-color="#052554"/><stop offset="1" stop-color="#4b34b3"/></linearGradient><path d="M.27 0H100v60H.27V0z" fill="url(#SVGID_1_)"/><g id="Warstwa_2"><g id="Warstwa_1-2"><path class="st1" d="M37.98 23.28c.62-.79 1.4-1.44 2.28-1.92.92-.48 1.95-.72 2.99-.71.88-.02 1.75.16 2.54.54.69.35 1.3.86 1.76 1.48.48.66.82 1.41 1.02 2.21.22.88.33 1.78.32 2.68.01 1.32-.2 2.64-.61 3.9a10.65 10.65 0 01-1.68 3.22 8.22 8.22 0 01-2.54 2.19c-1 .54-2.13.81-3.26.8-1.05.03-2.09-.19-3.03-.65a5.57 5.57 0 01-2.16-2.12l-1.76 8.25h-3.51L35 21.16h3.42l-.44 2.12zm-1.51 7.83c-.05.98.28 1.95.92 2.69.62.68 1.54 1.02 2.77 1.02.76.01 1.5-.2 2.14-.6.64-.41 1.18-.97 1.59-1.62.45-.72.79-1.51 1-2.34.23-.89.34-1.81.34-2.73 0-1.29-.29-2.28-.86-2.96a2.817 2.817 0 00-2.25-1.02c-.62-.01-1.24.11-1.81.35-.57.24-1.09.57-1.54.98-.47.43-.86.93-1.17 1.48-.32.57-.56 1.19-.7 1.83-.22.97-.37 1.94-.43 2.92zM54.56 37.58c-1.42 0-2.55-.38-3.39-1.13s-1.26-1.84-1.26-3.25c-.04-.99.22-1.98.74-2.83.5-.74 1.18-1.35 1.98-1.75.89-.45 1.84-.77 2.83-.92 1.1-.19 2.21-.3 3.33-.34l2.92-.12.09-.49c.06-.35.09-.7.09-1.05.04-.64-.2-1.27-.65-1.72-.43-.41-1.13-.62-2.12-.62-1.11 0-1.95.15-2.53.45s-1.01.88-1.33 1.74l-3.17-.34c.51-1.64 1.38-2.81 2.59-3.5s2.81-1.03 4.8-1.03c1.87 0 3.3.43 4.28 1.28.99.85 1.49 2.05 1.51 3.59 0 .3-.02.6-.06.89-.04.31-.09.63-.16.96l-2.08 9.79h-3.33l.43-2.09c-.69.7-1.48 1.31-2.34 1.8-.98.48-2.07.72-3.17.68zm6.62-8.02l-2.37.12c-.87.04-1.74.15-2.59.32-.59.11-1.15.32-1.66.63-.38.23-.68.57-.88.97-.18.41-.27.86-.26 1.31 0 .51.2 1.01.57 1.37.38.38.94.57 1.7.57.62.01 1.23-.09 1.82-.28.56-.18 1.08-.45 1.55-.8.46-.34.86-.75 1.17-1.23.32-.49.54-1.04.66-1.62l.29-1.36zM67.32 21.16h3.88l2.03 11.55 6.41-11.55h4l-10.32 17c-.49.82-.95 1.55-1.37 2.17-.37.57-.82 1.09-1.32 1.55-.45.4-.97.72-1.53.94-.63.23-1.3.34-1.98.32-.47 0-.95-.04-1.41-.14a7.83 7.83 0 01-1.25-.38l.92-2.65c.23.08.48.16.77.23.3.07.61.11.92.11.54.03 1.08-.16 1.49-.51.51-.5.94-1.08 1.28-1.71l.92-1.57-3.44-15.36zM25.8 32.06c-.04.2-.08.38-.11.54-.03.16-.05.32-.05.48 0 .6.15 1.01.45 1.23.36.24.79.36 1.22.34.65 0 1.29-.09 1.91-.28l.52 2.62c-1.05.34-2.14.5-3.24.49-1.41 0-2.5-.32-3.26-.96-.76-.64-1.14-1.6-1.13-2.89 0-.57.07-1.14.21-1.7l1.7-8.01h-7.67l.58-2.77h7.66l.92-4.3h3.51l-.92 4.31h4.29l-.58 2.77h-4.29l-1.72 8.13z"/></g></g></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="100" y1="2802.646" x2=".27" y2="2802.646" gradientTransform="translate(0 -2772.646)"><stop offset="0" stop-color="#052554"/><stop offset="1" stop-color="#4b34b3"/></linearGradient><rect fill="url(#a)" width="100" height="60" rx="4"/><path fill="#FFF" d="M38 23.3c.6-.8 1.4-1.4 2.3-1.9.9-.5 2-.7 3-.7.9 0 1.8.2 2.5.5.7.4 1.3.9 1.8 1.5.5.7.8 1.4 1 2.2.2.9.3 1.8.3 2.7 0 1.3-.2 2.6-.6 3.9-.4 1.2-.9 2.3-1.7 3.2-.7.9-1.6 1.6-2.5 2.2-1 .5-2.1.8-3.3.8-1 0-2.1-.2-3-.7-.9-.5-1.6-1.2-2.2-2.1l-1.8 8.2h-3.5l4.7-22h3.4c0 .1-.4 2.2-.4 2.2zm-1.5 7.8c0 1 .3 1.9.9 2.7.6.7 1.5 1 2.8 1 .8 0 1.5-.2 2.1-.6.6-.4 1.2-1 1.6-1.6.5-.7.8-1.5 1-2.3.2-.9.3-1.8.3-2.7 0-1.3-.3-2.3-.9-3-.6-.7-1.4-1-2.2-1-.6 0-1.2.1-1.8.4s-1.1.6-1.5 1c-.5.4-.9.9-1.2 1.5-.3.6-.6 1.2-.7 1.8-.2.9-.4 1.8-.4 2.8zm18.1 6.5c-1.4 0-2.5-.4-3.4-1.1s-1.3-1.8-1.3-3.2c0-1 .2-2 .7-2.8.5-.7 1.2-1.4 2-1.8.9-.5 1.8-.8 2.8-.9 1.1-.2 2.2-.3 3.3-.3l2.9-.1.1-.5c.1-.4.1-.7.1-1 0-.6-.2-1.3-.7-1.7-.4-.4-1.1-.6-2.1-.6-1.1 0-2 .1-2.5.5s-1 .9-1.3 1.7l-3.2-.3c.5-1.6 1.4-2.8 2.6-3.5s2.8-1 4.8-1c1.9 0 3.3.4 4.3 1.3s1.5 2 1.5 3.6c0 .3 0 .6-.1.9 0 .3-.1.6-.2 1L63 37.2h-3.3l.4-2.1c-.7.7-1.5 1.3-2.3 1.8-1 .5-2.1.7-3.2.7zm6.6-8l-2.4.1c-.9 0-1.7.1-2.6.3-.6.1-1.2.3-1.7.6-.4.2-.7.6-.9 1-.2.4-.3.9-.3 1.3 0 .5.2 1 .6 1.4.4.4.9.6 1.7.6.6 0 1.2-.1 1.8-.3.6-.2 1.1-.5 1.5-.8.5-.3.9-.8 1.2-1.2.3-.5.5-1 .7-1.6.1-.1.4-1.4.4-1.4zm6.1-8.4h3.9l2 11.5 6.4-11.5h4l-10.3 17c-.5.8-.9 1.5-1.4 2.2-.4.6-.8 1.1-1.3 1.5-.4.4-1 .7-1.5.9-.6.2-1.3.3-2 .3-.5 0-.9 0-1.4-.1-.4-.1-.8-.2-1.2-.4l.9-2.7c.2.1.5.2.8.2.3.1.6.1.9.1.5 0 1.1-.2 1.5-.5.5-.5.9-1.1 1.3-1.7l.9-1.6-3.5-15.2zM25.8 32.1c0 .2-.1.4-.1.5v.5c0 .6.1 1 .5 1.2.4.2.8.4 1.2.3.6 0 1.3-.1 1.9-.3l.5 2.6c-1 .3-2.1.5-3.2.5-1.4 0-2.5-.3-3.3-1s-1.1-1.6-1.1-2.9c0-.6.1-1.1.2-1.7l1.7-8h-7.7L17 21h7.7l.9-4.3H29l-.9 4.3h4.3l-.6 2.8h-4.3c0 .1-1.7 8.3-1.7 8.3z"/></svg>
\ No newline at end of file
diff --git a/demo/dist/img/payments/tpay.svg b/demo/dist/img/payments/tpay.svg
index 7a4a9299f..540e69b38 100644
--- a/demo/dist/img/payments/tpay.svg
+++ b/demo/dist/img/payments/tpay.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#192852}</style><g id="Warstwa_2_1_"><g id="Warstwa_1-2_1_"><path class="st0" d="M37.98 23.28c.62-.79 1.4-1.44 2.28-1.92.92-.48 1.95-.72 2.99-.71.88-.02 1.75.16 2.54.54.69.35 1.3.86 1.76 1.48.48.66.82 1.41 1.02 2.21.22.88.33 1.78.32 2.68.01 1.32-.2 2.64-.61 3.9a10.65 10.65 0 01-1.68 3.22 8.22 8.22 0 01-2.54 2.19c-1 .54-2.13.81-3.26.8-1.05.03-2.09-.19-3.03-.65a5.57 5.57 0 01-2.16-2.12l-1.76 8.25h-3.51L35 21.16h3.42l-.44 2.12zm-1.51 7.83c-.05.98.28 1.95.92 2.69.62.68 1.54 1.02 2.77 1.02.76.01 1.5-.2 2.14-.6.64-.41 1.18-.97 1.59-1.62.45-.72.79-1.51 1-2.34.23-.89.34-1.81.34-2.73 0-1.29-.29-2.28-.86-2.96a2.817 2.817 0 00-2.25-1.02c-.62-.01-1.24.11-1.81.35-.57.24-1.09.57-1.54.98-.47.43-.86.93-1.17 1.48-.32.57-.56 1.19-.7 1.83-.22.97-.37 1.94-.43 2.92zM54.56 37.58c-1.42 0-2.55-.38-3.39-1.13s-1.26-1.84-1.26-3.25c-.04-.99.22-1.98.74-2.83.5-.74 1.18-1.35 1.98-1.75.89-.45 1.84-.77 2.83-.92 1.1-.19 2.21-.3 3.33-.34l2.92-.12.09-.49c.06-.35.09-.7.09-1.05.04-.64-.2-1.27-.65-1.72-.43-.41-1.13-.62-2.12-.62-1.11 0-1.95.15-2.53.45s-1.01.88-1.33 1.74l-3.17-.34c.51-1.64 1.38-2.81 2.59-3.5s2.81-1.03 4.8-1.03c1.87 0 3.3.43 4.28 1.28.99.85 1.49 2.05 1.51 3.59 0 .3-.02.6-.06.89-.04.31-.09.63-.16.96l-2.08 9.79h-3.33l.43-2.09c-.69.7-1.48 1.31-2.34 1.8-.98.48-2.07.72-3.17.68zm6.62-8.02l-2.37.12c-.87.04-1.74.15-2.59.32-.59.11-1.15.32-1.66.63-.38.23-.68.57-.88.97-.18.41-.27.86-.26 1.31 0 .51.2 1.01.57 1.37.38.38.94.57 1.7.57.62.01 1.23-.09 1.82-.28.56-.18 1.08-.45 1.55-.8.46-.34.86-.75 1.17-1.23.32-.49.54-1.04.66-1.62l.29-1.36zM67.32 21.16h3.88l2.03 11.55 6.41-11.55h4l-10.32 17c-.49.82-.95 1.55-1.37 2.17-.37.57-.82 1.09-1.32 1.55-.45.4-.97.72-1.53.94-.63.23-1.3.34-1.98.32-.47 0-.95-.04-1.41-.14a7.83 7.83 0 01-1.25-.38l.92-2.65c.23.08.48.16.77.23.3.07.61.11.92.11.54.03 1.08-.16 1.49-.51.51-.5.94-1.08 1.28-1.71l.92-1.57-3.44-15.36zM25.8 32.06c-.04.2-.08.38-.11.54-.03.16-.05.32-.05.48 0 .6.15 1.01.45 1.23.36.24.79.36 1.22.34.65 0 1.29-.09 1.91-.28l.52 2.62c-1.05.34-2.14.5-3.24.49-1.41 0-2.5-.32-3.26-.96-.76-.64-1.14-1.6-1.13-2.89 0-.57.07-1.14.21-1.7l1.7-8.01h-7.67l.58-2.77h7.66l.92-4.3h3.51l-.92 4.31h4.29l-.58 2.77h-4.29l-1.72 8.13z"/></g></g></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#192852" d="M38 23.3c.6-.8 1.4-1.4 2.3-1.9.9-.5 2-.7 3-.7.9 0 1.8.2 2.5.5.7.4 1.3.9 1.8 1.5.5.7.8 1.4 1 2.2.2.9.3 1.8.3 2.7 0 1.3-.2 2.6-.6 3.9-.4 1.2-.9 2.3-1.7 3.2-.7.9-1.6 1.6-2.5 2.2-1 .5-2.1.8-3.3.8-1 0-2.1-.2-3-.7-.9-.5-1.6-1.2-2.2-2.1l-1.8 8.2h-3.5l4.7-22h3.4c0 .1-.4 2.2-.4 2.2zm-1.5 7.8c0 1 .3 1.9.9 2.7.6.7 1.5 1 2.8 1 .8 0 1.5-.2 2.1-.6.6-.4 1.2-1 1.6-1.6.5-.7.8-1.5 1-2.3.2-.9.3-1.8.3-2.7 0-1.3-.3-2.3-.9-3-.6-.7-1.4-1-2.2-1-.6 0-1.2.1-1.8.4s-1.1.6-1.5 1c-.5.4-.9.9-1.2 1.5-.3.6-.6 1.2-.7 1.8-.2.9-.4 1.8-.4 2.8zm18.1 6.5c-1.4 0-2.5-.4-3.4-1.1s-1.3-1.8-1.3-3.2c0-1 .2-2 .7-2.8.5-.7 1.2-1.4 2-1.8.9-.5 1.8-.8 2.8-.9 1.1-.2 2.2-.3 3.3-.3l2.9-.1.1-.5c.1-.4.1-.7.1-1 0-.6-.2-1.3-.7-1.7-.4-.4-1.1-.6-2.1-.6-1.1 0-2 .1-2.5.5s-1 .9-1.3 1.7l-3.2-.3c.5-1.6 1.4-2.8 2.6-3.5s2.8-1 4.8-1c1.9 0 3.3.4 4.3 1.3s1.5 2 1.5 3.6c0 .3 0 .6-.1.9 0 .3-.1.6-.2 1L63 37.2h-3.3l.4-2.1c-.7.7-1.5 1.3-2.3 1.8-1 .5-2.1.7-3.2.7zm6.6-8l-2.4.1c-.9 0-1.7.1-2.6.3-.6.1-1.2.3-1.7.6-.4.2-.7.6-.9 1-.2.4-.3.9-.3 1.3 0 .5.2 1 .6 1.4.4.4.9.6 1.7.6.6 0 1.2-.1 1.8-.3.6-.2 1.1-.5 1.5-.8.5-.3.9-.8 1.2-1.2.3-.5.5-1 .7-1.6.1-.1.4-1.4.4-1.4zm6.1-8.4h3.9l2 11.5 6.4-11.5h4l-10.3 17c-.5.8-.9 1.5-1.4 2.2-.4.6-.8 1.1-1.3 1.5-.4.4-1 .7-1.5.9-.6.2-1.3.3-2 .3-.5 0-.9 0-1.4-.1-.4-.1-.8-.2-1.2-.4l.9-2.7c.2.1.5.2.8.2.3.1.6.1.9.1.5 0 1.1-.2 1.5-.5.5-.5.9-1.1 1.3-1.7l.9-1.6-3.5-15.2zM25.8 32.1c0 .2-.1.4-.1.5v.5c0 .6.1 1 .5 1.2.4.2.8.4 1.2.3.6 0 1.3-.1 1.9-.3l.5 2.6c-1 .3-2.1.5-3.2.5-1.4 0-2.5-.3-3.3-1s-1.1-1.6-1.1-2.9c0-.6.1-1.1.2-1.7l1.7-8h-7.7L17 21h7.7l.9-4.3H29l-.9 4.3h4.3l-.6 2.8h-4.3c0 .1-1.7 8.3-1.7 8.3z"/></svg>
\ No newline at end of file
diff --git a/demo/docs.html b/demo/docs.html
index 0017dd644..c851691f1 100644
--- a/demo/docs.html
+++ b/demo/docs.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <meta charset="utf-8">
-  <title>Redirecting&hellip;</title>
+  <title>Redirecting…</title>
   <link rel="canonical" href="./docs/index.html">
   <meta http-equiv="refresh" content="0; url=./docs/index.html">
   <meta name="robots" content="noindex">
diff --git a/demo/dropdowns.html b/demo/dropdowns.html
index b0efe8c49..443daf759 100644
--- a/demo/dropdowns.html
+++ b/demo/dropdowns.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Dropdowns - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -617,9 +608,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/email.html b/demo/email.html
index ecbb0377b..e2710f702 100644
--- a/demo/email.html
+++ b/demo/email.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Email - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -497,7 +488,7 @@
                       </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" y2="16"></line></svg>
+                      <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>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">
@@ -509,7 +500,7 @@
                       </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" y2="7"></line></svg>
+                      <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>Tags
                     </a>
                     <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
@@ -560,9 +551,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/empty.html b/demo/empty.html
index 2ecd07f5d..c91dc30b1 100644
--- a/demo/empty.html
+++ b/demo/empty.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Empty page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -482,7 +473,7 @@
                 Try adjusting your search or filter to find what you're looking for.
               </p>
               <div class="empty-action">
-                <a href="./index.html" class="btn btn-primary">
+                <a href="./." class="btn btn-primary">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                   Search again
                 </a>
@@ -493,9 +484,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/flags.html b/demo/flags.html
index a91093534..1961254e0 100644
--- a/demo/flags.html
+++ b/demo/flags.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Flags - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -1745,9 +1736,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/forgot-password.html b/demo/forgot-password.html
index 347b17291..f28109817 100644
--- a/demo/forgot-password.html
+++ b/demo/forgot-password.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,54 +24,51 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex h-auto min-h-full justify-content-center">
-      <div class="d-flex align-items-center justify-content-center flex-fill">
-        <div class="container">
-          <div class="row">
-            <div class="col col-login mx-auto">
-              <div class="text-center mb-4">
-                <img src="./img/logo.svg" class="h-8" alt="">
-              </div>
-              <form class="card" action="" method="post">
-                <div class="card-body p-5">
-                  <div class="card-title">Forgot password</div>
-                  <p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
-                  <div class="mb-2">
-                    <label class="form-label" for="exampleInputEmail1">Email address</label>
-                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
-                  </div>
-                  <div class="form-footer">
-                    <button type="submit" class="btn btn-primary btn-block">Send me new password</button>
-                  </div>
-                </div>
-              </form>
-              <div class="text-center text-muted">
-                Forget it, <a href="./login.html">send me back</a> to the sign in screen.
-              </div>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center">
+      <div class="container-tight py-6">
+        <div class="text-center mb-4">
+          <img src="./static/logo.svg" height="36" alt="">
+        </div>
+        <form class="card card-md" action="." method="get">
+          <div class="card-body">
+            <h2 class="mb-5 text-center">Forgot password</h2>
+            <p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
+            <div class="mb-3">
+              <label class="form-label">Email address</label>
+              <input type="email" class="form-control" placeholder="Enter email">
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary btn-block">Send me new password</button>
             </div>
           </div>
+        </form>
+        <div class="text-center text-muted">
+          Forget it, <a href="./sign-in.html">send me back</a> to the sign in screen.
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/form-elements.html b/demo/form-elements.html
index 143728f53..c6d7b30da 100644
--- a/demo/form-elements.html
+++ b/demo/form-elements.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -500,6 +491,7 @@
                             </div>
                             <div class="mb-3">
                               <label class="form-label">Text</label>
+                              <div class="form-hint">Here's some more info.</div>
                               <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
                             </div>
                             <div class="mb-3">
@@ -508,12 +500,13 @@
                             </div>
                             <div class="mb-3">
                               <label class="form-label">Disabled</label>
-                              <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." 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.."
-          value="Well, how'd you become king, then?" readonly>
+	       value="Well, how'd you become king, then?" readonly>
                             </div>
                             <div class="mb-3">
                               <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
@@ -537,20 +530,36 @@
                             </div>
                             <div class="mb-3">
                               <label class="form-label">Input group</label>
-                              <div class="input-group">
-                                <input type="text" class="form-control" placeholder="Search for&hellip;">
+                              <div class="input-group mb-2">
+                                <input type="text" class="form-control" placeholder="Search for…">
                                 <span class="input-group-append">
-                                  <button class="btn btn-primary" type="button">Go!</button>
+                                  <button class="btn btn-secondary" type="button">Go!</button>
                                 </span>
                               </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">
+                                    Action
+                                  </button>
+                                  <div class="dropdown-menu">
+                                    <a class="dropdown-item" href="#">
+                                      Action
+                                    </a>
+                                    <a class="dropdown-item" href="#">
+                                      Another action
+                                    </a>
+                                  </div>
+                                </div>
+                                <input type="text" class="form-control" aria-label="Text input with dropdown button">
+                              </div>
                             </div>
                             <div class="mb-3">
                               <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-primary">Action</button>
-                                  <button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
+                                  <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
@@ -565,154 +574,176 @@
                             <div class="mb-3">
                               <label class="form-label">Icon input</label>
                               <div class="input-icon mb-3">
-                                <input type="text" class="form-control" placeholder="Search&hellip;">
+                                <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>
                                 </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"><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" width="24" 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>
                                 </span>
                                 <input type="text" class="form-control" placeholder="Username">
                               </div>
                             </div>
+                            <div class="mb-3">
+                              <label class="form-label">Loader input</label>
+                              <div class="input-icon mb-3">
+                                <input type="text" class="form-control" placeholder="Loading…">
+                                <span class="input-icon-addon">
+                                  <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+                                </span>
+                              </div>
+                              <div class="input-icon mb-3">
+                                <span class="input-icon-addon">
+                                  <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
+                                </span>
+                                <input type="text" class="form-control" placeholder="Loading…">
+                              </div>
+                            </div>
                             <div class="mb-3">
                               <label class="form-label">Separated inputs</label>
                               <div class="row row-xs">
                                 <div class="col">
-                                  <input type="text" class="form-control" placeholder="Search for&hellip;">
+                                  <input type="text" class="form-control" placeholder="Search for…">
                                 </div>
                                 <div class="col-auto">
-                                  <a href="#" class="btn btn-secondary btn-icon">
+                                  <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>
                                   </a>
                                 </div>
                               </div>
                             </div>
                             <div class="mb-3">
-                              <label class="form-label">ZIP Code</label>
+                              <label class="form-label">Input with help icon</label>
                               <div class="row row-sm">
                                 <div class="col">
-                                  <input type="text" class="form-control" placeholder="Search for&hellip;">
+                                  <input type="text" class="form-control" placeholder="Search for…">
                                 </div>
                                 <div class="col-auto align-self-center">
-                                  <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
+                                  <span class="form-help" data-toggle="popover" data-placement="top"
+			      data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
                                   <p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>
-                                  " data-html="true">?</span>
+                                  "
+                                  data-html="true">?</span>
                               </div>
                             </div>
                           </div>
                         </div>
                         <div class="col-md-6 col-xl-12">
                           <div class="mb-3">
-                            <label class="form-label">Username</label>
-                            <div class="input-group">
-                              <div class="input-group-prepend">
-                                <span class="input-group-text">@</span>
-                              </div>
-                              <input type="text" class="form-control" placeholder="username" value="">
+                            <label class="form-label">Form control rounded</label>
+                            <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
+                            <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>
+                              </span>
                             </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Subdomain</label>
-                            <div class="input-group">
-                              <input type="text" class="form-control" placeholder="subdomain" value="">
+                            <label class="form-label">Form control flush</label>
+                            <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
+                          </div>
+                          <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>
+                              <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>
+                                <span class="input-group-text">
+                                  .tabler.io
+                                </span>
                               </div>
                             </div>
-                          </div>
-                          <div class="mb-3">
-                            <label class="form-label">Your vanity URL</label>
                             <div class="input-group">
                               <div class="input-group-prepend">
-                                <span class="input-group-text">https://example.com/users/</span>
+                                <span class="input-group-text">
+                                  https://
+                                </span>
                               </div>
-                              <input type="text" class="form-control">
-                            </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>
-                              <input type="text" class="form-control">
+                              <input type="text" class="form-control"  placeholder="subdomain" >
                               <div class="input-group-append">
-                                <span class="input-group-text">.00</span>
+                                <span class="input-group-text">
+                                  .tabler.io
+                                </span>
                               </div>
                             </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Button input</label>
-                            <div class="input-group">
+                            <label class="form-label">Input with checkbox or radios</label>
+                            <div class="input-group mb-2">
                               <div class="input-group-prepend">
-                                <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
-                                  </a>
-                                  <a class="dropdown-item" href="#">
-                                    Another action
-                                  </a>
-                                </div>
+                                <span class="input-group-text">
+                                  <input class="form-check-input m-0" type="checkbox" checked>
+                                </span>
+                              </div>
+                              <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>
-                              <input type="text" class="form-control" aria-label="Text input with dropdown button">
                             </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Tags</label>
-                            <select name="tags" id="select-tags" class="form-select">
-                              <option value="dev">dev</option>
-                              <option value="live">live</option>
-                              <option value="test">test</option>
-                            </select>
+                            <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>
+                              <input type="text" class="form-control pl-0"  value="yourfancyusername">
+                            </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Top person</label>
-                            <select name="users" id="select-users" class="form-select">
-                              <option value="1">Chuck Tesla</option>
-                              <option value="2">Elon Musk</option>
-                              <option value="3" selected>Paweł Kuna</option>
-                              <option value="4">Nikola Tesla</option>
-                            </select>
+                            <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>
+                            </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Users list</label>
-                            <select name="people" id="select-people" class="form-select">
-                              <option value="1" data-data='{"image": "./static/avatars/000m.jpg"}'>Paweł Kuna</option>
-                              <option value="2" data-data='{"image": "./"}'>Jeffie Lewzey</option>
-                              <option value="3" data-data='{"image": "./static/avatars/002m.jpg"}'>Mallory Hulme</option>
-                              <option value="4" data-data='{"image": "./static/avatars/003m.jpg"}' selected>Dunn Slane</option>
-                              <option value="5" data-data='{"image": "./static/avatars/000f.jpg"}'>Emmy Levet</option>
-                              <option value="6" data-data='{"image": "./static/avatars/001f.jpg"}'>Maryjo Lebarree</option>
-                              <option value="7" data-data='{"image": "./"}'>Egan Poetz</option>
-                              <option value="8" data-data='{"image": "./static/avatars/002f.jpg"}'>Kellie Skingley</option>
-                              <option value="9" data-data='{"image": "./static/avatars/003f.jpg"}'>Christabel Charlwood</option>
-                              <option value="10" data-data='{"image": "./"}'>Haskel Shelper</option>
-                              <option value="11" data-data='{"image": "./static/avatars/006m.jpg"}'>Lorry Mion</option>
-                              <option value="12" data-data='{"image": "./static/avatars/004f.jpg"}'>Leesa Beaty</option>
-                              <option value="13" data-data='{"image": "./static/avatars/007m.jpg"}'>Perren Keemar</option>
-                              <option value="14" data-data='{"image": "./"}'>Sunny Airey</option>
-                              <option value="15" data-data='{"image": "./static/avatars/009m.jpg"}'>Geoffry Flaunders</option>
-                              <option value="16" data-data='{"image": "./static/avatars/010m.jpg"}'>Thatcher Keel</option>
-                              <option value="17" data-data='{"image": "./static/avatars/005f.jpg"}'>Dyann Escala</option>
-                              <option value="18" data-data='{"image": "./static/avatars/006f.jpg"}'>Avivah Mugleston</option>
-                              <option value="19" data-data='{"image": "./"}'>Arlie Armstead</option>
-                              <option value="20" data-data='{"image": "./static/avatars/008f.jpg"}'>Tessie Curzon</option>
-                            </select>
+                            <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>
+                            </div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Countries</label>
-                            <select name="countries" id="select-countries" class="form-select">
-                              <option value="pl" data-data='{"flag": "pl"}' selected>Poland</option>
-                              <option value="de" data-data='{"flag": "de"}'>Germany</option>
-                              <option value="cz" data-data='{"flag": "cz"}'>Czech Republic</option>
-                              <option value="br" data-data='{"flag": "br"}'>Brazil</option>
-                            </select>
+                            <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>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -727,7 +758,7 @@
                                 <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/77586f6ffa9fbc5e.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -735,7 +766,7 @@
                                 <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/552683cc4e5f0e11.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -743,7 +774,7 @@
                                 <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/3664593f945f0d8d.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -751,7 +782,7 @@
                                 <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/529078594c496ec5.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -759,7 +790,7 @@
                                 <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/a74c41b6fb7fdf34.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -767,7 +798,31 @@
                                 <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/a159fb2bff29fda4.jpg" alt="" class="form-imagecheck-image">
+                                    <img src="./static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
+                                  <span class="form-imagecheck-figure">
+                                    <img src="./static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
+                                  <span class="form-imagecheck-figure">
+                                    <img src="./static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
+                                  </span>
+                                </label>
+                              </div>
+                              <div class="col-6 col-sm-4">
+                                <label class="form-imagecheck mb-2">
+                                  <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
+                                  <span class="form-imagecheck-figure">
+                                    <img src="./static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
                                   </span>
                                 </label>
                               </div>
@@ -778,7 +833,19 @@
                             <div class="row row-xs">
                               <div class="col-auto">
                                 <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="blue" class="form-colorinput-input" />
+                                  <input name="color" type="checkbox" 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="checkbox" 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="checkbox" value="blue" class="form-colorinput-input"  checked/>
                                   <span class="form-colorinput-color bg-blue"></span>
                                 </label>
                               </div>
@@ -830,12 +897,6 @@
                                   <span class="form-colorinput-color bg-lime"></span>
                                 </label>
                               </div>
-                              <div class="col-auto">
-                                <label class="form-colorinput">
-                                  <input name="color" type="checkbox" value="green" class="form-colorinput-input" />
-                                  <span class="form-colorinput-color bg-green"></span>
-                                </label>
-                              </div>
                             </div>
                           </div>
                           <div class="mb-3">
@@ -844,12 +905,16 @@
                           </div>
                           <div class="mb-3">
                             <label class="form-label">Validation States</label>
-                            <input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
+                            <input type="text" class="form-control is-valid mb-2" placeholder="Valid State..">
                             <input type="text" class="form-control is-invalid" placeholder="Invalid State..">
                             <div class="invalid-feedback">Invalid feedback</div>
                           </div>
-                        </div>
-                        <div class="col-md-6 col-xl-12">
+                          <div class="mb-3">
+                            <label class="form-label">Subtle validation States</label>
+                            <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State..">
+                            <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
+                          </div>
+                          <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>
@@ -868,9 +933,11 @@
                               <input type="tel" class="form-control" autocomplete="off"/>
                             </div>
                           </fieldset>
+                        </div>
+                        <div class="col-md-6 col-xl-12">
                           <div class="mb-3">
-                            <label class="form-label">Your skills</label>
-                            <div class="form-selectgroup form-selectgroup-pills">
+                            <label class="form-label">Simple selectgroup</label>
+                            <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>
@@ -889,48 +956,6 @@
                               </label>
                             </div>
                           </div>
-                          <div class="mb-3">
-                            <label class="form-label">Icons input</label>
-                            <div class="form-selectgroup w-100">
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="device" value="smartphone" 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"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
-                                </span>
-                              </label>
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="device" value="tablet" 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"><rect x="4" y="2" width="16" height="20" rx="2" ry="2" transform="rotate(180 12 12)"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
-                                </span>
-                              </label>
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="device" value="monitor" 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"><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>
-                                </span>
-                              </label>
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="device" value="x" 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="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                                </span>
-                              </label>
-                            </div>
-                          </div>
-                          <div class="mb-3">
-                            <label class="form-label">Shipping methods</label>
-                            <div class="form-selectgroup form-selectgroup-vertical">
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="shipping-method" value="Unregistered" class="form-selectgroup-input" checked>
-                                <span class="form-selectgroup-box">Unregistered</span>
-                              </label>
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="shipping-method" value="Priority Mail" class="form-selectgroup-input">
-                                <span class="form-selectgroup-box">Priority Mail</span>
-                              </label>
-                              <label class="form-selectgroup-item">
-                                <input type="radio" name="shipping-method" value="Express Mail" class="form-selectgroup-input">
-                                <span class="form-selectgroup-box">Express Mail</span>
-                              </label>
-                            </div>
-                          </div>
                           <div class="mb-3">
                             <label class="form-label">Icon input</label>
                             <div class="form-selectgroup">
@@ -960,6 +985,52 @@
                               </label>
                             </div>
                           </div>
+                          <div class="mb-3">
+                            <label class="form-label">Selectgroup with icons and text</label>
+                            <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>
+                                  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>
+                              </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>
+                                  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>
+                                  Square</span>
+                              </label>
+                            </div>
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Different style</label>
+                            <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>
+                              </label>
+                              <label class="form-selectgroup-item">
+                                <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
+                                <span class="form-selectgroup-box">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>
+                              </label>
+                              <label class="form-selectgroup-item">
+                                <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
+                                <span class="form-selectgroup-box">JavaScript</span>
+                              </label>
+                            </div>
+                          </div>
                           <div class="mb-3">
                             <label class="form-label">Payment method</label>
                             <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
@@ -971,6 +1042,7 @@
                                   </div>
                                   <div>
                                     <span class="payment payment-provider-visa payment-sm mr-2"></span>
+                                    ending in <strong>7998</strong>
                                   </div>
                                 </div>
                               </label>
@@ -994,7 +1066,6 @@
                                   </div>
                                   <div>
                                     <span class="payment payment-provider-paypal payment-sm mr-2"></span>
-                                    ending in <strong>7959</strong>
                                   </div>
                                 </div>
                               </label>
@@ -1158,6 +1229,33 @@
                               </label>
                             </div>
                           </div>
+                          <div class="mb-3">
+                            <label class="form-label">Checkboxes with description</label>
+                            <label class="form-check form-check-highlight mb-2">
+                              <input class="form-check-input" type="checkbox">
+                              <div class="form-check-label">
+                                Default checkbox
+                              </div>
+                              <div class="form-check-description">
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                              </div>
+                            </label>
+                            <label class="form-check form-check-highlight mb-2">
+                              <input class="form-check-input" type="checkbox">
+                              <div class="form-check-label">
+                                Longer checkbox item that wraps on to two separate lines
+                              </div>
+                              <div class="form-check-description">
+                                Ab alias aut, consequuntur cumque esse eveniet incidunt laborum minus molestiae.
+                              </div>
+                            </label>
+                            <label class="form-check form-check-highlight">
+                              <input class="form-check-input" type="checkbox">
+                              <div class="form-check-label">
+                                Default checkbox without description
+                              </div>
+                            </label>
+                          </div>
                           <div class="mb-3">
                             <div class="form-label">Toggle switches</div>
                             <label class="form-check form-switch">
@@ -1381,7 +1479,7 @@
                           </div>
                           <div class="mb-3">
                             <label class="form-label">Autosize textarea</label>
-                            <textarea class="form-control" data-toggle="autosize" placeholder="Typing something&hellip;"></textarea>
+                            <textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
                           </div>
                         </div>
                         <div class="col-md-6 col-xl-12">
@@ -1402,114 +1500,278 @@
                             </datalist>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Input sizing</label>
-                            <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg">
-                            <input class="form-control mb-2" type="text" placeholder="Default input">
-                            <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
+                            <label class="form-label">Range input</label>
+                            <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10">
+                            <div class="form-range mb-2" id="range-simple"></div>
+                            <div class="form-range mb-2" id="range-connect"></div>
+                            <div class="form-range mb-2 text-green" id="range-color"></div>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Range input</label>
-                            <input type="range" class="form-range" min="0" max="10" step="1">
+                            <label class="form-label">Datepicker</label>
+                            <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>
+                            </div>
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Inline datepicker</label>
+                            <div id="calendar-inline"></div>
                           </div>
                           <div class="mb-3">
                             <label class="form-label">Progress</label>
-                            <div class="progress">
+                            <div class="progress mb-2">
                               <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
                                 <span class="sr-only">38% Complete</span>
                               </div>
                             </div>
+                            <div class="progress">
+                              <div class="progress-bar progress-bar-indeterminate bg-green"></div>
+                            </div>
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="card-footer text-right">
-                  <div class="d-flex">
-                    <a href="#" class="btn btn-link">Cancel</a>
-                    <button type="submit" class="btn btn-primary ml-auto">Send data</button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
+                          <div class="mb-3">
+                            <label class="form-label">Form buttons</label>
+                            <div class="btn-list">
+                              <a href="#" class="btn btn-secondary btn-block">
+                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
+                                Login with Github
+                              </a>
+                              <a href="#" class="btn btn-secondary btn-block">
+                                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" 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>
+                                Login with Twitter
+                              </a>
+                            </div>
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Tags input</label>
+                            <select name="tags" id="select-tags" class="form-select" multiple>
+                              <option value="HTML" selected>HTML</option>
+                              <option value="JavaScript" selected>JavaScript</option>
+                              <option value="CSS">CSS</option>
+                              <option value="jQuery">jQuery</option>
+                              <option value="Bootstrap" selected>Bootstrap</option>
+                              <option value="Ruby">Ruby</option>
+                              <option value="Python">Python</option>
+                            </select>
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Advanced tags input</label>
+                            <select name="tags-advanced" id="select-tags-advanced" class="form-select" multiple>
+                              <option value="HTML">HTML</option>
+                              <option value="JavaScript">JavaScript</option>
+                              <option value="CSS">CSS</option>
+                              <option value="jQuery">jQuery</option>
+                              <option value="Bootstrap">Bootstrap</option>
+                              <option value="Ruby" selected>Ruby</option>
+                              <option value="Python" selected>Python</option>
+                            </select>
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Advanced select</label>
+                            <select name="users" id="select-users" class="form-select">
+                              <option value="1">Chuck Tesla</option>
+                              <option value="2">Elon Musk</option>
+                              <option value="3" selected>Paweł Kuna</option>
+                              <option value="4">Nikola Tesla</option>
+                            </select>
+                          </div>
+                          <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>
+</select>
+</div>
+<div class="mb-3">
+  <label class="form-label">Select with flags</label>
+  <select name="countries" id="select-countries" class="form-select">
+    <option value="pl" data-data='{"flag": "pl"}' selected>Poland</option>
+    <option value="de" data-data='{"flag": "de"}'>Germany</option>
+    <option value="cz" data-data='{"flag": "cz"}'>Czech Republic</option>
+    <option value="br" data-data='{"flag": "br"}'>Brazil</option>
+  </select>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="card-footer text-right">
+  <div class="d-flex">
+    <a href="#" class="btn btn-link">Cancel</a>
+    <button type="submit" class="btn btn-primary ml-auto">Send data</button>
   </div>
-  <!-- Libs JS -->
-  <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-  <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-  <script src="./dist/libs/autosize/dist/autosize.min.js?1578694044"></script>
-  <script src="./dist/libs/imask/dist/imask.min.js?1578694044"></script>
-  <script src="./dist/libs/selectize/dist/js/standalone/selectize.min.js?1578694044"></script>
-  <!-- Tabler Core -->
-  <script src="./dist/js/tabler.min.js?1578694044"></script>
-  <script>
-    $(document).ready(function () {
-    	$('#select-tags').selectize({
-    		maxItems: 15
-    	});
-    });
-  </script>
-  <script>
-    $(document).ready(function () {
-    	$('#select-users').selectize({
-    	});
-    });
-  </script>
-  <script>
-    $(document).ready(function () {
-    	$('#select-people').selectize({
-    		render: {
-    			option: function (data, escape) {
-    				return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url(./' + data.image + ')"></span>' + escape(data.text) + '</div>';
-    			},
-    			item: function (data, escape) {
-    				return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url(./' + data.image + ')"></span>' + escape(data.text) + '</div>';
-    			}
-    		}
-    	});
-    });
-  </script>
-  <script>
-    $(document).ready(function () {
-    	$('#select-countries').selectize({
-    		render: {
-    			option: function (data, escape) {
-    				return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
-    			},
-    			item: function (data, escape) {
-    				return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
-    			}
-    		}
-    	});
-    });
-  </script>
-  <script>
-    (function () {
-    	const $elem = $('[data-mask]');
-    	if ($elem) {
-    		$elem.each(function () {
-    			IMask($(this).get(0), {
-    				mask: $(this).attr('data-mask'),
-    				lazy: $(this).attr('data-mask-visible') === 'true',
-    			});
-    		});
-    	}
-    })();
-  </script>
-  <script>
-    if (window.autosize) {
-    	(function () {
-    		const elements = document.querySelectorAll('[data-toggle="autosize"]');
-    		if (elements.length) {
-    			elements.forEach(function (element) {
-    				autosize(element);
-    			});
-    		}
-    	})();
-    }
-  </script>
+</div>
+</form>
+</div>
+</div>
+</main>
+</div>
+</div>
+</div>
+<!-- Libs JS -->
+<script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+<script src="./dist/libs/autosize/dist/autosize.min.js?1580338609"></script>
+<script src="./dist/libs/imask/dist/imask.min.js?1580338609"></script>
+<script src="./dist/libs/selectize/dist/js/standalone/selectize.min.js?1580338609"></script>
+<script src="./dist/libs/flatpickr/dist/flatpickr.min.js?1580338609"></script>
+<script src="./dist/libs/flatpickr/dist/plugins/rangePlugin.js?1580338609"></script>
+<script src="./dist/libs/nouislider/distribute/nouislider.min.js?1580338609"></script>
+<!-- Tabler Core -->
+<script src="./dist/js/tabler.min.js?1580338609"></script>
+<script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+<script>
+  // @formatter:off
+  noUiSlider.create(document.getElementById('range-simple'), {
+  	start: 20,
+  	connect: [true, false],
+  	step: 10,
+  	range: {
+  		min: 0,
+  		max: 100
+  	}
+  });
+  // @formatter:on
+</script>
+<script>
+  // @formatter:off
+  noUiSlider.create(document.getElementById('range-connect'), {
+  	start: [60, 90],
+  	connect: [false, true, false],
+  	step: 10,
+  	range: {
+  		min: 0,
+  		max: 100
+  	}
+  });
+  // @formatter:on
+</script>
+<script>
+  // @formatter:off
+  noUiSlider.create(document.getElementById('range-color'), {
+  	start: 40,
+  	connect: [true, false],
+  	step: 10,
+  	range: {
+  		min: 0,
+  		max: 100
+  	}
+  });
+  // @formatter:on
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+  	flatpickr(document.getElementById('calendar-simple'), {
+  	});
+  });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+  	flatpickr(document.getElementById('calendar-time'), {
+  	});
+  });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+  	flatpickr(document.getElementById('calendar-inline'), {
+  		inline: true,
+  	});
+  });
+</script>
+<script>
+  $(document).ready(function () {
+  	$('#select-tags').selectize({
+  		maxItems: 15,
+  	});
+  });
+</script>
+<script>
+  $(document).ready(function () {
+  	$('#select-tags-advanced').selectize({
+  		maxItems: 15,
+  		plugins: ['remove_button'],
+  	});
+  });
+</script>
+<script>
+  $(document).ready(function () {
+  	$('#select-users').selectize({
+  	});
+  });
+</script>
+<script>
+  $(document).ready(function () {
+  	$('#select-people').selectize({
+  		render: {
+  			option: function (data, escape) {
+  				return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
+  			},
+  			item: function (data, escape) {
+  				return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
+  			}
+  		}
+  	});
+  });
+</script>
+<script>
+  $(document).ready(function () {
+  	$('#select-countries').selectize({
+  		render: {
+  			option: function (data, escape) {
+  				return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
+  			},
+  			item: function (data, escape) {
+  				return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
+  			}
+  		}
+  	});
+  });
+</script>
+<script>
+  (function () {
+  	const $elem = $('[data-mask]');
+  	if ($elem) {
+  		$elem.each(function () {
+  			IMask($(this).get(0), {
+  				mask: $(this).attr('data-mask'),
+  				lazy: $(this).attr('data-mask-visible') === 'true',
+  			});
+  		});
+  	}
+  })();
+</script>
+<script>
+  (function () {
+  	const elements = document.querySelectorAll('[data-toggle="autosize"]');
+  	if (elements.length) {
+  		elements.forEach(function (element) {
+  			autosize(element);
+  		});
+  	}
+  })();
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/demo/gallery.html b/demo/gallery.html
index 2a93d80e5..afb6b94b5 100644
--- a/demo/gallery.html
+++ b/demo/gallery.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Gallery - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -489,7 +480,7 @@
                   <div class="d-flex">
                     <div class="mr-3">
                       <div class="input-icon">
-                        <input type="text" class="form-control" placeholder="Search&hellip;">
+                        <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>
                         </span>
@@ -818,9 +809,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/homepage.html b/demo/homepage.html
index dca26f000..cc1501856 100644
--- a/demo/homepage.html
+++ b/demo/homepage.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Homepage - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -625,9 +616,9 @@
                   <table class="table card-table table-vcenter">
                     <tr>
                       <td class="w-1 pr-0">
-                        <label class="custom-control custom-checkbox m-0">
-                          <input type="checkbox" class="custom-control-input" name="" value="" checked>
-                          <span class="custom-control-label"></span>
+                        <label class="form-check m-0">
+                          <input type="checkbox" class="form-check-input" checked>
+                          <span class="form-check-label"></span>
                         </label>
                       </td>
                       <td class="w-100">
@@ -638,12 +629,14 @@
                         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>
-                          2/7</a>
+                        <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>
+                          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>
-                          3</a>
+                        <a href="#" class="text-muted">
+                          % include ui/icon.html icon="message-square" %} 3</a>
                       </td>
                       <td>
                         <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
@@ -651,9 +644,9 @@
                     </tr>
                     <tr>
                       <td class="w-1 pr-0">
-                        <label class="custom-control custom-checkbox m-0">
-                          <input type="checkbox" class="custom-control-input" name="" value="">
-                          <span class="custom-control-label"></span>
+                        <label class="form-check m-0">
+                          <input type="checkbox" class="form-check-input">
+                          <span class="form-check-label"></span>
                         </label>
                       </td>
                       <td class="w-100">
@@ -664,12 +657,14 @@
                         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>
-                          3/10</a>
+                        <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>
+                          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>
-                          6</a>
+                        <a href="#" class="text-muted">
+                          % include ui/icon.html icon="message-square" %} 6</a>
                       </td>
                       <td>
                         <span class="avatar avatar-sm">JL</span>
@@ -677,9 +672,9 @@
                     </tr>
                     <tr>
                       <td class="w-1 pr-0">
-                        <label class="custom-control custom-checkbox m-0">
-                          <input type="checkbox" class="custom-control-input" name="" value="">
-                          <span class="custom-control-label"></span>
+                        <label class="form-check m-0">
+                          <input type="checkbox" class="form-check-input">
+                          <span class="form-check-label"></span>
                         </label>
                       </td>
                       <td class="w-100">
@@ -690,12 +685,14 @@
                         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>
-                          0/6</a>
+                        <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>
+                          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>
-                          1</a>
+                        <a href="#" class="text-muted">
+                          % include ui/icon.html icon="message-square" %} 1</a>
                       </td>
                       <td>
                         <span class="avatar avatar-sm" style="background-image: url(./static/avatars/002m.jpg)"></span>
@@ -703,9 +700,9 @@
                     </tr>
                     <tr>
                       <td class="w-1 pr-0">
-                        <label class="custom-control custom-checkbox m-0">
-                          <input type="checkbox" class="custom-control-input" name="" value="" checked>
-                          <span class="custom-control-label"></span>
+                        <label class="form-check m-0">
+                          <input type="checkbox" class="form-check-input" checked>
+                          <span class="form-check-label"></span>
                         </label>
                       </td>
                       <td class="w-100">
@@ -716,12 +713,14 @@
                         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>
-                          6/10</a>
+                        <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>
+                          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>
-                          12</a>
+                        <a href="#" class="text-muted">
+                          % include ui/icon.html icon="message-square" %} 12</a>
                       </td>
                       <td>
                         <span class="avatar avatar-sm" style="background-image: url(./static/avatars/003m.jpg)"></span>
@@ -729,9 +728,9 @@
                     </tr>
                     <tr>
                       <td class="w-1 pr-0">
-                        <label class="custom-control custom-checkbox m-0">
-                          <input type="checkbox" class="custom-control-input" name="" value="">
-                          <span class="custom-control-label"></span>
+                        <label class="form-check m-0">
+                          <input type="checkbox" class="form-check-input">
+                          <span class="form-check-label"></span>
                         </label>
                       </td>
                       <td class="w-100">
@@ -742,12 +741,14 @@
                         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>
-                          3/7</a>
+                        <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>
+                          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>
-                          5</a>
+                        <a href="#" class="text-muted">
+                          % include ui/icon.html icon="message-square" %} 5</a>
                       </td>
                       <td>
                         <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000f.jpg)"></span>
@@ -916,11 +917,11 @@
     </div>
   </div>
   <!-- Libs JS -->
-  <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-  <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-  <script src="./dist/libs/peity/jquery.peity.min.js?1578694044"></script>
+  <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+  <script src="./dist/libs/peity/jquery.peity.min.js?1580338609"></script>
   <!-- Tabler Core -->
-  <script src="./dist/js/tabler.min.js?1578694044"></script>
+  <script src="./dist/js/tabler.min.js?1580338609"></script>
+  <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   <script>
     document.addEventListener("DOMContentLoaded", function () {
     	$().peity && $('#sparkline-7').text("4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10").peity("bar", {
diff --git a/demo/icons.html b/demo/icons.html
index a68a8b5d6..4c8fc4cec 100644
--- a/demo/icons.html
+++ b/demo/icons.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Icons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -497,13 +488,13 @@
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="16"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="16"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="17"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -617,7 +608,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 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" y2="20"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
@@ -677,7 +668,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 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" y2="16"></line><line x1="8" y1="20" x2="8" y2="20"></line><line x1="12" y1="18" x2="12" y2="18"></line><line x1="12" y1="22" x2="12" y2="22"></line><line x1="16" y1="16" x2="16" y2="16"></line><line x1="16" y1="20" x2="16" y2="20"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
@@ -854,7 +845,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 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="16"></line><line x1="10" y1="16" x2="10" y2="16"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -866,7 +857,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 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="17"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -881,10 +872,10 @@
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="8"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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.5" y2="6.5"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -911,7 +902,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 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="6"></line><line x1="3" y1="12" x2="3" y2="12"></line><line x1="3" y1="18" x2="3" y2="18"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -1106,7 +1097,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 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="6"></line><line x1="6" y1="18" x2="6" y2="18"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -1151,13 +1142,13 @@
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="18"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="6"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -1178,10 +1169,10 @@
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" transform="rotate(180 12 12)"></rect><line x1="12" y1="18" x2="12" y2="18"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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" y2="7"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
@@ -1292,10 +1283,10 @@
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="20"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" y2="20"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon 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>
                         </li>
                         <li class="icons-list-item">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
@@ -3609,9 +3600,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index d2f1a1081..ef07b64df 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Dashboard - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item active">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -489,22 +480,25 @@
                 <div class="col-auto ml-auto d-print-none">
                   <span class="d-none d-sm-inline">
                     <a href="#" class="btn btn-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"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                       New view
                     </a>
                   </span>
-                  <a href="#" class="btn btn-primary ml-3">
+                  <a href="#" class="btn btn-primary ml-3 d-none d-sm-inline-block">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                     Create new report
                   </a>
+                  <a href="#" class="btn btn-primary ml-3 d-sm-none btn-icon" 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>
+                  </a>
                 </div>
               </div>
             </div>
-            <div class="row row-deck">
+            <div class="row row-deck row-cards">
               <div class="col-sm-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <div class="d-flex">
-                      <div>Sales</div>
+                    <div class="d-flex align-items-center">
+                      <div class="subheader">Sales</div>
                       <div class="ml-auto">
                         <div class="dropdown">
                           <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -538,8 +532,8 @@
               <div class="col-sm-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <div class="d-flex">
-                      <div>Revenue</div>
+                    <div class="d-flex align-items-center">
+                      <div class="subheader">Revenue</div>
                       <div class="ml-auto">
                         <div class="dropdown">
                           <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -568,8 +562,8 @@
               <div class="col-sm-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <div class="d-flex">
-                      <div>New clients</div>
+                    <div class="d-flex align-items-center">
+                      <div class="subheader">New clients</div>
                       <div class="ml-auto">
                         <div class="dropdown">
                           <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -598,8 +592,8 @@
               <div class="col-sm-6 col-lg-3">
                 <div class="card">
                   <div class="card-body">
-                    <div class="d-flex">
-                      <div>Active users</div>
+                    <div class="d-flex align-items-center">
+                      <div class="subheader">Active users</div>
                       <div class="ml-auto">
                         <div class="dropdown">
                           <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -625,9 +619,25 @@
                   </div>
                 </div>
               </div>
+              <div class="col-lg-7">
+                <div class="card">
+                  <div class="card-body">
+                    <h3 class="card-title">Traffic summary</h3>
+                    <div id="chart-mentions"  class="chart-lg" ></div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-5">
+                <div class="card">
+                  <div class="card-body">
+                    <h3 class="card-title">Top countries</h3>
+                    <div id="map-world" style="height: 15rem"></div>
+                  </div>
+                </div>
+              </div>
               <div class="col-lg-6">
-                <div class="row">
-                  <div class="col-md-6">
+                <div class="row row-cards">
+                  <div class="col-sm-6">
                     <div class="card">
                       <div class="card-body p-4 py-5 text-center">
                         <span class="avatar avatar-xl mb-4">W</span>
@@ -653,7 +663,7 @@
                       </div>
                     </div>
                   </div>
-                  <div class="col-md-6">
+                  <div class="col-sm-6">
                     <div class="card">
                       <div class="card-body p-4 py-5 text-center">
                         <span class="avatar avatar-xl mb-4 bg-green-lt">W</span>
@@ -718,16 +728,6 @@
                   </div>
                 </div>
               </div>
-              <div class="col-lg-6">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">Top users</h3>
-                  </div>
-                  <div class="card-body">
-                    <div id="map-world" style="height: 20rem"></div>
-                  </div>
-                </div>
-              </div>
               <div class="col-lg-6">
                 <div class="card">
                   <div id="chart-development-activity"  class="mt-4" ></div>
@@ -786,14 +786,6 @@
                   </div>
                 </div>
               </div>
-              <div class="col-lg-6">
-                <div class="row row-deck">
-                  <div class="col-md-12">
-                  </div>
-                  <div class="col-md-12">
-                  </div>
-                </div>
-              </div>
               <div class="col-sm-6 col-xl-3">
                 <div class="card">
                   <div class="card-body p-3 d-flex align-items-center">
@@ -852,6 +844,18 @@
                   </div>
                 </div>
               </div>
+            </div>
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Invoices
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="row row-deck row-cards">
               <div class="col-12">
                 <div class="card">
                   <div class="card-header">
@@ -899,7 +903,7 @@
                       </thead>
                       <tbody>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001401</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Design Works</a></td>
                           <td>
@@ -935,7 +939,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001402</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">UX Wireframes</a></td>
                           <td>
@@ -971,7 +975,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001403</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">New Dashboard</a></td>
                           <td>
@@ -1007,7 +1011,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001404</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Landing Page</a></td>
                           <td>
@@ -1043,7 +1047,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001405</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Marketing Templates</a></td>
                           <td>
@@ -1079,7 +1083,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001406</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Sales Presentation</a></td>
                           <td>
@@ -1115,7 +1119,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001407</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Logo & Print</a></td>
                           <td>
@@ -1151,7 +1155,7 @@
                           </td>
                         </tr>
                         <tr>
-                          <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+                          <td><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select invoice"></td>
                           <td><span class="text-muted">001408</span></td>
                           <td><a href="invoice.html" class="text-reset" tabindex="-1">Icons</a></td>
                           <td>
@@ -1234,7 +1238,7 @@
                           <td>
                             <div>Eva Acres</div>
                             <div class="small text-muted">
-                              Registered: Dec 14, 2019
+                              Registered: Jan 2, 2020
                             </div>
                           </td>
                           <td>
@@ -1289,7 +1293,7 @@
                           <td>
                             <div>Jermaine Booley</div>
                             <div class="small text-muted">
-                              Registered: Nov 27, 2019
+                              Registered: Dec 16, 2019
                             </div>
                           </td>
                           <td>
@@ -1344,7 +1348,7 @@
                           <td>
                             <div>Juanita Nobles</div>
                             <div class="small text-muted">
-                              Registered: Jan 2, 2020
+                              Registered: Jan 21, 2020
                             </div>
                           </td>
                           <td>
@@ -1399,7 +1403,7 @@
                           <td>
                             <div>Nanni Wooler</div>
                             <div class="small text-muted">
-                              Registered: Oct 12, 2019
+                              Registered: Oct 31, 2019
                             </div>
                           </td>
                           <td>
@@ -1454,7 +1458,7 @@
                           <td>
                             <div>Mela Sydes</div>
                             <div class="small text-muted">
-                              Registered: Nov 29, 2019
+                              Registered: Dec 18, 2019
                             </div>
                           </td>
                           <td>
@@ -1509,7 +1513,7 @@
                           <td>
                             <div>Price Letixier</div>
                             <div class="small text-muted">
-                              Registered: Dec 15, 2019
+                              Registered: Jan 3, 2020
                             </div>
                           </td>
                           <td>
@@ -1564,7 +1568,7 @@
                           <td>
                             <div>Beatrix Ladewig</div>
                             <div class="small text-muted">
-                              Registered: Nov 18, 2019
+                              Registered: Dec 7, 2019
                             </div>
                           </td>
                           <td>
@@ -1619,7 +1623,7 @@
                           <td>
                             <div>Donnie Biggin</div>
                             <div class="small text-muted">
-                              Registered: Oct 18, 2019
+                              Registered: Nov 6, 2019
                             </div>
                           </td>
                           <td>
@@ -1678,16 +1682,16 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1578694044"></script>
-    <script src="./dist/libs/peity/jquery.peity.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1580338609"></script>
+    <script src="./dist/libs/peity/jquery.peity.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {
@@ -1703,6 +1707,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1716,10 +1723,29 @@
       			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',
       		},
-      		labels: [...Array(30).keys()].map(n => '2019-09-' + (n + 1)),
+      		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,
@@ -1759,10 +1785,26 @@
       			name: "April",
       			data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
       		}],
+      		grid: {
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(30).keys()].map(n => '2019-09-' + (n + 1)),
+      		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", "#aeb3bc"],
       		legend: {
       			show: false,
@@ -1786,6 +1828,14 @@
       				enabled: false
       			},
       		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: 1,
       		},
@@ -1793,10 +1843,29 @@
       			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',
       		},
-      		labels: [...Array(30).keys()].map(n => '2019-09-' + (n + 1)),
+      		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,
@@ -1805,6 +1874,97 @@
       });
       // @formatter:on
     </script>
+    <script>
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-mentions'), {
+      		chart: {
+      			type: "bar",
+      			fontFamily: 'inherit',
+      			height: 240,
+      			parentHeightOffset: 0,
+      			toolbar: {
+      				show: false,
+      			},
+      			animations: {
+      				enabled: false
+      			},
+      			stacked: true,
+      		},
+      		plotOptions: {
+      			bar: {
+      				columnWidth: '50%',
+      			}
+      		},
+      		dataLabels: {
+      			enabled: false,
+      		},
+      		fill: {
+      			opacity: 1,
+      		},
+      		series: [{
+      			name: "Web",
+      			data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
+      		},{
+      			name: "Social",
+      			data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
+      		},{
+      			name: "Other",
+      			data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
+      		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -8
+      			},
+      			strokeDashArray: 4,
+      			xaxis: {
+      				lines: {
+      					show: true
+      				}
+      			},
+      		},
+      		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', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26'
+      		],
+      		colors: ["#206bc4", "#79a6dc", "#bfe399"],
+      		legend: {
+      			show: true,
+      			position: 'bottom',
+      			height: 32,
+      			offsetY: -12,
+      			markers: {
+      				width: 8,
+      				height: 8,
+      				radius: 100,
+      			},
+      			itemMargin: {
+      				horizontal: 8,
+      			},
+      		},
+      	})).render();
+      });
+      // @formatter:on
+    </script>
     <script>
       document.addEventListener("DOMContentLoaded", function() {
          $('#map-world').vectorMap({
@@ -1838,6 +1998,9 @@
       				enabled: false
       			},
       		},
+      		dataLabels: {
+      			enabled: false,
+      		},
       		fill: {
       			opacity: .16,
       			type: 'solid'
@@ -1851,10 +2014,29 @@
       			name: "Purchases",
       			data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
       		}],
+      		grid: {
+      			strokeDashArray: 4,
+      		},
       		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			axisBorder: {
+      				show: false,
+      			},
       			type: 'datetime',
       		},
-      		labels: [...Array(30).keys()].map(n => '2019-09-' + (n + 1)),
+      		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,
diff --git a/demo/invoice.html b/demo/invoice.html
index 8bda65f70..61d357d75 100644
--- a/demo/invoice.html
+++ b/demo/invoice.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Invoice - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -580,9 +571,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/tmp2.html b/demo/layout-dark-navigation.html
similarity index 59%
rename from demo/tmp2.html
rename to demo/layout-dark-navigation.html
index 4422b4129..8da63453a 100644
--- a/demo/tmp2.html
+++ b/demo/layout-dark-navigation.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-dark bg-dark text-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -255,13 +237,12 @@
                     </li>
                   </ul>
                 </li>
-                <li class="nav-item">
+                <li class="nav-item active">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -478,170 +469,216 @@
               <div class="row align-items-center">
                 <div class="col-auto">
                   <h2 class="page-title">
-                    Search results
+                    Page Layouts
                   </h2>
                 </div>
               </div>
             </div>
-            <div class="row">
-              <div class="col-8">
-                <div class="card">
-                  <div class="card-body">
-                    <div>
-                      <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>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" checked>
-                          <span class="form-selectgroup-box">
-                            CSS
-                          </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>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="Ruby" class="form-selectgroup-input">
-                          <span class="form-selectgroup-box">
-                            Ruby
-                          </span>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="GraphSQL" class="form-selectgroup-input">
-                          <span class="form-selectgroup-box">
-                            GraphSQL
-                          </span>
-                        </label>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
                       </div>
-                    </div>
-                    <div class="mt-4">
-                      <div class="form-selectgroup">
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="home" class="form-selectgroup-input" checked>
-                          <div 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>home</span>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="check-square" class="form-selectgroup-input" checked>
-                          <div 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"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                            <span>check-square</span>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="pie-chart" class="form-selectgroup-input">
-                          <div 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="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                            <span>pie-chart</span>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="users" class="form-selectgroup-input">
-                          <div 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>
-                            <span>users</span>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="circle" class="form-selectgroup-input">
-                          <div 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>circle</span>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="square" class="form-selectgroup-input">
-                          <div 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>square</span>
-                          </div>
-                        </label>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
-                    <div class="mt-4">
-                      <div class="form-selectgroup">
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="home" class="form-selectgroup-input" checked>
-                          <div 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="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>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="check-square" class="form-selectgroup-input" checked>
-                          <div 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"><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>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="pie-chart" class="form-selectgroup-input">
-                          <div 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.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="users" class="form-selectgroup-input">
-                          <div 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="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>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="circle" class="form-selectgroup-input">
-                          <div 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="10"></circle></svg>
-                          </div>
-                        </label>
-                        <label class="form-selectgroup-item">
-                          <input type="checkbox" name="name" value="square" class="form-selectgroup-input">
-                          <div 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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
-                          </div>
-                        </label>
-                      </div>
-                    </div>
-                    <div class="mt-4">
-                      <input type="checkbox" class="form-check-input" checked>
-                      <input type="radio" class="form-check-input" checked> lorem haha
-                    </div>
                   </div>
-                </div>
-              </div>
-              <div class="col">
-                <div class="card">
-                  <div class="card-header">
-                    <h3 class="card-title">
-                      Configuration
-                    </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>
-                      </a>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
                     </div>
                   </div>
-                  <div class="card-body">
-                    <dl class="row">
-                      <dt class="col-5">Date:</dt>
-                      <dd class="col-7">2020-01-05 16:42:29 UTC</dd>
-                      <dt class="col-5">Account:</dt>
-                      <dd class="col-7">tabler</dd>
-                      <dt class="col-5">Location:</dt>
-                      <dd class="col-7"><span class="flag flag-country-pl"></span>
-                        Poland</dd>
-                      <dt class="col-5">IP Address:</dt>
-                      <dd class="col-7">46.113.11.3</dd>
-                      <dt class="col-5">Operating system:</dt>
-                      <dd class="col-7">OS X 10.15.2 64-bit</dd>
-                      <dt class="col-5">Browser:</dt>
-                      <dd class="col-7">Chrome</dd>
-                    </dl>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -651,9 +688,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/layout-dark-topnav.html b/demo/layout-dark-topnav.html
new file mode 100644
index 000000000..c229dea0f
--- /dev/null
+++ b/demo/layout-dark-topnav.html
@@ -0,0 +1,696 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-dark bg-dark text-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo-white.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
+            <div class="container">
+              <ul class="navbar-nav flex-wrap flex-fill">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    </span>
+                    Dashboard
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    </span>
+                    Form elements
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </span>
+                    Base
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                    </span>
+                    A
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="./layouts.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                    </span>
+                    Layouts
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                    Extra
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/layout.html" >
+                        Layout
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layout-test.html b/demo/layout-dark.html
similarity index 59%
rename from demo/layout-test.html
rename to demo/layout-dark.html
index a8af0c199..1b2f6f25e 100644
--- a/demo/layout-test.html
+++ b/demo/layout-dark.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -23,44 +22,48 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Layout test - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -120,9 +121,9 @@
                     Form elements
                   </a>
                 </li>
-                <li class="nav-item active dropdown">
+                <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			aria-expanded="true" >
+			aria-expanded="false" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                     </span>
@@ -135,7 +136,7 @@
                       </a>
                     </li>
                     <li >
-                      <a class="dropdown-item active" href="./buttons.html" >
+                      <a class="dropdown-item" href="./buttons.html" >
                         Buttons
                         <span class="badge bg-green ml-auto">New</span>
                       </a>
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -255,13 +237,12 @@
                     </li>
                   </ul>
                 </li>
-                <li class="nav-item">
+                <li class="nav-item active">
                   <a class="nav-link" href="./layouts.html" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -478,54 +469,217 @@
               <div class="row align-items-center">
                 <div class="col-auto">
                   <h2 class="page-title">
-                    Layout test
+                    Page Layouts
                   </h2>
                 </div>
-                <!-- Page title actions -->
-                <div class="col-auto ml-auto d-print-none">
-                  <div class="d-flex">
-                    <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
-                      <li class="breadcrumb-item"><a href="#">Home</a></li>
-                      <li class="breadcrumb-item"><a href="#">Library</a></li>
-                      <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
-                    </ol>
-                  </div>
-                </div>
               </div>
             </div>
-            <div class="card" id="card-test">
+            <div class="card card-lg">
               <div class="card-body">
-                <!--      <a href="#" class="btn btn-secondary btn-block" data-toggle="menubar">sidebar</a>-->
-                <div id="card-size"></div>
-                <div>
-                  <h1>Well, she turned me into a newt.</h1>
-                  <p>We want a shrubbery!! Burn her anyway! You don't vote for kings. Where'd you get the coconuts?</p>
-                  <p>And this isn't my nose. This is a false one. But you are dressed as one… Oh, ow! I don't want to talk to you no more, you empty-headed animal food trough water! <strong> I fart in your general direction!</strong> <em> Your mother was a hamster and your father smelt of elderberries!</em> Now leave before I am forced to taunt you a second time!</p>
-                  <h2>Burn her!</h2>
-                  <p>We shall say 'Ni' again to you, if you do not appease us. The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
-                  <ol>
-                    <li>Oh, ow!</li>
-                    <li>Be quiet!</li>
-                    <li>Well, we did do the nose.</li>
-                  </ol>
-                  <h3>What a strange person.</h3>
-                  <p>Well, she turned me into a newt. And the hat. She's a witch! Well, how'd you become king, then? She looks like one. Look, my liege!</p>
-                  <ul>
-                    <li>We found them.</li>
-                    <li>Well, how'd you become king, then?</li>
-                    <li>Did you dress her up like this?</li>
-                  </ul>
-                  <p>It's only a model. I'm not a witch. Who's that then? Did you dress her up like this? Look, my liege!</p>
-                  <p>Well, she turned me into a newt. The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.</p>
-                  <p>Oh, ow! Look, my liege! Burn her! You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Well, Mercia's a temperate zone!</p>
-                  <p>Well, how'd you become king, then? How do you know she is a witch? We shall say 'Ni' again to you, if you do not appease us. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you!</p>
-                  <p>Look, my liege! I dunno. Must be a king. A newt? What do you mean? Oh, ow! He hasn't got shit all over him.</p>
-                  <p>Now, look here, my good man. She looks like one. And this isn't my nose. This is a false one. Bring her forward!</p>
-                  <p>You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Camelot! Well, how'd you become king, then? Why?</p>
-                  <p>And the hat. She's a witch! It's only a model. Well, how'd you become king, then? Well, I didn't vote for you. Why?</p>
-                  <p>Ni! Ni! Ni! Ni! Ni! Ni! Ni! Ni! Camelot! We shall say 'Ni' again to you, if you do not appease us. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed!</p>
-                  <p>Why do you think that she is a witch? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Where'd you get the coconuts? …Are you suggesting that coconuts migrate?</p>
-                  <p>Well, what do you want? Did you dress her up like this? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. On second thoughts, let's not go there. It is a silly place.</p>
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -534,22 +688,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
-    <script>
-      $(document).ready(function () {
-      	var $test_el = $('#card-test'),
-      		$test_body_el = $('#card-size'),
-      		test_width = function () {
-      			$test_body_el.text($test_el.width());
-      		};
-      	test_width();
-      	$(window).on('resize', function () {
-      		test_width();
-      	});
-      });
-    </script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/layout-sidebar-dark.html b/demo/layout-sidebar-dark.html
new file mode 100644
index 000000000..1cce3fab0
--- /dev/null
+++ b/demo/layout-sidebar-dark.html
@@ -0,0 +1,751 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <aside class="sidebar sidebar-dark">
+        <!-- Sidebar logo -->
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        </a>
+        <div class="sidebar-content">
+          <div>
+            <!-- Sidebar menu -->
+            <ul class="sidebar-nav">
+              <li class="sidebar-nav-title">Navigation</li>
+              <li class="sidebar-nav-item">
+                <a href="./index.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Dashboard</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  <span class="nav-text">Form elements</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
+                  <li class="sidebar-nav-item">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
+                      <span>Calendar</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./lists.html" class="sidebar-nav-link" >
+                      <span>Lists</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
+                      <span>Users</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
+                      <span>Gallery</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-authentication">
+                      <span>Authentication</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-authentication">
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-in.html" class="sidebar-nav-link">
+                          <span>Sign in</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-up.html" class="sidebar-nav-link">
+                          <span>Sign up</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./forgot-password.html" class="sidebar-nav-link">
+                          <span>Forgot password</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./terms-of-service.html" class="sidebar-nav-link">
+                          <span>Terms of service</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
+                      <span>Error pages</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
+                      <li class="sidebar-nav-item">
+                        <a href="./400.html" class="sidebar-nav-link">
+                          <span>400 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./401.html" class="sidebar-nav-link">
+                          <span>401 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./403.html" class="sidebar-nav-link">
+                          <span>403 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./404.html" class="sidebar-nav-link">
+                          <span>404 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./500.html" class="sidebar-nav-link">
+                          <span>500 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./503.html" class="sidebar-nav-link">
+                          <span>503 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./maintenance.html" class="sidebar-nav-link">
+                          <span>Maintenance page</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link active" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <span class="nav-text">Layouts</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
+                  <li class="sidebar-nav-item">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
+                      <span>Invoice</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./snippets.html" class="sidebar-nav-link" >
+                      <span>Snippets</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./search-results.html" class="sidebar-nav-link" >
+                      <span>Search results</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
+                      <span>Alerts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
+                      <span>Autosize</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
+                      <span>Avatars</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
+                      <span>Badges</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
+                      <span>Breadcrumb</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
+                      <span>Colors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
+                      <span>Cursors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
+                      <span>Divider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
+                      <span>Empty states</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
+                      <span>Flags</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
+                      <span>Form elements</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
+                      <span>Form helpers</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
+                      <span>Form input mask</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/layout.html" class="sidebar-nav-link" >
+                      <span>Layout</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
+                      <span>Progress</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/payments.html" class="sidebar-nav-link" >
+                      <span>Payments</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/range-slider.html" class="sidebar-nav-link" >
+                      <span>Range slider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
+                      <span>Ribbons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
+                      <span>Spinners</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
+                      <span>Steps</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
+                      <span>Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
+                      <span>Tabs</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
+                      <span>Timelines</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
+                      <span>Toasts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
+                      <span>Tooltips</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
+                      <span>Typography</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <div class="hide-sidebar-narrow">
+              <hr>
+              <div class="text-muted">
+                <div class="mb-2">
+                  <strong>160MB</strong> from <strong>2GB</strong> used.
+                </div>
+                <div class="progress progress-sm">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-auto hide-sidebar-narrow pt-3">
+            <a href="#" class="btn btn-primary btn-block">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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>
+              Logout
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layout-sidebar-narrow.html b/demo/layout-sidebar-narrow.html
new file mode 100644
index 000000000..921d4be33
--- /dev/null
+++ b/demo/layout-sidebar-narrow.html
@@ -0,0 +1,751 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <aside class="sidebar sidebar-dark sidebar-narrow">
+        <!-- Sidebar logo -->
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        </a>
+        <div class="sidebar-content">
+          <div>
+            <!-- Sidebar menu -->
+            <ul class="sidebar-nav">
+              <li class="sidebar-nav-title">Navigation</li>
+              <li class="sidebar-nav-item">
+                <a href="./index.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Dashboard</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  <span class="nav-text">Form elements</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
+                  <li class="sidebar-nav-item">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
+                      <span>Calendar</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./lists.html" class="sidebar-nav-link" >
+                      <span>Lists</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
+                      <span>Users</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
+                      <span>Gallery</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-authentication">
+                      <span>Authentication</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-authentication">
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-in.html" class="sidebar-nav-link">
+                          <span>Sign in</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-up.html" class="sidebar-nav-link">
+                          <span>Sign up</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./forgot-password.html" class="sidebar-nav-link">
+                          <span>Forgot password</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./terms-of-service.html" class="sidebar-nav-link">
+                          <span>Terms of service</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
+                      <span>Error pages</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
+                      <li class="sidebar-nav-item">
+                        <a href="./400.html" class="sidebar-nav-link">
+                          <span>400 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./401.html" class="sidebar-nav-link">
+                          <span>401 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./403.html" class="sidebar-nav-link">
+                          <span>403 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./404.html" class="sidebar-nav-link">
+                          <span>404 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./500.html" class="sidebar-nav-link">
+                          <span>500 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./503.html" class="sidebar-nav-link">
+                          <span>503 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./maintenance.html" class="sidebar-nav-link">
+                          <span>Maintenance page</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link active" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <span class="nav-text">Layouts</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
+                  <li class="sidebar-nav-item">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
+                      <span>Invoice</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./snippets.html" class="sidebar-nav-link" >
+                      <span>Snippets</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./search-results.html" class="sidebar-nav-link" >
+                      <span>Search results</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
+                      <span>Alerts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
+                      <span>Autosize</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
+                      <span>Avatars</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
+                      <span>Badges</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
+                      <span>Breadcrumb</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
+                      <span>Colors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
+                      <span>Cursors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
+                      <span>Divider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
+                      <span>Empty states</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
+                      <span>Flags</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
+                      <span>Form elements</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
+                      <span>Form helpers</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
+                      <span>Form input mask</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/layout.html" class="sidebar-nav-link" >
+                      <span>Layout</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
+                      <span>Progress</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/payments.html" class="sidebar-nav-link" >
+                      <span>Payments</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/range-slider.html" class="sidebar-nav-link" >
+                      <span>Range slider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
+                      <span>Ribbons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
+                      <span>Spinners</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
+                      <span>Steps</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
+                      <span>Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
+                      <span>Tabs</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
+                      <span>Timelines</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
+                      <span>Toasts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
+                      <span>Tooltips</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
+                      <span>Typography</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <div class="hide-sidebar-narrow">
+              <hr>
+              <div class="text-muted">
+                <div class="mb-2">
+                  <strong>160MB</strong> from <strong>2GB</strong> used.
+                </div>
+                <div class="progress progress-sm">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-auto hide-sidebar-narrow pt-3">
+            <a href="#" class="btn btn-primary btn-block">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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>
+              Logout
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layout-sidebar-only.html b/demo/layout-sidebar-only.html
new file mode 100644
index 000000000..3de778561
--- /dev/null
+++ b/demo/layout-sidebar-only.html
@@ -0,0 +1,692 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <aside class="sidebar">
+        <!-- Sidebar logo -->
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        </a>
+        <div class="sidebar-content">
+          <div>
+            <!-- Sidebar menu -->
+            <ul class="sidebar-nav">
+              <li class="sidebar-nav-title">Navigation</li>
+              <li class="sidebar-nav-item">
+                <a href="./index.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Dashboard</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  <span class="nav-text">Form elements</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
+                  <li class="sidebar-nav-item">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
+                      <span>Calendar</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./lists.html" class="sidebar-nav-link" >
+                      <span>Lists</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
+                      <span>Users</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
+                      <span>Gallery</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-authentication">
+                      <span>Authentication</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-authentication">
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-in.html" class="sidebar-nav-link">
+                          <span>Sign in</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-up.html" class="sidebar-nav-link">
+                          <span>Sign up</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./forgot-password.html" class="sidebar-nav-link">
+                          <span>Forgot password</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./terms-of-service.html" class="sidebar-nav-link">
+                          <span>Terms of service</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
+                      <span>Error pages</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
+                      <li class="sidebar-nav-item">
+                        <a href="./400.html" class="sidebar-nav-link">
+                          <span>400 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./401.html" class="sidebar-nav-link">
+                          <span>401 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./403.html" class="sidebar-nav-link">
+                          <span>403 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./404.html" class="sidebar-nav-link">
+                          <span>404 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./500.html" class="sidebar-nav-link">
+                          <span>500 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./503.html" class="sidebar-nav-link">
+                          <span>503 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./maintenance.html" class="sidebar-nav-link">
+                          <span>Maintenance page</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link active" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <span class="nav-text">Layouts</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
+                  <li class="sidebar-nav-item">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
+                      <span>Invoice</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./snippets.html" class="sidebar-nav-link" >
+                      <span>Snippets</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./search-results.html" class="sidebar-nav-link" >
+                      <span>Search results</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
+                      <span>Alerts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
+                      <span>Autosize</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
+                      <span>Avatars</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
+                      <span>Badges</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
+                      <span>Breadcrumb</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
+                      <span>Colors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
+                      <span>Cursors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
+                      <span>Divider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
+                      <span>Empty states</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
+                      <span>Flags</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
+                      <span>Form elements</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
+                      <span>Form helpers</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
+                      <span>Form input mask</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/layout.html" class="sidebar-nav-link" >
+                      <span>Layout</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
+                      <span>Progress</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/payments.html" class="sidebar-nav-link" >
+                      <span>Payments</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/range-slider.html" class="sidebar-nav-link" >
+                      <span>Range slider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
+                      <span>Ribbons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
+                      <span>Spinners</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
+                      <span>Steps</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
+                      <span>Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
+                      <span>Tabs</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
+                      <span>Timelines</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
+                      <span>Toasts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
+                      <span>Tooltips</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
+                      <span>Typography</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <div class="hide-sidebar-narrow">
+              <hr>
+              <div class="text-muted">
+                <div class="mb-2">
+                  <strong>160MB</strong> from <strong>2GB</strong> used.
+                </div>
+                <div class="progress progress-sm">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-auto hide-sidebar-narrow pt-3">
+            <a href="#" class="btn btn-primary btn-block">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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>
+              Logout
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="content">
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layout-sidebar-right.html b/demo/layout-sidebar-right.html
new file mode 100644
index 000000000..37461bc86
--- /dev/null
+++ b/demo/layout-sidebar-right.html
@@ -0,0 +1,751 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <aside class="sidebar sidebar-right">
+        <!-- Sidebar logo -->
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        </a>
+        <div class="sidebar-content">
+          <div>
+            <!-- Sidebar menu -->
+            <ul class="sidebar-nav">
+              <li class="sidebar-nav-title">Navigation</li>
+              <li class="sidebar-nav-item">
+                <a href="./index.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Dashboard</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  <span class="nav-text">Form elements</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
+                  <li class="sidebar-nav-item">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
+                      <span>Calendar</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./lists.html" class="sidebar-nav-link" >
+                      <span>Lists</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
+                      <span>Users</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
+                      <span>Gallery</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-authentication">
+                      <span>Authentication</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-authentication">
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-in.html" class="sidebar-nav-link">
+                          <span>Sign in</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-up.html" class="sidebar-nav-link">
+                          <span>Sign up</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./forgot-password.html" class="sidebar-nav-link">
+                          <span>Forgot password</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./terms-of-service.html" class="sidebar-nav-link">
+                          <span>Terms of service</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
+                      <span>Error pages</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
+                      <li class="sidebar-nav-item">
+                        <a href="./400.html" class="sidebar-nav-link">
+                          <span>400 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./401.html" class="sidebar-nav-link">
+                          <span>401 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./403.html" class="sidebar-nav-link">
+                          <span>403 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./404.html" class="sidebar-nav-link">
+                          <span>404 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./500.html" class="sidebar-nav-link">
+                          <span>500 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./503.html" class="sidebar-nav-link">
+                          <span>503 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./maintenance.html" class="sidebar-nav-link">
+                          <span>Maintenance page</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link active" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <span class="nav-text">Layouts</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
+                  <li class="sidebar-nav-item">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
+                      <span>Invoice</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./snippets.html" class="sidebar-nav-link" >
+                      <span>Snippets</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./search-results.html" class="sidebar-nav-link" >
+                      <span>Search results</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
+                      <span>Alerts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
+                      <span>Autosize</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
+                      <span>Avatars</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
+                      <span>Badges</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
+                      <span>Breadcrumb</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
+                      <span>Colors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
+                      <span>Cursors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
+                      <span>Divider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
+                      <span>Empty states</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
+                      <span>Flags</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
+                      <span>Form elements</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
+                      <span>Form helpers</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
+                      <span>Form input mask</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/layout.html" class="sidebar-nav-link" >
+                      <span>Layout</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
+                      <span>Progress</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/payments.html" class="sidebar-nav-link" >
+                      <span>Payments</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/range-slider.html" class="sidebar-nav-link" >
+                      <span>Range slider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
+                      <span>Ribbons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
+                      <span>Spinners</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
+                      <span>Steps</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
+                      <span>Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
+                      <span>Tabs</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
+                      <span>Timelines</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
+                      <span>Toasts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
+                      <span>Tooltips</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
+                      <span>Typography</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <div class="hide-sidebar-narrow">
+              <hr>
+              <div class="text-muted">
+                <div class="mb-2">
+                  <strong>160MB</strong> from <strong>2GB</strong> used.
+                </div>
+                <div class="progress progress-sm">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-auto hide-sidebar-narrow pt-3">
+            <a href="#" class="btn btn-primary btn-block">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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>
+              Logout
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layout-sidebar.html b/demo/layout-sidebar.html
new file mode 100644
index 000000000..1847597d5
--- /dev/null
+++ b/demo/layout-sidebar.html
@@ -0,0 +1,751 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <aside class="sidebar">
+        <!-- Sidebar logo -->
+        <a href="." class="sidebar-brand">
+          <img src="./static/logo.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-lg">
+          <img src="./static/logo-small.svg" alt="Tabler" class="sidebar-brand-logo sidebar-brand-logo-sm">
+        </a>
+        <div class="sidebar-content">
+          <div>
+            <!-- Sidebar menu -->
+            <ul class="sidebar-nav">
+              <li class="sidebar-nav-title">Navigation</li>
+              <li class="sidebar-nav-item">
+                <a href="./index.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Dashboard</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./form-elements.html" class="sidebar-nav-link" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                  <span class="nav-text">Form elements</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-base">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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-text">Base</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-base">
+                  <li class="sidebar-nav-item">
+                    <a  href="./blank.html" class="sidebar-nav-link" >
+                      <span>Starter page</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./datatables.html" class="sidebar-nav-link" >
+                      <span>Data Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./calendar.html" class="sidebar-nav-link" >
+                      <span>Calendar</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./lists.html" class="sidebar-nav-link" >
+                      <span>Lists</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./users.html" class="sidebar-nav-link" >
+                      <span>Users</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./gallery.html" class="sidebar-nav-link" >
+                      <span>Gallery</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./profile.html" class="sidebar-nav-link" >
+                      <span>Profile</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./music.html" class="sidebar-nav-link" >
+                      <span>Music</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-authentication">
+                      <span>Authentication</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-authentication">
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-in.html" class="sidebar-nav-link">
+                          <span>Sign in</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./sign-up.html" class="sidebar-nav-link">
+                          <span>Sign up</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./forgot-password.html" class="sidebar-nav-link">
+                          <span>Forgot password</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./terms-of-service.html" class="sidebar-nav-link">
+                          <span>Terms of service</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-error">
+                      <span>Error pages</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-error">
+                      <li class="sidebar-nav-item">
+                        <a href="./400.html" class="sidebar-nav-link">
+                          <span>400 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./401.html" class="sidebar-nav-link">
+                          <span>401 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./403.html" class="sidebar-nav-link">
+                          <span>403 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./404.html" class="sidebar-nav-link">
+                          <span>404 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./500.html" class="sidebar-nav-link">
+                          <span>500 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./503.html" class="sidebar-nav-link">
+                          <span>503 page</span>
+                        </a>
+                      </li>
+                      <li class="sidebar-nav-item">
+                        <a href="./maintenance.html" class="sidebar-nav-link">
+                          <span>Maintenance page</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-a">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                  <span class="nav-text">A</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-a">
+                  <li class="sidebar-nav-item">
+                    <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-b">
+                      <span>B</span>
+                      <span class="sidebar-nav-arrow"></span>
+                    </a>
+                    <ul class="sidebar-subnav collapse" id="sidebar-menu-b">
+                      <li class="sidebar-nav-item">
+                        <a href="./tmp.html" class="sidebar-nav-link">
+                          <span>C</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a href="./layouts.html" class="sidebar-nav-link active" >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                  <span class="nav-text">Layouts</span>
+                </a>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-extra">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-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="nav-text">Extra</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-extra">
+                  <li class="sidebar-nav-item">
+                    <a  href="./invoice.html" class="sidebar-nav-link" >
+                      <span>Invoice</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./blog.html" class="sidebar-nav-link" >
+                      <span>Blog cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./snippets.html" class="sidebar-nav-link" >
+                      <span>Snippets</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./search-results.html" class="sidebar-nav-link" >
+                      <span>Search results</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="sidebar-nav-item">
+                <a  class="sidebar-nav-link" data-toggle="collapse" data-target="#sidebar-menu-docs">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                  <span class="nav-text">Documentation</span>
+                  <span class="sidebar-nav-arrow"></span>
+                </a>
+                <ul class="sidebar-subnav collapse" id="sidebar-menu-docs">
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/index.html" class="sidebar-nav-link" >
+                      <span>Introduction</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/alerts.html" class="sidebar-nav-link" >
+                      <span>Alerts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/autosize.html" class="sidebar-nav-link" >
+                      <span>Autosize</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/avatars.html" class="sidebar-nav-link" >
+                      <span>Avatars</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/badges.html" class="sidebar-nav-link" >
+                      <span>Badges</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/breadcrumb.html" class="sidebar-nav-link" >
+                      <span>Breadcrumb</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/buttons.html" class="sidebar-nav-link" >
+                      <span>Buttons</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cards.html" class="sidebar-nav-link" >
+                      <span>Cards</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/carousel.html" class="sidebar-nav-link" >
+                      <span>Carousel</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/colors.html" class="sidebar-nav-link" >
+                      <span>Colors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/countup.html" class="sidebar-nav-link" >
+                      <span>Countup</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/cursors.html" class="sidebar-nav-link" >
+                      <span>Cursors</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/charts.html" class="sidebar-nav-link" >
+                      <span>Charts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/divider.html" class="sidebar-nav-link" >
+                      <span>Divider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/empty.html" class="sidebar-nav-link" >
+                      <span>Empty states</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/flags.html" class="sidebar-nav-link" >
+                      <span>Flags</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-elements.html" class="sidebar-nav-link" >
+                      <span>Form elements</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/form-helpers.html" class="sidebar-nav-link" >
+                      <span>Form helpers</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/input-mask.html" class="sidebar-nav-link" >
+                      <span>Form input mask</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/layout.html" class="sidebar-nav-link" >
+                      <span>Layout</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/progress.html" class="sidebar-nav-link" >
+                      <span>Progress</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/payments.html" class="sidebar-nav-link" >
+                      <span>Payments</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/range-slider.html" class="sidebar-nav-link" >
+                      <span>Range slider</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/ribbons.html" class="sidebar-nav-link" >
+                      <span>Ribbons</span>
+                      <span class="badge bg-green">New</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/spinners.html" class="sidebar-nav-link" >
+                      <span>Spinners</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/steps.html" class="sidebar-nav-link" >
+                      <span>Steps</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tables.html" class="sidebar-nav-link" >
+                      <span>Tables</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tabs.html" class="sidebar-nav-link" >
+                      <span>Tabs</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/timelines.html" class="sidebar-nav-link" >
+                      <span>Timelines</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/toasts.html" class="sidebar-nav-link" >
+                      <span>Toasts</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/tooltips.html" class="sidebar-nav-link" >
+                      <span>Tooltips</span>
+                    </a>
+                  </li>
+                  <li class="sidebar-nav-item">
+                    <a  href="./docs/typography.html" class="sidebar-nav-link" >
+                      <span>Typography</span>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+            <div class="hide-sidebar-narrow">
+              <hr>
+              <div class="text-muted">
+                <div class="mb-2">
+                  <strong>160MB</strong> from <strong>2GB</strong> used.
+                </div>
+                <div class="progress progress-sm">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="sr-only">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-auto hide-sidebar-narrow pt-3">
+            <a href="#" class="btn btn-primary btn-block">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="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>
+              Logout
+            </a>
+          </div>
+        </div>
+      </aside>
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto hide-sidebar-visible" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Page Layouts
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="card card-lg">
+              <div class="card-body">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layouts.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layouts.html">Default tabler layout</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                                <div class="h-2 bg-dark"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar.html">Sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-auto w-2 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                              <div class="col-3 border-left bg-white"></div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 border-right bg-white"></div>
+                              <div class="col">
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
+                          <span class="badge bg-green ml-2">New</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-dark.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col-3 bg-dark"></div>
+                              <div class="col">
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark.html">Dark mode</a>
+                          <span class="badge bg-yellow ml-2">Soon!</span>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/layouts.html b/demo/layouts.html
index 513d05863..1b2f6f25e 100644
--- a/demo/layouts.html
+++ b/demo/layouts.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -483,17 +474,17 @@
                 </div>
               </div>
             </div>
-            <div class="card card-md">
+            <div class="card card-lg">
               <div class="card-body">
-                <div class="row row-md mb-n6">
-                  <div class="col-6 mb-6">
+                <div class="row row-md mb-n3 mb-md-n5">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layouts.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                                 <div class="h-2 border-bottom bg-white"></div>
                               </div>
                             </div>
@@ -502,20 +493,20 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Default tabler layout</a>
+                          <a href="./layouts.html">Default tabler layout</a>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-dark-navigation.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                                 <div class="h-2 bg-dark"></div>
                               </div>
                             </div>
@@ -524,21 +515,43 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Dark navigation</a>
+                          <a href="./layout-dark-navigation.html">Dark navigation</a>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-dark-topnav.html" class="position-relative">
+                          <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
+                            <div class="row row-0 flex-fill">
+                              <div class="col">
+                                <div class="h-2 bg-dark"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
+                              </div>
+                            </div>
+                          </div>
+                        </a>
+                      </div>
+                      <div class="col">
+                        <h3>
+                          <a href="./layout-dark-topnav.html">Dark topnav</a>
+                        </h3>
+                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-6 mb-3 mb-md-5">
+                    <div class="row">
+                      <div class="col-auto">
+                        <a href="./layout-sidebar.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col-3 border-right bg-white"></div>
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                               </div>
                             </div>
                           </div>
@@ -546,22 +559,22 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Sidebar</a>
+                          <a href="./layout-sidebar.html">Sidebar</a>
                           <span class="badge bg-green ml-2">New</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-sidebar-dark.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col-3 bg-dark"></div>
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                               </div>
                             </div>
                           </div>
@@ -569,22 +582,22 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Dark sidebar</a>
+                          <a href="./layout-sidebar-dark.html">Dark sidebar</a>
                           <span class="badge bg-green ml-2">New</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-sidebar-narrow.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col-auto w-2 bg-dark"></div>
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                               </div>
                             </div>
                           </div>
@@ -592,21 +605,21 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Narrow sidebar</a>
+                          <a href="./layout-sidebar-narrow.html">Narrow sidebar</a>
                           <span class="badge bg-green ml-2">New</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-sidebar-right.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                               </div>
                               <div class="col-3 border-left bg-white"></div>
                             </div>
@@ -615,17 +628,17 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Right sidebar</a>
+                          <a href="./layout-sidebar-right.html">Right sidebar</a>
                           <span class="badge bg-green ml-2">New</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6">
+                  <div class="col-lg-6 mb-3 mb-md-5">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-sidebar-only.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col-3 border-right bg-white"></div>
@@ -637,22 +650,22 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Sidebar only</a>
+                          <a href="./layout-sidebar-only.html">Sidebar only</a>
                           <span class="badge bg-green ml-2">New</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
                       </div>
                     </div>
                   </div>
-                  <div class="col-6 mb-6 opacity-25">
+                  <div class="col-lg-6 mb-3 mb-md-5 opacity-25">
                     <div class="row">
                       <div class="col-auto">
-                        <a href="./" class="position-relative">
+                        <a href="./layout-dark.html" class="position-relative">
                           <div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
                             <div class="row row-0 flex-fill">
                               <div class="col-3 bg-dark"></div>
                               <div class="col">
-                                <div class="border-bottom h-2 bg-white"></div>
+                                <div class="h-2 border-bottom bg-white"></div>
                               </div>
                             </div>
                           </div>
@@ -660,7 +673,7 @@
                       </div>
                       <div class="col">
                         <h3>
-                          <a href="./">Dark mode</a>
+                          <a href="./layout-dark.html">Dark mode</a>
                           <span class="badge bg-yellow ml-2">Soon!</span>
                         </h3>
                         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
@@ -675,9 +688,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/lists.html b/demo/lists.html
new file mode 100644
index 000000000..9accce3fc
--- /dev/null
+++ b/demo/lists.html
@@ -0,0 +1,800 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Lists - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
+            <div class="container">
+              <ul class="navbar-nav flex-wrap flex-fill">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    </span>
+                    Dashboard
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    </span>
+                    Form elements
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			aria-expanded="true" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </span>
+                    Base
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                    </span>
+                    A
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./layouts.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                    </span>
+                    Layouts
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                    Extra
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/layout.html" >
+                        Layout
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Lists
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Top users</h3>
+                  </div>
+                  <div class="card-body">
+                    <div class="row mb-n3">
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)">
+                            <span class="badge bg-red"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Paweł Kuna</a>
+                          <small class="d-block text-muted text-truncate mt-n1">2 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar">
+                            <span class="badge bg-x"></span>
+                            JL</span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Jeffie Lewzey</a>
+                          <small class="d-block text-muted text-truncate mt-n1">3 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Mallory Hulme</a>
+                          <small class="d-block text-muted text-truncate mt-n1">today</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)">
+                            <span class="badge bg-green"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Dunn Slane</a>
+                          <small class="d-block text-muted text-truncate mt-n1">6 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)">
+                            <span class="badge bg-red"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Emmy Levet</a>
+                          <small class="d-block text-muted text-truncate mt-n1">3 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)">
+                            <span class="badge bg-yellow"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Maryjo Lebarree</a>
+                          <small class="d-block text-muted text-truncate mt-n1">2 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar">
+                            <span class="badge bg-x"></span>
+                            EP</span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Egan Poetz</a>
+                          <small class="d-block text-muted text-truncate mt-n1">4 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)">
+                            <span class="badge bg-yellow"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Kellie Skingley</a>
+                          <small class="d-block text-muted text-truncate mt-n1">6 days ago</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)">
+                            <span class="badge bg-x"></span>
+                          </span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Christabel Charlwood</a>
+                          <small class="d-block text-muted text-truncate mt-n1">today</small>
+                        </div>
+                      </div>
+                      <div class="col-6 row row-sm mb-3 align-items-center">
+                        <a href="#" class="col-auto">
+                          <span class="avatar">
+                            <span class="badge bg-x"></span>
+                            HS</span>
+                        </a>
+                        <div class="col text-truncate">
+                          <a href="#" class="text-body d-block text-truncate">Haskel Shelper</a>
+                          <small class="d-block text-muted text-truncate mt-n1">yesterday</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Contacts</h3>
+                  </div>
+                  <div class="list list-row">
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input"></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Christabel Charlwood</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Compressed Sass output support (#29702)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input"></div>
+                      <a href="#">
+                        <span class="avatar">HS</span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Haskel Shelper</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Set vertical-align on .form-check-input (#29521)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input" checked></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Lorry Mion</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Keep themed appearance for print (#29714)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input"></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Leesa Beaty</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Use double quotes in `.stylelintrc` (#29709)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input" checked></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Perren Keemar</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Regenerate package-lock.json (#29695)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input" checked></div>
+                      <a href="#">
+                        <span class="avatar">SA</span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Sunny Airey</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Switch to the Coveralls Action (#29478)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input"></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Geoffry Flaunders</a>
+                        <small class="d-block text-muted text-truncate mt-n1">Fix npm audit vulnerability (#29677)</small>
+                      </div>
+                    </div>
+                    <div class="list-item">
+                      <div><input type="checkbox" class="form-check-input"></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <a href="#" class="text-body d-block">Thatcher Keel</a>
+                        <small class="d-block text-muted text-truncate mt-n1">config.yml: update popper.js to v1.16.0 (#29624)</small>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Last commits</h3>
+                  </div>
+                  <div class="list list-row list-hoverable">
+                    <div class="list-item">
+                      <div><span class="badge bg-red"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge"></span></div>
+                      <a href="#">
+                        <span class="avatar">JL</span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge bg-"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge bg-green"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge bg-red"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge bg-yellow"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge"></span></div>
+                      <a href="#">
+                        <span class="avatar">EP</span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                    <div class="list-item">
+                      <div><span class="badge bg-yellow"></span></div>
+                      <a href="#">
+                        <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
+                      </a>
+                      <div class="text-truncate">
+                        <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>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/login.html b/demo/login.html
deleted file mode 100644
index 4e0dc6a13..000000000
--- a/demo/login.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Login - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex h-auto min-h-full justify-content-center">
-      <div class="d-flex align-items-center justify-content-center flex-fill">
-        <div class="container">
-          <div class="row">
-            <div class="col col-login mx-auto">
-              <div class="text-center mb-4">
-                <img src="./img/logo.svg" class="h-8" alt="">
-              </div>
-              <form class="card" action="" method="get">
-                <div class="card-body p-6">
-                  <div class="card-title">Login to your account</div>
-                  <div class="mb-2">
-                    <label class="form-label">Email address</label>
-                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
-                placeholder="Enter email" autocomplete="off">
-                  </div>
-                  <div class="mb-2">
-                    <a href="./forgot-password.html" class="float-right small">I forgot password</a>
-                    <label class="form-label">
-                      Password
-                    </label>
-                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" autocomplete="off">
-                  </div>
-                  <div class="mb-2">
-                    <label class="custom-control custom-checkbox">
-                      <input type="checkbox" class="custom-control-input" ./>
-                      <span class="custom-control-label">Remember me</span>
-                    </label>
-                  </div>
-                  <div class="form-footer">
-                    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
-                  </div>
-                </div>
-              </form>
-              <div class="text-center text-muted">
-                Don't have account yet? <a href="./register.html">Sign up</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/demo/lookup.html b/demo/lookup.html
index 293a8ab9d..2d098d429 100644
--- a/demo/lookup.html
+++ b/demo/lookup.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Lookup company - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -694,9 +685,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/maintenance.html b/demo/maintenance.html
index d8cfe8d97..2b1d66e5f 100644
--- a/demo/maintenance.html
+++ b/demo/maintenance.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,47 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Maintenance mode - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex align-items-center justify-content-center min-vh-100">
-      <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">Temporarily down for maintenance</p>
-        <p class="empty-subtitle text-muted">
-          Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!
-        </p>
-        <div class="empty-action">
-          <a href="./index.html" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
-            Take me home
-          </a>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex align-items-center justify-content-center">
+      <div class="container-tight py-6">
+        <div class="empty">
+          <div class="empty-icon">
+            <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+          </div>
+          <p class="empty-title h3">Temporarily down for maintenance</p>
+          <p class="empty-subtitle text-muted">
+            Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!
+          </p>
+          <div class="empty-action">
+            <a href="./." class="btn btn-primary">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              Take me home
+            </a>
+          </div>
         </div>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/maps.html b/demo/maps.html
index 19235e250..36c00a717 100644
--- a/demo/maps.html
+++ b/demo/maps.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Maps - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -511,14 +502,14 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1578694044"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js?1580338609"></script>
+    <script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function() {
          $('#map-world').vectorMap({
diff --git a/demo/markdown.html b/demo/markdown.html
index fabc2e58d..db5f5f78a 100644
--- a/demo/markdown.html
+++ b/demo/markdown.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Markdown - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -536,9 +527,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/music.html b/demo/music.html
index 7bfa2762e..a06b6740e 100644
--- a/demo/music.html
+++ b/demo/music.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Music components - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -507,10 +498,22 @@
                           03:41
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -532,10 +535,22 @@
                           03:21
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -557,10 +572,22 @@
                           03:23
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -582,10 +609,22 @@
                           03:12
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -607,10 +646,22 @@
                           03:17
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -632,10 +683,22 @@
                           03:47
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -659,10 +722,22 @@
                           02:46
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -685,10 +760,22 @@
                           04:04
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -710,10 +797,22 @@
                           03:53
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -735,10 +834,22 @@
                           02:41
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -760,10 +871,22 @@
                           02:43
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -785,10 +908,22 @@
                           03:12
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                          </a>
                         </div>
                         <div class="col-auto">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                          <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>
+                            <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>
                       </div>
                     </div>
@@ -911,9 +1046,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/pagination.html b/demo/pagination.html
index 83ba4382a..384462375 100644
--- a/demo/pagination.html
+++ b/demo/pagination.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Pagination - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -554,9 +545,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/pricing.html b/demo/pricing.html
index 17b0c9df0..2c3c51845 100644
--- a/demo/pricing.html
+++ b/demo/pricing.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Pricing cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -611,9 +602,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/profile.html b/demo/profile.html
index 804c054c4..cd2814520 100644
--- a/demo/profile.html
+++ b/demo/profile.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Profile - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -485,10 +476,8 @@
             </div>
             <div class="row">
               <div class="col-lg-4">
-                <div class="card card-profile">
-                  <div class="card-header" style="background-image: url(./static/photos/1194d63fe36a8670.jpg);"></div>
+                <div class="card">
                   <div class="card-body text-center">
-                    <img class="card-profile-img" src="static/avatars/000f.jpg">
                     <h2 class="mb-3">Emmy Levet</h2>
                     <p class="mb-4">
                       Big belly rude boy, million dollar hustler. Unemployed.
@@ -569,7 +558,7 @@
                     <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">
+                        <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>
@@ -746,9 +735,9 @@ But that's the difference in our opinions.</textarea>
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/register.html b/demo/register.html
deleted file mode 100644
index b1a0c0394..000000000
--- a/demo/register.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version v1.0.0-alpha
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <title>Register - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
-  </head>
-  <body class="antialiased border-top-wide border-primary">
-    <div class="d-flex h-auto min-h-full justify-content-center">
-      <div class="d-flex align-items-center justify-content-center flex-fill">
-        <div class="container">
-          <div class="row">
-            <div class="col col-login mx-auto">
-              <div class="text-center mb-4">
-                <img src="./img/logo.svg" class="h-8" alt="">
-              </div>
-              <form class="card" action="" method="post">
-                <div class="card-body p-6">
-                  <div class="card-title">Create new account</div>
-                  <div class="mb-2">
-                    <label class="form-label">Name</label>
-                    <input type="text" class="form-control" placeholder="Enter name">
-                  </div>
-                  <div class="mb-2">
-                    <label class="form-label">Email address</label>
-                    <input type="email" class="form-control" placeholder="Enter email">
-                  </div>
-                  <div class="mb-2">
-                    <label class="form-label">Password</label>
-                    <input type="password" class="form-control" placeholder="Password">
-                  </div>
-                  <div class="mb-2">
-                    <label class="custom-control custom-checkbox">
-                      <input type="checkbox" class="custom-control-input"./>
-                      <span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
-                    </label>
-                  </div>
-                  <div class="form-footer">
-                    <button type="submit" class="btn btn-primary btn-block">Create new account</button>
-                  </div>
-                </div>
-              </form>
-              <div class="text-center text-muted">
-                Already have account? <a href="./login.html">Sign in</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/demo/ribbons.html b/demo/ribbons.html
index 603b35b59..25257be35 100644
--- a/demo/ribbons.html
+++ b/demo/ribbons.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Ribbons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -650,9 +641,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/rtl.html b/demo/rtl.html
index acf5c8676..1c0bbc84e 100644
--- a/demo/rtl.html
+++ b/demo/rtl.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>RTL mode - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -555,11 +546,11 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/peity/jquery.peity.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/peity/jquery.peity.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
       	$().peity && $('#sparkline-22').text("45/100").peity("pie", {
diff --git a/demo/search-results.html b/demo/search-results.html
index ac2e73b47..b2f3acfc4 100644
--- a/demo/search-results.html
+++ b/demo/search-results.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item active" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -551,18 +542,22 @@
                     <div class="col">
                       <div class="input-group">
                         <div class="input-group-prepend">
-                          <span class="input-group-text">$</span>
+                          <span class="input-group-text">
+                            $
+                          </span>
                         </div>
-                        <input type="text" class="form-control" placeholder="from" value="3">
+                        <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>
+                          <span class="input-group-text">
+                            $
+                          </span>
                         </div>
-                        <input type="text" class="form-control" placeholder="to" value="">
+                        <input type="text" class="form-control"  placeholder="to" >
                       </div>
                     </div>
                   </div>
@@ -573,7 +568,7 @@
                       <option>USA</option>
                       <option>Germany</option>
                       <option>Poland</option>
-                      <option>Other&hellip;</option>
+                      <option>Other…</option>
                     </select>
                   </div>
                   <div class="mt-5">
@@ -764,9 +759,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/sign-in.html b/demo/sign-in.html
new file mode 100644
index 000000000..1cabddfb0
--- /dev/null
+++ b/demo/sign-in.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Sign in - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center">
+      <div class="container-tight py-6">
+        <div class="text-center mb-4">
+          <img src="./static/logo.svg" height="36" alt="">
+        </div>
+        <form class="card card-md" action="." method="get">
+          <div class="card-body">
+            <h2 class="mb-5 text-center">Login to your account</h2>
+            <div class="mb-3">
+              <label class="form-label">Email address</label>
+              <input type="email" class="form-control" placeholder="Enter email" autocomplete="off">
+            </div>
+            <div class="mb-2">
+              <label class="form-label">
+                Password
+                <span class="form-label-description">
+                  <a href="./forgot-password.html">I forgot password</a>
+                </span>
+              </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>
+              </div>
+            </div>
+            <div class="mb-2">
+              <label class="form-check">
+                <input type="checkbox" class="form-check-input"/>
+                <span class="form-check-label">Remember me on this device</span>
+              </label>
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+            </div>
+          </div>
+          <div class="hr-text">or</div>
+          <div class="card-body">
+            <div class="btn-list">
+              <a href="#" class="btn btn-secondary btn-block">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
+                Login with Github
+              </a>
+              <a href="#" class="btn btn-secondary btn-block">
+                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" 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>
+                Login with Twitter
+              </a>
+            </div>
+          </div>
+        </form>
+        <div class="text-center text-muted">
+          Don't have account yet? <a href="./sign-up.html" tabindex="-1">Sign up</a>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/sign-up.html b/demo/sign-up.html
new file mode 100644
index 000000000..09d3383b4
--- /dev/null
+++ b/demo/sign-up.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Sign up - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center">
+      <div class="container-tight py-6">
+        <div class="text-center mb-4">
+          <img src="./static/logo.svg" height="36" alt="">
+        </div>
+        <form class="card card-md" action="." method="get">
+          <div class="card-body">
+            <h2 class="mb-5 text-center">Create new account</h2>
+            <div class="mb-3">
+              <label class="form-label">Name</label>
+              <input type="text" class="form-control" placeholder="Enter name">
+            </div>
+            <div class="mb-3">
+              <label class="form-label">Email address</label>
+              <input type="email" class="form-control" placeholder="Enter email">
+            </div>
+            <div class="mb-3">
+              <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>
+              </div>
+            </div>
+            <div class="mb-3">
+              <label class="form-check">
+                <input type="checkbox" class="form-check-input"/>
+                <span class="form-check-label">Agree the <a href="./terms-of-service.html" tabindex="-1">terms and policy</a>.</span>
+              </label>
+            </div>
+            <div class="form-footer">
+              <button type="submit" class="btn btn-primary btn-block">Create new account</button>
+            </div>
+          </div>
+        </form>
+        <div class="text-center text-muted">
+          Already have account? <a href="./sign-in.html" tabindex="-1">Sign in</a>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/sitemap.xml b/demo/sitemap.xml
index ec5134106..8e4e7b877 100644
--- a/demo/sitemap.xml
+++ b/demo/sitemap.xml
@@ -2,179 +2,183 @@
   <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-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/card-comments.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/card-ribbon.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/card-tabs-bottom.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/card-with-image.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/empty.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/input-colors.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/input-image.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/progress.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/simple-avatar.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/simple-card.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/widget-revenue.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/components/widget-sales.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/alerts.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/autosize.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/avatars.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/badges.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/breadcrumb.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/buttons.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/cards.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/carousel.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/charts.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/colors.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/countup.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/cursors.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/divider.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/empty.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/flags.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-elements.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-helpers.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/input-mask.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/layout.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/payments.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/progress.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
+    </url>
+    <url>
+      <loc>/docs/range-slider.html</loc>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/ribbons.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/spinners.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/steps.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/tables.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/tabs.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/timelines.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/toasts.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/tooltips.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/docs/typography.html</loc>
-      <lastmod>2020-01-10T23:07:24+01:00</lastmod>
+      <lastmod>2020-01-29T23:56:49+01:00</lastmod>
     </url>
     <url>
       <loc>/400.html</loc>
@@ -264,13 +268,34 @@
       <loc>/invoice.html</loc>
     </url>
     <url>
-      <loc>/layout-test.html</loc>
+      <loc>/layout-dark-navigation.html</loc>
+    </url>
+    <url>
+      <loc>/layout-dark-topnav.html</loc>
+    </url>
+    <url>
+      <loc>/layout-dark.html</loc>
+    </url>
+    <url>
+      <loc>/layout-sidebar-dark.html</loc>
+    </url>
+    <url>
+      <loc>/layout-sidebar-narrow.html</loc>
+    </url>
+    <url>
+      <loc>/layout-sidebar-only.html</loc>
+    </url>
+    <url>
+      <loc>/layout-sidebar-right.html</loc>
+    </url>
+    <url>
+      <loc>/layout-sidebar.html</loc>
     </url>
     <url>
       <loc>/layouts.html</loc>
     </url>
     <url>
-      <loc>/login.html</loc>
+      <loc>/lists.html</loc>
     </url>
     <url>
       <loc>/lookup.html</loc>
@@ -296,9 +321,6 @@
     <url>
       <loc>/profile.html</loc>
     </url>
-    <url>
-      <loc>/register.html</loc>
-    </url>
     <url>
       <loc>/ribbons.html</loc>
     </url>
@@ -308,6 +330,12 @@
     <url>
       <loc>/search-results.html</loc>
     </url>
+    <url>
+      <loc>/sign-in.html</loc>
+    </url>
+    <url>
+      <loc>/sign-up.html</loc>
+    </url>
     <url>
       <loc>/snippets.html</loc>
     </url>
@@ -321,7 +349,13 @@
       <loc>/tabs.html</loc>
     </url>
     <url>
-      <loc>/tmp2.html</loc>
+      <loc>/terms-of-service.html</loc>
+    </url>
+    <url>
+      <loc>/tmp-dark.html</loc>
+    </url>
+    <url>
+      <loc>/tmp.html</loc>
     </url>
     <url>
       <loc>/typography.html</loc>
@@ -329,4 +363,7 @@
     <url>
       <loc>/users.html</loc>
     </url>
+    <url>
+      <loc>/welcome.html</loc>
+    </url>
   </urlset>
\ No newline at end of file
diff --git a/demo/snippets.html b/demo/snippets.html
index 50a2ead80..dd2c17887 100644
--- a/demo/snippets.html
+++ b/demo/snippets.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Snippets - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,12 +243,11 @@
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
-                <li class="nav-item dropdown">
+                <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
+			aria-expanded="true" >
                     <span class="nav-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><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>
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item active" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -1115,6 +1106,35 @@
                     </div>
                   </div>
                 </div>
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">
+                      Configuration
+                    </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>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <dl class="row">
+                      <dt class="col-5">Date:</dt>
+                      <dd class="col-7">2020-01-05 16:42:29 UTC</dd>
+                      <dt class="col-5">Account:</dt>
+                      <dd class="col-7">tabler</dd>
+                      <dt class="col-5">Location:</dt>
+                      <dd class="col-7"><span class="flag flag-country-pl"></span>
+                        Poland</dd>
+                      <dt class="col-5">IP Address:</dt>
+                      <dd class="col-7">46.113.11.3</dd>
+                      <dt class="col-5">Operating system:</dt>
+                      <dd class="col-7">OS X 10.15.2 64-bit</dd>
+                      <dt class="col-5">Browser:</dt>
+                      <dd class="col-7">Chrome</dd>
+                    </dl>
+                  </div>
+                </div>
               </div>
             </div>
           </main>
@@ -1122,11 +1142,11 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
-    <script src="./dist/libs/peity/jquery.peity.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <script src="./dist/libs/peity/jquery.peity.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
       	$().peity && $('#sparkline-25').text("56/100").peity("pie", {
diff --git a/demo/social.html b/demo/social.html
index 5d6f0cbfb..ee278e2e1 100644
--- a/demo/social.html
+++ b/demo/social.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Social elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -984,9 +975,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/store.html b/demo/store.html
index d7ae17098..29155cab0 100644
--- a/demo/store.html
+++ b/demo/store.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Store - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -687,9 +678,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/tabs.html b/demo/tabs.html
index f92d24c6f..7357c805d 100644
--- a/demo/tabs.html
+++ b/demo/tabs.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Tabs - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -799,9 +790,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/terms-of-service.html b/demo/terms-of-service.html
new file mode 100644
index 000000000..c9fa7974a
--- /dev/null
+++ b/demo/terms-of-service.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center">
+      <div class="container-narrow py-6">
+        <div class="text-center mb-4">
+          <img src="./static/logo.svg" height="36" alt="">
+        </div>
+        <div class="card card-md">
+          <div class="card-body">
+            <h2 class="text-center mb-5">Terms of service</h2>
+            <div class="markdown">
+              <p><strong>We (the folks at Tabler) run a website hosting platform called <a
+				href="https://tabler.io">tabler.io</a> and would love for you to use it. Tabler.io’s basic service is free,
+                  and we offer paid upgrades for advanced features. Our service is designed to give you as much control and
+                  ownership over what goes on your website as possible. However, be responsible in what you publish. In
+                  particular, make sure that none of the prohibited items (like spam, viruses, or serious threats of violence)
+                  appear in your content.</strong></p>
+              <p>The following terms and conditions govern all use of the tabler.io website and all content, services, and
+                products available at or through the website. Our Services are offered subject to your acceptance without
+                modification of all of the terms and conditions contained herein and all other operating rules, policies
+                (including, without limitation, <a href="https://tabler.io/privacy-policy.html">Tabler’s Privacy Policy</a>
+                and procedures that may be published from time to time by Tabler (collectively, the “Agreement”). You agree
+                that we may automatically upgrade our Services, and these terms will apply to any upgrades.</p>
+              <p>Please read this Agreement carefully before accessing or using our Services. By accessing or using any part
+                of our services, you agree to become bound by the terms and conditions of this agreement. If you do not
+                agree to all the terms and conditions of this agreement, then you may not access or use any of our services.
+                If these terms and conditions are considered an offer by Tabler, acceptance is expressly limited to these
+                terms.</p>
+              <p>Our Services are not directed to users younger than 16, and access and use of our Services is only offered
+                to users 16 years of age or older. If you are under 16 years old, please do not register to use our
+                Services. Any person who registers as a user or provides their personal information to our Services
+                represents that they are 16 years of age or older. Use of our Services requires a tabler.io account. You
+                agree to provide us with complete and accurate information when you register for an account. You will be
+                solely responsible and liable for any activity that occurs under your username. You are responsible for
+                keeping your password secure.</p>
+              <h3 id="1-tablerio">1. tabler.io.</h3>
+              <ul>
+                <li>
+                  <p><strong>Responsibility of Contributors.</strong> If you post material to tabler.io, post links on
+                    tabler.io, or otherwise make (or allow any third party to make) material available (any such material,
+                    “Content”), you are entirely responsible for the content of, and any harm resulting from, that Content
+                    or your conduct. That is the case regardless of what form the Content takes, which includes, but is
+                    not limited to text, photo, video, audio, or code. By using tabler.io, you represent and warrant that
+                    your Content and conduct do not violate these terms. By submitting Content to Tabler for inclusion on
+                    your account, you grant Tabler a world-wide, royalty-free, and non-exclusive license to reproduce,
+                    modify, adapt and publish the Content solely for the purpose of displaying, distributing, and
+                    promoting your changelog. If you delete Content, Tabler will use reasonable efforts to remove it from
+                    tabler.io, but you acknowledge that caching or references to the Content may not be made immediately
+                    unavailable. Without limiting any of those representations or warranties, Tabler has the right (though
+                    not the obligation) to, in Tabler’s sole discretion, (i) reclaim your username or website’s URL due to
+                    prolonged inactivity, (ii) refuse or remove any content that, in Tabler’s reasonable opinion, violates
+                    any tabler policy or is in any way harmful or objectionable, or (iii) terminate or deny access to and
+                    use of Tabler.io to any individual or entity for any reason. Tabler will have no obligation to provide
+                    a refund of any amounts previously paid.</p>
+                </li>
+                <li>
+                  <p><strong>HTTPS.</strong> We offer free HTTPS on all tabler.io accounts by default.</p>
+                </li>
+              </ul>
+              <h3 id="2-responsibility-of-visitors">2. Responsibility of Visitors.</h3>
+              <p>Tabler has not reviewed, and cannot review, all of the material, including computer software, posted to our
+                Services, and cannot therefore be responsible for that material’s content, use or effects. By operating our
+                Services, Tabler does not represent or imply that it endorses the material there posted, or that it believes
+                such material to be accurate, useful, or non-harmful. You are responsible for taking precautions as
+                necessary to protect yourself and your computer systems from viruses, worms, Trojan horses, and other
+                harmful or destructive content. Our Services may contain content that is offensive, indecent, or otherwise
+                objectionable, as well as content containing technical inaccuracies, typographical mistakes, and other
+                errors. Our Services may also contain material that violates the privacy or publicity rights, or infringes
+                the intellectual property and other proprietary rights, of third parties, or the downloading, copying or use
+                of which is subject to additional terms and conditions, stated or unstated. Tabler disclaims any
+                responsibility for any harm resulting from the use by visitors of our Services, or from any downloading by
+                those visitors of content there posted.</p>
+              <h3 id="3-content-posted-on-other-websites">3. Content Posted on Other Websites.</h3>
+              <p>We have not reviewed, and cannot review, all of the material, including computer software, made available
+                through the websites and webpages to which Tabler links, and that link to Tabler. Tabler does not have any
+                control over those non-tabler websites, and is not responsible for their contents or their use. By linking
+                to a non-tabler website, Tabler does not represent or imply that it endorses such website. You are
+                responsible for taking precautions as necessary to protect yourself and your computer systems from viruses,
+                worms, Trojan horses, and other harmful or destructive content. Tabler disclaims any responsibility for any
+                harm resulting from your use of non-tabler websites and webpages.</p>
+              <h3 id="5-copyright-infringement-and-dmca-policy">5. Copyright Infringement and DMCA Policy.</h3>
+              <p>As Tabler asks others to respect its intellectual property rights, it respects the intellectual property
+                rights of others. If you believe that material located on or linked to by tabler.io violates your copyright,
+                you are encouraged to notify Tabler in accordance with Tabler’s Digital Millennium Copyright Act (“DMCA”)
+                Policy. Tabler will respond to all such notices, including as required or appropriate by removing the
+                infringing material or disabling all links to the infringing material. Tabler will terminate a visitor’s
+                access to and use of the Website if, under appropriate circumstances, the visitor is determined to be a
+                repeat infringer of the copyrights or other intellectual property rights of Tabler or others. In the case of
+                such termination, Tabler will have no obligation to provide a refund of any amounts previously paid to
+                Tabler.</p>
+              <h3 id="6-intellectual-property">6. Intellectual Property.</h3>
+              <p>This Agreement does not transfer from Tabler to you any Tabler or third party intellectual property, and all
+                right, title, and interest in and to such property will remain (as between the parties) solely with Tabler.
+                Tabler, tabler.io, the tabler.io logo, and all other trademarks, service marks, graphics and logos used in
+                connection with tabler.io or our Services, are trademarks or registered trademarks of Tabler or Tabler’s
+                licensors. Other trademarks, service marks, graphics and logos used in connection with our Services may be
+                the trademarks of other third parties. Your use of our Services grants you no right or license to reproduce
+                or otherwise use any Tabler or third-party trademarks.</p>
+              <h3 id="7-changes">7. Changes.</h3>
+              <p>We are constantly updating our Services, and that means sometimes we have to change the legal terms under
+                which our Services are offered. If we make changes that are material, we will let you know by posting on our
+                changelog, or by sending you an email or other communication before the changes take effect. The notice will
+                designate a reasonable period of time after which the new terms will take effect.</p>
+              <h3 id="9-disclaimer-of-warranties">9. Disclaimer of Warranties.</h3>
+              <p>Our Services are provided “as is.” Tabler and its suppliers and licensors hereby disclaim all warranties of
+                any kind, express or implied, including, without limitation, the warranties of merchantability, fitness for
+                a particular purpose and non-infringement. Neither Tabler nor its suppliers and licensors, makes any
+                warranty that our Services will be error free or that access thereto will be continuous or
+                uninterrupted.</p>
+              <h3 id="10-license">10. License.</h3>
+              <p>By using Tabler, You are acknowledging that You have read and have agreed to <a
+				href="https://tabler.io/license.html">Tabler’s License</a>, so please read them carefully.</p>
+              <h3 id="11-general-representation-and-warranty">11. General Representation and Warranty.</h3>
+              <p>You represent and warrant that (i) your use of our Services will be in strict accordance with the Tabler
+                Privacy Policy, with this Agreement, and with all applicable laws and regulations (including without
+                limitation any local laws or regulations in your country, state, city, or other governmental area, regarding
+                online conduct and acceptable content, and including all applicable laws regarding the transmission of
+                technical data exported from the United States or the country in which you reside) and (ii) your use of our
+                Services will not infringe or misappropriate the intellectual property rights of any third party.</p>
+              <h3 id="12-refund-policy">12. Refund Policy.</h3>
+              <p>Payments for Tabler are not refundable for any reason.</p>
+              <h3 id="13-translation">13. Translation.</h3>
+              <p>These Terms of Service were originally written in English (US). We may translate these terms into other
+                languages. In the event of a conflict between a translated version of these Terms of Service and the English
+                version, the English version will control.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/tmp-dark.html b/demo/tmp-dark.html
new file mode 100644
index 000000000..9b5ddc2ee
--- /dev/null
+++ b/demo/tmp-dark.html
@@ -0,0 +1,823 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
+            <div class="container">
+              <ul class="navbar-nav flex-wrap flex-fill">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    </span>
+                    Dashboard
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    </span>
+                    Form elements
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </span>
+                    Base
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                    </span>
+                    A
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./layouts.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                    </span>
+                    Layouts
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                    Extra
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/layout.html" >
+                        Layout
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <!-- Page title -->
+            <div class="page-title-box">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <h2 class="page-title">
+                    Dark
+                  </h2>
+                </div>
+              </div>
+            </div>
+            <div class="row row-md">
+              <div class="col py-4 ">
+                <div class="card m-0">
+                  <header class="card-header">
+                    <h3 class="card-title">Card title</h3>
+                  </header>
+                  <div class="card-body">
+                    <h3>H3 header</h3>
+                    <h4>H4 header</h4>
+                    <h5>H5 header</h5>
+                    <h6>H6 header</h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci consectetur cupiditate, doloribus error ex expedita fuga incidunt laboriosam pariatur perferendis possimus praesentium quisquam reiciendis tempora ut! Cumque, fuga!</p>
+                    <div class="progress progress-sm mb-3">
+                      <div class="progress-bar" style="width: 60%" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+                        <span class="sr-only">60% Complete</span>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <a href="#" class="btn btn-primary">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-secondary">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-danger">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-success">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-warning">
+                        Button
+                      </a>
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label">Text</label>
+                      <div class="form-hint">Here's some more info.</div>
+                      <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
+                    </div>
+                    <div class="mb-3">
+                      <div class="form-label">Select</div>
+                      <select class="form-select">
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label">Color Input</label>
+                      <div class="row row-xs">
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" 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="checkbox" 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="checkbox" value="blue" class="form-colorinput-input"  checked/>
+                            <span class="form-colorinput-color bg-blue"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" value="azure" class="form-colorinput-input"  checked/>
+                            <span class="form-colorinput-color bg-azure"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" value="lime" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-lime"></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <div class="form-label">Checkboxes</div>
+                      <div>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox">
+                          <span class="form-check-label">Checkbox input</span>
+                        </label>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox" disabled>
+                          <span class="form-check-label">Disabled checkbox input</span>
+                        </label>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox" checked>
+                          <span class="form-check-label">Checked checkbox input</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <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>
+                      </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>
+                        <input type="text" class="form-control" >
+                        <div class="input-group-append">
+                          <span class="input-group-text">
+                            .00
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <footer class="card-footer">
+                    Card footer
+                  </footer>
+                </div>
+              </div>
+              <div class="col py-4  theme-dark">
+                <div class="card m-0">
+                  <header class="card-header">
+                    <h3 class="card-title">Card title</h3>
+                  </header>
+                  <div class="card-body">
+                    <h3>H3 header</h3>
+                    <h4>H4 header</h4>
+                    <h5>H5 header</h5>
+                    <h6>H6 header</h6>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci consectetur cupiditate, doloribus error ex expedita fuga incidunt laboriosam pariatur perferendis possimus praesentium quisquam reiciendis tempora ut! Cumque, fuga!</p>
+                    <div class="progress progress-sm mb-3">
+                      <div class="progress-bar" style="width: 60%" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+                        <span class="sr-only">60% Complete</span>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <a href="#" class="btn btn-primary">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-secondary">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-danger">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-success">
+                        Button
+                      </a>
+                      <a href="#" class="btn btn-warning">
+                        Button
+                      </a>
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label">Text</label>
+                      <div class="form-hint">Here's some more info.</div>
+                      <input type="text" class="form-control" name="example-text-input" placeholder="Text..">
+                    </div>
+                    <div class="mb-3">
+                      <div class="form-label">Select</div>
+                      <select class="form-select">
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                    </div>
+                    <div class="mb-3">
+                      <label class="form-label">Color Input</label>
+                      <div class="row row-xs">
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" 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="checkbox" 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="checkbox" value="blue" class="form-colorinput-input"  checked/>
+                            <span class="form-colorinput-color bg-blue"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" value="azure" class="form-colorinput-input"  checked/>
+                            <span class="form-colorinput-color bg-azure"></span>
+                          </label>
+                        </div>
+                        <div class="col-auto">
+                          <label class="form-colorinput">
+                            <input name="color" type="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" 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="checkbox" value="lime" class="form-colorinput-input" />
+                            <span class="form-colorinput-color bg-lime"></span>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <div class="form-label">Checkboxes</div>
+                      <div>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox">
+                          <span class="form-check-label">Checkbox input</span>
+                        </label>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox" disabled>
+                          <span class="form-check-label">Disabled checkbox input</span>
+                        </label>
+                        <label class="form-check">
+                          <input class="form-check-input" type="checkbox" checked>
+                          <span class="form-check-label">Checked checkbox input</span>
+                        </label>
+                      </div>
+                    </div>
+                    <div class="mb-3">
+                      <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>
+                      </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>
+                        <input type="text" class="form-control" >
+                        <div class="input-group-append">
+                          <span class="input-group-text">
+                            .00
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <footer class="card-footer">
+                    Card footer
+                  </footer>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/tmp.html b/demo/tmp.html
new file mode 100644
index 000000000..7445a7f7d
--- /dev/null
+++ b/demo/tmp.html
@@ -0,0 +1,640 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <div class="content">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
+              </a>
+              <ul class="nav navbar-menu align-items-center ml-auto">
+                <li class="nav-item d-none d-lg-flex mr-3">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    </svg>
+                    Source code
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
+                    <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block lh-1">
+                      Leesa Beaty
+                      <span class="text-muted d-block mt-1 text-h6">Administrator</span>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                      Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                      Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                      Inbox
+                      <span class="badge bg-primary ml-auto">6</span>
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                      Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                      Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                      Sign out
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
+            <div class="container">
+              <ul class="navbar-nav flex-wrap flex-fill">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    </span>
+                    Dashboard
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                    </span>
+                    Form elements
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                    </span>
+                    Base
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Starter page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./datatables.html" >
+                        Data Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-a" data-toggle="dropdown" role="button"
+			aria-expanded="true" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                    </span>
+                    A
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-b" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        B
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./tmp.html" class="dropdown-item">C</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./layouts.html" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                    </span>
+                    Layouts
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    </span>
+                    Extra
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
+			aria-expanded="false" >
+                    <span class="nav-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                    </span>
+                    Documentation
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./docs/index.html" >
+                        Introduction
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/alerts.html" >
+                        Alerts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/autosize.html" >
+                        Autosize
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/avatars.html" >
+                        Avatars
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/badges.html" >
+                        Badges
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/breadcrumb.html" >
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/colors.html" >
+                        Colors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/countup.html" >
+                        Countup
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/cursors.html" >
+                        Cursors
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/divider.html" >
+                        Divider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/empty.html" >
+                        Empty states
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/flags.html" >
+                        Flags
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-elements.html" >
+                        Form elements
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/form-helpers.html" >
+                        Form helpers
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/input-mask.html" >
+                        Form input mask
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/layout.html" >
+                        Layout
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/progress.html" >
+                        Progress
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/payments.html" >
+                        Payments
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/ribbons.html" >
+                        Ribbons
+                        <span class="badge bg-green ml-auto">New</span>
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/spinners.html" >
+                        Spinners
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/steps.html" >
+                        Steps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/timelines.html" >
+                        Timelines
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/toasts.html" >
+                        Toasts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/tooltips.html" >
+                        Tooltips
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+              <div class="d-none d-xl-block ml-auto">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </header>
+        <div class="content-page">
+          <main class="container my-4 flex-fill">
+            <div class="row">
+              <div class="col-xl-4">
+                <div class="card card-body">
+                </div>
+              </div>
+              <div class="col-md-6 col-xl-4">
+                <div class="card">
+                  <div class="card-img-top embed-responsive embed-responsive-21by9">
+                    <div class="embed-responsive-item bg-cover"
+				     style="background-image: url(./static/photos/6fe407b4b13bbcde.jpg)"></div>
+                  </div>
+                  <span class="avatar avatar-xl mt-n5 mx-auto card-avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                  <div class="card-body text-center">
+                    <h2 class="mb-3">Paweł Kuna</h2>
+                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem
+                      consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed
+                      tempora ut voluptas, voluptatem!</p>
+                  </div>
+                </div>
+              </div>
+              <div class="col-4">
+                <div class="card card-body">
+                  <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#modal-simple">
+                    Open modal
+                  </a>
+                </div>
+                <div class="card card-body">
+                  <div>
+                    <div class="stars">
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" 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>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="stars">
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star text-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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" 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>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="stars">
+                      <span class="star 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star 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"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" 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>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="stars">
+                      <span class="star text-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>
+                      </span>
+                      <span class="star text-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>
+                      </span>
+                      <span class="star text-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>
+                      </span>
+                      <span class="star text-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>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" 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>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="stars">
+                      <span class="star 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>
+                      </span>
+                      <span class="star 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>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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>
+                    </div>
+                  </div>
+                  <div>
+                    <div class="stars">
+                      <span class="star text-blue">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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></svg>
+                      </span>
+                      <span class="star text-blue">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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></svg>
+                      </span>
+                      <span class="star text-blue">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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></svg>
+                      </span>
+                      <span class="star text-blue">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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></svg>
+                      </span>
+                      <span class="star ">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" 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></svg>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </main>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+    <div class="modal modal-blur fade" id="modal-simple" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <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>
+            </button>
+          </div>
+          <div class="modal-body">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demo/typography.html b/demo/typography.html
index 9a00f4101..92604d72e 100644
--- a/demo/typography.html
+++ b/demo/typography.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Typography - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -751,9 +742,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/users.html b/demo/users.html
index d63fdb68d..6d353b50f 100644
--- a/demo/users.html
+++ b/demo/users.html
@@ -12,7 +12,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <meta http-equiv="Content-Language" content="en"/>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
@@ -25,42 +24,46 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
     <title>Users list - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/libs/daterangepicker/daterangepicker.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
     <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css?1578694044" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css?1578694044" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
   </head>
   <body class="antialiased">
-    <div class="wrapper">
+    <div class="page">
       <div class="content">
-        <header class="topnav">
-          <div class="container">
-            <div class="navbar navbar-expand-lg navbar-light">
-              <a href="." class="navbar-brand mr-4">
-                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-lg">
-                <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-sm">
+        <header class="navbar-wrap navbar-expand-lg flex-column">
+          <div class="navbar navbar-border navbar-light bg-white">
+            <div class="container">
+              <button class="navbar-toggler mr-auto d-lg-none" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <a href="." class="navbar-brand hide-sidebar-visible m-0">
+                <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo">
               </a>
               <ul class="nav navbar-menu align-items-center ml-auto">
                 <li class="nav-item d-none d-lg-flex mr-3">
-                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank">
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon text-github" fill="currentColor">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-secondary" target="_blank" rel="noreferrer">
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
                       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
                     </svg>
                     Source code
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a href="#" data-toggle="dropdown"
-			class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
+                  <a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
                     <span class="avatar avatar-sm" style="background-image: url(./static/avatars/004f.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block lh-1">
                       Leesa Beaty
@@ -87,7 +90,7 @@
                     </a>
                     <div class="dropdown-divider"></div>
                     <a class="dropdown-item" href="#">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-icon"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                       Need help?
                     </a>
                     <a class="dropdown-item" href="#">
@@ -99,11 +102,9 @@
               </ul>
             </div>
           </div>
-        </header>
-        <header class="topnav">
-          <div class="navbar navbar-expand-lg navbar-light">
+          <div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute navbar-light bg-white" id="nav-main-menu">
             <div class="container">
-              <ul class="navbar-nav flex-wrap">
+              <ul class="navbar-nav flex-wrap flex-fill">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
                     <span class="nav-icon">
@@ -145,6 +146,11 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./datatables.html" >
                         Data Tables
@@ -160,6 +166,11 @@
                         Carousel
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item active" href="./users.html" >
                         Users
@@ -180,59 +191,30 @@
                         Music
                       </a>
                     </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="./charts.html" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
-                    </span>
-                    Charts
-                  </a>
-                </li>
-                <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-error" data-toggle="dropdown" role="button"
-			aria-expanded="false" >
-                    <span class="nav-icon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
-                    </span>
-                    Error pages
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li >
-                      <a class="dropdown-item" href="./400.html" >
-                        400 page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
                     </li>
-                    <li >
-                      <a class="dropdown-item" href="./401.html" >
-                        401 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./403.html" >
-                        403 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./404.html" >
-                        404 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./500.html" >
-                        500 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./503.html" >
-                        503 page
-                      </a>
-                    </li>
-                    <li >
-                      <a class="dropdown-item" href="./maintenance.html" >
-                        Maintenance page
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
                       </a>
+                      <div class="dropdown-menu">
+                        <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./404.html" class="dropdown-item">404 page</a>
+                        <a href="./500.html" class="dropdown-item">500 page</a>
+                        <a href="./503.html" class="dropdown-item">503 page</a>
+                        <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
                     </li>
                   </ul>
                 </li>
@@ -261,7 +243,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"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                     </span>
                     Layouts
-                    <span class="badge bg-green ml-2">New</span>
                   </a>
                 </li>
                 <li class="nav-item dropdown">
@@ -283,6 +264,11 @@
                         Blog cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./search-results.html" >
                         Search results
@@ -409,6 +395,11 @@
                         Payments
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs/range-slider.html" >
+                        Range slider
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./docs/ribbons.html" >
                         Ribbons
@@ -458,13 +449,13 @@
                   </ul>
                 </li>
               </ul>
-              <div class="navbar-search d-none d-xl-block">
+              <div class="d-none d-xl-block ml-auto">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
                       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                     </span>
-                    <input type="text" class="form-control" placeholder="Search&hellip;">
+                    <input type="text" class="form-control" placeholder="Search…">
                   </div>
                 </form>
               </div>
@@ -487,7 +478,7 @@
                 <!-- Page title actions -->
                 <div class="col-auto ml-auto d-print-none">
                   <div class="d-flex">
-                    <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
+                    <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>
                       New user
@@ -1282,9 +1273,9 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1578694044"></script>
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js?1578694044"></script>
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
     <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js?1578694044"></script>
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/demo/welcome.html b/demo/welcome.html
new file mode 100644
index 000000000..4020d901d
--- /dev/null
+++ b/demo/welcome.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version v1.0.0-alpha
+* @link https://github.com/tabler/tabler
+* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Licensed under MIT (https://tabler.io/license)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- Libs CSS -->
+    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/selectize/dist/css/selectize.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/core/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/daygrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/timegrid/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/fullcalendar/list/main.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/libs/nouislider/distribute/nouislider.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Core -->
+    <link href="./dist/css/tabler.min.css?1580338609" rel="stylesheet"/>
+    <!-- Tabler Plugins -->
+    <link href="./dist/css/tabler-flags.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-buttons.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-dark.min.css?1580338609" rel="stylesheet"/>
+    <link href="./dist/css/tabler-rtl.min.css?1580338609" rel="stylesheet"/>
+  </head>
+  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+    <div class="flex-fill d-flex flex-column justify-content-center">
+      <div class="container-tight py-6">
+        <div class="text-center mb-4">
+          <img src="./static/logo.svg" height="36" alt="">
+        </div>
+        <div style="max-width: 500px; margin: 0 auto">
+          <div class="card">
+            <div class="card-body text-center py-4 p-sm-5">
+              <img src="./static/illustrations/undraw_work_together_h63l.svg" class="mb-n2" height="120" alt="">
+              <h1 class="mt-5">Welcome to Tabler!</h1>
+              <p class="text-muted">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
+            </div>
+            <div class="hr-text hr-text-center hr-text-spaceless">your data</div>
+            <div class="card-body">
+              <div class="mb-3">
+                <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>
+                  <input type="text" class="form-control pl-1" >
+                </div>
+              </div>
+              <div>
+                <label class="form-label">Timezone</label>
+                <select class="form-select mb-0">
+                  <option value="DST">(UTC-12:00) International Date Line West</option>
+                  <option value="U">(UTC-11:00) Coordinated Universal Time-11</option>
+                  <option value="HST">(UTC-10:00) Hawaii</option>
+                  <option value="AKDT">(UTC-09:00) Alaska</option>
+                  <option value="PDT">(UTC-08:00) Baja California</option>
+                  <option value="PDT">(UTC-07:00) Pacific Time (US & Canada)</option>
+                  <option value="PST">(UTC-08:00) Pacific Time (US & Canada)</option>
+                  <option value="UMST">(UTC-07:00) Arizona</option>
+                  <option value="MDT">(UTC-07:00) Chihuahua, La Paz, Mazatlan</option>
+                  <option value="MDT">(UTC-07:00) Mountain Time (US & Canada)</option>
+                  <option value="CAST">(UTC-06:00) Central America</option>
+                  <option value="CDT">(UTC-06:00) Central Time (US & Canada)</option>
+                  <option value="CDT">(UTC-06:00) Guadalajara, Mexico City, Monterrey</option>
+                  <option value="CCST">(UTC-06:00) Saskatchewan</option>
+                  <option value="SPST">(UTC-05:00) Bogota, Lima, Quito</option>
+                  <option value="EDT">(UTC-05:00) Eastern Time (US & Canada)</option>
+                  <option value="UEDT">(UTC-05:00) Indiana (East)</option>
+                  <option value="VST">(UTC-04:30) Caracas</option>
+                  <option value="PYT">(UTC-04:00) Asuncion</option>
+                  <option value="ADT">(UTC-04:00) Atlantic Time (Canada)</option>
+                  <option value="CBST">(UTC-04:00) Cuiaba</option>
+                  <option value="SWST">(UTC-04:00) Georgetown, La Paz, Manaus, San Juan</option>
+                  <option value="PSST">(UTC-04:00) Santiago</option>
+                  <option value="NDT">(UTC-03:30) Newfoundland</option>
+                  <option value="ESAST">(UTC-03:00) Brasilia</option>
+                  <option value="AST">(UTC-03:00) Buenos Aires</option>
+                  <option value="SEST">(UTC-03:00) Cayenne, Fortaleza</option>
+                  <option value="GDT">(UTC-03:00) Greenland</option>
+                  <option value="MST">(UTC-03:00) Montevideo</option>
+                  <option value="BST">(UTC-03:00) Salvador</option>
+                  <option value="U">(UTC-02:00) Coordinated Universal Time-02</option>
+                  <option value="MDT">(UTC-02:00) Mid-Atlantic - Old</option>
+                  <option value="ADT">(UTC-01:00) Azores</option>
+                  <option value="CVST">(UTC-01:00) Cape Verde Is.</option>
+                  <option value="MDT">(UTC) Casablanca</option>
+                  <option value="UTC">(UTC) Coordinated Universal Time</option>
+                  <option value="GMT">(UTC) Edinburgh, London</option>
+                  <option value="BST">(UTC+01:00) Edinburgh, London</option>
+                  <option value="GDT">(UTC) Dublin, Lisbon</option>
+                  <option value="GST">(UTC) Monrovia, Reykjavik</option>
+                  <option value="WEDT">(UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
+                  <option value="CEDT" selected>(UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
+                  <option value="RDT">(UTC+01:00) Brussels, Copenhagen, Madrid, Paris</option>
+                  <option value="CEDT" selected>(UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb</option>
+                  <option value="WCAST">(UTC+01:00) West Central Africa</option>
+                  <option value="NST">(UTC+01:00) Windhoek</option>
+                  <option value="GDT">(UTC+02:00) Athens, Bucharest</option>
+                  <option value="MEDT">(UTC+02:00) Beirut</option>
+                  <option value="EST">(UTC+02:00) Cairo</option>
+                  <option value="SDT">(UTC+02:00) Damascus</option>
+                  <option value="EEDT">(UTC+02:00) E. Europe</option>
+                  <option value="SAST">(UTC+02:00) Harare, Pretoria</option>
+                  <option value="FDT">(UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius</option>
+                  <option value="TDT">(UTC+03:00) Istanbul</option>
+                  <option value="JDT">(UTC+02:00) Jerusalem</option>
+                  <option value="LST">(UTC+02:00) Tripoli</option>
+                  <option value="JST">(UTC+03:00) Amman</option>
+                  <option value="AST">(UTC+03:00) Baghdad</option>
+                  <option value="KST">(UTC+02:00) Kaliningrad</option>
+                  <option value="AST">(UTC+03:00) Kuwait, Riyadh</option>
+                  <option value="EAST">(UTC+03:00) Nairobi</option>
+                  <option value="MSK">(UTC+03:00) Moscow, St. Petersburg, Volgograd, Minsk</option>
+                  <option value="SAMT">(UTC+04:00) Samara, Ulyanovsk, Saratov</option>
+                  <option value="IDT">(UTC+03:30) Tehran</option>
+                  <option value="AST">(UTC+04:00) Abu Dhabi, Muscat</option>
+                  <option value="ADT">(UTC+04:00) Baku</option>
+                  <option value="MST">(UTC+04:00) Port Louis</option>
+                  <option value="GET">(UTC+04:00) Tbilisi</option>
+                  <option value="CST">(UTC+04:00) Yerevan</option>
+                  <option value="AST">(UTC+04:30) Kabul</option>
+                  <option value="WAST">(UTC+05:00) Ashgabat, Tashkent</option>
+                  <option value="YEKT">(UTC+05:00) Yekaterinburg</option>
+                  <option value="PKT">(UTC+05:00) Islamabad, Karachi</option>
+                  <option value="IST">(UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
+                  <option value="SLST">(UTC+05:30) Sri Jayawardenepura</option>
+                  <option value="NST">(UTC+05:45) Kathmandu</option>
+                  <option value="CAST">(UTC+06:00) Nur-Sultan (Astana)</option>
+                  <option value="BST">(UTC+06:00) Dhaka</option>
+                  <option value="MST">(UTC+06:30) Yangon (Rangoon)</option>
+                  <option value="SAST">(UTC+07:00) Bangkok, Hanoi, Jakarta</option>
+                  <option value="NCAST">(UTC+07:00) Novosibirsk</option>
+                  <option value="CST">(UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
+                  <option value="NAST">(UTC+08:00) Krasnoyarsk</option>
+                  <option value="MPST">(UTC+08:00) Kuala Lumpur, Singapore</option>
+                  <option value="WAST">(UTC+08:00) Perth</option>
+                  <option value="TST">(UTC+08:00) Taipei</option>
+                  <option value="UST">(UTC+08:00) Ulaanbaatar</option>
+                  <option value="NAEST">(UTC+08:00) Irkutsk</option>
+                  <option value="JST">(UTC+09:00) Osaka, Sapporo, Tokyo</option>
+                  <option value="KST">(UTC+09:00) Seoul</option>
+                  <option value="CAST">(UTC+09:30) Adelaide</option>
+                  <option value="ACST">(UTC+09:30) Darwin</option>
+                  <option value="EAST">(UTC+10:00) Brisbane</option>
+                  <option value="AEST">(UTC+10:00) Canberra, Melbourne, Sydney</option>
+                  <option value="WPST">(UTC+10:00) Guam, Port Moresby</option>
+                  <option value="TST">(UTC+10:00) Hobart</option>
+                  <option value="YST">(UTC+09:00) Yakutsk</option>
+                  <option value="CPST">(UTC+11:00) Solomon Is., New Caledonia</option>
+                  <option value="VST">(UTC+11:00) Vladivostok</option>
+                  <option value="NZST">(UTC+12:00) Auckland, Wellington</option>
+                  <option value="U">(UTC+12:00) Coordinated Universal Time+12</option>
+                  <option value="FST">(UTC+12:00) Fiji</option>
+                  <option value="MST">(UTC+12:00) Magadan</option>
+                  <option value="KDT">(UTC+12:00) Petropavlovsk-Kamchatsky - Old</option>
+                  <option value="TST">(UTC+13:00) Nuku'alofa</option>
+                  <option value="SST">(UTC+13:00) Samoa</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="row align-items-center">
+            <div class="col-3">
+              <div class="progress">
+                <div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+                  <span class="sr-only">25% Complete</span>
+                </div>
+              </div>
+            </div>
+            <div class="col">
+              <div class="btn-list justify-content-end">
+                <a href="#" class="btn btn-link">
+                  Set up later
+                </a>
+                <a href="#" class="btn btn-primary">
+                  Continue
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/jquery/dist/jquery.slim.min.js?1580338609"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js?1580338609"></script>
+    <script src="./dist/js/tabler-range-sliders.min.js?1580338609"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/dist/css/tabler-buttons.css b/dist/css/tabler-buttons.css
index 8b4ad7e96..9ed304b31 100644
--- a/dist/css/tabler-buttons.css
+++ b/dist/css/tabler-buttons.css
@@ -25,28 +25,28 @@
     border-color: transparent; }
 
 .btn-ghost-secondary {
-  color: #7e8590;
+  color: #7b7e88;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-secondary:hover {
     color: #fff;
-    background-color: #7e8590;
-    border-color: #7e8590; }
+    background-color: #7b7e88;
+    border-color: #7b7e88; }
   .btn-ghost-secondary:focus, .btn-ghost-secondary.focus {
     color: #fff;
-    background-color: #7e8590;
-    border-color: #7e8590;
-    box-shadow: 0 0 0 0.2rem rgba(126, 133, 144, 0.5); }
+    background-color: #7b7e88;
+    border-color: #7b7e88;
+    box-shadow: 0 0 0 0.2rem rgba(123, 126, 136, 0.5); }
   .btn-ghost-secondary:active, .btn-ghost-secondary.active,
   .show > .btn-ghost-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #7e8590;
-    border-color: #7e8590; }
+    background-color: #7b7e88;
+    border-color: #7b7e88; }
     .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(126, 133, 144, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(123, 126, 136, 0.5); }
   .btn-ghost-secondary:disabled, .btn-ghost-secondary.disabled {
-    color: #7e8590;
+    color: #7b7e88;
     background-color: transparent;
     border-color: transparent; }
 
@@ -169,7 +169,7 @@
     box-shadow: 0 0 0 0.2rem rgba(245, 247, 251, 0.5); }
   .btn-ghost-light:active, .btn-ghost-light.active,
   .show > .btn-ghost-light.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     background-color: #f5f7fb;
     border-color: #f5f7fb; }
     .btn-ghost-light:active:focus, .btn-ghost-light.active:focus,
@@ -181,28 +181,28 @@
     border-color: transparent; }
 
 .btn-ghost-dark {
-  color: #354052;
+  color: #303645;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-dark:hover {
     color: #fff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
   .btn-ghost-dark:focus, .btn-ghost-dark.focus {
     color: #fff;
-    background-color: #354052;
-    border-color: #354052;
-    box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+    background-color: #303645;
+    border-color: #303645;
+    box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-ghost-dark:active, .btn-ghost-dark.active,
   .show > .btn-ghost-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
     .btn-ghost-dark:active:focus, .btn-ghost-dark.active:focus,
     .show > .btn-ghost-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-ghost-dark:disabled, .btn-ghost-dark.disabled {
-    color: #354052;
+    color: #303645;
     background-color: transparent;
     border-color: transparent; }
 
@@ -1335,28 +1335,28 @@
     background-color: transparent; }
 
 .btn-white {
-  color: #354052;
+  color: #303645;
   background-color: #ffffff;
   border-color: #ffffff; }
   .btn-white:hover {
-    color: #354052;
+    color: #303645;
     background-color: #ececec;
     border-color: #e6e6e6; }
   .btn-white:focus, .btn-white.focus {
-    color: #354052;
+    color: #303645;
     background-color: #ececec;
     border-color: #e6e6e6;
-    box-shadow: 0 0 0 0.2rem rgba(225, 226, 229, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(224, 225, 227, 0.5); }
   .btn-white:active, .btn-white.active,
   .show > .btn-white.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     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 0.2rem rgba(225, 226, 229, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(224, 225, 227, 0.5); }
   .btn-white:disabled, .btn-white.disabled {
-    color: #354052;
+    color: #303645;
     background-color: #ffffff;
     border-color: #ffffff; }
 
@@ -1371,7 +1371,7 @@
     box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
   .btn-outline-white:active, .btn-outline-white.active,
   .show > .btn-outline-white.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     background-color: #ffffff;
     border-color: #ffffff; }
     .btn-outline-white:active:focus, .btn-outline-white.active:focus,
@@ -1383,96 +1383,96 @@
 
 .btn-gray {
   color: #ffffff;
-  background-color: #aeb3bc;
-  border-color: #aeb3bc; }
+  background-color: #acb0b8;
+  border-color: #acb0b8; }
   .btn-gray:hover {
     color: #ffffff;
-    background-color: #999fab;
-    border-color: #9299a5; }
+    background-color: #979ca6;
+    border-color: #9196a0; }
   .btn-gray:focus, .btn-gray.focus {
     color: #ffffff;
-    background-color: #999fab;
-    border-color: #9299a5;
-    box-shadow: 0 0 0 0.2rem rgba(186, 190, 198, 0.5); }
+    background-color: #979ca6;
+    border-color: #9196a0;
+    box-shadow: 0 0 0 0.2rem rgba(184, 188, 195, 0.5); }
   .btn-gray:active, .btn-gray.active,
   .show > .btn-gray.dropdown-toggle {
     color: #ffffff;
-    background-color: #9299a5;
-    border-color: #8b929f; }
+    background-color: #9196a0;
+    border-color: #8a8f9b; }
     .btn-gray:active:focus, .btn-gray.active:focus,
     .show > .btn-gray.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(186, 190, 198, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(184, 188, 195, 0.5); }
   .btn-gray:disabled, .btn-gray.disabled {
     color: #ffffff;
-    background-color: #aeb3bc;
-    border-color: #aeb3bc; }
+    background-color: #acb0b8;
+    border-color: #acb0b8; }
 
 .btn-outline-gray {
-  color: #aeb3bc;
-  border-color: #aeb3bc; }
+  color: #acb0b8;
+  border-color: #acb0b8; }
   .btn-outline-gray:hover {
-    color: #aeb3bc;
-    background-color: #aeb3bc;
-    border-color: #aeb3bc; }
+    color: #acb0b8;
+    background-color: #acb0b8;
+    border-color: #acb0b8; }
   .btn-outline-gray:focus, .btn-outline-gray.focus {
-    box-shadow: 0 0 0 0.2rem rgba(174, 179, 188, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(172, 176, 184, 0.5); }
   .btn-outline-gray:active, .btn-outline-gray.active,
   .show > .btn-outline-gray.dropdown-toggle {
     color: #ffffff;
-    background-color: #aeb3bc;
-    border-color: #aeb3bc; }
+    background-color: #acb0b8;
+    border-color: #acb0b8; }
     .btn-outline-gray:active:focus, .btn-outline-gray.active:focus,
     .show > .btn-outline-gray.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(174, 179, 188, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(172, 176, 184, 0.5); }
   .btn-outline-gray:disabled, .btn-outline-gray.disabled {
-    color: #aeb3bc;
+    color: #acb0b8;
     background-color: transparent; }
 
 .btn-gray-dark {
   color: #ffffff;
-  background-color: #5f6877;
-  border-color: #5f6877; }
+  background-color: #5b606d;
+  border-color: #5b606d; }
   .btn-gray-dark:hover {
     color: #ffffff;
-    background-color: #4e5562;
-    border-color: #484f5b; }
+    background-color: #4a4e58;
+    border-color: #444851; }
   .btn-gray-dark:focus, .btn-gray-dark.focus {
     color: #ffffff;
-    background-color: #4e5562;
-    border-color: #484f5b;
-    box-shadow: 0 0 0 0.2rem rgba(119, 127, 139, 0.5); }
+    background-color: #4a4e58;
+    border-color: #444851;
+    box-shadow: 0 0 0 0.2rem rgba(116, 120, 131, 0.5); }
   .btn-gray-dark:active, .btn-gray-dark.active,
   .show > .btn-gray-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #484f5b;
-    border-color: #434954; }
+    background-color: #444851;
+    border-color: #3e414a; }
     .btn-gray-dark:active:focus, .btn-gray-dark.active:focus,
     .show > .btn-gray-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(119, 127, 139, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(116, 120, 131, 0.5); }
   .btn-gray-dark:disabled, .btn-gray-dark.disabled {
     color: #ffffff;
-    background-color: #5f6877;
-    border-color: #5f6877; }
+    background-color: #5b606d;
+    border-color: #5b606d; }
 
 .btn-outline-gray-dark {
-  color: #5f6877;
-  border-color: #5f6877; }
+  color: #5b606d;
+  border-color: #5b606d; }
   .btn-outline-gray-dark:hover {
-    color: #5f6877;
-    background-color: #5f6877;
-    border-color: #5f6877; }
+    color: #5b606d;
+    background-color: #5b606d;
+    border-color: #5b606d; }
   .btn-outline-gray-dark:focus, .btn-outline-gray-dark.focus {
-    box-shadow: 0 0 0 0.2rem rgba(95, 104, 119, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(91, 96, 109, 0.5); }
   .btn-outline-gray-dark:active, .btn-outline-gray-dark.active,
   .show > .btn-outline-gray-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #5f6877;
-    border-color: #5f6877; }
+    background-color: #5b606d;
+    border-color: #5b606d; }
     .btn-outline-gray-dark:active:focus, .btn-outline-gray-dark.active:focus,
     .show > .btn-outline-gray-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(95, 104, 119, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(91, 96, 109, 0.5); }
   .btn-outline-gray-dark:disabled, .btn-outline-gray-dark.disabled {
-    color: #5f6877;
+    color: #5b606d;
     background-color: transparent; }
 
 .btn-azure {
@@ -1524,95 +1524,95 @@
 
 .btn-lime {
   color: #ffffff;
-  background-color: #7bd235;
-  border-color: #7bd235; }
+  background-color: #94d82d;
+  border-color: #94d82d; }
   .btn-lime:hover {
     color: #ffffff;
-    background-color: #69b829;
-    border-color: #63ad27; }
+    background-color: #7fbc23;
+    border-color: #78b121; }
   .btn-lime:focus, .btn-lime.focus {
     color: #ffffff;
-    background-color: #69b829;
-    border-color: #63ad27;
-    box-shadow: 0 0 0 0.2rem rgba(143, 217, 83, 0.5); }
+    background-color: #7fbc23;
+    border-color: #78b121;
+    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: #ffffff;
-    background-color: #63ad27;
-    border-color: #5da324; }
+    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(143, 217, 83, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(164, 222, 77, 0.5); }
   .btn-lime:disabled, .btn-lime.disabled {
     color: #ffffff;
-    background-color: #7bd235;
-    border-color: #7bd235; }
+    background-color: #94d82d;
+    border-color: #94d82d; }
 
 .btn-outline-lime {
-  color: #7bd235;
-  border-color: #7bd235; }
+  color: #94d82d;
+  border-color: #94d82d; }
   .btn-outline-lime:hover {
-    color: #7bd235;
-    background-color: #7bd235;
-    border-color: #7bd235; }
+    color: #94d82d;
+    background-color: #94d82d;
+    border-color: #94d82d; }
   .btn-outline-lime:focus, .btn-outline-lime.focus {
-    box-shadow: 0 0 0 0.2rem rgba(123, 210, 53, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(148, 216, 45, 0.5); }
   .btn-outline-lime:active, .btn-outline-lime.active,
   .show > .btn-outline-lime.dropdown-toggle {
     color: #ffffff;
-    background-color: #7bd235;
-    border-color: #7bd235; }
+    background-color: #94d82d;
+    border-color: #94d82d; }
     .btn-outline-lime:active:focus, .btn-outline-lime.active:focus,
     .show > .btn-outline-lime.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(123, 210, 53, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(148, 216, 45, 0.5); }
   .btn-outline-lime:disabled, .btn-outline-lime.disabled {
-    color: #7bd235;
+    color: #94d82d;
     background-color: transparent; }
 
 .btn-dark {
   color: #ffffff;
-  background-color: #354052;
-  border-color: #354052; }
+  background-color: #303645;
+  border-color: #303645; }
   .btn-dark:hover {
     color: #ffffff;
-    background-color: #262e3b;
-    border-color: #212833; }
+    background-color: #20242e;
+    border-color: #1b1e27; }
   .btn-dark:focus, .btn-dark.focus {
     color: #ffffff;
-    background-color: #262e3b;
-    border-color: #212833;
-    box-shadow: 0 0 0 0.2rem rgba(83, 93, 108, 0.5); }
+    background-color: #20242e;
+    border-color: #1b1e27;
+    box-shadow: 0 0 0 0.2rem rgba(79, 84, 97, 0.5); }
   .btn-dark:active, .btn-dark.active,
   .show > .btn-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #212833;
-    border-color: #1c222b; }
+    background-color: #1b1e27;
+    border-color: #16191f; }
     .btn-dark:active:focus, .btn-dark.active:focus,
     .show > .btn-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(83, 93, 108, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(79, 84, 97, 0.5); }
   .btn-dark:disabled, .btn-dark.disabled {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
 
 .btn-outline-dark {
-  color: #354052;
-  border-color: #354052; }
+  color: #303645;
+  border-color: #303645; }
   .btn-outline-dark:hover {
-    color: #354052;
-    background-color: #354052;
-    border-color: #354052; }
+    color: #303645;
+    background-color: #303645;
+    border-color: #303645; }
   .btn-outline-dark:focus, .btn-outline-dark.focus {
-    box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-outline-dark:active, .btn-outline-dark.active,
   .show > .btn-outline-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
     .btn-outline-dark:active:focus, .btn-outline-dark.active:focus,
     .show > .btn-outline-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-outline-dark:disabled, .btn-outline-dark.disabled {
-    color: #354052;
+    color: #303645;
     background-color: transparent; }
 /*# sourceMappingURL=tabler-buttons.css.map */
\ No newline at end of file
diff --git a/dist/css/tabler-flags.css b/dist/css/tabler-flags.css
index c7db72240..7b57118d7 100644
--- a/dist/css/tabler-flags.css
+++ b/dist/css/tabler-flags.css
@@ -13,7 +13,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .flag-country-ad {
diff --git a/dist/css/tabler-payments.css b/dist/css/tabler-payments.css
index 17b9422fa..7b8f8184c 100644
--- a/dist/css/tabler-payments.css
+++ b/dist/css/tabler-payments.css
@@ -62,6 +62,12 @@
 .payment-provider-bitpay {
   background-image: url("../img/payments/bitpay.svg"); }
 
+.payment-provider-blik {
+  background-image: url("../img/payments/blik.svg"); }
+
+.payment-provider-blik-dark {
+  background-image: url("../img/payments/blik-dark.svg"); }
+
 .payment-provider-cirrus-dark {
   background-image: url("../img/payments/cirrus-dark.svg"); }
 
@@ -98,6 +104,12 @@
 .payment-provider-discover {
   background-image: url("../img/payments/discover.svg"); }
 
+.payment-provider-dotpay {
+  background-image: url("../img/payments/dotpay.svg"); }
+
+.payment-provider-dotpay-dark {
+  background-image: url("../img/payments/dotpay-dark.svg"); }
+
 .payment-provider-dwolla-dark {
   background-image: url("../img/payments/dwolla-dark.svg"); }
 
@@ -164,6 +176,12 @@
 .payment-provider-mastercard {
   background-image: url("../img/payments/mastercard.svg"); }
 
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg"); }
+
+.payment-provider-mir {
+  background-image: url("../img/payments/mir.svg"); }
+
 .payment-provider-monero-dark {
   background-image: url("../img/payments/monero-dark.svg"); }
 
@@ -236,6 +254,12 @@
 .payment-provider-payza {
   background-image: url("../img/payments/payza.svg"); }
 
+.payment-provider-przelewy24 {
+  background-image: url("../img/payments/przelewy24.svg"); }
+
+.payment-provider-przelewy24-dark {
+  background-image: url("../img/payments/przelewy24-dark.svg"); }
+
 .payment-provider-ripple-dark {
   background-image: url("../img/payments/ripple-dark.svg"); }
 
@@ -290,6 +314,12 @@
 .payment-provider-switch {
   background-image: url("../img/payments/switch.svg"); }
 
+.payment-provider-tpay {
+  background-image: url("../img/payments/tpay.svg"); }
+
+.payment-provider-tpay-dark {
+  background-image: url("../img/payments/tpay-dark.svg"); }
+
 .payment-provider-ukash-dark {
   background-image: url("../img/payments/ukash-dark.svg"); }
 
diff --git a/dist/css/tabler.css b/dist/css/tabler.css
index 39809d88d..cd0b09747 100644
--- a/dist/css/tabler.css
+++ b/dist/css/tabler.css
@@ -5,7 +5,7 @@
  * Copyright 2018-2019 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");
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700&display=swap");
 :root {
   --blue: #206bc4;
   --indigo: #6574cd;
@@ -18,19 +18,19 @@
   --teal: #2bcbba;
   --cyan: #17a2b8;
   --white: #ffffff;
-  --gray: #aeb3bc;
-  --gray-dark: #5f6877;
+  --gray: #acb0b8;
+  --gray-dark: #5b606d;
   --azure: #45aaf2;
-  --lime: #7bd235;
-  --dark: #354052;
+  --lime: #94d82d;
+  --dark: #303645;
   --primary: #206bc4;
-  --secondary: #7e8590;
+  --secondary: #7b7e88;
   --success: #5eba00;
   --info: #45aaf2;
   --warning: #fab005;
   --danger: #fa4654;
   --light: #f5f7fb;
-  --dark: #354052;
+  --dark: #303645;
   --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: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 
@@ -45,7 +45,7 @@ body {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.6;
-  color: #354052;
+  color: #303645;
   background-color: #f5f7fb;
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
@@ -191,7 +191,7 @@ kbd {
   padding: 0.2rem 0.4rem;
   font-size: 80%;
   color: #ffffff;
-  background-color: #354052;
+  background-color: #303645;
   border-radius: 0.2rem; }
   kbd kbd {
     padding: 0;
@@ -214,7 +214,7 @@ table {
 caption {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: left;
   caption-side: bottom; }
 
@@ -401,7 +401,7 @@ main {
 .blockquote-footer {
   display: block;
   font-size: 87.5%;
-  color: #aeb3bc; }
+  color: #acb0b8; }
   .blockquote-footer::before {
     content: "\2014\00A0"; }
 
@@ -412,7 +412,7 @@ main {
 .img-thumbnail {
   padding: 0.25rem;
   background-color: #f5f7fb;
-  border: 1px solid #e9ecf1;
+  border: 1px solid #e9ebf0;
   border-radius: 3px;
   max-width: 100%;
   height: auto; }
@@ -426,55 +426,55 @@ main {
 
 .figure-caption {
   font-size: 87.5%;
-  color: #aeb3bc; }
+  color: #acb0b8; }
 
 .container {
   width: 100%;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
   margin-right: auto;
   margin-left: auto; }
-  @media (min-width: 576px) {
+  @media (min-width: 33rem) {
     .container {
-      max-width: 540px; } }
-  @media (min-width: 768px) {
+      max-width: 32.5rem; } }
+  @media (min-width: 48rem) {
     .container {
-      max-width: 720px; } }
-  @media (min-width: 992px) {
+      max-width: 47.5rem; } }
+  @media (min-width: 64rem) {
     .container {
-      max-width: 960px; } }
-  @media (min-width: 1200px) {
+      max-width: 64rem; } }
+  @media (min-width: 75.25rem) {
     .container {
-      max-width: 1200px; } }
+      max-width: 75.25rem; } }
 
 .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
   width: 100%;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
   margin-right: auto;
   margin-left: auto; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .container, .container-sm {
-    max-width: 540px; } }
+    max-width: 32.5rem; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .container, .container-sm, .container-md {
-    max-width: 720px; } }
+    max-width: 47.5rem; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .container, .container-sm, .container-md, .container-lg {
-    max-width: 960px; } }
+    max-width: 64rem; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .container, .container-sm, .container-md, .container-lg, .container-xl {
-    max-width: 1200px; } }
+    max-width: 75.25rem; } }
 
 .row {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -0.75rem;
-  margin-left: -0.75rem; }
+  margin-right: -0.625rem;
+  margin-left: -0.625rem; }
 
 .no-gutters {
   margin-right: 0;
@@ -492,12 +492,13 @@ main {
 .col-xl-auto {
   position: relative;
   width: 100%;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem; }
+  padding-right: 0.625rem;
+  padding-left: 0.625rem; }
 
 .col {
   flex-basis: 0;
   flex-grow: 1;
+  min-width: 0;
   max-width: 100%; }
 
 .row-cols-1 > * {
@@ -610,10 +611,11 @@ main {
 .offset-11 {
   margin-left: 91.6666667%; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .col-sm {
     flex-basis: 0;
     flex-grow: 1;
+    min-width: 0;
     max-width: 100%; }
   .row-cols-sm-1 > * {
     flex: 0 0 100%;
@@ -698,10 +700,11 @@ main {
   .offset-sm-11 {
     margin-left: 91.6666667%; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .col-md {
     flex-basis: 0;
     flex-grow: 1;
+    min-width: 0;
     max-width: 100%; }
   .row-cols-md-1 > * {
     flex: 0 0 100%;
@@ -786,10 +789,11 @@ main {
   .offset-md-11 {
     margin-left: 91.6666667%; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .col-lg {
     flex-basis: 0;
     flex-grow: 1;
+    min-width: 0;
     max-width: 100%; }
   .row-cols-lg-1 > * {
     flex: 0 0 100%;
@@ -874,10 +878,11 @@ main {
   .offset-lg-11 {
     margin-left: 91.6666667%; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .col-xl {
     flex-basis: 0;
     flex-grow: 1;
+    min-width: 0;
     max-width: 100%; }
   .row-cols-xl-1 > * {
     flex: 0 0 100%;
@@ -965,31 +970,31 @@ main {
 .table, .markdown table {
   width: 100%;
   margin-bottom: 1rem;
-  color: #354052;
+  color: #303645;
   vertical-align: top; }
   .table th, .markdown table th,
   .table td,
   .markdown table td {
     padding: 0.5rem;
-    border-bottom: 1px solid rgba(53, 64, 82, 0.16); }
+    border-bottom: 1px solid rgba(123, 126, 136, 0.24); }
   .table tbody, .markdown table tbody {
     vertical-align: inherit; }
   .table thead th, .markdown table thead th {
     vertical-align: bottom;
-    border-bottom-color: rgba(53, 64, 82, 0.16); }
+    border-bottom-color: rgba(123, 126, 136, 0.24); }
   .table tbody + tbody, .markdown table tbody + tbody {
-    border-top: 2px solid rgba(53, 64, 82, 0.16); }
+    border-top: 2px solid rgba(123, 126, 136, 0.24); }
 
 .table-sm th,
 .table-sm td {
   padding: 0.25rem; }
 
 .table-bordered, .markdown table {
-  border: 1px solid rgba(53, 64, 82, 0.16); }
+  border: 1px solid rgba(123, 126, 136, 0.24); }
   .table-bordered th, .markdown table th,
   .table-bordered td,
   .markdown table td {
-    border: 1px solid rgba(53, 64, 82, 0.16); }
+    border: 1px solid rgba(123, 126, 136, 0.24); }
   .table-bordered thead th, .markdown table thead th,
   .table-bordered thead td,
   .markdown table thead td {
@@ -1005,7 +1010,7 @@ main {
   background-color: rgba(0, 0, 0, 0.05); }
 
 .table-hover tbody tr:hover {
-  color: #354052;
+  color: #303645;
   background-color: rgba(0, 0, 0, 0.075); }
 
 .table-primary,
@@ -1028,19 +1033,19 @@ main {
 .table-secondary,
 .table-secondary > th,
 .table-secondary > td {
-  background-color: #f2f3f4; }
+  background-color: #f2f2f3; }
 
 .table-secondary th,
 .table-secondary td,
 .table-secondary thead th,
 .table-secondary tbody + tbody {
-  border-color: #cbced3; }
+  border-color: #cacbcf; }
 
 .table-hover .table-secondary:hover {
-  background-color: #e4e6e8; }
+  background-color: #e5e5e7; }
   .table-hover .table-secondary:hover > td,
   .table-hover .table-secondary:hover > th {
-    background-color: #e4e6e8; }
+    background-color: #e5e5e7; }
 
 .table-success,
 .table-success > th,
@@ -1130,19 +1135,19 @@ main {
 .table-dark,
 .table-dark > th,
 .table-dark > td {
-  background-color: #ebecee; }
+  background-color: #eaebec; }
 
 .table-dark th,
 .table-dark td,
 .table-dark thead th,
 .table-dark tbody + tbody {
-  border-color: #aeb3ba; }
+  border-color: #acafb5; }
 
 .table-hover .table-dark:hover {
-  background-color: #dddfe2; }
+  background-color: #dddee0; }
   .table-hover .table-dark:hover > td,
   .table-hover .table-dark:hover > th {
-    background-color: #dddfe2; }
+    background-color: #dddee0; }
 
 .table-active,
 .table-active > th,
@@ -1157,21 +1162,21 @@ main {
 
 .table .thead-dark th, .markdown table .thead-dark th {
   color: #ffffff;
-  background-color: #5f6877;
-  border-color: #707b8c; }
+  background-color: #5b606d;
+  border-color: #6c7282; }
 
 .table .thead-light th, .markdown table .thead-light th {
-  color: #8b929e;
-  background-color: #f1f3f8;
-  border-color: rgba(53, 64, 82, 0.16); }
+  color: #898d97;
+  background-color: #f1f3f7;
+  border-color: rgba(123, 126, 136, 0.24); }
 
 .table-dark {
   color: #ffffff;
-  background-color: #5f6877; }
+  background-color: #5b606d; }
   .table-dark th,
   .table-dark td,
   .table-dark thead th {
-    border-color: #707b8c; }
+    border-color: #6c7282; }
   .table-dark.table-bordered, .markdown table.table-dark {
     border: 0; }
   .table-dark.table-striped tbody tr:nth-of-type(odd) {
@@ -1180,7 +1185,7 @@ main {
     color: #ffffff;
     background-color: rgba(255, 255, 255, 0.075); }
 
-@media (max-width: 575.98px) {
+@media (max-width: 32.98rem) {
   .table-responsive-sm {
     display: block;
     width: 100%;
@@ -1189,7 +1194,7 @@ main {
     .table-responsive-sm > .table-bordered, .markdown .table-responsive-sm > table {
       border: 0; } }
 
-@media (max-width: 767.98px) {
+@media (max-width: 47.98rem) {
   .table-responsive-md {
     display: block;
     width: 100%;
@@ -1198,7 +1203,7 @@ main {
     .table-responsive-md > .table-bordered, .markdown .table-responsive-md > table {
       border: 0; } }
 
-@media (max-width: 991.98px) {
+@media (max-width: 63.98rem) {
   .table-responsive-lg {
     display: block;
     width: 100%;
@@ -1207,7 +1212,7 @@ main {
     .table-responsive-lg > .table-bordered, .markdown .table-responsive-lg > table {
       border: 0; } }
 
-@media (max-width: 1199.98px) {
+@media (max-width: 75.23rem) {
   .table-responsive-xl {
     display: block;
     width: 100%;
@@ -1249,10 +1254,10 @@ main {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #354052;
+  color: #303645;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
@@ -1262,25 +1267,25 @@ main {
     background-color: transparent;
     border: 0; }
   .form-control:focus {
-    color: #354052;
+    color: inherit;
     background-color: #ffffff;
     border-color: #7aade9;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
   .form-control::-webkit-input-placeholder {
-    color: #7e8590;
+    color: #7b7e88;
     opacity: 1; }
   .form-control::-moz-placeholder {
-    color: #7e8590;
+    color: #7b7e88;
     opacity: 1; }
   .form-control:-ms-input-placeholder {
-    color: #7e8590;
+    color: #7b7e88;
     opacity: 1; }
   .form-control::-ms-input-placeholder {
-    color: #7e8590;
+    color: #7b7e88;
     opacity: 1; }
   .form-control::placeholder {
-    color: #7e8590;
+    color: #7b7e88;
     opacity: 1; }
   .form-control:disabled, .form-control[readonly] {
     background-color: #f5f7fb;
@@ -1292,7 +1297,7 @@ main {
   padding: 0.375rem 0;
   margin-bottom: 0;
   line-height: 1.4666667;
-  color: #354052;
+  color: #303645;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0; }
@@ -1330,10 +1335,10 @@ main {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #354052;
+  color: #303645;
   vertical-align: middle;
-  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='%235f6877' 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;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  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%28123, 126, 136, 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;
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1343,20 +1348,20 @@ main {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
     .form-select:focus::-ms-value {
-      color: #354052;
+      color: #303645;
       background-color: #ffffff; }
   .form-select[multiple], .form-select[size]:not([size="1"]) {
     height: auto;
     padding-right: 0.75rem;
     background-image: none; }
   .form-select:disabled {
-    color: #aeb3bc;
-    background-color: #f1f3f8; }
+    color: #acb0b8;
+    background-color: #f1f3f7; }
   .form-select::-ms-expand {
     display: none; }
   .form-select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 #354052; }
+    text-shadow: 0 0 0 #303645; }
 
 .form-select-sm {
   height: calc(1.4666667em + 0.25rem + 2px);
@@ -1387,7 +1392,7 @@ main {
   margin-top: 0.3rem;
   vertical-align: top;
   background-color: #ffffff;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1408,8 +1413,8 @@ main {
     background-color: #206bc4;
     background-repeat: no-repeat;
     background-position: center center;
-    background-size: 0.8rem;
-    border-color: rgba(53, 64, 82, 0.16); }
+    background-size: 0.75rem;
+    border-color: rgba(123, 126, 136, 0.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'/%3e%3c/svg%3e"); }
     .form-check-input:checked[type="radio"] {
@@ -1486,7 +1491,7 @@ main {
   z-index: 1;
   display: flex;
   height: calc(1.4666667em + 0.75rem + 2px);
-  border-color: rgba(53, 64, 82, 0.16);
+  border-color: rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .form-file-text {
@@ -1496,7 +1501,7 @@ main {
   overflow: hidden;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #354052;
+  color: #303645;
   text-overflow: ellipsis;
   white-space: nowrap;
   background-color: #ffffff;
@@ -1512,8 +1517,8 @@ main {
   padding: 0.375rem 0.75rem;
   margin-left: -1px;
   line-height: 1.4666667;
-  color: #354052;
-  background-color: #f5f7fb;
+  color: #303645;
+  background-color: rgba(48, 54, 69, 0.032);
   border-color: inherit;
   border-style: solid;
   border-width: 1px;
@@ -1522,7 +1527,7 @@ main {
 
 .form-range {
   width: 100%;
-  height: 1.4rem;
+  height: 1.25rem;
   padding: 0;
   background-color: transparent;
   -webkit-appearance: none;
@@ -1543,7 +1548,7 @@ main {
     height: 1rem;
     margin-top: -0.375rem;
     background-color: #206bc4;
-    border: 0;
+    border: 2px solid #ffffff;
     border-radius: 1rem;
     -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -1560,14 +1565,14 @@ main {
     height: 0.25rem;
     color: transparent;
     cursor: pointer;
-    background-color: #e9ecf1;
+    background-color: rgba(174, 178, 185, 0.24);
     border-color: transparent;
     border-radius: 1rem; }
   .form-range::-moz-range-thumb {
     width: 1rem;
     height: 1rem;
     background-color: #206bc4;
-    border: 0;
+    border: 2px solid #ffffff;
     border-radius: 1rem;
     -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -1584,17 +1589,17 @@ main {
     height: 0.25rem;
     color: transparent;
     cursor: pointer;
-    background-color: #e9ecf1;
+    background-color: rgba(174, 178, 185, 0.24);
     border-color: transparent;
     border-radius: 1rem; }
   .form-range::-ms-thumb {
     width: 1rem;
     height: 1rem;
     margin-top: 0;
-    margin-right: 0.2rem;
-    margin-left: 0.2rem;
+    margin-right: 0.125rem;
+    margin-left: 0.125rem;
     background-color: #206bc4;
-    border: 0;
+    border: 2px solid #ffffff;
     border-radius: 1rem;
     -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -1614,20 +1619,20 @@ main {
     border-color: transparent;
     border-width: 0.5rem; }
   .form-range::-ms-fill-lower {
-    background-color: #e9ecf1;
+    background-color: rgba(174, 178, 185, 0.24);
     border-radius: 1rem; }
   .form-range::-ms-fill-upper {
     margin-right: 15px;
-    background-color: #e9ecf1;
+    background-color: rgba(174, 178, 185, 0.24);
     border-radius: 1rem; }
   .form-range:disabled {
     pointer-events: none; }
     .form-range:disabled::-webkit-slider-thumb {
-      background-color: #cdd1d8; }
+      background-color: #ccced5; }
     .form-range:disabled::-moz-range-thumb {
-      background-color: #cdd1d8; }
+      background-color: #ccced5; }
     .form-range:disabled::-ms-thumb {
-      background-color: #cdd1d8; }
+      background-color: #ccced5; }
 
 .form-row {
   display: flex;
@@ -1645,7 +1650,7 @@ main {
   align-items: center; }
   .form-inline .form-check {
     width: 100%; }
-  @media (min-width: 576px) {
+  @media (min-width: 33rem) {
     .form-inline label {
       display: flex;
       align-items: center;
@@ -1683,7 +1688,8 @@ main {
   .input-group > .form-select,
   .input-group > .form-file {
     position: relative;
-    flex: 1 1 0%;
+    flex: 1 1 auto;
+    width: 1%;
     min-width: 0;
     margin-bottom: 0; }
     .input-group > .form-control + .form-control,
@@ -1754,11 +1760,11 @@ main {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
   white-space: nowrap;
-  background-color: #f5f7fb;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  background-color: rgba(48, 54, 69, 0.032);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .input-group-lg > .form-control {
@@ -1859,7 +1865,7 @@ main {
 .was-validated .form-select:valid, .form-select.is-valid {
   border-color: #5eba00;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6877' 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, 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") #ffffff no-repeat center right 1.75rem/calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
+  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%28123, 126, 136, 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, 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") #ffffff no-repeat center right 1.75rem/calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
     border-color: #5eba00;
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.25); }
@@ -1927,7 +1933,7 @@ main {
 .was-validated .form-select:invalid, .form-select.is-invalid {
   border-color: #fa4654;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6877' 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, 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") #ffffff no-repeat center right 1.75rem/calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
+  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%28123, 126, 136, 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, 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") #ffffff no-repeat center right 1.75rem/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); }
@@ -1955,7 +1961,7 @@ main {
   display: inline-block;
   font-weight: 500;
   line-height: 1.4666667;
-  color: #354052;
+  color: #303645;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -1973,7 +1979,7 @@ main {
     .btn {
       transition: none; } }
   .btn:hover {
-    color: #354052;
+    color: #303645;
     text-decoration: none; }
   .btn:focus, .btn.focus {
     outline: 0;
@@ -2011,29 +2017,29 @@ main {
 
 .btn-secondary {
   color: #ffffff;
-  background-color: #7e8590;
-  border-color: #7e8590; }
+  background-color: #7b7e88;
+  border-color: #7b7e88; }
   .btn-secondary:hover {
     color: #ffffff;
-    background-color: #6b727d;
-    border-color: #656c76; }
+    background-color: #696b74;
+    border-color: #63656d; }
   .btn-secondary:focus, .btn-secondary.focus {
     color: #ffffff;
-    background-color: #6b727d;
-    border-color: #656c76;
-    box-shadow: 0 0 0 0.2rem rgba(145, 151, 161, 0.5); }
+    background-color: #696b74;
+    border-color: #63656d;
+    box-shadow: 0 0 0 0.2rem rgba(143, 145, 154, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #656c76;
-    border-color: #5f656f; }
+    background-color: #63656d;
+    border-color: #5d5f67; }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(145, 151, 161, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(143, 145, 154, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
     color: #ffffff;
-    background-color: #7e8590;
-    border-color: #7e8590; }
+    background-color: #7b7e88;
+    border-color: #7b7e88; }
 
 .btn-success {
   color: #ffffff;
@@ -2140,56 +2146,56 @@ main {
     border-color: #fa4654; }
 
 .btn-light {
-  color: #354052;
+  color: #303645;
   background-color: #f5f7fb;
   border-color: #f5f7fb; }
   .btn-light:hover {
-    color: #354052;
+    color: #303645;
     background-color: #dae1f0;
     border-color: #d1daec; }
   .btn-light:focus, .btn-light.focus {
-    color: #354052;
+    color: #303645;
     background-color: #dae1f0;
     border-color: #d1daec;
-    box-shadow: 0 0 0 0.2rem rgba(216, 220, 226, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(215, 218, 224, 0.5); }
   .btn-light:active, .btn-light.active,
   .show > .btn-light.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     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 0.2rem rgba(216, 220, 226, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(215, 218, 224, 0.5); }
   .btn-light:disabled, .btn-light.disabled {
-    color: #354052;
+    color: #303645;
     background-color: #f5f7fb;
     border-color: #f5f7fb; }
 
 .btn-dark {
   color: #ffffff;
-  background-color: #354052;
-  border-color: #354052; }
+  background-color: #303645;
+  border-color: #303645; }
   .btn-dark:hover {
     color: #ffffff;
-    background-color: #262e3b;
-    border-color: #212833; }
+    background-color: #20242e;
+    border-color: #1b1e27; }
   .btn-dark:focus, .btn-dark.focus {
     color: #ffffff;
-    background-color: #262e3b;
-    border-color: #212833;
-    box-shadow: 0 0 0 0.2rem rgba(83, 93, 108, 0.5); }
+    background-color: #20242e;
+    border-color: #1b1e27;
+    box-shadow: 0 0 0 0.2rem rgba(79, 84, 97, 0.5); }
   .btn-dark:active, .btn-dark.active,
   .show > .btn-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #212833;
-    border-color: #1c222b; }
+    background-color: #1b1e27;
+    border-color: #16191f; }
     .btn-dark:active:focus, .btn-dark.active:focus,
     .show > .btn-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(83, 93, 108, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(79, 84, 97, 0.5); }
   .btn-dark:disabled, .btn-dark.disabled {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
 
 .btn-outline-primary {
   color: #206bc4;
@@ -2213,24 +2219,24 @@ main {
     background-color: transparent; }
 
 .btn-outline-secondary {
-  color: #7e8590;
-  border-color: #7e8590; }
+  color: #7b7e88;
+  border-color: #7b7e88; }
   .btn-outline-secondary:hover {
     color: #ffffff;
-    background-color: #7e8590;
-    border-color: #7e8590; }
+    background-color: #7b7e88;
+    border-color: #7b7e88; }
   .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(126, 133, 144, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(123, 126, 136, 0.5); }
   .btn-outline-secondary:active, .btn-outline-secondary.active,
   .show > .btn-outline-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #7e8590;
-    border-color: #7e8590; }
+    background-color: #7b7e88;
+    border-color: #7b7e88; }
     .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus,
     .show > .btn-outline-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(126, 133, 144, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(123, 126, 136, 0.5); }
   .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
-    color: #7e8590;
+    color: #7b7e88;
     background-color: transparent; }
 
 .btn-outline-success {
@@ -2321,14 +2327,14 @@ main {
   color: #f5f7fb;
   border-color: #f5f7fb; }
   .btn-outline-light:hover {
-    color: #354052;
+    color: #303645;
     background-color: #f5f7fb;
     border-color: #f5f7fb; }
   .btn-outline-light:focus, .btn-outline-light.focus {
     box-shadow: 0 0 0 0.2rem rgba(245, 247, 251, 0.5); }
   .btn-outline-light:active, .btn-outline-light.active,
   .show > .btn-outline-light.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     background-color: #f5f7fb;
     border-color: #f5f7fb; }
     .btn-outline-light:active:focus, .btn-outline-light.active:focus,
@@ -2339,24 +2345,24 @@ main {
     background-color: transparent; }
 
 .btn-outline-dark {
-  color: #354052;
-  border-color: #354052; }
+  color: #303645;
+  border-color: #303645; }
   .btn-outline-dark:hover {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
   .btn-outline-dark:focus, .btn-outline-dark.focus {
-    box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-outline-dark:active, .btn-outline-dark.active,
   .show > .btn-outline-dark.dropdown-toggle {
     color: #ffffff;
-    background-color: #354052;
-    border-color: #354052; }
+    background-color: #303645;
+    border-color: #303645; }
     .btn-outline-dark:active:focus, .btn-outline-dark.active:focus,
     .show > .btn-outline-dark.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(48, 54, 69, 0.5); }
   .btn-outline-dark:disabled, .btn-outline-dark.disabled {
-    color: #354052;
+    color: #303645;
     background-color: transparent; }
 
 .btn-link {
@@ -2370,7 +2376,7 @@ main {
     text-decoration: underline;
     box-shadow: none; }
   .btn-link:disabled, .btn-link.disabled {
-    color: #aeb3bc; }
+    color: #acb0b8; }
 
 .btn-lg, .btn-group-lg > .btn {
   padding: 0.5rem 1.5rem;
@@ -2436,12 +2442,12 @@ main {
   padding: 0.5rem 0;
   margin: 1px 0 0;
   font-size: 1em;
-  color: #354052;
+  color: #303645;
   text-align: left;
   list-style: none;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .dropdown-menu-left {
@@ -2452,7 +2458,7 @@ main {
   right: 0;
   left: auto; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .dropdown-menu-sm-left {
     right: auto;
     left: 0; }
@@ -2460,7 +2466,7 @@ main {
     right: 0;
     left: auto; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .dropdown-menu-md-left {
     right: auto;
     left: 0; }
@@ -2468,7 +2474,7 @@ main {
     right: 0;
     left: auto; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .dropdown-menu-lg-left {
     right: auto;
     left: 0; }
@@ -2476,7 +2482,7 @@ main {
     right: 0;
     left: auto; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .dropdown-menu-xl-left {
     right: auto;
     left: 0; }
@@ -2554,7 +2560,7 @@ main {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid rgba(53, 64, 82, 0.16); }
+  border-top: 1px solid rgba(123, 126, 136, 0.24); }
 
 .dropdown-item {
   display: block;
@@ -2562,7 +2568,7 @@ main {
   padding: 0.25rem 1rem;
   clear: both;
   font-weight: 400;
-  color: #354052;
+  color: #303645;
   text-align: inherit;
   white-space: nowrap;
   background-color: transparent;
@@ -2570,13 +2576,13 @@ main {
   .dropdown-item:hover, .dropdown-item:focus {
     color: inherit;
     text-decoration: none;
-    background-color: #f1f3f8; }
+    background-color: rgba(245, 247, 251, 0.24); }
   .dropdown-item.active, .dropdown-item:active {
     color: #206bc4;
     text-decoration: none;
     background-color: rgba(32, 107, 196, 0.06); }
   .dropdown-item.disabled, .dropdown-item:disabled {
-    color: #aeb3bc;
+    color: #acb0b8;
     pointer-events: none;
     background-color: transparent; }
 
@@ -2588,13 +2594,13 @@ main {
   padding: 0.5rem 1rem;
   margin-bottom: 0;
   font-size: 0.8203125rem;
-  color: #aeb3bc;
+  color: #acb0b8;
   white-space: nowrap; }
 
 .dropdown-item-text {
   display: block;
   padding: 0.25rem 1rem;
-  color: #354052; }
+  color: #303645; }
 
 .btn-group,
 .btn-group-vertical {
@@ -2694,12 +2700,12 @@ main {
   .nav-link:hover, .nav-link:focus {
     text-decoration: none; }
   .nav-link.disabled {
-    color: #aeb3bc;
+    color: #acb0b8;
     pointer-events: none;
     cursor: default; }
 
 .nav-tabs {
-  border-bottom: 1px solid #e9ecf1; }
+  border-bottom: 1px solid #e9ebf0; }
   .nav-tabs .nav-item {
     margin-bottom: -1px; }
   .nav-tabs .nav-link {
@@ -2707,16 +2713,16 @@ main {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px; }
     .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
-      border-color: #f1f3f8 #f1f3f8 #e9ecf1; }
+      border-color: #f1f3f7 #f1f3f7 #e9ebf0; }
     .nav-tabs .nav-link.disabled {
-      color: #aeb3bc;
+      color: #acb0b8;
       background-color: transparent;
       border-color: transparent; }
   .nav-tabs .nav-link.active,
   .nav-tabs .nav-item.show .nav-link {
-    color: #8b929e;
+    color: #898d97;
     background-color: #f5f7fb;
-    border-color: #e9ecf1 #e9ecf1 #f5f7fb; }
+    border-color: #e9ebf0 #e9ebf0 #f5f7fb; }
   .nav-tabs .dropdown-menu {
     margin-top: -1px;
     border-top-left-radius: 0;
@@ -2751,10 +2757,8 @@ main {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding-top: 0.75rem;
-  padding-right: 0.75rem;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75rem; }
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem; }
   .navbar > .container,
   .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
     display: flex;
@@ -2792,14 +2796,22 @@ main {
   align-items: center; }
 
 .navbar-toggler {
-  padding: 0.25rem 0.75rem;
-  font-size: 1.171875rem;
+  padding: 0.75rem 0.75rem;
+  font-size: 1rem;
   line-height: 1;
   background-color: transparent;
   border: 1px solid transparent;
-  border-radius: 3px; }
-  .navbar-toggler:hover, .navbar-toggler:focus {
+  border-radius: 3px;
+  transition: box-shadow 0.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 0.2rem; }
 
 .navbar-toggler-icon {
   display: inline-block;
@@ -2810,7 +2822,7 @@ main {
   background-position: center;
   background-size: 100%; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .navbar-expand-sm {
     flex-wrap: nowrap;
     justify-content: flex-start; }
@@ -2827,7 +2839,7 @@ main {
     .navbar-expand-sm .navbar-toggler {
       display: none; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .navbar-expand-md {
     flex-wrap: nowrap;
     justify-content: flex-start; }
@@ -2844,7 +2856,7 @@ main {
     .navbar-expand-md .navbar-toggler {
       display: none; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .navbar-expand-lg {
     flex-wrap: nowrap;
     justify-content: flex-start; }
@@ -2861,7 +2873,7 @@ main {
     .navbar-expand-lg .navbar-toggler {
       display: none; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .navbar-expand-xl {
     flex-wrap: nowrap;
     justify-content: flex-start; }
@@ -2900,9 +2912,9 @@ main {
     color: #206bc4; }
 
 .navbar-light .navbar-nav .nav-link {
-  color: #7e8590; }
+  color: #7b7e88; }
   .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
-    color: #354052; }
+    color: #303645; }
   .navbar-light .navbar-nav .nav-link.disabled {
     color: rgba(0, 0, 0, 0.3); }
 
@@ -2913,14 +2925,14 @@ main {
   color: #206bc4; }
 
 .navbar-light .navbar-toggler {
-  color: #7e8590;
+  color: #7b7e88;
   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='%237e8590' 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='%237b7e88' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
 
 .navbar-light .navbar-text {
-  color: #7e8590; }
+  color: #7b7e88; }
   .navbar-light .navbar-text a,
   .navbar-light .navbar-text a:hover,
   .navbar-light .navbar-text a:focus {
@@ -2932,7 +2944,7 @@ main {
     color: #ffffff; }
 
 .navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.5); }
+  color: rgba(255, 255, 255, 0.55); }
   .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 {
@@ -2945,14 +2957,14 @@ main {
   color: #ffffff; }
 
 .navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.55);
   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.5%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.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, 0.5); }
+  color: rgba(255, 255, 255, 0.55); }
   .navbar-dark .navbar-text a,
   .navbar-dark .navbar-text a:hover,
   .navbar-dark .navbar-text a:focus {
@@ -2966,7 +2978,7 @@ main {
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: border-box;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
   .card > hr, .card > .hr {
     margin-right: 0;
@@ -3002,8 +3014,8 @@ main {
 .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
-  background-color: rgba(53, 64, 82, 0.02);
-  border-bottom: 1px solid rgba(53, 64, 82, 0.16); }
+  background-color: rgba(48, 54, 69, 0.032);
+  border-bottom: 1px solid rgba(123, 126, 136, 0.24); }
   .card-header:first-child {
     border-radius: 2px 2px 0 0; }
   .card-header + .list-group .list-group-item:first-child {
@@ -3011,8 +3023,8 @@ main {
 
 .card-footer {
   padding: 0.75rem 1.25rem;
-  background-color: rgba(53, 64, 82, 0.02);
-  border-top: 1px solid rgba(53, 64, 82, 0.16); }
+  background-color: rgba(48, 54, 69, 0.032);
+  border-top: 1px solid rgba(123, 126, 136, 0.24); }
   .card-footer:last-child {
     border-radius: 0 0 2px 2px; }
 
@@ -3056,7 +3068,7 @@ main {
 .card-deck .card {
   margin-bottom: 1.5rem; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .card-deck {
     display: flex;
     flex-flow: row wrap;
@@ -3071,7 +3083,7 @@ main {
 .card-group > .card {
   margin-bottom: 1.5rem; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .card-group {
     display: flex;
     flex-flow: row wrap; }
@@ -3119,7 +3131,7 @@ main {
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: #f1f3f8;
+  background-color: #f1f3f7;
   border-radius: 3px; }
 
 .breadcrumb-item {
@@ -3129,14 +3141,14 @@ main {
     .breadcrumb-item + .breadcrumb-item::before {
       display: inline-block;
       padding-right: 0.5rem;
-      color: #aeb3bc;
+      color: #acb0b8;
       content: "/"; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: underline; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: none; }
   .breadcrumb-item.active {
-    color: #aeb3bc; }
+    color: #acb0b8; }
 
 .pagination {
   display: flex;
@@ -3146,15 +3158,15 @@ main {
 .page-link {
   position: relative;
   display: block;
-  color: #7e8590;
+  color: #7b7e88;
   background-color: transparent;
-  border: 0 solid #e9ecf1; }
+  border: 0 solid #e9ebf0; }
   .page-link:hover {
     z-index: 2;
     color: #154782;
     text-decoration: none;
-    background-color: #f1f3f8;
-    border-color: #e9ecf1; }
+    background-color: #f1f3f7;
+    border-color: #e9ebf0; }
   .page-link:focus {
     z-index: 3;
     outline: 0;
@@ -3170,10 +3182,10 @@ main {
   border-color: #206bc4; }
 
 .page-item.disabled .page-link {
-  color: rgba(126, 133, 144, 0.5);
+  color: rgba(123, 126, 136, 0.5);
   pointer-events: none;
   background-color: transparent;
-  border-color: #e9ecf1; }
+  border-color: #e9ebf0; }
 
 .page-link {
   padding: 0.25rem 0.25rem; }
@@ -3258,11 +3270,11 @@ main {
     color: black; }
 
 .alert-secondary {
-  color: #191b1d;
-  background-color: #e5e7e9;
-  border-color: #cbced3; }
+  color: #19191b;
+  background-color: #e5e5e7;
+  border-color: #cacbcf; }
   .alert-secondary .alert-link {
-    color: #010202; }
+    color: #000001; }
 
 .alert-success {
   color: #132500;
@@ -3300,26 +3312,26 @@ main {
     color: #181818; }
 
 .alert-dark {
-  color: #0b0d10;
-  background-color: #d7d9dc;
-  border-color: #aeb3ba; }
+  color: #0a0b0e;
+  background-color: #d6d7da;
+  border-color: #acafb5; }
   .alert-dark .alert-link {
     color: black; }
 
 @-webkit-keyframes progress-bar-stripes {
   0% {
-    background-position-x: 0.75rem; } }
+    background-position-x: 0.5rem; } }
 
 @keyframes progress-bar-stripes {
   0% {
-    background-position-x: 0.75rem; } }
+    background-position-x: 0.5rem; } }
 
 .progress {
   display: flex;
-  height: 0.75rem;
+  height: 0.5rem;
   overflow: hidden;
   font-size: 0.703125rem;
-  background-color: #f1f3f8;
+  background-color: rgba(174, 178, 185, 0.24);
   border-radius: 3px; }
 
 .progress-bar {
@@ -3338,7 +3350,7 @@ main {
 
 .progress-bar-striped {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: 0.75rem 0.75rem; }
+  background-size: 0.5rem 0.5rem; }
 
 .progress-bar-animated {
   -webkit-animation: progress-bar-stripes 1s linear infinite;
@@ -3364,8 +3376,8 @@ main {
     text-decoration: none;
     background-color: #f5f7fb; }
   .list-group-item-action:active {
-    color: #354052;
-    background-color: #f1f3f8; }
+    color: #303645;
+    background-color: #f1f3f7; }
 
 .list-group-item {
   position: relative;
@@ -3373,7 +3385,7 @@ main {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
   background-color: #ffffff;
-  border: 1px solid rgba(53, 64, 82, 0.16); }
+  border: 1px solid rgba(123, 126, 136, 0.24); }
   .list-group-item:first-child {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px; }
@@ -3381,7 +3393,7 @@ main {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px; }
   .list-group-item.disabled, .list-group-item:disabled {
-    color: #aeb3bc;
+    color: #acb0b8;
     pointer-events: none;
     background-color: #ffffff; }
   .list-group-item.active {
@@ -3412,7 +3424,7 @@ main {
       margin-left: -1px;
       border-left-width: 1px; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .list-group-horizontal-sm {
     flex-direction: row; }
     .list-group-horizontal-sm .list-group-item:first-child {
@@ -3430,7 +3442,7 @@ main {
         margin-left: -1px;
         border-left-width: 1px; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .list-group-horizontal-md {
     flex-direction: row; }
     .list-group-horizontal-md .list-group-item:first-child {
@@ -3448,7 +3460,7 @@ main {
         margin-left: -1px;
         border-left-width: 1px; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .list-group-horizontal-lg {
     flex-direction: row; }
     .list-group-horizontal-lg .list-group-item:first-child {
@@ -3466,7 +3478,7 @@ main {
         margin-left: -1px;
         border-left-width: 1px; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .list-group-horizontal-xl {
     flex-direction: row; }
     .list-group-horizontal-xl .list-group-item:first-child {
@@ -3506,15 +3518,15 @@ main {
     border-color: #0d2b4e; }
 
 .list-group-item-secondary {
-  color: #32353a;
-  background-color: #f2f3f4; }
+  color: #313236;
+  background-color: #f2f2f3; }
   .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
-    color: #32353a;
-    background-color: #e4e6e8; }
+    color: #313236;
+    background-color: #e5e5e7; }
   .list-group-item-secondary.list-group-item-action.active {
     color: #ffffff;
-    background-color: #32353a;
-    border-color: #32353a; }
+    background-color: #313236;
+    border-color: #313236; }
 
 .list-group-item-success {
   color: #264a00;
@@ -3572,15 +3584,15 @@ main {
     border-color: #626364; }
 
 .list-group-item-dark {
-  color: #151a21;
-  background-color: #ebecee; }
+  color: #13161c;
+  background-color: #eaebec; }
   .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
-    color: #151a21;
-    background-color: #dddfe2; }
+    color: #13161c;
+    background-color: #dddee0; }
   .list-group-item-dark.list-group-item-action.active {
     color: #ffffff;
-    background-color: #151a21;
-    border-color: #151a21; }
+    background-color: #13161c;
+    border-color: #13161c; }
 
 .close {
   font-size: calc(1.275rem + 0.3vw);
@@ -3614,7 +3626,7 @@ button.close {
   font-size: 0.875rem;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
@@ -3634,7 +3646,7 @@ button.close {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #7e8590;
+  color: #7b7e88;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
@@ -3666,7 +3678,7 @@ button.close {
   pointer-events: none; }
   .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
-    transform: translate(0, -50px); }
+    transform: translate(0, -1rem); }
     @media (prefers-reduced-motion: reduce) {
       .modal.fade .modal-dialog {
         transition: none; } }
@@ -3712,8 +3724,8 @@ button.close {
   pointer-events: auto;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
+  border: 1px solid rgba(123, 126, 136, 0.24);
+  border-radius: 3px;
   outline: 0; }
 
 .modal-backdrop {
@@ -3723,20 +3735,20 @@ button.close {
   z-index: 1040;
   width: 100vw;
   height: 100vh;
-  background-color: #000000; }
+  background-color: #303645; }
   .modal-backdrop.fade {
     opacity: 0; }
   .modal-backdrop.show {
-    opacity: 0.5; }
+    opacity: 0.24; }
 
 .modal-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   padding: 1rem 1rem;
-  border-bottom: 1px solid rgba(53, 64, 82, 0.16);
-  border-top-left-radius: calc(0.3rem - 1px);
-  border-top-right-radius: calc(0.3rem - 1px); }
+  border-bottom: 0 solid rgba(123, 126, 136, 0.24);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px; }
   .modal-header .close {
     padding: 1rem 1rem;
     margin: -1rem -1rem -1rem auto; }
@@ -3748,17 +3760,17 @@ button.close {
 .modal-body {
   position: relative;
   flex: 1 1 auto;
-  padding: 1rem; }
+  padding: 0.75rem; }
 
 .modal-footer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  padding: 0.75rem;
-  border-top: 1px solid rgba(53, 64, 82, 0.16);
-  border-bottom-right-radius: calc(0.3rem - 1px);
-  border-bottom-left-radius: calc(0.3rem - 1px); }
+  padding: 0.5rem;
+  border-top: 0 solid rgba(123, 126, 136, 0.24);
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px; }
   .modal-footer > * {
     margin: 0.25rem; }
 
@@ -3769,9 +3781,9 @@ button.close {
   height: 50px;
   overflow: scroll; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .modal-dialog {
-    max-width: 500px;
+    max-width: 540px;
     margin: 1.75rem auto; }
   .modal-dialog-scrollable {
     max-height: calc(100% - 3.5rem); }
@@ -3784,12 +3796,12 @@ button.close {
   .modal-sm {
     max-width: 300px; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .modal-lg,
   .modal-xl {
     max-width: 800px; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .modal-xl {
     max-width: 1140px; } }
 
@@ -3901,7 +3913,7 @@ button.close {
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 0.3rem; }
   .popover .popover-arrow {
     position: absolute;
@@ -3923,7 +3935,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(53, 64, 82, 0.21); }
+      border-top-color: rgba(123, 126, 136, 0.29); }
     .bs-popover-top > .popover-arrow::after, .bs-popover-auto[x-placement^="top"] > .popover-arrow::after {
       bottom: 1px;
       border-width: 0.5rem 0.5rem 0;
@@ -3939,7 +3951,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(53, 64, 82, 0.21); }
+      border-right-color: rgba(123, 126, 136, 0.29); }
     .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;
@@ -3952,7 +3964,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(53, 64, 82, 0.21); }
+      border-bottom-color: rgba(123, 126, 136, 0.29); }
     .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;
@@ -3977,7 +3989,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(53, 64, 82, 0.21); }
+      border-left-color: rgba(123, 126, 136, 0.29); }
     .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;
@@ -3996,7 +4008,7 @@ button.close {
 
 .popover-body {
   padding: 0.5rem 0.75rem;
-  color: #354052; }
+  color: #303645; }
 
 .carousel {
   position: relative; }
@@ -4170,7 +4182,7 @@ button.close {
 .spinner-border-sm {
   width: 1rem;
   height: 1rem;
-  border-width: 2px; }
+  border-width: 1px; }
 
 @-webkit-keyframes spinner-grow {
   0% {
@@ -4210,9 +4222,9 @@ button.close {
     color: #154782; }
 
 .link-secondary {
-  color: #7e8590; }
+  color: #7b7e88; }
   .link-secondary:hover, .link-secondary:focus {
-    color: #595f68; }
+    color: #575960; }
 
 .link-success {
   color: #5eba00; }
@@ -4240,9 +4252,9 @@ button.close {
     color: #becbe5; }
 
 .link-dark {
-  color: #354052; }
+  color: #303645; }
   .link-dark:hover, .link-dark:focus {
-    color: #171c24; }
+    color: #111318; }
 
 .embed-responsive {
   position: relative;
@@ -4274,6 +4286,9 @@ button.close {
 .embed-responsive-1by1::before {
   padding-top: 100%; }
 
+.embed-responsive-2by1::before {
+  padding-top: 50%; }
+
 .fixed-top {
   position: fixed;
   top: 0;
@@ -4294,25 +4309,25 @@ button.close {
     position: sticky;
     top: 0;
     z-index: 1020; }
-  @media (min-width: 576px) {
+  @media (min-width: 33rem) {
     .sticky-sm-top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
       z-index: 1020; } }
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .sticky-md-top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
       z-index: 1020; } }
-  @media (min-width: 992px) {
+  @media (min-width: 64rem) {
     .sticky-lg-top {
       position: -webkit-sticky;
       position: sticky;
       top: 0;
       z-index: 1020; } }
-  @media (min-width: 1200px) {
+  @media (min-width: 75.25rem) {
     .sticky-xl-top {
       position: -webkit-sticky;
       position: sticky;
@@ -4434,46 +4449,46 @@ button.close {
   position: sticky !important; }
 
 .border {
-  border: 1px solid rgba(53, 64, 82, 0.16) !important; }
+  border: 1px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-wide {
-  border: 2px solid rgba(53, 64, 82, 0.16) !important; }
+  border: 2px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-0 {
   border: 0 !important; }
 
 .border-top {
-  border-top: 1px solid rgba(53, 64, 82, 0.16) !important; }
+  border-top: 1px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-top-wide {
-  border-top: 2px solid rgba(53, 64, 82, 0.16) !important; }
+  border-top: 2px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-top-0 {
   border-top: 0 !important; }
 
 .border-right {
-  border-right: 1px solid rgba(53, 64, 82, 0.16) !important; }
+  border-right: 1px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-right-wide {
-  border-right: 2px solid rgba(53, 64, 82, 0.16) !important; }
+  border-right: 2px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-right-0 {
   border-right: 0 !important; }
 
 .border-bottom {
-  border-bottom: 1px solid rgba(53, 64, 82, 0.16) !important; }
+  border-bottom: 1px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-bottom-wide {
-  border-bottom: 2px solid rgba(53, 64, 82, 0.16) !important; }
+  border-bottom: 2px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-bottom-0 {
   border-bottom: 0 !important; }
 
 .border-left {
-  border-left: 1px solid rgba(53, 64, 82, 0.16) !important; }
+  border-left: 1px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-left-wide {
-  border-left: 2px solid rgba(53, 64, 82, 0.16) !important; }
+  border-left: 2px solid rgba(123, 126, 136, 0.24) !important; }
 
 .border-left-0 {
   border-left: 0 !important; }
@@ -4482,7 +4497,7 @@ button.close {
   border-color: #206bc4 !important; }
 
 .border-secondary {
-  border-color: #7e8590 !important; }
+  border-color: #7b7e88 !important; }
 
 .border-success {
   border-color: #5eba00 !important; }
@@ -4500,7 +4515,7 @@ button.close {
   border-color: #f5f7fb !important; }
 
 .border-dark {
-  border-color: #354052 !important; }
+  border-color: #303645 !important; }
 
 .border-white {
   border-color: #ffffff !important; }
@@ -4695,23 +4710,17 @@ button.close {
   margin: 1rem !important; }
 
 .m-4 {
-  margin: 1.25rem !important; }
-
-.m-5 {
   margin: 1.5rem !important; }
 
+.m-5 {
+  margin: 2.5rem !important; }
+
 .m-6 {
-  margin: 3rem !important; }
+  margin: 4rem !important; }
 
 .m-7 {
   margin: 6rem !important; }
 
-.m-8 {
-  margin: 9rem !important; }
-
-.m-9 {
-  margin: 12rem !important; }
-
 .m-auto {
   margin: auto !important; }
 
@@ -4732,29 +4741,21 @@ button.close {
   margin-left: 1rem !important; }
 
 .mx-4 {
-  margin-right: 1.25rem !important;
-  margin-left: 1.25rem !important; }
-
-.mx-5 {
   margin-right: 1.5rem !important;
   margin-left: 1.5rem !important; }
 
+.mx-5 {
+  margin-right: 2.5rem !important;
+  margin-left: 2.5rem !important; }
+
 .mx-6 {
-  margin-right: 3rem !important;
-  margin-left: 3rem !important; }
+  margin-right: 4rem !important;
+  margin-left: 4rem !important; }
 
 .mx-7 {
   margin-right: 6rem !important;
   margin-left: 6rem !important; }
 
-.mx-8 {
-  margin-right: 9rem !important;
-  margin-left: 9rem !important; }
-
-.mx-9 {
-  margin-right: 12rem !important;
-  margin-left: 12rem !important; }
-
 .mx-auto {
   margin-right: auto !important;
   margin-left: auto !important; }
@@ -4776,29 +4777,21 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .my-4 {
-  margin-top: 1.25rem !important;
-  margin-bottom: 1.25rem !important; }
-
-.my-5 {
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important; }
 
+.my-5 {
+  margin-top: 2.5rem !important;
+  margin-bottom: 2.5rem !important; }
+
 .my-6 {
-  margin-top: 3rem !important;
-  margin-bottom: 3rem !important; }
+  margin-top: 4rem !important;
+  margin-bottom: 4rem !important; }
 
 .my-7 {
   margin-top: 6rem !important;
   margin-bottom: 6rem !important; }
 
-.my-8 {
-  margin-top: 9rem !important;
-  margin-bottom: 9rem !important; }
-
-.my-9 {
-  margin-top: 12rem !important;
-  margin-bottom: 12rem !important; }
-
 .my-auto {
   margin-top: auto !important;
   margin-bottom: auto !important; }
@@ -4816,23 +4809,17 @@ button.close {
   margin-top: 1rem !important; }
 
 .mt-4 {
-  margin-top: 1.25rem !important; }
-
-.mt-5 {
   margin-top: 1.5rem !important; }
 
+.mt-5 {
+  margin-top: 2.5rem !important; }
+
 .mt-6 {
-  margin-top: 3rem !important; }
+  margin-top: 4rem !important; }
 
 .mt-7 {
   margin-top: 6rem !important; }
 
-.mt-8 {
-  margin-top: 9rem !important; }
-
-.mt-9 {
-  margin-top: 12rem !important; }
-
 .mt-auto {
   margin-top: auto !important; }
 
@@ -4849,23 +4836,17 @@ button.close {
   margin-right: 1rem !important; }
 
 .mr-4 {
-  margin-right: 1.25rem !important; }
-
-.mr-5 {
   margin-right: 1.5rem !important; }
 
+.mr-5 {
+  margin-right: 2.5rem !important; }
+
 .mr-6 {
-  margin-right: 3rem !important; }
+  margin-right: 4rem !important; }
 
 .mr-7 {
   margin-right: 6rem !important; }
 
-.mr-8 {
-  margin-right: 9rem !important; }
-
-.mr-9 {
-  margin-right: 12rem !important; }
-
 .mr-auto {
   margin-right: auto !important; }
 
@@ -4882,23 +4863,17 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .mb-4 {
-  margin-bottom: 1.25rem !important; }
-
-.mb-5 {
   margin-bottom: 1.5rem !important; }
 
+.mb-5 {
+  margin-bottom: 2.5rem !important; }
+
 .mb-6 {
-  margin-bottom: 3rem !important; }
+  margin-bottom: 4rem !important; }
 
 .mb-7 {
   margin-bottom: 6rem !important; }
 
-.mb-8 {
-  margin-bottom: 9rem !important; }
-
-.mb-9 {
-  margin-bottom: 12rem !important; }
-
 .mb-auto {
   margin-bottom: auto !important; }
 
@@ -4915,23 +4890,17 @@ button.close {
   margin-left: 1rem !important; }
 
 .ml-4 {
-  margin-left: 1.25rem !important; }
-
-.ml-5 {
   margin-left: 1.5rem !important; }
 
+.ml-5 {
+  margin-left: 2.5rem !important; }
+
 .ml-6 {
-  margin-left: 3rem !important; }
+  margin-left: 4rem !important; }
 
 .ml-7 {
   margin-left: 6rem !important; }
 
-.ml-8 {
-  margin-left: 9rem !important; }
-
-.ml-9 {
-  margin-left: 12rem !important; }
-
 .ml-auto {
   margin-left: auto !important; }
 
@@ -4945,23 +4914,17 @@ button.close {
   margin: -1rem !important; }
 
 .m-n4 {
-  margin: -1.25rem !important; }
-
-.m-n5 {
   margin: -1.5rem !important; }
 
+.m-n5 {
+  margin: -2.5rem !important; }
+
 .m-n6 {
-  margin: -3rem !important; }
+  margin: -4rem !important; }
 
 .m-n7 {
   margin: -6rem !important; }
 
-.m-n8 {
-  margin: -9rem !important; }
-
-.m-n9 {
-  margin: -12rem !important; }
-
 .mx-n1 {
   margin-right: -0.25rem !important;
   margin-left: -0.25rem !important; }
@@ -4975,29 +4938,21 @@ button.close {
   margin-left: -1rem !important; }
 
 .mx-n4 {
-  margin-right: -1.25rem !important;
-  margin-left: -1.25rem !important; }
-
-.mx-n5 {
   margin-right: -1.5rem !important;
   margin-left: -1.5rem !important; }
 
+.mx-n5 {
+  margin-right: -2.5rem !important;
+  margin-left: -2.5rem !important; }
+
 .mx-n6 {
-  margin-right: -3rem !important;
-  margin-left: -3rem !important; }
+  margin-right: -4rem !important;
+  margin-left: -4rem !important; }
 
 .mx-n7 {
   margin-right: -6rem !important;
   margin-left: -6rem !important; }
 
-.mx-n8 {
-  margin-right: -9rem !important;
-  margin-left: -9rem !important; }
-
-.mx-n9 {
-  margin-right: -12rem !important;
-  margin-left: -12rem !important; }
-
 .my-n1 {
   margin-top: -0.25rem !important;
   margin-bottom: -0.25rem !important; }
@@ -5011,29 +4966,21 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .my-n4 {
-  margin-top: -1.25rem !important;
-  margin-bottom: -1.25rem !important; }
-
-.my-n5 {
   margin-top: -1.5rem !important;
   margin-bottom: -1.5rem !important; }
 
+.my-n5 {
+  margin-top: -2.5rem !important;
+  margin-bottom: -2.5rem !important; }
+
 .my-n6 {
-  margin-top: -3rem !important;
-  margin-bottom: -3rem !important; }
+  margin-top: -4rem !important;
+  margin-bottom: -4rem !important; }
 
 .my-n7 {
   margin-top: -6rem !important;
   margin-bottom: -6rem !important; }
 
-.my-n8 {
-  margin-top: -9rem !important;
-  margin-bottom: -9rem !important; }
-
-.my-n9 {
-  margin-top: -12rem !important;
-  margin-bottom: -12rem !important; }
-
 .mt-n1 {
   margin-top: -0.25rem !important; }
 
@@ -5044,23 +4991,17 @@ button.close {
   margin-top: -1rem !important; }
 
 .mt-n4 {
-  margin-top: -1.25rem !important; }
-
-.mt-n5 {
   margin-top: -1.5rem !important; }
 
+.mt-n5 {
+  margin-top: -2.5rem !important; }
+
 .mt-n6 {
-  margin-top: -3rem !important; }
+  margin-top: -4rem !important; }
 
 .mt-n7 {
   margin-top: -6rem !important; }
 
-.mt-n8 {
-  margin-top: -9rem !important; }
-
-.mt-n9 {
-  margin-top: -12rem !important; }
-
 .mr-n1 {
   margin-right: -0.25rem !important; }
 
@@ -5071,23 +5012,17 @@ button.close {
   margin-right: -1rem !important; }
 
 .mr-n4 {
-  margin-right: -1.25rem !important; }
-
-.mr-n5 {
   margin-right: -1.5rem !important; }
 
+.mr-n5 {
+  margin-right: -2.5rem !important; }
+
 .mr-n6 {
-  margin-right: -3rem !important; }
+  margin-right: -4rem !important; }
 
 .mr-n7 {
   margin-right: -6rem !important; }
 
-.mr-n8 {
-  margin-right: -9rem !important; }
-
-.mr-n9 {
-  margin-right: -12rem !important; }
-
 .mb-n1 {
   margin-bottom: -0.25rem !important; }
 
@@ -5098,23 +5033,17 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .mb-n4 {
-  margin-bottom: -1.25rem !important; }
-
-.mb-n5 {
   margin-bottom: -1.5rem !important; }
 
+.mb-n5 {
+  margin-bottom: -2.5rem !important; }
+
 .mb-n6 {
-  margin-bottom: -3rem !important; }
+  margin-bottom: -4rem !important; }
 
 .mb-n7 {
   margin-bottom: -6rem !important; }
 
-.mb-n8 {
-  margin-bottom: -9rem !important; }
-
-.mb-n9 {
-  margin-bottom: -12rem !important; }
-
 .ml-n1 {
   margin-left: -0.25rem !important; }
 
@@ -5125,23 +5054,17 @@ button.close {
   margin-left: -1rem !important; }
 
 .ml-n4 {
-  margin-left: -1.25rem !important; }
-
-.ml-n5 {
   margin-left: -1.5rem !important; }
 
+.ml-n5 {
+  margin-left: -2.5rem !important; }
+
 .ml-n6 {
-  margin-left: -3rem !important; }
+  margin-left: -4rem !important; }
 
 .ml-n7 {
   margin-left: -6rem !important; }
 
-.ml-n8 {
-  margin-left: -9rem !important; }
-
-.ml-n9 {
-  margin-left: -12rem !important; }
-
 .p-0 {
   padding: 0 !important; }
 
@@ -5155,23 +5078,17 @@ button.close {
   padding: 1rem !important; }
 
 .p-4 {
-  padding: 1.25rem !important; }
-
-.p-5 {
   padding: 1.5rem !important; }
 
+.p-5 {
+  padding: 2.5rem !important; }
+
 .p-6 {
-  padding: 3rem !important; }
+  padding: 4rem !important; }
 
 .p-7 {
   padding: 6rem !important; }
 
-.p-8 {
-  padding: 9rem !important; }
-
-.p-9 {
-  padding: 12rem !important; }
-
 .px-0 {
   padding-right: 0 !important;
   padding-left: 0 !important; }
@@ -5189,29 +5106,21 @@ button.close {
   padding-left: 1rem !important; }
 
 .px-4 {
-  padding-right: 1.25rem !important;
-  padding-left: 1.25rem !important; }
-
-.px-5 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important; }
 
+.px-5 {
+  padding-right: 2.5rem !important;
+  padding-left: 2.5rem !important; }
+
 .px-6 {
-  padding-right: 3rem !important;
-  padding-left: 3rem !important; }
+  padding-right: 4rem !important;
+  padding-left: 4rem !important; }
 
 .px-7 {
   padding-right: 6rem !important;
   padding-left: 6rem !important; }
 
-.px-8 {
-  padding-right: 9rem !important;
-  padding-left: 9rem !important; }
-
-.px-9 {
-  padding-right: 12rem !important;
-  padding-left: 12rem !important; }
-
 .py-0 {
   padding-top: 0 !important;
   padding-bottom: 0 !important; }
@@ -5229,29 +5138,21 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .py-4 {
-  padding-top: 1.25rem !important;
-  padding-bottom: 1.25rem !important; }
-
-.py-5 {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important; }
 
+.py-5 {
+  padding-top: 2.5rem !important;
+  padding-bottom: 2.5rem !important; }
+
 .py-6 {
-  padding-top: 3rem !important;
-  padding-bottom: 3rem !important; }
+  padding-top: 4rem !important;
+  padding-bottom: 4rem !important; }
 
 .py-7 {
   padding-top: 6rem !important;
   padding-bottom: 6rem !important; }
 
-.py-8 {
-  padding-top: 9rem !important;
-  padding-bottom: 9rem !important; }
-
-.py-9 {
-  padding-top: 12rem !important;
-  padding-bottom: 12rem !important; }
-
 .pt-0 {
   padding-top: 0 !important; }
 
@@ -5265,23 +5166,17 @@ button.close {
   padding-top: 1rem !important; }
 
 .pt-4 {
-  padding-top: 1.25rem !important; }
-
-.pt-5 {
   padding-top: 1.5rem !important; }
 
+.pt-5 {
+  padding-top: 2.5rem !important; }
+
 .pt-6 {
-  padding-top: 3rem !important; }
+  padding-top: 4rem !important; }
 
 .pt-7 {
   padding-top: 6rem !important; }
 
-.pt-8 {
-  padding-top: 9rem !important; }
-
-.pt-9 {
-  padding-top: 12rem !important; }
-
 .pr-0 {
   padding-right: 0 !important; }
 
@@ -5295,23 +5190,17 @@ button.close {
   padding-right: 1rem !important; }
 
 .pr-4 {
-  padding-right: 1.25rem !important; }
-
-.pr-5 {
   padding-right: 1.5rem !important; }
 
+.pr-5 {
+  padding-right: 2.5rem !important; }
+
 .pr-6 {
-  padding-right: 3rem !important; }
+  padding-right: 4rem !important; }
 
 .pr-7 {
   padding-right: 6rem !important; }
 
-.pr-8 {
-  padding-right: 9rem !important; }
-
-.pr-9 {
-  padding-right: 12rem !important; }
-
 .pb-0 {
   padding-bottom: 0 !important; }
 
@@ -5325,23 +5214,17 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .pb-4 {
-  padding-bottom: 1.25rem !important; }
-
-.pb-5 {
   padding-bottom: 1.5rem !important; }
 
+.pb-5 {
+  padding-bottom: 2.5rem !important; }
+
 .pb-6 {
-  padding-bottom: 3rem !important; }
+  padding-bottom: 4rem !important; }
 
 .pb-7 {
   padding-bottom: 6rem !important; }
 
-.pb-8 {
-  padding-bottom: 9rem !important; }
-
-.pb-9 {
-  padding-bottom: 12rem !important; }
-
 .pl-0 {
   padding-left: 0 !important; }
 
@@ -5355,23 +5238,17 @@ button.close {
   padding-left: 1rem !important; }
 
 .pl-4 {
-  padding-left: 1.25rem !important; }
-
-.pl-5 {
   padding-left: 1.5rem !important; }
 
+.pl-5 {
+  padding-left: 2.5rem !important; }
+
 .pl-6 {
-  padding-left: 3rem !important; }
+  padding-left: 4rem !important; }
 
 .pl-7 {
   padding-left: 6rem !important; }
 
-.pl-8 {
-  padding-left: 9rem !important; }
-
-.pl-9 {
-  padding-left: 12rem !important; }
-
 .font-weight-light {
   font-weight: 300 !important; }
 
@@ -5415,7 +5292,7 @@ button.close {
   color: #206bc4 !important; }
 
 .text-secondary {
-  color: #7e8590 !important; }
+  color: #7b7e88 !important; }
 
 .text-success {
   color: #5eba00 !important; }
@@ -5433,16 +5310,16 @@ button.close {
   color: #f5f7fb !important; }
 
 .text-dark {
-  color: #354052 !important; }
+  color: #303645 !important; }
 
 .text-white {
   color: #ffffff !important; }
 
 .text-body {
-  color: #354052 !important; }
+  color: #303645 !important; }
 
 .text-muted {
-  color: #7e8590 !important; }
+  color: #7b7e88 !important; }
 
 .text-black-50 {
   color: rgba(0, 0, 0, 0.5) !important; }
@@ -5469,7 +5346,7 @@ button.close {
   background-color: #206bc4 !important; }
 
 .bg-secondary {
-  background-color: #7e8590 !important; }
+  background-color: #7b7e88 !important; }
 
 .bg-success {
   background-color: #5eba00 !important; }
@@ -5487,7 +5364,7 @@ button.close {
   background-color: #f5f7fb !important; }
 
 .bg-dark {
-  background-color: #354052 !important; }
+  background-color: #303645 !important; }
 
 .bg-body {
   background-color: #f5f7fb !important; }
@@ -5630,7 +5507,7 @@ button.close {
 .text-h6 {
   font-size: 0.7333333em !important; }
 
-@media (min-width: 576px) {
+@media (min-width: 33rem) {
   .float-sm-left {
     float: left !important; }
   .float-sm-right {
@@ -5751,17 +5628,13 @@ button.close {
   .m-sm-3 {
     margin: 1rem !important; }
   .m-sm-4 {
-    margin: 1.25rem !important; }
-  .m-sm-5 {
     margin: 1.5rem !important; }
+  .m-sm-5 {
+    margin: 2.5rem !important; }
   .m-sm-6 {
-    margin: 3rem !important; }
+    margin: 4rem !important; }
   .m-sm-7 {
     margin: 6rem !important; }
-  .m-sm-8 {
-    margin: 9rem !important; }
-  .m-sm-9 {
-    margin: 12rem !important; }
   .m-sm-auto {
     margin: auto !important; }
   .mx-sm-0 {
@@ -5777,23 +5650,17 @@ button.close {
     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: 1.5rem !important;
     margin-left: 1.5rem !important; }
+  .mx-sm-5 {
+    margin-right: 2.5rem !important;
+    margin-left: 2.5rem !important; }
   .mx-sm-6 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4rem !important;
+    margin-left: 4rem !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-9 {
-    margin-right: 12rem !important;
-    margin-left: 12rem !important; }
   .mx-sm-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -5810,23 +5677,17 @@ button.close {
     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: 1.5rem !important;
     margin-bottom: 1.5rem !important; }
+  .my-sm-5 {
+    margin-top: 2.5rem !important;
+    margin-bottom: 2.5rem !important; }
   .my-sm-6 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4rem !important;
+    margin-bottom: 4rem !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-9 {
-    margin-top: 12rem !important;
-    margin-bottom: 12rem !important; }
   .my-sm-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -5839,17 +5700,13 @@ button.close {
   .mt-sm-3 {
     margin-top: 1rem !important; }
   .mt-sm-4 {
-    margin-top: 1.25rem !important; }
-  .mt-sm-5 {
     margin-top: 1.5rem !important; }
+  .mt-sm-5 {
+    margin-top: 2.5rem !important; }
   .mt-sm-6 {
-    margin-top: 3rem !important; }
+    margin-top: 4rem !important; }
   .mt-sm-7 {
     margin-top: 6rem !important; }
-  .mt-sm-8 {
-    margin-top: 9rem !important; }
-  .mt-sm-9 {
-    margin-top: 12rem !important; }
   .mt-sm-auto {
     margin-top: auto !important; }
   .mr-sm-0 {
@@ -5861,17 +5718,13 @@ button.close {
   .mr-sm-3 {
     margin-right: 1rem !important; }
   .mr-sm-4 {
-    margin-right: 1.25rem !important; }
-  .mr-sm-5 {
     margin-right: 1.5rem !important; }
+  .mr-sm-5 {
+    margin-right: 2.5rem !important; }
   .mr-sm-6 {
-    margin-right: 3rem !important; }
+    margin-right: 4rem !important; }
   .mr-sm-7 {
     margin-right: 6rem !important; }
-  .mr-sm-8 {
-    margin-right: 9rem !important; }
-  .mr-sm-9 {
-    margin-right: 12rem !important; }
   .mr-sm-auto {
     margin-right: auto !important; }
   .mb-sm-0 {
@@ -5883,17 +5736,13 @@ button.close {
   .mb-sm-3 {
     margin-bottom: 1rem !important; }
   .mb-sm-4 {
-    margin-bottom: 1.25rem !important; }
-  .mb-sm-5 {
     margin-bottom: 1.5rem !important; }
+  .mb-sm-5 {
+    margin-bottom: 2.5rem !important; }
   .mb-sm-6 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4rem !important; }
   .mb-sm-7 {
     margin-bottom: 6rem !important; }
-  .mb-sm-8 {
-    margin-bottom: 9rem !important; }
-  .mb-sm-9 {
-    margin-bottom: 12rem !important; }
   .mb-sm-auto {
     margin-bottom: auto !important; }
   .ml-sm-0 {
@@ -5905,17 +5754,13 @@ button.close {
   .ml-sm-3 {
     margin-left: 1rem !important; }
   .ml-sm-4 {
-    margin-left: 1.25rem !important; }
-  .ml-sm-5 {
     margin-left: 1.5rem !important; }
+  .ml-sm-5 {
+    margin-left: 2.5rem !important; }
   .ml-sm-6 {
-    margin-left: 3rem !important; }
+    margin-left: 4rem !important; }
   .ml-sm-7 {
     margin-left: 6rem !important; }
-  .ml-sm-8 {
-    margin-left: 9rem !important; }
-  .ml-sm-9 {
-    margin-left: 12rem !important; }
   .ml-sm-auto {
     margin-left: auto !important; }
   .m-sm-n1 {
@@ -5925,17 +5770,13 @@ button.close {
   .m-sm-n3 {
     margin: -1rem !important; }
   .m-sm-n4 {
-    margin: -1.25rem !important; }
-  .m-sm-n5 {
     margin: -1.5rem !important; }
+  .m-sm-n5 {
+    margin: -2.5rem !important; }
   .m-sm-n6 {
-    margin: -3rem !important; }
+    margin: -4rem !important; }
   .m-sm-n7 {
     margin: -6rem !important; }
-  .m-sm-n8 {
-    margin: -9rem !important; }
-  .m-sm-n9 {
-    margin: -12rem !important; }
   .mx-sm-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -5946,23 +5787,17 @@ button.close {
     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: -1.5rem !important;
     margin-left: -1.5rem !important; }
+  .mx-sm-n5 {
+    margin-right: -2.5rem !important;
+    margin-left: -2.5rem !important; }
   .mx-sm-n6 {
-    margin-right: -3rem !important;
-    margin-left: -3rem !important; }
+    margin-right: -4rem !important;
+    margin-left: -4rem !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-n9 {
-    margin-right: -12rem !important;
-    margin-left: -12rem !important; }
   .my-sm-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -5973,23 +5808,17 @@ button.close {
     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: -1.5rem !important;
     margin-bottom: -1.5rem !important; }
+  .my-sm-n5 {
+    margin-top: -2.5rem !important;
+    margin-bottom: -2.5rem !important; }
   .my-sm-n6 {
-    margin-top: -3rem !important;
-    margin-bottom: -3rem !important; }
+    margin-top: -4rem !important;
+    margin-bottom: -4rem !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-n9 {
-    margin-top: -12rem !important;
-    margin-bottom: -12rem !important; }
   .mt-sm-n1 {
     margin-top: -0.25rem !important; }
   .mt-sm-n2 {
@@ -5997,17 +5826,13 @@ button.close {
   .mt-sm-n3 {
     margin-top: -1rem !important; }
   .mt-sm-n4 {
-    margin-top: -1.25rem !important; }
-  .mt-sm-n5 {
     margin-top: -1.5rem !important; }
+  .mt-sm-n5 {
+    margin-top: -2.5rem !important; }
   .mt-sm-n6 {
-    margin-top: -3rem !important; }
+    margin-top: -4rem !important; }
   .mt-sm-n7 {
     margin-top: -6rem !important; }
-  .mt-sm-n8 {
-    margin-top: -9rem !important; }
-  .mt-sm-n9 {
-    margin-top: -12rem !important; }
   .mr-sm-n1 {
     margin-right: -0.25rem !important; }
   .mr-sm-n2 {
@@ -6015,17 +5840,13 @@ button.close {
   .mr-sm-n3 {
     margin-right: -1rem !important; }
   .mr-sm-n4 {
-    margin-right: -1.25rem !important; }
-  .mr-sm-n5 {
     margin-right: -1.5rem !important; }
+  .mr-sm-n5 {
+    margin-right: -2.5rem !important; }
   .mr-sm-n6 {
-    margin-right: -3rem !important; }
+    margin-right: -4rem !important; }
   .mr-sm-n7 {
     margin-right: -6rem !important; }
-  .mr-sm-n8 {
-    margin-right: -9rem !important; }
-  .mr-sm-n9 {
-    margin-right: -12rem !important; }
   .mb-sm-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-sm-n2 {
@@ -6033,17 +5854,13 @@ button.close {
   .mb-sm-n3 {
     margin-bottom: -1rem !important; }
   .mb-sm-n4 {
-    margin-bottom: -1.25rem !important; }
-  .mb-sm-n5 {
     margin-bottom: -1.5rem !important; }
+  .mb-sm-n5 {
+    margin-bottom: -2.5rem !important; }
   .mb-sm-n6 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -4rem !important; }
   .mb-sm-n7 {
     margin-bottom: -6rem !important; }
-  .mb-sm-n8 {
-    margin-bottom: -9rem !important; }
-  .mb-sm-n9 {
-    margin-bottom: -12rem !important; }
   .ml-sm-n1 {
     margin-left: -0.25rem !important; }
   .ml-sm-n2 {
@@ -6051,17 +5868,13 @@ button.close {
   .ml-sm-n3 {
     margin-left: -1rem !important; }
   .ml-sm-n4 {
-    margin-left: -1.25rem !important; }
-  .ml-sm-n5 {
     margin-left: -1.5rem !important; }
+  .ml-sm-n5 {
+    margin-left: -2.5rem !important; }
   .ml-sm-n6 {
-    margin-left: -3rem !important; }
+    margin-left: -4rem !important; }
   .ml-sm-n7 {
     margin-left: -6rem !important; }
-  .ml-sm-n8 {
-    margin-left: -9rem !important; }
-  .ml-sm-n9 {
-    margin-left: -12rem !important; }
   .p-sm-0 {
     padding: 0 !important; }
   .p-sm-1 {
@@ -6071,17 +5884,13 @@ button.close {
   .p-sm-3 {
     padding: 1rem !important; }
   .p-sm-4 {
-    padding: 1.25rem !important; }
-  .p-sm-5 {
     padding: 1.5rem !important; }
+  .p-sm-5 {
+    padding: 2.5rem !important; }
   .p-sm-6 {
-    padding: 3rem !important; }
+    padding: 4rem !important; }
   .p-sm-7 {
     padding: 6rem !important; }
-  .p-sm-8 {
-    padding: 9rem !important; }
-  .p-sm-9 {
-    padding: 12rem !important; }
   .px-sm-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -6095,23 +5904,17 @@ button.close {
     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: 1.5rem !important;
     padding-left: 1.5rem !important; }
+  .px-sm-5 {
+    padding-right: 2.5rem !important;
+    padding-left: 2.5rem !important; }
   .px-sm-6 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4rem !important;
+    padding-left: 4rem !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-9 {
-    padding-right: 12rem !important;
-    padding-left: 12rem !important; }
   .py-sm-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -6125,23 +5928,17 @@ button.close {
     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: 1.5rem !important;
     padding-bottom: 1.5rem !important; }
+  .py-sm-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important; }
   .py-sm-6 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4rem !important;
+    padding-bottom: 4rem !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-9 {
-    padding-top: 12rem !important;
-    padding-bottom: 12rem !important; }
   .pt-sm-0 {
     padding-top: 0 !important; }
   .pt-sm-1 {
@@ -6151,17 +5948,13 @@ button.close {
   .pt-sm-3 {
     padding-top: 1rem !important; }
   .pt-sm-4 {
-    padding-top: 1.25rem !important; }
-  .pt-sm-5 {
     padding-top: 1.5rem !important; }
+  .pt-sm-5 {
+    padding-top: 2.5rem !important; }
   .pt-sm-6 {
-    padding-top: 3rem !important; }
+    padding-top: 4rem !important; }
   .pt-sm-7 {
     padding-top: 6rem !important; }
-  .pt-sm-8 {
-    padding-top: 9rem !important; }
-  .pt-sm-9 {
-    padding-top: 12rem !important; }
   .pr-sm-0 {
     padding-right: 0 !important; }
   .pr-sm-1 {
@@ -6171,17 +5964,13 @@ button.close {
   .pr-sm-3 {
     padding-right: 1rem !important; }
   .pr-sm-4 {
-    padding-right: 1.25rem !important; }
-  .pr-sm-5 {
     padding-right: 1.5rem !important; }
+  .pr-sm-5 {
+    padding-right: 2.5rem !important; }
   .pr-sm-6 {
-    padding-right: 3rem !important; }
+    padding-right: 4rem !important; }
   .pr-sm-7 {
     padding-right: 6rem !important; }
-  .pr-sm-8 {
-    padding-right: 9rem !important; }
-  .pr-sm-9 {
-    padding-right: 12rem !important; }
   .pb-sm-0 {
     padding-bottom: 0 !important; }
   .pb-sm-1 {
@@ -6191,17 +5980,13 @@ button.close {
   .pb-sm-3 {
     padding-bottom: 1rem !important; }
   .pb-sm-4 {
-    padding-bottom: 1.25rem !important; }
-  .pb-sm-5 {
     padding-bottom: 1.5rem !important; }
+  .pb-sm-5 {
+    padding-bottom: 2.5rem !important; }
   .pb-sm-6 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4rem !important; }
   .pb-sm-7 {
     padding-bottom: 6rem !important; }
-  .pb-sm-8 {
-    padding-bottom: 9rem !important; }
-  .pb-sm-9 {
-    padding-bottom: 12rem !important; }
   .pl-sm-0 {
     padding-left: 0 !important; }
   .pl-sm-1 {
@@ -6211,17 +5996,13 @@ button.close {
   .pl-sm-3 {
     padding-left: 1rem !important; }
   .pl-sm-4 {
-    padding-left: 1.25rem !important; }
-  .pl-sm-5 {
     padding-left: 1.5rem !important; }
+  .pl-sm-5 {
+    padding-left: 2.5rem !important; }
   .pl-sm-6 {
-    padding-left: 3rem !important; }
+    padding-left: 4rem !important; }
   .pl-sm-7 {
     padding-left: 6rem !important; }
-  .pl-sm-8 {
-    padding-left: 9rem !important; }
-  .pl-sm-9 {
-    padding-left: 12rem !important; }
   .text-sm-left {
     text-align: left !important; }
   .text-sm-right {
@@ -6229,7 +6010,7 @@ button.close {
   .text-sm-center {
     text-align: center !important; } }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .float-md-left {
     float: left !important; }
   .float-md-right {
@@ -6350,17 +6131,13 @@ button.close {
   .m-md-3 {
     margin: 1rem !important; }
   .m-md-4 {
-    margin: 1.25rem !important; }
-  .m-md-5 {
     margin: 1.5rem !important; }
+  .m-md-5 {
+    margin: 2.5rem !important; }
   .m-md-6 {
-    margin: 3rem !important; }
+    margin: 4rem !important; }
   .m-md-7 {
     margin: 6rem !important; }
-  .m-md-8 {
-    margin: 9rem !important; }
-  .m-md-9 {
-    margin: 12rem !important; }
   .m-md-auto {
     margin: auto !important; }
   .mx-md-0 {
@@ -6376,23 +6153,17 @@ button.close {
     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: 1.5rem !important;
     margin-left: 1.5rem !important; }
+  .mx-md-5 {
+    margin-right: 2.5rem !important;
+    margin-left: 2.5rem !important; }
   .mx-md-6 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4rem !important;
+    margin-left: 4rem !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-9 {
-    margin-right: 12rem !important;
-    margin-left: 12rem !important; }
   .mx-md-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -6409,23 +6180,17 @@ button.close {
     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: 1.5rem !important;
     margin-bottom: 1.5rem !important; }
+  .my-md-5 {
+    margin-top: 2.5rem !important;
+    margin-bottom: 2.5rem !important; }
   .my-md-6 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4rem !important;
+    margin-bottom: 4rem !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-9 {
-    margin-top: 12rem !important;
-    margin-bottom: 12rem !important; }
   .my-md-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -6438,17 +6203,13 @@ button.close {
   .mt-md-3 {
     margin-top: 1rem !important; }
   .mt-md-4 {
-    margin-top: 1.25rem !important; }
-  .mt-md-5 {
     margin-top: 1.5rem !important; }
+  .mt-md-5 {
+    margin-top: 2.5rem !important; }
   .mt-md-6 {
-    margin-top: 3rem !important; }
+    margin-top: 4rem !important; }
   .mt-md-7 {
     margin-top: 6rem !important; }
-  .mt-md-8 {
-    margin-top: 9rem !important; }
-  .mt-md-9 {
-    margin-top: 12rem !important; }
   .mt-md-auto {
     margin-top: auto !important; }
   .mr-md-0 {
@@ -6460,17 +6221,13 @@ button.close {
   .mr-md-3 {
     margin-right: 1rem !important; }
   .mr-md-4 {
-    margin-right: 1.25rem !important; }
-  .mr-md-5 {
     margin-right: 1.5rem !important; }
+  .mr-md-5 {
+    margin-right: 2.5rem !important; }
   .mr-md-6 {
-    margin-right: 3rem !important; }
+    margin-right: 4rem !important; }
   .mr-md-7 {
     margin-right: 6rem !important; }
-  .mr-md-8 {
-    margin-right: 9rem !important; }
-  .mr-md-9 {
-    margin-right: 12rem !important; }
   .mr-md-auto {
     margin-right: auto !important; }
   .mb-md-0 {
@@ -6482,17 +6239,13 @@ button.close {
   .mb-md-3 {
     margin-bottom: 1rem !important; }
   .mb-md-4 {
-    margin-bottom: 1.25rem !important; }
-  .mb-md-5 {
     margin-bottom: 1.5rem !important; }
+  .mb-md-5 {
+    margin-bottom: 2.5rem !important; }
   .mb-md-6 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4rem !important; }
   .mb-md-7 {
     margin-bottom: 6rem !important; }
-  .mb-md-8 {
-    margin-bottom: 9rem !important; }
-  .mb-md-9 {
-    margin-bottom: 12rem !important; }
   .mb-md-auto {
     margin-bottom: auto !important; }
   .ml-md-0 {
@@ -6504,17 +6257,13 @@ button.close {
   .ml-md-3 {
     margin-left: 1rem !important; }
   .ml-md-4 {
-    margin-left: 1.25rem !important; }
-  .ml-md-5 {
     margin-left: 1.5rem !important; }
+  .ml-md-5 {
+    margin-left: 2.5rem !important; }
   .ml-md-6 {
-    margin-left: 3rem !important; }
+    margin-left: 4rem !important; }
   .ml-md-7 {
     margin-left: 6rem !important; }
-  .ml-md-8 {
-    margin-left: 9rem !important; }
-  .ml-md-9 {
-    margin-left: 12rem !important; }
   .ml-md-auto {
     margin-left: auto !important; }
   .m-md-n1 {
@@ -6524,17 +6273,13 @@ button.close {
   .m-md-n3 {
     margin: -1rem !important; }
   .m-md-n4 {
-    margin: -1.25rem !important; }
-  .m-md-n5 {
     margin: -1.5rem !important; }
+  .m-md-n5 {
+    margin: -2.5rem !important; }
   .m-md-n6 {
-    margin: -3rem !important; }
+    margin: -4rem !important; }
   .m-md-n7 {
     margin: -6rem !important; }
-  .m-md-n8 {
-    margin: -9rem !important; }
-  .m-md-n9 {
-    margin: -12rem !important; }
   .mx-md-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -6545,23 +6290,17 @@ button.close {
     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: -1.5rem !important;
     margin-left: -1.5rem !important; }
+  .mx-md-n5 {
+    margin-right: -2.5rem !important;
+    margin-left: -2.5rem !important; }
   .mx-md-n6 {
-    margin-right: -3rem !important;
-    margin-left: -3rem !important; }
+    margin-right: -4rem !important;
+    margin-left: -4rem !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-n9 {
-    margin-right: -12rem !important;
-    margin-left: -12rem !important; }
   .my-md-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -6572,23 +6311,17 @@ button.close {
     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: -1.5rem !important;
     margin-bottom: -1.5rem !important; }
+  .my-md-n5 {
+    margin-top: -2.5rem !important;
+    margin-bottom: -2.5rem !important; }
   .my-md-n6 {
-    margin-top: -3rem !important;
-    margin-bottom: -3rem !important; }
+    margin-top: -4rem !important;
+    margin-bottom: -4rem !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-n9 {
-    margin-top: -12rem !important;
-    margin-bottom: -12rem !important; }
   .mt-md-n1 {
     margin-top: -0.25rem !important; }
   .mt-md-n2 {
@@ -6596,17 +6329,13 @@ button.close {
   .mt-md-n3 {
     margin-top: -1rem !important; }
   .mt-md-n4 {
-    margin-top: -1.25rem !important; }
-  .mt-md-n5 {
     margin-top: -1.5rem !important; }
+  .mt-md-n5 {
+    margin-top: -2.5rem !important; }
   .mt-md-n6 {
-    margin-top: -3rem !important; }
+    margin-top: -4rem !important; }
   .mt-md-n7 {
     margin-top: -6rem !important; }
-  .mt-md-n8 {
-    margin-top: -9rem !important; }
-  .mt-md-n9 {
-    margin-top: -12rem !important; }
   .mr-md-n1 {
     margin-right: -0.25rem !important; }
   .mr-md-n2 {
@@ -6614,17 +6343,13 @@ button.close {
   .mr-md-n3 {
     margin-right: -1rem !important; }
   .mr-md-n4 {
-    margin-right: -1.25rem !important; }
-  .mr-md-n5 {
     margin-right: -1.5rem !important; }
+  .mr-md-n5 {
+    margin-right: -2.5rem !important; }
   .mr-md-n6 {
-    margin-right: -3rem !important; }
+    margin-right: -4rem !important; }
   .mr-md-n7 {
     margin-right: -6rem !important; }
-  .mr-md-n8 {
-    margin-right: -9rem !important; }
-  .mr-md-n9 {
-    margin-right: -12rem !important; }
   .mb-md-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-md-n2 {
@@ -6632,17 +6357,13 @@ button.close {
   .mb-md-n3 {
     margin-bottom: -1rem !important; }
   .mb-md-n4 {
-    margin-bottom: -1.25rem !important; }
-  .mb-md-n5 {
     margin-bottom: -1.5rem !important; }
+  .mb-md-n5 {
+    margin-bottom: -2.5rem !important; }
   .mb-md-n6 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -4rem !important; }
   .mb-md-n7 {
     margin-bottom: -6rem !important; }
-  .mb-md-n8 {
-    margin-bottom: -9rem !important; }
-  .mb-md-n9 {
-    margin-bottom: -12rem !important; }
   .ml-md-n1 {
     margin-left: -0.25rem !important; }
   .ml-md-n2 {
@@ -6650,17 +6371,13 @@ button.close {
   .ml-md-n3 {
     margin-left: -1rem !important; }
   .ml-md-n4 {
-    margin-left: -1.25rem !important; }
-  .ml-md-n5 {
     margin-left: -1.5rem !important; }
+  .ml-md-n5 {
+    margin-left: -2.5rem !important; }
   .ml-md-n6 {
-    margin-left: -3rem !important; }
+    margin-left: -4rem !important; }
   .ml-md-n7 {
     margin-left: -6rem !important; }
-  .ml-md-n8 {
-    margin-left: -9rem !important; }
-  .ml-md-n9 {
-    margin-left: -12rem !important; }
   .p-md-0 {
     padding: 0 !important; }
   .p-md-1 {
@@ -6670,17 +6387,13 @@ button.close {
   .p-md-3 {
     padding: 1rem !important; }
   .p-md-4 {
-    padding: 1.25rem !important; }
-  .p-md-5 {
     padding: 1.5rem !important; }
+  .p-md-5 {
+    padding: 2.5rem !important; }
   .p-md-6 {
-    padding: 3rem !important; }
+    padding: 4rem !important; }
   .p-md-7 {
     padding: 6rem !important; }
-  .p-md-8 {
-    padding: 9rem !important; }
-  .p-md-9 {
-    padding: 12rem !important; }
   .px-md-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -6694,23 +6407,17 @@ button.close {
     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: 1.5rem !important;
     padding-left: 1.5rem !important; }
+  .px-md-5 {
+    padding-right: 2.5rem !important;
+    padding-left: 2.5rem !important; }
   .px-md-6 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4rem !important;
+    padding-left: 4rem !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-9 {
-    padding-right: 12rem !important;
-    padding-left: 12rem !important; }
   .py-md-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -6724,23 +6431,17 @@ button.close {
     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: 1.5rem !important;
     padding-bottom: 1.5rem !important; }
+  .py-md-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important; }
   .py-md-6 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4rem !important;
+    padding-bottom: 4rem !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-9 {
-    padding-top: 12rem !important;
-    padding-bottom: 12rem !important; }
   .pt-md-0 {
     padding-top: 0 !important; }
   .pt-md-1 {
@@ -6750,17 +6451,13 @@ button.close {
   .pt-md-3 {
     padding-top: 1rem !important; }
   .pt-md-4 {
-    padding-top: 1.25rem !important; }
-  .pt-md-5 {
     padding-top: 1.5rem !important; }
+  .pt-md-5 {
+    padding-top: 2.5rem !important; }
   .pt-md-6 {
-    padding-top: 3rem !important; }
+    padding-top: 4rem !important; }
   .pt-md-7 {
     padding-top: 6rem !important; }
-  .pt-md-8 {
-    padding-top: 9rem !important; }
-  .pt-md-9 {
-    padding-top: 12rem !important; }
   .pr-md-0 {
     padding-right: 0 !important; }
   .pr-md-1 {
@@ -6770,17 +6467,13 @@ button.close {
   .pr-md-3 {
     padding-right: 1rem !important; }
   .pr-md-4 {
-    padding-right: 1.25rem !important; }
-  .pr-md-5 {
     padding-right: 1.5rem !important; }
+  .pr-md-5 {
+    padding-right: 2.5rem !important; }
   .pr-md-6 {
-    padding-right: 3rem !important; }
+    padding-right: 4rem !important; }
   .pr-md-7 {
     padding-right: 6rem !important; }
-  .pr-md-8 {
-    padding-right: 9rem !important; }
-  .pr-md-9 {
-    padding-right: 12rem !important; }
   .pb-md-0 {
     padding-bottom: 0 !important; }
   .pb-md-1 {
@@ -6790,17 +6483,13 @@ button.close {
   .pb-md-3 {
     padding-bottom: 1rem !important; }
   .pb-md-4 {
-    padding-bottom: 1.25rem !important; }
-  .pb-md-5 {
     padding-bottom: 1.5rem !important; }
+  .pb-md-5 {
+    padding-bottom: 2.5rem !important; }
   .pb-md-6 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4rem !important; }
   .pb-md-7 {
     padding-bottom: 6rem !important; }
-  .pb-md-8 {
-    padding-bottom: 9rem !important; }
-  .pb-md-9 {
-    padding-bottom: 12rem !important; }
   .pl-md-0 {
     padding-left: 0 !important; }
   .pl-md-1 {
@@ -6810,17 +6499,13 @@ button.close {
   .pl-md-3 {
     padding-left: 1rem !important; }
   .pl-md-4 {
-    padding-left: 1.25rem !important; }
-  .pl-md-5 {
     padding-left: 1.5rem !important; }
+  .pl-md-5 {
+    padding-left: 2.5rem !important; }
   .pl-md-6 {
-    padding-left: 3rem !important; }
+    padding-left: 4rem !important; }
   .pl-md-7 {
     padding-left: 6rem !important; }
-  .pl-md-8 {
-    padding-left: 9rem !important; }
-  .pl-md-9 {
-    padding-left: 12rem !important; }
   .text-md-left {
     text-align: left !important; }
   .text-md-right {
@@ -6828,7 +6513,7 @@ button.close {
   .text-md-center {
     text-align: center !important; } }
 
-@media (min-width: 992px) {
+@media (min-width: 64rem) {
   .float-lg-left {
     float: left !important; }
   .float-lg-right {
@@ -6949,17 +6634,13 @@ button.close {
   .m-lg-3 {
     margin: 1rem !important; }
   .m-lg-4 {
-    margin: 1.25rem !important; }
-  .m-lg-5 {
     margin: 1.5rem !important; }
+  .m-lg-5 {
+    margin: 2.5rem !important; }
   .m-lg-6 {
-    margin: 3rem !important; }
+    margin: 4rem !important; }
   .m-lg-7 {
     margin: 6rem !important; }
-  .m-lg-8 {
-    margin: 9rem !important; }
-  .m-lg-9 {
-    margin: 12rem !important; }
   .m-lg-auto {
     margin: auto !important; }
   .mx-lg-0 {
@@ -6975,23 +6656,17 @@ button.close {
     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: 1.5rem !important;
     margin-left: 1.5rem !important; }
+  .mx-lg-5 {
+    margin-right: 2.5rem !important;
+    margin-left: 2.5rem !important; }
   .mx-lg-6 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4rem !important;
+    margin-left: 4rem !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-9 {
-    margin-right: 12rem !important;
-    margin-left: 12rem !important; }
   .mx-lg-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7008,23 +6683,17 @@ button.close {
     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: 1.5rem !important;
     margin-bottom: 1.5rem !important; }
+  .my-lg-5 {
+    margin-top: 2.5rem !important;
+    margin-bottom: 2.5rem !important; }
   .my-lg-6 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4rem !important;
+    margin-bottom: 4rem !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-9 {
-    margin-top: 12rem !important;
-    margin-bottom: 12rem !important; }
   .my-lg-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -7037,17 +6706,13 @@ button.close {
   .mt-lg-3 {
     margin-top: 1rem !important; }
   .mt-lg-4 {
-    margin-top: 1.25rem !important; }
-  .mt-lg-5 {
     margin-top: 1.5rem !important; }
+  .mt-lg-5 {
+    margin-top: 2.5rem !important; }
   .mt-lg-6 {
-    margin-top: 3rem !important; }
+    margin-top: 4rem !important; }
   .mt-lg-7 {
     margin-top: 6rem !important; }
-  .mt-lg-8 {
-    margin-top: 9rem !important; }
-  .mt-lg-9 {
-    margin-top: 12rem !important; }
   .mt-lg-auto {
     margin-top: auto !important; }
   .mr-lg-0 {
@@ -7059,17 +6724,13 @@ button.close {
   .mr-lg-3 {
     margin-right: 1rem !important; }
   .mr-lg-4 {
-    margin-right: 1.25rem !important; }
-  .mr-lg-5 {
     margin-right: 1.5rem !important; }
+  .mr-lg-5 {
+    margin-right: 2.5rem !important; }
   .mr-lg-6 {
-    margin-right: 3rem !important; }
+    margin-right: 4rem !important; }
   .mr-lg-7 {
     margin-right: 6rem !important; }
-  .mr-lg-8 {
-    margin-right: 9rem !important; }
-  .mr-lg-9 {
-    margin-right: 12rem !important; }
   .mr-lg-auto {
     margin-right: auto !important; }
   .mb-lg-0 {
@@ -7081,17 +6742,13 @@ button.close {
   .mb-lg-3 {
     margin-bottom: 1rem !important; }
   .mb-lg-4 {
-    margin-bottom: 1.25rem !important; }
-  .mb-lg-5 {
     margin-bottom: 1.5rem !important; }
+  .mb-lg-5 {
+    margin-bottom: 2.5rem !important; }
   .mb-lg-6 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4rem !important; }
   .mb-lg-7 {
     margin-bottom: 6rem !important; }
-  .mb-lg-8 {
-    margin-bottom: 9rem !important; }
-  .mb-lg-9 {
-    margin-bottom: 12rem !important; }
   .mb-lg-auto {
     margin-bottom: auto !important; }
   .ml-lg-0 {
@@ -7103,17 +6760,13 @@ button.close {
   .ml-lg-3 {
     margin-left: 1rem !important; }
   .ml-lg-4 {
-    margin-left: 1.25rem !important; }
-  .ml-lg-5 {
     margin-left: 1.5rem !important; }
+  .ml-lg-5 {
+    margin-left: 2.5rem !important; }
   .ml-lg-6 {
-    margin-left: 3rem !important; }
+    margin-left: 4rem !important; }
   .ml-lg-7 {
     margin-left: 6rem !important; }
-  .ml-lg-8 {
-    margin-left: 9rem !important; }
-  .ml-lg-9 {
-    margin-left: 12rem !important; }
   .ml-lg-auto {
     margin-left: auto !important; }
   .m-lg-n1 {
@@ -7123,17 +6776,13 @@ button.close {
   .m-lg-n3 {
     margin: -1rem !important; }
   .m-lg-n4 {
-    margin: -1.25rem !important; }
-  .m-lg-n5 {
     margin: -1.5rem !important; }
+  .m-lg-n5 {
+    margin: -2.5rem !important; }
   .m-lg-n6 {
-    margin: -3rem !important; }
+    margin: -4rem !important; }
   .m-lg-n7 {
     margin: -6rem !important; }
-  .m-lg-n8 {
-    margin: -9rem !important; }
-  .m-lg-n9 {
-    margin: -12rem !important; }
   .mx-lg-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7144,23 +6793,17 @@ button.close {
     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: -1.5rem !important;
     margin-left: -1.5rem !important; }
+  .mx-lg-n5 {
+    margin-right: -2.5rem !important;
+    margin-left: -2.5rem !important; }
   .mx-lg-n6 {
-    margin-right: -3rem !important;
-    margin-left: -3rem !important; }
+    margin-right: -4rem !important;
+    margin-left: -4rem !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-n9 {
-    margin-right: -12rem !important;
-    margin-left: -12rem !important; }
   .my-lg-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7171,23 +6814,17 @@ button.close {
     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: -1.5rem !important;
     margin-bottom: -1.5rem !important; }
+  .my-lg-n5 {
+    margin-top: -2.5rem !important;
+    margin-bottom: -2.5rem !important; }
   .my-lg-n6 {
-    margin-top: -3rem !important;
-    margin-bottom: -3rem !important; }
+    margin-top: -4rem !important;
+    margin-bottom: -4rem !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-n9 {
-    margin-top: -12rem !important;
-    margin-bottom: -12rem !important; }
   .mt-lg-n1 {
     margin-top: -0.25rem !important; }
   .mt-lg-n2 {
@@ -7195,17 +6832,13 @@ button.close {
   .mt-lg-n3 {
     margin-top: -1rem !important; }
   .mt-lg-n4 {
-    margin-top: -1.25rem !important; }
-  .mt-lg-n5 {
     margin-top: -1.5rem !important; }
+  .mt-lg-n5 {
+    margin-top: -2.5rem !important; }
   .mt-lg-n6 {
-    margin-top: -3rem !important; }
+    margin-top: -4rem !important; }
   .mt-lg-n7 {
     margin-top: -6rem !important; }
-  .mt-lg-n8 {
-    margin-top: -9rem !important; }
-  .mt-lg-n9 {
-    margin-top: -12rem !important; }
   .mr-lg-n1 {
     margin-right: -0.25rem !important; }
   .mr-lg-n2 {
@@ -7213,17 +6846,13 @@ button.close {
   .mr-lg-n3 {
     margin-right: -1rem !important; }
   .mr-lg-n4 {
-    margin-right: -1.25rem !important; }
-  .mr-lg-n5 {
     margin-right: -1.5rem !important; }
+  .mr-lg-n5 {
+    margin-right: -2.5rem !important; }
   .mr-lg-n6 {
-    margin-right: -3rem !important; }
+    margin-right: -4rem !important; }
   .mr-lg-n7 {
     margin-right: -6rem !important; }
-  .mr-lg-n8 {
-    margin-right: -9rem !important; }
-  .mr-lg-n9 {
-    margin-right: -12rem !important; }
   .mb-lg-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-lg-n2 {
@@ -7231,17 +6860,13 @@ button.close {
   .mb-lg-n3 {
     margin-bottom: -1rem !important; }
   .mb-lg-n4 {
-    margin-bottom: -1.25rem !important; }
-  .mb-lg-n5 {
     margin-bottom: -1.5rem !important; }
+  .mb-lg-n5 {
+    margin-bottom: -2.5rem !important; }
   .mb-lg-n6 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -4rem !important; }
   .mb-lg-n7 {
     margin-bottom: -6rem !important; }
-  .mb-lg-n8 {
-    margin-bottom: -9rem !important; }
-  .mb-lg-n9 {
-    margin-bottom: -12rem !important; }
   .ml-lg-n1 {
     margin-left: -0.25rem !important; }
   .ml-lg-n2 {
@@ -7249,17 +6874,13 @@ button.close {
   .ml-lg-n3 {
     margin-left: -1rem !important; }
   .ml-lg-n4 {
-    margin-left: -1.25rem !important; }
-  .ml-lg-n5 {
     margin-left: -1.5rem !important; }
+  .ml-lg-n5 {
+    margin-left: -2.5rem !important; }
   .ml-lg-n6 {
-    margin-left: -3rem !important; }
+    margin-left: -4rem !important; }
   .ml-lg-n7 {
     margin-left: -6rem !important; }
-  .ml-lg-n8 {
-    margin-left: -9rem !important; }
-  .ml-lg-n9 {
-    margin-left: -12rem !important; }
   .p-lg-0 {
     padding: 0 !important; }
   .p-lg-1 {
@@ -7269,17 +6890,13 @@ button.close {
   .p-lg-3 {
     padding: 1rem !important; }
   .p-lg-4 {
-    padding: 1.25rem !important; }
-  .p-lg-5 {
     padding: 1.5rem !important; }
+  .p-lg-5 {
+    padding: 2.5rem !important; }
   .p-lg-6 {
-    padding: 3rem !important; }
+    padding: 4rem !important; }
   .p-lg-7 {
     padding: 6rem !important; }
-  .p-lg-8 {
-    padding: 9rem !important; }
-  .p-lg-9 {
-    padding: 12rem !important; }
   .px-lg-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7293,23 +6910,17 @@ button.close {
     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: 1.5rem !important;
     padding-left: 1.5rem !important; }
+  .px-lg-5 {
+    padding-right: 2.5rem !important;
+    padding-left: 2.5rem !important; }
   .px-lg-6 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4rem !important;
+    padding-left: 4rem !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-9 {
-    padding-right: 12rem !important;
-    padding-left: 12rem !important; }
   .py-lg-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7323,23 +6934,17 @@ button.close {
     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: 1.5rem !important;
     padding-bottom: 1.5rem !important; }
+  .py-lg-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important; }
   .py-lg-6 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4rem !important;
+    padding-bottom: 4rem !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-9 {
-    padding-top: 12rem !important;
-    padding-bottom: 12rem !important; }
   .pt-lg-0 {
     padding-top: 0 !important; }
   .pt-lg-1 {
@@ -7349,17 +6954,13 @@ button.close {
   .pt-lg-3 {
     padding-top: 1rem !important; }
   .pt-lg-4 {
-    padding-top: 1.25rem !important; }
-  .pt-lg-5 {
     padding-top: 1.5rem !important; }
+  .pt-lg-5 {
+    padding-top: 2.5rem !important; }
   .pt-lg-6 {
-    padding-top: 3rem !important; }
+    padding-top: 4rem !important; }
   .pt-lg-7 {
     padding-top: 6rem !important; }
-  .pt-lg-8 {
-    padding-top: 9rem !important; }
-  .pt-lg-9 {
-    padding-top: 12rem !important; }
   .pr-lg-0 {
     padding-right: 0 !important; }
   .pr-lg-1 {
@@ -7369,17 +6970,13 @@ button.close {
   .pr-lg-3 {
     padding-right: 1rem !important; }
   .pr-lg-4 {
-    padding-right: 1.25rem !important; }
-  .pr-lg-5 {
     padding-right: 1.5rem !important; }
+  .pr-lg-5 {
+    padding-right: 2.5rem !important; }
   .pr-lg-6 {
-    padding-right: 3rem !important; }
+    padding-right: 4rem !important; }
   .pr-lg-7 {
     padding-right: 6rem !important; }
-  .pr-lg-8 {
-    padding-right: 9rem !important; }
-  .pr-lg-9 {
-    padding-right: 12rem !important; }
   .pb-lg-0 {
     padding-bottom: 0 !important; }
   .pb-lg-1 {
@@ -7389,17 +6986,13 @@ button.close {
   .pb-lg-3 {
     padding-bottom: 1rem !important; }
   .pb-lg-4 {
-    padding-bottom: 1.25rem !important; }
-  .pb-lg-5 {
     padding-bottom: 1.5rem !important; }
+  .pb-lg-5 {
+    padding-bottom: 2.5rem !important; }
   .pb-lg-6 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4rem !important; }
   .pb-lg-7 {
     padding-bottom: 6rem !important; }
-  .pb-lg-8 {
-    padding-bottom: 9rem !important; }
-  .pb-lg-9 {
-    padding-bottom: 12rem !important; }
   .pl-lg-0 {
     padding-left: 0 !important; }
   .pl-lg-1 {
@@ -7409,17 +7002,13 @@ button.close {
   .pl-lg-3 {
     padding-left: 1rem !important; }
   .pl-lg-4 {
-    padding-left: 1.25rem !important; }
-  .pl-lg-5 {
     padding-left: 1.5rem !important; }
+  .pl-lg-5 {
+    padding-left: 2.5rem !important; }
   .pl-lg-6 {
-    padding-left: 3rem !important; }
+    padding-left: 4rem !important; }
   .pl-lg-7 {
     padding-left: 6rem !important; }
-  .pl-lg-8 {
-    padding-left: 9rem !important; }
-  .pl-lg-9 {
-    padding-left: 12rem !important; }
   .text-lg-left {
     text-align: left !important; }
   .text-lg-right {
@@ -7427,7 +7016,7 @@ button.close {
   .text-lg-center {
     text-align: center !important; } }
 
-@media (min-width: 1200px) {
+@media (min-width: 75.25rem) {
   .float-xl-left {
     float: left !important; }
   .float-xl-right {
@@ -7548,17 +7137,13 @@ button.close {
   .m-xl-3 {
     margin: 1rem !important; }
   .m-xl-4 {
-    margin: 1.25rem !important; }
-  .m-xl-5 {
     margin: 1.5rem !important; }
+  .m-xl-5 {
+    margin: 2.5rem !important; }
   .m-xl-6 {
-    margin: 3rem !important; }
+    margin: 4rem !important; }
   .m-xl-7 {
     margin: 6rem !important; }
-  .m-xl-8 {
-    margin: 9rem !important; }
-  .m-xl-9 {
-    margin: 12rem !important; }
   .m-xl-auto {
     margin: auto !important; }
   .mx-xl-0 {
@@ -7574,23 +7159,17 @@ button.close {
     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: 1.5rem !important;
     margin-left: 1.5rem !important; }
+  .mx-xl-5 {
+    margin-right: 2.5rem !important;
+    margin-left: 2.5rem !important; }
   .mx-xl-6 {
-    margin-right: 3rem !important;
-    margin-left: 3rem !important; }
+    margin-right: 4rem !important;
+    margin-left: 4rem !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-9 {
-    margin-right: 12rem !important;
-    margin-left: 12rem !important; }
   .mx-xl-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7607,23 +7186,17 @@ button.close {
     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: 1.5rem !important;
     margin-bottom: 1.5rem !important; }
+  .my-xl-5 {
+    margin-top: 2.5rem !important;
+    margin-bottom: 2.5rem !important; }
   .my-xl-6 {
-    margin-top: 3rem !important;
-    margin-bottom: 3rem !important; }
+    margin-top: 4rem !important;
+    margin-bottom: 4rem !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-9 {
-    margin-top: 12rem !important;
-    margin-bottom: 12rem !important; }
   .my-xl-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -7636,17 +7209,13 @@ button.close {
   .mt-xl-3 {
     margin-top: 1rem !important; }
   .mt-xl-4 {
-    margin-top: 1.25rem !important; }
-  .mt-xl-5 {
     margin-top: 1.5rem !important; }
+  .mt-xl-5 {
+    margin-top: 2.5rem !important; }
   .mt-xl-6 {
-    margin-top: 3rem !important; }
+    margin-top: 4rem !important; }
   .mt-xl-7 {
     margin-top: 6rem !important; }
-  .mt-xl-8 {
-    margin-top: 9rem !important; }
-  .mt-xl-9 {
-    margin-top: 12rem !important; }
   .mt-xl-auto {
     margin-top: auto !important; }
   .mr-xl-0 {
@@ -7658,17 +7227,13 @@ button.close {
   .mr-xl-3 {
     margin-right: 1rem !important; }
   .mr-xl-4 {
-    margin-right: 1.25rem !important; }
-  .mr-xl-5 {
     margin-right: 1.5rem !important; }
+  .mr-xl-5 {
+    margin-right: 2.5rem !important; }
   .mr-xl-6 {
-    margin-right: 3rem !important; }
+    margin-right: 4rem !important; }
   .mr-xl-7 {
     margin-right: 6rem !important; }
-  .mr-xl-8 {
-    margin-right: 9rem !important; }
-  .mr-xl-9 {
-    margin-right: 12rem !important; }
   .mr-xl-auto {
     margin-right: auto !important; }
   .mb-xl-0 {
@@ -7680,17 +7245,13 @@ button.close {
   .mb-xl-3 {
     margin-bottom: 1rem !important; }
   .mb-xl-4 {
-    margin-bottom: 1.25rem !important; }
-  .mb-xl-5 {
     margin-bottom: 1.5rem !important; }
+  .mb-xl-5 {
+    margin-bottom: 2.5rem !important; }
   .mb-xl-6 {
-    margin-bottom: 3rem !important; }
+    margin-bottom: 4rem !important; }
   .mb-xl-7 {
     margin-bottom: 6rem !important; }
-  .mb-xl-8 {
-    margin-bottom: 9rem !important; }
-  .mb-xl-9 {
-    margin-bottom: 12rem !important; }
   .mb-xl-auto {
     margin-bottom: auto !important; }
   .ml-xl-0 {
@@ -7702,17 +7263,13 @@ button.close {
   .ml-xl-3 {
     margin-left: 1rem !important; }
   .ml-xl-4 {
-    margin-left: 1.25rem !important; }
-  .ml-xl-5 {
     margin-left: 1.5rem !important; }
+  .ml-xl-5 {
+    margin-left: 2.5rem !important; }
   .ml-xl-6 {
-    margin-left: 3rem !important; }
+    margin-left: 4rem !important; }
   .ml-xl-7 {
     margin-left: 6rem !important; }
-  .ml-xl-8 {
-    margin-left: 9rem !important; }
-  .ml-xl-9 {
-    margin-left: 12rem !important; }
   .ml-xl-auto {
     margin-left: auto !important; }
   .m-xl-n1 {
@@ -7722,17 +7279,13 @@ button.close {
   .m-xl-n3 {
     margin: -1rem !important; }
   .m-xl-n4 {
-    margin: -1.25rem !important; }
-  .m-xl-n5 {
     margin: -1.5rem !important; }
+  .m-xl-n5 {
+    margin: -2.5rem !important; }
   .m-xl-n6 {
-    margin: -3rem !important; }
+    margin: -4rem !important; }
   .m-xl-n7 {
     margin: -6rem !important; }
-  .m-xl-n8 {
-    margin: -9rem !important; }
-  .m-xl-n9 {
-    margin: -12rem !important; }
   .mx-xl-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7743,23 +7296,17 @@ button.close {
     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: -1.5rem !important;
     margin-left: -1.5rem !important; }
+  .mx-xl-n5 {
+    margin-right: -2.5rem !important;
+    margin-left: -2.5rem !important; }
   .mx-xl-n6 {
-    margin-right: -3rem !important;
-    margin-left: -3rem !important; }
+    margin-right: -4rem !important;
+    margin-left: -4rem !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-n9 {
-    margin-right: -12rem !important;
-    margin-left: -12rem !important; }
   .my-xl-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7770,23 +7317,17 @@ button.close {
     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: -1.5rem !important;
     margin-bottom: -1.5rem !important; }
+  .my-xl-n5 {
+    margin-top: -2.5rem !important;
+    margin-bottom: -2.5rem !important; }
   .my-xl-n6 {
-    margin-top: -3rem !important;
-    margin-bottom: -3rem !important; }
+    margin-top: -4rem !important;
+    margin-bottom: -4rem !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-n9 {
-    margin-top: -12rem !important;
-    margin-bottom: -12rem !important; }
   .mt-xl-n1 {
     margin-top: -0.25rem !important; }
   .mt-xl-n2 {
@@ -7794,17 +7335,13 @@ button.close {
   .mt-xl-n3 {
     margin-top: -1rem !important; }
   .mt-xl-n4 {
-    margin-top: -1.25rem !important; }
-  .mt-xl-n5 {
     margin-top: -1.5rem !important; }
+  .mt-xl-n5 {
+    margin-top: -2.5rem !important; }
   .mt-xl-n6 {
-    margin-top: -3rem !important; }
+    margin-top: -4rem !important; }
   .mt-xl-n7 {
     margin-top: -6rem !important; }
-  .mt-xl-n8 {
-    margin-top: -9rem !important; }
-  .mt-xl-n9 {
-    margin-top: -12rem !important; }
   .mr-xl-n1 {
     margin-right: -0.25rem !important; }
   .mr-xl-n2 {
@@ -7812,17 +7349,13 @@ button.close {
   .mr-xl-n3 {
     margin-right: -1rem !important; }
   .mr-xl-n4 {
-    margin-right: -1.25rem !important; }
-  .mr-xl-n5 {
     margin-right: -1.5rem !important; }
+  .mr-xl-n5 {
+    margin-right: -2.5rem !important; }
   .mr-xl-n6 {
-    margin-right: -3rem !important; }
+    margin-right: -4rem !important; }
   .mr-xl-n7 {
     margin-right: -6rem !important; }
-  .mr-xl-n8 {
-    margin-right: -9rem !important; }
-  .mr-xl-n9 {
-    margin-right: -12rem !important; }
   .mb-xl-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-xl-n2 {
@@ -7830,17 +7363,13 @@ button.close {
   .mb-xl-n3 {
     margin-bottom: -1rem !important; }
   .mb-xl-n4 {
-    margin-bottom: -1.25rem !important; }
-  .mb-xl-n5 {
     margin-bottom: -1.5rem !important; }
+  .mb-xl-n5 {
+    margin-bottom: -2.5rem !important; }
   .mb-xl-n6 {
-    margin-bottom: -3rem !important; }
+    margin-bottom: -4rem !important; }
   .mb-xl-n7 {
     margin-bottom: -6rem !important; }
-  .mb-xl-n8 {
-    margin-bottom: -9rem !important; }
-  .mb-xl-n9 {
-    margin-bottom: -12rem !important; }
   .ml-xl-n1 {
     margin-left: -0.25rem !important; }
   .ml-xl-n2 {
@@ -7848,17 +7377,13 @@ button.close {
   .ml-xl-n3 {
     margin-left: -1rem !important; }
   .ml-xl-n4 {
-    margin-left: -1.25rem !important; }
-  .ml-xl-n5 {
     margin-left: -1.5rem !important; }
+  .ml-xl-n5 {
+    margin-left: -2.5rem !important; }
   .ml-xl-n6 {
-    margin-left: -3rem !important; }
+    margin-left: -4rem !important; }
   .ml-xl-n7 {
     margin-left: -6rem !important; }
-  .ml-xl-n8 {
-    margin-left: -9rem !important; }
-  .ml-xl-n9 {
-    margin-left: -12rem !important; }
   .p-xl-0 {
     padding: 0 !important; }
   .p-xl-1 {
@@ -7868,17 +7393,13 @@ button.close {
   .p-xl-3 {
     padding: 1rem !important; }
   .p-xl-4 {
-    padding: 1.25rem !important; }
-  .p-xl-5 {
     padding: 1.5rem !important; }
+  .p-xl-5 {
+    padding: 2.5rem !important; }
   .p-xl-6 {
-    padding: 3rem !important; }
+    padding: 4rem !important; }
   .p-xl-7 {
     padding: 6rem !important; }
-  .p-xl-8 {
-    padding: 9rem !important; }
-  .p-xl-9 {
-    padding: 12rem !important; }
   .px-xl-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7892,23 +7413,17 @@ button.close {
     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: 1.5rem !important;
     padding-left: 1.5rem !important; }
+  .px-xl-5 {
+    padding-right: 2.5rem !important;
+    padding-left: 2.5rem !important; }
   .px-xl-6 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important; }
+    padding-right: 4rem !important;
+    padding-left: 4rem !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-9 {
-    padding-right: 12rem !important;
-    padding-left: 12rem !important; }
   .py-xl-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7922,23 +7437,17 @@ button.close {
     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: 1.5rem !important;
     padding-bottom: 1.5rem !important; }
+  .py-xl-5 {
+    padding-top: 2.5rem !important;
+    padding-bottom: 2.5rem !important; }
   .py-xl-6 {
-    padding-top: 3rem !important;
-    padding-bottom: 3rem !important; }
+    padding-top: 4rem !important;
+    padding-bottom: 4rem !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-9 {
-    padding-top: 12rem !important;
-    padding-bottom: 12rem !important; }
   .pt-xl-0 {
     padding-top: 0 !important; }
   .pt-xl-1 {
@@ -7948,17 +7457,13 @@ button.close {
   .pt-xl-3 {
     padding-top: 1rem !important; }
   .pt-xl-4 {
-    padding-top: 1.25rem !important; }
-  .pt-xl-5 {
     padding-top: 1.5rem !important; }
+  .pt-xl-5 {
+    padding-top: 2.5rem !important; }
   .pt-xl-6 {
-    padding-top: 3rem !important; }
+    padding-top: 4rem !important; }
   .pt-xl-7 {
     padding-top: 6rem !important; }
-  .pt-xl-8 {
-    padding-top: 9rem !important; }
-  .pt-xl-9 {
-    padding-top: 12rem !important; }
   .pr-xl-0 {
     padding-right: 0 !important; }
   .pr-xl-1 {
@@ -7968,17 +7473,13 @@ button.close {
   .pr-xl-3 {
     padding-right: 1rem !important; }
   .pr-xl-4 {
-    padding-right: 1.25rem !important; }
-  .pr-xl-5 {
     padding-right: 1.5rem !important; }
+  .pr-xl-5 {
+    padding-right: 2.5rem !important; }
   .pr-xl-6 {
-    padding-right: 3rem !important; }
+    padding-right: 4rem !important; }
   .pr-xl-7 {
     padding-right: 6rem !important; }
-  .pr-xl-8 {
-    padding-right: 9rem !important; }
-  .pr-xl-9 {
-    padding-right: 12rem !important; }
   .pb-xl-0 {
     padding-bottom: 0 !important; }
   .pb-xl-1 {
@@ -7988,17 +7489,13 @@ button.close {
   .pb-xl-3 {
     padding-bottom: 1rem !important; }
   .pb-xl-4 {
-    padding-bottom: 1.25rem !important; }
-  .pb-xl-5 {
     padding-bottom: 1.5rem !important; }
+  .pb-xl-5 {
+    padding-bottom: 2.5rem !important; }
   .pb-xl-6 {
-    padding-bottom: 3rem !important; }
+    padding-bottom: 4rem !important; }
   .pb-xl-7 {
     padding-bottom: 6rem !important; }
-  .pb-xl-8 {
-    padding-bottom: 9rem !important; }
-  .pb-xl-9 {
-    padding-bottom: 12rem !important; }
   .pl-xl-0 {
     padding-left: 0 !important; }
   .pl-xl-1 {
@@ -8008,17 +7505,13 @@ button.close {
   .pl-xl-3 {
     padding-left: 1rem !important; }
   .pl-xl-4 {
-    padding-left: 1.25rem !important; }
-  .pl-xl-5 {
     padding-left: 1.5rem !important; }
+  .pl-xl-5 {
+    padding-left: 2.5rem !important; }
   .pl-xl-6 {
-    padding-left: 3rem !important; }
+    padding-left: 4rem !important; }
   .pl-xl-7 {
     padding-left: 6rem !important; }
-  .pl-xl-8 {
-    padding-left: 9rem !important; }
-  .pl-xl-9 {
-    padding-left: 12rem !important; }
   .text-xl-left {
     text-align: left !important; }
   .text-xl-right {
@@ -8052,88 +7545,28 @@ html {
 
 body {
   min-height: 100%;
-  overflow-y: scroll;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
   font-feature-settings: "liga" 0; }
-  body *::-webkit-scrollbar {
+  body .content *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     -webkit-transition: .3s background;
     transition: .3s background; }
-  body *::-webkit-scrollbar-thumb {
+  body .content *::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: #dee1e7; }
-  body *:hover::-webkit-scrollbar-thumb {
-    background: #cdd1d8;
-    background: #cdd1d8; }
+    background: #dde0e5; }
+  body .content *:hover::-webkit-scrollbar-thumb {
+    background: #ccced5;
+    background: #ccced5; }
   @media print {
     body {
       background: transparent; } }
 
-/**
-Top nav
- */
-.topnav {
-  border-bottom: 1px solid;
-  background-color: #ffffff;
-  border-color: rgba(53, 64, 82, 0.16);
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  padding: 0 .5rem;
-  z-index: 1020;
-  min-height: 3.5rem; }
-  .topnav + .topnav {
-    top: calc(3.5rem + 1px);
-    z-index: 1019; }
-  .topnav + .topnav + .topnav {
-    top: calc(7rem + 2px);
-    z-index: 1018; }
-  @media print {
-    .topnav {
-      display: none; } }
-  .topnav .navbar {
-    margin: 0;
-    padding: 0;
-    min-height: 3.5rem; }
-  .topnav .nav-link {
-    height: 3.5rem; }
-  .topnav .nav-item.active {
-    position: relative; }
-    .topnav .nav-item.active:after {
-      content: '';
-      position: absolute;
-      bottom: -1px;
-      left: 2px;
-      right: 2px;
-      border-bottom: 1px solid #206bc4; }
-  .topnav .navbar-brand-logo-sm {
-    display: none; }
-  @media (max-width: 767.98px) {
-    .topnav .navbar-brand-logo-lg {
-      display: none; }
-    .topnav .navbar-brand-logo-sm {
-      display: block; } }
-  .sidebar + .content .topnav {
-    left: 16rem; }
-    @media (max-width: 1199.98px) {
-      .sidebar + .content .topnav {
-        left: 4rem; } }
-    @media (max-width: 767.98px) {
-      .sidebar + .content .topnav {
-        left: 0;
-        padding: 0; } }
-
-.topnav-fixed {
-  position: fixed;
-  z-index: 1030; }
-
 /**
 Wrapper
  */
-.wrapper {
+.page {
   height: 100%;
   overflow: hidden;
   width: 100%; }
@@ -8144,15 +7577,14 @@ Content
 .content {
   overflow: hidden;
   min-height: 100vh;
-  padding: 0 .5rem 0;
   display: flex;
   flex-direction: column; }
   .sidebar + .content {
     margin-left: 16rem; }
-    @media (max-width: 1199.98px) {
+    @media (max-width: 75.23rem) {
       .sidebar + .content {
         margin-left: 4rem; } }
-    @media (max-width: 767.98px) {
+    @media (max-width: 47.98rem) {
       .sidebar + .content {
         margin-left: 0;
         padding-left: 0;
@@ -8164,12 +7596,6 @@ Content
   @media print {
     .content-page {
       padding-top: 0 !important; } }
-  .topnav + .content-page {
-    padding-top: calc(3.5rem + 1px); }
-  .topnav + .topnav + .content-page {
-    padding-top: calc(7rem + 2px); }
-  .topnav + .topnav + .topnav + .content-page {
-    padding-top: calc(10.5rem + 3px); }
 
 /**
 Sidebar
@@ -8180,16 +7606,28 @@ Sidebar
   z-index: 1030;
   padding: 0;
   background: #ffffff;
-  box-shadow: inset -1px 0 rgba(53, 64, 82, 0.16);
+  box-shadow: inset -1px 0 rgba(123, 126, 136, 0.24);
   top: 0;
   bottom: 0;
-  display: flex;
+  display: none;
   flex-direction: column; }
-  @media (max-width: 1199.98px) {
+  @media (min-width: 33rem) {
+    .sidebar {
+      display: flex; }
+      .sidebar + .content .navbar.fixed-top {
+        left: 16rem; }
+      .sidebar .hide-sidebar-visible,
+      .sidebar + .content .hide-sidebar-visible {
+        display: none !important; } }
+  @media (min-width: 33rem) and (max-width: 75.23rem) {
     .sidebar {
       width: 4rem; }
       .sidebar .sidebar-brand {
-        width: 4rem; }
+        width: 100%; }
+      .sidebar .sidebar-brand-logo-sm {
+        display: inline-block; }
+      .sidebar .sidebar-brand-logo-lg {
+        display: none; }
       .sidebar .sidebar-content {
         padding: 0;
         overflow: visible; }
@@ -8237,22 +7675,31 @@ Sidebar
         left: 4rem;
         right: 0;
         padding: .5rem 0;
-        background: #354052;
+        background: #303645;
         box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
       .sidebar .sidebar-nav-arrow {
         display: none !important; }
       .sidebar .sidebar-nav-title {
-        display: none; } }
-  @media (max-width: 767.98px) {
-    .sidebar {
-      display: none; } }
+        display: none; }
+      .sidebar + .content {
+        margin-left: 4rem; }
+        .sidebar + .content .navbar.fixed-top {
+          left: 4rem; }
+      .sidebar.sidebar-right + .content {
+        margin-left: 0;
+        margin-right: 4rem; }
+        .sidebar.sidebar-right + .content .navbar.fixed-top {
+          left: 0;
+          right: 4rem; }
+      .sidebar .hide-sidebar-narrow {
+        display: none !important; } }
 
 .sidebar-brand {
   display: block;
   text-align: center;
   line-height: 3.5rem;
   width: 16rem;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0; }
 
@@ -8260,11 +7707,6 @@ Sidebar
   height: 2rem; }
   .sidebar-brand-logo-sm {
     display: none; }
-  @media (max-width: 1199.98px) {
-    .sidebar-brand-logo-sm {
-      display: inline-block; }
-    .sidebar-brand-logo-lg {
-      display: none; } }
 
 .sidebar-content {
   padding: 1.25rem;
@@ -8279,10 +7721,10 @@ Sidebar
     transition: .3s background; }
   .sidebar-content::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: transparent; }
+    background: #dde0e5; }
   .sidebar-content:hover::-webkit-scrollbar-thumb {
-    background: #cdd1d8;
-    background: #5d6675; }
+    background: #ccced5;
+    background: #ccced5; }
   .sidebar-brand + .sidebar-content {
     margin-top: 3.5rem; }
 
@@ -8296,7 +7738,8 @@ Sidebar menu
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none; }
+  user-select: none;
+  color: #7b7e88; }
   .sidebar-nav ul {
     margin: 0;
     padding: 0;
@@ -8315,11 +7758,11 @@ Sidebar menu
   .sidebar-nav-link:hover {
     background-color: rgba(255, 255, 255, 0.02);
     text-decoration: none;
-    color: #ffffff !important;
+    color: #303645 !important;
     cursor: pointer !important; }
   .sidebar-nav-link.active {
     opacity: 1;
-    color: #ffffff;
+    color: #303645 !important;
     box-shadow: inset 3px 0 #206bc4;
     background-color: rgba(255, 255, 255, 0.01); }
   .sidebar-nav-link .icon {
@@ -8361,12 +7804,236 @@ Sidebar menu
 Sidebar dark
  */
 .sidebar-dark {
-  background: #354052;
-  color: #7e8590;
+  background: #303645;
+  color: #7b7e88;
   box-shadow: none; }
   .sidebar-dark .sidebar-brand {
     -webkit-filter: brightness(0) invert(1);
     filter: brightness(0) invert(1); }
+  .sidebar-dark .sidebar-nav-link:hover, .sidebar-dark .sidebar-nav-link.active {
+    color: #ffffff !important; }
+  .sidebar-dark .sidebar-content::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  .sidebar-dark .sidebar-content::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: transparent; }
+  .sidebar-dark .sidebar-content:hover::-webkit-scrollbar-thumb {
+    background: #ccced5;
+    background: #595e6a; }
+
+/**
+Right sidebar
+ */
+.sidebar-right {
+  left: auto;
+  right: 0;
+  box-shadow: inset 1px 0 rgba(123, 126, 136, 0.24); }
+  .sidebar-right + .content {
+    margin-left: 0;
+    margin-right: 16rem; }
+    .sidebar-right + .content .navbar.fixed-top {
+      left: 0;
+      right: 16rem; }
+
+/**
+Folded sidebar
+ */
+.sidebar-narrow {
+  width: 4rem; }
+  .sidebar-narrow .sidebar-brand {
+    width: 100%; }
+  .sidebar-narrow .sidebar-brand-logo-sm {
+    display: inline-block; }
+  .sidebar-narrow .sidebar-brand-logo-lg {
+    display: none; }
+  .sidebar-narrow .sidebar-content {
+    padding: 0;
+    overflow: visible; }
+  .sidebar-narrow .sidebar-nav {
+    margin: 0; }
+    .sidebar-narrow .sidebar-nav > .sidebar-nav-item {
+      position: relative;
+      white-space: nowrap; }
+      .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover {
+        background: #206bc4;
+        width: 16rem; }
+        .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover > .sidebar-nav-link {
+          color: #ffffff; }
+          .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover > .sidebar-nav-link > span {
+            display: block; }
+          .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover > .sidebar-nav-link .icon {
+            margin-right: 2.25rem; }
+        .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover .sidebar-subnav {
+          display: block; }
+          .sidebar-narrow .sidebar-nav > .sidebar-nav-item:hover .sidebar-subnav .sidebar-nav-link {
+            padding-left: 1.25rem; }
+      .sidebar-narrow .sidebar-nav > .sidebar-nav-item > .sidebar-nav-link {
+        min-height: 3.5rem;
+        padding: 0 1rem !important;
+        position: relative; }
+        .sidebar-narrow .sidebar-nav > .sidebar-nav-item > .sidebar-nav-link .icon {
+          margin: 0;
+          width: 2rem;
+          height: 1.125rem; }
+        .sidebar-narrow .sidebar-nav > .sidebar-nav-item > .sidebar-nav-link > span {
+          display: none; }
+        .sidebar-narrow .sidebar-nav > .sidebar-nav-item > .sidebar-nav-link .badge {
+          display: block;
+          position: absolute;
+          left: 2.5rem;
+          top: 1rem;
+          text-indent: -99999px;
+          width: 0.5rem;
+          height: 0.5rem;
+          padding: 0; }
+  .sidebar-narrow .sidebar-subnav {
+    display: none;
+    position: absolute;
+    top: 3.5rem;
+    left: 4rem;
+    right: 0;
+    padding: .5rem 0;
+    background: #303645;
+    box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+  .sidebar-narrow .sidebar-nav-arrow {
+    display: none !important; }
+  .sidebar-narrow .sidebar-nav-title {
+    display: none; }
+  .sidebar-narrow + .content {
+    margin-left: 4rem; }
+    .sidebar-narrow + .content .navbar.fixed-top {
+      left: 4rem; }
+  .sidebar-narrow.sidebar-right + .content {
+    margin-left: 0;
+    margin-right: 4rem; }
+    .sidebar-narrow.sidebar-right + .content .navbar.fixed-top {
+      left: 0;
+      right: 4rem; }
+  .sidebar-narrow .hide-sidebar-narrow {
+    display: none !important; }
+
+/*
+Navbar
+ */
+.navbar, .navbar .navbar-dark {
+  min-height: 3.5rem; }
+  .navbar.fixed-top + .content-page, .navbar .navbar-dark.fixed-top + .content-page {
+    padding-top: 3.5rem; }
+  .navbar.fixed-top + .navbar:not(.fixed-top), .navbar .navbar-dark.fixed-top + .navbar:not(.fixed-top) {
+    margin-top: 3.5rem; }
+  .navbar.fixed-top + .navbar.fixed-top, .navbar .navbar-dark.fixed-top + .navbar.fixed-top {
+    top: 3.5rem; }
+    .navbar.fixed-top + .navbar.fixed-top + .content-page, .navbar .navbar-dark.fixed-top + .navbar.fixed-top + .content-page {
+      padding-top: 7rem; }
+
+@media (min-width: 64rem) {
+  .navbar {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem; } }
+
+.navbar-expand-xs .navbar-collapse-absolute {
+  position: absolute;
+  background: inherit;
+  z-index: 1020;
+  left: 0;
+  right: 0;
+  position: static; }
+
+.navbar-expand-sm .navbar-collapse-absolute {
+  position: absolute;
+  background: inherit;
+  z-index: 1020;
+  left: 0;
+  right: 0; }
+  @media (min-width: 33rem) {
+    .navbar-expand-sm .navbar-collapse-absolute {
+      position: static; } }
+
+.navbar-expand-md .navbar-collapse-absolute {
+  position: absolute;
+  background: inherit;
+  z-index: 1020;
+  left: 0;
+  right: 0; }
+  @media (min-width: 48rem) {
+    .navbar-expand-md .navbar-collapse-absolute {
+      position: static; } }
+
+.navbar-expand-lg .navbar-collapse-absolute {
+  position: absolute;
+  background: inherit;
+  z-index: 1020;
+  left: 0;
+  right: 0; }
+  @media (min-width: 64rem) {
+    .navbar-expand-lg .navbar-collapse-absolute {
+      position: static; } }
+
+.navbar-expand-xl .navbar-collapse-absolute {
+  position: absolute;
+  background: inherit;
+  z-index: 1020;
+  left: 0;
+  right: 0; }
+  @media (min-width: 75.25rem) {
+    .navbar-expand-xl .navbar-collapse-absolute {
+      position: static; } }
+
+/**
+navbar toggler
+ */
+.navbar-toggler {
+  border: 0;
+  font-size: 1rem;
+  width: 3rem;
+  height: 3rem;
+  margin: -0.75rem;
+  position: relative; }
+
+.navbar-toggler-icon {
+  background-image: none !important;
+  position: absolute;
+  width: 1.5rem;
+  height: 2px;
+  border-radius: 3px;
+  left: 50%;
+  top: 50%;
+  margin-left: -0.75rem;
+  margin-top: -1px;
+  background: currentColor;
+  transform-origin: center;
+  transition: transform 0.1s, top 0.1s 0.1s, bottom 0.1s 0.1s; }
+  .navbar-toggler-icon:before, .navbar-toggler-icon:after {
+    content: '';
+    background: inherit;
+    position: absolute;
+    height: inherit;
+    width: inherit;
+    left: 0;
+    border-radius: inherit;
+    transition: inherit; }
+  .navbar-toggler-icon:before {
+    top: 7px; }
+  .navbar-toggler-icon:after {
+    bottom: 7px; }
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    transform: rotate(45deg);
+    transition: top 0.1s, bottom 0.1s, transform 0.1s 0.1s, opacity 0.1s; }
+    .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 with border
+*/
+.navbar-border {
+  box-shadow: inset 0 -1px 0 0px rgba(123, 126, 136, 0.24); }
 
 /**
 Navbar logo
@@ -8375,15 +8042,69 @@ Navbar logo
   height: 2rem; }
 
 .navbar-nav {
-  flex-direction: row;
   margin-right: -0.75rem;
   margin-left: -0.75rem; }
   .navbar-nav .nav-link {
     padding-left: 0.75rem;
     padding-right: 0.75rem; }
-  .navbar-nav .nav-item:hover > .dropdown-menu,
-  .navbar-nav .dropright:hover > .dropdown-menu {
+  .navbar-expand-xs .navbar-nav .nav-item:hover > .dropdown-menu,
+  .navbar-expand-xs .navbar-nav .dropright:hover > .dropdown-menu {
     display: block; }
+  @media (max-width: 32.98rem) {
+    .navbar-expand-xs .navbar-nav .dropdown-menu {
+      box-shadow: none;
+      border: 0;
+      padding: 0; }
+    .navbar-expand-xs .navbar-nav .dropdown-item {
+      padding-left: calc(0.75rem + 19px);
+      padding-right: 0; } }
+  @media (min-width: 33rem) {
+    .navbar-expand-sm .navbar-nav .nav-item:hover > .dropdown-menu,
+    .navbar-expand-sm .navbar-nav .dropright:hover > .dropdown-menu {
+      display: block; } }
+  @media (max-width: 47.98rem) {
+    .navbar-expand-sm .navbar-nav .dropdown-menu {
+      box-shadow: none;
+      border: 0;
+      padding: 0; }
+    .navbar-expand-sm .navbar-nav .dropdown-item {
+      padding-left: calc(0.75rem + 19px);
+      padding-right: 0; } }
+  @media (min-width: 48rem) {
+    .navbar-expand-md .navbar-nav .nav-item:hover > .dropdown-menu,
+    .navbar-expand-md .navbar-nav .dropright:hover > .dropdown-menu {
+      display: block; } }
+  @media (max-width: 63.98rem) {
+    .navbar-expand-md .navbar-nav .dropdown-menu {
+      box-shadow: none;
+      border: 0;
+      padding: 0; }
+    .navbar-expand-md .navbar-nav .dropdown-item {
+      padding-left: calc(0.75rem + 19px);
+      padding-right: 0; } }
+  @media (min-width: 64rem) {
+    .navbar-expand-lg .navbar-nav .nav-item:hover > .dropdown-menu,
+    .navbar-expand-lg .navbar-nav .dropright:hover > .dropdown-menu {
+      display: block; } }
+  @media (max-width: 75.23rem) {
+    .navbar-expand-lg .navbar-nav .dropdown-menu {
+      box-shadow: none;
+      border: 0;
+      padding: 0; }
+    .navbar-expand-lg .navbar-nav .dropdown-item {
+      padding-left: calc(0.75rem + 19px);
+      padding-right: 0; } }
+  @media (min-width: 75.25rem) {
+    .navbar-expand-xl .navbar-nav .nav-item:hover > .dropdown-menu,
+    .navbar-expand-xl .navbar-nav .dropright:hover > .dropdown-menu {
+      display: block; } }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    box-shadow: none;
+    border: 0;
+    padding: 0; }
+  .navbar-expand-xl .navbar-nav .dropdown-item {
+    padding-left: calc(0.75rem + 19px);
+    padding-right: 0; }
   .navbar-nav .dropdown-menu .dropdown .dropdown-toggle:after,
   .navbar-nav .dropdown-menu .dropright .dropdown-toggle:after {
     margin-left: auto; }
@@ -8396,7 +8117,7 @@ Navbar logo
   display: flex;
   align-items: center;
   min-height: 2.25rem;
-  margin: 0.25rem 0 1.25rem; }
+  margin: 0 0 1.25rem; }
   .page-title-box > * {
     flex: 1; }
 
@@ -8405,7 +8126,7 @@ Navbar logo
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .page-title {
   margin: 0;
@@ -8429,7 +8150,7 @@ Navbar logo
   line-height: 2.5rem;
   font-size: .875rem;
   font-weight: 400;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
@@ -8437,7 +8158,7 @@ Navbar logo
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: #f1f3f8 no-repeat center/cover;
+  background: #f1f3f7 no-repeat center/cover;
   border-radius: 50%; }
   .avatar .icon {
     font-size: 1.25em; }
@@ -8495,14 +8216,14 @@ Navbar logo
   margin-right: -.5em !important;
   box-shadow: 0 0 0 2px #fff; }
   .card-footer .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px rgba(53, 64, 82, 0.02); }
+    box-shadow: 0 0 0 2px rgba(48, 54, 69, 0.032); }
 
 .badge {
   font-size: 0.7333333em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
-  background: #f1f3f8; }
+  background: #f1f3f7; }
   a.badge {
     color: #ffffff; }
   .badge:empty {
@@ -8541,61 +8262,102 @@ Navbar logo
   color: inherit;
   pointer-events: none; }
 
-.breadcrumb-dots .breadcrumb-item + .breadcrumb-item::before {
+.breadcrumb-dots .breadcrumb-item + .breadcrumb-item:before {
   content: "·"; }
 
-.breadcrumb-arrows .breadcrumb-item + .breadcrumb-item::before {
+.breadcrumb-arrows .breadcrumb-item + .breadcrumb-item:before {
   content: "›"; }
 
-.breadcrumb-bullets .breadcrumb-item + .breadcrumb-item::before {
+.breadcrumb-bullets .breadcrumb-item + .breadcrumb-item:before {
   content: "•"; }
 
 .breadcrumb-alternate a {
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .breadcrumb-alternate .breadcrumb-item.active {
-  color: #354052; }
+  color: #303645; }
 
 .btn-secondary {
-  color: #354052;
+  color: #303645;
   background-color: #ffffff;
-  border-color: rgba(53, 64, 82, 0.16);
-  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(53, 64, 82, 0.04) 100%); }
+  border-color: rgba(123, 126, 136, 0.24);
+  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba(48, 54, 69, 0.04) 100%);
+  box-shadow: none !important; }
   .btn-secondary:hover {
-    color: #354052;
+    color: #303645;
     background-color: #ececec;
-    border-color: rgba(33, 40, 51, 0.16); }
+    border-color: rgba(99, 101, 109, 0.24); }
   .btn-secondary:focus, .btn-secondary.focus {
-    color: #354052;
+    color: #303645;
     background-color: #ececec;
-    border-color: rgba(33, 40, 51, 0.16);
-    box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+    border-color: rgba(99, 101, 109, 0.24);
+    box-shadow: 0 0 0 0.2rem rgba(81, 85, 98, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
-    color: #354052;
+    color: #303645;
     background-color: #e6e6e6;
-    border-color: rgba(28, 34, 43, 0.16); }
+    border-color: rgba(93, 95, 103, 0.24); }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(53, 64, 82, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(81, 85, 98, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
-    color: #354052;
+    color: #303645;
     background-color: #ffffff;
-    border-color: rgba(53, 64, 82, 0.16); }
+    border-color: rgba(123, 126, 136, 0.24); }
+  .bg-dark .btn-secondary,
+  .theme-dark .btn-secondary {
+    color: #f5f7fb;
+    background-color: rgba(245, 247, 251, 0.032);
+    border-color: rgba(123, 126, 136, 0.24);
+    background-image: none; }
+    .bg-dark .btn-secondary:hover,
+    .theme-dark .btn-secondary:hover {
+      color: #f5f7fb;
+      background-color: rgba(0, 0, 0, 0);
+      border-color: rgba(123, 126, 136, 0.24); }
+    .bg-dark .btn-secondary:focus, .bg-dark .btn-secondary.focus,
+    .theme-dark .btn-secondary:focus,
+    .theme-dark .btn-secondary.focus {
+      color: #f5f7fb;
+      background-color: rgba(0, 0, 0, 0);
+      border-color: rgba(123, 126, 136, 0.24);
+      box-shadow: 0 0 0 0.2rem rgba(192, 194, 201, 0.5); }
+    .bg-dark .btn-secondary:active, .bg-dark .btn-secondary.active,
+    .show > .bg-dark .btn-secondary.dropdown-toggle,
+    .theme-dark .btn-secondary:active,
+    .theme-dark .btn-secondary.active,
+    .show >
+    .theme-dark .btn-secondary.dropdown-toggle {
+      color: #303645;
+      background-color: rgba(209, 218, 236, 0.032);
+      border-color: rgba(93, 95, 103, 0.24); }
+      .bg-dark .btn-secondary:active:focus, .bg-dark .btn-secondary.active:focus,
+      .show > .bg-dark .btn-secondary.dropdown-toggle:focus,
+      .theme-dark .btn-secondary:active:focus,
+      .theme-dark .btn-secondary.active:focus,
+      .show >
+      .theme-dark .btn-secondary.dropdown-toggle:focus {
+        box-shadow: 0 0 0 0.2rem rgba(192, 194, 201, 0.5); }
+    .bg-dark .btn-secondary:disabled, .bg-dark .btn-secondary.disabled,
+    .theme-dark .btn-secondary:disabled,
+    .theme-dark .btn-secondary.disabled {
+      color: #f5f7fb;
+      background-color: rgba(245, 247, 251, 0.032);
+      border-color: rgba(123, 126, 136, 0.24); }
 
 .btn-outlined-secondary {
   color: #ffffff;
   border-color: #ffffff; }
   .btn-outlined-secondary:hover {
-    color: rgba(53, 64, 82, 0.16);
-    background-color: #354052;
+    color: rgba(123, 126, 136, 0.24);
+    background-color: #303645;
     border-color: #ffffff; }
   .btn-outlined-secondary:focus, .btn-outlined-secondary.focus {
     box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
   .btn-outlined-secondary:active, .btn-outlined-secondary.active,
   .show > .btn-outlined-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #354052;
+    background-color: #303645;
     border-color: #ffffff; }
     .btn-outlined-secondary:active:focus, .btn-outlined-secondary.active:focus,
     .show > .btn-outlined-secondary.dropdown-toggle:focus {
@@ -8657,16 +8419,16 @@ Navbar logo
   margin-right: -.5rem; }
   .btn-list > .btn,
   .btn-list > .dropdown {
-    margin-bottom: .5rem; }
-    .btn-list > .btn:not(:last-child),
-    .btn-list > .dropdown:not(:last-child) {
-      margin-right: .5rem; }
+    margin: 0 .5rem .5rem 0; }
+  .btn-list > .btn-block {
+    flex: 1;
+    white-space: nowrap; }
 
 .btn-options {
   display: flex;
   align-items: center;
   padding: 0;
-  color: #7e8590;
+  color: #7b7e88;
   cursor: pointer;
   background: none;
   border: none; }
@@ -8686,7 +8448,7 @@ Navbar logo
 .calendar {
   display: block;
   font-size: 0.8203125rem;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .calendar-nav {
@@ -8705,7 +8467,7 @@ Navbar logo
   padding: .5rem 0; }
 
 .calendar-header {
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .calendar-date {
   flex: 0 0 14.2857143%;
@@ -8736,14 +8498,14 @@ Navbar logo
       color: #206bc4;
       text-decoration: none;
       background: #fefeff;
-      border-color: rgba(53, 64, 82, 0.16); }
+      border-color: rgba(123, 126, 136, 0.24); }
   .calendar-date .date-today {
     color: #206bc4;
-    border-color: rgba(53, 64, 82, 0.16); }
+    border-color: rgba(123, 126, 136, 0.24); }
 
 .calendar-range {
   position: relative; }
-  .calendar-range::before {
+  .calendar-range:before {
     position: absolute;
     top: 50%;
     right: 0;
@@ -8756,14 +8518,17 @@ Navbar logo
     color: #fff;
     background: #206bc4;
     border-color: #206bc4; }
-  .calendar-range.range-start::before {
+  .calendar-range.range-start:before {
     left: 50%; }
-  .calendar-range.range-end::before {
+  .calendar-range.range-end:before {
     right: 50%; }
 
 .card {
-  margin-bottom: 1.5rem;
-  box-shadow: rgba(53, 64, 82, 0.04) 0 2px 4px 0; }
+  margin-bottom: 1.25rem;
+  box-shadow: rgba(48, 54, 69, 0.04) 0 2px 4px 0; }
+  @media (max-width: 75.23rem) {
+    .card {
+      margin-bottom: 0.75rem; } }
   @media print {
     .card {
       border: none;
@@ -8773,13 +8538,7 @@ Navbar logo
     transition: .3s box-shadow; }
     a.card:hover {
       text-decoration: none;
-      box-shadow: rgba(53, 64, 82, 0.16) 0 2px 16px 0; }
-
-.card-sm .card-body {
-  padding: 1rem; }
-
-.card-md .card-body {
-  padding: 3rem; }
+      box-shadow: rgba(48, 54, 69, 0.16) 0 2px 16px 0; }
 
 .card-group {
   margin-bottom: 1.5rem; }
@@ -8793,7 +8552,7 @@ Navbar logo
 .card-active {
   position: relative;
   background-color: rgba(32, 107, 196, 0.03); }
-  .card-active::before {
+  .card-active:before {
     position: absolute;
     top: -1px;
     right: -1px;
@@ -8821,7 +8580,7 @@ Navbar logo
 
 .card-stacked {
   position: relative; }
-  .card-stacked::after {
+  .card-stacked:after {
     position: absolute;
     top: -5px;
     right: 5px;
@@ -8829,25 +8588,25 @@ Navbar logo
     height: 5px;
     content: "";
     background: #ffffff;
-    border: 1px solid rgba(53, 64, 82, 0.16);
+    border: 1px solid rgba(123, 126, 136, 0.24);
     border-radius: 3px 3px 0 0; }
 
 .card-cover {
   position: relative;
   padding: 1.25rem 1.25rem;
   background: #666666 no-repeat center/cover; }
-  .card-cover::before {
+  .card-cover:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     content: "";
-    background: rgba(53, 64, 82, 0.4); }
-  .card-cover:first-child, .card-cover:first-child::before {
+    background: rgba(48, 54, 69, 0.24); }
+  .card-cover:first-child, .card-cover:first-child:before {
     border-radius: 3px 3px 0 0; }
 
-.card-cover-blurred::before {
+.card-cover-blurred:before {
   -webkit-backdrop-filter: blur(2px);
   backdrop-filter: blur(2px); }
 
@@ -8870,7 +8629,7 @@ Navbar logo
   flex: 1; }
 
 .card-footer {
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .card-progress {
   height: .25rem; }
@@ -8880,7 +8639,7 @@ Navbar logo
     border-radius: 2px 2px 0 0; }
 
 .card-meta {
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .card-title {
   display: block;
@@ -8897,17 +8656,25 @@ Navbar logo
   margin-top: -1.25rem;
   margin-bottom: 0.625rem;
   font-size: 87.5%;
-  color: #7e8590; }
+  color: #7b7e88; }
+
+.card-sm .card-body {
+  padding: 1rem; }
+
+@media (min-width: 48rem) {
+  .card-md .card-body {
+    padding: 2.5rem; } }
+
+@media (min-width: 48rem) {
+  .card-lg .card-body {
+    padding: 4rem; } }
 
 @media print {
   .card-body {
     padding: 0; } }
 
-.card-body > :last-child {
-  margin-bottom: 0; }
-
 .card-body + .card-body {
-  border-top: 1px solid rgba(53, 64, 82, 0.16); }
+  border-top: 1px solid rgba(123, 126, 136, 0.24); }
 
 .card-body-scrollable {
   overflow: auto; }
@@ -8925,11 +8692,11 @@ Card optinos
   display: inline-block;
   min-width: 1rem;
   margin-left: .25rem;
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .card-drop {
   line-height: 1;
-  color: #7e8590; }
+  color: #7b7e88; }
   .card-drop .icon {
     width: 1.5rem;
     height: 1.5rem;
@@ -8972,7 +8739,7 @@ Card table
     border-top: 0; }
   .card-table tr td,
   .card-table tr th {
-    border-top: 1px solid rgba(53, 64, 82, 0.16); }
+    border-top: 1px solid rgba(123, 126, 136, 0.24); }
     .card-table tr td:first-child,
     .card-table tr th:first-child {
       padding-left: 1.25rem; }
@@ -8980,7 +8747,7 @@ Card table
     .card-table tr th:last-child {
       padding-right: 1.25rem; }
   .card-body + .card-table {
-    border-top: 1px solid rgba(53, 64, 82, 0.16); }
+    border-top: 1px solid rgba(123, 126, 136, 0.24); }
 
 /*
 Card code
@@ -9004,26 +8771,17 @@ Card chart
   z-index: 1;
   height: 3.5rem; }
 
-/*
-Card profile
+/**
+Card avatar
  */
-.card-profile .card-header {
-  height: 9rem;
-  background-size: cover; }
-
-.card-profile-img {
-  max-width: 6rem;
-  margin-top: -5rem;
-  margin-bottom: 1rem;
-  border: 3px solid #ffffff;
-  border-radius: 100%;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
+.card-avatar {
+  box-shadow: 0 0 0 0.5rem #ffffff; }
 
 /*
 Card list group
  */
 .card-body + .card-list-group {
-  border-top: 1px solid rgba(53, 64, 82, 0.16); }
+  border-top: 1px solid rgba(123, 126, 136, 0.24); }
 
 .card-list-group .list-group-item {
   padding-right: 1.25rem;
@@ -9046,11 +8804,11 @@ Card tabs
     z-index: 1000;
     border-bottom: 0; }
     .card-tabs .nav-tabs .nav-link {
-      background: rgba(53, 64, 82, 0.02);
-      border: 1px solid rgba(53, 64, 82, 0.16);
+      background: rgba(48, 54, 69, 0.032);
+      border: 1px solid rgba(123, 126, 136, 0.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(53, 64, 82, 0.16); }
+        border-color: rgba(123, 126, 136, 0.24); }
       .card-tabs .nav-tabs .nav-link.active {
         background: #ffffff; }
     .card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link {
@@ -9066,13 +8824,17 @@ Card tabs
       margin-bottom: 0; }
       .card-tabs .nav-tabs-bottom .nav-item .nav-link {
         border-top-width: 0;
-        border-bottom: 1px solid rgba(53, 64, 82, 0.16);
+        border-bottom: 1px solid rgba(123, 126, 136, 0.24);
         border-top-left-radius: 0;
         border-top-right-radius: 0; }
   .card-tabs .card {
     margin: 0;
     border-top-left-radius: 0; }
 
+.close:focus {
+  outline: none;
+  color: #303645; }
+
 .dropdown-menu {
   min-width: 12rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
@@ -9088,13 +8850,19 @@ Card tabs
     opacity: .5;
     text-align: center;
     stroke-width: 2px; }
+  .dropdown-menu.card {
+    padding: 0;
+    min-width: 25rem;
+    display: none; }
+    .dropdown-menu.card.show {
+      display: flex; }
 
 .dropdown-header {
   font-size: 0.7333333em;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #7e8590;
+  color: #7b7e88;
   padding-bottom: .25rem;
   pointer-events: none; }
 
@@ -9111,7 +8879,7 @@ Card tabs
 
 .dropdown-menu-arrow {
   margin-top: .75rem; }
-  .dropdown-menu-arrow::before {
+  .dropdown-menu-arrow:before {
     content: "";
     position: absolute;
     top: -4px;
@@ -9126,7 +8894,7 @@ Card tabs
     border-color: inherit;
     z-index: -1;
     clip: rect(0px, 9px, 9px, 0px); }
-  .dropdown-menu-arrow.dropdown-menu-right::before {
+  .dropdown-menu-arrow.dropdown-menu-right:before {
     right: 12px;
     left: auto; }
 
@@ -9134,6 +8902,9 @@ Card tabs
   margin-top: calc(-0.5rem - 1px);
   margin-left: 0; }
 
+.dropright .dropdown-toggle:after {
+  margin-left: auto; }
+
 .empty {
   display: flex;
   flex-direction: column;
@@ -9142,7 +8913,7 @@ Card tabs
   height: 100%;
   padding: 1rem;
   text-align: center; }
-  @media (min-width: 768px) {
+  @media (min-width: 48rem) {
     .empty {
       padding: 3rem; } }
   .empty .empty-icon {
@@ -9157,11 +8928,27 @@ Card tabs
     margin-top: 1.5rem; }
 
 .empty-bordered {
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .col-separator {
-  border-left: 1px solid rgba(53, 64, 82, 0.16); }
+  border-left: 1px solid rgba(123, 126, 136, 0.24); }
+
+.container-tight {
+  width: 100%;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 30rem; }
+
+.container-narrow {
+  width: 100%;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 45rem; }
 
 .row-0 {
   margin-right: 0;
@@ -9221,13 +9008,29 @@ Card tabs
   .row-deck > [class*="col-"] .card {
     flex: 1 1 auto; }
 
+.row-cards {
+  margin-left: -0.625rem;
+  margin-right: -0.625rem; }
+  .row-cards .row-cards {
+    flex: 1; }
+  .row-cards > * {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem; }
+  @media (max-width: 75.23rem) {
+    .row-cards {
+      margin-left: -0.375rem;
+      margin-right: -0.375rem; }
+      .row-cards > * {
+        padding-left: 0.375rem;
+        padding-right: 0.375rem; } }
+
 .highlight {
   max-height: 40rem;
   margin: 1rem 0 2rem;
   overflow: auto;
   font-size: 0.9375rem;
   background: #fcfcfc;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
   .highlight pre {
     height: 100%;
@@ -9360,15 +9163,15 @@ Card tabs
   .highlight .css .o + .nt,
   .highlight .css .nt + .nt {
     color: #999; }
-  .highlight .language-bash::before,
-  .highlight .language-sh::before {
+  .highlight .language-bash:before,
+  .highlight .language-sh:before {
     color: #009;
     content: "$ ";
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none; }
-  .highlight .language-powershell::before {
+  .highlight .language-powershell:before {
     color: #009;
     content: "PM> ";
     -webkit-user-select: none;
@@ -9378,7 +9181,7 @@ Card tabs
 
 .highlight-dark, .card-code .highlight {
   color: #ffffff;
-  background: #354052;
+  background: #303645;
   border-color: transparent;
   /* Comment */
   /* Error */
@@ -9603,8 +9406,8 @@ Card tabs
   justify-content: center;
   height: 4rem;
   text-align: center;
-  border-right: 1px solid rgba(53, 64, 82, 0.16);
-  border-bottom: 1px solid rgba(53, 64, 82, 0.16); }
+  border-right: 1px solid rgba(123, 126, 136, 0.24);
+  border-bottom: 1px solid rgba(123, 126, 136, 0.24); }
   .icons-list-item i {
     font-size: 1.25rem; }
 
@@ -9623,18 +9426,27 @@ Form label
 .form-label-description {
   float: right;
   font-weight: 400;
-  color: #7e8590;
+  color: #7b7e88;
   line-height: 1.8285714;
   font-size: 87.5%; }
 
+/**
+Form hint
+ */
+.form-hint {
+  font-size: 87.5%;
+  color: #7b7e88;
+  margin: 0 0 .75rem;
+  line-height: 1.3333334; }
+
 /**
 Form control
  */
 .form-control:-webkit-autofill {
-  box-shadow: 0 0 0 1000px #fff inset; }
+  box-shadow: 0 0 0 1000px #ffffff inset; }
 
 .form-control:disabled, .form-control.disabled {
-  color: #7e8590;
+  color: #7b7e88;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -9647,23 +9459,30 @@ Form control
   background-color: #f5f7fb;
   border-color: transparent; }
 
+.form-control-rounded {
+  border-radius: 10rem; }
+
+.form-control-flush {
+  padding: 0;
+  background: none !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, 0.02);
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  background: rgba(48, 54, 69, 0.032);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px; }
 
 .form-required {
   color: #fa4654; }
 
-.custom-control-label::before {
-  background: transparent;
-  border: 1px solid rgba(53, 64, 82, 0.16); }
-
 /**
 Form help
  */
@@ -9675,7 +9494,7 @@ Form help
   width: 1.125rem;
   height: 1.125rem;
   font-size: .75rem;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -9683,23 +9502,35 @@ Form help
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  background: #f1f3f8;
+  background: #f1f3f7;
   border-radius: 50%;
   transition: .3s background-color, .3s color; }
   .form-help:hover, .form-help[aria-describedby] {
-    color: #fff;
+    color: #ffffff;
     background: #206bc4; }
 
 /**
 Form switch
  */
-.form-check-input {
-  color: #206bc4; }
-  .form-check-input:checked {
-    background-color: currentColor; }
+.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 .form-check-input:not(:checked) ~ .form-check-label {
-  color: #7e8590; }
+.form-check-input {
+  margin-top: .25rem; }
+
+.form-check-label {
+  line-height: 1.3333334;
+  padding: .125rem 0; }
+
+.form-check-description {
+  color: #7b7e88;
+  font-size: 0.8666667em;
+  line-height: 1.3333334; }
 
 /**
 Input group
@@ -9710,6 +9541,50 @@ Input group
 .input-group-append .input-group-text {
   border-left: 0; }
 
+.input-group-link {
+  font-size: 0.8666667em; }
+
+.input-group-flat:focus-within {
+  box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.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(123, 126, 136, 0.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; }
+  .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; }
+
+/**
+Upload files
+ */
+.form-file-button {
+  margin-left: 0;
+  border-left: 0; }
+
 /**
 Icon input
  */
@@ -9729,11 +9604,9 @@ Icon input
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
-  color: #7e8590;
-  pointer-events: none; }
-  .input-icon-addon svg {
-    width: 1rem;
-    height: 1rem; }
+  color: #7b7e88;
+  pointer-events: none;
+  font-size: 1.2em; }
   .input-icon-addon:last-child {
     right: 0;
     left: auto; }
@@ -9758,25 +9631,27 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: #fff;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
-  .form-colorinput-color::before {
+  .form-colorinput-color:before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
-    background: no-repeat center center/0.8rem;
+    background: no-repeat center center/0.75rem;
     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'/%3e%3c/svg%3e");
     opacity: 0;
     transition: .3s opacity; }
-    .form-colorinput-input:checked ~ .form-colorinput-color::before {
+    .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 0.2rem rgba(32, 107, 196, 0.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='%23303645' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/%3e%3c/svg%3e"); }
 
 /**
 Image check
@@ -9793,20 +9668,20 @@ Image check
 
 .form-imagecheck-figure {
   position: relative;
-  display: flex;
+  display: block;
   margin: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   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(53, 64, 82, 0.16); }
-  .form-imagecheck-figure::before {
+    border-color: rgba(123, 126, 136, 0.24); }
+  .form-imagecheck-figure:before {
     position: absolute;
     top: .25rem;
     left: .25rem;
@@ -9822,19 +9697,20 @@ Image check
     -ms-user-select: none;
     user-select: none;
     background: #ffffff;
-    border: 1px solid rgba(53, 64, 82, 0.16);
+    border: 1px solid rgba(123, 126, 136, 0.24);
     border-radius: 3px;
     transition: .3s opacity; }
-    .form-imagecheck-input:checked ~ .form-imagecheck-figure::before {
+    .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'/%3e%3c/svg%3e");
       background-repeat: no-repeat;
       background-position: center center;
-      background-size: 0.8rem;
-      border-color: rgba(53, 64, 82, 0.16); }
+      background-size: 0.75rem;
+      border-color: rgba(123, 126, 136, 0.24); }
 
 .form-imagecheck-image {
   max-width: 100%;
+  display: block;
   opacity: .64;
   transition: .3s opacity; }
   .form-imagecheck-image:first-child {
@@ -9851,20 +9727,21 @@ Image check
 .form-imagecheck-caption {
   padding: .25rem;
   font-size: 0.8203125rem;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
   transition: .3s color; }
   .form-imagecheck:hover .form-imagecheck-caption,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure .form-imagecheck-caption,
   .form-imagecheck-input:checked ~ .form-imagecheck-figure .form-imagecheck-caption {
-    color: #354052; }
+    color: #303645; }
 
 /*
 Select group
  */
 .form-selectgroup {
   display: inline-flex;
-  margin: 0 -.5rem -.5rem 0; }
+  margin: 0 -.5rem -.5rem 0;
+  flex-wrap: wrap; }
 
 .form-selectgroup-vertical {
   flex-direction: column; }
@@ -9872,7 +9749,6 @@ Select group
 .form-selectgroup-item {
   display: block;
   position: relative;
-  flex-grow: 1;
   margin: 0 .5rem .5rem 0; }
 
 .form-selectgroup-input {
@@ -9889,7 +9765,7 @@ Select group
   padding: 0.375rem 0.75rem;
   font-size: 0.9375rem;
   line-height: 1.4666667;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
   cursor: pointer;
   -webkit-user-select: none;
@@ -9897,19 +9773,19 @@ Select group
   -ms-user-select: none;
   user-select: none;
   background: rgba(255, 255, 255, 0.064);
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.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; }
+    color: #303645; }
 
 .form-selectgroup-check {
   display: inline-block;
   width: 1rem;
   height: 1rem;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   vertical-align: middle; }
   .form-selectgroup-input[type="checkbox"] + .form-selectgroup-box .form-selectgroup-check {
     border-radius: 3px; }
@@ -9919,8 +9795,8 @@ Select group
     background-color: #206bc4;
     background-repeat: no-repeat;
     background-position: center center;
-    background-size: 0.8rem;
-    border-color: rgba(53, 64, 82, 0.16); }
+    background-size: 0.75rem;
+    border-color: rgba(123, 126, 136, 0.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'/%3e%3c/svg%3e"); }
   .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-box .form-selectgroup-check {
@@ -9952,7 +9828,7 @@ Alternate version of form select group
   transition: .3s opacity; }
 
 .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box {
-  color: #354052; }
+  color: #303645; }
   .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-box-content {
     opacity: 1; }
 
@@ -9979,13 +9855,12 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 [type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none; }
 
-.form-check-input {
-  margin-top: .25rem;
-  transition: .3s background-position, .3s background-color; }
+.form-control.is-valid-lite, .form-control.is-invalid-lite {
+  border-color: rgba(123, 126, 136, 0.24); }
 
 .legend {
   display: inline-block;
-  background: #e9ecf1;
+  background: #e9ebf0;
   width: .75em;
   height: .75em;
   border-radius: 3px; }
@@ -10001,7 +9876,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(53, 64, 82, 0.16);
+  border-top: 1px solid rgba(123, 126, 136, 0.24);
   margin-top: -1px; }
   .list-bordered .list-item:first-child, .list-row .list-item:first-child {
     border-top: none; }
@@ -10036,7 +9911,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .list-timeline-icon {
   position: absolute;
@@ -10049,7 +9924,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   height: 2.5rem;
   color: #ffffff;
   text-align: center;
-  background: #7e8590;
+  background: #7b7e88;
   border-radius: 50%; }
   .list-timeline-icon .icon {
     width: 1rem;
@@ -10063,7 +9938,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   margin-left: 3.5rem; }
 
 @media screen and (min-width: 768px) {
-  .list-timeline:not(.list-timeline-simple)::before {
+  .list-timeline:not(.list-timeline-simple):before {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -10097,7 +9972,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
     border: 0;
     border-radius: 3px; }
     .list-group-transparent .list-group-item .icon {
-      color: #7e8590; }
+      color: #7b7e88; }
     .list-group-transparent .list-group-item.active {
       font-weight: 600;
       color: inherit;
@@ -10112,7 +9987,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(53, 64, 82, 0.16); }
+    border-top: 1px solid rgba(123, 126, 136, 0.24); }
 
 @-webkit-keyframes loader {
   from {
@@ -10133,7 +10008,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   height: 2.5rem;
   color: #206bc4;
   vertical-align: middle; }
-  .loader::after {
+  .loader:after {
     position: absolute;
     top: 0;
     left: 0;
@@ -10169,37 +10044,51 @@ Dimmer
     pointer-events: none;
     opacity: .1; }
 
-.col-login {
-  max-width: 24rem; }
+.modal-header,
+.modal-body {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem; }
 
-.modal-backdrop {
+.modal-header .close {
+  font-size: 1rem;
+  padding-right: 1.25rem;
+  margin-right: -1.25rem; }
+
+.modal-title {
+  font-size: 1.2em;
+  font-weight: 600;
+  line-height: 1.3333333; }
+
+.modal-footer {
+  padding-left: 1rem;
+  padding-right: 1rem; }
+
+.modal-footer {
+  background: rgba(48, 54, 69, 0.032); }
+
+.modal-blur {
   -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-  background: rgba(53, 64, 82, 0.4); }
-
-.modal-content {
-  border: 1px solid rgba(53, 64, 82, 0.16);
-  border-radius: 3px; }
+  backdrop-filter: blur(2px); }
 
 .nav-tabs .icon {
-  color: #7e8590; }
+  color: #7b7e88; }
 
 .nav-tabs .nav-link {
   padding: 0.75rem 1.25rem;
   line-height: 20px;
-  color: #7e8590;
+  color: #7b7e88;
   cursor: pointer;
   background: transparent;
   border: none;
   border-bottom: 1px solid transparent;
   transition: .3s color, .3s border-color; }
   .nav-tabs .nav-link:hover {
-    color: #354052;
+    color: #303645;
     border-color: transparent; }
   .nav-tabs .nav-link.disabled {
-    color: rgba(126, 133, 144, 0.2); }
+    color: rgba(123, 126, 136, 0.2); }
   .nav-tabs .nav-link.active {
-    color: #354052;
+    color: #303645;
     background: inherit;
     border-color: transparent;
     border-bottom-color: #206bc4; }
@@ -10223,7 +10112,7 @@ Dimmer
 
 .stars {
   display: inline-flex;
-  color: #dee1e7;
+  color: #dde0e5;
   font-size: 0.8666667em; }
   .stars .star:not(:first-child) {
     margin-left: .25rem; }
@@ -10252,19 +10141,19 @@ Dimmer
 .page-item-subtitle {
   margin-bottom: 2px;
   font-size: 12px;
-  color: #7e8590;
+  color: #7b7e88;
   text-transform: uppercase; }
   .page-item.disabled .page-item-subtitle {
-    color: rgba(126, 133, 144, 0.5); }
+    color: rgba(123, 126, 136, 0.5); }
 
 .page-item-title {
   font-size: 1.2em;
   font-weight: 400;
-  color: #354052; }
+  color: #303645; }
   .page-link:hover .page-item-title {
     color: #206bc4; }
   .page-item.disabled .page-item-title {
-    color: rgba(126, 133, 144, 0.5); }
+    color: rgba(123, 126, 136, 0.5); }
 
 @-webkit-keyframes progress-indeterminate {
   0% {
@@ -10287,7 +10176,7 @@ Dimmer
 .progress {
   position: relative;
   width: 100%;
-  line-height: 0.75rem;
+  line-height: 0.5rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; }
@@ -10307,7 +10196,7 @@ Dimmer
 .progress-bar {
   height: 100%; }
 
-.progress-bar-indeterminate::after, .progress-bar-indeterminate::before {
+.progress-bar-indeterminate:after, .progress-bar-indeterminate:before {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -10316,7 +10205,7 @@ Dimmer
   background-color: inherit;
   will-change: left, right; }
 
-.progress-bar-indeterminate::before {
+.progress-bar-indeterminate:before {
   -webkit-animation: progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   animation: progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
 
@@ -10334,7 +10223,7 @@ Dimmer
   text-transform: uppercase;
   background: #206bc4;
   border-color: #206bc4; }
-  .ribbon::before {
+  .ribbon:before {
     position: absolute;
     right: 0;
     bottom: 100%;
@@ -10392,25 +10281,25 @@ Dimmer
   .ribbon.bg-white-lt {
     border-color: white !important; }
   .ribbon.bg-gray {
-    border-color: #aeb3bc; }
+    border-color: #acb0b8; }
   .ribbon.bg-gray-lt {
-    border-color: #eff0f2 !important; }
+    border-color: #eeeff1 !important; }
   .ribbon.bg-gray-dark {
-    border-color: #5f6877; }
+    border-color: #5b606d; }
   .ribbon.bg-gray-dark-lt {
-    border-color: #dfe1e4 !important; }
+    border-color: #dedfe2 !important; }
   .ribbon.bg-azure {
     border-color: #45aaf2; }
   .ribbon.bg-azure-lt {
     border-color: #daeefc !important; }
   .ribbon.bg-lime {
-    border-color: #7bd235; }
+    border-color: #94d82d; }
   .ribbon.bg-lime-lt {
-    border-color: #e5f6d7 !important; }
+    border-color: #eaf7d5 !important; }
   .ribbon.bg-dark {
-    border-color: #354052; }
+    border-color: #303645; }
   .ribbon.bg-dark-lt {
-    border-color: #d7d9dc !important; }
+    border-color: #d6d7da !important; }
   .ribbon .icon {
     width: 1rem;
     height: 1rem; }
@@ -10420,7 +10309,7 @@ Dimmer
   right: .75rem;
   width: 2rem;
   padding: .25rem 0; }
-  .ribbon-top::before {
+  .ribbon-top:before {
     top: 0;
     right: 100%;
     bottom: auto;
@@ -10430,7 +10319,7 @@ Dimmer
   .ribbon-top.ribbon-left {
     right: auto;
     left: .75rem; }
-    .ribbon-top.ribbon-left::before {
+    .ribbon-top.ribbon-left:before {
       top: 0;
       right: 100%;
       left: auto; }
@@ -10438,7 +10327,7 @@ Dimmer
 .ribbon-left {
   right: auto;
   left: -0.25rem; }
-  .ribbon-left::before {
+  .ribbon-left:before {
     top: auto;
     bottom: 100%;
     left: 0;
@@ -10452,7 +10341,7 @@ Dimmer
 
 .ribbon-bookmark {
   padding-left: .25rem; }
-  .ribbon-bookmark::after {
+  .ribbon-bookmark:after {
     position: absolute;
     top: 0;
     right: 100%;
@@ -10468,7 +10357,7 @@ Dimmer
   .ribbon-bookmark.ribbon-left {
     padding-right: .5rem;
     padding-left: .5rem; }
-    .ribbon-bookmark.ribbon-left::after {
+    .ribbon-bookmark.ribbon-left:after {
       right: auto;
       left: 100%;
       border-right-color: transparent;
@@ -10478,7 +10367,7 @@ Dimmer
     padding-right: 0;
     padding-bottom: .25rem;
     padding-left: 0; }
-    .ribbon-bookmark.ribbon-top::after {
+    .ribbon-bookmark.ribbon-top:after {
       top: 100%;
       right: 0;
       left: 0;
@@ -10498,9 +10387,9 @@ Dimmer
   padding: 0 .25rem;
   font-size: 0.9375rem;
   font-weight: 600;
-  color: #7e8590;
+  color: #7b7e88;
   text-align: center;
-  background: #f1f3f8;
+  background: #f1f3f7;
   border-radius: 3px; }
   .stamp .icon {
     font-size: 1.25rem;
@@ -10515,146 +10404,146 @@ Dimmer
   list-style: none; }
   .steps .step-item {
     padding-top: calc(0.5rem + 4px); }
-    .steps .step-item::after {
+    .steps .step-item:after {
       top: calc(0.25rem + 2px);
       height: 2px; }
-    .steps .step-item::before {
+    .steps .step-item:before {
       width: 0.5rem;
       height: 0.5rem; }
-  .steps .step-item::after, .steps .step-item::before {
+  .steps .step-item:after, .steps .step-item:before {
     color: #ffffff;
     background: #206bc4; }
-  .steps .step-item.active::before {
+  .steps .step-item.active:before {
     color: inherit;
     border-color: #206bc4; }
 
-.steps-blue .step-item::after, .steps-blue .step-item::before {
+.steps-blue .step-item:after, .steps-blue .step-item:before {
   color: #ffffff;
   background: #206bc4; }
 
-.steps-blue .step-item.active::before {
+.steps-blue .step-item.active:before {
   color: inherit;
   border-color: #206bc4; }
 
-.steps-indigo .step-item::after, .steps-indigo .step-item::before {
+.steps-indigo .step-item:after, .steps-indigo .step-item:before {
   color: #ffffff;
   background: #6574cd; }
 
-.steps-indigo .step-item.active::before {
+.steps-indigo .step-item.active:before {
   color: inherit;
   border-color: #6574cd; }
 
-.steps-purple .step-item::after, .steps-purple .step-item::before {
+.steps-purple .step-item:after, .steps-purple .step-item:before {
   color: #ffffff;
   background: #a55eea; }
 
-.steps-purple .step-item.active::before {
+.steps-purple .step-item.active:before {
   color: inherit;
   border-color: #a55eea; }
 
-.steps-pink .step-item::after, .steps-pink .step-item::before {
+.steps-pink .step-item:after, .steps-pink .step-item:before {
   color: #ffffff;
   background: #f66d9b; }
 
-.steps-pink .step-item.active::before {
+.steps-pink .step-item.active:before {
   color: inherit;
   border-color: #f66d9b; }
 
-.steps-red .step-item::after, .steps-red .step-item::before {
+.steps-red .step-item:after, .steps-red .step-item:before {
   color: #ffffff;
   background: #fa4654; }
 
-.steps-red .step-item.active::before {
+.steps-red .step-item.active:before {
   color: inherit;
   border-color: #fa4654; }
 
-.steps-orange .step-item::after, .steps-orange .step-item::before {
+.steps-orange .step-item:after, .steps-orange .step-item:before {
   color: #ffffff;
   background: #ff922b; }
 
-.steps-orange .step-item.active::before {
+.steps-orange .step-item.active:before {
   color: inherit;
   border-color: #ff922b; }
 
-.steps-yellow .step-item::after, .steps-yellow .step-item::before {
+.steps-yellow .step-item:after, .steps-yellow .step-item:before {
   color: #ffffff;
   background: #fab005; }
 
-.steps-yellow .step-item.active::before {
+.steps-yellow .step-item.active:before {
   color: inherit;
   border-color: #fab005; }
 
-.steps-green .step-item::after, .steps-green .step-item::before {
+.steps-green .step-item:after, .steps-green .step-item:before {
   color: #ffffff;
   background: #5eba00; }
 
-.steps-green .step-item.active::before {
+.steps-green .step-item.active:before {
   color: inherit;
   border-color: #5eba00; }
 
-.steps-teal .step-item::after, .steps-teal .step-item::before {
+.steps-teal .step-item:after, .steps-teal .step-item:before {
   color: #ffffff;
   background: #2bcbba; }
 
-.steps-teal .step-item.active::before {
+.steps-teal .step-item.active:before {
   color: inherit;
   border-color: #2bcbba; }
 
-.steps-cyan .step-item::after, .steps-cyan .step-item::before {
+.steps-cyan .step-item:after, .steps-cyan .step-item:before {
   color: #ffffff;
   background: #17a2b8; }
 
-.steps-cyan .step-item.active::before {
+.steps-cyan .step-item.active:before {
   color: inherit;
   border-color: #17a2b8; }
 
-.steps-white .step-item::after, .steps-white .step-item::before {
+.steps-white .step-item:after, .steps-white .step-item:before {
   color: #ffffff;
   background: #ffffff; }
 
-.steps-white .step-item.active::before {
+.steps-white .step-item.active:before {
   color: inherit;
   border-color: #ffffff; }
 
-.steps-gray .step-item::after, .steps-gray .step-item::before {
+.steps-gray .step-item:after, .steps-gray .step-item:before {
   color: #ffffff;
-  background: #aeb3bc; }
+  background: #acb0b8; }
 
-.steps-gray .step-item.active::before {
+.steps-gray .step-item.active:before {
   color: inherit;
-  border-color: #aeb3bc; }
+  border-color: #acb0b8; }
 
-.steps-gray-dark .step-item::after, .steps-gray-dark .step-item::before {
+.steps-gray-dark .step-item:after, .steps-gray-dark .step-item:before {
   color: #ffffff;
-  background: #5f6877; }
+  background: #5b606d; }
 
-.steps-gray-dark .step-item.active::before {
+.steps-gray-dark .step-item.active:before {
   color: inherit;
-  border-color: #5f6877; }
+  border-color: #5b606d; }
 
-.steps-azure .step-item::after, .steps-azure .step-item::before {
+.steps-azure .step-item:after, .steps-azure .step-item:before {
   color: #ffffff;
   background: #45aaf2; }
 
-.steps-azure .step-item.active::before {
+.steps-azure .step-item.active:before {
   color: inherit;
   border-color: #45aaf2; }
 
-.steps-lime .step-item::after, .steps-lime .step-item::before {
+.steps-lime .step-item:after, .steps-lime .step-item:before {
   color: #ffffff;
-  background: #7bd235; }
+  background: #94d82d; }
 
-.steps-lime .step-item.active::before {
+.steps-lime .step-item.active:before {
   color: inherit;
-  border-color: #7bd235; }
+  border-color: #94d82d; }
 
-.steps-dark .step-item::after, .steps-dark .step-item::before {
+.steps-dark .step-item:after, .steps-dark .step-item:before {
   color: #ffffff;
-  background: #354052; }
+  background: #303645; }
 
-.steps-dark .step-item.active::before {
+.steps-dark .step-item.active:before {
   color: inherit;
-  border-color: #354052; }
+  border-color: #303645; }
 
 .step-item {
   position: relative;
@@ -10668,13 +10557,13 @@ Dimmer
     cursor: pointer; }
     a.step-item:hover {
       color: inherit; }
-  .step-item:not(:first-child)::after {
+  .step-item:not(:first-child):after {
     position: absolute;
     left: -50%;
     width: 100%;
     content: "";
     transform: translateY(-50%); }
-  .step-item::before {
+  .step-item:before {
     position: absolute;
     top: 0;
     left: 50%;
@@ -10687,49 +10576,49 @@ Dimmer
     transform: translateX(-50%); }
   .step-item.active {
     font-weight: 600; }
-    .step-item.active::before {
+    .step-item.active:before {
       background: #fff; }
     .step-item.active ~ .step-item {
-      color: #7e8590; }
-      .step-item.active ~ .step-item::after, .step-item.active ~ .step-item::before {
+      color: #7b7e88; }
+      .step-item.active ~ .step-item:after, .step-item.active ~ .step-item:before {
         background: #f3f5f5; }
-      .step-item.active ~ .step-item::before {
-        color: #7e8590 !important; }
+      .step-item.active ~ .step-item:before {
+        color: #7b7e88 !important; }
 
 .steps-counter {
   counter-reset: steps; }
   .steps-counter .step-item {
     padding-top: calc(1.5rem + 4px); }
-    .steps-counter .step-item::after {
+    .steps-counter .step-item:after {
       top: calc(0.75rem + 2px);
       height: 2px; }
-    .steps-counter .step-item::before {
+    .steps-counter .step-item:before {
       width: 1.5rem;
       height: 1.5rem; }
   .steps-counter .step-item {
     counter-increment: steps; }
-    .steps-counter .step-item::before {
+    .steps-counter .step-item:before {
       font-size: 1rem;
       line-height: 1.5rem;
       content: counter(steps); }
-    .steps-counter .step-item.active ~ .step-item::before {
+    .steps-counter .step-item.active ~ .step-item:before {
       background: #fff; }
 
 .table, .markdown table {
   color: inherit; }
   .table thead th, .markdown table thead th {
-    background: rgba(53, 64, 82, 0.02);
+    background: rgba(48, 54, 69, 0.032);
     border-width: 1px;
     font-size: 0.7333333em;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .04em;
-    color: #7e8590; }
+    color: #7b7e88; }
     @media print {
       .table thead th, .markdown table thead th {
         background: transparent; } }
   .table th, .markdown table th {
-    color: #7e8590; }
+    color: #7b7e88; }
 
 .table-nowrap th,
 .table-nowrap td {
@@ -10778,33 +10667,40 @@ Hr text
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #7e8590; }
-  .hr-text::after, .hr-text::before {
+  color: #7b7e88;
+  height: 1px; }
+  .hr-text:after, .hr-text:before {
     flex: 1 1 auto;
     height: 1px;
     background-color: currentColor;
     opacity: 0.1; }
-  .hr-text::before {
+  .hr-text:before {
+    content: "";
     margin-right: .5rem; }
-  .hr-text::after {
+  .hr-text:after {
     content: "";
     margin-left: .5rem; }
   .hr-text > *:first-child {
     padding-right: .5rem;
     padding-left: 0;
-    color: #7e8590; }
-  .hr-text.hr-text-center::before {
-    content: ""; }
-  .hr-text.hr-text-center > *:first-child {
+    color: #7b7e88; }
+  .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 {
+  .hr-text.hr-text-right:before {
     content: ""; }
-  .hr-text.hr-text-right::after {
+  .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; }
@@ -10839,14 +10735,14 @@ b {
 
 blockquote {
   padding-left: 1rem;
-  color: #7e8590;
-  border-left: 2px solid rgba(53, 64, 82, 0.16); }
+  color: #7b7e88;
+  border-left: 2px solid rgba(123, 126, 136, 0.24); }
   blockquote p {
     margin-bottom: 1rem; }
   blockquote cite {
     display: block;
     text-align: right; }
-    blockquote cite::before {
+    blockquote cite:before {
       content: "— "; }
 
 dl dd:last-child {
@@ -10871,7 +10767,7 @@ pre {
   -ms-hyphens: none;
   hyphens: none;
   line-height: 1.45;
-  color: #5f6877;
+  color: #5b606d;
   -moz-tab-size: 3;
   -o-tab-size: 3;
   tab-size: 3;
@@ -10892,6 +10788,13 @@ Selection
   color: #fff;
   background-color: #307fdd; }
 
+/**
+Links
+ */
+[class^="link-"].disabled, [class*=" link-"].disabled {
+  color: #acb0b8;
+  pointer-events: none; }
+
 /**
 Subheader
  */
@@ -10900,7 +10803,7 @@ Subheader
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #7e8590; }
+  color: #7b7e88; }
 
 /**
 Antialiasing
@@ -10916,14 +10819,17 @@ Antialiasing
 /**
 Markdown
  */
-.markdown {
-  font-size: 1rem; }
-  .markdown > :first-child {
-    margin-top: 0; }
-  .markdown > :last-child {
-    margin-bottom: 0; }
-  .markdown > h1, .markdown > .h1, .markdown > h2, .markdown > .h2, .markdown > h3, .markdown > .h3, .markdown > h4, .markdown > .h4, .markdown > h5, .markdown > .h5, .markdown > h6, .markdown > .h6 {
-    margin-top: 2rem; }
+.markdown > :first-child {
+  margin-top: 0; }
+
+.markdown > :last-child {
+  margin-bottom: 0; }
+
+.markdown > h1, .markdown > .h1, .markdown > h2, .markdown > .h2, .markdown > h3, .markdown > .h3, .markdown > h4, .markdown > .h4, .markdown > h5, .markdown > .h5, .markdown > h6, .markdown > .h6 {
+  margin-top: 2rem; }
+
+.markdown hr, .markdown .hr {
+  margin: 2rem 0; }
 
 .chart {
   display: block;
@@ -10934,9 +10840,15 @@ Markdown
 .chart-sm {
   height: 2.5rem; }
 
+.chart-lg {
+  height: 15rem; }
+
 .chart-square {
   height: 5.75rem; }
 
+/**
+Chart sparkline
+ */
 .chart-sparkline {
   position: relative;
   width: 4rem;
@@ -10966,11 +10878,11 @@ Markdown
 .example {
   padding: 2rem;
   margin: 1rem 0 0;
-  border: 1px solid rgba(53, 64, 82, 0.16);
+  border: 1px solid rgba(123, 126, 136, 0.24);
   border-radius: 3px 3px 0 0; }
 
 .example-bg {
-  background: rgba(53, 64, 82, 0.02); }
+  background: rgba(48, 54, 69, 0.032); }
 
 .example + .highlight {
   margin-top: 0;
@@ -10988,163 +10900,6 @@ Markdown
 .example-column-2 {
   max-width: 40rem; }
 
-.selectize-control {
-  padding: 0;
-  border: 0; }
-  .selectize-control.multi .selectize-input > div {
-    font-size: 0.8666667em;
-    margin: 0 8px 2px 0;
-    padding: 2px 8px;
-    border-radius: 3px;
-    background-color: #f1f3f8;
-    color: inherit; }
-
-.selectize-input {
-  display: flex !important;
-  height: 100%;
-  border: 1px solid rgba(53, 64, 82, 0.16);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
-  box-shadow: none;
-  line-height: 1.4666667; }
-  .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='%235f6877' 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); }
-  .selectize-input:after {
-    content: none !important; }
-
-.selectize-dropdown {
-  height: auto;
-  background: #ffffff;
-  padding: 0.375rem 0;
-  margin-top: 1px; }
-  .selectize-dropdown .option,
-  .selectize-dropdown .option-header {
-    padding: 0.25rem 0.75rem; }
-  .selectize-dropdown .active {
-    background: #f1f3f8;
-    color: inherit;
-    cursor: pointer; }
-
-.jqvmap-zoomin,
-.jqvmap-zoomout {
-  height: auto;
-  width: auto;
-  left: .5rem;
-  border: 1px solid rgba(53, 64, 82, 0.16);
-  background: #ffffff;
-  color: #354052; }
-
-.jqvmap-zoomin {
-  top: .5rem; }
-
-.jqvmap-zoomout {
-  top: 2rem; }
-
-.jqvmap-label {
-  font-family: inherit;
-  font-size: 0.7333333em;
-  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-tooltip {
-  line-height: 1;
-  color: #fff;
-  background: #354052 !important;
-  border: 0 !important;
-  border-radius: 3px !important; }
-
-.apexcharts-tooltip-title {
-  margin: 0 !important;
-  background: transparent !important;
-  border: 0 !important; }
-
-.apexcharts-tooltip-series-group {
-  padding: 0 8px !important; }
-
-.apexcharts-tooltip-marker {
-  width: .5rem;
-  height: .5rem; }
-
-.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(53, 64, 82, 0.16); }
-
-.fc-unthemed .fc-toolbar h2, .fc-unthemed .fc-toolbar .h2 {
-  font-size: 1.5333333em;
-  margin: 0; }
-
-.fc-unthemed .fc-button {
-  color: #7e8590;
-  background-color: #ffffff;
-  border-color: rgba(53, 64, 82, 0.16);
-  padding: 0.375rem 1rem;
-  font-size: 0.9375rem;
-  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(33, 40, 51, 0.16); }
-  .fc-unthemed .fc-button:focus, .fc-unthemed .fc-button.focus {
-    color: #354052;
-    background-color: #ececec;
-    border-color: rgba(33, 40, 51, 0.16);
-    box-shadow: 0 0 0 0.2rem rgba(102, 110, 124, 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(28, 34, 43, 0.16); }
-    .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(102, 110, 124, 0.5); }
-  .fc-unthemed .fc-button:disabled, .fc-unthemed .fc-button.disabled {
-    color: #7e8590;
-    background-color: #ffffff;
-    border-color: rgba(53, 64, 82, 0.16); }
-  @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, 0.05);
-  color: #206bc4;
-  background-color: #d2e1f3;
-  padding: 0 .25rem; }
-
 .border-dashed {
   border-style: dashed !important; }
 
@@ -11153,11 +10908,16 @@ Markdown
 
 .bg-white-overlay {
   color: #fff;
-  background-color: rgba(245, 247, 251, 0.4); }
+  background-color: rgba(245, 247, 251, 0.24); }
 
 .bg-dark-overlay {
   color: #fff;
-  background-color: rgba(53, 64, 82, 0.4); }
+  background-color: rgba(48, 54, 69, 0.24); }
+
+.bg-cover {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center; }
 
 /**
 SOCIAL COLORS
@@ -11371,24 +11131,24 @@ SOCIAL COLORS
   background: white !important; }
 
 .bg-gray {
-  background: #aeb3bc; }
+  background: #acb0b8; }
 
 .text-gray {
-  color: #aeb3bc !important; }
+  color: #acb0b8 !important; }
 
 .bg-gray-lt {
-  color: #aeb3bc !important;
-  background: #eff0f2 !important; }
+  color: #acb0b8 !important;
+  background: #eeeff1 !important; }
 
 .bg-gray-dark {
-  background: #5f6877; }
+  background: #5b606d; }
 
 .text-gray-dark {
-  color: #5f6877 !important; }
+  color: #5b606d !important; }
 
 .bg-gray-dark-lt {
-  color: #5f6877 !important;
-  background: #dfe1e4 !important; }
+  color: #5b606d !important;
+  background: #dedfe2 !important; }
 
 .bg-azure {
   background: #45aaf2; }
@@ -11401,24 +11161,24 @@ SOCIAL COLORS
   background: #daeefc !important; }
 
 .bg-lime {
-  background: #7bd235; }
+  background: #94d82d; }
 
 .text-lime {
-  color: #7bd235 !important; }
+  color: #94d82d !important; }
 
 .bg-lime-lt {
-  color: #7bd235 !important;
-  background: #e5f6d7 !important; }
+  color: #94d82d !important;
+  background: #eaf7d5 !important; }
 
 .bg-dark {
-  background: #354052; }
+  background: #303645; }
 
 .text-dark {
-  color: #354052 !important; }
+  color: #303645 !important; }
 
 .bg-dark-lt {
-  color: #354052 !important;
-  background: #d7d9dc !important; }
+  color: #303645 !important;
+  background: #d6d7da !important; }
 
 /*
 Scrollable
@@ -11539,22 +11299,22 @@ Scrollable
   height: 1rem !important; }
 
 .w-4 {
-  width: 1.25rem !important; }
-
-.h-4 {
-  height: 1.25rem !important; }
-
-.w-5 {
   width: 1.5rem !important; }
 
-.h-5 {
+.h-4 {
   height: 1.5rem !important; }
 
+.w-5 {
+  width: 2.5rem !important; }
+
+.h-5 {
+  height: 2.5rem !important; }
+
 .w-6 {
-  width: 3rem !important; }
+  width: 4rem !important; }
 
 .h-6 {
-  height: 3rem !important; }
+  height: 4rem !important; }
 
 .w-7 {
   width: 6rem !important; }
@@ -11562,18 +11322,6 @@ Scrollable
 .h-7 {
   height: 6rem !important; }
 
-.w-8 {
-  width: 9rem !important; }
-
-.h-8 {
-  height: 9rem !important; }
-
-.w-9 {
-  width: 12rem !important; }
-
-.h-9 {
-  height: 12rem !important; }
-
 .w-auto {
   width: auto !important; }
 
@@ -11673,74 +11421,6 @@ Scrollable
 .hover-shadow-none:hover {
   box-shadow: none !important; }
 
-@media not print {
-  body.theme-dark,
-  body.theme-dark .modal-content,
-  body.theme-dark .dropdown-menu,
-  body.theme-dark .example-bg {
-    color: #afbdd1;
-    background: #222935; }
-  body.theme-dark .card,
-  body.theme-dark .sidebar,
-  body.theme-dark .topbar {
-    color: inherit;
-    background: rgba(255, 255, 255, 0.02);
-    border-color: rgba(53, 64, 82, 0.01); }
-  body.theme-dark .progress,
-  body.theme-dark .form-control-light {
-    background: rgba(53, 64, 82, 0.01); }
-  body.theme-dark .example,
-  body.theme-dark .card-footer,
-  body.theme-dark .card-header,
-  body.theme-dark .table th,
-  body.theme-dark .markdown table th,
-  .markdown body.theme-dark table th, body.theme-dark .markdown table th, body.theme-dark .table td, body.theme-dark .markdown table td, .markdown body.theme-dark table td, body.theme-dark .markdown table td,
-  body.theme-dark .dropdown-menu {
-    border-color: rgba(53, 64, 82, 0.01); }
-  body.theme-dark .text-body {
-    color: #afbdd1 !important; }
-  body.theme-dark .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226; }
-  body.theme-dark .navbar-brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
-  body.theme-dark .form-fieldset {
-    border-color: transparent; } }
-
-@media (prefers-color-scheme: dark) {
-  body.auto-theme-dark,
-  body.auto-theme-dark .modal-content,
-  body.auto-theme-dark .dropdown-menu,
-  body.auto-theme-dark .example-bg {
-    color: #afbdd1;
-    background: #222935; }
-  body.auto-theme-dark .card,
-  body.auto-theme-dark .sidebar,
-  body.auto-theme-dark .topbar {
-    color: inherit;
-    background: rgba(255, 255, 255, 0.02);
-    border-color: rgba(53, 64, 82, 0.01); }
-  body.auto-theme-dark .progress,
-  body.auto-theme-dark .form-control-light {
-    background: rgba(53, 64, 82, 0.01); }
-  body.auto-theme-dark .example,
-  body.auto-theme-dark .card-footer,
-  body.auto-theme-dark .card-header,
-  body.auto-theme-dark .table th,
-  body.auto-theme-dark .markdown table th,
-  .markdown body.auto-theme-dark table th, body.auto-theme-dark .markdown table th, body.auto-theme-dark .table td, body.auto-theme-dark .markdown table td, .markdown body.auto-theme-dark table td, body.auto-theme-dark .markdown table td,
-  body.auto-theme-dark .dropdown-menu {
-    border-color: rgba(53, 64, 82, 0.01); }
-  body.auto-theme-dark .text-body {
-    color: #afbdd1 !important; }
-  body.auto-theme-dark .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226; }
-  body.auto-theme-dark .navbar-brand-logo {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
-  body.auto-theme-dark .form-fieldset {
-    border-color: transparent; } }
-
 html[dir="rtl"] body {
   text-align: right;
   direction: rtl; }
@@ -11756,4 +11436,291 @@ html[dir="rtl"] .float-right {
 
 html[dir="rtl"] .float-left {
   float: right !important; }
+
+.selectize-control {
+  padding: 0;
+  border: 0; }
+  .selectize-control.multi .selectize-input.has-items {
+    padding-left: 6px; }
+  .selectize-control.multi .selectize-input > div {
+    font-size: 0.8666667em;
+    margin: 0 6px 2px 0;
+    padding: 2px 8px;
+    border-radius: 3px;
+    background-color: #f1f3f7;
+    color: inherit; }
+  .selectize-control .remove {
+    font-size: inherit !important;
+    font-weight: normal !important;
+    border-left: 0 !important;
+    color: #7b7e88 !important; }
+
+.selectize-input {
+  display: flex !important;
+  height: 100%;
+  border: 1px solid rgba(123, 126, 136, 0.24);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.9375rem;
+  box-shadow: none;
+  line-height: 1.4666667;
+  background-color: inherit !important;
+  color: inherit !important; }
+  .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%28123, 126, 136, 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; }
+  .selectize-input.focus {
+    border-color: #7aade9;
+    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
+  .selectize-input:after {
+    content: none !important; }
+
+.selectize-dropdown {
+  height: auto;
+  background: #ffffff;
+  padding: 0.375rem 0;
+  margin-top: 1px; }
+  .selectize-dropdown .option,
+  .selectize-dropdown .option-header {
+    padding: 0.25rem 0.75rem; }
+  .selectize-dropdown .active {
+    background: rgba(245, 247, 251, 0.24);
+    color: inherit;
+    cursor: pointer; }
+
+.jqvmap-zoomin,
+.jqvmap-zoomout {
+  height: auto;
+  width: auto;
+  left: .5rem;
+  border: 1px solid rgba(123, 126, 136, 0.24);
+  background: #ffffff;
+  color: #303645; }
+
+.jqvmap-zoomin {
+  top: .5rem; }
+
+.jqvmap-zoomout {
+  top: 2rem; }
+
+.jqvmap-label {
+  font-family: inherit;
+  font-size: 0.7333333em;
+  line-height: 1;
+  padding: .25rem;
+  background: #303645; }
+
+.apexcharts-title-text {
+  font-weight: 600 !important; }
+
+.apexcharts-tooltip-title {
+  font-weight: 600 !important;
+  padding-bottom: .25rem !important; }
+
+.apexcharts-tooltip {
+  line-height: 1;
+  color: #fff;
+  background: #303645 !important;
+  border: 0 !important;
+  border-radius: 3px !important; }
+
+.apexcharts-tooltip-title {
+  margin: 0 !important;
+  background: transparent !important;
+  border: 0 !important; }
+
+.apexcharts-tooltip-series-group {
+  padding: 0 8px !important; }
+
+.apexcharts-tooltip-marker {
+  width: .5rem;
+  height: .5rem; }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: #e9ebf0; }
+
+.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(123, 126, 136, 0.24); }
+
+.fc-unthemed .fc-toolbar h2, .fc-unthemed .fc-toolbar .h2 {
+  font-size: 1.5333333em;
+  margin: 0; }
+
+.fc-unthemed .fc-button {
+  color: #7b7e88;
+  background-color: #ffffff;
+  border-color: rgba(123, 126, 136, 0.24);
+  padding: 0.375rem 1rem;
+  font-size: 0.9375rem;
+  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: #303645;
+    background-color: #ececec;
+    border-color: rgba(99, 101, 109, 0.24); }
+  .fc-unthemed .fc-button:focus, .fc-unthemed .fc-button.focus {
+    color: #303645;
+    background-color: #ececec;
+    border-color: rgba(99, 101, 109, 0.24);
+    box-shadow: 0 0 0 0.2rem rgba(123, 126, 136, 0.5); }
+  .fc-unthemed .fc-button:active, .fc-unthemed .fc-button.active,
+  .show > .fc-unthemed .fc-button.dropdown-toggle {
+    color: #303645;
+    background-color: #e6e6e6;
+    border-color: rgba(93, 95, 103, 0.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 0.2rem rgba(123, 126, 136, 0.5); }
+  .fc-unthemed .fc-button:disabled, .fc-unthemed .fc-button.disabled {
+    color: #7b7e88;
+    background-color: #ffffff;
+    border-color: rgba(123, 126, 136, 0.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, 0.05);
+  color: #206bc4;
+  background-color: #d2e1f3;
+  padding: 0 .25rem; }
+
+.flatpickr-input {
+  background: #ffffff !important; }
+  .flatpickr-input.active {
+    border-color: #7aade9;
+    box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
+
+.flatpickr-calendar {
+  border: 1px solid rgba(123, 126, 136, 0.24);
+  border-radius: 3px;
+  padding: .5rem;
+  font-size: inherit;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin-top: -1px; }
+  .flatpickr-calendar:before, .flatpickr-calendar:after {
+    content: none; }
+  .flatpickr-calendar .flatpickr-innerContainer,
+  .flatpickr-calendar .flatpickr-rContainer,
+  .flatpickr-calendar .dayContainer,
+  .flatpickr-calendar .flatpickr-days {
+    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.today {
+    border-color: rgba(123, 126, 136, 0.24); }
+  .flatpickr-day.selected {
+    background-color: #206bc4; }
+
+span.flatpickr-weekday {
+  font-size: 0.7333333em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: #7b7e88; }
+
+.flatpickr-months {
+  margin-bottom: .5rem; }
+  .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-prev-month,
+  .flatpickr-months .flatpickr-next-month {
+    position: static;
+    color: #7b7e88; }
+    .flatpickr-months .flatpickr-prev-month:hover,
+    .flatpickr-months .flatpickr-next-month:hover {
+      color: #303645; }
+    .flatpickr-months .flatpickr-prev-month svg,
+    .flatpickr-months .flatpickr-next-month svg {
+      display: block;
+      fill: currentColor !important; }
+  .flatpickr-months .numInputWrapper .cur-year {
+    font-weight: inherit; }
+  .flatpickr-months .numInputWrapper .arrowUp,
+  .flatpickr-months .numInputWrapper .arrowDown {
+    display: none; }
+
+.noUi-target {
+  border: 0;
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+  color: #206bc4; }
+
+.noUi-horizontal {
+  height: 1.25rem;
+  padding: .5rem 0; }
+
+.noUi-base {
+  background: rgba(174, 178, 185, 0.24);
+  border-radius: 1rem; }
+
+.noUi-handle {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+  background: currentColor;
+  outline: 0; }
+  .noUi-handle:before, .noUi-handle:after {
+    content: none; }
+  .noUi-horizontal .noUi-handle {
+    width: 1rem;
+    height: 1rem;
+    top: -0.5rem;
+    right: -0.5rem;
+    margin: 1px 1px 0 0; }
+  .noUi-handle.noUi-active, .noUi-handle:focus {
+    box-shadow: 0 0 0 1px #f5f7fb, 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
+
+.noUi-connect {
+  background: currentColor; }
 /*# sourceMappingURL=tabler.css.map */
\ No newline at end of file
diff --git a/dist/img/payments/blik-dark.svg b/dist/img/payments/blik-dark.svg
index e9652bd54..ec6e1109b 100644
--- a/dist/img/payments/blik-dark.svg
+++ b/dist/img/payments/blik-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st1{fill:#fff}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="60" x2="50" y2="0"><stop offset="0" stop-color="#262626"/><stop offset="1"/></linearGradient><path fill="url(#SVGID_1_)" d="M0 0h100v60H0z"/><path class="st1" d="M43.29 17.54h4.64v26.01h-4.64zM51.9 26.32h4.64v17.23H51.9zM77.35 43.55l-6.98-9.12 6.42-8.11h-5.48l-6.15 7.87V17.54h-4.65v26.01h4.65V34.7l6.15 8.85zM31.46 26.13c-1.51 0-2.93.38-4.17 1.05v-9.63h-4.64v17.39c0 4.86 3.94 8.81 8.81 8.81s8.81-3.94 8.81-8.81-3.94-8.81-8.81-8.81zm0 12.97c-2.3 0-4.17-1.87-4.17-4.17s1.87-4.17 4.17-4.17 4.17 1.87 4.17 4.17c0 2.31-1.87 4.17-4.17 4.17z"/><radialGradient id="SVGID_2_" cx="32.625" cy="16.032" r="13.569" fx="32.466" fy="15.992" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle cx="35.99" cy="20.39" r="4.14" fill="url(#SVGID_2_)"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="50" y1=".646" x2="50" y2="60.646" gradientTransform="matrix(1 0 0 -1 0 60.646)"><stop offset="0" stop-color="#262626"/><stop offset="1"/></linearGradient><rect fill="url(#a)" width="100" height="60" rx="4"/><path fill="#FFF" d="M43.3 17.5h4.6v26h-4.6v-26zm8.6 8.8h4.6v17.2h-4.6V26.3zm25.4 17.2l-7-9.1 6.4-8.1h-5.5L65 34.2V17.5h-4.7v26H65v-8.9l6.2 8.9h6.1zM31.5 26.1c-1.5 0-2.9.4-4.2 1v-9.6h-4.6v17.4c0 4.9 3.9 8.8 8.8 8.8s8.8-3.9 8.8-8.8-4-8.8-8.8-8.8zm0 13c-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2 4.2 1.9 4.2 4.2c-.1 2.3-1.9 4.2-4.2 4.2z"/><circle fill="#e83e49" cx="36" cy="20.4" r="4.1"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/blik.svg b/dist/img/payments/blik.svg
index d9a044dc7..b44c11d9b 100644
--- a/dist/img/payments/blik.svg
+++ b/dist/img/payments/blik.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#333}</style><path class="st0" d="M43.29 17.54h4.64v26.01h-4.64zM51.9 26.32h4.64v17.23H51.9zM77.35 43.55l-6.98-9.12 6.42-8.11h-5.48l-6.15 7.87V17.54h-4.65v26.01h4.65V34.7l6.15 8.85zM31.46 26.13c-1.51 0-2.93.38-4.17 1.05v-9.63h-4.64v17.39c0 4.86 3.94 8.81 8.81 8.81s8.81-3.94 8.81-8.81-3.94-8.81-8.81-8.81zm0 12.97c-2.3 0-4.17-1.87-4.17-4.17s1.87-4.17 4.17-4.17 4.17 1.87 4.17 4.17c0 2.31-1.87 4.17-4.17 4.17z"/><radialGradient id="SVGID_1_" cx="32.625" cy="16.032" r="13.569" fx="32.466" fy="15.992" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle cx="35.99" cy="20.39" r="4.14" fill="url(#SVGID_1_)"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#333" d="M43.3 17.5h4.6v26h-4.6v-26zm8.6 8.8h4.6v17.2h-4.6V26.3zm25.4 17.2l-7-9.1 6.4-8.1h-5.5L65 34.2V17.5h-4.7v26H65v-8.9l6.2 8.9h6.1zM31.5 26.1c-1.5 0-2.9.4-4.2 1v-9.6h-4.6v17.4c0 4.9 3.9 8.8 8.8 8.8s8.8-3.9 8.8-8.8-4-8.8-8.8-8.8zm0 13c-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2 4.2 1.9 4.2 4.2c-.1 2.3-1.9 4.2-4.2 4.2z"/><radialGradient id="a" cx="32.625" cy="44.614" r="13.569" fx="32.466" fy="44.574" gradientTransform="matrix(1 0 0 -1 0 60.646)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="red"/><stop offset=".495" stop-color="#e83e49"/><stop offset="1" stop-color="#f0f"/></radialGradient><circle fill="url(#a)" cx="36" cy="20.4" r="4.1"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/dotpay-dark.svg b/dist/img/payments/dotpay-dark.svg
index 5492a4157..2e350d4a1 100644
--- a/dist/img/payments/dotpay-dark.svg
+++ b/dist/img/payments/dotpay-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#9f221f}.st1{fill:#fff}</style><path d="M0 0h100v60H0z"/><path class="st0" d="M39.21 23.86h2.57V19h2.71v4.86h3.61v2.29h-3.47v7.15s-.14.97.56.97h2.91v2.36h-3.89c-.23-.01-.47-.01-.7-.02-.12-.02-.88-.12-1.38-.82-.43-.6-.37-1.24-.35-1.39v-8.26h-2.57v-2.28z"/><path class="st1" d="M75.01 24v9.16s0 3.47 3.19 3.47h5.27v.97s.14 1.11-1.25 1.11H75v2.36h8.19s3.19-.42 3.19-4.44V24h-2.91v10.34h-4.16s-1.39-.07-1.39-2.01c0-2.5-.14-8.33-.14-8.33h-2.77zM56.97 23.99h-7.91l-.14 17.07h2.92v-4.44h5.27s4.02-.55 4.02-6.66c0-6.1-4.16-5.97-4.16-5.97zm-.99 10.41h-4.14v-8.19h4.14s2.79.14 2.79 4.03c0 3.88-2.79 4.16-2.79 4.16zM70.71 24h-8.33v2.08h6.52c2.22 0 2.36 1.39 2.36 1.39V29h-5.83s-3.89-.06-3.89 3.47c0 3.89 3.33 4.16 3.33 4.16h9.16v-9.44c0-3.33-3.32-3.19-3.32-3.19zm.42 10.41H66s-1.25 0-1.25-1.67S66 31.21 66 31.21h5.13v3.2z"/><path class="st0" d="M33.31 24a6.31 6.31 0 106.31 6.31c.01-3.48-2.82-6.31-6.31-6.31zm2.16 10.04h-4.6s-.68-.05-.68-.68v-2.98s0-.68.68-.68v-2.17s0-.81.81-.81h2.98s.81 0 .81.68v2.3s.69-.02.68.68c-.01.81 0 2.98 0 2.98s.14.68-.68.68z"/><path class="st0" d="M34.05 27.47H32.3c-.4 0-.72.32-.72.72v.78c0 .4.32.72.72.72h1.75c.4 0 .72-.32.72-.72v-.78c0-.4-.32-.72-.72-.72zM23.12 18.93V24h-4.06s-5.45.21-5.45 6.45 5.45 6.24 5.45 6.24h7.04V18.93h-2.98zm0 15.48h-4.15s-2.79-.14-2.79-4.02 2.79-4.16 2.79-4.16h4.15v8.18z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#9F221F" width="100" height="60" rx="4"/><path fill="#FFF" d="M39.2 23.9h2.6V19h2.7v4.9h3.6v2.3h-3.5v7.1s-.1 1 .6 1h2.9v2.4h-4.6c-.1 0-.9-.1-1.4-.8-.4-.6-.4-1.2-.3-1.4v-8.3h-2.6v-2.3zM75 24v9.2s0 3.5 3.2 3.5h5.3v1s.1 1.1-1.2 1.1H75v2.4h8.2s3.2-.4 3.2-4.4V24h-2.9v10.3h-4.2s-1.4-.1-1.4-2c0-2.5-.1-8.3-.1-8.3H75zm-18 0h-7.9L49 41.1h2.9v-4.4h5.3s4-.5 4-6.7c-.1-6.1-4.2-6-4.2-6zm-1 10.4h-4.1v-8.2H56s2.8.1 2.8 4-2.8 4.2-2.8 4.2zM70.7 24h-8.3v2.1h6.5c2.2 0 2.4 1.4 2.4 1.4V29h-5.8s-3.9-.1-3.9 3.5c0 3.9 3.3 4.2 3.3 4.2H74v-9.4c0-3.4-3.3-3.3-3.3-3.3zm.4 10.4H66s-1.2 0-1.2-1.7 1.2-1.5 1.2-1.5h5.1v3.2zM33.3 24c-3.5 0-6.3 2.8-6.3 6.3s2.8 6.3 6.3 6.3 6.3-2.8 6.3-6.3-2.8-6.3-6.3-6.3zm2.2 10h-4.6s-.7 0-.7-.7v-3s0-.7.7-.7v-2.2s0-.8.8-.8h3s.8 0 .8.7v2.3s.7 0 .7.7v3s.1.7-.7.7z"/><path fill="#FFF" d="M34 27.5h-1.8c-.4 0-.7.3-.7.7v.8c0 .4.3.7.7.7H34c.4 0 .7-.3.7-.7v-.8c.1-.4-.2-.7-.7-.7zm-10.9-8.6V24H19s-5.4.2-5.4 6.5 5.4 6.2 5.4 6.2h7V18.9h-2.9zm0 15.5H19s-2.8-.1-2.8-4 2.8-4.2 2.8-4.2h4.1v8.2z"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/dotpay.svg b/dist/img/payments/dotpay.svg
index d6dc54e40..75cd67099 100644
--- a/dist/img/payments/dotpay.svg
+++ b/dist/img/payments/dotpay.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#9f221f}</style><path class="st0" d="M39.21 23.86h2.57V19h2.71v4.86h3.61v2.29h-3.47v7.15s-.14.97.56.97h2.91v2.36h-3.89c-.23-.01-.47-.01-.7-.02-.12-.02-.88-.12-1.38-.82-.43-.6-.37-1.24-.35-1.39v-8.26h-2.57v-2.28z"/><path d="M75.01 24v9.16s0 3.47 3.19 3.47h5.27v.97s.14 1.11-1.25 1.11H75v2.36h8.19s3.19-.42 3.19-4.44V24h-2.91v10.34h-4.16s-1.39-.07-1.39-2.01c0-2.5-.14-8.33-.14-8.33h-2.77zM56.97 23.99h-7.91l-.14 17.07h2.92v-4.44h5.27s4.02-.55 4.02-6.66c0-6.1-4.16-5.97-4.16-5.97zm-.99 10.41h-4.14v-8.19h4.14s2.79.14 2.79 4.03c0 3.88-2.79 4.16-2.79 4.16zM70.71 24h-8.33v2.08h6.52c2.22 0 2.36 1.39 2.36 1.39V29h-5.83s-3.89-.06-3.89 3.47c0 3.89 3.33 4.16 3.33 4.16h9.16v-9.44c0-3.33-3.32-3.19-3.32-3.19zm.42 10.41H66s-1.25 0-1.25-1.67S66 31.21 66 31.21h5.13v3.2z"/><path class="st0" d="M33.31 24a6.31 6.31 0 106.31 6.31c.01-3.48-2.82-6.31-6.31-6.31zm2.16 10.04h-4.6s-.68-.05-.68-.68v-2.98s0-.68.68-.68v-2.17s0-.81.81-.81h2.98s.81 0 .81.68v2.3s.69-.02.68.68c-.01.81 0 2.98 0 2.98s.14.68-.68.68z"/><path class="st0" d="M34.05 27.47H32.3c-.4 0-.72.32-.72.72v.78c0 .4.32.72.72.72h1.75c.4 0 .72-.32.72-.72v-.78c0-.4-.32-.72-.72-.72zM23.12 18.93V24h-4.06s-5.45.21-5.45 6.45 5.45 6.24 5.45 6.24h7.04V18.93h-2.98zm0 15.48h-4.15s-2.79-.14-2.79-4.02 2.79-4.16 2.79-4.16h4.15v8.18z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#9F221F" d="M39.2 23.9h2.6V19h2.7v4.9h3.6v2.3h-3.5v7.1s-.1 1 .6 1h2.9v2.4h-4.6c-.1 0-.9-.1-1.4-.8-.4-.6-.4-1.2-.3-1.4v-8.3h-2.6v-2.3z"/><path d="M75 24v9.2s0 3.5 3.2 3.5h5.3v1s.1 1.1-1.2 1.1H75v2.4h8.2s3.2-.4 3.2-4.4V24h-2.9v10.3h-4.2s-1.4-.1-1.4-2c0-2.5-.1-8.3-.1-8.3H75zm-18 0h-7.9L49 41.1h2.9v-4.4h5.3s4-.5 4-6.7c-.1-6.1-4.2-6-4.2-6zm-1 10.4h-4.1v-8.2H56s2.8.1 2.8 4-2.8 4.2-2.8 4.2zM70.7 24h-8.3v2.1h6.5c2.2 0 2.4 1.4 2.4 1.4V29h-5.8s-3.9-.1-3.9 3.5c0 3.9 3.3 4.2 3.3 4.2H74v-9.4c0-3.4-3.3-3.3-3.3-3.3zm.4 10.4H66s-1.2 0-1.2-1.7 1.2-1.5 1.2-1.5h5.1v3.2z"/><path fill="#9F221F" d="M33.3 24c-3.5 0-6.3 2.8-6.3 6.3s2.8 6.3 6.3 6.3 6.3-2.8 6.3-6.3-2.8-6.3-6.3-6.3zm2.2 10h-4.6s-.7 0-.7-.7v-3s0-.7.7-.7v-2.2s0-.8.8-.8h3s.8 0 .8.7v2.3s.7 0 .7.7v3s.1.7-.7.7z"/><path fill="#9F221F" d="M34 27.5h-1.8c-.4 0-.7.3-.7.7v.8c0 .4.3.7.7.7H34c.4 0 .7-.3.7-.7v-.8c.1-.4-.2-.7-.7-.7zm-10.9-8.6V24H19s-5.4.2-5.4 6.5 5.4 6.2 5.4 6.2h7V18.9h-2.9zm0 15.5H19s-2.8-.1-2.8-4 2.8-4.2 2.8-4.2h4.1v8.2z"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/przelewy24-dark.svg b/dist/img/payments/przelewy24-dark.svg
index a40d8970e..6a2a30851 100644
--- a/dist/img/payments/przelewy24-dark.svg
+++ b/dist/img/payments/przelewy24-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}.st0,.st1{fill:#d13239}.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#b3b2b1}</style><path d="M0 0h100v60H0z"/><path class="st0" d="M29.08 31.85h5.95l-.22 1.35-4.97 4.75 4.17-.01-.24 1.46h-6.15l.26-1.51 4.77-4.56h-3.81zM22.58 29.54c-.13-.14-.32-.24-.52-.33a4.15 4.15 0 00-.69-.19c-.26-.05-.53-.07-.79-.08-.19-.01-.31-.01-.31-.01h-4.53L14 39.4h1.62l.64-3.88 3.14.02s1.22.05 2.09-.41 1.1-1.5 1.1-1.5.1-.39.17-.86c.09-.52.17-1.14.22-1.47.02-.14.03-.24.03-.24.02-.09.02-.18.02-.27.01-.32-.07-.63-.21-.92-.06-.12-.15-.23-.24-.33zm-1.25 1.85c0 .02-.14.86-.33 1.85-.07.38-.36.59-.7.66-.55.12-1.15.1-1.15.1l-2.62-.01.58-3.48 2.38.01h.38c.29 0 .58.02.87.05.24.03.43.08.49.16.07.1.11.22.12.34 0 .1 0 .21-.02.32zM43.09 28.94h1.55L42.9 39.4h-1.56zM51.4 31.85h1.49l.53 5.31 2.3-5.32 1.84.01.55 5.33 2.29-5.33h1.55l-3.29 7.54h-1.84l-.53-5.28-2.32 5.28-1.81.01z"/><path class="st1" d="M40.21 31.91c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5.3 1.2 1.01 1.47c.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17-1.34.06-1.51.05c-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.41.09-2.49-1.21-2.92zm-.34 2.76h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03zM36.01 37.25v0zM45.58 37.25v0zM49.78 31.92c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5.3 1.2 1.01 1.47c.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.5.06-1.01.08-1.51.06-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.42.09-2.51-1.21-2.93zm-.35 2.75h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03z"/><path class="st0" d="M63.75 31.85l1 5.52 2.82-5.52 1.59.02-4.07 7.89s-.74 1.43-1.19 1.79-.74.52-1.11.56-.52.06-.88 0l-.38-.07.24-1.41s.63.12 1-.03.68-.79.68-.79l.19-.32-1.47-7.64h1.58z"/><path class="st2" d="M69.74 32.6h1.64l.1-.63s.17-1.15.57-1.37c.13-.07.33-.14.56-.18.43-.08.97-.08 1.42-.07.68.02.94.03 1.63.11s.52.75.52.75l-.14 1s-.06.45-.22.73c-.14.25-.53.41-.75.49-.54.17-2.39.65-2.39.65l-1.45.42s-.89.26-1.39.81c-.38.43-.65.95-.77 1.51-.07.33-.45 2.59-.45 2.59h7.84l.26-1.57-6.2.01.11-.64s.07-.66.34-.87c.08-.07.13-.16.62-.33.3-.11 1.31-.38 1.31-.38l2.34-.64s1.28-.33 1.78-1.03.7-2.03.7-2.03.14-1.3.03-1.7-.49-.89-.95-1.1c-.47-.21-.95-.33-2.36-.31s-2.11.08-2.82.35-1.13.74-1.39 1.42c-.33.63-.49 2.01-.49 2.01zM84.49 36.3l1.1-6.58h-1.95l-6.06 6.51-.27 1.65h5.3l-.39 2.31h1.63l.38-2.31h1.5L86 36.3h-1.51zm-1.62.01h-3.42l4.17-4.44-.75 4.44zM26.02 29.8h4.99s1.12-.9 1.91-1.49 2.24-1.5 2.24-1.5l-2.82-1.32s-2.38 1.47-3.39 2.17c-.99.65-2.93 2.14-2.93 2.14zM36.74 25.88l-2.31-1.56c1.58-.87 3.21-1.63 4.88-2.3 2.78-1.11 4.27-1.57 4.27-1.57l.47 2.21s-2.68.9-4.21 1.62c-1.6.68-3.1 1.6-3.1 1.6zM45.75 22.18l-.4-2.26s2.86-.76 5.47-1.25 6.09-.72 6.09-.72l-1.15 3.49s-3.05-.42-5.92-.03c-1.37.18-2.74.43-4.09.77zM57.58 21.74l1.93-3.88s4.23-.08 7.88.48c3.65.57 6.98 1.43 6.91 1.47l-9.25 4.84s-2.16-1.37-4.85-2.21c-1.51-.45-2.62-.7-2.62-.7zM66.71 25.7l2.03 1.54h16.71s-.03-.54-.48-1.31c-.28-.48-.78-.99-1.31-1.52-.19-.19-.96-.79-1.54-1.17-1.47-.96-2.3-1.33-3.83-2.02L66.71 25.7z"/><path class="st1" d="M27.1 31.85c-.63 0-1.22.25-1.73.52l.09-.52H23.8l-1.33 7.51h1.66l.74-4.16c.15-.84.78-1.89 2.01-1.89h.86l.26-1.46h-.9z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#D13239" width="100" height="60" rx="4"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M29.1 31.8H35l-.2 1.3-5 4.8H34l-.2 1.5h-6.1l.3-1.5 4.8-4.6H29l.1-1.5zm-6.5-2.3c-.1-.1-.3-.2-.5-.3-.2-.1-.5-.1-.7-.2-.3 0-.5-.1-.8-.1h-4.8L14 39.4h1.6l.6-3.9h3.1s1.2 0 2.1-.4 1.1-1.5 1.1-1.5.1-.4.2-.9.2-1.1.2-1.5v-.5c0-.3-.1-.6-.2-.9.1-.1 0-.2-.1-.3zm-1.3 1.9s-.1.9-.3 1.8c-.1.4-.4.6-.7.7-.5.1-1.2.1-1.2.1h-2.6l.6-3.5h3.7c.2 0 .4.1.5.2s.1.2.1.3c-.1.2-.1.3-.1.4zm21.8-2.5h1.5l-1.7 10.5h-1.6l1.8-10.5zm8.3 2.9h1.5l.5 5.3 2.3-5.3h1.8l.5 5.3 2.3-5.3H62l-3.3 7.5h-1.8l-.5-5.3-2.4 5.4h-1.8l-.8-7.6z"/><path fill="#FFF" d="M40.2 31.9c-.4-.1-1.2-.2-1.8-.2s-.9 0-1.1.1c0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2-1.4-.1-1.6-.1-1.1 0-1-.8c0-.9.1-1.1.1-1.1h5.1l.2-1.2c.3-1.5.1-2.6-1.2-3zm-.3 2.8h-3.5l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2s1.1-.1 1.7 0c.2 0 .4.2.5.3.1.3 0 1 0 1zM36 37.2zm9.6 0zm4.2-5.3c-.4-.1-1.2-.2-1.8-.2s-.9 0-1.1.1c0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2c-.5.1-1 .1-1.5.1-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.2-1.7 0-2.8-1.3-3.2zm-.4 2.8H46l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2s1.1-.1 1.7 0c.2 0 .4.2.5.3.1.3-.1 1-.1 1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M63.8 31.8l1 5.5 2.8-5.5h1.6l-4.1 7.9s-.7 1.4-1.2 1.8-.7.5-1.1.6-.5.1-.9 0l-.4-.1.2-1.4s.6.1 1 0 .7-.8.7-.8l.2-.3-1.5-7.6c.1-.1 1.6-.1 1.7-.1zm5.9.8h1.6l.1-.6s.2-1.1.6-1.4c.1-.1.3-.1.6-.2.4-.1 1-.1 1.4-.1.7 0 .9 0 1.6.1s.5.8.5.8l-.1 1s-.1.5-.2.7-.5.4-.8.5c-.5.2-2.4.7-2.4.7l-1.4.4s-.9.3-1.4.8c-.4.4-.7 1-.8 1.5-.1.3-.4 2.6-.4 2.6h7.8l.3-1.6h-6.2l.1-.6s.1-.7.3-.9c.1-.1.1-.2.6-.3.3-.1 1.3-.4 1.3-.4l2.3-.6s1.3-.3 1.8-1 .7-2 .7-2 .1-1.3 0-1.7-.5-.9-.9-1.1c-.5-.2-.9-.3-2.4-.3s-2.1.1-2.8.4-1.1.7-1.4 1.4c-.2.5-.4 1.9-.4 1.9zm14.8 3.7l1.1-6.6h-1.9l-6.1 6.5-.3 1.7h5.3l-.4 2.3h1.6l.4-2.3h1.5l.3-1.6h-1.5zm-1.6 0h-3.4l4.2-4.4-.8 4.4zM26 29.8h5s1.1-.9 1.9-1.5 2.2-1.5 2.2-1.5l-2.8-1.3s-2.4 1.5-3.4 2.2c-.9.6-2.9 2.1-2.9 2.1zm10.7-3.9l-2.3-1.6c1.6-.9 3.2-1.6 4.9-2.3 2.8-1.1 4.3-1.6 4.3-1.6l.5 2.2s-2.7.9-4.2 1.6c-1.7.8-3.2 1.7-3.2 1.7zm9.1-3.7l-.4-2.3s2.9-.8 5.5-1.2S57 18 57 18l-1.2 3.5s-3-.4-5.9 0c-1.4.1-2.8.3-4.1.7zm11.8-.5l1.9-3.9s4.2-.1 7.9.5 7 1.4 6.9 1.5l-9.2 4.8s-2.2-1.4-4.8-2.2c-1.6-.4-2.7-.7-2.7-.7zm9.1 4l2 1.5h16.7s0-.5-.5-1.3c-.3-.5-.8-1-1.3-1.5-.2-.2-1-.8-1.5-1.2-1.5-1-2.3-1.3-3.8-2l-11.6 4.5z"/><path fill="#FFF" d="M27.1 31.8c-.6 0-1.2.2-1.7.5l.1-.5h-1.7l-1.3 7.5h1.7l.7-4.2c.1-.8.8-1.9 2-1.9h.9l.3-1.5c-.1.1-1 .1-1 .1z"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/przelewy24.svg b/dist/img/payments/przelewy24.svg
index 498b9751f..23b079c62 100644
--- a/dist/img/payments/przelewy24.svg
+++ b/dist/img/payments/przelewy24.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill-rule:evenodd;clip-rule:evenodd}.st0,.st1{fill:#d13239}.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#b3b2b1}</style><path class="st0" d="M29.08 31.85h5.95l-.22 1.35-4.97 4.75 4.17-.01-.24 1.46h-6.15l.26-1.51 4.77-4.56h-3.81zM22.58 29.54c-.13-.14-.32-.24-.52-.33a4.15 4.15 0 00-.69-.19c-.26-.05-.53-.07-.79-.08-.19-.01-.31-.01-.31-.01h-4.53L14 39.4h1.62l.64-3.88 3.14.02s1.22.05 2.09-.41 1.1-1.5 1.1-1.5.1-.39.17-.86c.09-.52.17-1.14.22-1.47.02-.14.03-.24.03-.24.02-.09.02-.18.02-.27.01-.32-.07-.63-.21-.92-.06-.12-.15-.23-.24-.33zm-1.25 1.85c0 .02-.14.86-.33 1.85-.07.38-.36.59-.7.66-.55.12-1.15.1-1.15.1l-2.62-.01.58-3.48 2.38.01h.38c.29 0 .58.02.87.05.24.03.43.08.49.16.07.1.11.22.12.34 0 .1 0 .21-.02.32zM43.09 28.94h1.55L42.9 39.4h-1.56zM51.4 31.85h1.49l.53 5.31 2.3-5.32 1.84.01.55 5.33 2.29-5.33h1.55l-3.29 7.54h-1.84l-.53-5.28-2.32 5.28-1.81.01z"/><path class="st1" d="M40.21 31.91c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5c.11.63.3 1.2 1.01 1.47.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.87.1-1.34.06-1.51.05-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.41.09-2.49-1.21-2.92zm-.34 2.76h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03zM36.01 37.25v0zM45.58 37.25v0zM49.78 31.92c-.44-.14-1.19-.17-1.84-.16-.62.01-.9.04-1.14.09 0 0-1.1.16-1.73.93-.63.78-.81 2.47-.81 2.47s-.37 1.87-.26 2.5c.11.63.3 1.2 1.01 1.47.42.16.86.25 1.31.26 0 0 1.26.1 2.21-.13.57-.13 1.08-.45 1.45-.89.15-.2.28-.41.38-.63.09-.2.17-.4.22-.61l.1-.41h-1.62s-.09 1.07-.96 1.17c-.5.06-1.01.08-1.51.06-.17-.01-1.1.03-1.03-.75v-.05c.04-.89.14-1.12.14-1.12l5.07-.02.22-1.25c.27-1.42.09-2.51-1.21-2.93zm-.35 2.75h-3.48l.14-.55s.12-.43.36-.62c.24-.18.55-.22.84-.24.29-.03 1.06-.08 1.69.05.21.04.41.16.46.33.12.4-.01 1.03-.01 1.03z"/><path class="st0" d="M63.75 31.85l1 5.52 2.82-5.52 1.59.02-4.07 7.89s-.74 1.43-1.19 1.79-.74.52-1.11.56c-.37.04-.52.06-.88 0l-.38-.07.24-1.41s.63.12 1-.03.68-.79.68-.79l.19-.32-1.47-7.64h1.58z"/><path class="st2" d="M69.74 32.6h1.64l.1-.63s.17-1.15.57-1.37c.13-.07.33-.14.56-.18.43-.08.97-.08 1.42-.07.68.02.94.03 1.63.11s.52.75.52.75l-.14 1s-.06.45-.22.73c-.14.25-.53.41-.75.49-.54.17-2.39.65-2.39.65l-1.45.42s-.89.26-1.39.81c-.38.43-.65.95-.77 1.51-.07.33-.45 2.59-.45 2.59h7.84l.26-1.57-6.2.01.11-.64s.07-.66.34-.87c.08-.07.13-.16.62-.33.3-.11 1.31-.38 1.31-.38l2.34-.64s1.28-.33 1.78-1.03.7-2.03.7-2.03.14-1.3.03-1.7-.49-.89-.95-1.1c-.47-.21-.95-.33-2.36-.31s-2.11.08-2.82.35c-.71.27-1.13.74-1.39 1.42-.33.63-.49 2.01-.49 2.01zM84.49 36.3l1.1-6.58h-1.95l-6.06 6.51-.27 1.65h5.3l-.39 2.31h1.63l.38-2.31h1.5L86 36.3h-1.51zm-1.62.01h-3.42l4.17-4.44-.75 4.44zM26.02 29.8h4.99s1.12-.9 1.91-1.49 2.24-1.5 2.24-1.5l-2.82-1.32s-2.38 1.47-3.39 2.17c-.99.65-2.93 2.14-2.93 2.14zM36.74 25.88l-2.31-1.56c1.58-.87 3.21-1.63 4.88-2.3 2.78-1.11 4.27-1.57 4.27-1.57l.47 2.21s-2.68.9-4.21 1.62c-1.6.68-3.1 1.6-3.1 1.6zM45.75 22.18l-.4-2.26s2.86-.76 5.47-1.25 6.09-.72 6.09-.72l-1.15 3.49s-3.05-.42-5.92-.03c-1.37.18-2.74.43-4.09.77zM57.58 21.74l1.93-3.88s4.23-.08 7.88.48c3.65.57 6.98 1.43 6.91 1.47l-9.25 4.84s-2.16-1.37-4.85-2.21c-1.51-.45-2.62-.7-2.62-.7zM66.71 25.7l2.03 1.54h16.71s-.03-.54-.48-1.31c-.28-.48-.78-.99-1.31-1.52-.19-.19-.96-.79-1.54-1.17-1.47-.96-2.3-1.33-3.83-2.02L66.71 25.7z"/><path class="st1" d="M27.1 31.85c-.63 0-1.22.25-1.73.52l.09-.52H23.8l-1.33 7.51h1.66l.74-4.16c.15-.84.78-1.89 2.01-1.89h.86l.26-1.46h-.9z"/></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D13239" d="M29.1 31.8H35l-.2 1.3-5 4.8H34l-.2 1.5h-6.1l.3-1.5 4.8-4.6H29l.1-1.5zm-6.5-2.3c-.1-.1-.3-.2-.5-.3-.2-.1-.5-.1-.7-.2-.3 0-.5-.1-.8-.1h-4.8L14 39.4h1.6l.6-3.9h3.1s1.2 0 2.1-.4 1.1-1.5 1.1-1.5.1-.4.2-.9.2-1.1.2-1.5v-.5c0-.3-.1-.6-.2-.9.1-.1 0-.2-.1-.3zm-1.3 1.9s-.1.9-.3 1.8c-.1.4-.4.6-.7.7-.5.1-1.2.1-1.2.1h-2.6l.6-3.5h3.7c.2 0 .4.1.5.2.1.1.1.2.1.3-.1.2-.1.3-.1.4zm21.8-2.5h1.5l-1.7 10.5h-1.6l1.8-10.5zm8.3 2.9h1.5l.5 5.3 2.3-5.3h1.8l.5 5.3 2.3-5.3H62l-3.3 7.5h-1.8l-.5-5.3-2.4 5.4h-1.8l-.8-7.6z"/><path fill="#D13239" d="M40.2 31.9c-.4-.1-1.2-.2-1.8-.2-.6 0-.9 0-1.1.1 0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2-1.4-.1-1.6-.1c-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.3-1.5.1-2.6-1.2-3zm-.3 2.8h-3.5l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2.3 0 1.1-.1 1.7 0 .2 0 .4.2.5.3.1.3 0 1 0 1zM36 37.2zm9.6 0zm4.2-5.3c-.4-.1-1.2-.2-1.8-.2-.6 0-.9 0-1.1.1 0 0-1.1.2-1.7.9-.6.8-.8 2.5-.8 2.5s-.4 1.9-.3 2.5.3 1.2 1 1.5c.4.2.9.2 1.3.3 0 0 1.3.1 2.2-.1.6-.1 1.1-.5 1.5-.9.2-.2.3-.4.4-.6.1-.2.2-.4.2-.6l.1-.4h-1.6s-.1 1.1-1 1.2c-.5.1-1 .1-1.5.1-.2 0-1.1 0-1-.8 0-.9.1-1.1.1-1.1h5.1l.2-1.2c.2-1.7 0-2.8-1.3-3.2zm-.4 2.8H46l.1-.5s.1-.4.4-.6c.2-.2.5-.2.8-.2.3 0 1.1-.1 1.7 0 .2 0 .4.2.5.3.1.3-.1 1-.1 1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#D13239" d="M63.8 31.8l1 5.5 2.8-5.5h1.6l-4.1 7.9s-.7 1.4-1.2 1.8-.7.5-1.1.6-.5.1-.9 0l-.4-.1.2-1.4s.6.1 1 0 .7-.8.7-.8l.2-.3-1.5-7.6c.1-.1 1.6-.1 1.7-.1z"/><path fill-rule="evenodd" clip-rule="evenodd" fill="#B3B2B1" d="M69.7 32.6h1.6l.1-.6s.2-1.1.6-1.4c.1-.1.3-.1.6-.2.4-.1 1-.1 1.4-.1.7 0 .9 0 1.6.1s.5.8.5.8l-.1 1s-.1.5-.2.7c-.1.2-.5.4-.8.5-.5.2-2.4.7-2.4.7l-1.4.4s-.9.3-1.4.8c-.4.4-.7 1-.8 1.5-.1.3-.4 2.6-.4 2.6h7.8l.3-1.6h-6.2l.1-.6s.1-.7.3-.9c.1-.1.1-.2.6-.3.3-.1 1.3-.4 1.3-.4l2.3-.6s1.3-.3 1.8-1 .7-2 .7-2 .1-1.3 0-1.7-.5-.9-.9-1.1c-.5-.2-.9-.3-2.4-.3s-2.1.1-2.8.4-1.1.7-1.4 1.4c-.2.5-.4 1.9-.4 1.9zm14.8 3.7l1.1-6.6h-1.9l-6.1 6.5-.3 1.7h5.3l-.4 2.3h1.6l.4-2.3h1.5l.3-1.6h-1.5zm-1.6 0h-3.4l4.2-4.4-.8 4.4zM26 29.8h5s1.1-.9 1.9-1.5 2.2-1.5 2.2-1.5l-2.8-1.3s-2.4 1.5-3.4 2.2c-.9.6-2.9 2.1-2.9 2.1zm10.7-3.9l-2.3-1.6c1.6-.9 3.2-1.6 4.9-2.3 2.8-1.1 4.3-1.6 4.3-1.6l.5 2.2s-2.7.9-4.2 1.6c-1.7.8-3.2 1.7-3.2 1.7zm9.1-3.7l-.4-2.3s2.9-.8 5.5-1.2S57 18 57 18l-1.2 3.5s-3-.4-5.9 0c-1.4.1-2.8.3-4.1.7zm11.8-.5l1.9-3.9s4.2-.1 7.9.5 7 1.4 6.9 1.5l-9.2 4.8s-2.2-1.4-4.8-2.2c-1.6-.4-2.7-.7-2.7-.7zm9.1 4l2 1.5h16.7s0-.5-.5-1.3c-.3-.5-.8-1-1.3-1.5-.2-.2-1-.8-1.5-1.2-1.5-1-2.3-1.3-3.8-2l-11.6 4.5z"/><path fill="#D13239" d="M27.1 31.8c-.6 0-1.2.2-1.7.5l.1-.5h-1.7l-1.3 7.5h1.7l.7-4.2c.1-.8.8-1.9 2-1.9h.9l.3-1.5c-.1.1-1 .1-1 .1z"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/tpay-dark.svg b/dist/img/payments/tpay-dark.svg
index 11c635da9..0b20da0fc 100644
--- a/dist/img/payments/tpay-dark.svg
+++ b/dist/img/payments/tpay-dark.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st1{fill:#fff}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100" y1="32" x2=".273" y2="32" gradientTransform="matrix(1 0 0 -1 0 62)"><stop offset="0" stop-color="#052554"/><stop offset="1" stop-color="#4b34b3"/></linearGradient><path d="M.27 0H100v60H.27V0z" fill="url(#SVGID_1_)"/><g id="Warstwa_2"><g id="Warstwa_1-2"><path class="st1" d="M37.98 23.28c.62-.79 1.4-1.44 2.28-1.92.92-.48 1.95-.72 2.99-.71.88-.02 1.75.16 2.54.54.69.35 1.3.86 1.76 1.48.48.66.82 1.41 1.02 2.21.22.88.33 1.78.32 2.68.01 1.32-.2 2.64-.61 3.9a10.65 10.65 0 01-1.68 3.22 8.22 8.22 0 01-2.54 2.19c-1 .54-2.13.81-3.26.8-1.05.03-2.09-.19-3.03-.65a5.57 5.57 0 01-2.16-2.12l-1.76 8.25h-3.51L35 21.16h3.42l-.44 2.12zm-1.51 7.83c-.05.98.28 1.95.92 2.69.62.68 1.54 1.02 2.77 1.02.76.01 1.5-.2 2.14-.6.64-.41 1.18-.97 1.59-1.62.45-.72.79-1.51 1-2.34.23-.89.34-1.81.34-2.73 0-1.29-.29-2.28-.86-2.96a2.817 2.817 0 00-2.25-1.02c-.62-.01-1.24.11-1.81.35-.57.24-1.09.57-1.54.98-.47.43-.86.93-1.17 1.48-.32.57-.56 1.19-.7 1.83-.22.97-.37 1.94-.43 2.92zM54.56 37.58c-1.42 0-2.55-.38-3.39-1.13s-1.26-1.84-1.26-3.25c-.04-.99.22-1.98.74-2.83.5-.74 1.18-1.35 1.98-1.75.89-.45 1.84-.77 2.83-.92 1.1-.19 2.21-.3 3.33-.34l2.92-.12.09-.49c.06-.35.09-.7.09-1.05.04-.64-.2-1.27-.65-1.72-.43-.41-1.13-.62-2.12-.62-1.11 0-1.95.15-2.53.45s-1.01.88-1.33 1.74l-3.17-.34c.51-1.64 1.38-2.81 2.59-3.5s2.81-1.03 4.8-1.03c1.87 0 3.3.43 4.28 1.28.99.85 1.49 2.05 1.51 3.59 0 .3-.02.6-.06.89-.04.31-.09.63-.16.96l-2.08 9.79h-3.33l.43-2.09c-.69.7-1.48 1.31-2.34 1.8-.98.48-2.07.72-3.17.68zm6.62-8.02l-2.37.12c-.87.04-1.74.15-2.59.32-.59.11-1.15.32-1.66.63-.38.23-.68.57-.88.97-.18.41-.27.86-.26 1.31 0 .51.2 1.01.57 1.37.38.38.94.57 1.7.57.62.01 1.23-.09 1.82-.28.56-.18 1.08-.45 1.55-.8.46-.34.86-.75 1.17-1.23.32-.49.54-1.04.66-1.62l.29-1.36zM67.32 21.16h3.88l2.03 11.55 6.41-11.55h4l-10.32 17c-.49.82-.95 1.55-1.37 2.17-.37.57-.82 1.09-1.32 1.55-.45.4-.97.72-1.53.94-.63.23-1.3.34-1.98.32-.47 0-.95-.04-1.41-.14a7.83 7.83 0 01-1.25-.38l.92-2.65c.23.08.48.16.77.23.3.07.61.11.92.11.54.03 1.08-.16 1.49-.51.51-.5.94-1.08 1.28-1.71l.92-1.57-3.44-15.36zM25.8 32.06c-.04.2-.08.38-.11.54-.03.16-.05.32-.05.48 0 .6.15 1.01.45 1.23.36.24.79.36 1.22.34.65 0 1.29-.09 1.91-.28l.52 2.62c-1.05.34-2.14.5-3.24.49-1.41 0-2.5-.32-3.26-.96-.76-.64-1.14-1.6-1.13-2.89 0-.57.07-1.14.21-1.7l1.7-8.01h-7.67l.58-2.77h7.66l.92-4.3h3.51l-.92 4.31h4.29l-.58 2.77h-4.29l-1.72 8.13z"/></g></g></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="100" y1="2802.646" x2=".27" y2="2802.646" gradientTransform="translate(0 -2772.646)"><stop offset="0" stop-color="#052554"/><stop offset="1" stop-color="#4b34b3"/></linearGradient><rect fill="url(#a)" width="100" height="60" rx="4"/><path fill="#FFF" d="M38 23.3c.6-.8 1.4-1.4 2.3-1.9.9-.5 2-.7 3-.7.9 0 1.8.2 2.5.5.7.4 1.3.9 1.8 1.5.5.7.8 1.4 1 2.2.2.9.3 1.8.3 2.7 0 1.3-.2 2.6-.6 3.9-.4 1.2-.9 2.3-1.7 3.2-.7.9-1.6 1.6-2.5 2.2-1 .5-2.1.8-3.3.8-1 0-2.1-.2-3-.7-.9-.5-1.6-1.2-2.2-2.1l-1.8 8.2h-3.5l4.7-22h3.4c0 .1-.4 2.2-.4 2.2zm-1.5 7.8c0 1 .3 1.9.9 2.7.6.7 1.5 1 2.8 1 .8 0 1.5-.2 2.1-.6.6-.4 1.2-1 1.6-1.6.5-.7.8-1.5 1-2.3.2-.9.3-1.8.3-2.7 0-1.3-.3-2.3-.9-3-.6-.7-1.4-1-2.2-1-.6 0-1.2.1-1.8.4s-1.1.6-1.5 1c-.5.4-.9.9-1.2 1.5-.3.6-.6 1.2-.7 1.8-.2.9-.4 1.8-.4 2.8zm18.1 6.5c-1.4 0-2.5-.4-3.4-1.1s-1.3-1.8-1.3-3.2c0-1 .2-2 .7-2.8.5-.7 1.2-1.4 2-1.8.9-.5 1.8-.8 2.8-.9 1.1-.2 2.2-.3 3.3-.3l2.9-.1.1-.5c.1-.4.1-.7.1-1 0-.6-.2-1.3-.7-1.7-.4-.4-1.1-.6-2.1-.6-1.1 0-2 .1-2.5.5s-1 .9-1.3 1.7l-3.2-.3c.5-1.6 1.4-2.8 2.6-3.5s2.8-1 4.8-1c1.9 0 3.3.4 4.3 1.3s1.5 2 1.5 3.6c0 .3 0 .6-.1.9 0 .3-.1.6-.2 1L63 37.2h-3.3l.4-2.1c-.7.7-1.5 1.3-2.3 1.8-1 .5-2.1.7-3.2.7zm6.6-8l-2.4.1c-.9 0-1.7.1-2.6.3-.6.1-1.2.3-1.7.6-.4.2-.7.6-.9 1-.2.4-.3.9-.3 1.3 0 .5.2 1 .6 1.4.4.4.9.6 1.7.6.6 0 1.2-.1 1.8-.3.6-.2 1.1-.5 1.5-.8.5-.3.9-.8 1.2-1.2.3-.5.5-1 .7-1.6.1-.1.4-1.4.4-1.4zm6.1-8.4h3.9l2 11.5 6.4-11.5h4l-10.3 17c-.5.8-.9 1.5-1.4 2.2-.4.6-.8 1.1-1.3 1.5-.4.4-1 .7-1.5.9-.6.2-1.3.3-2 .3-.5 0-.9 0-1.4-.1-.4-.1-.8-.2-1.2-.4l.9-2.7c.2.1.5.2.8.2.3.1.6.1.9.1.5 0 1.1-.2 1.5-.5.5-.5.9-1.1 1.3-1.7l.9-1.6-3.5-15.2zM25.8 32.1c0 .2-.1.4-.1.5v.5c0 .6.1 1 .5 1.2.4.2.8.4 1.2.3.6 0 1.3-.1 1.9-.3l.5 2.6c-1 .3-2.1.5-3.2.5-1.4 0-2.5-.3-3.3-1s-1.1-1.6-1.1-2.9c0-.6.1-1.1.2-1.7l1.7-8h-7.7L17 21h7.7l.9-4.3H29l-.9 4.3h4.3l-.6 2.8h-4.3c0 .1-1.7 8.3-1.7 8.3z"/></svg>
\ No newline at end of file
diff --git a/dist/img/payments/tpay.svg b/dist/img/payments/tpay.svg
index 7a4a9299f..540e69b38 100644
--- a/dist/img/payments/tpay.svg
+++ b/dist/img/payments/tpay.svg
@@ -1 +1 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 60" xml:space="preserve"><style>.st0{fill:#192852}</style><g id="Warstwa_2_1_"><g id="Warstwa_1-2_1_"><path class="st0" d="M37.98 23.28c.62-.79 1.4-1.44 2.28-1.92.92-.48 1.95-.72 2.99-.71.88-.02 1.75.16 2.54.54.69.35 1.3.86 1.76 1.48.48.66.82 1.41 1.02 2.21.22.88.33 1.78.32 2.68.01 1.32-.2 2.64-.61 3.9a10.65 10.65 0 01-1.68 3.22 8.22 8.22 0 01-2.54 2.19c-1 .54-2.13.81-3.26.8-1.05.03-2.09-.19-3.03-.65a5.57 5.57 0 01-2.16-2.12l-1.76 8.25h-3.51L35 21.16h3.42l-.44 2.12zm-1.51 7.83c-.05.98.28 1.95.92 2.69.62.68 1.54 1.02 2.77 1.02.76.01 1.5-.2 2.14-.6.64-.41 1.18-.97 1.59-1.62.45-.72.79-1.51 1-2.34.23-.89.34-1.81.34-2.73 0-1.29-.29-2.28-.86-2.96a2.817 2.817 0 00-2.25-1.02c-.62-.01-1.24.11-1.81.35-.57.24-1.09.57-1.54.98-.47.43-.86.93-1.17 1.48-.32.57-.56 1.19-.7 1.83-.22.97-.37 1.94-.43 2.92zM54.56 37.58c-1.42 0-2.55-.38-3.39-1.13s-1.26-1.84-1.26-3.25c-.04-.99.22-1.98.74-2.83.5-.74 1.18-1.35 1.98-1.75.89-.45 1.84-.77 2.83-.92 1.1-.19 2.21-.3 3.33-.34l2.92-.12.09-.49c.06-.35.09-.7.09-1.05.04-.64-.2-1.27-.65-1.72-.43-.41-1.13-.62-2.12-.62-1.11 0-1.95.15-2.53.45s-1.01.88-1.33 1.74l-3.17-.34c.51-1.64 1.38-2.81 2.59-3.5s2.81-1.03 4.8-1.03c1.87 0 3.3.43 4.28 1.28.99.85 1.49 2.05 1.51 3.59 0 .3-.02.6-.06.89-.04.31-.09.63-.16.96l-2.08 9.79h-3.33l.43-2.09c-.69.7-1.48 1.31-2.34 1.8-.98.48-2.07.72-3.17.68zm6.62-8.02l-2.37.12c-.87.04-1.74.15-2.59.32-.59.11-1.15.32-1.66.63-.38.23-.68.57-.88.97-.18.41-.27.86-.26 1.31 0 .51.2 1.01.57 1.37.38.38.94.57 1.7.57.62.01 1.23-.09 1.82-.28.56-.18 1.08-.45 1.55-.8.46-.34.86-.75 1.17-1.23.32-.49.54-1.04.66-1.62l.29-1.36zM67.32 21.16h3.88l2.03 11.55 6.41-11.55h4l-10.32 17c-.49.82-.95 1.55-1.37 2.17-.37.57-.82 1.09-1.32 1.55-.45.4-.97.72-1.53.94-.63.23-1.3.34-1.98.32-.47 0-.95-.04-1.41-.14a7.83 7.83 0 01-1.25-.38l.92-2.65c.23.08.48.16.77.23.3.07.61.11.92.11.54.03 1.08-.16 1.49-.51.51-.5.94-1.08 1.28-1.71l.92-1.57-3.44-15.36zM25.8 32.06c-.04.2-.08.38-.11.54-.03.16-.05.32-.05.48 0 .6.15 1.01.45 1.23.36.24.79.36 1.22.34.65 0 1.29-.09 1.91-.28l.52 2.62c-1.05.34-2.14.5-3.24.49-1.41 0-2.5-.32-3.26-.96-.76-.64-1.14-1.6-1.13-2.89 0-.57.07-1.14.21-1.7l1.7-8.01h-7.67l.58-2.77h7.66l.92-4.3h3.51l-.92 4.31h4.29l-.58 2.77h-4.29l-1.72 8.13z"/></g></g></svg>
\ No newline at end of file
+<svg width="100" height="60" xmlns="http://www.w3.org/2000/svg"><rect fill="#FFF" width="100" height="60" rx="4"/><path fill="#192852" d="M38 23.3c.6-.8 1.4-1.4 2.3-1.9.9-.5 2-.7 3-.7.9 0 1.8.2 2.5.5.7.4 1.3.9 1.8 1.5.5.7.8 1.4 1 2.2.2.9.3 1.8.3 2.7 0 1.3-.2 2.6-.6 3.9-.4 1.2-.9 2.3-1.7 3.2-.7.9-1.6 1.6-2.5 2.2-1 .5-2.1.8-3.3.8-1 0-2.1-.2-3-.7-.9-.5-1.6-1.2-2.2-2.1l-1.8 8.2h-3.5l4.7-22h3.4c0 .1-.4 2.2-.4 2.2zm-1.5 7.8c0 1 .3 1.9.9 2.7.6.7 1.5 1 2.8 1 .8 0 1.5-.2 2.1-.6.6-.4 1.2-1 1.6-1.6.5-.7.8-1.5 1-2.3.2-.9.3-1.8.3-2.7 0-1.3-.3-2.3-.9-3-.6-.7-1.4-1-2.2-1-.6 0-1.2.1-1.8.4s-1.1.6-1.5 1c-.5.4-.9.9-1.2 1.5-.3.6-.6 1.2-.7 1.8-.2.9-.4 1.8-.4 2.8zm18.1 6.5c-1.4 0-2.5-.4-3.4-1.1s-1.3-1.8-1.3-3.2c0-1 .2-2 .7-2.8.5-.7 1.2-1.4 2-1.8.9-.5 1.8-.8 2.8-.9 1.1-.2 2.2-.3 3.3-.3l2.9-.1.1-.5c.1-.4.1-.7.1-1 0-.6-.2-1.3-.7-1.7-.4-.4-1.1-.6-2.1-.6-1.1 0-2 .1-2.5.5s-1 .9-1.3 1.7l-3.2-.3c.5-1.6 1.4-2.8 2.6-3.5s2.8-1 4.8-1c1.9 0 3.3.4 4.3 1.3s1.5 2 1.5 3.6c0 .3 0 .6-.1.9 0 .3-.1.6-.2 1L63 37.2h-3.3l.4-2.1c-.7.7-1.5 1.3-2.3 1.8-1 .5-2.1.7-3.2.7zm6.6-8l-2.4.1c-.9 0-1.7.1-2.6.3-.6.1-1.2.3-1.7.6-.4.2-.7.6-.9 1-.2.4-.3.9-.3 1.3 0 .5.2 1 .6 1.4.4.4.9.6 1.7.6.6 0 1.2-.1 1.8-.3.6-.2 1.1-.5 1.5-.8.5-.3.9-.8 1.2-1.2.3-.5.5-1 .7-1.6.1-.1.4-1.4.4-1.4zm6.1-8.4h3.9l2 11.5 6.4-11.5h4l-10.3 17c-.5.8-.9 1.5-1.4 2.2-.4.6-.8 1.1-1.3 1.5-.4.4-1 .7-1.5.9-.6.2-1.3.3-2 .3-.5 0-.9 0-1.4-.1-.4-.1-.8-.2-1.2-.4l.9-2.7c.2.1.5.2.8.2.3.1.6.1.9.1.5 0 1.1-.2 1.5-.5.5-.5.9-1.1 1.3-1.7l.9-1.6-3.5-15.2zM25.8 32.1c0 .2-.1.4-.1.5v.5c0 .6.1 1 .5 1.2.4.2.8.4 1.2.3.6 0 1.3-.1 1.9-.3l.5 2.6c-1 .3-2.1.5-3.2.5-1.4 0-2.5-.3-3.3-1s-1.1-1.6-1.1-2.9c0-.6.1-1.1.2-1.7l1.7-8h-7.7L17 21h7.7l.9-4.3H29l-.9 4.3h4.3l-.6 2.8h-4.3c0 .1-1.7 8.3-1.7 8.3z"/></svg>
\ No newline at end of file
diff --git a/dist/js/tabler-charts.js b/dist/js/tabler-charts.js
deleted file mode 100644
index 764f184ea..000000000
--- a/dist/js/tabler-charts.js
+++ /dev/null
@@ -1,185 +0,0 @@
-/*!
-  * Tabler v0.9.0 (https://tabler.io)
-  * Copyright 2018-2020 codecalm
-  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */
-'use strict';
-
-(function ($) {
-  $(document).ready(function () {
-    $().peity &&
-    $('[data-spark]').each(function () {
-      const $this = $(this),
-        data = $this.attr('data-spark'),
-        color = $this.attr('data-spark-color') || 'blue',
-        type = $this.attr('data-spark-type') || 'line';
-
-      const $div = $('<div />').html(data);
-      $this.append($div);
-
-      let strokeColor = tabler.colors[color],
-        fillColor = tabler.colors[color];
-
-      if (type === 'donut' || type === 'pie') {
-        fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)];
-      } else if (type === 'bar') {
-        fillColor = [fillColor];
-      } else if (type === 'line') {
-        fillColor = tabler.hexToRgbA(fillColor, 0.1);
-      }
-
-      $div.peity(type, {
-        width: $this.width(),
-        height: $this.height(),
-        // max: 100,
-        // min: 0,
-        stroke: strokeColor,
-        strokeWidth: 2,
-        fill: fillColor,
-        padding: 0.2,
-        innerRadius: type === 'donut' ? 17 : 0,
-      });
-    });
-  });
-})(jQuery);
-
-/*
-charts default configuration
- */
-if (window.Apex) {
-  const borderColor = 'rgba(0, 0, 0, 0.09)';
-  const mutedColor = '#888e9a';
-
-  window.Apex = {
-    chart: {
-      fontFamily: 'inherit',
-      foreColor: 'currentColor',
-      toolbar: {
-        show: false,
-      },
-      zoom: {
-        enabled: false,
-      },
-      animations: {
-        enabled: false,
-      },
-    },
-
-    grid: {
-      show: false,
-      position: 'back',
-      borderColor: borderColor,
-      padding: {
-        right: 0,
-        left: 0,
-        bottom: 0,
-        top: 0,
-      },
-    },
-
-    dataLabels: {
-      enabled: false,
-      dropShadow: {
-        enabled: false,
-      },
-    },
-
-    plotOptions: {
-      pie: {
-        customScale: 1,
-        expandOnClick: false,
-        dataLabels: {
-          minAngleToShowLabel: 10,
-        },
-        donut: {
-          size: '80%'
-        }
-      },
-    },
-
-    stroke: {
-      width: 2,
-      curve: 'smooth',
-      lineCap: "round",
-    },
-
-    fill: {
-      type: 'solid',
-      opacity: 1,
-    },
-
-    markers: {
-      size: 0,
-      strokeWidth: 1,
-      radius: 2,
-      hover: {
-        size: 4,
-      },
-    },
-
-    legend: {
-      show: true,
-      fontSize: '14px',
-      markers: {
-        width: 8,
-        height: 8,
-      },
-      itemMargin: {
-        horizontal: 0,
-        vertical: 8,
-      },
-    },
-
-    title: {
-      margin: 0,
-      floating: true,
-      offsetX: 10,
-      style: {
-        fontSize: '18px',
-      },
-    },
-
-    subtitle: {
-      margin: 0,
-    },
-
-    tooltip: {
-      fillSeriesColor: false,
-    },
-
-    xaxis: {
-      labels: {
-        style: {
-          colors: mutedColor,
-          fontSize: '12px',
-        },
-        datetimeFormatter: {
-          year: 'yyyy',
-          month: 'MMM \'yy',
-          day: 'd MMM',
-          hour: 'HH:mm'
-        }
-      },
-      tooltip: {
-        enabled: false,
-      },
-      axisBorder: {
-        color: borderColor,
-        height: 0,
-      },
-      axisTicks: {
-        show: true,
-        height: 4,
-        color: borderColor,
-      },
-    },
-
-    yaxis: {
-      show: false,
-      labels: {
-        show: false,
-      },
-    },
-  };
-}
-//# sourceMappingURL=tabler-charts.js.map
diff --git a/dist/js/tabler-charts.js.map b/dist/js/tabler-charts.js.map
deleted file mode 100644
index 0a0c5efbd..000000000
Binary files a/dist/js/tabler-charts.js.map and /dev/null differ
diff --git a/dist/js/tabler.js b/dist/js/tabler.js
deleted file mode 100644
index 965a2db49..000000000
--- a/dist/js/tabler.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*!
-  * Tabler v0.9.0 (https://tabler.io)
-  * Copyright 2018-2020 codecalm
-  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */
-'use strict';
-
-const tabler = {
-  colorVariation: function(color, variation) {
-    const colorValue = this.colors[color];
-
-    if (colorValue) {
-      switch (variation) {
-        case 'light':
-          return this.mixColors(colorValue, '#ffffff', 70);
-        case 'lighten':
-          return this.mixColors(colorValue, '#ffffff', 30);
-        case 'lightest':
-          return this.mixColors(colorValue, '#ffffff', 10);
-        case 'dark':
-          return this.mixColors(colorValue, '#000000', 80);
-        case 'darken':
-          return this.mixColors(colorValue, '#000000', 40);
-        case 'darkest':
-          return this.mixColors(colorValue, '#000000', 20);
-      }
-
-      return colorValue;
-    }
-
-    throw new Error('Wrong color: ' + color);
-  },
-
-  hexToRgbA: function(hex, opacity) {
-    let c;
-
-    opacity = opacity || 1;
-
-    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-      c = hex.substring(1).split('');
-      if (c.length === 3) {
-        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-      }
-      c = '0x' + c.join('');
-      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
-    }
-    throw new Error('Bad Hex');
-  },
-
-  mixColors: function(color_1, color_2, weight) {
-    color_1 = color_1.substr(1);
-    color_2 = color_2.substr(1);
-
-    function d2h(d) {
-      return d.toString(16);
-    }
-
-    function h2d(h) {
-      return parseInt(h, 16);
-    }
-
-    weight = typeof weight !== 'undefined' ? weight : 50;
-
-    let color = '#';
-
-    for (let i = 0; i <= 5; i += 2) {
-      let v1 = h2d(color_1.substr(i, 2)),
-        v2 = h2d(color_2.substr(i, 2));
-
-      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-      while (val.length < 2) {
-        val = '0' + val;
-      }
-
-      color += val;
-    }
-
-    return color;
-  },
-
-  colors: (window.tabler_colors || []),
-
-  toggleFullscreen: function(elem) {
-    elem = elem || document.documentElement;
-    if (
-      !document.fullscreenElement &&
-      !document.mozFullScreenElement &&
-      !document.webkitFullscreenElement &&
-      !document.msFullscreenElement
-    ) {
-      if (elem.requestFullscreen) {
-        elem.requestFullscreen();
-      } else if (elem.msRequestFullscreen) {
-        elem.msRequestFullscreen();
-      } else if (elem.mozRequestFullScreen) {
-        elem.mozRequestFullScreen();
-      } else if (elem.webkitRequestFullscreen) {
-        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-      }
-    } else {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      } else if (document.msExitFullscreen) {
-        document.msExitFullscreen();
-      } else if (document.mozCancelFullScreen) {
-        document.mozCancelFullScreen();
-      } else if (document.webkitExitFullscreen) {
-        document.webkitExitFullscreen();
-      }
-    }
-  },
-};
-
-$(document).ready(function() {
-  const $body = $('body');
-
-  $body.on('click', '[data-toggle="menubar"]', function(e) {
-    $body.toggleClass('aside-visible');
-
-    e.preventDefault();
-    return false;
-  });
-
-  // $('[data-toggle="tooltip"]').tooltip();
-  // $('[data-toggle="popover"]').popover();
-
-  /*
-	NoUiSlider
-	*/
-	let sliders = document.querySelectorAll("[data-slider]");
-	for (let i = 0; i < sliders.length; i++) {
-		let dataSlider;
-		if (sliders[i].getAttribute("data-slider")) {
-			dataSlider = JSON.parse(sliders[i].getAttribute("data-slider"));
-    }
-		noUiSlider.create(sliders[i],dataSlider);
-	}
-
-  /*
-  Autosize plugin
-   */
-  if (window.autosize) {
-    (function() {
-      const elements = document.querySelectorAll('[data-toggle="autosize"]');
-
-      if (elements.length) {
-        elements.forEach(function(element) {
-          autosize(element);
-        });
-      }
-    })();
-  }
-
-  /*
-  Imask plugin
-   */
-  if (window.IMask) {
-    (function() {
-      const $elem = $('[data-mask]');
-
-      if ($elem) {
-        $elem.each(function() {
-          IMask($(this).get(0), {
-            mask: $(this).attr('data-mask'),
-            lazy: $(this).attr('data-mask-visible') === 'true',
-          });
-        });
-      }
-    })();
-  }
-
-  /**
-   * Seelectize plugin
-   */
-  if (jQuery && jQuery().selectize) {
-    const $elem = $('[data-selectize]');
-
-    if ($elem) {
-      $elem.selectize();
-    }
-  }
-});
-
-window.tabler = tabler;
-//# sourceMappingURL=tabler.js.map
diff --git a/dist/js/tabler.js.map b/dist/js/tabler.js.map
deleted file mode 100644
index 11a07de76..000000000
Binary files a/dist/js/tabler.js.map and /dev/null differ
