@xenknight/framework7 0.0.5 → 0.0.7

package/framework7.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 0.0.3
+ * Framework7 0.0.6
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2025 Vladimir Kharlampidi
+ * Copyright 2014-2026 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 14, 2025
+ * Released on: January 1, 2026
  */
 
 /*====================
@@ -166,7 +166,7 @@
 }
 @font-face {
   font-family: 'framework7-core-icons';
-  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAA0sABAAAAAAGLwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcmrEdT0dERUYAAAGIAAAAIwAAACQAewBXR1BPUwAAAawAAAAuAAAANuAY7+xHU1VCAAAB3AAAAZ4AAAP6ALYH7k9TLzIAAAN8AAAASgAAAGBRKF+WY21hcAAAA8gAAACJAAABYt6F0cBjdnQgAAAEVAAAAAQAAAAEABEBRGdhc3AAAARYAAAACAAAAAj//wADZ2x5ZgAABGAAAATOAAAKDJkUuoRoZWFkAAAJMAAAADAAAAA2IlX292hoZWEAAAlgAAAAIAAAACQHgQM7aG10eAAACYAAAABgAAABHCxp//lsb2NhAAAJ4AAAAJAAAACQQrpFRm1heHAAAApwAAAAHwAAACAAjQBPbmFtZQAACpAAAAFVAAAC3EU7ispwb3N0AAAL6AAAAUIAAAJaVPgZiHicY2BgYGQAgts30q6A6Ps50bYwGgBRFwa1AAB4nGNgZGBg4AFiGSBmAkJmBk0GRgYtBjcgmwUsxgAADWAA0wB4nGNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB4nHVTW07CQBQ9Q2vAJwhVGwW0UJEgvt+Kb+XDT3dAYjQmxA9DXIDLMC7CLz9dg3EJfrkLPDMF+pg0TTPTe84998ydWwgAIyiiDtFudZ6QgskIul1IRLQfH1qMwfsiZqo1BWF8IAkLL4lO4scwDddowGC8iia2kYbDp4gKd5Ncy3yKyPMrjxyuMBHAHdiYxgwZHrqK8QA6xxpTAyyNBdzgGW/4wq8wRUU0xb14Fe/iU3yLP9a2qGRhUeUXIuoZuCrucHdGtTDTrxTk7Wq8nHJWiPCOeM4wz8V8hLOscYLubMZKWCcvzpfHuNAY0Q6ucI3TkPh+D89iVt3OUsTnBm8grsI5xrRcz9dmD9GrNjSk38M1jGpq0uEBZ1LvppyvGu//kh4tpV7mm1Ycl6zcwMsxd3EMqX+C4RAuY3K6t3hKOa02fdt0lVF7z0GWfKltDarIjFP2qkx92UF/an18h5UyVJeRfnyI/ajSwy3ucMh8S+VmeeLwPdTYhSDmZdeVdz8qvV+zMzLHn5I9/p39iHe6JHOy3BXYSQelf3GmQG8AAHicY2Bh/MI4gYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgZWaAAUYGJBCQ5prC0MCgwFDFeOD/AQY9ps+MxTA1jAfAShQYxABDtQxkAAB4nGNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkKzDoMlgyxDNU/f8PFAXxDIC8xP///z/+f/3/1f8b/q+HmgAHjGwMcCFGJiDBxICmAGI1HLAwMLCysXNwcnHz8PIxEAP4GQQEhYRFRMXEJSSlpGVk5eQVFJWUVVTV1DU0iTKA1gAAxH4T6AAAAAARAUQAAAAB//8AAnic7VXPTxtHFJ63xh6DY++uf+yq0FJs1l6ktk7x2l4aDEaFEMkCUlXQUi5A6nAprYoqu1IVbG6gKNRVBUJBuUVqpeYSfGirHID2QhrVrWQ1UlXlRA+VWnri0EYK677ZtRMg/0EVaWZn3puZN2++9723hCMiIeQ6TBAboSS6BeRsqkybyN+xLYf9Qaps43BKtmxMbWfqMnXAo1QZmF4TNVHVxE5x5eO5OZgwbomgoTXAtmt2nIndbP5M90z3v9dxx3Q21L7GmWrShL0Z3oApzDCe+EiAEG/I4ZdiyXgkJvkdoUgcdJXK6lfjqdR46sZ8JjOfgUTbQltxAQZS4319429lmNJ4+PyHbe8uEOv+2neg4QVeQsIhnmNW0qBG4snYiyCBCgC/uzok186OSwq69vkyx+27pA7X9g7T7vOWv7U/YBe+wBrwHFqRqZpQHZ0hZkMK+KkcYh6ipzCwFFmi0fT52dmrl7ro1zNDQzODq0uRYoB2zV6dnT3fH6WDM4ODM6ZfJEK28a12QnwUTerb+byyuQlJc2j4fgibsEqceGsgyDbJFDaNuyWlUlFKv8Wtsb6XuOF7yDJ7Osig6iXgFaNSUibqI4HaQ8TiJcQCa5meTAO67+dBZtCehYgd8OX45u1t9v59/mew7TNMULaQYHf4yZ7ls47OqPreTaVYVL7BbyF8cj2Brsq0vhwuFBUTR2O1aY47JC4i44swlFTWZTSjch0KJ3iVjiavwHEDe8m9Rus1fjKONjbABjGwbWz8uac3lvRHDx6rjSO27WnMGGBYe3XYZDhpn+2yAXoQwAZmGeiBJBFQsMAwkTC5AW7qF5zfOv3OUeqRaC9EnYIfZRQlD+2tn5+H1yHCzpOTp/UkxD10hUrYPZIzl3NCxMMEpvPQXI6aeJApqOB59k8hfRAM2BPBAFQMDSqHmnZd0zBm/5J3yC/wCvEQghGTJR48gLfoSTkz0yIILe/bfY5zbg9/5trnfIuL/9IJdIA/4/ZY/k3DMNpnHEP2UPWmGRCImAOxuE0kGMKYuVm+YdCOMdtR5/XBpG9SeVUfG/tgbGuyv3+yf+lt32Q7SmN697k005zEgjELk8ukFWUJdwIIybPRgCGfR91JP5ENyAnLz+mbSqGgsBpR+wtuwTqiJJIXsCrUq4GP+dfJSkQaGNtUk5NXyouL5Sv3L2SzF4az2eHR9lFsI+0jI+2wvnh7cfG2cXT52uXsp9kfrCWzPcmhOfgI+UngsT1Zh7lSSWk0uHhMwPjUjB3ugNslrYTYRRM3Ue9nSUXBoYZUiCIXYjL0KPHwj964z+s17gVaW33GPS/4vAnve9xBazjceuSvMDnOVjkfJL0a7qz71E7uwCWGa9Li15PEvXOSUlHBuYJ8XXEKksUwYvKnB5yQYud9SB6MrskeiXH0H9G17HC10Itu3iHa05+4oNsl3G+m07zbzjlGdsVTdYpVIBWrk5LLwRQO+XydQ7UprsJFSDPjUFxIajFJwIt8xzK8urZera6vrRWSBWxF9n0ZuqpV49cq3CjqhYJeNL+nc9i8M5gIqhWWu8Zd6CnBKpvGzRy2Mf84Df1jOYRxExNWFrHOaUcVqyNq8SWzncZUsKjKctf6MSBJlylddlr0hDefwvQ/M6nleQAAeJxjYGRgYADis2XfmeP5bb4ycDMxgMD9nGhbGP3/x79eljSmz0AuBwNYGgBQ5wydeJxjYGRgYPr8r5dBjyXt/w8GBpY0BqAICnAHAJFTBcN4nGPYzSDIAAKrGAY1YAwAYh0gPgDk7APSs4D4EEjs/0+G40AxIGZJg4pbALETEJ8Fip/9/4PRDch2gYqB2KuBGKiW6c3//wy7gWyG/z9AZjKdhehnMgbqA4oDAJFZGHgAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHcAf4CKAI6AlACYgKCApICogLUAuoDCgMqAzwDWgNsA5ADrgO+A/IEDAQ8BFwEfASOBLYEzATmBQZ4nGNgZGBgcGeQY2BhAAEmIGZkAIk5MOiBBAAN5gDdAHicrZC9asMwFIWP8gftUDo00FFjEmIjawlkTcmSpXTwbhw3EYmtoARC6ON06Na9Q5+iY6FP0IfosaJChwwdYri6n6/Olc4VgCu8QuD49fAQWKCLl8ANXOIjcBNa3AVuoSueA7dxLT4Dd9Bt3FIpWhf8u/ddNQsM8BS4gRu8B25ijq/ALQzEPnAbUrwF7rD+jQksNjjAwWCBJXaQ9Jyjz6yhGBpDcoo1Mp5qUDIcKzOqM1JdL3mG8buY2M3BmcVyJ3t5X2ql9VCm62xuSuPkbJm5dVZuzJzKRzbXrQX2NOGwwggRr665IBnPFbaUuqws9tatRlFuXRGZ3FYsn9T+FUx9ceez43yFnyrmXBJjxv8tHPUJuyOuiuvv62Bqq93UukUhdazkWJ40y3qio0RF9YucY/aUOsd943WSZhSNxT7X4yEt3NbYSiqVxEopeYZLfwCb64ZqAAAAeJxtUIlOwkAUnAGVW4rch36M8b7v2zSlLdIIXbJdxL/HhbaBJm6yyb6ZebPzHlJYnvkcxH/nWF8ihTQMVFFDHQ000UIbHXTRwz4OcIgjrTvBKc5wjgtc4grXuMEt7nCPBzziCc94wSve8I4PfDLFNDe4yS1mmGWOeRZYZInbLNNghTusssY6G2yyxTY77LLHXe7lA9eS9tD0RFCxh+6PFL4pva+hWiC5iBw75ZgbuQOl65IlpZjFVUGz9ndf/Oq3kVBqk1LCtrhON3yhvIFnW8rTiD0SgbvoKIfmfaGUGGvLnLQcTyyYatztiJlvWlMppJUJhFRRxDBEiOdj7XRSiuYIicqKiJDium3ZcUeuck0ppr6z+D2q9dATJc0w23qW5aArozCDFhjJferVJJy1Yjs0i/nschKN15Kdofcf+xC0ZgAA') format('woff');
+  src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
   font-weight: 400;
   font-style: normal;
 }
@@ -2217,76 +2217,1725 @@ html.device-full-viewport body {
 .md .navbar-inner-centered-title .title {
   text-align: center;
 }
-/* === Toolbar === */
+/* === Navbar New === */
 :root {
   /*
-  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
-  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-toolbar-border-color: var(--f7-bars-border-color);
-  --f7-toolbar-link-color: var(--f7-bars-link-color);
-  --f7-toolbar-text-color: var(--f7-bars-text-color);
+  --f7-navbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-navbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-navbar-new-border-color: var(--f7-bars-border-color);
   */
-  --f7-tabbar-link-active-bg-color: transparent;
-  --f7-tabbar-label-text-transform: none;
-  --f7-toolbar-hide-show-transition-duration: 400ms;
+  --f7-navbar-new-hide-show-transition-duration: 400ms;
+  --f7-navbar-new-title-line-height: 1.2;
+  --f7-navbar-new-subtitle-text-align: inherit;
+  --f7-navbar-new-large-title-line-height: 1.2;
+  --f7-navbar-new-large-title-text-color: inherit;
+  --f7-navbar-new-large-title-padding-left: 16px;
+  --f7-navbar-new-large-title-padding-right: 16px;
 }
 .ios {
-  --f7-toolbar-height: 44px;
-  --f7-toolbar-font-size: 17px;
-  --f7-toolbar-inner-padding-left: 8px;
-  --f7-toolbar-inner-padding-right: 8px;
-  --f7-toolbar-link-font-weight: 400;
   /*
-  --f7-toolbar-link-height: var(--f7-toolbar-height);
-  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
-  --f7-tabbar-link-active-color: var(--f7-theme-color);
+  --f7-navbar-new-link-color: var(--f7-bars-link-color);
+  --f7-navbar-new-text-color: var(--f7-bars-text-color);
   */
-  --f7-tabbar-icons-height: 50px;
-  --f7-tabbar-icons-tablet-height: 50px;
-  --f7-tabbar-icon-size: 28px;
-  --f7-tabbar-link-text-transform: none;
-  --f7-tabbar-link-font-weight: 400;
-  --f7-tabbar-link-letter-spacing: 0;
-  --f7-tabbar-label-font-size: 12px;
-  --f7-tabbar-label-tablet-font-size: 14px;
-  --f7-tabbar-label-font-weight: 500;
-  --f7-tabbar-label-letter-spacing: 0.01;
-  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
+  --f7-navbar-new-link-color: var(--f7-bars-text-color);
+  --f7-navbar-new-height: 76px;
+  --f7-navbar-new-font-size: 17px;
+  --f7-navbar-new-title-font-size: inherit;
+  --f7-navbar-new-inner-padding-left: 16px;
+  --f7-navbar-new-inner-padding-right: 16px;
+  --f7-navbar-new-title-font-weight: 600;
+  --f7-navbar-new-title-margin-left: 0;
+  --f7-navbar-new-title-margin-right: 0;
+  --f7-navbar-new-title-text-align: center;
+  --f7-navbar-new-subtitle-font-size: 10px;
+  --f7-navbar-new-subtitle-line-height: 1;
+  --f7-navbar-new-large-title-height: 52px;
+  --f7-navbar-new-large-title-font-size: 34px;
+  --f7-navbar-new-large-title-font-weight: 700;
+  --f7-navbar-new-large-title-letter-spacing: -0.03em;
+  --f7-navbar-new-large-title-padding-vertical: 6px;
+  /*
+  --f7-navbar-new-link-height: var(--f7-navbar-new-height);
+  --f7-navbar-new-link-line-height: var(--f7-navbar-new-height);
+  */
+  --f7-navbar-new-subtitle-text-color: rgba(0, 0, 0, 0.55);
+  --f7-navbar-new-bars-bg-color: rgba(255, 255, 255, 0.5);
+}
+.ios .dark,
+.ios.dark {
+  --f7-navbar-new-subtitle-text-color: rgba(255, 255, 255, 0.55);
+  --f7-navbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+}
+.md {
+  --f7-navbar-new-height: 64px;
+  --f7-navbar-new-font-size: 16px;
+  --f7-navbar-new-title-font-size: 22px;
+  --f7-navbar-new-inner-padding-left: 0px;
+  --f7-navbar-new-inner-padding-right: 0px;
+  --f7-navbar-new-title-font-weight: 400;
+  --f7-navbar-new-title-margin-left: 0px;
+  --f7-navbar-new-title-margin-right: 16px;
+  --f7-navbar-new-title-text-align: left;
+  --f7-navbar-new-subtitle-font-size: 14px;
+  --f7-navbar-new-subtitle-line-height: 1.2;
+  --f7-navbar-new-large-title-font-size: 28px;
+  --f7-navbar-new-large-title-height: 88px;
+  --f7-navbar-new-large-title-font-weight: 400;
+  --f7-navbar-new-large-title-letter-spacing: 0;
+  --f7-navbar-new-large-title-padding-vertical: 8px;
+  --f7-navbar-new-link-height: 48px;
+  --f7-navbar-new-link-line-height: 48px;
+}
+.md,
+.md .dark,
+.md [class*='color-'] {
+  --f7-navbar-new-link-color: var(--f7-md-on-surface);
+  --f7-navbar-new-text-color: var(--f7-md-on-surface);
+  --f7-navbar-new-subtitle-text-color: var(--f7-md-on-surface-variant);
+}
+.navbars-new,
+.navbar-new {
+  z-index: 500;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.navbars-new {
+  position: absolute;
+}
+.navbars-new .navbar-new {
+  z-index: auto;
+}
+.navbars-new .navbar-new-transitioning {
+  z-index: 500;
+}
+.navbar-new {
+  --f7-navbar-new-large-collapse-progress: 0;
+  position: relative;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  height: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  color: var(--f7-navbar-new-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-navbar-new-font-size);
+}
+.navbar-new b {
+  font-weight: 500;
+}
+.navbar-new a {
+  color: var(--f7-navbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+}
+.navbar-new a.link {
+  display: flex;
+  justify-content: flex-start;
+  line-height: var(--f7-navbar-new-link-line-height, var(--f7-navbar-new-height));
+  height: var(--f7-navbar-new-link-height, var(--f7-navbar-new-height));
+}
+.navbar-new .title,
+.navbar-new .left,
+.navbar-new .right {
+  position: relative;
+  z-index: 10;
+}
+.navbar-new .title {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 10;
+  font-weight: var(--f7-navbar-new-title-font-weight);
+  display: inline-block;
+  line-height: var(--f7-navbar-new-title-line-height);
+  text-align: var(--f7-navbar-new-title-text-align);
+  font-size: var(--f7-navbar-new-title-font-size);
+  margin-left: var(--f7-navbar-new-title-margin-left);
+  margin-right: var(--f7-navbar-new-title-margin-left);
+}
+.navbar-new .subtitle {
+  display: block;
+  color: var(--f7-navbar-new-subtitle-text-color);
+  font-weight: normal;
+  font-size: var(--f7-navbar-new-subtitle-font-size);
+  line-height: var(--f7-navbar-new-subtitle-line-height);
+  text-align: var(--f7-navbar-new-subtitle-text-align);
+}
+.navbar-new .left,
+.navbar-new .right {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.navbar-new .right:first-child {
+  position: absolute;
+  height: 100%;
+}
+.navbar-new.no-outline .navbar-new-bg:after,
+.navbar-new .no-outline .navbar-new-bg:after {
+  display: none !important;
+}
+.navbar-new.no-outline .title-large:after,
+.navbar-new .no-outline .title-large:after {
+  display: none !important;
+}
+.navbar-new.navbar-new-hidden .navbar-new-bg:before,
+.navbar-new-hidden .navbar-new .navbar-new-bg:before {
+  opacity: 0 !important;
+}
+.navbar-new-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  transition-property: transform;
+}
+.navbar-new-transitioning,
+.navbar-new-transitioning .left,
+.navbar-new-transitioning .title,
+.navbar-new-transitioning .right,
+.navbar-new-transitioning .title-large-text,
+.navbar-new-transitioning .navbar-new-bg,
+.navbar-new-transitioning .subnavbar,
+.navbar-new-transitioning .navbar-new-bg:before {
+  transition-duration: var(--f7-navbar-new-hide-show-transition-duration);
+}
+.navbar-new-page-transitioning {
+  transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+}
+.navbar-new-page-transitioning .title-large-text,
+.navbar-new-page-transitioning .navbar-new-bg {
+  transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+}
+.navbar-new-hidden {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-height)), 0);
+}
+.navbar-new-hidden .navbar-new-inner {
+  pointer-events: none;
+}
+.navbar-new-hidden .navbar-new-inner > .left,
+.navbar-new-hidden .navbar-new-inner > .title,
+.navbar-new-hidden .navbar-new-inner > .right {
+  opacity: 0 !important;
+}
+.navbar-new-hidden .subnavbar {
+  pointer-events: auto;
+}
+.navbar-new-hidden-statusbar {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-height) - var(--f7-safe-area-top)), 0);
+}
+.navbar-new-large-hidden .navbar-new-large {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new-inner {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--f7-safe-area-top) calc(var(--f7-navbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-new-inner-padding-left) + var(--f7-safe-area-left));
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.views > .navbar-new,
+.view > .navbar-new,
+.page > .navbar-new {
+  position: absolute;
+}
+.ios .navbar-new:not(.navbar-new-large) .navbar-new-bg {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new-large .title {
+  opacity: var(--f7-navbar-new-large-collapse-progress);
+}
+.navbar-new-large-collapsed {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new-large-collapsed .title-large {
+  pointer-events: none;
+}
+.navbar-new-large-collapsed .title-large-text {
+  opacity: 0;
+}
+.navbar-new .title-large {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  height: var(--f7-navbar-new-large-title-height);
+  z-index: 5;
+}
+.navbar-new .title-large-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--f7-navbar-new-large-title-text-color);
+  letter-spacing: var(--f7-navbar-new-large-title-letter-spacing);
+  font-size: var(--f7-navbar-new-large-title-font-size);
+  font-weight: var(--f7-navbar-new-large-title-font-weight);
+  line-height: var(--f7-navbar-new-large-title-line-height);
+  padding-left: calc(var(--f7-navbar-new-large-title-padding-left) + var(--f7-safe-area-left));
+  padding-right: calc(var(--f7-navbar-new-large-title-padding-right) + var(--f7-safe-area-right));
+  padding-top: var(--f7-navbar-new-large-title-padding-vertical);
+  padding-bottom: var(--f7-navbar-new-large-title-padding-vertical);
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  transform: translate3d(0px, calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)), 0);
+  transform-origin: calc(var(--f7-navbar-new-large-title-padding-left) + var(--f7-safe-area-left)) center;
+}
+.navbar-no-title-large-transition .title-large-text {
+  transition-duration: 0ms;
+}
+.navbar-new ~ *,
+.navbars-new ~ * {
+  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+.navbar-new ~ * .page-with-navbar-new-large,
+.navbar-new ~ .page-with-navbar-new-large,
+.navbars-new ~ * .page-with-navbar-new-large,
+.navbars-new ~ .page-with-navbar-new-large,
+.page-with-navbar-new-large .navbar-new ~ * {
+  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+}
+.page.no-navbar,
+.page.no-navbar .navbar-new ~ * {
+  --f7-page-navbar-offset: var(--f7-safe-area-top);
+}
+.ios {
+  --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-new-inner-padding-left));
+  --f7-navbarTitleLargeOffset: var(--f7-navbar-new-large-title-padding-left);
+}
+.ios .navbar-new .title-large {
+  align-items: flex-end;
+}
+.ios .navbar-new a.link {
+  height: 100%;
+  padding: 0 12px;
+}
+.ios .navbar-new a.icon-only {
+  width: 44px;
+  margin: 0;
+  justify-content: center;
+}
+.ios .navbar-new .left a + a,
+.ios .navbar-new .right a + a {
+  margin-left: 16px;
+}
+.ios .navbar-new b {
+  font-weight: 600;
+}
+.ios .navbar-new .left {
+  margin-right: 10px;
+}
+.ios .navbar-new .right {
+  margin-left: 10px;
+}
+.ios .navbar-new .right:first-child {
+  right: calc(8px + var(--f7-safe-area-right));
+}
+.ios .navbar-new-bg {
+  height: 100%;
+}
+.ios .navbar-new-bg::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
+  -webkit-mask-image: linear-gradient(to bottom, black calc(50% + var(--f7-safe-area-top, 0px)), transparent 100%);
+          mask-image: linear-gradient(to bottom, black calc(50% + var(--f7-safe-area-top, 0px)), transparent 100%);
+}
+.ios .navbar-new-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(to bottom, var(--f7-navbar-new-bars-bg-color) var(--f7-safe-area-top, 0px), transparent 100%);
+}
+.ios .navbar-new .navbar-new-inner {
+  justify-content: space-between;
+  padding-top: calc(16px + var(--f7-safe-area-top));
+  padding-bottom: 16px;
+}
+.ios .navbar-new .left,
+.ios .navbar-new .right,
+.ios .navbar-new .navbar-pane {
+  height: 100%;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  box-shadow: var(--f7-glass-shadow);
+  background-color: var(--f7-glass-bg-color);
+  border-radius: 64px;
+  min-width: 44px;
+}
+.ios .navbar-pane {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ios .navbar-new .navbar-new-inner-left-title {
+  justify-content: flex-start;
+}
+.ios .navbar-new .navbar-new-inner-left-title .right {
+  margin-left: auto;
+}
+.ios .navbar-new .navbar-new-inner-left-title .title {
+  text-align: left;
+  margin-right: 10px;
+}
+.ios .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) .title {
+  opacity: 0;
+}
+.view-master-detail .page-master {
+  z-index: 525;
+}
+.md .navbar-new .title-large {
+  align-items: center;
+  overflow: hidden;
+}
+.md .navbar-new .left {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.md .navbar-new a.link {
+  padding: 0 12px;
+  min-width: 48px;
+  height: var(--f7-navbar-new-link-height, var(--f7-navbar-new-height));
+}
+.md .navbar-new a.icon-only {
+  min-width: 0;
+  flex-shrink: 0;
+  width: 48px;
+}
+.md .navbar-new .right {
+  margin-left: auto;
+  margin-right: 4px;
+}
+.md .navbar-new .right:first-child {
+  right: var(--f7-safe-area-right);
+}
+.md .navbar-pane {
+  display: contents;
+}
+.md .navbar-new-bg {
+  background: var(--f7-navbar-new-bg-color);
+  background-color: var(--f7-navbar-new-bg-color, var(--f7-bars-bg-color));
+}
+.md .navbar-new-bg:after,
+.md .navbar-new-bg:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.md .navbar-new-bg:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-navbar-new-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 100%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.md .navbar-new-bg:after {
+  z-index: 1;
+}
+.md .navbar-new-inner {
+  justify-content: flex-start;
+  overflow: hidden;
+}
+.md .navbar-new-large:not(.navbar-new-large-collapsed) .navbar-new-inner {
+  overflow: visible;
+}
+.md .page.page-with-subnavbar .navbar-new-inner {
+  overflow: visible;
+}
+.md .navbar-new-inner:not(.navbar-new-inner-centered-title) .title:first-child {
+  margin-left: 16px;
+}
+.md .navbar-new-inner-centered-title {
+  justify-content: space-between;
+}
+.md .navbar-new-inner-centered-title .right {
+  margin-left: 0;
+}
+.md .navbar-new-inner-centered-title .title {
+  text-align: center;
+}
+.md .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) .navbar-new-bg,
+.md .navbar-new-transparent:not(.navbar-new-large):not(.navbar-new-transparent-visible):not(
+      .with-searchbar-expandable-enabled
+    ) .title {
+  opacity: 0;
+}
+.md .navbar-new-large .navbar-new-bg {
+  height: calc(100% + var(--f7-navbar-new-large-title-height));
+  transform: translate3d(0px, calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)), 0);
+}
+.md .navbar-new-large-transparent .navbar-new-bg,
+.md .navbar-new-large.navbar-new-transparent .navbar-new-bg {
+  opacity: var(--f7-navbar-new-large-collapse-progress);
+}
+/* === Searchbar New === */
+:root {
+  /*
+  --f7-searchbar-new-link-color: var(--f7-bars-link-color);
+  --f7-searchbar-new-inline-input-font-size: var(--f7-searchbar-new-input-font-size);
+  */
+  --f7-searchbar-new-input-border-width: 0px;
+  --f7-searchbar-new-input-border-color: transparent;
+}
+.ios {
+  /*
+  --f7-searchbar-new-border-color: var(--f7-bars-border-color);
+  */
+  --f7-searchbar-new-bg-color: transparent;
+  --f7-searchbar-new-height: 44px;
+  --f7-searchbar-new-inner-padding-left: 0px;
+  --f7-searchbar-new-inner-padding-right: 0px;
+  --f7-searchbar-new-link-color: var(--f7-bars-text-color);
+  --f7-searchbar-new-input-font-size: 17px;
+  --f7-searchbar-new-input-border-radius: 44px;
+  --f7-searchbar-new-input-height: 44px;
+  --f7-searchbar-new-inline-input-height: 44px;
+  /*
+  --f7-searchbar-new-inline-input-border-radius: var(--f7-searchbar-new-input-border-radius);
+  */
+  --f7-searchbar-new-input-padding-horizontal: 44px;
+  /*
+  --f7-searchbar-new-inline-input-padding-horizontal: var(--f7-searchbar-new-input-padding-horizontal);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-input-clear-button-color);
+  */
+  --f7-searchbar-new-backdrop-bg-color: rgba(0, 0, 0, 0.4);
+  --f7-searchbar-new-in-page-content-margin: 16px;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 44px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 44px;
+  --f7-searchbar-new-input-bg-color: var(--f7-glass-bg-color);
+  --f7-searchbar-new-placeholder-color: rgba(0, 0, 0, 0.4);
+  --f7-searchbar-new-input-text-color: #000;
+  --f7-searchbar-new-search-icon-color: rgba(0, 0, 0, 0.4);
+  --f7-searchbar-new-bars-bg-color: #efeff4;
+}
+.ios .dark,
+.ios.dark {
+  --f7-searchbar-new-placeholder-color: rgba(255, 255, 255, 0.4);
+  --f7-searchbar-new-input-text-color: #fff;
+  --f7-searchbar-new-search-icon-color: rgba(255, 255, 255, 0.4);
+  --f7-searchbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
+}
+.md {
+  --f7-searchbar-new-border-color: transparent;
+  --f7-searchbar-new-height: 48px;
+  --f7-searchbar-new-inner-padding-left: 8px;
+  --f7-searchbar-new-inner-padding-right: 8px;
+  --f7-searchbar-new-input-font-size: 16px;
+  --f7-searchbar-new-input-border-radius: 24px;
+  --f7-searchbar-new-input-height: 48px;
+  --f7-searchbar-new-inline-input-height: 48px;
+  --f7-searchbar-new-inline-input-border-radius: 24px;
+  --f7-searchbar-new-input-padding-horizontal: 16px;
+  --f7-searchbar-new-inline-input-padding-horizontal: 16px;
+  --f7-searchbar-new-backdrop-bg-color: rgba(0, 0, 0, 0.25);
+  --f7-searchbar-new-in-page-content-margin: 16px 0;
+  --f7-searchbar-new-in-page-content-box-shadow: none;
+  --f7-searchbar-new-in-page-content-border-radius: 24px;
+  --f7-searchbar-new-in-page-content-input-border-radius: 24px;
+  --f7-searchbar-new-bg-color: transparent;
+}
+.md,
+.md .dark,
+.md [class*='color-'] {
+  --f7-searchbar-new-link-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-search-icon-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-input-clear-button-color: var(--f7-md-on-surface);
+  --f7-searchbar-new-placeholder-color: var(--f7-md-on-surface-variant);
+  --f7-searchbar-new-input-bg-color: var(--f7-md-secondary-container);
+  --f7-searchbar-new-input-text-color: var(--f7-md-on-surface);
+}
+.searchbar-new {
+  --f7-link-highlight-color: var(--f7-link-highlight-black);
+  width: 100%;
+  position: relative;
+  z-index: 200;
+  height: var(--f7-searchbar-new-height);
+  background-color: var(--f7-searchbar-new-bars-bg-color);
+}
+.dark .searchbar-new {
+  --f7-link-highlight-color: var(--f7-link-highlight-white);
+}
+.searchbar-new input[type='search']::-webkit-search-decoration {
+  display: none;
+}
+.ios .subnavbar .searchbar-new {
+  background-color: transparent;
+  -webkit-backdrop-filter: none;
+          backdrop-filter: none;
+}
+.ios .subnavbar .searchbar-new:after {
+  display: none !important;
+}
+.searchbar-new.no-outline:after {
+  display: none !important;
+}
+.searchbar-new:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-searchbar-new-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 100%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.page > .searchbar-new:not(.searchbar-new-inline) {
+  z-index: 600;
+}
+.searchbar-new input[type='text'],
+.searchbar-new input[type='search'] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: var(--f7-searchbar-new-input-border-width) solid var(--f7-searchbar-new-input-border-color);
+  -webkit-appearance: none;
+          appearance: none;
+  font-family: inherit;
+  font-weight: normal;
+  color: var(--f7-searchbar-new-input-text-color);
+  font-size: var(--f7-searchbar-new-input-font-size);
+  background-color: var(--f7-searchbar-new-input-bg-color);
+  border-radius: var(--f7-searchbar-new-input-border-radius);
+  position: relative;
+  padding: 0;
+  padding-left: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+  padding-right: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-right, 0px));
+}
+.searchbar-new input[type='text']::placeholder,
+.searchbar-new input[type='search']::placeholder {
+  color: var(--f7-searchbar-new-placeholder-color);
+  opacity: 1;
+}
+.searchbar-new input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+          appearance: none;
+}
+.searchbar-new .searchbar-new-input-wrap {
+  flex-shrink: 1;
+  width: 100%;
+  height: var(--f7-searchbar-new-input-height);
+  position: relative;
+}
+.searchbar-new a {
+  color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+}
+.page > .searchbar-new:not(.searchbar-new-inline) {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  width: auto;
+  top: 0;
+}
+.page-content .searchbar-new:not(.searchbar-new-inline) {
+  border-radius: var(--f7-searchbar-new-in-page-content-border-radius);
+  margin: var(--f7-searchbar-new-in-page-content-margin);
+  width: auto;
+  box-shadow: var(--f7-searchbar-new-in-page-content-box-shadow);
+}
+.page-content .searchbar-new:not(.searchbar-new-inline) .searchbar-new-inner,
+.page-content .searchbar-new:not(.searchbar-new-inline) input[type='text'],
+.page-content .searchbar-new:not(.searchbar-new-inline) input[type='search'] {
+  border-radius: var(--f7-searchbar-new-in-page-content-input-border-radius, var(--f7-searchbar-new-input-border-radius));
+}
+.searchbar-new .input-clear-button {
+  color: var(--f7-searchbar-new-input-clear-button-color, var(--f7-input-clear-button-color));
+}
+.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-searchbar-new-height);
+  position: absolute;
+  transition-duration: 300ms;
+  pointer-events: none;
+}
+.navbar-new .searchbar-new-expandable {
+  background: transparent;
+}
+.navbar-new .searchbar-new-expandable:after {
+  display: none !important;
+}
+.navbar-new .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+.navbar-new .searchbar-new.searchbar-new-expandable .searchbar-new-inner {
+  top: var(--f7-safe-area-top);
+  height: calc(100% - var(--f7-safe-area-top));
+}
+.toolbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-toolbar-height);
+}
+.subnavbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-subnavbar-height);
+}
+.tabbar-icons .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-tabbar-icons-height);
+}
+.searchbar-new-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+}
+.searchbar-new-disable-button {
+  cursor: pointer;
+  pointer-events: none;
+  -webkit-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  opacity: 0;
+}
+.searchbar-new-icon {
+  pointer-events: none;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.searchbar-new-icon:after {
+  color: var(--f7-searchbar-new-search-icon-color);
+  font-family: 'framework7-core-icons';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+  text-align: center;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+}
+.searchbar-new-backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 300ms;
+  transform: translate3d(0, 0, 0);
+  background: var(--f7-searchbar-new-backdrop-bg-color);
+}
+.searchbar-new-backdrop.searchbar-new-backdrop-in {
+  opacity: 1;
+  pointer-events: auto;
+}
+.page-content > .searchbar-new-backdrop {
+  position: fixed;
+}
+.searchbar-new-found {
+  display: none;
+}
+.searchbar-new-not-found {
+  display: none;
+}
+.hidden-by-searchbar-new,
+.list .hidden-by-searchbar-new,
+.list.li.hidden-by-searchbar-new,
+.list li.hidden-by-searchbar-new {
+  display: none !important;
+}
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition,
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new.with-searchbar-new-expandable-enabled,
+.navbar-new.with-searchbar-new-expandable-enabled {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new.with-searchbar-new-expandable-enabled .navbar-new-bg,
+.navbar-new.with-searchbar-new-expandable-enabled .navbar-new-bg,
+.navbar-new.with-searchbar-new-expandable-enabled .title-large,
+.navbar-new.with-searchbar-new-expandable-enabled .title-large,
+.navbar-new.with-searchbar-new-expandable-enabled .title-large-text,
+.navbar-new.with-searchbar-new-expandable-enabled .title-large-text {
+  transition-duration: 300ms;
+}
+.navbar-new.with-searchbar-new-expandable-closing .navbar-new-bg,
+.navbar-new.with-searchbar-new-expandable-closing .navbar-new-bg,
+.navbar-new.with-searchbar-new-expandable-closing .title-large,
+.navbar-new.with-searchbar-new-expandable-closing .title-large,
+.navbar-new.with-searchbar-new-expandable-closing .title-large-text,
+.navbar-new.with-searchbar-new-expandable-closing .title-large-text {
+  transition-duration: 300ms;
+}
+.page-content.with-searchbar-new-expandable-enabled {
+  height: calc(100% + var(--f7-navbar-new-large-title-height));
+  transform: translateY(calc(-1 * var(--f7-navbar-new-large-title-height)));
+  transition-duration: 300ms;
+  transition-property: transform;
+}
+.page-content.with-searchbar-new-expandable-closing {
+  transition-duration: 300ms;
+}
+.navbar-new ~ .page:not(.no-navbar) > .searchbar-new,
+.page > .navbar-new ~ .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ * .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top));
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)), 0);
+}
+.page-with-navbar-new-large .page-content .searchbar-new {
+  top: 0;
+  transform: none;
+}
+.searchbar-new ~ * {
+  --f7-page-searchbar-new-offset: var(--f7-searchbar-new-height);
+}
+.page > .toolbar-top ~ .searchbar-new,
+.ios .page > .toolbar-top-ios ~ .searchbar-new,
+.md .page > .toolbar-top-md ~ .searchbar-new {
+  top: var(--f7-toolbar-height);
+}
+.page > .tabbar-icons.toolbar-top ~ .searchbar-new,
+.ios .page > .tabbar-icons.toolbar-top-ios ~ .searchbar-new,
+.md .page > .tabbar-icons.toolbar-top-md ~ .searchbar-new {
+  top: var(--f7-tabbar-icons-height);
+}
+.page > .navbar-new ~ .toolbar-top ~ .searchbar-new,
+.ios .page > .navbar-new ~ .toolbar-top-ios ~ .searchbar-new,
+.md .page > .navbar-new ~ .toolbar-top-md ~ .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
+}
+.page > .navbar-new ~ .tabbar-icons.toolbar-top ~ .searchbar-new,
+.ios .page > .navbar-new ~ .tabbar-icons.toolbar-top-ios ~ .searchbar-new,
+.md .page > .navbar-new ~ .tabbar-icons.toolbar-top-md ~ .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top));
+}
+.searchbar-new.searchbar-new-inline {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  background-image: none;
+}
+.searchbar-new.searchbar-new-inline:after,
+.searchbar-new.searchbar-new-inline:before {
+  display: none !important;
+}
+.searchbar-new.searchbar-new-inline .searchbar-new-input-wrap {
+  height: var(--f7-searchbar-new-inline-input-height, var(--f7-searchbar-new-input-height));
+}
+.searchbar-new.searchbar-new-inline .searchbar-new-inner {
+  padding: 0;
+  position: static;
+  width: auto;
+  height: auto;
+}
+.searchbar-new.searchbar-new-inline input[type='text'],
+.searchbar-new.searchbar-new-inline input[type='search'] {
+  font-size: var(--f7-searchbar-new-inline-input-font-size, var(--f7-searchbar-new-input-font-size));
+  border-radius: var(--f7-searchbar-new-inline-input-border-radius, var(--f7-searchbar-new-input-border-radius));
+  padding-left: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+  padding-right: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-right, 0px));
+}
+.ios .searchbar-new input[type='search'],
+.ios .searchbar-new input[type='text'] {
+  z-index: 30;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  box-shadow: var(--f7-glass-shadow);
+}
+.ios .searchbar-new .input-clear-button {
+  z-index: 40;
+  right: 16px;
+}
+.ios .searchbar-new-icon {
+  width: 13px;
+  height: 13px;
+  position: absolute;
+  top: 50%;
+  margin-top: -6px;
+  z-index: 40;
+  left: 16px;
+}
+.ios .searchbar-new-icon:after {
+  content: 'search_ios';
+  line-height: 13px;
+}
+.ios .searchbar-new-disable-button {
+  font-size: 17px;
+  flex-shrink: 0;
+  transform: translate3d(0, 0, 0);
+  transition-duration: 300ms;
+  color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  display: none;
+  height: var(--f7-searchbar-new-height);
+  padding: 0 12px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 44px;
+  background-color: var(--f7-searchbar-new-input-bg-color);
+  box-shadow: var(--f7-glass-shadow);
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  transform: scale(0);
+}
+.ios .searchbar-new-disable-button.active-state {
+  transition-duration: 0ms;
+  opacity: 0.3 !important;
+}
+.ios .searchbar-new-enabled .searchbar-new-disable-button {
+  pointer-events: auto;
+  opacity: 1;
+  transform: scale(1);
+  margin-left: 16px;
+}
+.ios .searchbar-new:not(.searchbar-new-enabled) .searchbar-new-disable-button {
+  transition-duration: 300ms !important;
+}
+.ios .searchbar-new-input-wrap {
+  border-radius: var(--f7-searchbar-new-input-border-radius);
+}
+.ios .searchbar-new-expandable {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--f7-searchbar-new-expandable-size);
+  transform: translate3d(0, 0, 0);
+  pointer-events: none;
+}
+.ios .searchbar-new-expandable .searchbar-new-disable-button {
+  margin-left: 16px;
+  opacity: 1;
+  display: flex;
+}
+.ios .searchbar-new-expandable .searchbar-new-inner {
+  left: 16px;
+  right: 16px;
+  width: auto;
+  height: var(--f7-searchbar-new-expandable-size);
+}
+.ios .searchbar-new-expandable .searchbar-new-input-wrap {
+  transform: scale(0);
+  transition-duration: 300ms;
+}
+.ios .navbar-new.with-searchbar-new-expandable-enabled .navbar-new-bg,
+.ios .navbar-new.with-searchbar-new-expandable-closing .navbar-new-bg {
+  transition-property: transform, opacity;
+}
+.ios .navbar-new.with-searchbar-new-expandable-enabled .navbar-new-bg,
+.ios .navbar-new.with-searchbar-new-expandable-closing .navbar-new-bg,
+.ios .navbar-new.with-searchbar-new-expandable-enabled .left,
+.ios .navbar-new.with-searchbar-new-expandable-closing .left,
+.ios .navbar-new.with-searchbar-new-expandable-enabled .title,
+.ios .navbar-new.with-searchbar-new-expandable-closing .title,
+.ios .navbar-new.with-searchbar-new-expandable-enabled .right,
+.ios .navbar-new.with-searchbar-new-expandable-closing .right {
+  transition-duration: 300ms;
+}
+.ios .navbar-new.with-searchbar-new-expandable-enabled .left,
+.ios .navbar-new.with-searchbar-new-expandable-enabled-no-transition .left,
+.ios .navbar-new.with-searchbar-new-expandable-enabled .title,
+.ios .navbar-new.with-searchbar-new-expandable-enabled-no-transition .title,
+.ios .navbar-new.with-searchbar-new-expandable-enabled .right,
+.ios .navbar-new.with-searchbar-new-expandable-enabled-no-transition .right {
+  transform: translateY(calc(-1 * var(--f7-navbar-new-height)));
+  opacity: 0 !important;
+}
+.ios .searchbar-new-expandable.searchbar-new-enabled {
+  height: var(--f7-searchbar-new-expandable-size);
+  pointer-events: auto;
+}
+.ios .searchbar-new-expandable.searchbar-new-enabled .searchbar-new-input-wrap {
+  transform: scale(1);
+}
+.md .searchbar-new-icon,
+.md .searchbar-new-disable-button {
+  position: absolute;
+  top: 50%;
+  transition-duration: 300ms;
+}
+.md .searchbar-new-disable-button .icon-close {
+  display: none;
+}
+.md .searchbar-new-icon {
+  width: 48px;
+  height: 48px;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: var(--f7-safe-area-left);
+}
+.md .searchbar-new-icon:after {
+  width: auto;
+  height: auto;
+  content: 'search_md';
+  line-height: 1.2;
+}
+.md .searchbar-new-disable-button {
+  width: 48px;
+  height: 48px;
+  transform: rotate(-90deg) scale(0.5);
+  font-size: 0 !important;
+  display: block;
+  margin-top: -24px;
+  color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+}
+.md .searchbar-new-disable-button:after {
+  font-family: 'framework7-core-icons';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+  text-align: center;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+  line-height: 48px;
+  content: 'arrow_left_md';
+}
+.md .searchbar-new-enabled:not(.searchbar-new-enabled-no-disable-button) .searchbar-new-disable-button {
+  transform: rotate(0deg) scale(1);
+  pointer-events: auto;
+  opacity: 1;
+}
+.md .searchbar-new-enabled:not(.searchbar-new-enabled-no-disable-button) .searchbar-new-icon {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.5);
+}
+.md .searchbar-new {
+  --f7-searchbar-new-input-extra-padding-left: 34px;
+}
+.md .searchbar-new .input-clear-button {
+  width: 48px;
+  height: 48px;
+  margin-top: -24px;
+  right: 0;
+}
+.md .searchbar-new .input-clear-button:after {
+  line-height: 48px;
+  content: 'delete_round_md';
+  opacity: 1;
+}
+.md .searchbar-new .input-clear-button:before {
+  display: none;
+}
+.md .searchbar-new-inline {
+  --f7-searchbar-new-input-extra-padding-left: 32px;
+}
+.md .page > .searchbar-new,
+.md .subnavbar .searchbar-new,
+.md .searchbar-new-expandable {
+  --f7-searchbar-new-input-extra-padding-left: 34px;
+}
+.md .page > .searchbar-new .searchbar-new-disable-button,
+.md .subnavbar .searchbar-new .searchbar-new-disable-button,
+.md .searchbar-new-expandable .searchbar-new-disable-button {
+  left: calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+}
+.md .page > .searchbar-new .searchbar-new-icon,
+.md .subnavbar .searchbar-new .searchbar-new-icon,
+.md .searchbar-new-expandable .searchbar-new-icon {
+  left: var(--f7-safe-area-left);
+}
+.md .searchbar-new-expandable {
+  --f7-searchbar-new-inner-padding-left: 4px;
+  --f7-searchbar-new-inner-padding-right: 4px;
+  height: var(--f7-searchbar-new-expandable-size);
+  opacity: 0;
+  bottom: 0;
+  border-radius: calc(var(--f7-searchbar-new-expandable-size));
+  width: calc(var(--f7-searchbar-new-expandable-size));
+  margin-top: calc(var(--f7-searchbar-new-expandable-size) * -1 / 2);
+  transform: translate3d(0px, 0px, 0px);
+  background-color: var(--f7-searchbar-new-input-bg-color);
+  left: 100%;
+  margin-left: calc(var(--f7-searchbar-new-expandable-size) * -1);
+}
+.md .searchbar-new-expandable.searchbar-new-enabled {
+  width: 100%;
+  border-radius: 0;
+  opacity: 1;
+  pointer-events: auto;
+  margin-top: 0;
+  left: 0;
+  margin-left: 0;
+}
+/* === Toolbar === */
+:root {
+  /*
+  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
+  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-toolbar-border-color: var(--f7-bars-border-color);
+  --f7-toolbar-link-color: var(--f7-bars-link-color);
+  --f7-toolbar-text-color: var(--f7-bars-text-color);
+  */
+  --f7-tabbar-link-active-bg-color: transparent;
+  --f7-tabbar-label-text-transform: none;
+  --f7-toolbar-hide-show-transition-duration: 400ms;
+}
+.ios {
+  --f7-toolbar-height: 44px;
+  --f7-toolbar-font-size: 17px;
+  --f7-toolbar-inner-padding-left: 8px;
+  --f7-toolbar-inner-padding-right: 8px;
+  --f7-toolbar-link-font-weight: 400;
+  /*
+  --f7-toolbar-link-height: var(--f7-toolbar-height);
+  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
+  --f7-tabbar-link-active-color: var(--f7-theme-color);
+  */
+  --f7-tabbar-icons-height: 50px;
+  --f7-tabbar-icons-tablet-height: 50px;
+  --f7-tabbar-icon-size: 28px;
+  --f7-tabbar-link-text-transform: none;
+  --f7-tabbar-link-font-weight: 400;
+  --f7-tabbar-link-letter-spacing: 0;
+  --f7-tabbar-label-font-size: 12px;
+  --f7-tabbar-label-tablet-font-size: 14px;
+  --f7-tabbar-label-font-weight: 500;
+  --f7-tabbar-label-letter-spacing: 0.01;
+  --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
+}
+.ios .dark,
+.ios.dark {
+  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
+}
+.md {
+  --f7-toolbar-height: 56px;
+  --f7-toolbar-font-size: 14px;
+  --f7-toolbar-inner-padding-left: 0px;
+  --f7-toolbar-inner-padding-right: 0px;
+  /*
+  --f7-toolbar-link-height: var(--f7-toolbar-height);
+  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
+  */
+  --f7-tabbar-icons-height: 80px;
+  --f7-tabbar-icons-tablet-height: 80px;
+  --f7-tabbar-icon-size: 24px;
+  --f7-tabbar-link-text-transform: none;
+  --f7-tabbar-link-font-weight: 500;
+  --f7-tabbar-link-letter-spacing: 0;
+  --f7-toolbar-link-font-weight: 500;
+  --f7-tabbar-label-font-size: 12px;
+  --f7-tabbar-label-tablet-font-size: 12px;
+  --f7-tabbar-label-font-weight: 500;
+  --f7-tabbar-label-letter-spacing: 0;
+}
+.md,
+.md .dark,
+.md [class*='color-'] {
+  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
+  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
+  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
+  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
+}
+.toolbar {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  z-index: 600;
+  box-sizing: border-box;
+  left: 0;
+  height: var(--f7-toolbar-height);
+  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
+  color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-toolbar-font-size);
+}
+@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
+  .ios-translucent-bars .toolbar {
+    background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
+    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+            backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
+  }
+}
+.toolbar b {
+  font-weight: 600;
+}
+.toolbar a {
+  color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  box-sizing: border-box;
+  flex-shrink: 1;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.toolbar .link {
+  display: flex;
+  line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
+  height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
+  font-weight: var(--f7-toolbar-link-font-weight);
+}
+.toolbar i.icon {
+  display: block;
+}
+.toolbar:after,
+.toolbar:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.views > .toolbar,
+.view > .toolbar,
+.page > .toolbar {
+  position: absolute;
+}
+.toolbar-top,
+.ios .toolbar-top-ios,
+.md .toolbar-top-md {
+  top: 0;
+}
+.toolbar-top .tab-link-highlight,
+.ios .toolbar-top-ios .tab-link-highlight,
+.md .toolbar-top-md .tab-link-highlight {
+  bottom: 0;
+}
+.toolbar-top.no-outline:after,
+.ios .toolbar-top-ios.no-outline:after,
+.md .toolbar-top-md.no-outline:after {
+  display: none !important;
+}
+.toolbar-top.toolbar-hidden:before,
+.ios .toolbar-top-ios.toolbar-hidden:before,
+.md .toolbar-top-md.toolbar-hidden:before {
+  display: none !important;
+}
+.toolbar-top:after,
+.ios .toolbar-top-ios:after,
+.md .toolbar-top-md:after,
+.toolbar-top:before,
+.ios .toolbar-top-ios:before,
+.md .toolbar-top-md:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.toolbar-top:after,
+.ios .toolbar-top-ios:after,
+.md .toolbar-top-md:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 100%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.toolbar-bottom,
+.ios .toolbar-bottom-ios,
+.md .toolbar-bottom-md {
+  bottom: 0;
+  height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+}
+.toolbar-bottom .tab-link-highlight,
+.ios .toolbar-bottom-ios .tab-link-highlight,
+.md .toolbar-bottom-md .tab-link-highlight {
+  top: 0;
+}
+.toolbar-bottom .toolbar-inner,
+.ios .toolbar-bottom-ios .toolbar-inner,
+.md .toolbar-bottom-md .toolbar-inner {
+  height: auto;
+  top: 0;
+  bottom: var(--f7-safe-area-bottom);
+}
+.toolbar-bottom.no-outline:before,
+.ios .toolbar-bottom-ios.no-outline:before,
+.md .toolbar-bottom-md.no-outline:before {
+  display: none !important;
+}
+.toolbar-bottom.toolbar-hidden:after,
+.ios .toolbar-bottom-ios.toolbar-hidden:after,
+.md .toolbar-bottom-md.toolbar-hidden:after {
+  display: none !important;
+}
+.toolbar-bottom:before,
+.ios .toolbar-bottom-ios:before,
+.md .toolbar-bottom-md:before {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 0%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.toolbar-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+  align-content: center;
+  overflow: hidden;
+  padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
+}
+.views > .tabbar,
+.views > .tabbar-icons {
+  z-index: 5001;
+}
+.tabbar a,
+.tabbar-icons a {
+  color: var(--f7-tabbar-link-inactive-color);
+}
+.tabbar .link,
+.tabbar-icons .link {
+  line-height: 1.4;
+}
+.tabbar .tab-link,
+.tabbar-icons .tab-link,
+.tabbar .link,
+.tabbar-icons .link {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-transform: var(--f7-tabbar-link-text-transform);
+  font-weight: var(--f7-tabbar-link-font-weight);
+  letter-spacing: var(--f7-tabbar-link-letter-spacing);
+  overflow: hidden;
+}
+.tabbar .tab-link-active,
+.tabbar-icons .tab-link-active {
+  color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
+  background-color: var(--f7-tabbar-link-active-bg-color, transparent);
+}
+.tabbar i.icon,
+.tabbar-icons i.icon {
+  font-size: var(--f7-tabbar-icon-size);
+  height: var(--f7-tabbar-icon-size);
+  line-height: var(--f7-tabbar-icon-size);
+}
+.md .tabbar.tabbar-icons .tab-link-highlight,
+.md .tabbar-icons.tabbar-icons .tab-link-highlight {
+  display: none;
+}
+.md .tabbar:not(.tabbar-icons) .tab-link-highlight,
+.md .tabbar-icons:not(.tabbar-icons) .tab-link-highlight {
+  position: absolute;
+  height: 2px;
+  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+  transition-duration: 300ms;
+  left: 0;
+}
+.tabbar-icons {
+  --f7-toolbar-height: var(--f7-tabbar-icons-height);
+}
+.tabbar-icons .tab-link,
+.tabbar-icons .link {
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.tabbar-icons .tabbar-label {
+  display: block;
+  line-height: 1;
+  margin: 0;
+  position: relative;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--f7-tabbar-label-font-size);
+  text-transform: var(--f7-tabbar-label-text-transform);
+  font-weight: var(--f7-tabbar-label-font-weight);
+  letter-spacing: var(--f7-tabbar-label-letter-spacing);
+}
+@media (min-width: 768px) and (min-height: 600px) {
+  :root {
+    --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
+    --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
+  }
+}
+.tabbar-scrollable .toolbar-inner {
+  justify-content: flex-start;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
+}
+.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 0px;
+  display: none;
+  opacity: 0;
+  background: transparent;
+}
+.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
+}
+.tabbar-scrollable .tab-link,
+.tabbar-scrollable .link {
+  width: auto;
+  flex-shrink: 0;
+}
+.toolbar-transitioning,
+.navbar-transitioning + .toolbar,
+.navbar-transitioning ~ * .toolbar {
+  transition-duration: var(--f7-toolbar-hide-show-transition-duration);
+}
+.toolbar-bottom ~ *,
+.ios .toolbar-bottom-ios ~ *,
+.md .toolbar-bottom-md ~ * {
+  --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
+}
+.toolbar-bottom.tabbar-icons ~ *,
+.ios .toolbar-bottom-ios.tabbar-icons ~ *,
+.md .toolbar-bottom-md.tabbar-icons ~ * {
+  --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
+}
+.toolbar-bottom.toolbar-hidden,
+.ios .toolbar-bottom-ios.toolbar-hidden,
+.md .toolbar-bottom-md.toolbar-hidden {
+  transform: translate3d(0, 100%, 0);
+}
+.toolbar-top ~ *,
+.ios .toolbar-top-ios ~ *,
+.md .toolbar-top-md ~ * {
+  --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
+}
+.toolbar-top.tabbar-icons ~ *,
+.ios .toolbar-top-ios.tabbar-icons ~ *,
+.md .toolbar-top-md.tabbar-icons ~ * {
+  --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
+}
+.toolbar-top.toolbar-hidden,
+.ios .toolbar-top-ios.toolbar-hidden,
+.md .toolbar-top-md.toolbar-hidden {
+  transform: translate3d(0, -100%, 0);
+}
+.navbar ~ .toolbar-top,
+.navbars ~ .toolbar-top,
+.ios .navbar ~ .toolbar-top-ios,
+.ios .navbars ~ .toolbar-top-ios,
+.md .navbar ~ .toolbar-top-md,
+.navbar ~ * .toolbar-top,
+.navbars ~ * .toolbar-top,
+.ios .navbar ~ * .toolbar-top-ios,
+.ios .navbars ~ * .toolbar-top-ios,
+.md .navbar ~ * .toolbar-top-md,
+.navbar ~ .page:not(.no-navbar) .toolbar-top,
+.navbars ~ .page:not(.no-navbar) .toolbar-top,
+.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
+.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
+.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
+  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+}
+.navbar ~ .toolbar-top.toolbar-hidden,
+.navbars ~ .toolbar-top.toolbar-hidden,
+.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
+.ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
+.md .navbar ~ .toolbar-top-md.toolbar-hidden,
+.navbar ~ * .toolbar-top.toolbar-hidden,
+.navbars ~ * .toolbar-top.toolbar-hidden,
+.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
+.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
+.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
+.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
+.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
+.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
+.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
+.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
+  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
+}
+.navbar ~ .toolbar-top.toolbar-hidden.tabbar-icons,
+.navbars ~ .toolbar-top.toolbar-hidden.tabbar-icons,
+.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-icons,
+.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
+.navbars ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
+.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-icons,
+.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
+.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
+.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
+.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-icons {
+  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))), 0);
+}
+.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
+.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
+  transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
+}
+.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
+.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
+.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
+.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
+  transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
+}
+.ios .toolbar a.icon-only {
+  min-height: var(--f7-toolbar-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  min-width: 44px;
+}
+.ios .tabbar-icons .tab-link,
+.ios .tabbar-icons .link {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.ios .tabbar-icons .tab-link i + span,
+.ios .tabbar-icons .link i + span {
+  margin: 0;
+  margin-top: 4px;
+}
+@media (min-width: 768px) and (min-height: 600px) {
+  .ios .tabbar .tab-link,
+  .ios .tabbar-icons .tab-link,
+  .ios .tabbar .link,
+  .ios .tabbar-icons .link {
+    justify-content: center;
+    flex-direction: row;
+  }
+  .ios .tabbar .tab-link i + span,
+  .ios .tabbar-icons .tab-link i + span,
+  .ios .tabbar .link i + span,
+  .ios .tabbar-icons .link i + span {
+    margin-left: 5px;
+  }
+}
+.ios .tabbar-scrollable .toolbar-inner {
+  justify-content: flex-start;
+}
+.ios .tabbar-scrollable .tab-link,
+.ios .tabbar-scrollable .link {
+  padding: 0 8px;
+}
+.md .toolbar .link {
+  justify-content: center;
+  padding: 0 12px;
+  min-width: 48px;
+}
+.md .toolbar a.icon-only {
+  min-width: 0;
+  flex-shrink: 0;
+}
+.md .tabbar .tab-link,
+.md .tabbar-icons .tab-link,
+.md .tabbar .link,
+.md .tabbar-icons .link {
+  padding-left: 0;
+  padding-right: 0;
+}
+.md .tabbar a.icon-only,
+.md .tabbar-icons a.icon-only {
+  flex-shrink: initial;
+}
+.md .tabbar .tab-link,
+.md .tabbar-icons .tab-link {
+  transition-duration: 300ms;
+  overflow: hidden;
+  position: relative;
+}
+.md .tabbar i.icon,
+.md .tabbar-icons i.icon {
+  position: relative;
+}
+.md .tabbar i.icon::before,
+.md .tabbar-icons i.icon::before {
+  content: '';
+  width: 64px;
+  height: 32px;
+  border-radius: 32px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%) scaleX(0.5);
+  background: var(--f7-tabbar-link-active-icon-bg-color);
+  opacity: 0;
+  transition-duration: 200ms;
+  z-index: -1;
+}
+.md .tabbar i.icon + .tabbar-label,
+.md .tabbar-icons i.icon + .tabbar-label {
+  margin-top: 8px;
+}
+.md .tabbar .tab-link-active i.icon::before,
+.md .tabbar-icons .tab-link-active i.icon::before {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-50%) scaleX(1);
+}
+.md .tabbar-icons .tab-link,
+.md .tabbar-icons .link {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.md .tabbar-label {
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 1.2;
+}
+.md .tabbar-scrollable .toolbar-inner {
+  overflow: auto;
+}
+.md .tabbar-scrollable .tab-link,
+.md .tabbar-scrollable .link {
+  padding: 0 12px;
+}
+/* === Toolbar New === */
+:root {
+  /*
+  --f7-toolbar-new-bg-color: var(--f7-bars-bg-color);
+  --f7-toolbar-new-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+  --f7-toolbar-new-border-color: var(--f7-bars-border-color);
+  --f7-toolbar-new-text-color: var(--f7-bars-text-color);
+  */
+  --f7-tabbar-new-link-active-bg-color: transparent;
+  --f7-tabbar-new-label-text-transform: none;
+  --f7-toolbar-new-hide-show-transition-duration: 400ms;
+}
+.ios {
+  --f7-toolbar-new-height: 64px;
+  --f7-toolbar-new-font-size: 17px;
+  --f7-toolbar-new-inner-padding-left: 16px;
+  --f7-toolbar-new-inner-padding-right: 16px;
+  --f7-toolbar-new-link-font-weight: 400;
+  --f7-toolbar-new-link-color: var(--f7-bars-text-color);
+  --f7-tabbar-new-link-inactive-color: var(--f7-bars-text-color);
+  /*
+  --f7-toolbar-new-link-height: var(--f7-toolbar-new-height);
+  --f7-toolbar-new-link-line-height: var(--f7-toolbar-new-height);
+  --f7-tabbar-new-link-active-color: var(--f7-theme-color);
+  */
+  --f7-tabbar-new-icons-height: 80px;
+  --f7-tabbar-new-icons-tablet-height: 80px;
+  --f7-tabbar-new-icon-size: 28px;
+  --f7-tabbar-new-link-text-transform: none;
+  --f7-tabbar-new-link-font-weight: 400;
+  --f7-tabbar-new-link-letter-spacing: 0;
+  --f7-tabbar-new-label-font-size: 12px;
+  --f7-tabbar-new-label-tablet-font-size: 14px;
+  --f7-tabbar-new-label-font-weight: 500;
+  --f7-tabbar-new-label-letter-spacing: 0.01;
+  --f7-tabbar-new-link-highlight-bg-color: rgba(0, 0, 0, 0.1);
+  --f7-tabbar-new-link-highlight-active-bg-color: rgba(0, 0, 0, 0.05);
+  --f7-toolbar-new-bars-bg-color: #efeff4;
 }
 .ios .dark,
 .ios.dark {
-  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
+  --f7-tabbar-new-link-highlight-bg-color: rgba(255, 255, 255, 0.15);
+  --f7-tabbar-new-link-highlight-active-bg-color: rgba(255, 255, 255, 0.1);
+  --f7-toolbar-new-bars-bg-color: rgba(0, 0, 0, 0.5);
 }
 .md {
-  --f7-toolbar-height: 56px;
-  --f7-toolbar-font-size: 14px;
-  --f7-toolbar-inner-padding-left: 0px;
-  --f7-toolbar-inner-padding-right: 0px;
+  --f7-toolbar-new-height: 56px;
+  --f7-toolbar-new-font-size: 14px;
+  --f7-toolbar-new-inner-padding-left: 0px;
+  --f7-toolbar-new-inner-padding-right: 0px;
   /*
-  --f7-toolbar-link-height: var(--f7-toolbar-height);
-  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
+  --f7-toolbar-new-link-color: var(--f7-bars-link-color);
+  --f7-toolbar-new-link-height: var(--f7-toolbar-new-height);
+  --f7-toolbar-new-link-line-height: var(--f7-toolbar-new-height);
   */
-  --f7-tabbar-icons-height: 80px;
-  --f7-tabbar-icons-tablet-height: 80px;
-  --f7-tabbar-icon-size: 24px;
-  --f7-tabbar-link-text-transform: none;
-  --f7-tabbar-link-font-weight: 500;
-  --f7-tabbar-link-letter-spacing: 0;
-  --f7-toolbar-link-font-weight: 500;
-  --f7-tabbar-label-font-size: 12px;
-  --f7-tabbar-label-tablet-font-size: 12px;
-  --f7-tabbar-label-font-weight: 500;
-  --f7-tabbar-label-letter-spacing: 0;
+  --f7-tabbar-new-icons-height: 80px;
+  --f7-tabbar-new-icons-tablet-height: 80px;
+  --f7-tabbar-new-icon-size: 24px;
+  --f7-tabbar-new-link-text-transform: none;
+  --f7-tabbar-new-link-font-weight: 500;
+  --f7-tabbar-new-link-letter-spacing: 0;
+  --f7-toolbar-new-link-font-weight: 500;
+  --f7-tabbar-new-label-font-size: 12px;
+  --f7-tabbar-new-label-tablet-font-size: 12px;
+  --f7-tabbar-new-label-font-weight: 500;
+  --f7-tabbar-new-label-letter-spacing: 0;
 }
 .md,
 .md .dark,
 .md [class*='color-'] {
-  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
-  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
-  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
-  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
+  --f7-tabbar-new-link-active-color: var(--f7-md-on-secondary-container);
+  --f7-tabbar-new-link-active-border-color: var(--f7-md-primary);
+  --f7-tabbar-new-link-inactive-color: var(--f7-md-on-surface-variant);
+  --f7-tabbar-new-link-active-icon-bg-color: var(--f7-md-secondary-container);
 }
-.toolbar {
+.toolbar-new {
   width: 100%;
   position: relative;
   margin: 0;
@@ -2296,169 +3945,86 @@ html.device-full-viewport body {
   z-index: 600;
   box-sizing: border-box;
   left: 0;
-  height: var(--f7-toolbar-height);
-  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
-  color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
-  font-size: var(--f7-toolbar-font-size);
-}
-@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
-  .ios-translucent-bars .toolbar {
-    background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
-    -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
-            backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
-  }
+  height: var(--f7-toolbar-new-height);
+  flex-shrink: 0;
+  color: var(--f7-toolbar-new-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-toolbar-new-font-size);
 }
-.toolbar b {
+.toolbar-new b {
   font-weight: 600;
 }
-.toolbar a {
-  color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+.toolbar-new a {
+  color: var(--f7-toolbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
   box-sizing: border-box;
   flex-shrink: 1;
   position: relative;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.toolbar .link {
+.toolbar-new .link {
   display: flex;
-  line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
-  height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
-  font-weight: var(--f7-toolbar-link-font-weight);
+  font-weight: var(--f7-toolbar-new-link-font-weight);
 }
-.toolbar i.icon {
+.toolbar-new i.icon {
   display: block;
 }
-.toolbar:after,
-.toolbar:before {
+.toolbar-new:after,
+.toolbar-new:before {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
 }
-.views > .toolbar,
-.view > .toolbar,
-.page > .toolbar {
+.views > .toolbar-new,
+.view > .toolbar-new,
+.page > .toolbar-new {
   position: absolute;
 }
-.toolbar-top,
-.ios .toolbar-top-ios,
-.md .toolbar-top-md {
+.toolbar-new-top,
+.ios .toolbar-new-top-ios,
+.md .toolbar-new-top-md {
   top: 0;
 }
-.toolbar-top .tab-link-highlight,
-.ios .toolbar-top-ios .tab-link-highlight,
-.md .toolbar-top-md .tab-link-highlight {
-  bottom: 0;
-}
-.toolbar-top.no-outline:after,
-.ios .toolbar-top-ios.no-outline:after,
-.md .toolbar-top-md.no-outline:after {
-  display: none !important;
-}
-.toolbar-top.toolbar-hidden:before,
-.ios .toolbar-top-ios.toolbar-hidden:before,
-.md .toolbar-top-md.toolbar-hidden:before {
-  display: none !important;
-}
-.toolbar-top:after,
-.ios .toolbar-top-ios:after,
-.md .toolbar-top-md:after,
-.toolbar-top:before,
-.ios .toolbar-top-ios:before,
-.md .toolbar-top-md:before {
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-}
-.toolbar-top:after,
-.ios .toolbar-top-ios:after,
-.md .toolbar-top-md:after {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
-  display: block;
-  z-index: 15;
-  top: auto;
-  right: auto;
-  bottom: 0;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  transform-origin: 50% 100%;
-  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
-}
-.toolbar-bottom,
-.ios .toolbar-bottom-ios,
-.md .toolbar-bottom-md {
+.toolbar-new-bottom,
+.ios .toolbar-new-bottom-ios,
+.md .toolbar-new-bottom-md {
   bottom: 0;
-  height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
-}
-.toolbar-bottom .tab-link-highlight,
-.ios .toolbar-bottom-ios .tab-link-highlight,
-.md .toolbar-bottom-md .tab-link-highlight {
-  top: 0;
+  height: calc(var(--f7-toolbar-new-height) + var(--f7-safe-area-bottom));
 }
-.toolbar-bottom .toolbar-inner,
-.ios .toolbar-bottom-ios .toolbar-inner,
-.md .toolbar-bottom-md .toolbar-inner {
+.toolbar-new-bottom .toolbar-new-inner,
+.ios .toolbar-new-bottom-ios .toolbar-new-inner,
+.md .toolbar-new-bottom-md .toolbar-new-inner {
   height: auto;
   top: 0;
   bottom: var(--f7-safe-area-bottom);
 }
-.toolbar-bottom.no-outline:before,
-.ios .toolbar-bottom-ios.no-outline:before,
-.md .toolbar-bottom-md.no-outline:before {
-  display: none !important;
-}
-.toolbar-bottom.toolbar-hidden:after,
-.ios .toolbar-bottom-ios.toolbar-hidden:after,
-.md .toolbar-bottom-md.toolbar-hidden:after {
-  display: none !important;
-}
-.toolbar-bottom:before,
-.ios .toolbar-bottom-ios:before,
-.md .toolbar-bottom-md:before {
-  content: '';
-  position: absolute;
-  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
-  display: block;
-  z-index: 15;
-  top: 0;
-  right: auto;
-  bottom: auto;
-  left: 0;
-  height: 1px;
-  width: 100%;
-  transform-origin: 50% 0%;
-  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
-}
-.toolbar-inner {
+.toolbar-new-inner {
   position: absolute;
+  z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   display: flex;
-  justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
   align-content: center;
-  overflow: hidden;
-  padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
+  padding: 0 calc(var(--f7-toolbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-new-inner-padding-left) + var(--f7-safe-area-left));
 }
-.views > .tabbar,
-.views > .tabbar-icons {
+.views > .tabbar-new,
+.views > .tabbar-new-icons {
   z-index: 5001;
 }
-.tabbar a,
-.tabbar-icons a {
-  color: var(--f7-tabbar-link-inactive-color);
+.tabbar-new a,
+.tabbar-new-icons a {
+  color: var(--f7-tabbar-new-link-inactive-color);
 }
-.tabbar .link,
-.tabbar-icons .link {
+.tabbar-new .link,
+.tabbar-new-icons .link {
   line-height: 1.4;
 }
-.tabbar .tab-link,
-.tabbar-icons .tab-link,
-.tabbar .link,
-.tabbar-icons .link {
+.tabbar-new .tab-link,
+.tabbar-new-icons .tab-link,
+.tabbar-new .link,
+.tabbar-new-icons .link {
   height: 100%;
   width: 100%;
   box-sizing: border-box;
@@ -2466,69 +4032,287 @@ html.device-full-viewport body {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  text-transform: var(--f7-tabbar-link-text-transform);
-  font-weight: var(--f7-tabbar-link-font-weight);
-  letter-spacing: var(--f7-tabbar-link-letter-spacing);
+  text-transform: var(--f7-tabbar-new-link-text-transform);
+  font-weight: var(--f7-tabbar-new-link-font-weight);
+  letter-spacing: var(--f7-tabbar-new-link-letter-spacing);
   overflow: hidden;
 }
-.tabbar .tab-link-active,
-.tabbar-icons .tab-link-active {
-  color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
-  background-color: var(--f7-tabbar-link-active-bg-color, transparent);
-}
-.tabbar i.icon,
-.tabbar-icons i.icon {
-  font-size: var(--f7-tabbar-icon-size);
-  height: var(--f7-tabbar-icon-size);
-  line-height: var(--f7-tabbar-icon-size);
-}
-.md .tabbar.tabbar-icons .tab-link-highlight,
-.md .tabbar-icons.tabbar-icons .tab-link-highlight {
-  display: none;
+.tabbar-new .tab-link-active,
+.tabbar-new-icons .tab-link-active {
+  color: var(--f7-tabbar-new-link-active-color, var(--f7-theme-color));
+  background-color: var(--f7-tabbar-new-link-active-bg-color, transparent);
 }
-.md .tabbar:not(.tabbar-icons) .tab-link-highlight,
-.md .tabbar-icons:not(.tabbar-icons) .tab-link-highlight {
-  position: absolute;
-  height: 2px;
-  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-  transition-duration: 300ms;
-  left: 0;
+.tabbar-new i.icon,
+.tabbar-new-icons i.icon {
+  font-size: var(--f7-tabbar-new-icon-size);
+  height: var(--f7-tabbar-new-icon-size);
+  line-height: var(--f7-tabbar-new-icon-size);
 }
-.tabbar-icons {
-  --f7-toolbar-height: var(--f7-tabbar-icons-height);
+.tabbar-new-icons {
+  --f7-toolbar-new-height: var(--f7-tabbar-new-icons-height);
 }
-.tabbar-icons .tab-link,
-.tabbar-icons .link {
+.tabbar-new-icons .tab-link,
+.tabbar-new-icons .link {
   height: 100%;
   justify-content: center;
   align-items: center;
 }
-.tabbar-icons .tabbar-label {
+.tabbar-new-icons .tabbar-new-label {
   display: block;
   line-height: 1;
   margin: 0;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--f7-tabbar-label-font-size);
-  text-transform: var(--f7-tabbar-label-text-transform);
-  font-weight: var(--f7-tabbar-label-font-weight);
-  letter-spacing: var(--f7-tabbar-label-letter-spacing);
+  font-size: var(--f7-tabbar-new-label-font-size);
+  text-transform: var(--f7-tabbar-new-label-text-transform);
+  font-weight: var(--f7-tabbar-new-label-font-weight);
+  letter-spacing: var(--f7-tabbar-new-label-letter-spacing);
 }
 @media (min-width: 768px) and (min-height: 600px) {
   :root {
-    --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
-    --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
+    --f7-tabbar-new-icons-height: var(--f7-tabbar-new-icons-tablet-height);
+    --f7-tabbar-new-label-font-size: var(--f7-tabbar-new-label-tablet-font-size);
   }
 }
-.tabbar-scrollable .toolbar-inner {
+.tabbar-new-scrollable .toolbar-new-inner {
   justify-content: flex-start;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   scrollbar-color: transparent;
 }
-.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
+.tabbar-new-scrollable .toolbar-new-inner::-webkit-scrollbar {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 0px;
+  display: none;
+  opacity: 0;
+  background: transparent;
+}
+.tabbar-new-scrollable .toolbar-new-inner::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+.tabbar-new-scrollable .toolbar-new-inner::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
+}
+.tabbar-new-scrollable .tab-link,
+.tabbar-new-scrollable .link {
+  width: auto;
+  flex-shrink: 0;
+}
+.toolbar-new-transitioning,
+.navbar-new-transitioning + .toolbar-new,
+.navbar-new-transitioning ~ * .toolbar-new {
+  transition-duration: var(--f7-toolbar-new-hide-show-transition-duration);
+}
+.toolbar-new-bottom ~ *,
+.ios .toolbar-new-bottom-ios ~ *,
+.md .toolbar-new-bottom-md ~ * {
+  --f7-page-toolbar-new-bottom-offset: var(--f7-toolbar-new-height);
+}
+.toolbar-new-bottom.tabbar-new-icons ~ *,
+.ios .toolbar-new-bottom-ios.tabbar-new-icons ~ *,
+.md .toolbar-new-bottom-md.tabbar-new-icons ~ * {
+  --f7-page-toolbar-new-bottom-offset: var(--f7-tabbar-new-icons-height);
+}
+.toolbar-new-bottom.toolbar-new-hidden,
+.ios .toolbar-new-bottom-ios.toolbar-new-hidden,
+.md .toolbar-new-bottom-md.toolbar-new-hidden {
+  transform: translate3d(0, 100%, 0);
+}
+.toolbar-new-top ~ *,
+.ios .toolbar-new-top-ios ~ *,
+.md .toolbar-new-top-md ~ *,
+.sheet-modal-bottom > .toolbar-new:not(.toolbar-new-bottom) ~ * {
+  --f7-page-toolbar-new-top-offset: var(--f7-toolbar-new-height);
+}
+.toolbar-new-top.tabbar-new-icons ~ *,
+.ios .toolbar-new-top-ios.tabbar-new-icons ~ *,
+.md .toolbar-new-top-md.tabbar-new-icons ~ *,
+.sheet-modal-bottom > .toolbar-new:not(.toolbar-new-bottom).tabbar-new-icons ~ * {
+  --f7-page-toolbar-new-top-offset: var(--f7-tabbar-new-icons-height);
+}
+.toolbar-new-top.toolbar-new-hidden,
+.ios .toolbar-new-top-ios.toolbar-new-hidden,
+.md .toolbar-new-top-md.toolbar-new-hidden {
+  transform: translate3d(0, -100%, 0);
+}
+.navbar-new ~ .toolbar-new-top,
+.navbars-new ~ .toolbar-new-top,
+.ios .navbar-new ~ .toolbar-new-top-ios,
+.ios .navbars-new ~ .toolbar-new-top-ios,
+.md .navbar-new ~ .toolbar-new-top-md,
+.navbar-new ~ * .toolbar-new-top,
+.navbars-new ~ * .toolbar-new-top,
+.ios .navbar-new ~ * .toolbar-new-top-ios,
+.ios .navbars-new ~ * .toolbar-new-top-ios,
+.md .navbar-new ~ * .toolbar-new-top-md,
+.navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top,
+.navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top,
+.ios .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios,
+.ios .navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios,
+.md .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-md {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+.navbar-new ~ .toolbar-new-top.toolbar-new-hidden,
+.navbars-new ~ .toolbar-new-top.toolbar-new-hidden,
+.ios .navbar-new ~ .toolbar-new-top-ios.toolbar-new-hidden,
+.ios .navbars-new ~ .toolbar-new-top-ios.toolbar-new-hidden,
+.md .navbar-new ~ .toolbar-new-top-md.toolbar-new-hidden,
+.navbar-new ~ * .toolbar-new-top.toolbar-new-hidden,
+.navbars-new ~ * .toolbar-new-top.toolbar-new-hidden,
+.ios .navbar-new ~ * .toolbar-new-top-ios.toolbar-new-hidden,
+.ios .navbars-new ~ * .toolbar-new-top-ios.toolbar-new-hidden,
+.md .navbar-new ~ * .toolbar-new-top-md.toolbar-new-hidden,
+.navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top.toolbar-new-hidden,
+.navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top.toolbar-new-hidden,
+.ios .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios.toolbar-new-hidden,
+.ios .navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios.toolbar-new-hidden,
+.md .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-md.toolbar-new-hidden {
+  transform: translate3d(0, calc(-1 * (var(--f7-navbar-new-height) + var(--f7-toolbar-new-height) + var(--f7-safe-area-top))), 0);
+}
+.navbar-new ~ .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.navbars-new ~ .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbar-new ~ .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbars-new ~ .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.md .navbar-new ~ .toolbar-new-top-md.toolbar-new-hidden.tabbar-new-icons,
+.navbar-new ~ * .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.navbars-new ~ * .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbar-new ~ * .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbars-new ~ * .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.md .navbar-new ~ * .toolbar-new-top-md.toolbar-new-hidden.tabbar-new-icons,
+.navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.ios .navbars-new ~ .page:not(.no-navbar-new) .toolbar-new-top-ios.toolbar-new-hidden.tabbar-new-icons,
+.md .navbar-new ~ .page:not(.no-navbar-new) .toolbar-new-top-md.toolbar-new-hidden.tabbar-new-icons {
+  transform: translate3d(0, calc(-1 * (var(--f7-navbar-new-height) + var(--f7-tabbar-new-icons-height) + var(--f7-safe-area-top))), 0);
+}
+.navbar-new-hidden + .toolbar-new-top:not(.toolbar-new-hidden),
+.ios .navbar-new-hidden + .toolbar-new-top-ios:not(.toolbar-new-hidden),
+.md .navbar-new-hidden + .toolbar-new-top-md:not(.toolbar-new-hidden),
+.navbar-new-hidden ~ * .toolbar-new-top:not(.toolbar-new-hidden),
+.ios .navbar-new-hidden ~ * .toolbar-new-top-ios:not(.toolbar-new-hidden),
+.md .navbar-new-hidden ~ * .toolbar-new-top-md:not(.toolbar-new-hidden) {
+  transform: translate3d(0, calc(0px - var(--f7-navbar-new-height)), 0);
+}
+.navbar-new-large-hidden + .toolbar-new-top:not(.toolbar-new-hidden),
+.ios .navbar-new-large-hidden + .toolbar-new-top-ios:not(.toolbar-new-hidden),
+.md .navbar-new-large-hidden + .toolbar-new-top-md:not(.toolbar-new-hidden),
+.navbar-new-large-hidden ~ * .toolbar-new-top:not(.toolbar-new-hidden),
+.ios .navbar-new-large-hidden ~ * .toolbar-new-top-ios:not(.toolbar-new-hidden),
+.md .navbar-new-large-hidden ~ * .toolbar-new-top-md:not(.toolbar-new-hidden) {
+  transform: translate3d(0, calc(0px - var(--f7-navbar-new-height) - var(--f7-navbar-new-large-title-height)), 0);
+}
+.ios .toolbar-new-pane {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.ios .toolbar-new-pane,
+.ios .toolbar-new .left,
+.ios .toolbar-new .right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  border-radius: 32px;
+  -webkit-backdrop-filter: saturate(180%) blur(16px);
+          backdrop-filter: saturate(180%) blur(16px);
+  box-shadow: var(--f7-glass-shadow);
+  background-color: var(--f7-glass-bg-color);
+}
+.ios .toolbar-new .left {
+  margin-right: auto;
+}
+.ios .toolbar-new .right {
+  margin-left: auto;
+}
+.ios .toolbar-new .left:empty,
+.ios .toolbar-new .right:empty {
+  display: none;
+}
+.ios .toolbar-new a.icon-only {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0;
+}
+.ios .toolbar-new .link {
+  padding: 0 12px;
+  height: 100%;
+}
+.ios .toolbar-new:before,
+.ios .toolbar-new:after {
+  pointer-events: none;
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.ios .toolbar-new:before {
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
+  -webkit-mask-image: linear-gradient(to top, black calc(50% + var(--f7-safe-area-bottom, 0px)), transparent 100%);
+          mask-image: linear-gradient(to top, black calc(50% + var(--f7-safe-area-bottom, 0px)), transparent 100%);
+}
+.ios .toolbar-new:after {
+  background-image: linear-gradient(to top, var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-bottom, 0px), transparent 100%);
+}
+.ios .toolbar-new.toolbar-new-bottom:before,
+.ios .toolbar-new.messagebar:before,
+.ios .toolbar-new.toolbar-new-bottom:after,
+.ios .toolbar-new.messagebar:after {
+  top: -16px;
+}
+.ios .toolbar-new.toolbar-new-bottom .toolbar-new-inner,
+.ios .toolbar-new.messagebar .toolbar-new-inner {
+  padding-bottom: 16px;
+}
+.ios .toolbar-new.toolbar-new-top:before,
+.ios .toolbar-new:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar):before {
+  -webkit-mask-image: linear-gradient(to bottom, black calc(50% + var(--f7-safe-area-top, 0px)), transparent 100%);
+          mask-image: linear-gradient(to bottom, black calc(50% + var(--f7-safe-area-top, 0px)), transparent 100%);
+}
+.ios .toolbar-new.toolbar-new-top:after,
+.ios .toolbar-new:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar):after {
+  background-image: linear-gradient(to bottom, var(--f7-toolbar-new-bars-bg-color) var(--f7-safe-area-top, 0px), transparent 100%);
+}
+.ios .toolbar-new.toolbar-new-top:before,
+.ios .toolbar-new:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar):before,
+.ios .toolbar-new.toolbar-new-top:after,
+.ios .toolbar-new:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar):after {
+  bottom: -16px;
+}
+.ios .toolbar-new.toolbar-new-top .toolbar-new-inner,
+.ios .toolbar-new:not(.toolbar-new-bottom, .toolbar-new-top, .messagebar) .toolbar-new-inner {
+  padding-top: 16px;
+}
+.ios .navbar-new ~ .toolbar-new-top:before,
+.ios .navbar-new ~ .toolbar-new-top:after {
+  display: none;
+}
+.ios .toolbar-new-inner {
+  justify-content: center;
+  overflow: visible;
+  gap: 16px;
+}
+.ios .tabbar-new-scrollable .toolbar-new-pane {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  scrollbar-color: transparent;
+  justify-content: flex-start;
+}
+.ios .tabbar-new-scrollable .toolbar-new-pane::-webkit-scrollbar {
   -webkit-appearance: none;
           appearance: none;
   width: 0px;
@@ -2536,195 +4320,183 @@ html.device-full-viewport body {
   opacity: 0;
   background: transparent;
 }
-.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-track {
+.ios .tabbar-new-scrollable .toolbar-new-pane::-webkit-scrollbar-track {
   box-shadow: none;
   background: transparent;
 }
-.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-thumb {
+.ios .tabbar-new-scrollable .toolbar-new-pane::-webkit-scrollbar-thumb {
   background-color: transparent;
   outline: none;
   border-radius: 9999px;
   position: relative;
 }
-.tabbar-scrollable .tab-link,
-.tabbar-scrollable .link {
-  width: auto;
-  flex-shrink: 0;
-}
-.toolbar-transitioning,
-.navbar-transitioning + .toolbar,
-.navbar-transitioning ~ * .toolbar {
-  transition-duration: var(--f7-toolbar-hide-show-transition-duration);
-}
-.toolbar-bottom ~ *,
-.ios .toolbar-bottom-ios ~ *,
-.md .toolbar-bottom-md ~ * {
-  --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
-}
-.toolbar-bottom.tabbar-icons ~ *,
-.ios .toolbar-bottom-ios.tabbar-icons ~ *,
-.md .toolbar-bottom-md.tabbar-icons ~ * {
-  --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
+.ios .tabbar-new:not(.tabbar-new-scrollable) {
+  touch-action: none;
 }
-.toolbar-bottom.toolbar-hidden,
-.ios .toolbar-bottom-ios.toolbar-hidden,
-.md .toolbar-bottom-md.toolbar-hidden {
-  transform: translate3d(0, 100%, 0);
+.ios .tabbar-new-icons .tab-link,
+.ios .tabbar-new-icons .link {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
-.toolbar-top ~ *,
-.ios .toolbar-top-ios ~ *,
-.md .toolbar-top-md ~ * {
-  --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
+.ios .tabbar-new-icons .tab-link i + span,
+.ios .tabbar-new-icons .link i + span {
+  margin: 0;
+  margin-top: 4px;
 }
-.toolbar-top.tabbar-icons ~ *,
-.ios .toolbar-top-ios.tabbar-icons ~ *,
-.md .toolbar-top-md.tabbar-icons ~ * {
-  --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
+@media (max-width: 767px) {
+  .ios .tabbar-new .toolbar-new-pane {
+    width: 100%;
+  }
 }
-.toolbar-top.toolbar-hidden,
-.ios .toolbar-top-ios.toolbar-hidden,
-.md .toolbar-top-md.toolbar-hidden {
-  transform: translate3d(0, -100%, 0);
+@media (min-width: 768px) {
+  .ios .tabbar-new .tab-link {
+    padding-left: 16px;
+    padding-right: 16px;
+    min-width: 96px;
+  }
 }
-.navbar ~ .toolbar-top,
-.navbars ~ .toolbar-top,
-.ios .navbar ~ .toolbar-top-ios,
-.ios .navbars ~ .toolbar-top-ios,
-.md .navbar ~ .toolbar-top-md,
-.navbar ~ * .toolbar-top,
-.navbars ~ * .toolbar-top,
-.ios .navbar ~ * .toolbar-top-ios,
-.ios .navbars ~ * .toolbar-top-ios,
-.md .navbar ~ * .toolbar-top-md,
-.navbar ~ .page:not(.no-navbar) .toolbar-top,
-.navbars ~ .page:not(.no-navbar) .toolbar-top,
-.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
-.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
-.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
-  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+.ios .tabbar-new-scrollable .toolbar-new-inner {
+  justify-content: flex-start;
 }
-.navbar ~ .toolbar-top.toolbar-hidden,
-.navbars ~ .toolbar-top.toolbar-hidden,
-.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
-.ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
-.md .navbar ~ .toolbar-top-md.toolbar-hidden,
-.navbar ~ * .toolbar-top.toolbar-hidden,
-.navbars ~ * .toolbar-top.toolbar-hidden,
-.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
-.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
-.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
-.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
-.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
-.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
-.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
-.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
-  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
+.ios .tabbar-new-scrollable .tab-link,
+.ios .tabbar-new-scrollable .link {
+  padding: 0 8px;
 }
-.navbar ~ .toolbar-top.toolbar-hidden.tabbar-icons,
-.navbars ~ .toolbar-top.toolbar-hidden.tabbar-icons,
-.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-icons,
-.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
-.navbars ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
-.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-icons,
-.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
-.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
-.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
-.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-icons {
-  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))), 0);
+.ios .tab-link-highlight {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  transition-duration: 300ms;
+  border-radius: inherit;
+  left: 0;
 }
-.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
-.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
-.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
-.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
-  transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
+.ios .tab-link-highlight:before,
+.ios .tab-link-highlight:after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: inherit;
+  transition-duration: 300ms;
 }
-.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
-.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
-.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
-.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
-.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
-  transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
+.ios .tab-link-highlight:before {
+  background-color: var(--f7-tabbar-new-link-highlight-bg-color);
 }
-.ios .toolbar a.icon-only {
-  min-height: var(--f7-toolbar-height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  min-width: 44px;
+.ios .tab-link-highlight:after {
+  opacity: 0;
+  box-shadow: var(--f7-glass-shadow-thumb);
+  background-color: var(--f7-tabbar-new-link-highlight-active-bg-color);
 }
-.ios .tabbar-icons .tab-link,
-.ios .tabbar-icons .link {
-  padding-top: 4px;
-  padding-bottom: 4px;
+.ios .tab-link-highlight-pressed:before {
+  opacity: 0;
 }
-.ios .tabbar-icons .tab-link i + span,
-.ios .tabbar-icons .link i + span {
-  margin: 0;
-  margin-top: 4px;
+.ios .tab-link-highlight-pressed:after {
+  opacity: 1;
 }
-@media (min-width: 768px) and (min-height: 600px) {
-  .ios .tabbar .tab-link,
-  .ios .tabbar-icons .tab-link,
-  .ios .tabbar .link,
-  .ios .tabbar-icons .link {
-    justify-content: center;
-    flex-direction: row;
-  }
-  .ios .tabbar .tab-link i + span,
-  .ios .tabbar-icons .tab-link i + span,
-  .ios .tabbar .link i + span,
-  .ios .tabbar-icons .link i + span {
-    margin-left: 5px;
-  }
+.ios .tab-link-highlight-pressed:before,
+.ios .tab-link-highlight-pressed:after {
+  scale: 1.4;
 }
-.ios .tabbar-scrollable .toolbar-inner {
-  justify-content: flex-start;
+.md .toolbar-new-pane {
+  display: contents;
 }
-.ios .tabbar-scrollable .tab-link,
-.ios .tabbar-scrollable .link {
-  padding: 0 8px;
+.md .toolbar-new {
+  background-color: var(--f7-toolbar-new-bg-color, var(--f7-bars-bg-color));
 }
-.md .toolbar .link {
+.md .toolbar-new .link {
   justify-content: center;
   padding: 0 12px;
   min-width: 48px;
+  min-height: 48px;
+  line-height: var(--f7-toolbar-new-link-line-height, var(--f7-toolbar-new-height));
+  height: var(--f7-toolbar-new-link-height, var(--f7-toolbar-new-height));
 }
-.md .toolbar a.icon-only {
-  min-width: 0;
+.md .toolbar-new a.icon-only {
+  min-width: 48px;
   flex-shrink: 0;
+  padding: 0;
 }
-.md .tabbar .tab-link,
-.md .tabbar-icons .tab-link,
-.md .tabbar .link,
-.md .tabbar-icons .link {
+.md .toolbar-new-top.no-outline:after,
+.md .md .toolbar-new-top-md.no-outline:after {
+  display: none !important;
+}
+.md .toolbar-new-top.toolbar-new-hidden:before,
+.md .md .toolbar-new-top-md.toolbar-new-hidden:before {
+  display: none !important;
+}
+.md .toolbar-new-top:after,
+.md .md .toolbar-new-top-md:after,
+.md .toolbar-new-top:before,
+.md .md .toolbar-new-top-md:before {
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+.md .toolbar-new-top:after,
+.md .md .toolbar-new-top-md:after {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-toolbar-new-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 100%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.md .toolbar-new-bottom.no-outline:before,
+.md .md .toolbar-new-bottom-md.no-outline:before {
+  display: none !important;
+}
+.md .toolbar-new-bottom.toolbar-new-hidden:after,
+.md .md .toolbar-new-bottom-md.toolbar-new-hidden:after {
+  display: none !important;
+}
+.md .toolbar-new-bottom:before,
+.md .md .toolbar-new-bottom-md:before {
+  content: '';
+  position: absolute;
+  background-color: var(--f7-toolbar-new-border-color, var(--f7-bars-border-color));
+  display: block;
+  z-index: 15;
+  top: 0;
+  right: auto;
+  bottom: auto;
+  left: 0;
+  height: 1px;
+  width: 100%;
+  transform-origin: 50% 0%;
+  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+}
+.md .toolbar-new-inner {
+  justify-content: space-between;
+  overflow: hidden;
+}
+.md .tabbar-new .tab-link,
+.md .tabbar-new-icons .tab-link,
+.md .tabbar-new .link,
+.md .tabbar-new-icons .link {
   padding-left: 0;
   padding-right: 0;
 }
-.md .tabbar a.icon-only,
-.md .tabbar-icons a.icon-only {
+.md .tabbar-new a.icon-only,
+.md .tabbar-new-icons a.icon-only {
   flex-shrink: initial;
 }
-.md .tabbar .tab-link,
-.md .tabbar-icons .tab-link {
+.md .tabbar-new .tab-link,
+.md .tabbar-new-icons .tab-link {
   transition-duration: 300ms;
   overflow: hidden;
   position: relative;
 }
-.md .tabbar i.icon,
-.md .tabbar-icons i.icon {
+.md .tabbar-new i.icon,
+.md .tabbar-new-icons i.icon {
   position: relative;
 }
-.md .tabbar i.icon::before,
-.md .tabbar-icons i.icon::before {
+.md .tabbar-new i.icon::before,
+.md .tabbar-new-icons i.icon::before {
   content: '';
   width: 64px;
   height: 32px;
@@ -2733,37 +4505,57 @@ html.device-full-viewport body {
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%) scaleX(0.5);
-  background: var(--f7-tabbar-link-active-icon-bg-color);
+  background: var(--f7-tabbar-new-link-active-icon-bg-color);
   opacity: 0;
   transition-duration: 200ms;
   z-index: -1;
 }
-.md .tabbar i.icon + .tabbar-label,
-.md .tabbar-icons i.icon + .tabbar-label {
+.md .tabbar-new i.icon + .tabbar-new-label,
+.md .tabbar-new-icons i.icon + .tabbar-new-label {
   margin-top: 8px;
 }
-.md .tabbar .tab-link-active i.icon::before,
-.md .tabbar-icons .tab-link-active i.icon::before {
+.md .tabbar-new .tab-link-active i.icon::before,
+.md .tabbar-new-icons .tab-link-active i.icon::before {
   opacity: 1;
   transform: translateX(-50%) translateY(-50%) scaleX(1);
 }
-.md .tabbar-icons .tab-link,
-.md .tabbar-icons .link {
+.md .tabbar-new-icons .tab-link,
+.md .tabbar-new-icons .link {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-.md .tabbar-label {
+.md .tabbar-new-label {
   max-width: 100%;
   overflow: hidden;
   line-height: 1.2;
 }
-.md .tabbar-scrollable .toolbar-inner {
+.md .tabbar-new-scrollable .toolbar-new-inner {
   overflow: auto;
 }
-.md .tabbar-scrollable .tab-link,
-.md .tabbar-scrollable .link {
+.md .tabbar-new-scrollable .tab-link,
+.md .tabbar-new-scrollable .link {
   padding: 0 12px;
 }
+.md .toolbar-new-top-md .tab-link-highlight,
+.md .toolbar-new-top .tab-link-highlight {
+  bottom: 0;
+}
+.md .toolbar-new-bottom .tab-link-highlight,
+.md .toolbar-new-bottom-md .tab-link-highlight {
+  top: 0;
+}
+.md .tabbar-new.tabbar-new-icons .tab-link-highlight,
+.md .tabbar-new-icons.tabbar-new-icons .tab-link-highlight {
+  display: none;
+}
+.md .tabbar-new:not(.tabbar-new-icons) .tab-link-highlight,
+.md .tabbar-new-icons:not(.tabbar-new-icons) .tab-link-highlight {
+  position: absolute;
+  height: 2px;
+  background: var(--f7-tabbar-new-link-active-border-color, var(--f7-theme-color));
+  transition-duration: 300ms;
+  left: 0;
+}
 /* === Subnavbar === */
 :root {
   /*
@@ -2996,18 +4788,18 @@ html.device-full-viewport body {
   --f7-block-text-color: inherit;
   --f7-block-margin-vertical: 35px;
   --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
-  --f7-block-title-font-size: 16px;
+  --f7-block-title-font-size: 17px;
   --f7-block-title-font-weight: 600;
   --f7-block-title-line-height: 20px;
   --f7-block-title-margin-bottom: 10px;
-  --f7-block-title-medium-font-size: 22px;
+  --f7-block-title-medium-font-size: 20px;
   --f7-block-title-medium-font-weight: bold;
   --f7-block-title-medium-line-height: 1.4;
-  --f7-block-title-large-font-size: 30px;
+  --f7-block-title-large-font-size: 22px;
   --f7-block-title-large-font-weight: bold;
   --f7-block-title-large-line-height: 1.3;
-  --f7-block-inset-border-radius: 8px;
-  --f7-block-title-text-color: #000;
+  --f7-block-inset-border-radius: 24px;
+  --f7-block-title-text-color: rgba(0, 0, 0, 0.6);
   --f7-block-strong-text-color: #000;
   --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
@@ -3017,7 +4809,7 @@ html.device-full-viewport body {
 }
 .ios .dark,
 .ios.dark {
-  --f7-block-title-text-color: #fff;
+  --f7-block-title-text-color: rgba(255, 255, 255, 0.6);
   --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-strong-text-color: #fff;
@@ -3423,7 +5215,6 @@ html.device-full-viewport body {
 :root {
   --f7-list-inset-side-margin: 16px;
   --f7-list-item-padding-horizontal: 16px;
-  --f7-list-item-padding-vertical: 8px;
   --f7-list-media-item-padding-horizontal: 16px;
   --f7-list-item-text-max-lines: 2;
   --f7-list-chevron-icon-font-size: 20px;
@@ -3467,8 +5258,9 @@ html.device-full-viewport body {
   --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
 }
 .ios {
+  --f7-list-item-padding-vertical: 12px;
   --f7-list-in-list-padding-left: 30px;
-  --f7-list-inset-border-radius: 8px;
+  --f7-list-inset-border-radius: 24px;
   --f7-list-margin-vertical: 35px;
   --f7-list-font-size: 17px;
   --f7-list-chevron-icon-area: 20px;
@@ -3480,10 +5272,10 @@ html.device-full-viewport body {
   --f7-list-item-text-line-height: 21px;
   --f7-list-item-after-font-size: inherit;
   --f7-list-item-after-padding: 5px;
-  --f7-list-item-min-height: 44px;
+  --f7-list-item-min-height: 52px;
   --f7-list-item-media-icons-margin: 5px;
   --f7-list-media-item-padding-vertical: 10px;
-  --f7-list-media-item-title-font-weight: 600;
+  --f7-list-media-item-title-font-weight: 500;
   --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
   /*
   --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
@@ -3493,7 +5285,7 @@ html.device-full-viewport body {
   --f7-list-group-title-font-size: inherit;
   --f7-list-group-title-font-weight: 400;
   --f7-menu-list-offset: 8px;
-  --f7-menu-list-border-radius: 8px;
+  --f7-menu-list-border-radius: 16px;
   --f7-menu-list-item-bg-color: transparent;
   --f7-menu-list-item-text-color: inherit;
   --f7-menu-list-item-min-height: 44px;
@@ -3512,7 +5304,7 @@ html.device-full-viewport body {
 .ios .dark,
 .ios.dark {
   --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
-  --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
+  --f7-list-outline-inset-border-color: rgba(255, 255, 255, 0.15);
   --f7-list-strong-bg-color: #1c1c1d;
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
@@ -3525,6 +5317,7 @@ html.device-full-viewport body {
   --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
 }
 .md {
+  --f7-list-item-padding-vertical: 8px;
   --f7-list-in-list-padding-left: 24px;
   --f7-list-inset-border-radius: 16px;
   --f7-list-margin-vertical: 32px;
@@ -3735,8 +5528,8 @@ html.device-full-viewport body {
 .list label.item-content {
   color: inherit;
 }
-.list .item-link.active-state,
-.list label.item-content.active-state {
+.list .item-link.active-state:not(:has(.toggle-active-state)),
+.list label.item-content.active-state:not(:has(.toggle-active-state)) {
   background-color: var(--f7-list-link-pressed-bg-color);
 }
 .list .item-link .item-inner {
@@ -4546,7 +6339,6 @@ li.list-group-title:after,
   --f7-badge-bg-color: var(--f7-theme-color);
 }
 :root {
-  --f7-button-font-size: 14px;
   --f7-button-min-width: 32px;
   --f7-button-bg-color: transparent;
   --f7-button-border-width: 0px;
@@ -4578,12 +6370,13 @@ li.list-group-title:after,
   --f7-segmented-strong-button-active-text-color: #fff;
 }
 .ios {
+  --f7-button-font-size: 15px;
   --f7-button-fill-text-color: #fff;
-  --f7-button-text-transform: uppercase;
-  --f7-button-height: 28px;
+  --f7-button-text-transform: none;
+  --f7-button-height: 34px;
   --f7-button-padding-horizontal: 10px;
   --f7-button-border-radius: 4px;
-  --f7-button-font-weight: 600;
+  --f7-button-font-weight: 500;
   --f7-button-letter-spacing: 0;
   /*
   --f7-button-outline-border-color: var(--f7-theme-color);
@@ -4593,15 +6386,15 @@ li.list-group-title:after,
   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
   */
-  --f7-button-large-text-transform: uppercase;
-  --f7-button-large-height: 44px;
+  --f7-button-large-text-transform: none;
+  --f7-button-large-height: 48px;
   --f7-button-large-font-size: 17px;
   --f7-button-large-font-weight: 500;
   --f7-button-small-outline-border-width: 2px;
-  --f7-button-small-text-transform: uppercase;
-  --f7-button-small-height: 26px;
-  --f7-button-small-font-size: 13px;
-  --f7-button-small-font-weight: 600;
+  --f7-button-small-text-transform: none;
+  --f7-button-small-height: 28px;
+  --f7-button-small-font-size: 14px;
+  --f7-button-small-font-weight: 500;
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 600;
   --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
@@ -4616,6 +6409,7 @@ li.list-group-title:after,
   --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
 }
 .md {
+  --f7-button-font-size: 14px;
   /*
   --f7-button-pressed-bg-color: transparent;
   */
@@ -5158,7 +6952,8 @@ i.icon {
 .icon-back:after,
 .icon-prev:after,
 .icon-forward:after,
-.icon-next:after {
+.icon-next:after,
+.icon-close:after {
   font-family: 'framework7-core-icons';
   font-weight: normal;
   font-style: normal;
@@ -5199,6 +6994,15 @@ i.icon {
 .ios .icon-next:after {
   font-size: 16px;
 }
+.ios .icon-close {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 20px;
+}
+.ios .icon-close:after {
+  content: 'close_ios';
+}
 .ios .icon-back:after,
 .ios .icon-prev:after {
   content: 'chevron_left_ios';
@@ -5220,6 +7024,15 @@ i.icon {
 .md .icon-prev:after {
   line-height: 1.2;
 }
+.md .icon-close {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 24px;
+}
+.md .icon-close:after {
+  content: 'close_md';
+}
 .md .icon-back:after {
   content: 'arrow_left_md';
 }