/**
 * Framework7 9.0.2
 * Full featured mobile HTML framework for building iOS & Android apps
 * https://framework7.io/
 * Copyright 2014-2025 Vladimir Kharlampidi
 * Released under the MIT License
 * Released on: December 5, 2025
 */

:root {
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px;
    --f7-safe-area-top: 0px;
    --f7-safe-area-bottom: 0px;
    --f7-safe-area-outer-left: 0px;
    --f7-safe-area-outer-right: 0px;
    --f7-device-pixel-ratio: 1
}

@supports (left:env(safe-area-inset-left)) {
    :root {
        --f7-safe-area-top: env(safe-area-inset-top);
        --f7-safe-area-bottom: env(safe-area-inset-bottom)
    }

    :root .ios-edges,
    :root .ios-left-edge,
    :root .panel-left,
    :root .popup,
    :root .safe-area-left,
    :root .safe-areas,
    :root .sheet-modal {
        --f7-safe-area-left: env(safe-area-inset-left);
        --f7-safe-area-outer-left: env(safe-area-inset-left)
    }

    :root .ios-edges,
    :root .ios-right-edge,
    :root .panel-right,
    :root .popup,
    :root .safe-area-right,
    :root .safe-areas,
    :root .sheet-modal {
        --f7-safe-area-right: env(safe-area-inset-right);
        --f7-safe-area-outer-right: env(safe-area-inset-right)
    }

    :root .no-ios-edges,
    :root .no-ios-left-edge,
    :root .no-safe-area-left,
    :root .no-safe-areas {
        --f7-safe-area-left: 0px;
        --f7-safe-area-outer-left: 0px
    }

    :root .no-ios-edges,
    :root .no-ios-right-edge,
    :root .no-safe-area-right,
    :root .no-safe-areas {
        --f7-safe-area-right: 0px;
        --f7-safe-area-outer-right: 0px
    }
}

@media (min-resolution:2dppx) {
    :root {
        --f7-device-pixel-ratio: 2
    }
}

@media (min-resolution:3dppx) {
    :root {
        --f7-device-pixel-ratio: 3
    }
}

:root {
    --f7-font-size: 14px;
    --f7-bars-translucent-opacity: 0.8;
    --f7-bars-translucent-blur: 20px
}

.ios {
    --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
    --f7-line-height: 1.4;
    --f7-bars-border-color: #0000;
    --f7-glass-bg-color: #ffffffbf;
    --f7-glass-shadow: inset -1px -1px 0px -0.5px #fff, inset 1px 1px 0px -0.5px #fff, inset 3px 3px 10px -3px #ddd, inset -3px -3px 10px -3px #ddd, inset 0 0 5px 1px #fff, inset 0 0 0 0.5px #00000040, inset 0 0 24px 0 #0000001a, 0 0 25px 0 #0003;
    --f7-glass-shadow-thumb: inset -3px -3px 0px -3.5px #fff, inset 3px 3px 0px -3.5px #fff, inset 0px 0px 0px 0.5px #ffffff80, inset 3px 3px 10px -2px #eee, inset -3px -3px 10px -2px #eee, inset 0 0 5px 1px #fff;
    --f7-bars-text-color: #000;
    --f7-text-color: #000;
    --f7-bars-bg-color: #efeff4
}

.ios .dark,
.ios.dark {
    --f7-glass-bg-color: #32323280;
    --f7-glass-shadow: inset -2px -2px 0.5px -2.5px #fff6, inset 3px 3px 0.5px -3.5px #fff6, inset 2px 2px 0.5px -2px #262626, inset -2px -2px 0.5px -2px #262626, inset 0 0 5px 1px #141414, inset 0 0 0 1px #ffffff26, inset 0 0 10px 0 hsla(0, 0%, 100%, .075), inset 0 0 24px 0 #ffffff0d, 0 0 25px 0 #00000026;
    --f7-glass-shadow-thumb: inset 3px 3px 0px -3.5px #fff, inset -3px -3px 0px -3.5px #fff, inset -0.5px -0.5px 0px #ffffff80, inset 0.5px 0.5px 0px #ffffff1a, inset -3px 3px 0px -3.5px #ffffff40, inset 0px -5px 0px -3.5px #ffffff40, inset 0px -5px 5px #ffffff40;
    --f7-bars-text-color: #fff;
    --f7-text-color: #fff;
    --f7-bars-bg-color: #00000080
}

.md {
    --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
    --f7-line-height: 1.5;
    --f7-bars-border-color: #0000;
    --f7-text-color: #212121
}

.md .dark,
.md.dark {
    --f7-text-color: #ffffffde
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-bars-link-color: var(--f7-md-on-surface);
    --f7-bars-bg-color: var(--f7-md-surface-2);
    --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb)
}

.text-color-primary {
    --f7-theme-color-text-color: var(--f7-theme-color)
}

.bg-color-primary {
    --f7-theme-color-bg-color: var(--f7-theme-color)
}

.border-color-primary {
    --f7-theme-color-border-color: var(--f7-theme-color)
}

.ripple-color-primary {
    --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3)
}

@font-face {
    font-family: framework7-core-icons;
    font-style: normal;
    font-weight: 400;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAA2UABAAAAAAGZAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcqepx4kdERUYAAAGIAAAAIwAAACQAfQBXR1BPUwAAAawAAAAuAAAANuAY7+xHU1VCAAAB3AAAAawAAAQkBKcLck9TLzIAAAOIAAAASgAAAGBRKF+WY21hcAAAA9QAAACJAAABYt6F0cBjdnQgAAAEYAAAAAQAAAAEABEBRGdhc3AAAARkAAAACAAAAAj//wADZ2x5ZgAABGwAAAUaAAAKmDl32O9oZWFkAAAJiAAAADAAAAA2LZDoBWhoZWEAAAm4AAAAIAAAACQHgQM9aG10eAAACdgAAABlAAABJC7p//Fsb2NhAAAKQAAAAJQAAACUSJxLbG1heHAAAArUAAAAHwAAACAAjwBPbmFtZQAACvQAAAFSAAAC1n9rlKpwb3N0AAAMSAAAAUsAAAJxUpmL2HicY2BgYGQAgvvXTkWC6Kecl4/AaABV+gfkAAB4nGNgZGBg4AFiGSBmAkJmBk0GRgYtBg8gmwUsxgAADXYA1QB4nGNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB4nHVTSU4CQRR91Y0RZyaBKGAYVIKI8zzPhgULb0BiNBriynAEj0E8h0vP4MoDuPIIJvh+NdBNV0inU9X/vf//q1e/oQCMIoMyVKP++oIgAoyg3YYgqvH0WGcMzhexgF6DUPY3hhFD02pZf3bFrtkPsBkv4hpbmEKWTwYL3IW55vlkkOJXClEyJj14FknEkSDDQVcw4UFn2WO6h4VRQA1NtPCJHxVUJVVVz+pNvasP9aV+LcuK45YZCb7zukba1yHEChLPcnfGiv1Mt5uXt2Pwolpd2sc7pL5+XgFzPk7Z4HjVJRnLYY28QbocxoXB8LtY4TqohuB7HTyCGX1Diz6d67yFQR3OMW7kOro2OojZ9chAuh6uYsyoJgr3OZemm0sYYU3pFet1veTcuTHJlUksoYorniSmNeQ1JpUKrBXt5R5zN4ghlU7Yz4tLTP6DTXohc53k6ZLUHtJ7R2fEUCgZp3Q0z/riszvfLr7NTiFWl0g3PkTXitR4h3scMD+mcyP0pf+2SvTKiznZy1q7GxXtN3RGctxZ2uV/3I04pxtmToS7NP3OIvcP0IBD6HicY2Bh/MI4gYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgZWaAAUYGJBCQ5prC0MCgwFDFeOD/AQY9ps+MxTA1jAfAShQYxABDtQxkAAB4nGNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkKzDoMlgyxDNU/f8PFAXxDIC8xP///z/+f/3/1f8b/q+HmgAHjGwMcCFGJiDBxICmAGI1HLAwMLCysXNwcnHz8PIxEAP4GQQEhYRFRMXEJSSlpGVk5eQVFJWUVVTV1DU0iTKA1gAAxH4T6AAAAAARAUQAAAAB//8AAnic7VXdTxxVFL9nlp27sOx87MdMpHULdNhpUgW7s7uD7RaI9CMhlBoDisSkULe8WI3V8BFTdnkrbYprTAkp6VsTm9iXsg9q+gDoC7VxNSE2MaZP+GCi9akP2qQMnjOzi0D/A9Pk3K9z7z1z7u/8zhkmMJUxdh0GmI9x1roIrC1b4jXsr+Si6H+YLfkEnLJFH6n9pC5xEZ5mS0B6S7VU01L3qzMTo6Mw4NxWwUJrgLLiNpyph2j+XPdc97/XCdt0PtS+KrhqVoOtFl6HIcwwmUVYjLFwsxjVkplUIqlFxeZECmyT6+aX/dlsf/bG+Z6e8z2Q3nNhT+ECdGX7jx7tf7OHlM6TvR/uefcC2YTNf5gE78BHTGOsE8xEZh/YGV2TQde42AZcNBPi5cuhBgk7SaI+JIXcuY39XlRIUmhrs74+5L5p81uw0OkwYy3NskCeke1UJrkPNDAB4LdgoxZcXg5qTcF1uSQI60GtMbi0TNp12cNg83dYgS+wrryAVnRupk1xfzPZ0GJRrjfTq/H10DWdmOatncdHRq6cPcC/Gj52bLh7djpRiPEDI1dGRo53tPLu4e7uYdcvlmBLiJ+fsQhHk/bS+LixsAAZd2BePDYfwwLMsgB+NdZEh3QOC869olEuG8VfU95YOctC8B3kyJ4NOph2EWTDKReNgcqI+D5BLA56WNgdkLbR/yihi/Fqg4Qf8On46KUlAmBd/gkEWCdUUFHFgr4TZaue3zY6ZNqrN41Cwfga+3zLzv00uqvzynZLvmC4WDqzNaPCYxZkOr4KKcJ1W0czptBoCErYaKwJK4LQtZpZrcoR50dnY34efJAE3/z8H6t2dct++nBL7WzQsWdxI9CwptuwQFhZn63QAO0IYhW3HmiHDFNw4eHhguHyA0I8qgS+CUQDp7ik8SPQGlCiuMalJvEjlfvn4TVI0H2287adgZTEZ7iGTdICY2MBSEi0IJ3Ex8a4iwcbgjLep38VOwpNMX+6KQZlx4LyY8u6blluXrzNfoaXmUR54WaEBPgVTI6e4TpFqXvfHxEPhyS5/urncl1QvhUA3iXXhyTPvzNwAu0Tz5BB3LzpBgQS7sA8fjMNjmHMQpTHGLRt7BYr3H40GBk0XrH7+j7oWxzs6BjsmH4rMhjHVZ996HAnaXZigX5SgrnM4pR0O4DQpPkqDOPjqNvpJ7IBOeH5eeamkc8bVHs2/4TbMIcoqexFrDaVKhMh//ZT6ekEYpvpcvJiaWqqdPHByVzu5Ilc7sSp+CmU3nhvbxzmpu5MTd1xNs5dPZf7NPe9t+XKf3k0Ch8jPxls2dNtGC0WjarA6W0LjM+msyw8ElZYA2N+1cVNxfzCvOIgms0mtCIXkjq0G6mWH8KpSDjs3I81NESc+2GIhNPh94RHDS0tDRvRMq1TtCtEIBO28GTFpzi7C2cJ14zHr06o5u7dnZRqVQIzyNeZgKJ5DPPqajsEIEv3I0gejK7LHo04+rcavCQG6/jpkCyq/s5PgnAoqDyo5WfkkF8Qe1fUXbWKqpCJFcoYG4MhHMbHq7gdxNoy8AxuBycn45MT8QmUSbAnvBmJW1eHhLKQYLXEu5SSsZKags5FtlWFtWtza2tz167lM3mUAvUvwYG1NeeXNbhRsPN5u+D2u/Pe9bMp3WSWKd+de9BehFmapty899GbBAvfRHmHPqtpL/OoCdZG2WuIdGrald1xUDx6U757PxQk9iXOLwU8SsMbz8ThX+V3//AAAHicY2BkYGAA4vPlMlPi+W2+MnAzMYDAU87LR2D0/x//elnSmD4DuRwMYGkAYMsNmnicY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeJxj2M0gyAACqxgGNWAMAOKQ/z8YdYD0AaDAPiA9C4gPAbHO/58Mx4FiQMySBhW3AGInID4LFD8L1OcGZLtAxUDs1UAMVMv05v9/ht1ANsP/H2AztYFiZyFmMBkD9QLlAAK6GvAAAAAAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHcAgYCKAJSAmQCegKMAq4CvgLOAwADFgM2A1YDaAOGA5gDvAPaA+oEHgQ4BGgEiASoBLoE1AT8BRIFLAVMeJxjYGRgYPBkkGNgYQABJiBmZACJOTDogQQADhwA3wB4nK2QP2sCQRDF3/oPkiKBENuwpYp37AkqWEawsQkp7C/nRRe9W1kPRPJl0qVLmS6fIpAyZT5H3q1LSGGRwoNhfvfmze7MArjAKwQOXwv3ngWaePFcwTk+PFcRiVvPNTTFs+c6LsWn5waalSs6Re2Mf3euq2SBDp48V3CNd89VPODLcw0dUXiu40a8eW5Q/8YYBhvsYaGxwBIFJGdO0GbuQTH66JJnWCPGnK6MYalM6Y5JpZ7xDO2qGJvN3urFspCtpC17qtfvytk6nutMWzldxnYdZxs9p/ORzWVrih2HsFhhiIBXl5yStOMcW1ptnKU7Y1fDIDE2DXRicspHvX8NEycWLlvul7qtQu4lMWL8f4SDf0AtYnfw+zaYmLyYGLtIZS9UciSPjkp9EEQqKJ/jFIvP6LOsa+eTnEVxrtBlxXJqt9rkUqkoVEqd4MYfrhmFugAAeJxtUIduwjAUvIO27AJlj45vqbr33lUUklCiAkbGlP49NTiMSH2SJb9353t3RgSzmkxA/Fen+hARRJFDAUWUUEYFVdRQRwNN7OMAhzjCMU409wznuMAlrnCNG9ziDvd4wCOe8IwXvOIN7/jAJyOMco3r3GCMcSaYZIppZrjJLHPMc4sFFllimRVWWWOdDTa5zR3uci859GzpdCxfDBNOVwy96S3vdLwfKfqW9L86aoYFtJ6bnWNdr610n7GlFON5l9Ko890Sv/qeCzG1SCYkm16Fy32h/Lbv2MrXk4WRrBFvCaVET0smpO36YooU5q9dMe5b9kgKaceGQqrAojFh5sk5dzTIBDkMkF8CwSS9Kpt1va6nPEuKUd+dbg96HXqgpGW8rXqZBV0KGQ+akAv/Z8+Nm4T6j0IrNHXTqC6Is0h6XgxLmCV/CZ27wAA=") format("woff")
}

html {
    overscroll-behavior: none
}

.framework7-root,
body,
html {
    height: 100%;
    overflow-x: hidden;
    position: relative;
    width: 100%
}

body {
    background: #fff;
    margin: 0;
    overflow: hidden;
    overflow-y: scroll;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    color: var(--f7-text-color);
    font-family: var(--f7-font-family);
    font-size: var(--f7-font-size);
    line-height: var(--f7-line-height);
    scrollbar-color: #0000;
    scrollbar-width: none
}

body::-webkit-scrollbar {
    appearance: none;
    background: #0000;
    display: none;
    opacity: 0;
    width: 0
}

body::-webkit-scrollbar-track {
    background: #0000;
    box-shadow: none
}

body::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: 9999px;
    outline: none;
    position: relative
}

.dark body,
body.dark {
    background: #000
}

.dark {
    color: var(--f7-text-color)
}

.framework7-root {
    box-sizing: border-box;
    overflow: hidden
}

.framework7-initializing *,
.framework7-initializing :after,
.framework7-initializing :before {
    transition-duration: 0s !important
}

.device-android,
.device-ios {
    cursor: pointer
}

.device-ios {
    touch-action: manipulation
}

@media (width:1024px) and (height:691px) and (orientation:landscape) {

    .framework7-root,
    body,
    html {
        height: 671px
    }
}

@media (width:1024px) and (height:692px) and (orientation:landscape) {

    .framework7-root,
    body,
    html {
        height: 672px
    }
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none
}

a,
input,
select,
textarea {
    outline: 0
}

a {
    color: var(--f7-theme-color);
    text-decoration: none
}

.item-link,
.link,
a {
    cursor: pointer
}

p {
    margin: 1em 0
}

.disabled {
    opacity: .55 !important;
    pointer-events: none !important
}

html.device-full-viewport,
html.device-full-viewport body {
    height: 100vh
}

.ios .if-md,
.ios .if-not-ios,
.ios .md-only,
.ios .not-ios {
    display: none !important
}

@media (width:1024px) and (height:691px) and (orientation:landscape) {

    .ios,
    .ios .framework7-root,
    .ios body {
        height: 671px
    }
}

@media (width:1024px) and (height:692px) and (orientation:landscape) {

    .ios,
    .ios .framework7-root,
    .ios body {
        height: 672px
    }
}

.md .if-ios,
.md .if-not-md,
.md .ios-only,
.md .not-md {
    display: none !important
}

.view,
.views {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 5000
}

.framework7-root>.view,
.framework7-root>.views {
    height: 100%
}

.view-resize-handler {
    cursor: col-resize;
    display: none;
    height: 100%;
    left: var(--f7-page-master-width);
    margin-left: -3px;
    position: absolute;
    top: 0;
    width: 6px;
    z-index: 1000
}

.view-master-detail .view-resize-handler {
    display: block
}

:root {
    --f7-page-master-width: 320px;
    --f7-page-master-border-color: #0000001a;
    --f7-page-master-border-width: 1px;
    --f7-page-swipeback-transition-duration: 300ms;
    --f7-page-parallax-transition-duration: 500ms;
    --f7-page-cover-transition-duration: 450ms;
    --f7-page-dive-transition-duration: 500ms;
    --f7-page-fade-transition-duration: 500ms;
    --f7-page-flip-transition-duration: 700ms;
    --f7-page-push-transition-duration: 500ms;
    --f7-page-title-line-height: 1.2;
    --f7-page-title-text-color: inherit;
    --f7-page-title-padding-left: 16px;
    --f7-page-title-padding-right: 16px
}

.ios {
    --f7-page-transition-duration: 400ms;
    --f7-page-title-font-size: 34px;
    --f7-page-title-font-weight: 700;
    --f7-page-title-letter-spacing: -0.03em;
    --f7-page-title-padding-vertical: 6px;
    --f7-page-bg-color: #efeff4
}

.ios .dark,
.ios.dark {
    --f7-page-bg-color: #000
}

.md {
    --f7-page-transition-duration: 400ms;
    --f7-page-title-font-size: 34px;
    --f7-page-title-font-weight: 500;
    --f7-page-title-letter-spacing: 0;
    --f7-page-title-padding-vertical: 8px
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-page-bg-color: var(--f7-md-surface)
}

.dark {
    --f7-page-master-border-color: #fff3
}

.pages {
    overflow: hidden;
    position: relative
}

.page,
.pages {
    height: 100%;
    width: 100%
}

.page {
    background-color: var(--f7-page-bg-color);
    box-sizing: border-box;
    left: 0;
    position: absolute;
    top: 0;
    transform: none;
    z-index: 1
}

.page-transparent {
    background-color: initial
}

.page-with-navbar-large-collapsed {
    --f7-navbar-large-collapse-progress: 1
}

.page-previous {
    pointer-events: none
}

.page-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 100%;
    padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
    padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
    position: relative;
    z-index: 1
}

.page-previous .page-opacity-effect,
.page-previous:after {
    opacity: 1
}

.page-transitioning,
.page-transitioning .page-opacity-effect,
.page-transitioning .page-shadow-effect {
    transition-duration: var(--f7-page-transition-duration)
}

.page-transitioning-swipeback,
.page-transitioning-swipeback .page-opacity-effect,
.page-transitioning-swipeback .page-shadow-effect {
    transition-duration: var(--f7-page-swipeback-transition-duration)
}

.router-transition-backward .page-current,
.router-transition-backward .page-next,
.router-transition-forward .page-current,
.router-transition-forward .page-next {
    pointer-events: none
}

.page-shadow-effect {
    background: linear-gradient(90deg, #0000 0, #0000 10%, #00000003 50%, #0003);
    right: 100%;
    width: 16px;
    z-index: -1
}

.page-opacity-effect,
.page-shadow-effect {
    bottom: 0;
    content: "";
    opacity: 0;
    position: absolute;
    top: 0
}

.page-opacity-effect {
    background: #0000001a;
    left: 0;
    width: 100%;
    z-index: 10000
}

.ios .page-previous {
    transform: translate3d(-20%, 0, 0)
}

.ios .page-next {
    transform: translate3d(100%, 0, 0)
}

.ios .page-current .page-shadow-effect {
    opacity: 1
}

.ios .router-transition-forward .page-next {
    animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards
}

.ios .router-transition-forward .page-next:before {
    animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
    background: linear-gradient(90deg, #0000 0, #0000 10%, #00000003 50%, #0003);
    bottom: 0;
    content: "";
    opacity: 0;
    position: absolute;
    right: 100%;
    top: 0;
    width: 16px;
    z-index: -1
}

.ios .router-transition-forward .page-current {
    animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards
}

.ios .router-transition-forward .page-current:after {
    animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
    background: #0000001a;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10000
}

.ios .router-transition-backward .page-previous {
    animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards
}

.ios .router-transition-backward .page-previous:after {
    animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
    background: #0000001a;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10000
}

.ios .router-transition-backward .page-current {
    animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards
}

.ios .router-transition-backward .page-current:before {
    animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
    background: linear-gradient(90deg, #0000 0, #0000 10%, #00000003 50%, #0003);
    bottom: 0;
    content: "";
    opacity: 0;
    position: absolute;
    right: 100%;
    top: 0;
    width: 16px;
    z-index: -1
}

@keyframes ios-page-next-to-current {
    0% {
        transform: translate3d(100%, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes ios-page-previous-to-current {
    0% {
        transform: translate3d(-20%, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes ios-page-current-to-previous {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-20%, 0, 0)
    }
}

@keyframes ios-page-current-to-next {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes ios-page-element-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes ios-page-element-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.md .page-previous {
    transform: translate3d(-24px, 0, 0)
}

.md .page-next {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(128px, 0, 0)
}

.md .page-next.page-next-on-right {
    opacity: 1;
    transform: translate3d(100%, 0, 0)
}

.md .router-transition-forward .page-next {
    animation: md-page-next-to-current var(--f7-page-transition-duration) forwards cubic-bezier(0, .8, .3, 1);
    opacity: 1
}

.md .router-transition-forward .page-current {
    animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards cubic-bezier(0, .8, .3, 1)
}

.md .router-transition-backward .page-current {
    animation: md-page-current-to-next calc(var(--f7-page-transition-duration)/2) forwards cubic-bezier(0, 1, .8, 1), md-page-current-to-next-opacity calc(var(--f7-page-transition-duration)/2) forwards
}

.md .router-transition-backward .page-previous {
    animation: md-page-previous-to-current calc(var(--f7-page-transition-duration)/2) forwards cubic-bezier(0, 1, .8, 1)
}

@keyframes md-page-next-to-current {
    0% {
        transform: translate3d(128px, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes md-page-current-to-next {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(128px, 0, 0)
    }
}

@keyframes md-page-current-to-next-opacity {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes md-page-current-to-previous {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(-24px, 0, 0)
    }
}

@keyframes md-page-previous-to-current {
    0% {
        transform: translate3d(-24px, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

.view:not(.view-master-detail) .page-master-stacked {
    display: none
}

.view-master-detail .page-master {
    width: var(--f7-page-master-width);
    --f7-safe-area-right: 0px;
    --f7-safe-area-outer-right: 0px;
    border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color)
}

.view-master-detail .page-master-detail {
    width: calc(100% - var(--f7-page-master-width));
    --f7-safe-area-left: 0px;
    --f7-safe-area-outer-left: 0px;
    left: var(--f7-page-master-width)
}

.view-master-detail .page-master {
    pointer-events: auto;
    transform: none;
    z-index: 2
}

.view-master-detail .page-master:after,
.view-master-detail .page-master:before {
    display: none
}

.view-master-detail.router-transition .page-master {
    animation: none
}

.ios .router-transition-custom .page-next,
.ios .router-transition-custom .page-previous,
.md .router-transition-custom .page-next,
.md .router-transition-custom .page-previous {
    opacity: 1;
    transform: none
}

.ios .router-transition-custom.view-master-detail .page-master,
.md .router-transition-custom.view-master-detail .page-master {
    animation: none
}

.page-title {
    box-sizing: border-box;
    color: var(--f7-page-title-text-color);
    font-size: var(--f7-page-title-font-size);
    font-weight: var(--f7-page-title-font-weight);
    letter-spacing: var(--f7-page-title-letter-spacing);
    line-height: var(--f7-page-title-line-height);
    overflow: hidden;
    padding: var(--f7-page-title-padding-vertical) calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right)) var(--f7-page-title-padding-vertical) calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left));
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 10
}

.router-transition-f7-circle-backward:after,
.router-transition-f7-circle-forward:after {
    background: var(--f7-page-bg-color);
    content: "";
    height: 100vmax;
    left: 50%;
    margin-left: -50vmax;
    margin-top: -50vmax;
    position: absolute;
    top: 50%;
    width: 100vmax;
    z-index: 100
}

.router-transition-f7-circle-backward .page,
.router-transition-f7-circle-forward .page {
    pointer-events: none
}

.router-transition-f7-circle-forward:after {
    animation: f7-circle-circle-in .4s forwards;
    border-radius: 50%;
    transform: scale(0)
}

.ios .router-transition-f7-circle-forward .page-next,
.md .router-transition-f7-circle-forward .page-next {
    animation: f7-circle-next-to-current .3s forwards;
    animation-delay: .3s;
    opacity: 0;
    transform: scale(.9);
    z-index: 150
}

.router-transition-f7-circle-backward:after {
    animation: f7-circle-circle-out .3s forwards;
    animation-delay: .35s
}

.ios .router-transition-f7-circle-backward .page-current,
.md .router-transition-f7-circle-backward .page-current {
    animation: f7-circle-current-to-next .7s forwards;
    z-index: 150
}

@keyframes f7-circle-circle-in {
    0% {
        border-radius: 50%;
        transform: scale(0)
    }

    50% {
        border-radius: 50%
    }

    to {
        border-radius: 0;
        transform: scale(1)
    }
}

@keyframes f7-circle-circle-out {
    0% {
        border-radius: 0;
        transform: scale(1)
    }

    50% {
        border-radius: 50%
    }

    to {
        border-radius: 50%;
        transform: scale(0)
    }
}

@keyframes f7-circle-next-to-current {
    0% {
        opacity: 0;
        transform: scale(.9)
    }

    40% {
        opacity: 1;
        transform: scale(1.035)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes f7-circle-current-to-next {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    34% {
        opacity: 1;
        transform: scale(1.035)
    }

    57% {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 0;
        transform: scale(.9)
    }
}

.router-transition-f7-cover-v-backward,
.router-transition-f7-cover-v-forward {
    background: #000;
    perspective: 1200px
}

.router-transition-f7-cover-v-backward .page,
.router-transition-f7-cover-v-forward .page {
    pointer-events: none
}

.router-transition-f7-cover-v-forward .page-next {
    animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-v-forward .page-current {
    animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-v-backward .page-current {
    animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-v-backward .page-previous {
    animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards
}

@keyframes f7-cover-v-next-to-current {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes f7-cover-v-current-to-next {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

@keyframes f7-cover-v-current-to-prev {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: .5;
        transform: translateZ(-300px)
    }
}

@keyframes f7-cover-v-prev-to-current {
    0% {
        opacity: .5;
        transform: translateZ(-300px)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.router-transition-f7-cover-backward,
.router-transition-f7-cover-forward {
    background: #000;
    perspective: 1200px
}

.router-transition-f7-cover-backward .page,
.router-transition-f7-cover-forward .page {
    pointer-events: none
}

.router-transition-f7-cover-forward .page-next {
    animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-forward .page-current {
    animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-backward .page-current {
    animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards
}

.router-transition-f7-cover-backward .page-previous {
    animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards
}

@keyframes f7-cover-next-to-current {
    0% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes f7-cover-current-to-next {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes f7-cover-current-to-prev {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: .5;
        transform: translateZ(-300px)
    }
}

@keyframes f7-cover-prev-to-current {
    0% {
        opacity: .5;
        transform: translateZ(-300px)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.router-transition-f7-dive-backward,
.router-transition-f7-dive-forward {
    background: var(--f7-page-bg-color);
    perspective: 1200px
}

.router-transition-f7-dive-backward .page,
.router-transition-f7-dive-forward .page {
    pointer-events: none
}

.router-transition-f7-dive-forward .page-next {
    animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards
}

.router-transition-f7-dive-forward .page-current {
    animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards
}

.router-transition-f7-dive-backward .page-current {
    animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards
}

.router-transition-f7-dive-backward .page-previous {
    animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards
}

@keyframes f7-dive-next-to-current {
    0% {
        opacity: 0;
        transform: translateZ(-150px)
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes f7-dive-current-to-next {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 0;
        transform: translateZ(-150px)
    }
}

@keyframes f7-dive-current-to-prev {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 0;
        transform: translateZ(150px)
    }
}

@keyframes f7-dive-prev-to-current {
    0% {
        opacity: 0;
        transform: translateZ(150px)
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.router-transition-f7-fade-backward,
.router-transition-f7-fade-forward {
    background: var(--f7-page-bg-color)
}

.router-transition-f7-fade-backward .page,
.router-transition-f7-fade-forward .page {
    pointer-events: none
}

.ios .router-transition-f7-fade-forward .page-next,
.md .router-transition-f7-fade-forward .page-next {
    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
    opacity: 0
}

.ios .router-transition-f7-fade-backward .page-current,
.ios .router-transition-f7-fade-forward .page-current,
.md .router-transition-f7-fade-backward .page-current,
.md .router-transition-f7-fade-forward .page-current {
    animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards
}

.ios .router-transition-f7-fade-backward .page-previous,
.md .router-transition-f7-fade-backward .page-previous {
    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards
}

@keyframes f7-fade-in {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes f7-fade-out {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.router-transition-f7-flip-backward,
.router-transition-f7-flip-forward {
    background: #000;
    perspective: 1200px
}

.router-transition-f7-flip-backward .page,
.router-transition-f7-flip-forward .page {
    backface-visibility: hidden;
    overflow: hidden;
    pointer-events: none
}

.router-transition-f7-flip-forward .page-next {
    animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
    transform-style: preserve-3d
}

.router-transition-f7-flip-forward .page-current {
    animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
    transform-style: preserve-3d
}

.router-transition-f7-flip-backward .page-current {
    animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
    transform-style: preserve-3d
}

.router-transition-f7-flip-backward .page-previous {
    animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
    transform-style: preserve-3d
}

@keyframes f7-flip-next-to-current {
    0% {
        border-radius: 32px;
        transform: translateZ(-100vmax) rotateY(180deg)
    }

    to {
        border-radius: 0;
        transform: translateZ(0) rotateY(0deg)
    }
}

@keyframes f7-flip-current-to-next {
    0% {
        border-radius: 0;
        transform: translateZ(0) rotateY(0deg)
    }

    to {
        border-radius: 32px;
        transform: translateZ(-100vmax) rotateY(180deg)
    }
}

@keyframes f7-flip-current-to-prev {
    0% {
        border-radius: 0;
        transform: translateZ(0) rotateY(0deg)
    }

    to {
        border-radius: 32px;
        transform: translateZ(-100vmax) rotateY(-180deg)
    }
}

@keyframes f7-flip-prev-to-current {
    0% {
        border-radius: 32px;
        transform: translateZ(-100vmax) rotateY(-180deg)
    }

    to {
        border-radius: 0;
        transform: translateZ(0) rotateY(0deg)
    }
}

.router-transition-f7-parallax-forward .page {
    pointer-events: none
}

.router-transition-f7-parallax-forward .page-next {
    animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards
}

.router-transition-f7-parallax-forward .page-current {
    animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards
}

.router-transition-f7-parallax-backward .page {
    pointer-events: none
}

.router-transition-f7-parallax-backward .page-current {
    animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards
}

.router-transition-f7-parallax-backward .page-previous {
    animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards
}

@keyframes f7-parallax-next-to-current {
    0% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes f7-parallax-current-to-next {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes f7-parallax-current-to-prev {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-20%)
    }
}

@keyframes f7-parallax-prev-to-current {
    0% {
        transform: translateX(-20%)
    }

    to {
        transform: translateX(0)
    }
}

.router-transition-f7-push-forward .page {
    pointer-events: none
}

.router-transition-f7-push-forward .page-next {
    animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards
}

.router-transition-f7-push-forward .page-current {
    animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards
}

.router-transition-f7-push-backward .page {
    pointer-events: none
}

.router-transition-f7-push-backward .page-current {
    animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards
}

.router-transition-f7-push-backward .page-previous {
    animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards
}

@keyframes f7-push-next-to-current {
    0% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes f7-push-current-to-next {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes f7-push-current-to-prev {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-100%)
    }
}

@keyframes f7-push-prev-to-current {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(0)
    }
}

:root {
    --f7-link-highlight-black: #0000001a;
    --f7-link-highlight-white: #ffffff26;
    --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15)
}

.ios {
    --f7-link-pressed-opacity: 0.3
}

.link,
.tab-link {
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25))
}

.link i+i,
.link i+span,
.link span+i,
.link span+span {
    margin-left: 4px
}

.link[class*=color-] {
    color: var(--f7-theme-color)
}

.ios .link {
    transition: opacity .3s
}

.ios .link.active-state {
    opacity: var(--f7-link-pressed-opacity);
    transition-duration: 0s
}

:root {
    --f7-navbar-hide-show-transition-duration: 400ms;
    --f7-navbar-title-line-height: 1.2;
    --f7-navbar-subtitle-text-align: inherit;
    --f7-navbar-large-title-line-height: 1.2;
    --f7-navbar-large-title-text-color: inherit;
    --f7-navbar-large-title-padding-left: 16px;
    --f7-navbar-large-title-padding-right: 16px
}

.ios {
    --f7-navbar-link-color: var(--f7-bars-text-color);
    --f7-navbar-height: 76px;
    --f7-navbar-font-size: 17px;
    --f7-navbar-title-font-size: inherit;
    --f7-navbar-inner-padding-left: 16px;
    --f7-navbar-inner-padding-right: 16px;
    --f7-navbar-title-font-weight: 600;
    --f7-navbar-title-margin-left: 0;
    --f7-navbar-title-margin-right: 0;
    --f7-navbar-title-text-align: center;
    --f7-navbar-subtitle-font-size: 10px;
    --f7-navbar-subtitle-line-height: 1;
    --f7-navbar-large-title-height: 52px;
    --f7-navbar-large-title-font-size: 34px;
    --f7-navbar-large-title-font-weight: 700;
    --f7-navbar-large-title-letter-spacing: -0.03em;
    --f7-navbar-large-title-padding-vertical: 6px;
    --f7-navbar-subtitle-text-color: #0000008c
}

.ios .dark,
.ios.dark {
    --f7-navbar-subtitle-text-color: #ffffff8c
}

.md {
    --f7-navbar-height: 64px;
    --f7-navbar-font-size: 16px;
    --f7-navbar-title-font-size: 22px;
    --f7-navbar-inner-padding-left: 0px;
    --f7-navbar-inner-padding-right: 0px;
    --f7-navbar-title-font-weight: 400;
    --f7-navbar-title-margin-left: 0px;
    --f7-navbar-title-margin-right: 16px;
    --f7-navbar-title-text-align: left;
    --f7-navbar-subtitle-font-size: 14px;
    --f7-navbar-subtitle-line-height: 1.2;
    --f7-navbar-large-title-font-size: 28px;
    --f7-navbar-large-title-height: 88px;
    --f7-navbar-large-title-font-weight: 400;
    --f7-navbar-large-title-letter-spacing: 0;
    --f7-navbar-large-title-padding-vertical: 8px;
    --f7-navbar-link-height: 48px;
    --f7-navbar-link-line-height: 48px
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-navbar-link-color: var(--f7-md-on-surface);
    --f7-navbar-text-color: var(--f7-md-on-surface);
    --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant)
}

.navbar,
.navbars {
    left: 0;
    top: 0;
    width: 100%;
    z-index: 500
}

.navbars {
    position: absolute
}

.navbars .navbar {
    z-index: auto
}

.navbars .navbar-transitioning {
    z-index: 500
}

.navbar {
    --f7-navbar-large-collapse-progress: 0;
    backface-visibility: hidden;
    box-sizing: border-box;
    color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
    font-size: var(--f7-navbar-font-size);
    height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
    margin: 0;
    position: relative
}

.navbar b {
    font-weight: 500
}

.navbar a {
    color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)))
}

.navbar a.link {
    display: flex;
    justify-content: flex-start
}

.navbar .left,
.navbar .right,
.navbar .title {
    position: relative;
    z-index: 10
}

.navbar .title {
    display: inline-block;
    flex-shrink: 10;
    font-size: var(--f7-navbar-title-font-size);
    font-weight: var(--f7-navbar-title-font-weight);
    line-height: var(--f7-navbar-title-line-height);
    margin-left: var(--f7-navbar-title-margin-left);
    margin-right: var(--f7-navbar-title-margin-left);
    overflow: hidden;
    position: relative;
    text-align: var(--f7-navbar-title-text-align);
    text-overflow: ellipsis;
    white-space: nowrap
}

.navbar .subtitle {
    color: var(--f7-navbar-subtitle-text-color);
    display: block;
    font-size: var(--f7-navbar-subtitle-font-size);
    font-weight: 400;
    line-height: var(--f7-navbar-subtitle-line-height);
    text-align: var(--f7-navbar-subtitle-text-align)
}

.navbar .left,
.navbar .right {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: center
}

.navbar .right:first-child {
    height: 100%;
    position: absolute
}

.navbar .no-outline .navbar-bg:after,
.navbar .no-outline .title-large:after,
.navbar.no-outline .navbar-bg:after,
.navbar.no-outline .title-large:after {
    display: none !important
}

.navbar-hidden .navbar .navbar-bg:before,
.navbar.navbar-hidden .navbar-bg:before {
    opacity: 0 !important
}

.navbar-bg {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition-property: transform;
    width: 100%;
    z-index: 0
}

.navbar-transitioning,
.navbar-transitioning .left,
.navbar-transitioning .navbar-bg,
.navbar-transitioning .navbar-bg:before,
.navbar-transitioning .right,
.navbar-transitioning .subnavbar,
.navbar-transitioning .title,
.navbar-transitioning .title-large-text {
    transition-duration: var(--f7-navbar-hide-show-transition-duration)
}

.navbar-hidden {
    transform: translate3d(0, calc(var(--f7-navbar-height)*-1), 0)
}

.navbar-hidden .navbar-inner {
    pointer-events: none
}

.navbar-hidden .navbar-inner>.left,
.navbar-hidden .navbar-inner>.right,
.navbar-hidden .navbar-inner>.title {
    opacity: 0 !important
}

.navbar-hidden .subnavbar {
    pointer-events: auto
}

.navbar-hidden-statusbar {
    transform: translate3d(0, calc(var(--f7-navbar-height)*-1 - var(--f7-safe-area-top)), 0)
}

.navbar-large-hidden .navbar-large {
    --f7-navbar-large-collapse-progress: 1
}

.navbar-inner {
    align-items: center;
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    left: 0;
    padding: var(--f7-safe-area-top) calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
    transform: translateZ(0);
    width: 100%;
    z-index: 10
}

.navbar-inner,
.page>.navbar,
.view>.navbar,
.views>.navbar {
    position: absolute
}

.ios .navbar:not(.navbar-large) .navbar-bg {
    --f7-navbar-large-collapse-progress: 1
}

.navbar-large .title {
    opacity: var(--f7-navbar-large-collapse-progress)
}

.navbar-large-collapsed {
    --f7-navbar-large-collapse-progress: 1
}

.navbar-large-collapsed .title-large {
    pointer-events: none
}

.navbar-large-collapsed .title-large-text {
    opacity: 0
}

.navbar .title-large {
    box-sizing: border-box;
    display: flex;
    height: var(--f7-navbar-large-title-height);
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 5
}

.navbar .title-large-text {
    box-sizing: border-box;
    color: var(--f7-navbar-large-title-text-color);
    font-size: var(--f7-navbar-large-title-font-size);
    font-weight: var(--f7-navbar-large-title-font-weight);
    letter-spacing: var(--f7-navbar-large-title-letter-spacing);
    line-height: var(--f7-navbar-large-title-line-height);
    overflow: hidden;
    padding: var(--f7-navbar-large-title-padding-vertical) calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right)) var(--f7-navbar-large-title-padding-vertical) calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
    text-overflow: ellipsis;
    transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)), 0);
    transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
    white-space: nowrap;
    width: 100%
}

.navbar-no-title-large-transition .title-large-text {
    transition-duration: 0s
}

.navbar~* {
    --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top))
}

.navbar~* .page-with-navbar-large,
.navbar~.page-with-navbar-large,
.page-with-navbar-large .navbar~* {
    --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top))
}

.page.no-navbar,
.page.no-navbar .navbar~* {
    --f7-page-navbar-offset: var(--f7-safe-area-top)
}

.ios {
    --f7-navbarLeftTextOffset: calc(16px + var(--f7-navbar-inner-padding-left));
    --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left)
}

.ios .navbar .title-large {
    align-items: flex-end
}

.ios .navbar a.link {
    height: 100%;
    padding: 0 12px
}

.ios .navbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    justify-content: center;
    margin: 0;
    width: 44px
}

.ios .navbar .left a+a,
.ios .navbar .right a+a {
    margin-left: 16px
}

.ios .navbar b {
    font-weight: 600
}

.ios .navbar .left {
    margin-right: 10px
}

.ios .navbar .right {
    margin-left: 10px
}

.ios .navbar .right:first-child {
    right: calc(8px + var(--f7-safe-area-right))
}

.ios .navbar-bg {
    height: 100%
}

.ios .navbar-bg:before {
    backdrop-filter: blur(2px);
    content: "";
    inset: 0;
    mask-image: linear-gradient(to bottom, #000 calc(50% + var(--f7-safe-area-top, 0px)), #0000 100%);
    position: absolute
}

.ios .navbar-bg:after {
    background-image: linear-gradient(to bottom, var(--f7-navbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-top, 0), #0000 100%);
    content: "";
    inset: 0;
    position: absolute
}

.ios .navbar-inner {
    justify-content: space-between;
    padding-bottom: 16px;
    padding-top: calc(16px + var(--f7-safe-area-top))
}

.ios .navbar .left,
.ios .navbar .navbar-pane,
.ios .navbar .right {
    backdrop-filter: saturate(180%) blur(16px);
    background-color: var(--f7-glass-bg-color);
    border-radius: 64px;
    box-shadow: var(--f7-glass-shadow);
    height: 100%;
    min-width: 44px
}

.ios .navbar-pane {
    align-items: center;
    display: flex;
    justify-content: center
}

.ios .navbar-inner-left-title {
    justify-content: flex-start
}

.ios .navbar-inner-left-title .right {
    margin-left: auto
}

.ios .navbar-inner-left-title .title {
    margin-right: 10px;
    text-align: left
}

.ios .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
    opacity: 0
}

.view-master-detail .page-master {
    z-index: 525
}

.md .navbar .title-large {
    align-items: center;
    overflow: hidden
}

.md .navbar .left {
    margin-left: 4px;
    margin-right: 4px
}

.md .navbar a.link {
    height: var(--f7-navbar-link-height, var(--f7-navbar-height));
    min-width: 48px;
    padding: 0 12px
}

.md .navbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    flex-shrink: 0;
    min-width: 0;
    width: 48px
}

.md .navbar .right {
    margin-left: auto;
    margin-right: 4px
}

.md .navbar .right:first-child {
    right: var(--f7-safe-area-right)
}

.md .navbar-pane {
    display: contents
}

.md .navbar-bg {
    background: var(--f7-navbar-bg-color);
    background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color))
}

.md .navbar-bg:after,
.md .navbar-bg:before {
    backface-visibility: hidden
}

.md .navbar-bg:after {
    background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15;
    z-index: 1
}

.md .navbar-inner {
    justify-content: flex-start;
    overflow: hidden
}

.md .navbar-large:not(.navbar-large-collapsed) .navbar-inner,
.md .page.page-with-subnavbar .navbar-inner {
    overflow: visible
}

.md .navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
    margin-left: 16px
}

.md .navbar-inner-centered-title {
    justify-content: space-between
}

.md .navbar-inner-centered-title .right {
    margin-left: 0
}

.md .navbar-inner-centered-title .title {
    text-align: center
}

.md .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
.md .navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
    opacity: 0
}

.md .navbar-large .navbar-bg {
    height: calc(100% + var(--f7-navbar-large-title-height));
    transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)), 0)
}

.md .navbar-large-transparent .navbar-bg,
.md .navbar-large.navbar-transparent .navbar-bg {
    opacity: var(--f7-navbar-large-collapse-progress)
}

:root {
    --f7-tabbar-link-active-bg-color: #0000;
    --f7-tabbar-label-text-transform: none;
    --f7-toolbar-hide-show-transition-duration: 400ms
}

.ios {
    --f7-toolbar-height: 64px;
    --f7-toolbar-font-size: 17px;
    --f7-toolbar-inner-padding-left: 16px;
    --f7-toolbar-inner-padding-right: 16px;
    --f7-toolbar-link-font-weight: 400;
    --f7-toolbar-link-color: var(--f7-bars-text-color);
    --f7-tabbar-link-inactive-color: var(--f7-bars-text-color);
    --f7-tabbar-icons-height: 80px;
    --f7-tabbar-icons-tablet-height: 80px;
    --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-highlight-bg-color: #0000001a;
    --f7-tabbar-link-highlight-active-bg-color: #0000000d
}

.ios .dark,
.ios.dark {
    --f7-tabbar-link-highlight-bg-color: #ffffff26;
    --f7-tabbar-link-highlight-active-bg-color: #ffffff1a
}

.md {
    --f7-toolbar-height: 56px;
    --f7-toolbar-font-size: 14px;
    --f7-toolbar-inner-padding-left: 0px;
    --f7-toolbar-inner-padding-right: 0px;
    --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 {
    backface-visibility: hidden;
    box-sizing: border-box;
    color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
    flex-shrink: 0;
    font-size: var(--f7-toolbar-font-size);
    height: var(--f7-toolbar-height);
    left: 0;
    margin: 0;
    position: relative;
    transform: translateZ(0);
    width: 100%;
    z-index: 600
}

.toolbar b {
    font-weight: 600
}

.toolbar a {
    box-sizing: border-box;
    color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
    flex-shrink: 1;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.toolbar .link {
    display: flex;
    font-weight: var(--f7-toolbar-link-font-weight)
}

.toolbar i.icon {
    display: block
}

.toolbar:after,
.toolbar:before {
    backface-visibility: hidden
}

.page>.toolbar,
.view>.toolbar,
.views>.toolbar {
    position: absolute
}

.ios .toolbar-top-ios,
.md .toolbar-top-md,
.toolbar-top {
    top: 0
}

.ios .toolbar-bottom-ios,
.md .toolbar-bottom-md,
.toolbar-bottom {
    bottom: 0;
    height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))
}

.ios .toolbar-bottom-ios .toolbar-inner,
.md .toolbar-bottom-md .toolbar-inner,
.toolbar-bottom .toolbar-inner {
    bottom: var(--f7-safe-area-bottom);
    height: auto;
    top: 0
}

.toolbar-inner {
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    left: 0;
    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));
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.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 .link,
.tabbar .tab-link,
.tabbar-icons .link,
.tabbar-icons .tab-link {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-weight: var(--f7-tabbar-link-font-weight);
    height: 100%;
    justify-content: center;
    letter-spacing: var(--f7-tabbar-link-letter-spacing);
    overflow: hidden;
    text-transform: var(--f7-tabbar-link-text-transform);
    width: 100%
}

.tabbar .tab-link-active,
.tabbar-icons .tab-link-active {
    background-color: var(--f7-tabbar-link-active-bg-color, #0000);
    color: var(--f7-tabbar-link-active-color, var(--f7-theme-color))
}

.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)
}

.tabbar-icons {
    --f7-toolbar-height: var(--f7-tabbar-icons-height)
}

.tabbar-icons .link,
.tabbar-icons .tab-link {
    align-items: center;
    height: 100%;
    justify-content: center
}

.tabbar-icons .tabbar-label {
    display: block;
    font-size: var(--f7-tabbar-label-font-size);
    font-weight: var(--f7-tabbar-label-font-weight);
    letter-spacing: var(--f7-tabbar-label-letter-spacing);
    line-height: 1;
    margin: 0;
    position: relative;
    text-overflow: ellipsis;
    text-transform: var(--f7-tabbar-label-text-transform);
    white-space: nowrap
}

@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-color: #0000;
    scrollbar-width: none
}

.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
    appearance: none;
    background: #0000;
    display: none;
    opacity: 0;
    width: 0
}

.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-track {
    background: #0000;
    box-shadow: none
}

.tabbar-scrollable .toolbar-inner::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: 9999px;
    outline: none;
    position: relative
}

.tabbar-scrollable .link,
.tabbar-scrollable .tab-link {
    flex-shrink: 0;
    width: auto
}

.navbar-transitioning+.toolbar,
.navbar-transitioning~* .toolbar,
.toolbar-transitioning {
    transition-duration: var(--f7-toolbar-hide-show-transition-duration)
}

.ios .toolbar-bottom-ios~*,
.md .toolbar-bottom-md~*,
.toolbar-bottom~* {
    --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height)
}

.ios .toolbar-bottom-ios.tabbar-icons~*,
.md .toolbar-bottom-md.tabbar-icons~*,
.toolbar-bottom.tabbar-icons~* {
    --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height)
}

.ios .toolbar-bottom-ios.toolbar-hidden,
.md .toolbar-bottom-md.toolbar-hidden,
.toolbar-bottom.toolbar-hidden {
    transform: translate3d(0, 100%, 0)
}

.ios .toolbar-top-ios~*,
.md .toolbar-top-md~*,
.sheet-modal-bottom>.toolbar:not(.toolbar-bottom)~*,
.toolbar-top~* {
    --f7-page-toolbar-top-offset: var(--f7-toolbar-height)
}

.ios .toolbar-top-ios.tabbar-icons~*,
.md .toolbar-top-md.tabbar-icons~*,
.sheet-modal-bottom>.toolbar:not(.toolbar-bottom).tabbar-icons~*,
.toolbar-top.tabbar-icons~* {
    --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height)
}

.ios .toolbar-top-ios.toolbar-hidden,
.md .toolbar-top-md.toolbar-hidden,
.toolbar-top.toolbar-hidden {
    transform: translate3d(0, -100%, 0)
}

.ios .navbars~* .toolbar-top-ios,
.ios .navbars~.page:not(.no-navbar) .toolbar-top-ios,
.ios .navbars~.toolbar-top-ios,
.ios .navbar~* .toolbar-top-ios,
.ios .navbar~.page:not(.no-navbar) .toolbar-top-ios,
.ios .navbar~.toolbar-top-ios,
.md .navbar~* .toolbar-top-md,
.md .navbar~.page:not(.no-navbar) .toolbar-top-md,
.md .navbar~.toolbar-top-md,
.navbars~* .toolbar-top,
.navbars~.page:not(.no-navbar) .toolbar-top,
.navbars~.toolbar-top,
.navbar~* .toolbar-top,
.navbar~.page:not(.no-navbar) .toolbar-top,
.navbar~.toolbar-top {
    top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top))
}

.ios .navbars~* .toolbar-top-ios.toolbar-hidden,
.ios .navbars~.page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
.ios .navbars~.toolbar-top-ios.toolbar-hidden,
.ios .navbar~* .toolbar-top-ios.toolbar-hidden,
.ios .navbar~.page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
.ios .navbar~.toolbar-top-ios.toolbar-hidden,
.md .navbar~* .toolbar-top-md.toolbar-hidden,
.md .navbar~.page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
.md .navbar~.toolbar-top-md.toolbar-hidden,
.navbars~* .toolbar-top.toolbar-hidden,
.navbars~.page:not(.no-navbar) .toolbar-top.toolbar-hidden,
.navbars~.toolbar-top.toolbar-hidden,
.navbar~* .toolbar-top.toolbar-hidden,
.navbar~.page:not(.no-navbar) .toolbar-top.toolbar-hidden,
.navbar~.toolbar-top.toolbar-hidden {
    transform: translate3d(0, calc((var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))*-1), 0)
}

.ios .navbars~* .toolbar-top-ios.toolbar-hidden.tabbar-icons,
.ios .navbars~.page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
.ios .navbars~.toolbar-top-ios.toolbar-hidden.tabbar-icons,
.ios .navbar~* .toolbar-top-ios.toolbar-hidden.tabbar-icons,
.ios .navbar~.page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
.ios .navbar~.toolbar-top-ios.toolbar-hidden.tabbar-icons,
.md .navbar~* .toolbar-top-md.toolbar-hidden.tabbar-icons,
.md .navbar~.page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-icons,
.md .navbar~.toolbar-top-md.toolbar-hidden.tabbar-icons,
.navbars~* .toolbar-top.toolbar-hidden.tabbar-icons,
.navbars~.page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
.navbars~.toolbar-top.toolbar-hidden.tabbar-icons,
.navbar~* .toolbar-top.toolbar-hidden.tabbar-icons,
.navbar~.page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
.navbar~.toolbar-top.toolbar-hidden.tabbar-icons {
    transform: translate3d(0, calc((var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))*-1), 0)
}

.ios .navbar-hidden+.toolbar-top-ios:not(.toolbar-hidden),
.ios .navbar-hidden~* .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-hidden+.toolbar-top-md:not(.toolbar-hidden),
.md .navbar-hidden~* .toolbar-top-md:not(.toolbar-hidden),
.navbar-hidden+.toolbar-top:not(.toolbar-hidden),
.navbar-hidden~* .toolbar-top:not(.toolbar-hidden) {
    transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0)
}

.ios .navbar-large-hidden+.toolbar-top-ios:not(.toolbar-hidden),
.ios .navbar-large-hidden~* .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-large-hidden+.toolbar-top-md:not(.toolbar-hidden),
.md .navbar-large-hidden~* .toolbar-top-md:not(.toolbar-hidden),
.navbar-large-hidden+.toolbar-top:not(.toolbar-hidden),
.navbar-large-hidden~* .toolbar-top:not(.toolbar-hidden) {
    transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0)
}

.ios .toolbar-pane {
    -webkit-user-select: none;
    user-select: none
}

.ios .toolbar .left,
.ios .toolbar .right,
.ios .toolbar-pane {
    align-items: center;
    backdrop-filter: saturate(180%) blur(16px);
    background-color: var(--f7-glass-bg-color);
    border-radius: 32px;
    box-shadow: var(--f7-glass-shadow);
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    z-index: 1
}

.ios .toolbar .left {
    margin-right: auto
}

.ios .toolbar .right {
    margin-left: auto
}

.ios .toolbar .left:empty,
.ios .toolbar .right:empty {
    display: none
}

.ios .toolbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 48px;
    min-width: 48px;
    padding: 0
}

.ios .toolbar .link {
    height: 100%;
    padding: 0 12px
}

.ios .toolbar:after,
.ios .toolbar:before {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute
}

.ios .toolbar:before {
    backdrop-filter: blur(2px);
    mask-image: linear-gradient(to top, #000 calc(50% + var(--f7-safe-area-bottom, 0px)), #0000 100%)
}

.ios .toolbar:after {
    background-image: linear-gradient(to top, var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-bottom, 0), #0000 100%)
}

.ios .toolbar.messagebar:after,
.ios .toolbar.messagebar:before,
.ios .toolbar.toolbar-bottom:after,
.ios .toolbar.toolbar-bottom:before {
    top: -16px
}

.ios .toolbar.messagebar .toolbar-inner,
.ios .toolbar.toolbar-bottom .toolbar-inner {
    padding-bottom: 16px
}

.ios .toolbar.toolbar-top:before,
.ios .toolbar:not(.toolbar-bottom, .toolbar-top, .messagebar):before {
    mask-image: linear-gradient(to bottom, #000 calc(50% + var(--f7-safe-area-top, 0px)), #0000 100%)
}

.ios .toolbar.toolbar-top:after,
.ios .toolbar:not(.toolbar-bottom, .toolbar-top, .messagebar):after {
    background-image: linear-gradient(to bottom, var(--f7-toolbar-bg-color, var(--f7-bars-bg-color)) var(--f7-safe-area-top, 0), #0000 100%)
}

.ios .toolbar.toolbar-top:after,
.ios .toolbar.toolbar-top:before,
.ios .toolbar:not(.toolbar-bottom, .toolbar-top, .messagebar):after,
.ios .toolbar:not(.toolbar-bottom, .toolbar-top, .messagebar):before {
    bottom: -16px
}

.ios .toolbar.toolbar-top .toolbar-inner,
.ios .toolbar:not(.toolbar-bottom, .toolbar-top, .messagebar) .toolbar-inner {
    padding-top: 16px
}

.ios .navbar~.toolbar-top:after,
.ios .navbar~.toolbar-top:before {
    display: none
}

.ios .toolbar-inner {
    gap: 16px;
    justify-content: center;
    overflow: visible
}

.ios .tabbar-scrollable .toolbar-pane {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-color: #0000;
    scrollbar-width: none
}

.ios .tabbar-scrollable .toolbar-pane::-webkit-scrollbar {
    appearance: none;
    background: #0000;
    display: none;
    opacity: 0;
    width: 0
}

.ios .tabbar-scrollable .toolbar-pane::-webkit-scrollbar-track {
    background: #0000;
    box-shadow: none
}

.ios .tabbar-scrollable .toolbar-pane::-webkit-scrollbar-thumb {
    background-color: initial;
    border-radius: 9999px;
    outline: none;
    position: relative
}

.ios .tabbar:not(.tabbar-scrollable) {
    touch-action: none
}

.ios .tabbar-icons .link,
.ios .tabbar-icons .tab-link {
    padding-bottom: 4px;
    padding-top: 4px
}

.ios .tabbar-icons .link i+span,
.ios .tabbar-icons .tab-link i+span {
    margin: 4px 0 0
}

@media (max-width:767px) {
    .ios .tabbar .toolbar-pane {
        width: 100%
    }
}

@media (min-width:768px) {
    .ios .tabbar .tab-link {
        min-width: 96px;
        padding-left: 16px;
        padding-right: 16px
    }
}

.ios .tabbar-scrollable .toolbar-inner {
    justify-content: flex-start
}

.ios .tabbar-scrollable .link,
.ios .tabbar-scrollable .tab-link {
    padding: 0 8px
}

.ios .tab-link-highlight {
    border-radius: inherit;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition-duration: .3s
}

.ios .tab-link-highlight:after,
.ios .tab-link-highlight:before {
    border-radius: inherit;
    content: "";
    inset: 4px;
    position: absolute;
    transition-duration: .3s
}

.ios .tab-link-highlight:before {
    background-color: var(--f7-tabbar-link-highlight-bg-color)
}

.ios .tab-link-highlight:after {
    background-color: var(--f7-tabbar-link-highlight-active-bg-color);
    box-shadow: var(--f7-glass-shadow-thumb);
    opacity: 0
}

.ios .tab-link-highlight-pressed:before {
    opacity: 0
}

.ios .tab-link-highlight-pressed:after {
    opacity: 1
}

.ios .tab-link-highlight-pressed:after,
.ios .tab-link-highlight-pressed:before {
    scale: 1.4
}

.md .toolbar-pane {
    display: contents
}

.md .toolbar {
    background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color))
}

.md .toolbar .link {
    height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
    justify-content: center;
    line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
    min-height: 48px;
    min-width: 48px;
    padding: 0 12px
}

.md .toolbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    flex-shrink: 0;
    min-width: 48px;
    padding: 0
}

.md .md .toolbar-top-md.no-outline:after,
.md .md .toolbar-top-md.toolbar-hidden:before,
.md .toolbar-top.no-outline:after,
.md .toolbar-top.toolbar-hidden:before {
    display: none !important
}

.md .md .toolbar-top-md:after,
.md .md .toolbar-top-md:before,
.md .toolbar-top:after,
.md .toolbar-top:before {
    backface-visibility: hidden
}

.md .md .toolbar-top-md:after,
.md .toolbar-top:after {
    background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.md .md .toolbar-bottom-md.no-outline:before,
.md .md .toolbar-bottom-md.toolbar-hidden:after,
.md .toolbar-bottom.no-outline:before,
.md .toolbar-bottom.toolbar-hidden:after {
    display: none !important
}

.md .md .toolbar-bottom-md:before,
.md .toolbar-bottom:before {
    background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
    bottom: auto;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 0;
    width: 100%;
    z-index: 15
}

.md .toolbar-inner {
    justify-content: space-between;
    overflow: hidden
}

.md .tabbar .link,
.md .tabbar .tab-link,
.md .tabbar-icons .link,
.md .tabbar-icons .tab-link {
    padding-left: 0;
    padding-right: 0
}

.md .tabbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)),
.md .tabbar-icons a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    flex-shrink: 1
}

.md .tabbar .tab-link,
.md .tabbar-icons .tab-link {
    overflow: hidden;
    position: relative;
    transition-duration: .3s
}

.md .tabbar i.icon,
.md .tabbar-icons i.icon {
    position: relative
}

.md .tabbar i.icon:before,
.md .tabbar-icons i.icon:before {
    background: var(--f7-tabbar-link-active-icon-bg-color);
    border-radius: 32px;
    content: "";
    height: 32px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scaleX(.5);
    transition-duration: .2s;
    width: 64px;
    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 .link,
.md .tabbar-icons .tab-link {
    padding-bottom: 8px;
    padding-top: 8px
}

.md .tabbar-label {
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden
}

.md .tabbar-scrollable .toolbar-inner {
    overflow: auto
}

.md .tabbar-scrollable .link,
.md .tabbar-scrollable .tab-link {
    padding: 0 12px
}

.md .toolbar-top .tab-link-highlight,
.md .toolbar-top-md .tab-link-highlight {
    bottom: 0
}

.md .toolbar-bottom .tab-link-highlight,
.md .toolbar-bottom-md .tab-link-highlight {
    top: 0
}

.md .tabbar-icons.tabbar-icons .tab-link-highlight,
.md .tabbar.tabbar-icons .tab-link-highlight {
    display: none
}

.md .tabbar-icons:not(.tabbar-icons) .tab-link-highlight,
.md .tabbar:not(.tabbar-icons) .tab-link-highlight {
    background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
    height: 2px;
    left: 0;
    position: absolute;
    transition-duration: .3s
}

:root {
    --f7-subnavbar-title-line-height: 1.2
}

.ios {
    --f7-subnavbar-height: 44px;
    --f7-subnavbar-offset-left: calc(16px + var(--f7-safe-area-left));
    --f7-subnavbar-offset-right: calc(16px + var(--f7-safe-area-right));
    --f7-subnavbar-inner-padding-left: 5px;
    --f7-subnavbar-inner-padding-right: 5px;
    --f7-subnavbar-title-font-size: 24px;
    --f7-subnavbar-title-font-weight: 700;
    --f7-subnavbar-title-letter-spacing: -0.03em;
    --f7-subnavbar-title-margin-left: 8px;
    --f7-subnavbar-bg-color: var(--f7-glass-bg-color)
}

.md {
    --f7-subnavbar-height: 64px;
    --f7-subnavbar-offset-left: 0;
    --f7-subnavbar-offset-right: 0;
    --f7-subnavbar-inner-padding-left: calc(16px + var(--f7-safe-area-left));
    --f7-subnavbar-inner-padding-right: calc(16px + var(--f7-safe-area-right));
    --f7-subnavbar-title-font-size: 22px;
    --f7-subnavbar-title-font-weight: 400;
    --f7-subnavbar-title-letter-spacing: 0;
    --f7-subnavbar-title-margin-left: 0px
}

.subnavbar {
    align-items: center;
    background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
    box-sizing: border-box;
    color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
    display: flex;
    justify-content: space-between;
    left: var(--f7-subnavbar-offset-left);
    position: absolute;
    right: var(--f7-subnavbar-offset-right);
    top: 0;
    z-index: 600
}

.subnavbar .subnavbar-title {
    display: inline-block;
    font-size: var(--f7-subnavbar-title-font-size);
    font-weight: var(--f7-subnavbar-title-font-weight);
    letter-spacing: var(--f7-subnavbar-title-letter-spacing);
    line-height: var(--f7-subnavbar-title-line-height);
    margin-left: var(--f7-subnavbar-title-margin-left);
    overflow: hidden;
    position: relative;
    text-align: left;
    text-overflow: ellpsis;
    white-space: nowrap
}

.subnavbar .left,
.subnavbar .right {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start
}

.subnavbar .right:first-child {
    height: 100%;
    position: absolute
}

.subnavbar a {
    color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)))
}

.subnavbar a.link {
    height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
    line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height))
}

.subnavbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    min-width: var(--f7-subnavbar-height)
}

.subnavbar.navbar-hidden:before,
.subnavbar.no-outline:after {
    display: none !important
}

.subnavbar:after,
.subnavbar:before {
    backface-visibility: hidden
}

.subnavbar:after {
    background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.subnavbar-inner {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: space-between;
    overflow: hidden;
    padding: 0 var(--f7-subnavbar-inner-padding-left) 0 var(--f7-subnavbar-inner-padding-right);
    width: 100%
}

.navbar .subnavbar {
    top: 100%
}

.page>.subnavbar,
.view>.subnavbar,
.views>.subnavbar {
    position: absolute
}

.navbars~* .subnavbar,
.navbars~.page-with-subnavbar:not(.no-navbar) .subnavbar,
.navbars~.subnavbar,
.navbar~* .subnavbar,
.navbar~.page-with-subnavbar:not(.no-navbar) .subnavbar,
.navbar~.subnavbar,
.page-with-subnavbar .navbar~* .subnavbar,
.page-with-subnavbar .navbar~.subnavbar {
    top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top))
}

.navbar .title-large~.subnavbar,
.navbars~.page-with-navbar-large:not(.no-navbar) .subnavbar,
.navbar~.page-with-navbar-large:not(.no-navbar) .subnavbar,
.page-with-subnavbar.page-with-navbar-large .navbar~* .subnavbar,
.page-with-subnavbar.page-with-navbar-large .navbar~.subnavbar {
    top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
    transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)), 0)
}

.page-with-subnavbar,
.subnavbar~* {
    --f7-page-subnavbar-offset: var(--f7-subnavbar-height)
}

.ios .subnavbar {
    backdrop-filter: saturate(180%) blur(16px);
    border-radius: var(--f7-subnavbar-height);
    box-shadow: var(--f7-glass-shadow);
    height: calc(var(--f7-subnavbar-height) + 1px);
    margin-top: -1px;
    padding-top: 1px;
    --f7-segmented-strong-bg-color: #0000
}

.ios .subnavbar:has(>.searchbar) {
    backdrop-filter: none;
    background: #0000;
    box-shadow: none
}

.ios .subnavbar .subnavbar-inner {
    border-radius: inherit
}

.ios .subnavbar .title {
    align-self: flex-start;
    flex-shrink: 10
}

.ios .subnavbar .left a+a,
.ios .subnavbar .right a+a {
    margin-left: 16px
}

.ios .subnavbar .left {
    margin-right: 10px
}

.ios .subnavbar .right {
    margin-left: 10px
}

.ios .subnavbar .right:first-child {
    right: 8px
}

.ios .subnavbar a.link {
    justify-content: flex-start
}

.ios .subnavbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    justify-content: center;
    margin: 0
}

.md .subnavbar {
    height: var(--f7-subnavbar-height)
}

.md .subnavbar .right {
    margin-left: auto
}

.md .subnavbar .right:first-child {
    right: 16px
}

.md .subnavbar a.link {
    justify-content: center;
    padding: 0 12px
}

.md .subnavbar a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    flex-shrink: 0;
    padding: 0 12px
}

.md .subnavbar-inner>a.link:first-child {
    margin-left: calc(var(--f7-subnavbar-inner-padding-left)*-1)
}

.md .subnavbar-inner>a.link:last-child {
    margin-right: calc(var(--f7-subnavbar-inner-padding-right)*-1)
}

:root {
    --f7-block-padding-horizontal: 16px;
    --f7-block-padding-vertical: 16px;
    --f7-block-font-size: inherit;
    --f7-block-header-margin: 10px;
    --f7-block-footer-margin: 10px;
    --f7-block-header-font-size: 14px;
    --f7-block-footer-font-size: 14px;
    --f7-block-title-text-transform: none;
    --f7-block-title-white-space: nowrap;
    --f7-block-title-medium-text-transform: none;
    --f7-block-title-large-text-transform: none;
    --f7-block-inset-side-margin: 16px
}

:root .dark,
:root.dark {
    --f7-block-outline-border-color: #ffffff26
}

.ios {
    --f7-block-text-color: inherit;
    --f7-block-margin-vertical: 35px;
    --f7-block-outline-border-color: #00000038;
    --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: 20px;
    --f7-block-title-medium-font-weight: bold;
    --f7-block-title-medium-line-height: 1.4;
    --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: 24px;
    --f7-block-title-text-color: #0009;
    --f7-block-strong-text-color: #000;
    --f7-block-header-text-color: #00000073;
    --f7-block-footer-text-color: #00000073;
    --f7-block-strong-bg-color: #fff;
    --f7-block-title-medium-text-color: #000;
    --f7-block-title-large-text-color: #000
}

.ios .dark,
.ios.dark {
    --f7-block-title-text-color: #fff9;
    --f7-block-header-text-color: #ffffff8c;
    --f7-block-footer-text-color: #ffffff8c;
    --f7-block-strong-text-color: #fff;
    --f7-block-strong-bg-color: #1c1c1d;
    --f7-block-title-medium-text-color: #fff;
    --f7-block-title-large-text-color: #fff
}

.md {
    --f7-block-margin-vertical: 32px;
    --f7-block-title-font-size: inherit;
    --f7-block-title-font-weight: 500;
    --f7-block-title-line-height: 16px;
    --f7-block-title-margin-bottom: 16px;
    --f7-block-title-medium-font-size: 16px;
    --f7-block-title-medium-font-weight: 500;
    --f7-block-title-medium-line-height: 1.3;
    --f7-block-title-large-font-size: 22px;
    --f7-block-title-large-font-weight: 500;
    --f7-block-title-large-line-height: 1.2;
    --f7-block-inset-border-radius: 16px
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-block-text-color: var(--f7-md-on-surface);
    --f7-block-strong-text-color: var(--f7-md-on-surface);
    --f7-block-outline-border-color: var(--f7-md-outline);
    --f7-block-title-text-color: var(--f7-theme-color);
    --f7-block-title-medium-text-color: var(--f7-theme-color);
    --f7-block-title-large-text-color: var(--f7-theme-color);
    --f7-block-strong-bg-color: var(--f7-md-surface-1);
    --f7-block-header-text-color: var(--f7-md-on-surface-variant);
    --f7-block-footer-text-color: var(--f7-md-on-surface-variant)
}

.block {
    box-sizing: border-box;
    color: var(--f7-block-text-color);
    font-size: var(--f7-block-font-size);
    margin: var(--f7-block-margin-vertical) 0;
    padding-bottom: 0;
    padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
    padding-top: 0;
    position: relative;
    z-index: 1
}

.block>h1:first-child,
.block>h2:first-child,
.block>h3:first-child,
.block>h4:first-child,
.block>p:first-child {
    margin-top: 0
}

.block>h1:last-child,
.block>h2:last-child,
.block>h3:last-child,
.block>h4:last-child,
.block>p:last-child {
    margin-bottom: 0
}

.block-strong,
.ios .block-strong-ios,
.md .block-strong-md {
    background-color: var(--f7-block-strong-bg-color);
    color: var(--f7-block-strong-text-color);
    padding-bottom: var(--f7-block-padding-vertical);
    padding-top: var(--f7-block-padding-vertical)
}

.block-outline:not(.inset):before,
.ios .block-outline-ios:not(.inset):not(.inset-ios):before,
.md .block-outline-md:not(.inset):not(.inset-md):before {
    background-color: var(--f7-block-outline-border-color);
    bottom: auto;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 0;
    width: 100%;
    z-index: 15
}

.block-outline:not(.inset):after,
.ios .block-outline-ios:not(.inset):not(.inset-ios):after,
.md .block-outline-md:not(.inset):not(.inset-md):after {
    background-color: var(--f7-block-outline-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.block-outline.inset,
.ios .block-outline-ios.inset,
.ios .block-outline-ios.inset-ios,
.md .block-outline-md.inset,
.md .block-outline-md.inset-md {
    border: 1px solid var(--f7-block-outline-border-color)
}

.block-title {
    color: var(--f7-block-title-text-color);
    font-size: var(--f7-block-title-font-size, inherit);
    font-weight: var(--f7-block-title-font-weight);
    line-height: var(--f7-block-title-line-height);
    margin: 0;
    margin: var(--f7-block-margin-vertical) calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right)) var(--f7-block-title-margin-bottom) calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    text-transform: var(--f7-block-title-text-transform);
    white-space: var(--f7-block-title-white-space)
}

.block-title+.block,
.block-title+.block-header,
.block-title+.card,
.block-title+.list,
.block-title+.timeline {
    margin-top: 0
}

.block-title-medium {
    color: var(--f7-block-title-medium-text-color);
    font-size: var(--f7-block-title-medium-font-size);
    font-weight: var(--f7-block-title-medium-font-weight);
    line-height: var(--f7-block-title-medium-line-height);
    text-transform: var(--f7-block-title-medium-text-transform)
}

.block-title-large {
    color: var(--f7-block-title-large-text-color);
    font-size: var(--f7-block-title-large-font-size);
    font-weight: var(--f7-block-title-large-font-weight);
    line-height: var(--f7-block-title-large-line-height);
    text-transform: var(--f7-block-title-large-text-transform)
}

.block>.block-title:first-child,
.list>.block-title:first-child {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0
}

.block-header {
    color: var(--f7-block-header-text-color);
    font-size: var(--f7-block-header-font-size);
    margin-bottom: var(--f7-block-header-margin);
    margin-top: var(--f7-block-margin-vertical)
}

.block-header+.block,
.block-header+.card,
.block-header+.list,
.block-header+.timeline {
    margin-top: var(--f7-block-header-margin)
}

.block-footer {
    color: var(--f7-block-footer-text-color);
    font-size: var(--f7-block-footer-font-size);
    margin-bottom: var(--f7-block-margin-vertical);
    margin-top: var(--f7-block-footer-margin)
}

.block-footer,
.block-header {
    padding-bottom: 0;
    padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
    padding-top: 0
}

.block-footer h1:first-child,
.block-footer h2:first-child,
.block-footer h3:first-child,
.block-footer h4:first-child,
.block-footer p:first-child,
.block-footer ul:first-child,
.block-header h1:first-child,
.block-header h2:first-child,
.block-header h3:first-child,
.block-header h4:first-child,
.block-header p:first-child,
.block-header ul:first-child {
    margin-top: 0
}

.block-footer h1:last-child,
.block-footer h2:last-child,
.block-footer h3:last-child,
.block-footer h4:last-child,
.block-footer p:last-child,
.block-footer ul:last-child,
.block-header h1:last-child,
.block-header h2:last-child,
.block-header h3:last-child,
.block-header h4:last-child,
.block-header p:last-child,
.block-header ul:last-child {
    margin-bottom: 0
}

.block-footer h1:first-child:last-child,
.block-footer h2:first-child:last-child,
.block-footer h3:first-child:last-child,
.block-footer h4:first-child:last-child,
.block-footer p:first-child:last-child,
.block-footer ul:first-child:last-child,
.block-header h1:first-child:last-child,
.block-header h2:first-child:last-child,
.block-header h3:first-child:last-child,
.block-header h4:first-child:last-child,
.block-header p:first-child:last-child,
.block-header ul:first-child:last-child {
    margin-bottom: 0;
    margin-top: 0
}

.block .block-header,
.card .block-header,
.list .block-header,
.timeline .block-header {
    margin-top: 0
}

.block .block-footer,
.card .block-footer,
.list .block-footer,
.timeline .block-footer {
    margin-bottom: 0
}

.block+.block-footer,
.card+.block-footer,
.list+.block-footer,
.timeline+.block-footer {
    margin-top: calc((var(--f7-block-margin-vertical) - var(--f7-block-footer-margin))*-1)
}

.block+.block-footer {
    margin-bottom: var(--f7-block-margin-vertical)
}

.block .block-footer,
.block .block-header {
    padding: 0
}

.block.inset,
.ios .block.inset-ios,
.md .block.inset-md {
    border-radius: var(--f7-block-inset-border-radius);
    margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
    margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px
}

.block-strong.inset:after,
.block-strong.inset:before,
.ios .block-strong-ios.inset-ios:after,
.ios .block-strong-ios.inset-ios:before,
.ios .block-strong-ios.inset:after,
.ios .block-strong-ios.inset:before,
.ios .block-strong.inset-ios:after,
.ios .block-strong.inset-ios:before,
.md .block-strong-md.inset-md:after,
.md .block-strong-md.inset-md:before,
.md .block-strong-md.inset:after,
.md .block-strong-md.inset:before,
.md .block-strong.inset-md:after,
.md .block-strong.inset-md:before {
    display: none !important
}

@media (min-width:480px) {

    .block.xsmall-inset,
    .ios .block.xsmall-inset-ios,
    .md .block.xsmall-inset-md {
        border-radius: var(--f7-block-inset-border-radius);
        margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .block.xsmall-inset:after,
    .block.xsmall-inset:before,
    .ios .block.xsmall-inset-ios:after,
    .ios .block.xsmall-inset-ios:before,
    .md .block.xsmall-inset-md:after,
    .md .block.xsmall-inset-md:before {
        display: none !important
    }

    .block.xsmall-inset.block-outline,
    .ios .block.xsmall-inset-ios.block-outline,
    .ios .block.xsmall-inset-ios.block-outline-ios,
    .md .block.xsmall-inset-md.block-outline,
    .md .block.xsmall-inset-md.block-outline-md {
        border: 1px solid var(--f7-block-outline-border-color)
    }
}

@media (min-width:568px) {

    .block.small-inset,
    .ios .block.small-inset-ios,
    .md .block.small-inset-md {
        border-radius: var(--f7-block-inset-border-radius);
        margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .block.small-inset:after,
    .block.small-inset:before,
    .ios .block.small-inset-ios:after,
    .ios .block.small-inset-ios:before,
    .md .block.small-inset-md:after,
    .md .block.small-inset-md:before {
        display: none !important
    }

    .block.small-inset.block-outline,
    .ios .block.small-inset-ios.block-outline,
    .ios .block.small-inset-ios.block-outline-ios,
    .md .block.small-inset-md.block-outline,
    .md .block.small-inset-md.block-outline-md {
        border: 1px solid var(--f7-block-outline-border-color)
    }
}

@media (min-width:768px) {

    .block.medium-inset,
    .ios .block.medium-inset-ios,
    .md .block.medium-inset-md {
        border-radius: var(--f7-block-inset-border-radius);
        margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .block.medium-inset:after,
    .block.medium-inset:before,
    .ios .block.medium-inset-ios:after,
    .ios .block.medium-inset-ios:before,
    .md .block.medium-inset-md:after,
    .md .block.medium-inset-md:before {
        display: none !important
    }

    .block.medium-inset.block-outline,
    .ios .block.medium-inset-ios.block-outline,
    .ios .block.medium-inset-ios.block-outline-ios,
    .md .block.medium-inset-md.block-outline,
    .md .block.medium-inset-md.block-outline-md {
        border: 1px solid var(--f7-block-outline-border-color)
    }
}

@media (min-width:1024px) {

    .block.large-inset,
    .ios .block.large-inset-ios,
    .md .block.large-inset-md {
        border-radius: var(--f7-block-inset-border-radius);
        margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .block.large-inset:after,
    .block.large-inset:before,
    .ios .block.large-inset-ios:after,
    .ios .block.large-inset-ios:before,
    .md .block.large-inset-md:after,
    .md .block.large-inset-md:before {
        display: none !important
    }

    .block.large-inset.block-outline,
    .ios .block.large-inset-ios.block-outline,
    .ios .block.large-inset-ios.block-outline-ios,
    .md .block.large-inset-md.block-outline,
    .md .block.large-inset-md.block-outline-md {
        border: 1px solid var(--f7-block-outline-border-color)
    }
}

@media (min-width:1200px) {

    .block.xlarge-inset,
    .ios .block.xlarge-inset-ios,
    .md .block.xlarge-inset-md {
        border-radius: var(--f7-block-inset-border-radius);
        margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .block.xlarge-inset:after,
    .block.xlarge-inset:before,
    .ios .block.xlarge-inset-ios:after,
    .ios .block.xlarge-inset-ios:before,
    .md .block.xlarge-inset-md:after,
    .md .block.xlarge-inset-md:before {
        display: none !important
    }

    .block.xlarge-inset.block-outline,
    .ios .block.xlarge-inset-ios.block-outline,
    .ios .block.xlarge-inset-ios.block-outline-ios,
    .md .block.xlarge-inset-md.block-outline,
    .md .block.xlarge-inset-md.block-outline-md {
        border: 1px solid var(--f7-block-outline-border-color)
    }
}

:root {
    --f7-list-inset-side-margin: 16px;
    --f7-list-item-padding-horizontal: 16px;
    --f7-list-media-item-padding-horizontal: 16px;
    --f7-list-item-text-max-lines: 2;
    --f7-list-chevron-icon-font-size: 20px;
    --f7-list-item-media-margin: 16px;
    --f7-list-item-title-font-size: inherit;
    --f7-list-item-title-font-weight: 400;
    --f7-list-item-title-line-height: inherit;
    --f7-list-item-title-white-space: nowrap;
    --f7-list-item-subtitle-font-weight: 400;
    --f7-list-item-subtitle-line-height: inherit;
    --f7-list-item-text-font-weight: 400;
    --f7-list-item-after-font-weight: 400;
    --f7-list-item-after-line-height: inherit;
    --f7-list-item-header-font-size: 12px;
    --f7-list-item-header-font-weight: 400;
    --f7-list-item-header-line-height: 1.2;
    --f7-list-item-footer-font-size: 12px;
    --f7-list-item-footer-font-weight: 400;
    --f7-list-item-footer-line-height: 1.2;
    --f7-list-button-font-size: inherit;
    --f7-list-button-font-weight: 400;
    --f7-list-button-text-align: center;
    --f7-list-group-title-line-height: inherit;
    --f7-menu-list-font-size: 14px;
    --f7-menu-list-item-title-font-size: 14px;
    --f7-menu-list-item-title-font-weight: 500;
    --f7-menu-list-item-subtitle-font-size: 14px;
    --f7-menu-list-item-text-font-size: 14px;
    --f7-menu-list-item-after-font-size: 14px;
    --f7-list-outline-border-color: #00000038;
    --f7-list-chevron-icon-color: #0003
}

:root .dark,
:root.dark {
    --f7-list-button-border-color: #ffffff26;
    --f7-list-outline-border-color: #ffffff26;
    --f7-list-group-title-border-color: #ffffff26;
    --f7-list-chevron-icon-color: #ffffff4d
}

.ios {
    --f7-list-item-padding-vertical: 12px;
    --f7-list-in-list-padding-left: 30px;
    --f7-list-inset-border-radius: 24px;
    --f7-list-margin-vertical: 35px;
    --f7-list-font-size: 17px;
    --f7-list-chevron-icon-area: 20px;
    --f7-list-item-title-text-color: inherit;
    --f7-list-item-subtitle-text-color: inherit;
    --f7-list-link-pressed-bg-color: #00000026;
    --f7-list-item-subtitle-font-size: 15px;
    --f7-list-item-text-font-size: 15px;
    --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: 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-button-border-color: #00000038;
    --f7-list-group-title-border-color: #00000038;
    --f7-list-group-title-height: 31px;
    --f7-list-group-title-font-size: inherit;
    --f7-list-group-title-font-weight: 400;
    --f7-menu-list-offset: 8px;
    --f7-menu-list-border-radius: 16px;
    --f7-menu-list-item-bg-color: #0000;
    --f7-menu-list-item-text-color: inherit;
    --f7-menu-list-item-min-height: 44px;
    --f7-list-item-border-color: #00000038;
    --f7-list-outline-inset-border-color: #00000038;
    --f7-list-strong-bg-color: #fff;
    --f7-list-item-after-text-color: #00000073;
    --f7-list-item-header-text-color: inherit;
    --f7-list-item-footer-text-color: #00000073;
    --f7-list-item-text-text-color: #00000073;
    --f7-list-group-title-text-color: #00000073;
    --f7-list-group-title-bg-color: #f7f7f7;
    --f7-menu-list-item-selected-text-color: var(--f7-theme-color);
    --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15)
}

.ios .dark,
.ios.dark {
    --f7-list-item-border-color: #ffffff26;
    --f7-list-outline-inset-border-color: #ffffff26;
    --f7-list-strong-bg-color: #1c1c1d;
    --f7-list-item-after-text-color: #ffffff8c;
    --f7-list-item-header-text-color: #ffffff8c;
    --f7-list-item-footer-text-color: #ffffff8c;
    --f7-list-item-text-text-color: #ffffff8c;
    --f7-list-group-title-text-color: #ffffff8c;
    --f7-list-group-title-bg-color: #232323;
    --f7-list-link-pressed-bg-color: #ffffff14;
    --f7-menu-list-item-selected-text-color: inherit;
    --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;
    --f7-list-font-size: 16px;
    --f7-list-chevron-icon-area: 26px;
    --f7-list-item-subtitle-font-size: 14px;
    --f7-list-item-text-font-size: 14px;
    --f7-list-item-text-line-height: 20px;
    --f7-list-item-after-font-size: 14px;
    --f7-list-item-after-padding: 8px;
    --f7-list-item-min-height: 48px;
    --f7-list-item-media-icons-margin: 8px;
    --f7-list-media-item-padding-vertical: 12px;
    --f7-list-media-item-title-font-weight: 500;
    --f7-list-button-border-color: #0000;
    --f7-list-group-title-border-color: #0000;
    --f7-list-group-title-height: 48px;
    --f7-list-group-title-font-size: 16px;
    --f7-list-group-title-font-weight: 400;
    --f7-menu-list-offset: 16px;
    --f7-menu-list-border-radius: 999px;
    --f7-menu-list-item-min-height: 56px;
    --f7-list-link-pressed-bg-color: #0000
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-list-outline-inset-border-color: var(--f7-md-outline);
    --f7-list-item-border-color: var(--f7-md-outline);
    --f7-list-item-title-text-color: var(--f7-md-on-surface);
    --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
    --f7-list-group-title-bg-color: var(--f7-md-surface-2);
    --f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
    --f7-list-strong-bg-color: var(--f7-md-surface-1);
    --f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
    --f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
    --f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
    --f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
    --f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
    --f7-menu-list-item-bg-color: var(--f7-md-surface-1);
    --f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
    --f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container)
}

:root {
    --f7-list-chevron-icon-left: "chevron_left";
    --f7-list-chevron-icon-right: "chevron_right"
}

.list {
    font-size: var(--f7-list-font-size);
    margin: var(--f7-list-margin-vertical) 0;
    position: relative;
    z-index: 1
}

.ios .list-strong-ios ul,
.list-strong ul,
.md .list-strong-md ul {
    background: var(--f7-list-strong-bg-color)
}

.ios .list-outline-ios ul:before,
.list-outline ul:before,
.md .list-outline-md ul:before {
    background-color: var(--f7-list-outline-border-color);
    bottom: auto;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 0;
    width: 100%;
    z-index: 15
}

.ios .list-outline-ios ul:after,
.list-outline ul:after,
.md .list-outline-md ul:after {
    background-color: var(--f7-list-outline-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.ios .list-outline-ios.inset,
.ios .list-outline-ios.inset-ios,
.list-outline.inset,
.md .list-outline-md.inset,
.md .list-outline-md.inset-md {
    border: 1px solid var(--f7-list-outline-inset-border-color)
}

.list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}

.list ul ul {
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left))
}

.list ul ul:after,
.list ul ul:before {
    display: none !important
}

.list .item-media,
.list li {
    box-sizing: border-box;
    position: relative
}

.list .item-media {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    padding-bottom: var(--f7-list-item-padding-vertical);
    padding-top: var(--f7-list-item-padding-vertical)
}

.list .item-media+.item-inner {
    margin-left: var(--f7-list-item-media-margin)
}

.list .item-media i+i,
.list .item-media i+img {
    margin-left: var(--f7-list-item-media-icons-margin)
}

.list .item-after {
    padding-left: var(--f7-list-item-after-padding)
}

.list .item-inner {
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    min-height: calc(var(--f7-list-item-min-height));
    min-width: 0;
    padding-bottom: var(--f7-list-item-padding-vertical);
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    padding-top: var(--f7-list-item-padding-vertical);
    position: relative;
    width: 100%
}

.list .item-title {
    color: var(--f7-list-item-title-text-color);
    flex-shrink: 1;
    font-size: var(--f7-list-item-title-font-size);
    font-weight: var(--f7-list-item-title-font-weight);
    line-height: var(--f7-list-item-title-line-height);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: var(--f7-list-item-title-white-space)
}

.list .item-after {
    color: var(--f7-list-item-after-text-color);
    display: flex;
    flex-shrink: 0;
    font-size: var(--f7-list-item-after-font-size);
    font-weight: var(--f7-list-item-after-font-weight);
    line-height: var(--f7-list-item-after-line-height);
    margin-left: auto;
    white-space: nowrap
}

.list .item-footer,
.list .item-header {
    white-space: normal
}

.list .item-header {
    color: var(--f7-list-item-header-text-color);
    font-size: var(--f7-list-item-header-font-size);
    font-weight: var(--f7-list-item-header-font-weight);
    line-height: var(--f7-list-item-header-line-height)
}

.list .item-footer {
    color: var(--f7-list-item-footer-text-color);
    font-size: var(--f7-list-item-footer-font-size);
    font-weight: var(--f7-list-item-footer-font-weight);
    line-height: var(--f7-list-item-footer-line-height)
}

.list .item-link,
.list .list-button,
.list label.item-content {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition-duration: .3s;
    transition-property: background-color, color;
    z-index: 0
}

.list .item-link,
.list .list-button {
    display: block
}

.list .item-link,
.list label.item-content {
    color: inherit
}

.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 {
    padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))
}

.list .item-content {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    min-height: calc(var(--f7-list-item-min-height));
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left))
}

.list .item-subtitle {
    color: var(--f7-list-item-subtitle-text-color);
    font-size: var(--f7-list-item-subtitle-font-size);
    font-weight: var(--f7-list-item-subtitle-font-weight);
    line-height: var(--f7-list-item-subtitle-line-height);
    max-width: 100%;
    white-space: nowrap
}

.list .item-subtitle,
.list .item-text {
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis
}

.list .item-text {
    -webkit-line-clamp: var(--f7-list-item-text-max-lines);
    -webkit-box-orient: vertical;
    color: var(--f7-list-item-text-text-color);
    display: -webkit-box;
    font-size: var(--f7-list-item-text-font-size);
    font-weight: var(--f7-list-item-text-font-weight);
    line-height: var(--f7-list-item-text-line-height);
    max-height: calc(var(--f7-list-item-text-line-height)*var(--f7-list-item-text-max-lines))
}

.list .item-title-row {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative
}

.list .item-title-row .item-after {
    align-self: center
}

.list li:last-child .list-button:after,
.list li:last-child li:last-child>.item-content>.item-inner:after,
.list li:last-child li:last-child>.item-inner:after,
.list li:last-child li:last-child>.item-link>.item-content>.item-inner:after,
.list li:last-child li:last-child>.swipeout-content>.item-content>.item-inner:after,
.list li:last-child>.item-content>.item-inner:after,
.list li:last-child>.item-inner:after,
.list li:last-child>.item-link>.item-content>.item-inner:after,
.list li:last-child>.swipeout-content>.item-content>.item-inner:after {
    display: none !important
}

.list li li:last-child .item-inner:after,
.list li:last-child li .item-inner:after {
    background-color: var(--f7-list-item-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.list-button {
    --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
    color: var(--f7-list-button-text-color, var(--f7-theme-color));
    font-size: var(--f7-list-button-font-size);
    font-weight: var(--f7-list-button-font-weight);
    line-height: var(--f7-list-item-min-height);
    padding: 0 var(--f7-list-item-padding-horizontal);
    text-align: var(--f7-list-button-text-align)
}

.ios .list-button.active-state {
    background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), .15))
}

.md .list-button.active-state {
    background-color: var(--f7-list-button-pressed-bg-color, #0000)
}

.ios .list-dividers-ios .list-button:after,
.list-dividers .list-button:after,
.md .list-dividers-md .list-button:after {
    background-color: var(--f7-list-button-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.list-button[class*=color-] {
    --f7-list-button-text-color: var(--f7-theme-color)
}

.simple-list li {
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: var(--f7-list-item-min-height);
    justify-content: space-between;
    line-height: var(--f7-list-item-min-height);
    max-width: 100%;
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.simple-list li:after {
    left: var(--f7-list-item-padding-horizontal);
    left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    right: 0;
    width: auto
}

.simple-list li:last-child:after {
    display: none !important
}

.links-list li {
    z-index: 1
}

.links-list a {
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    color: inherit;
    display: block;
    display: flex;
    height: var(--f7-list-item-min-height);
    justify-content: space-between;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    transition-duration: .3s;
    transition-property: background-color;
    white-space: nowrap
}

.links-list a .ripple-wave {
    z-index: 0
}

.links-list a:after {
    width: auto
}

.links-list a.active-state {
    background-color: var(--f7-list-link-pressed-bg-color)
}

.links-list a {
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))
}

.links-list a:after {
    left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    right: 0
}

.links-list li:last-child a:after {
    display: none !important
}

.ios .list-dividers-ios .item-inner:after,
.ios .list-dividers-ios.links-list a:after,
.ios .list-dividers-ios.simple-list li:after,
.list-dividers .item-inner:after,
.list-dividers.links-list a:after,
.list-dividers.simple-list li:after,
.md .list-dividers-md .item-inner:after,
.md .list-dividers-md.links-list a:after,
.md .list-dividers-md.simple-list li:after {
    background-color: var(--f7-list-item-border-color);
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content,
.md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item>.item-link,
.md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
.md .media-list:not(.inset):not(.inset-md):not(.menu-list) li>.item-link {
    border-radius: 16px;
    margin-left: calc(var(--f7-list-item-padding-horizontal)/2);
    margin-right: calc(var(--f7-list-item-padding-horizontal)/2)
}

.md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item>.item-link>.item-content,
.md .media-list:not(.inset):not(.inset-md):not(.menu-list) li>.item-link>.item-content {
    margin-left: 0;
    margin-right: 0
}

.md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content,
.md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content {
    padding-left: calc(var(--f7-list-item-padding-horizontal)/2 + var(--f7-safe-area-left))
}

.media-list,
li.media-item {
    --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
    --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal)
}

.media-list .item-title,
li.media-item .item-title {
    font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit))
}

.media-list .item-inner,
li.media-item .item-inner {
    align-self: stretch;
    display: block
}

.media-list .item-media img,
li.media-item .item-media img {
    display: block
}

.media-list .item-link .item-inner,
li.media-item .item-link .item-inner {
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))
}

.media-list .item-link .item-title-row,
li.media-item .item-link .item-title-row {
    padding-right: calc(var(--f7-list-chevron-icon-area))
}

.media-list .chevron-center .item-link .item-inner,
.media-list .item-link.chevron-center .item-inner,
.media-list.chevron-center .item-link .item-inner,
li.media-item .chevron-center .item-link .item-inner,
li.media-item .item-link.chevron-center .item-inner,
li.media-item.chevron-center .item-link .item-inner {
    padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right))
}

.media-list .chevron-center .item-title-row,
.media-list.chevron-center .item-title-row,
li.media-item .chevron-center .item-title-row,
li.media-item.chevron-center .item-title-row {
    padding-right: 0
}

.links-list a:before,
.list .item-link .item-inner:before,
.media-list .chevron-center .item-link .item-inner:before,
.media-list .item-link .item-title-row:before,
.media-list .item-link.chevron-center .item-inner:before,
.media-list.chevron-center .item-link .item-inner:before,
li.media-item .chevron-center .item-link .item-inner:before,
li.media-item .item-link .item-title-row:before,
li.media-item .item-link.chevron-center .item-inner:before,
li.media-item.chevron-center .item-link .item-inner:before {
    font-family: framework7-core-icons;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    color: var(--f7-list-chevron-icon-color);
    content: var(--f7-list-chevron-icon-right);
    display: block;
    font-feature-settings: "liga";
    font-size: 20px;
    font-size: var(--f7-list-chevron-icon-font-size);
    height: 100%;
    height: 14px;
    line-height: 14px;
    margin-top: -7px;
    pointer-events: none;
    position: absolute;
    right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    text-align: center;
    top: 50%;
    width: 100%;
    width: 8px
}

.media-list .chevron-center .item-title-row:before,
.media-list .item-link .item-inner:before,
.media-list.chevron-center .item-title-row:before,
li.media-item .chevron-center .item-title-row:before,
li.media-item .item-link .item-inner:before,
li.media-item.chevron-center .item-title-row:before {
    display: none
}

.media-list .item-link .item-title-row:before,
li.media-item .item-link .item-title-row:before {
    right: 0
}

.list-group ul:after,
.list-group ul:before {
    z-index: 25 !important
}

.list-group+.list-group ul:before {
    display: none !important
}

.list-group-title,
li.list-group-title {
    align-content: center;
    align-items: center;
    background-color: var(--f7-list-group-title-bg-color);
    box-sizing: border-box;
    color: var(--f7-list-group-title-text-color);
    display: flex;
    font-size: var(--f7-list-group-title-font-size);
    font-weight: var(--f7-list-group-title-font-weight);
    height: var(--f7-list-group-title-height);
    line-height: var(--f7-list-group-title-line-height);
    margin-top: -1px;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 0;
    padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
    padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
    padding-top: 0;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 15
}

.list-group-title:before,
li.list-group-title:before {
    background-color: var(--f7-list-group-title-border-color);
    bottom: auto;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: 0;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 0;
    width: 100%;
    z-index: 15
}

.list-group-title:after,
li.list-group-title:after {
    display: none !important
}

.list-group>.list-group-title,
.list-group>ul>.list-group-title {
    margin-top: 0;
    position: sticky;
    top: 0;
    z-index: 20
}

.page-with-navbar-large .list-group>.list-group-title,
.page-with-navbar-large .list-group>ul>.list-group-title {
    top: calc(var(--f7-navbar-large-title-height)*-1)
}

.ios .list.inset-ios,
.list.inset,
.md .list.inset-md {
    border-radius: var(--f7-list-inset-border-radius);
    margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
    margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
    --f7-safe-area-left: 0px;
    --f7-safe-area-right: 0px
}

.ios .list.inset-ios .block-title,
.list.inset .block-title,
.md .list.inset-md .block-title {
    margin-left: 0;
    margin-right: 0
}

.ios .list.inset-ios ul,
.list.inset ul,
.md .list.inset-md ul {
    border-radius: var(--f7-list-inset-border-radius)
}

.ios .list.inset-ios ul:after,
.ios .list.inset-ios ul:before,
.list.inset ul:after,
.list.inset ul:before,
.md .list.inset-md ul:after,
.md .list.inset-md ul:before {
    display: none !important
}

.ios .list.inset-ios li.swipeout:first-child,
.ios .list.inset-ios li:first-child>a,
.list.inset li.swipeout:first-child,
.list.inset li:first-child>a,
.md .list.inset-md li.swipeout:first-child,
.md .list.inset-md li:first-child>a {
    border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
}

.ios .list.inset-ios li.swipeout:last-child,
.ios .list.inset-ios li:last-child>a,
.list.inset li.swipeout:last-child,
.list.inset li:last-child>a,
.md .list.inset-md li.swipeout:last-child,
.md .list.inset-md li:last-child>a {
    border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
}

.ios .list.inset-ios li.swipeout:first-child:last-child,
.ios .list.inset-ios li:first-child:last-child>a,
.list.inset li.swipeout:first-child:last-child,
.list.inset li:first-child:last-child>a,
.md .list.inset-md li.swipeout:first-child:last-child,
.md .list.inset-md li:first-child:last-child>a {
    border-radius: var(--f7-list-inset-border-radius)
}

@media (min-width:480px) {

    .ios .list.xsmall-inset-ios,
    .list.xsmall-inset,
    .md .list.xsmall-inset-md {
        border-radius: var(--f7-list-inset-border-radius);
        margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .ios .list.xsmall-inset-ios .block-title,
    .list.xsmall-inset .block-title,
    .md .list.xsmall-inset-md .block-title {
        margin-left: 0;
        margin-right: 0
    }

    .ios .list.xsmall-inset-ios ul,
    .list.xsmall-inset ul,
    .md .list.xsmall-inset-md ul {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.xsmall-inset-ios ul:after,
    .ios .list.xsmall-inset-ios ul:before,
    .list.xsmall-inset ul:after,
    .list.xsmall-inset ul:before,
    .md .list.xsmall-inset-md ul:after,
    .md .list.xsmall-inset-md ul:before {
        display: none !important
    }

    .ios .list.xsmall-inset-ios li:first-child>a,
    .list.xsmall-inset li:first-child>a,
    .md .list.xsmall-inset-md li:first-child>a {
        border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
    }

    .ios .list.xsmall-inset-ios li:last-child>a,
    .list.xsmall-inset li:last-child>a,
    .md .list.xsmall-inset-md li:last-child>a {
        border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
    }

    .ios .list.xsmall-inset-ios li:first-child:last-child>a,
    .list.xsmall-inset li:first-child:last-child>a,
    .md .list.xsmall-inset-md li:first-child:last-child>a {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.xsmall-inset-ios.list-outline ul,
    .ios .list.xsmall-inset-ios.list-outline-ios ul,
    .list.xsmall-inset.list-outline ul,
    .md .list.xsmall-inset-md.list-outline ul,
    .md .list.xsmall-inset-md.list-outline-md ul {
        border: 1px solid var(--f7-list-outline-inset-border-color)
    }
}

@media (min-width:568px) {

    .ios .list.small-inset-ios,
    .list.small-inset,
    .md .list.small-inset-md {
        border-radius: var(--f7-list-inset-border-radius);
        margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .ios .list.small-inset-ios .block-title,
    .list.small-inset .block-title,
    .md .list.small-inset-md .block-title {
        margin-left: 0;
        margin-right: 0
    }

    .ios .list.small-inset-ios ul,
    .list.small-inset ul,
    .md .list.small-inset-md ul {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.small-inset-ios ul:after,
    .ios .list.small-inset-ios ul:before,
    .list.small-inset ul:after,
    .list.small-inset ul:before,
    .md .list.small-inset-md ul:after,
    .md .list.small-inset-md ul:before {
        display: none !important
    }

    .ios .list.small-inset-ios li:first-child>a,
    .list.small-inset li:first-child>a,
    .md .list.small-inset-md li:first-child>a {
        border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
    }

    .ios .list.small-inset-ios li:last-child>a,
    .list.small-inset li:last-child>a,
    .md .list.small-inset-md li:last-child>a {
        border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
    }

    .ios .list.small-inset-ios li:first-child:last-child>a,
    .list.small-inset li:first-child:last-child>a,
    .md .list.small-inset-md li:first-child:last-child>a {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.small-inset-ios.list-outline ul,
    .ios .list.small-inset-ios.list-outline-ios ul,
    .list.small-inset.list-outline ul,
    .md .list.small-inset-md.list-outline ul,
    .md .list.small-inset-md.list-outline-md ul {
        border: 1px solid var(--f7-list-outline-inset-border-color)
    }
}

@media (min-width:768px) {

    .ios .list.medium-inset-ios,
    .list.medium-inset,
    .md .list.medium-inset-md {
        border-radius: var(--f7-list-inset-border-radius);
        margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .ios .list.medium-inset-ios .block-title,
    .list.medium-inset .block-title,
    .md .list.medium-inset-md .block-title {
        margin-left: 0;
        margin-right: 0
    }

    .ios .list.medium-inset-ios ul,
    .list.medium-inset ul,
    .md .list.medium-inset-md ul {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.medium-inset-ios ul:after,
    .ios .list.medium-inset-ios ul:before,
    .list.medium-inset ul:after,
    .list.medium-inset ul:before,
    .md .list.medium-inset-md ul:after,
    .md .list.medium-inset-md ul:before {
        display: none !important
    }

    .ios .list.medium-inset-ios li:first-child>a,
    .list.medium-inset li:first-child>a,
    .md .list.medium-inset-md li:first-child>a {
        border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
    }

    .ios .list.medium-inset-ios li:last-child>a,
    .list.medium-inset li:last-child>a,
    .md .list.medium-inset-md li:last-child>a {
        border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
    }

    .ios .list.medium-inset-ios li:first-child:last-child>a,
    .list.medium-inset li:first-child:last-child>a,
    .md .list.medium-inset-md li:first-child:last-child>a {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.medium-inset-ios.list-outline ul,
    .ios .list.medium-inset-ios.list-outline-ios ul,
    .list.medium-inset.list-outline ul,
    .md .list.medium-inset-md.list-outline ul,
    .md .list.medium-inset-md.list-outline-md ul {
        border: 1px solid var(--f7-list-outline-inset-border-color)
    }
}

@media (min-width:1024px) {

    .ios .list.large-inset-ios,
    .list.large-inset,
    .md .list.large-inset-md {
        border-radius: var(--f7-list-inset-border-radius);
        margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .ios .list.large-inset-ios .block-title,
    .list.large-inset .block-title,
    .md .list.large-inset-md .block-title {
        margin-left: 0;
        margin-right: 0
    }

    .ios .list.large-inset-ios ul,
    .list.large-inset ul,
    .md .list.large-inset-md ul {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.large-inset-ios ul:after,
    .ios .list.large-inset-ios ul:before,
    .list.large-inset ul:after,
    .list.large-inset ul:before,
    .md .list.large-inset-md ul:after,
    .md .list.large-inset-md ul:before {
        display: none !important
    }

    .ios .list.large-inset-ios li:first-child>a,
    .list.large-inset li:first-child>a,
    .md .list.large-inset-md li:first-child>a {
        border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
    }

    .ios .list.large-inset-ios li:last-child>a,
    .list.large-inset li:last-child>a,
    .md .list.large-inset-md li:last-child>a {
        border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
    }

    .ios .list.large-inset-ios li:first-child:last-child>a,
    .list.large-inset li:first-child:last-child>a,
    .md .list.large-inset-md li:first-child:last-child>a {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.large-inset-ios.list-outline ul,
    .ios .list.large-inset-ios.list-outline-ios ul,
    .list.large-inset.list-outline ul,
    .md .list.large-inset-md.list-outline ul,
    .md .list.large-inset-md.list-outline-md ul {
        border: 1px solid var(--f7-list-outline-inset-border-color)
    }
}

@media (min-width:1200px) {

    .ios .list.xlarge-inset-ios,
    .list.xlarge-inset,
    .md .list.xlarge-inset-md {
        border-radius: var(--f7-list-inset-border-radius);
        margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
        margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
        --f7-safe-area-left: 0px;
        --f7-safe-area-right: 0px
    }

    .ios .list.xlarge-inset-ios .block-title,
    .list.xlarge-inset .block-title,
    .md .list.xlarge-inset-md .block-title {
        margin-left: 0;
        margin-right: 0
    }

    .ios .list.xlarge-inset-ios ul,
    .list.xlarge-inset ul,
    .md .list.xlarge-inset-md ul {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.xlarge-inset-ios ul:after,
    .ios .list.xlarge-inset-ios ul:before,
    .list.xlarge-inset ul:after,
    .list.xlarge-inset ul:before,
    .md .list.xlarge-inset-md ul:after,
    .md .list.xlarge-inset-md ul:before {
        display: none !important
    }

    .ios .list.xlarge-inset-ios li:first-child>a,
    .list.xlarge-inset li:first-child>a,
    .md .list.xlarge-inset-md li:first-child>a {
        border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0
    }

    .ios .list.xlarge-inset-ios li:last-child>a,
    .list.xlarge-inset li:last-child>a,
    .md .list.xlarge-inset-md li:last-child>a {
        border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius)
    }

    .ios .list.xlarge-inset-ios li:first-child:last-child>a,
    .list.xlarge-inset li:first-child:last-child>a,
    .md .list.xlarge-inset-md li:first-child:last-child>a {
        border-radius: var(--f7-list-inset-border-radius)
    }

    .ios .list.xlarge-inset-ios.list-outline ul,
    .ios .list.xlarge-inset-ios.list-outline-ios ul,
    .list.xlarge-inset.list-outline ul,
    .md .list.xlarge-inset-md.list-outline ul,
    .md .list.xlarge-inset-md.list-outline-md ul {
        border: 1px solid var(--f7-list-outline-inset-border-color)
    }
}

.list .no-chevron,
.list.no-chevron,
.menu-list {
    --f7-list-chevron-icon-color: #0000;
    --f7-list-chevron-icon-area: 0px
}

.menu-list {
    --f7-list-font-size: var(--f7-menu-list-font-size);
    --f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
    --f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
    --f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
    --f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
    --f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
    --f7-list-item-min-height: var(--f7-menu-list-item-min-height)
}

.menu-list .item-after,
.menu-list .item-footer,
.menu-list .item-header,
.menu-list .item-subtitle,
.menu-list .item-text,
.menu-list .item-title {
    transition-duration: .3s
}

.menu-list li:not(.list-group-title) {
    padding-bottom: 4px;
    padding-top: 4px
}

.menu-list li:not(.list-group-title):first-child {
    padding-top: 4px
}

.menu-list li:not(.list-group-title):last-child {
    padding-bottom: 4px
}

.menu-list .item-link {
    background-color: var(--f7-menu-list-item-bg-color);
    border-radius: var(--f7-menu-list-border-radius) !important;
    color: var(--f7-menu-list-item-text-color);
    margin-left: var(--f7-menu-list-offset);
    margin-right: var(--f7-menu-list-offset)
}

.menu-list .item-inner:after {
    display: none
}

.menu-list .item-selected .item-link,
.menu-list .item-selected.item-link,
.menu-list .tab-link-active .item-link,
.menu-list .tab-link-active.item-link {
    background-color: var(--f7-menu-list-item-selected-bg-color);
    color: var(--f7-menu-list-item-selected-text-color)
}

.menu-list .item-selected .item-after,
.menu-list .item-selected .item-footer,
.menu-list .item-selected .item-header,
.menu-list .item-selected .item-subtitle,
.menu-list .item-selected .item-text,
.menu-list .item-selected .item-title {
    color: var(--f7-menu-list-item-selected-text-color)
}

.ios .item-link.active-state .item-inner:after,
.ios .links-list a.active-state:after,
.ios .list-button.active-state:after {
    background-color: initial
}

.ios .links-list a.active-state,
.ios .list .item-link.active-state,
.ios .list .list-button.active-state {
    transition-duration: 0s
}

.md .menu-list .item-link.active-state {
    background-color: var(--f7-menu-list-item-bg-color)
}

 

:root {
    --f7-button-min-width: 32px;
    --f7-button-bg-color: #0000;
    --f7-button-border-width: 0px;
    --f7-button-raised-box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
    --f7-button-raised-pressed-box-shadow: 0 3px 6px #00000029, 0 3px 6px #0000003b;
    --f7-segmented-raised-divider-color: #0000001a;
    --f7-segmented-strong-padding: 2px;
    --f7-segmented-strong-between-buttons: 4px;
    --f7-segmented-strong-button-font-weight: 500;
    --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px #00000040;
    --f7-segmented-strong-button-text-color: #000;
    --f7-segmented-strong-button-hover-bg-color: #0000000a;
    --f7-segmented-strong-button-active-text-color: #000;
    --f7-segmented-strong-button-active-bg-color: #fff
}

:root .dark,
:root.dark {
    --f7-segmented-strong-button-hover-bg-color: #ffffff05;
    --f7-segmented-strong-button-active-bg-color: #ffffff24;
    --f7-segmented-strong-button-text-color: #fff;
    --f7-segmented-strong-button-active-text-color: #fff
}

.ios {
    --f7-button-font-size: 15px;
    --f7-button-fill-text-color: #fff;
    --f7-button-text-transform: none;
    --f7-button-height: 34px;
    --f7-button-padding-horizontal: 10px;
    --f7-button-border-radius: 4px;
    --f7-button-font-weight: 500;
    --f7-button-letter-spacing: 0;
    --f7-button-outline-border-width: 2px;
    --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: 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);
    --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
    --f7-button-tonal-text-color: var(--f7-theme-color);
    --f7-segmented-strong-bg-color: #00000012;
    --f7-segmented-strong-button-pressed-bg-color: #00000012
}

.ios .dark,
.ios.dark {
    --f7-segmented-strong-bg-color: #ffffff1a;
    --f7-segmented-strong-button-pressed-bg-color: #ffffff0a
}

.md {
    --f7-button-font-size: 14px;
    --f7-button-text-transform: none;
    --f7-button-height: 40px;
    --f7-button-padding-horizontal: 16px;
    --f7-button-border-radius: 8px;
    --f7-button-font-weight: 500;
    --f7-button-letter-spacing: normal;
    --f7-button-outline-border-width: 1px;
    --f7-button-large-text-transform: none;
    --f7-button-large-height: 48px;
    --f7-button-large-font-size: 14px;
    --f7-button-large-font-weight: 500;
    --f7-button-small-text-transform: none;
    --f7-button-small-outline-border-width: 1px;
    --f7-button-small-height: 32px;
    --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: 500;
    --f7-segmented-strong-button-pressed-bg-color: #0000
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-button-fill-pressed-bg-color: #0000;
    --f7-button-fill-text-color: var(--f7-md-on-primary);
    --f7-button-outline-border-color: var(--f7-md-outline);
    --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
    --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
    --f7-button-tonal-pressed-bg-color: #0000;
    --f7-button-tonal-text-color: var(--f7-md-on-secondary-container)
}

button {
    width: 100%
}

.button,
button {
    appearance: none
}

.button {
    --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
    align-items: center;
    background: none;
    background-color: var(--f7-button-bg-color);
    border: var(--f7-button-border-width, 0) solid var(--f7-button-border-color, var(--f7-theme-color));
    border-radius: var(--f7-button-border-radius);
    box-shadow: var(--f7-button-box-shadow);
    box-sizing: border-box;
    color: var(--f7-button-text-color, var(--f7-theme-color));
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: var(--f7-button-font-size);
    font-weight: var(--f7-button-font-weight);
    height: var(--f7-button-height);
    justify-content: center;
    letter-spacing: var(--f7-button-letter-spacing);
    line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0)*2);
    margin: 0;
    min-width: var(--f7-button-min-width);
    outline: 0;
    overflow: hidden;
    padding: var(--f7-button-padding-vertical, 0) var(--f7-button-padding-horizontal);
    position: relative;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: var(--f7-button-text-transform);
    vertical-align: middle;
    white-space: nowrap
}

.button.active-state {
    color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)))
}

input[type=button].button,
input[type=reset].button,
input[type=submit].button {
    width: 100%
}

.button>i+span,
.button>span+span,
.button>span~i {
    margin-left: 4px
}

.navbar .button,
.searchbar .button,
.subnavbar .button,
.toolbar .button {
    color: var(--f7-button-text-color, var(--f7-theme-color))
}

.button-round,
.ios .button-round-ios,
.md .button-round-md {
    --f7-button-border-radius: var(--f7-button-height)
}

.button-active,
.button-fill,
.button.tab-link-active,
.ios .button-fill-ios,
.md .button-fill-md {
    --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
    --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
    --f7-touch-ripple-color: var(--f7-touch-ripple-white)
}

.ios .button-active.color-white,
.ios .button-fill.color-white,
.ios .button.tab-link-active.color-white,
.ios .color-white .button-active,
.ios .color-white .button-fill,
.ios .color-white .button.tab-link-active,
.ios .color-white .ios .button-fill-ios,
.ios .color-white .md .button-fill-md,
.ios .ios .button-fill-ios.color-white,
.ios .md .button-fill-md.color-white {
    --f7-button-text-color: #000
}

.button-fill,
.ios .button-fill-ios,
.md .button-fill-md {
    --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color)
}

.button-active,
.button.tab-link-active {
    --f7-button-pressed-bg-color: var(--f7-button-bg-color)
}

.button-outline,
.ios .button-outline-ios,
.md .button-outline-md {
    --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
    --f7-button-border-width: var(--f7-button-outline-border-width)
}

.button-tonal,
.ios .button-tonal-ios,
.md .button-tonal-md {
    --f7-button-bg-color: var(--f7-button-tonal-bg-color);
    --f7-button-text-color: var(--f7-button-tonal-text-color);
    --f7-button-pressed-bg-color: var(--f7-button-tonal-pressed-bg-color)
}

.button-large,
.ios .button-large-ios,
.md .button-large-md {
    --f7-button-height: var(--f7-button-large-height);
    --f7-button-font-size: var(--f7-button-large-font-size);
    --f7-button-font-weight: var(--f7-button-large-font-weight);
    --f7-button-text-transform: var(--f7-button-large-text-transform)
}

.button-small,
.ios .button-small-ios,
.md .button-small-md {
    --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
    --f7-button-height: var(--f7-button-small-height);
    --f7-button-font-size: var(--f7-button-small-font-size);
    --f7-button-font-weight: var(--f7-button-small-font-weight);
    --f7-button-text-transform: var(--f7-button-small-text-transform)
}

.ios .button-small-ios.button-fill,
.ios .button-small.button-fill,
.ios .button-small.button-fill-ios {
    --f7-button-border-width: var(--f7-button-small-outline-border-width);
    --f7-button-pressed-text-color: var(--f7-theme-color);
    --f7-button-pressed-bg-color: #0000
}

.segmented {
    align-self: center;
    border-radius: var(--f7-button-border-radius);
    box-shadow: var(--f7-button-box-shadow);
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap
}

.segmented .button,
.segmented button {
    border-radius: 0;
    flex-shrink: 1;
    min-width: 0;
    width: 100%
}

.segmented .button:first-child {
    border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius)
}

.segmented .button.button-outline:nth-child(n+2),
.segmented .button:not(.button-outline):first-child {
    border-left: none
}

.segmented .button:last-child {
    border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0
}

.segmented .button-round:first-child {
    border-radius: var(--f7-button-height) 0 0 var(--f7-button-height)
}

.segmented .button-round:last-child {
    border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0
}

.segmented .button:first-child:last-child {
    border-radius: var(--f7-button-border-radius)
}

.ios .segmented-raised-ios,
.md .segmented-raised-md,
.segmented-raised {
    box-shadow: var(--f7-button-raised-box-shadow)
}

.ios .segmented-raised-ios .button:not(.button-outline),
.md .segmented-raised-md .button:not(.button-outline),
.segmented-raised .button:not(.button-outline) {
    border-left: 1px solid var(--f7-segmented-raised-divider-color)
}

.button-raised,
.ios .button-raised-ios,
.md .button-raised-md {
    --f7-button-box-shadow: var(--f7-button-raised-box-shadow)
}

.button-raised.active-state,
.ios .button-raised-ios.active-state,
.md .button-raised-md.active-state {
    --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow)
}

.ios .segmented-strong-ios,
.md .segmented-strong-md,
.segmented-strong {
    --f7-button-bg-color: #0000;
    --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
    --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
    --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
    --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
    --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
    background: var(--f7-segmented-strong-bg-color);
    border-radius: calc(var(--f7-button-border-radius) + 2px);
    box-shadow: none;
    overflow: hidden;
    padding: var(--f7-segmented-strong-padding);
    position: relative
}

.ios .segmented-strong-ios .button,
.md .segmented-strong-md .button,
.segmented-strong .button {
    transform: translateZ(0);
    z-index: 1
}

.ios .segmented-strong-ios .button,
.ios .segmented-strong-ios .button:first-child,
.ios .segmented-strong-ios .button:last-child,
.md .segmented-strong-md .button,
.md .segmented-strong-md .button:first-child,
.md .segmented-strong-md .button:last-child,
.segmented-strong .button,
.segmented-strong .button:first-child,
.segmented-strong .button:last-child {
    border-radius: var(--f7-button-border-radius)
}

.ios .segmented-strong-ios .button+.button,
.md .segmented-strong-md .button+.button,
.segmented-strong .button+.button {
    margin-left: var(--f7-segmented-strong-between-buttons)
}

.ios .segmented-strong-ios .button.button-active,
.ios .segmented-strong-ios .button.tab-link-active,
.md .segmented-strong-md .button.button-active,
.md .segmented-strong-md .button.tab-link-active,
.segmented-strong .button.button-active,
.segmented-strong .button.tab-link-active {
    --f7-button-hover-bg-color: #0000;
    --f7-button-bg-color: #0000;
    --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
    --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight)
}

.ios .segmented-strong-ios .segmented-highlight,
.md .segmented-strong-md .segmented-highlight,
.segmented-strong .segmented-highlight {
    --f7-segmented-highlight-num: 1;
    --f7-segmented-highlight-active: 0;
    --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding)*2);
    --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
    --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between)*(var(--f7-segmented-highlight-num) - 1))/var(--f7-segmented-highlight-num));
    background-color: var(--f7-segmented-strong-button-active-bg-color);
    border-radius: var(--f7-button-border-radius);
    box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
    height: calc(100% - var(--f7-segmented-strong-padding)*2);
    left: var(--f7-segmented-strong-padding);
    position: absolute;
    top: var(--f7-segmented-strong-padding);
    transform: translateX(calc(var(--f7-segmented-highlight-active)*100% + var(--f7-segmented-highlight-active)*var(--f7-segmented-highlight-between)));
    transition: .2s;
    width: var(--f7-segmented-highlight-width);
    z-index: 0
}

.button:nth-child(2)~.segmented-highlight {
    --f7-segmented-highlight-num: 2
}

.button:nth-child(3)~.segmented-highlight {
    --f7-segmented-highlight-num: 3
}

.button:nth-child(4)~.segmented-highlight {
    --f7-segmented-highlight-num: 4
}

.button:nth-child(5)~.segmented-highlight {
    --f7-segmented-highlight-num: 5
}

.button:nth-child(6)~.segmented-highlight {
    --f7-segmented-highlight-num: 6
}

.button:nth-child(7)~.segmented-highlight {
    --f7-segmented-highlight-num: 7
}

.button:nth-child(8)~.segmented-highlight {
    --f7-segmented-highlight-num: 8
}

.button:nth-child(9)~.segmented-highlight {
    --f7-segmented-highlight-num: 9
}

.button:nth-child(10)~.segmented-highlight {
    --f7-segmented-highlight-num: 10
}

.button-active:nth-child(2)~.segmented-highlight,
.tab-link-active:nth-child(2)~.segmented-highlight {
    --f7-segmented-highlight-active: 1
}

.button-active:nth-child(3)~.segmented-highlight,
.tab-link-active:nth-child(3)~.segmented-highlight {
    --f7-segmented-highlight-active: 2
}

.button-active:nth-child(4)~.segmented-highlight,
.tab-link-active:nth-child(4)~.segmented-highlight {
    --f7-segmented-highlight-active: 3
}

.button-active:nth-child(5)~.segmented-highlight,
.tab-link-active:nth-child(5)~.segmented-highlight {
    --f7-segmented-highlight-active: 4
}

.button-active:nth-child(6)~.segmented-highlight,
.tab-link-active:nth-child(6)~.segmented-highlight {
    --f7-segmented-highlight-active: 5
}

.button-active:nth-child(7)~.segmented-highlight,
.tab-link-active:nth-child(7)~.segmented-highlight {
    --f7-segmented-highlight-active: 6
}

.button-active:nth-child(8)~.segmented-highlight,
.tab-link-active:nth-child(8)~.segmented-highlight {
    --f7-segmented-highlight-active: 7
}

.button-active:nth-child(9)~.segmented-highlight,
.tab-link-active:nth-child(9)~.segmented-highlight {
    --f7-segmented-highlight-active: 8
}

.button-active:nth-child(10)~.segmented-highlight,
.tab-link-active:nth-child(10)~.segmented-highlight {
    --f7-segmented-highlight-active: 9
}

.ios .segmented-round-ios,
.ios .segmented-round-ios .segmented-highlight,
.md .segmented-round-md,
.md .segmented-round-md .segmented-highlight,
.segmented-round,
.segmented-round .segmented-highlight {
    border-radius: var(--f7-button-height)
}

.subnavbar .segmented {
    width: 100%
}

.button-preloader {
    position: relative;
    --f7-preloader-color: var(--f7-button-text-color, var(--f7-theme-color))
}

.button-preloader:not(.button-large) {
    --f7-preloader-size: calc(var(--f7-button-height) - 6px)
}

.button-preloader.button-fill {
    --f7-preloader-color: #fff
}

.button-preloader>span:not(.preloader) {
    align-content: center;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    transform: scale(1);
    transition: .2s
}

.button-preloader>.preloader {
    left: 50%;
    margin-left: calc(var(--f7-preloader-size)*-1/2);
    margin-top: calc(var(--f7-preloader-size)*-1/2);
    opacity: 0;
    position: absolute;
    top: 50%;
    transition: .2s;
    transition-property: opacity;
    visibility: hidden
}

.button-preloader.button-loading>span:not(.preloader) {
    opacity: 0;
    transform: scale(0)
}

.button-preloader.button-loading>.preloader {
    opacity: 1;
    visibility: visible
}

.ios .button {
    transition-duration: .1s
}

.ios .button.active-state {
    background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), .15))
}

.ios .button-fill,
.ios .button-fill-ios {
    --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint))
}

.ios .button-small,
.ios .button-small-ios {
    transition-duration: .2s
}

.md .button {
    transform: translateZ(0);
    transition-duration: .3s
}

.md .button-fill,
.md .button-fill-md {
    --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, #0000)
}

:root {
    --f7-touch-ripple-black: #0000001a;
    --f7-touch-ripple-white: #ffffff26;
    --f7-touch-ripple-color: var(--f7-touch-ripple-black)
}

.dark {
    --f7-touch-ripple-color: var(--f7-touch-ripple-white)
}

.actions-button,
.button,
.checkbox,
.dialog-button,
.fab a,
.item-link,
.link,
.list-button,
.radio,
.ripple,
.speed-dial-buttons a,
.tab-link {
    -webkit-user-select: none;
    user-select: none
}

.ripple-wave {
    animation: touch-ripple-in .2s forwards;
    border-radius: 50%;
    font-size: 0;
    left: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    position: absolute !important;
    top: 0;
    transform: translateZ(0) scale(0);
    z-index: -1
}

.ripple-wave,
.ripple-wave.ripple-wave-inset {
    background-color: var(--f7-touch-ripple-color)
}

.ripple-wave.ripple-wave-inset {
    background-image: none
}

.ripple-wave.ripple-wave-out {
    animation: touch-ripple-out .25s forwards !important;
    transform: var(--f7-ripple-transform)
}

.actions-button .ripple-wave,
.button .ripple-wave,
.dialog-button .ripple-wave,
.fab a .ripple-wave,
.item-checkbox .ripple-wave,
.item-link .ripple-wave,
.item-radio .ripple-wave,
.links-list a .ripple-wave,
.list label.item-content .ripple-wave,
.list-button .ripple-wave,
.list.accordion-list .accordion-item-toggle .ripple-wave,
.photo-browser .toolbar .link .ripple-wave,
.ripple-blur .ripple-wave,
.stepper-button .ripple-wave,
.stepper-button-minus .ripple-wave,
.stepper-button-plus .ripple-wave,
.tab-link .ripple-wave,
button .ripple-wave {
    animation: touch-ripple-in-blurred .25s forwards;
    background-color: initial;
    background-image: radial-gradient(closest-side circle at 50% 50%, var(--f7-touch-ripple-color) 50%, #fff0)
}

.checkbox .ripple-wave,
.data-table .sortable-cell .ripple-wave,
.radio .ripple-wave {
    z-index: 0
}

[class*=ripple-color-] {
    --f7-touch-ripple-color: var(--f7-theme-color-ripple-color)
}

@keyframes touch-ripple-in-blurred {
    0% {
        transform: translateZ(0) scale(.5)
    }

    to {
        transform: var(--f7-ripple-transform)
    }
}

@keyframes touch-ripple-in {
    0% {
        transform: translateZ(0) scale(0)
    }

    to {
        transform: var(--f7-ripple-transform)
    }
}

@keyframes touch-ripple-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.ios {
    --f7-touch-highlight-bg-color: #ffffff80
}

.ios .dark,
.ios.dark {
    --f7-touch-highlight-bg-color: #ffffff4d
}

.ios .actions-group:not(.actions-grid .actions-group),
.ios .fab>a,
.ios .messagebar-area,
.ios .navbar .left,
.ios .navbar .right,
.ios .notification,
.ios .popover-inner,
.ios .searchbar-disable-button,
.ios .searchbar-input-wrap,
.ios .searchbar-input-wrap .autocomplete-dropdown,
.ios .subnavbar,
.ios .toast,
.ios .toolbar-pane {
    touch-action: none
}

.f7-icons,
.material-icons {
    height: 1em;
    width: 1em
}

i.icon {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: inline-block;
    font-style: normal;
    position: relative;
    vertical-align: middle
}

.icon-back:after,
.icon-close:after,
.icon-forward:after,
.icon-next:after,
.icon-prev:after {
    font-family: framework7-core-icons;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    font-feature-settings: "liga";
    font-size: 20px;
    height: 100%;
    text-align: center;
    width: 100%
}

.icon[class*=color-] {
    color: var(--f7-theme-color)
}

.ios .icon-back,
.ios .icon-forward,
.ios .icon-next,
.ios .icon-prev {
    height: 20px;
    line-height: 20px;
    width: 12px
}

.ios .icon-back:after,
.ios .icon-forward:after,
.ios .icon-next:after,
.ios .icon-prev:after {
    line-height: inherit
}

.ios .icon-next:after,
.ios .icon-prev:after {
    font-size: 16px
}

.ios .icon-close {
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    width: 20px
}

.ios .icon-close:after {
    content: "close_ios"
}

.ios .icon-back:after,
.ios .icon-prev:after {
    content: "chevron_left_ios"
}

.ios .icon-forward:after,
.ios .icon-next:after {
    content: "chevron_right_ios"
}

.md .icon-back,
.md .icon-forward,
.md .icon-next,
.md .icon-prev {
    height: 24px;
    width: 24px
}

.md .icon-back:after,
.md .icon-forward:after,
.md .icon-next:after,
.md .icon-prev:after {
    line-height: 1.2
}

.md .icon-close {
    font-size: 24px;
    height: 24px;
    line-height: 24px;
    width: 24px
}

.md .icon-close:after {
    content: "close_md"
}

.md .icon-back:after {
    content: "arrow_left_md"
}

.md .icon-forward:after {
    content: "arrow_right_md"
}

.md .icon-next:after {
    content: "chevron_right_md"
}

.md .icon-prev:after {
    content: "chevron_left_md"
}

.custom-modal-backdrop {
    z-index: 10500
}

.actions-backdrop,
.custom-modal-backdrop,
.dialog-backdrop,
.fab-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop {
    background: #0006;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition-duration: .4s;
    visibility: hidden;
    width: 100%;
    z-index: 13000
}

.actions-backdrop.not-animated,
.custom-modal-backdrop.not-animated,
.dialog-backdrop.not-animated,
.fab-backdrop.not-animated,
.popover-backdrop.not-animated,
.popup-backdrop.not-animated,
.preloader-backdrop.not-animated,
.sheet-backdrop.not-animated {
    transition-duration: 0s
}

.actions-backdrop.backdrop-in,
.custom-modal-backdrop.backdrop-in,
.dialog-backdrop.backdrop-in,
.fab-backdrop.backdrop-in,
.popover-backdrop.backdrop-in,
.popup-backdrop.backdrop-in,
.preloader-backdrop.backdrop-in,
.sheet-backdrop.backdrop-in {
    opacity: 1;
    visibility: visible
}
 

:root {
    --f7-card-margin-horizontal: 16px;
    --f7-card-margin-vertical: 16px;
    --f7-card-content-padding-horizontal: 16px;
    --f7-card-content-padding-vertical: 16px;
    --f7-card-font-size: inherit;
    --f7-card-header-text-color: inherit;
    --f7-card-header-font-weight: 400;
    --f7-card-header-padding-horizontal: 16px;
    --f7-card-footer-font-weight: 400;
    --f7-card-footer-font-size: inherit;
    --f7-card-footer-padding-horizontal: 16px;
    --f7-card-expandable-font-size: 16px;
    --f7-card-expandable-tablet-width: 670px;
    --f7-card-expandable-tablet-height: 670px
}

.ios {
    --f7-card-border-radius: 24px;
    --f7-card-box-shadow: 0px 1px 2px #0003;
    --f7-card-header-font-size: 17px;
    --f7-card-header-padding-vertical: 10px;
    --f7-card-header-min-height: 52px;
    --f7-card-footer-text-color: #00000073;
    --f7-card-footer-padding-vertical: 10px;
    --f7-card-footer-min-height: 52px;
    --f7-card-expandable-margin-horizontal: 20px;
    --f7-card-expandable-margin-vertical: 30px;
    --f7-card-expandable-box-shadow: 0px 20px 40px #0000004d;
    --f7-card-expandable-border-radius: 24px;
    --f7-card-expandable-tablet-border-radius: 24px;
    --f7-card-expandable-header-font-size: 27px;
    --f7-card-expandable-header-font-weight: bold;
    --f7-card-text-color: inherit;
    --f7-card-bg-color: #fff;
    --f7-card-expandable-bg-color: #fff;
    --f7-card-outline-border-color: #0000001f;
    --f7-card-header-border-color: #0000001a;
    --f7-card-footer-border-color: #0000001a
}

.ios .dark,
.ios.dark {
    --f7-card-bg-color: #1c1c1d;
    --f7-card-expandable-bg-color: #1c1c1d;
    --f7-card-outline-border-color: #ffffff26;
    --f7-card-header-border-color: #ffffff26;
    --f7-card-footer-border-color: #ffffff26;
    --f7-card-footer-text-color: #ffffff8c
}

.md {
    --f7-card-border-radius: 16px;
    --f7-card-box-shadow: 0px 2px 1px -1px #0003, 0px 1px 1px 0px #00000024, 0px 1px 3px 0px #0000001f;
    --f7-card-header-font-size: 22px;
    --f7-card-header-padding-vertical: 16px;
    --f7-card-header-min-height: 48px;
    --f7-card-footer-padding-vertical: 16px;
    --f7-card-footer-min-height: 48px;
    --f7-card-expandable-margin-horizontal: 12px;
    --f7-card-expandable-margin-vertical: 24px;
    --f7-card-expandable-box-shadow: 0px 6px 6px -3px #0003, 0px 10px 14px 1px #00000024, 0px 4px 18px 3px #0000001f;
    --f7-card-expandable-border-radius: 16px;
    --f7-card-expandable-tablet-border-radius: 16px;
    --f7-card-expandable-header-font-size: 22px;
    --f7-card-expandable-header-font-weight: 500
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-card-bg-color: var(--f7-md-surface-1);
    --f7-card-expandable-bg-color: var(--f7-md-surface-1);
    --f7-card-outline-border-color: var(--f7-md-outline);
    --f7-card-header-border-color: var(--f7-md-outline);
    --f7-card-footer-border-color: var(--f7-md-outline);
    --f7-card-text-color: var(--f7-md-on-surface);
    --f7-card-footer-text-color: var(--f7-md-on-surface-variant)
}

.card .list>ul:after,
.card .list>ul:before,
.cards-list>ul:after,
.cards-list>ul:before {
    display: none !important
}

.card .list ul,
.cards-list ul {
    background: none
}

.card {
    background: var(--f7-card-bg-color);
    border-radius: var(--f7-card-border-radius);
    color: var(--f7-card-text-color);
    font-size: var(--f7-card-font-size);
    margin: var(--f7-card-margin-vertical) calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right)) var(--f7-card-margin-vertical) calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
    position: relative
}

.card .block,
.card .list {
    margin: 0
}

.row:not(.no-gap) .col>.card {
    margin-left: 0;
    margin-right: 0
}

.card-raised {
    box-shadow: var(--f7-card-box-shadow)
}

.card-outline,
.ios .card-outline-ios,
.md .card-outline-md {
    border: 1px solid var(--f7-card-outline-border-color)
}

.card-content {
    position: relative
}

.card-content-padding {
    padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
    position: relative
}

.card-content-padding>.block,
.card-content-padding>.list {
    margin: calc(var(--f7-card-content-padding-vertical)*-1) calc(var(--f7-card-content-padding-horizontal)*-1)
}

.card-content-padding>p:first-child {
    margin-top: 0
}

.card-content-padding>p:last-child {
    margin-bottom: 0
}

.card-header {
    color: var(--f7-card-header-text-color);
    font-size: var(--f7-card-header-font-size);
    font-weight: var(--f7-card-header-font-weight);
    min-height: var(--f7-card-header-min-height);
    padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal)
}

.card-dividers .card-header,
.card-header-divider .card-header,
.card-header.card-header-divider {
    border-bottom: 1px solid var(--f7-card-header-border-color)
}

.card-footer {
    color: var(--f7-card-footer-text-color);
    font-size: var(--f7-card-footer-font-size);
    font-weight: var(--f7-card-footer-font-weight);
    min-height: var(--f7-card-footer-min-height);
    padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal)
}

.card-dividers .card-footer,
.card-footer-divider .card-footer,
.card-footer.card-footer-divider {
    border-top: 1px solid var(--f7-card-header-border-color)
}

.card-footer a.link {
    overflow: hidden
}

.card-footer,
.card-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative
}

.card-footer[valign=top],
.card-header[valign=top] {
    align-items: flex-start
}

.card-footer[valign=bottom],
.card-header[valign=bottom] {
    align-items: flex-end
}

.card-footer a.link,
.card-header a.link {
    position: relative
}

.card-footer a.link i.icon,
.card-header a.link i.icon {
    display: block
}

.card-footer a:is(.icon-only, :has(i:only-child), :has(svg:only-child)),
.card-header a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0
}

.card-header {
    border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0
}

.card-footer {
    border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius)
}

.card-expandable {
    background: var(--f7-card-expandable-bg-color);
    border-radius: var(--f7-card-expandable-border-radius);
    font-size: var(--f7-card-expandable-font-size);
    height: 300px;
    margin: var(--f7-card-expandable-margin-vertical) calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right)) var(--f7-card-expandable-margin-vertical) calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
    overflow: hidden;
    position: relative;
    transform-origin: center center;
    transition-duration: .2s;
    transition-property: transform, border-radius;
    z-index: 2
}

.card-expandable.card-raised {
    box-shadow: var(--f7-card-expandable-box-shadow)
}

.card-expandable:not(.card-opened) {
    -webkit-user-select: none;
    user-select: none
}

.card-expandable.card-no-transition {
    transition-duration: 0s
}

.card-expandable.card-expandable-animate-width .card-content {
    transition-property: width, transform;
    width: 100%
}

.card-expandable.active-state {
    transform: scale(.97) translateZ(0)
}

.card-expandable .card-opened-fade-in,
.card-expandable .card-opened-fade-out {
    transition-duration: .4s
}

.card-expandable .card-opened-fade-in {
    opacity: 0;
    pointer-events: none
}

.card-expandable .card-content {
    box-sizing: border-box;
    height: 100vh;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform-origin: center top;
    transition-property: transform;
    width: 100vw
}

.card-expandable .card-content .card-content-padding {
    padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
    padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal))
}

.card-expandable.card-opened {
    transition-duration: 0s
}

.card-expandable.card-closing,
.card-expandable.card-opening,
.card-expandable.card-transitioning {
    transition-duration: .4s
}

.card-expandable.card-opening .card-content {
    transition-duration: .3s
}

.card-expandable.card-closing .card-content {
    transition-duration: .5s
}

.card-expandable.card-closing,
.card-expandable.card-opened,
.card-expandable.card-opening {
    z-index: 300
}

.card-expandable.card-opened,
.card-expandable.card-opening {
    border-radius: 0
}

.card-expandable.card-opened .card-opened-fade-in,
.card-expandable.card-opening .card-opened-fade-in {
    opacity: 1;
    pointer-events: auto
}

.card-expandable.card-opened .card-opened-fade-out,
.card-expandable.card-opening .card-opened-fade-out {
    opacity: 0;
    pointer-events: none
}

.card-expandable.card-opened .card-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto
}

.card-expandable .card-header {
    font-size: var(--f7-card-expandable-header-font-size);
    font-weight: var(--f7-card-expandable-header-font-weight)
}

.card-prevent-open {
    pointer-events: auto
}

.card-expandable-size {
    height: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 0
}

@media (min-width:768px) and (min-height:670px) {
    .card-expandable:not(.card-tablet-fullscreen) {
        max-width: var(--f7-card-expandable-tablet-width)
    }

    .card-expandable:not(.card-tablet-fullscreen).card-opened,
    .card-expandable:not(.card-tablet-fullscreen).card-opening {
        border-radius: var(--f7-card-expandable-tablet-border-radius)
    }

    .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
        width: var(--f7-card-expandable-tablet-width)
    }

    .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
        height: var(--f7-card-expandable-tablet-height);
        width: var(--f7-card-expandable-tablet-width)
    }
}

.page.page-with-card-opened .page-content {
    overflow: hidden
}

.card-backdrop {
    background: #0003;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 299
}

.card-backdrop-in {
    animation: card-backdrop-fade-in .4s forwards;
    pointer-events: auto
}

.card-backdrop-out {
    animation: card-backdrop-fade-out .4s forwards
}

@supports (backdrop-filter:blur(15px)) {
    .card-backdrop {
        backdrop-filter: blur(15px);
        background: #0000
    }
}

@keyframes card-backdrop-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes card-backdrop-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}
 
 

:root {
    --f7-grid-gap: 16px
}

.grid {
    display: grid
}

.grid.grid-gap {
    gap: var(--f7-grid-gap)
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr))
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr))
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr))
}

.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr))
}

.grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr))
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.grid-cols-13 {
    grid-template-columns: repeat(13, minmax(0, 1fr))
}

.grid-cols-14 {
    grid-template-columns: repeat(14, minmax(0, 1fr))
}

.grid-cols-15 {
    grid-template-columns: repeat(15, minmax(0, 1fr))
}

.grid-cols-16 {
    grid-template-columns: repeat(16, minmax(0, 1fr))
}

.grid-cols-17 {
    grid-template-columns: repeat(17, minmax(0, 1fr))
}

.grid-cols-18 {
    grid-template-columns: repeat(18, minmax(0, 1fr))
}

.grid-cols-19 {
    grid-template-columns: repeat(19, minmax(0, 1fr))
}

.grid-cols-20 {
    grid-template-columns: repeat(20, minmax(0, 1fr))
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr))
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr))
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr))
}

.grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr))
}

.grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr))
}

.grid-rows-7 {
    grid-template-rows: repeat(7, minmax(0, 1fr))
}

.grid-rows-8 {
    grid-template-rows: repeat(8, minmax(0, 1fr))
}

.grid-rows-9 {
    grid-template-rows: repeat(9, minmax(0, 1fr))
}

.grid-rows-10 {
    grid-template-rows: repeat(10, minmax(0, 1fr))
}

.grid-rows-11 {
    grid-template-rows: repeat(11, minmax(0, 1fr))
}

.grid-rows-12 {
    grid-template-rows: repeat(12, minmax(0, 1fr))
}

.grid-rows-13 {
    grid-template-rows: repeat(13, minmax(0, 1fr))
}

.grid-rows-14 {
    grid-template-rows: repeat(14, minmax(0, 1fr))
}

.grid-rows-15 {
    grid-template-rows: repeat(15, minmax(0, 1fr))
}

.grid-rows-16 {
    grid-template-rows: repeat(16, minmax(0, 1fr))
}

.grid-rows-17 {
    grid-template-rows: repeat(17, minmax(0, 1fr))
}

.grid-rows-18 {
    grid-template-rows: repeat(18, minmax(0, 1fr))
}

.grid-rows-19 {
    grid-template-rows: repeat(19, minmax(0, 1fr))
}

.grid-rows-20 {
    grid-template-rows: repeat(20, minmax(0, 1fr))
}

@media (min-width:480px) {
    .xsmall-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .xsmall-grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .xsmall-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .xsmall-grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr))
    }

    .xsmall-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xsmall-grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
    }

    .xsmall-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .xsmall-grid-rows-4 {
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }

    .xsmall-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .xsmall-grid-rows-5 {
        grid-template-rows: repeat(5, minmax(0, 1fr))
    }

    .xsmall-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .xsmall-grid-rows-6 {
        grid-template-rows: repeat(6, minmax(0, 1fr))
    }

    .xsmall-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .xsmall-grid-rows-7 {
        grid-template-rows: repeat(7, minmax(0, 1fr))
    }

    .xsmall-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .xsmall-grid-rows-8 {
        grid-template-rows: repeat(8, minmax(0, 1fr))
    }

    .xsmall-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .xsmall-grid-rows-9 {
        grid-template-rows: repeat(9, minmax(0, 1fr))
    }

    .xsmall-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .xsmall-grid-rows-10 {
        grid-template-rows: repeat(10, minmax(0, 1fr))
    }

    .xsmall-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .xsmall-grid-rows-11 {
        grid-template-rows: repeat(11, minmax(0, 1fr))
    }

    .xsmall-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .xsmall-grid-rows-12 {
        grid-template-rows: repeat(12, minmax(0, 1fr))
    }

    .xsmall-grid-cols-13 {
        grid-template-columns: repeat(13, minmax(0, 1fr))
    }

    .xsmall-grid-rows-13 {
        grid-template-rows: repeat(13, minmax(0, 1fr))
    }

    .xsmall-grid-cols-14 {
        grid-template-columns: repeat(14, minmax(0, 1fr))
    }

    .xsmall-grid-rows-14 {
        grid-template-rows: repeat(14, minmax(0, 1fr))
    }

    .xsmall-grid-cols-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr))
    }

    .xsmall-grid-rows-15 {
        grid-template-rows: repeat(15, minmax(0, 1fr))
    }

    .xsmall-grid-cols-16 {
        grid-template-columns: repeat(16, minmax(0, 1fr))
    }

    .xsmall-grid-rows-16 {
        grid-template-rows: repeat(16, minmax(0, 1fr))
    }

    .xsmall-grid-cols-17 {
        grid-template-columns: repeat(17, minmax(0, 1fr))
    }

    .xsmall-grid-rows-17 {
        grid-template-rows: repeat(17, minmax(0, 1fr))
    }

    .xsmall-grid-cols-18 {
        grid-template-columns: repeat(18, minmax(0, 1fr))
    }

    .xsmall-grid-rows-18 {
        grid-template-rows: repeat(18, minmax(0, 1fr))
    }

    .xsmall-grid-cols-19 {
        grid-template-columns: repeat(19, minmax(0, 1fr))
    }

    .xsmall-grid-rows-19 {
        grid-template-rows: repeat(19, minmax(0, 1fr))
    }

    .xsmall-grid-cols-20 {
        grid-template-columns: repeat(20, minmax(0, 1fr))
    }

    .xsmall-grid-rows-20 {
        grid-template-rows: repeat(20, minmax(0, 1fr))
    }
}

@media (min-width:568px) {
    .small-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .small-grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .small-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .small-grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr))
    }

    .small-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .small-grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
    }

    .small-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .small-grid-rows-4 {
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }

    .small-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .small-grid-rows-5 {
        grid-template-rows: repeat(5, minmax(0, 1fr))
    }

    .small-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .small-grid-rows-6 {
        grid-template-rows: repeat(6, minmax(0, 1fr))
    }

    .small-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .small-grid-rows-7 {
        grid-template-rows: repeat(7, minmax(0, 1fr))
    }

    .small-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .small-grid-rows-8 {
        grid-template-rows: repeat(8, minmax(0, 1fr))
    }

    .small-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .small-grid-rows-9 {
        grid-template-rows: repeat(9, minmax(0, 1fr))
    }

    .small-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .small-grid-rows-10 {
        grid-template-rows: repeat(10, minmax(0, 1fr))
    }

    .small-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .small-grid-rows-11 {
        grid-template-rows: repeat(11, minmax(0, 1fr))
    }

    .small-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .small-grid-rows-12 {
        grid-template-rows: repeat(12, minmax(0, 1fr))
    }

    .small-grid-cols-13 {
        grid-template-columns: repeat(13, minmax(0, 1fr))
    }

    .small-grid-rows-13 {
        grid-template-rows: repeat(13, minmax(0, 1fr))
    }

    .small-grid-cols-14 {
        grid-template-columns: repeat(14, minmax(0, 1fr))
    }

    .small-grid-rows-14 {
        grid-template-rows: repeat(14, minmax(0, 1fr))
    }

    .small-grid-cols-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr))
    }

    .small-grid-rows-15 {
        grid-template-rows: repeat(15, minmax(0, 1fr))
    }

    .small-grid-cols-16 {
        grid-template-columns: repeat(16, minmax(0, 1fr))
    }

    .small-grid-rows-16 {
        grid-template-rows: repeat(16, minmax(0, 1fr))
    }

    .small-grid-cols-17 {
        grid-template-columns: repeat(17, minmax(0, 1fr))
    }

    .small-grid-rows-17 {
        grid-template-rows: repeat(17, minmax(0, 1fr))
    }

    .small-grid-cols-18 {
        grid-template-columns: repeat(18, minmax(0, 1fr))
    }

    .small-grid-rows-18 {
        grid-template-rows: repeat(18, minmax(0, 1fr))
    }

    .small-grid-cols-19 {
        grid-template-columns: repeat(19, minmax(0, 1fr))
    }

    .small-grid-rows-19 {
        grid-template-rows: repeat(19, minmax(0, 1fr))
    }

    .small-grid-cols-20 {
        grid-template-columns: repeat(20, minmax(0, 1fr))
    }

    .small-grid-rows-20 {
        grid-template-rows: repeat(20, minmax(0, 1fr))
    }
}

@media (min-width:768px) {
    .medium-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .medium-grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .medium-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .medium-grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr))
    }

    .medium-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .medium-grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
    }

    .medium-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .medium-grid-rows-4 {
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }

    .medium-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .medium-grid-rows-5 {
        grid-template-rows: repeat(5, minmax(0, 1fr))
    }

    .medium-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .medium-grid-rows-6 {
        grid-template-rows: repeat(6, minmax(0, 1fr))
    }

    .medium-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .medium-grid-rows-7 {
        grid-template-rows: repeat(7, minmax(0, 1fr))
    }

    .medium-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .medium-grid-rows-8 {
        grid-template-rows: repeat(8, minmax(0, 1fr))
    }

    .medium-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .medium-grid-rows-9 {
        grid-template-rows: repeat(9, minmax(0, 1fr))
    }

    .medium-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .medium-grid-rows-10 {
        grid-template-rows: repeat(10, minmax(0, 1fr))
    }

    .medium-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .medium-grid-rows-11 {
        grid-template-rows: repeat(11, minmax(0, 1fr))
    }

    .medium-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .medium-grid-rows-12 {
        grid-template-rows: repeat(12, minmax(0, 1fr))
    }

    .medium-grid-cols-13 {
        grid-template-columns: repeat(13, minmax(0, 1fr))
    }

    .medium-grid-rows-13 {
        grid-template-rows: repeat(13, minmax(0, 1fr))
    }

    .medium-grid-cols-14 {
        grid-template-columns: repeat(14, minmax(0, 1fr))
    }

    .medium-grid-rows-14 {
        grid-template-rows: repeat(14, minmax(0, 1fr))
    }

    .medium-grid-cols-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr))
    }

    .medium-grid-rows-15 {
        grid-template-rows: repeat(15, minmax(0, 1fr))
    }

    .medium-grid-cols-16 {
        grid-template-columns: repeat(16, minmax(0, 1fr))
    }

    .medium-grid-rows-16 {
        grid-template-rows: repeat(16, minmax(0, 1fr))
    }

    .medium-grid-cols-17 {
        grid-template-columns: repeat(17, minmax(0, 1fr))
    }

    .medium-grid-rows-17 {
        grid-template-rows: repeat(17, minmax(0, 1fr))
    }

    .medium-grid-cols-18 {
        grid-template-columns: repeat(18, minmax(0, 1fr))
    }

    .medium-grid-rows-18 {
        grid-template-rows: repeat(18, minmax(0, 1fr))
    }

    .medium-grid-cols-19 {
        grid-template-columns: repeat(19, minmax(0, 1fr))
    }

    .medium-grid-rows-19 {
        grid-template-rows: repeat(19, minmax(0, 1fr))
    }

    .medium-grid-cols-20 {
        grid-template-columns: repeat(20, minmax(0, 1fr))
    }

    .medium-grid-rows-20 {
        grid-template-rows: repeat(20, minmax(0, 1fr))
    }
}

@media (min-width:1024px) {
    .large-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .large-grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .large-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .large-grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr))
    }

    .large-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .large-grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
    }

    .large-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .large-grid-rows-4 {
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }

    .large-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .large-grid-rows-5 {
        grid-template-rows: repeat(5, minmax(0, 1fr))
    }

    .large-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .large-grid-rows-6 {
        grid-template-rows: repeat(6, minmax(0, 1fr))
    }

    .large-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .large-grid-rows-7 {
        grid-template-rows: repeat(7, minmax(0, 1fr))
    }

    .large-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .large-grid-rows-8 {
        grid-template-rows: repeat(8, minmax(0, 1fr))
    }

    .large-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .large-grid-rows-9 {
        grid-template-rows: repeat(9, minmax(0, 1fr))
    }

    .large-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .large-grid-rows-10 {
        grid-template-rows: repeat(10, minmax(0, 1fr))
    }

    .large-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .large-grid-rows-11 {
        grid-template-rows: repeat(11, minmax(0, 1fr))
    }

    .large-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .large-grid-rows-12 {
        grid-template-rows: repeat(12, minmax(0, 1fr))
    }

    .large-grid-cols-13 {
        grid-template-columns: repeat(13, minmax(0, 1fr))
    }

    .large-grid-rows-13 {
        grid-template-rows: repeat(13, minmax(0, 1fr))
    }

    .large-grid-cols-14 {
        grid-template-columns: repeat(14, minmax(0, 1fr))
    }

    .large-grid-rows-14 {
        grid-template-rows: repeat(14, minmax(0, 1fr))
    }

    .large-grid-cols-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr))
    }

    .large-grid-rows-15 {
        grid-template-rows: repeat(15, minmax(0, 1fr))
    }

    .large-grid-cols-16 {
        grid-template-columns: repeat(16, minmax(0, 1fr))
    }

    .large-grid-rows-16 {
        grid-template-rows: repeat(16, minmax(0, 1fr))
    }

    .large-grid-cols-17 {
        grid-template-columns: repeat(17, minmax(0, 1fr))
    }

    .large-grid-rows-17 {
        grid-template-rows: repeat(17, minmax(0, 1fr))
    }

    .large-grid-cols-18 {
        grid-template-columns: repeat(18, minmax(0, 1fr))
    }

    .large-grid-rows-18 {
        grid-template-rows: repeat(18, minmax(0, 1fr))
    }

    .large-grid-cols-19 {
        grid-template-columns: repeat(19, minmax(0, 1fr))
    }

    .large-grid-rows-19 {
        grid-template-rows: repeat(19, minmax(0, 1fr))
    }

    .large-grid-cols-20 {
        grid-template-columns: repeat(20, minmax(0, 1fr))
    }

    .large-grid-rows-20 {
        grid-template-rows: repeat(20, minmax(0, 1fr))
    }
}

@media (min-width:1200px) {
    .xlarge-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .xlarge-grid-rows-1 {
        grid-template-rows: repeat(1, minmax(0, 1fr))
    }

    .xlarge-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .xlarge-grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr))
    }

    .xlarge-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xlarge-grid-rows-3 {
        grid-template-rows: repeat(3, minmax(0, 1fr))
    }

    .xlarge-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .xlarge-grid-rows-4 {
        grid-template-rows: repeat(4, minmax(0, 1fr))
    }

    .xlarge-grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .xlarge-grid-rows-5 {
        grid-template-rows: repeat(5, minmax(0, 1fr))
    }

    .xlarge-grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .xlarge-grid-rows-6 {
        grid-template-rows: repeat(6, minmax(0, 1fr))
    }

    .xlarge-grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .xlarge-grid-rows-7 {
        grid-template-rows: repeat(7, minmax(0, 1fr))
    }

    .xlarge-grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }

    .xlarge-grid-rows-8 {
        grid-template-rows: repeat(8, minmax(0, 1fr))
    }

    .xlarge-grid-cols-9 {
        grid-template-columns: repeat(9, minmax(0, 1fr))
    }

    .xlarge-grid-rows-9 {
        grid-template-rows: repeat(9, minmax(0, 1fr))
    }

    .xlarge-grid-cols-10 {
        grid-template-columns: repeat(10, minmax(0, 1fr))
    }

    .xlarge-grid-rows-10 {
        grid-template-rows: repeat(10, minmax(0, 1fr))
    }

    .xlarge-grid-cols-11 {
        grid-template-columns: repeat(11, minmax(0, 1fr))
    }

    .xlarge-grid-rows-11 {
        grid-template-rows: repeat(11, minmax(0, 1fr))
    }

    .xlarge-grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .xlarge-grid-rows-12 {
        grid-template-rows: repeat(12, minmax(0, 1fr))
    }

    .xlarge-grid-cols-13 {
        grid-template-columns: repeat(13, minmax(0, 1fr))
    }

    .xlarge-grid-rows-13 {
        grid-template-rows: repeat(13, minmax(0, 1fr))
    }

    .xlarge-grid-cols-14 {
        grid-template-columns: repeat(14, minmax(0, 1fr))
    }

    .xlarge-grid-rows-14 {
        grid-template-rows: repeat(14, minmax(0, 1fr))
    }

    .xlarge-grid-cols-15 {
        grid-template-columns: repeat(15, minmax(0, 1fr))
    }

    .xlarge-grid-rows-15 {
        grid-template-rows: repeat(15, minmax(0, 1fr))
    }

    .xlarge-grid-cols-16 {
        grid-template-columns: repeat(16, minmax(0, 1fr))
    }

    .xlarge-grid-rows-16 {
        grid-template-rows: repeat(16, minmax(0, 1fr))
    }

    .xlarge-grid-cols-17 {
        grid-template-columns: repeat(17, minmax(0, 1fr))
    }

    .xlarge-grid-rows-17 {
        grid-template-rows: repeat(17, minmax(0, 1fr))
    }

    .xlarge-grid-cols-18 {
        grid-template-columns: repeat(18, minmax(0, 1fr))
    }

    .xlarge-grid-rows-18 {
        grid-template-rows: repeat(18, minmax(0, 1fr))
    }

    .xlarge-grid-cols-19 {
        grid-template-columns: repeat(19, minmax(0, 1fr))
    }

    .xlarge-grid-rows-19 {
        grid-template-rows: repeat(19, minmax(0, 1fr))
    }

    .xlarge-grid-cols-20 {
        grid-template-columns: repeat(20, minmax(0, 1fr))
    }

    .xlarge-grid-rows-20 {
        grid-template-rows: repeat(20, minmax(0, 1fr))
    }
}


.ios,
.ios [class*=color-] {
    --f7-fab-pressed-bg-color: var(--f7-theme-color-shade);
    --f7-fab-bg-color: var(--f7-theme-color);
    --f7-glass-shadow-fab: inset -3px -3px 0px -3.5px #fff, inset 3px 3px 0px -3.5px #fff, inset 0px 0px 0px 0.5px #ffffff80, inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, #000), inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, #000), inset 0 0 5px 1px #fff, 0 0 15px 4px #0003
}

.ios .dark,
.ios .dark [class*=color-],
.ios.dark,
.ios.dark [class*=color-] {
    --f7-fab-bg-color: color-mix(in oklab, var(--f7-theme-color-shade) 50%, #0000 0%);
    --f7-glass-shadow-fab: inset 3px 3px 0px -3.5px var(--f7-theme-color), inset -3px -3px 0px -3.5px var(--f7-theme-color), inset -0.5px -0.5px 0px #ffffff80, inset 0.5px 0.5px 0px #ffffff1a, inset -3px 3px 0px -3.5px #ffffff40, inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, #0000 10%), inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, #0000 10%), 0 0 15px 4px #0003
}

.md .fab-buttons a.active-state,
.md .fab>a.active-state {
    background-color: var(--f7-fab-pressed-bg-color, var(--f7-fab-bg-color, var(--f7-theme-color)))
}

:root {
    --f7-searchbar-input-border-width: 0px;
    --f7-searchbar-input-border-color: #0000
}

.ios {
    --f7-searchbar-bg-color: #0000;
    --f7-searchbar-height: 44px;
    --f7-searchbar-inner-padding-left: 0px;
    --f7-searchbar-inner-padding-right: 0px;
    --f7-searchbar-link-color: var(--f7-bars-text-color);
    --f7-searchbar-input-font-size: 17px;
    --f7-searchbar-input-border-radius: 44px;
    --f7-searchbar-input-height: 44px;
    --f7-searchbar-inline-input-height: 44px;
    --f7-searchbar-input-padding-horizontal: 44px;
    --f7-searchbar-backdrop-bg-color: #0006;
    --f7-searchbar-in-page-content-margin: 16px;
    --f7-searchbar-in-page-content-box-shadow: none;
    --f7-searchbar-in-page-content-border-radius: 44px;
    --f7-searchbar-in-page-content-input-border-radius: 44px;
    --f7-searchbar-input-bg-color: var(--f7-glass-bg-color);
    --f7-searchbar-placeholder-color: #0006;
    --f7-searchbar-input-text-color: #000;
    --f7-searchbar-search-icon-color: #0006
}

.ios .dark,
.ios.dark {
    --f7-searchbar-placeholder-color: #fff6;
    --f7-searchbar-input-text-color: #fff;
    --f7-searchbar-search-icon-color: #fff6
}

.md {
    --f7-searchbar-border-color: #0000;
    --f7-searchbar-height: 48px;
    --f7-searchbar-inner-padding-left: 8px;
    --f7-searchbar-inner-padding-right: 8px;
    --f7-searchbar-input-font-size: 16px;
    --f7-searchbar-input-border-radius: 24px;
    --f7-searchbar-input-height: 48px;
    --f7-searchbar-inline-input-height: 48px;
    --f7-searchbar-inline-input-border-radius: 24px;
    --f7-searchbar-input-padding-horizontal: 16px;
    --f7-searchbar-inline-input-padding-horizontal: 16px;
    --f7-searchbar-backdrop-bg-color: #00000040;
    --f7-searchbar-in-page-content-margin: 16px 0;
    --f7-searchbar-in-page-content-box-shadow: none;
    --f7-searchbar-in-page-content-border-radius: 24px;
    --f7-searchbar-in-page-content-input-border-radius: 24px;
    --f7-searchbar-bg-color: #0000
}

.md,
.md .dark,
.md [class*=color-] {
    --f7-searchbar-link-color: var(--f7-md-on-surface);
    --f7-searchbar-search-icon-color: var(--f7-md-on-surface);
    --f7-searchbar-input-clear-button-color: var(--f7-md-on-surface);
    --f7-searchbar-placeholder-color: var(--f7-md-on-surface-variant);
    --f7-searchbar-input-bg-color: var(--f7-md-secondary-container);
    --f7-searchbar-input-text-color: var(--f7-md-on-surface)
}

.searchbar {
    --f7-link-highlight-color: var(--f7-link-highlight-black);
    background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
    height: var(--f7-searchbar-height);
    position: relative;
    width: 100%;
    z-index: 200
}

.dark .searchbar {
    --f7-link-highlight-color: var(--f7-link-highlight-white)
}

.searchbar input[type=search]::-webkit-search-decoration {
    display: none
}

.ios .subnavbar .searchbar {
    backdrop-filter: none;
    background-color: initial
}

.ios .subnavbar .searchbar:after,
.searchbar.no-outline:after {
    display: none !important
}

.searchbar:after {
    background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    right: auto;
    top: auto;
    transform: scaleY(calc(1/var(--f7-device-pixel-ratio)));
    transform-origin: 50% 100%;
    width: 100%;
    z-index: 15
}

.page>.searchbar:not(.searchbar-inline) {
    z-index: 600
}

.searchbar input[type=search],
.searchbar input[type=text] {
    appearance: none;
    background-color: var(--f7-searchbar-input-bg-color);
    border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
    border-radius: var(--f7-searchbar-input-border-radius);
    box-sizing: border-box;
    color: var(--f7-searchbar-input-text-color);
    display: block;
    font-family: inherit;
    font-size: var(--f7-searchbar-input-font-size);
    font-weight: 400;
    height: 100%;
    padding: 0;
    padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
    padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
    position: relative;
    width: 100%
}

.searchbar input[type=search]::placeholder,
.searchbar input[type=text]::placeholder {
    color: var(--f7-searchbar-placeholder-color);
    opacity: 1
}

.searchbar input::-webkit-search-cancel-button {
    appearance: none
}

.searchbar .searchbar-input-wrap {
    flex-shrink: 1;
    height: var(--f7-searchbar-input-height);
    position: relative;
    width: 100%
}

.searchbar a {
    color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)))
}

.page>.searchbar:not(.searchbar-inline) {
    left: 16px;
    position: absolute;
    right: 16px;
    top: 0;
    width: auto
}

.page-content .searchbar:not(.searchbar-inline) {
    border-radius: var(--f7-searchbar-in-page-content-border-radius);
    box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
    margin: var(--f7-searchbar-in-page-content-margin);
    width: auto
}

.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
.page-content .searchbar:not(.searchbar-inline) input[type=search],
.page-content .searchbar:not(.searchbar-inline) input[type=text] {
    border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius))
}

.searchbar .input-clear-button {
    color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color))
}

.searchbar-expandable {
    --f7-searchbar-expandable-size: var(--f7-searchbar-height);
    pointer-events: none;
    position: absolute;
    transition-duration: .3s
}

.navbar .searchbar-expandable {
    background: #0000
}

.navbar .searchbar-expandable:after {
    display: none !important
}

.navbar .searchbar.searchbar-expandable {
    --f7-searchbar-expandable-size: calc(var(--f7-navbar-height) + var(--f7-safe-area-top))
}

.navbar .searchbar.searchbar-expandable .searchbar-inner {
    height: calc(100% - var(--f7-safe-area-top));
    top: var(--f7-safe-area-top)
}

.toolbar .searchbar.searchbar-expandable {
    --f7-searchbar-expandable-size: var(--f7-toolbar-height)
}

.subnavbar .searchbar.searchbar-expandable {
    --f7-searchbar-expandable-size: var(--f7-subnavbar-height)
}

.tabbar-icons .searchbar.searchbar-expandable {
    --f7-searchbar-expandable-size: var(--f7-tabbar-icons-height)
}

.searchbar-inner {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    left: 0;
    padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
    position: absolute;
    top: 0;
    width: 100%
}

.searchbar-disable-button {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0;
    opacity: 0;
    outline: 0;
    padding: 0;
    pointer-events: none;
    width: auto
}

.searchbar-icon {
    background-position: 50%;
    background-repeat: no-repeat;
    pointer-events: none
}

.searchbar-icon:after {
    color: var(--f7-searchbar-search-icon-color);
    font-family: framework7-core-icons;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    font-feature-settings: "liga";
    font-size: 20px;
    height: 100%;
    text-align: center;
    width: 100%
}

.searchbar-backdrop {
    background: var(--f7-searchbar-backdrop-bg-color);
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    transition-duration: .3s;
    width: 100%;
    z-index: 100
}

.searchbar-backdrop.searchbar-backdrop-in {
    opacity: 1;
    pointer-events: auto
}

.page-content>.searchbar-backdrop {
    position: fixed
}

.searchbar-not-found {
    display: none
}

.hidden-by-searchbar,
.list .hidden-by-searchbar,
.list li.hidden-by-searchbar,
.list.li.hidden-by-searchbar {
    display: none !important
}

.navbar.with-searchbar-expandable-enabled,
.navbar.with-searchbar-expandable-enabled-no-transition {
    --f7-navbar-large-collapse-progress: 1
}

.navbar.with-searchbar-expandable-closing .navbar-bg,
.navbar.with-searchbar-expandable-closing .title-large,
.navbar.with-searchbar-expandable-closing .title-large-text,
.navbar.with-searchbar-expandable-enabled .navbar-bg,
.navbar.with-searchbar-expandable-enabled .title-large,
.navbar.with-searchbar-expandable-enabled .title-large-text {
    transition-duration: .3s
}

.page-content.with-searchbar-expandable-enabled {
    height: calc(100% + var(--f7-navbar-large-title-height));
    transform: translateY(calc(var(--f7-navbar-large-title-height)*-1));
    transition-duration: .3s;
    transition-property: transform
}

.page-content.with-searchbar-expandable-closing {
    transition-duration: .3s
}

.navbar~.page:not(.no-navbar)>.searchbar,
.page>.navbar~.searchbar {
    top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top))
}

.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,
.page-with-navbar-large .navbar~* .searchbar,
.page-with-navbar-large .navbar~.searchbar {
    top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
    transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)), 0)
}

.page-with-navbar-large .page-content .searchbar {
    top: 0;
    transform: none
}

.searchbar~* {
    --f7-page-searchbar-offset: var(--f7-searchbar-height)
}

.ios .page>.toolbar-top-ios~.searchbar,
.md .page>.toolbar-top-md~.searchbar,
.page>.toolbar-top~.searchbar {
    top: var(--f7-toolbar-height)
}

.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,
.md .page>.tabbar-icons.toolbar-top-md~.searchbar,
.page>.tabbar-icons.toolbar-top~.searchbar {
    top: var(--f7-tabbar-icons-height)
}

.ios .page>.navbar~.toolbar-top-ios~.searchbar,
.md .page>.navbar~.toolbar-top-md~.searchbar,
.page>.navbar~.toolbar-top~.searchbar {
    top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))
}

.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,
.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,
.page>.navbar~.tabbar-icons.toolbar-top~.searchbar {
    top: calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))
}

.searchbar.searchbar-inline {
    background-color: initial;
    background-image: none;
    height: auto;
    width: auto
}

.searchbar.searchbar-inline:after,
.searchbar.searchbar-inline:before {
    display: none !important
}

.searchbar.searchbar-inline .searchbar-input-wrap {
    height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height))
}

.searchbar.searchbar-inline .searchbar-inner {
    height: auto;
    padding: 0;
    position: static;
    width: auto
}

.searchbar.searchbar-inline input[type=search],
.searchbar.searchbar-inline input[type=text] {
    border-radius: var(--f7-searchbar-inline-input-border-radius, var(--f7-searchbar-input-border-radius));
    font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
    padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
    padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px))
}

.ios .searchbar input[type=search],
.ios .searchbar input[type=text] {
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--f7-glass-shadow);
    z-index: 30
}

.ios .searchbar .input-clear-button {
    right: 16px;
    z-index: 40
}

.ios .searchbar-icon {
    height: 13px;
    left: 16px;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 13px;
    z-index: 40
}

.ios .searchbar-icon:after {
    content: "search_ios";
    line-height: 13px
}

.ios .searchbar-disable-button {
    align-items: center;
    backdrop-filter: saturate(180%) blur(16px);
    background-color: var(--f7-searchbar-input-bg-color);
    border-radius: 44px;
    box-shadow: var(--f7-glass-shadow);
    color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
    display: none;
    flex-shrink: 0;
    font-size: 17px;
    height: var(--f7-searchbar-height);
    justify-content: center;
    padding: 0 12px;
    transform: translateZ(0);
    transform: scale(0);
    transition-duration: .3s
}

.ios .searchbar-disable-button.active-state {
    opacity: .3 !important;
    transition-duration: 0s
}

.ios .searchbar-enabled .searchbar-disable-button {
    margin-left: 16px;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1)
}

.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
    transition-duration: .3s !important
}

.ios .searchbar-input-wrap {
    border-radius: var(--f7-searchbar-input-border-radius)
}

.ios .searchbar-expandable {
    bottom: 0;
    height: var(--f7-searchbar-expandable-size);
    left: 0;
    pointer-events: none;
    transform: translateZ(0);
    width: 100%
}

.ios .searchbar-expandable .searchbar-disable-button {
    display: flex;
    margin-left: 16px;
    opacity: 1
}

.ios .searchbar-expandable .searchbar-inner {
    height: var(--f7-searchbar-expandable-size);
    left: 16px;
    right: 16px;
    width: auto
}

.ios .searchbar-expandable .searchbar-input-wrap {
    transform: scale(0);
    transition-duration: .3s
}

.ios .navbar.with-searchbar-expandable-closing .navbar-bg,
.ios .navbar.with-searchbar-expandable-enabled .navbar-bg {
    transition-property: transform, opacity
}

.ios .navbar.with-searchbar-expandable-closing .left,
.ios .navbar.with-searchbar-expandable-closing .navbar-bg,
.ios .navbar.with-searchbar-expandable-closing .right,
.ios .navbar.with-searchbar-expandable-closing .title,
.ios .navbar.with-searchbar-expandable-enabled .left,
.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
.ios .navbar.with-searchbar-expandable-enabled .right,
.ios .navbar.with-searchbar-expandable-enabled .title {
    transition-duration: .3s
}

.ios .navbar.with-searchbar-expandable-enabled .left,
.ios .navbar.with-searchbar-expandable-enabled .right,
.ios .navbar.with-searchbar-expandable-enabled .title,
.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,
.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,
.ios .navbar.with-searchbar-expandable-enabled-no-transition .title {
    opacity: 0 !important;
    transform: translateY(calc(var(--f7-navbar-height)*-1))
}

.ios .searchbar-expandable.searchbar-enabled {
    height: var(--f7-searchbar-expandable-size);
    pointer-events: auto
}

.ios .searchbar-expandable.searchbar-enabled .searchbar-input-wrap {
    transform: scale(1)
}

.md .searchbar-disable-button,
.md .searchbar-icon {
    position: absolute;
    top: 50%;
    transition-duration: .3s
}

.md .searchbar-disable-button .icon-close {
    display: none
}

.md .searchbar-icon {
    align-items: center;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 0;
    left: var(--f7-safe-area-left);
    top: 0;
    width: 48px
}

.md .searchbar-icon:after {
    content: "search_md";
    height: auto;
    line-height: 1.2;
    width: auto
}

.md .searchbar-disable-button {
    color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
    display: block;
    font-size: 0 !important;
    height: 48px;
    left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
    margin-top: -24px;
    transform: rotate(-90deg) scale(.5);
    width: 48px
}

.md .searchbar-disable-button:after {
    font-family: framework7-core-icons;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    content: "arrow_left_md";
    display: block;
    font-feature-settings: "liga";
    font-size: 20px;
    height: 100%;
    line-height: 48px;
    text-align: center;
    width: 100%
}

.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(0deg) scale(1)
}

.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
    opacity: 0;
    transform: rotate(90deg) scale(.5)
}

.md .searchbar {
    --f7-searchbar-input-extra-padding-left: 34px
}

.md .searchbar .input-clear-button {
    height: 48px;
    margin-top: -24px;
    right: 0;
    width: 48px
}

.md .searchbar .input-clear-button:after {
    content: "delete_round_md";
    line-height: 48px;
    opacity: 1
}

.md .searchbar .input-clear-button:before {
    display: none
}

.md .searchbar-inline {
    --f7-searchbar-input-extra-padding-left: 32px
}

.md .page>.searchbar,
.md .searchbar-expandable,
.md .subnavbar .searchbar {
    --f7-searchbar-input-extra-padding-left: 34px
}

.md .page>.searchbar .searchbar-disable-button,
.md .searchbar-expandable .searchbar-disable-button,
.md .subnavbar .searchbar .searchbar-disable-button {
    left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))
}

.md .page>.searchbar .searchbar-icon,
.md .searchbar-expandable .searchbar-icon,
.md .subnavbar .searchbar .searchbar-icon {
    left: var(--f7-safe-area-left)
}

.md .searchbar-expandable {
    --f7-searchbar-inner-padding-left: 4px;
    --f7-searchbar-inner-padding-right: 4px;
    background-color: var(--f7-searchbar-input-bg-color);
    border-radius: calc(var(--f7-searchbar-expandable-size));
    bottom: 0;
    height: var(--f7-searchbar-expandable-size);
    left: 100%;
    margin-left: calc(var(--f7-searchbar-expandable-size)*-1);
    margin-top: calc(var(--f7-searchbar-expandable-size)*-1/2);
    opacity: 0;
    transform: translateZ(0);
    width: calc(var(--f7-searchbar-expandable-size))
}

.md .searchbar-expandable.searchbar-enabled {
    border-radius: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 1;
    pointer-events: auto;
    width: 100%
}


.ios button.text-editor-button {
    transition: opacity .3s
}

.ios button.text-editor-button.active-state {
    opacity: .3;
    transition-duration: 0s
}

.md button.text-editor-button {
    --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25)
}

.md .text-editor-keyboard-toolbar .toolbar-inner {
    padding-left: 8px;
    padding-right: 8px
}



:root {
    --f7-typography-padding: 16px;
    --f7-typography-margin: 16px
}

.display-flex {
    display: flex !important
}

.display-block {
    display: block !important
}

.display-inline-flex {
    display: inline-flex !important
}

.display-inline-block {
    display: inline-block !important
}

.display-inline {
    display: inline !important
}

.display-none {
    display: none !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.flex-shrink-1 {
    flex-shrink: 1 !important
}

.flex-shrink-2 {
    flex-shrink: 2 !important
}

.flex-shrink-3 {
    flex-shrink: 3 !important
}

.flex-shrink-4 {
    flex-shrink: 4 !important
}

.flex-shrink-5 {
    flex-shrink: 5 !important
}

.flex-shrink-6 {
    flex-shrink: 6 !important
}

.flex-shrink-7 {
    flex-shrink: 7 !important
}

.flex-shrink-8 {
    flex-shrink: 8 !important
}

.flex-shrink-9 {
    flex-shrink: 9 !important
}

.flex-shrink-10 {
    flex-shrink: 10 !important
}

.flex-direction-row {
    flex-direction: row !important
}

.flex-direction-row-reverse {
    flex-direction: row-reverse !important
}

.flex-direction-column {
    flex-direction: column !important
}

.flex-direction-column-reverse {
    flex-direction: column-reverse !important
}

.justify-content-flex-start {
    justify-content: flex-start !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-flex-end {
    justify-content: flex-end !important
}

.justify-content-space-between {
    justify-content: space-between !important
}

.justify-content-space-around {
    justify-content: space-around !important
}

.justify-content-space-evenly {
    justify-content: space-evenly !important
}

.justify-content-stretch {
    justify-content: stretch !important
}

.justify-content-start {
    justify-content: start !important
}

.justify-content-end {
    justify-content: end !important
}

.justify-content-left {
    justify-content: left !important
}

.justify-content-right {
    justify-content: right !important
}

.align-content-flex-start {
    align-content: flex-start !important
}

.align-content-flex-end {
    align-content: flex-end !important
}

.align-content-center {
    align-content: center !important
}

.align-content-space-between {
    align-content: space-between !important
}

.align-content-space-around {
    align-content: space-around !important
}

.align-content-stretch {
    align-content: stretch !important
}

.align-items-baseline {
    align-items: baseline !important
}

.align-items-flex-start {
    align-items: flex-start !important
}

.align-items-flex-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-items-stretch {
    align-items: stretch !important
}

.align-self-flex-start {
    align-self: flex-start !important
}

.align-self-flex-end {
    align-self: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.align-self-stretch {
    align-self: stretch !important
}

.text-align-left {
    text-align: left !important
}

.text-align-center {
    text-align: center !important
}

.text-align-right {
    text-align: right !important
}

.text-align-justify {
    text-align: justify !important
}

.float-left {
    float: left !important
}

.float-right {
    float: right !important
}

.float-none {
    float: none !important
}

.vertical-align-bottom {
    vertical-align: bottom !important
}

.vertical-align-middle {
    vertical-align: middle !important
}

.vertical-align-top {
    vertical-align: top !important
}

.no-padding {
    padding: 0 !important
}

.no-padding-left {
    padding-left: 0 !important
}

.no-padding-horizontal,
.no-padding-right {
    padding-right: 0 !important
}

.no-padding-horizontal {
    padding-left: 0 !important
}

.no-padding-top {
    padding-top: 0 !important
}

.no-padding-bottom,
.no-padding-vertical {
    padding-bottom: 0 !important
}

.no-padding-vertical {
    padding-top: 0 !important
}

.no-margin {
    margin: 0 !important
}

.no-margin-left {
    margin-left: 0 !important
}

.no-margin-horizontal,
.no-margin-right {
    margin-right: 0 !important
}

.no-margin-horizontal {
    margin-left: 0 !important
}

.no-margin-top {
    margin-top: 0 !important
}

.no-margin-bottom,
.no-margin-vertical {
    margin-bottom: 0 !important
}

.no-margin-vertical {
    margin-top: 0 !important
}

.width-auto {
    width: auto !important
}

.width-100 {
    width: 100% !important
}

.padding {
    padding: var(--f7-typography-padding) !important
}

.padding-half {
    padding: calc(var(--f7-typography-padding)/2) !important
}

.padding-top {
    padding-top: var(--f7-typography-padding) !important
}

.padding-top-half {
    padding-top: calc(var(--f7-typography-padding)/2) !important
}

.padding-bottom {
    padding-bottom: var(--f7-typography-padding) !important
}

.padding-bottom-half {
    padding-bottom: calc(var(--f7-typography-padding)/2) !important
}

.padding-left {
    padding-left: var(--f7-typography-padding) !important
}

.padding-left-half {
    padding-left: calc(var(--f7-typography-padding)/2) !important
}

.padding-right {
    padding-right: var(--f7-typography-padding) !important
}

.padding-right-half {
    padding-right: calc(var(--f7-typography-padding)/2) !important
}

.padding-vertical {
    padding-bottom: var(--f7-typography-padding) !important;
    padding-top: var(--f7-typography-padding) !important
}

.padding-vertical-half {
    padding-bottom: calc(var(--f7-typography-padding)/2) !important;
    padding-top: calc(var(--f7-typography-padding)/2) !important
}

.padding-horizontal {
    padding-left: var(--f7-typography-padding) !important;
    padding-right: var(--f7-typography-padding) !important
}

.padding-horizontal-half {
    padding-left: calc(var(--f7-typography-padding)/2) !important;
    padding-right: calc(var(--f7-typography-padding)/2) !important
}

.margin {
    margin: var(--f7-typography-margin) !important
}

.margin-half {
    margin: calc(var(--f7-typography-margin)/2) !important
}

.margin-top {
    margin-top: var(--f7-typography-margin) !important
}

.margin-top-half {
    margin-top: calc(var(--f7-typography-margin)/2) !important
}

.margin-bottom {
    margin-bottom: var(--f7-typography-margin) !important
}

.margin-bottom-half {
    margin-bottom: calc(var(--f7-typography-margin)/2) !important
}

.margin-left {
    margin-left: var(--f7-typography-margin) !important
}

.margin-left-half {
    margin-left: calc(var(--f7-typography-margin)/2) !important
}

.margin-right {
    margin-right: var(--f7-typography-margin) !important
}

.margin-right-half {
    margin-right: calc(var(--f7-typography-margin)/2) !important
}

.margin-vertical {
    margin-bottom: var(--f7-typography-margin) !important;
    margin-top: var(--f7-typography-margin) !important
}

.margin-vertical-half {
    margin-bottom: calc(var(--f7-typography-margin)/2) !important;
    margin-top: calc(var(--f7-typography-margin)/2) !important
}

.margin-horizontal {
    margin-left: var(--f7-typography-margin) !important;
    margin-right: var(--f7-typography-margin) !important
}

.margin-horizontal-half {
    margin-left: calc(var(--f7-typography-margin)/2) !important;
    margin-right: calc(var(--f7-typography-margin)/2) !important
}

[class*=text-color-] {
    color: var(--f7-theme-color-text-color) !important
}

[class*=bg-color-] {
    background-color: var(--f7-theme-color-bg-color) !important
}

[class*=border-color-] {
    border-color: var(--f7-theme-color-border-color) !important
}