/* Framework7 9.2.0 selected component styles, MIT.
 * Copyright 2014-2026 Vladimir Kharlampidi. See LICENSE.
 * Original styles from official npm package, adapted only by selector scoping.
 * No global document reset, router/page layout, or push-view rules included.
 * Scope: add class f7-preview-ui to component containers, not body.
 */
/* safe-area/font/glass variables */
:where(.f7-preview-ui){
  --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)){:where(.f7-preview-ui){
    --f7-safe-area-top: env(safe-area-inset-top);
    --f7-safe-area-bottom: env(safe-area-inset-bottom);
  }
:where(.f7-preview-ui) .ios-left-edge,
:where(.f7-preview-ui) .ios-edges,
:where(.f7-preview-ui) .safe-area-left,
:where(.f7-preview-ui) .safe-areas,
:where(.f7-preview-ui) .popup,
:where(.f7-preview-ui) .sheet-modal,
:where(.f7-preview-ui) .panel-left{
    --f7-safe-area-left: env(safe-area-inset-left);
    --f7-safe-area-outer-left: env(safe-area-inset-left);
  }
:where(.f7-preview-ui) .ios-right-edge,
:where(.f7-preview-ui) .ios-edges,
:where(.f7-preview-ui) .safe-area-right,
:where(.f7-preview-ui) .safe-areas,
:where(.f7-preview-ui) .popup,
:where(.f7-preview-ui) .sheet-modal,
:where(.f7-preview-ui) .panel-right{
    --f7-safe-area-right: env(safe-area-inset-right);
    --f7-safe-area-outer-right: env(safe-area-inset-right);
  }
:where(.f7-preview-ui) .no-safe-areas,
:where(.f7-preview-ui) .no-safe-area-left,
:where(.f7-preview-ui) .no-ios-edges,
:where(.f7-preview-ui) .no-ios-left-edge{
    --f7-safe-area-left: 0px;
    --f7-safe-area-outer-left: 0px;
  }
:where(.f7-preview-ui) .no-safe-areas,
:where(.f7-preview-ui) .no-safe-area-right,
:where(.f7-preview-ui) .no-ios-edges,
:where(.f7-preview-ui) .no-ios-right-edge{
    --f7-safe-area-right: 0px;
    --f7-safe-area-outer-right: 0px;
  }}
@media (min-resolution: 2dppx){:where(.f7-preview-ui){
    --f7-device-pixel-ratio: 2;
  }}
@media (min-resolution: 3dppx){:where(.f7-preview-ui){
    --f7-device-pixel-ratio: 3;
  }}
:where(.f7-preview-ui){
  --f7-font-size: 14px;
  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
}
html.ios :where(.f7-preview-ui){
  --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: transparent;
  
  --f7-glass-bg-color: rgba(255, 255, 255, 0.75);
  --f7-glass-shadow: inset -1px -1px 0px -0.5px #ffffff, inset 1px 1px 0px -0.5px #ffffff, inset 3px 3px 10px -3px #ddd, inset -3px -3px 10px -3px #ddd, inset 0 0 5px 1px #fff, inset 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 0 24px 0 rgba(0, 0, 0, 0.1), 0 0 25px 0 rgba(0, 0, 0, 0.2);
  --f7-glass-shadow-thumb: inset -3px -3px 0px -3.5px #ffffff, inset 3px 3px 0px -3.5px #ffffff, inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5), 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;
}
html.ios :where(.f7-preview-ui) .dark,
html.ios.dark :where(.f7-preview-ui){
  --f7-glass-bg-color: rgba(50, 50, 50, 0.5);
  --f7-glass-shadow: inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4), inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4), 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 rgba(255, 255, 255, 0.15), inset 0 0 10px 0 rgba(255, 255, 255, 0.075), inset 0 0 24px 0 rgba(255, 255, 255, 0.05), 0 0 25px 0 rgba(0, 0, 0, 0.15);
  --f7-glass-shadow-thumb: inset 3px 3px 0px -3.5px #ffffff, inset -3px -3px 0px -3.5px #ffffff, inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5), inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1), inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25), inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25), inset 0px -5px 5px rgba(255, 255, 255, 0.25);
  --f7-bars-text-color: #fff;
  --f7-text-color: #fff;
  --f7-bars-bg-color: rgba(0, 0, 0, 0.5);
}
html.md :where(.f7-preview-ui){
  --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-bars-border-color: transparent;
  --f7-text-color: #212121;
}
html.md :where(.f7-preview-ui) .dark,
html.md.dark :where(.f7-preview-ui){
  --f7-text-color: rgba(255, 255, 255, 0.87);
}
html.md :where(.f7-preview-ui),
html.md :where(.f7-preview-ui) .dark,
html.md :where(.f7-preview-ui) [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);
}
/* button and segmented styles */
:where(.f7-preview-ui){
  --f7-button-min-width: 32px;
  --f7-button-bg-color: transparent;
  --f7-button-border-width: 0px;
  
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
  --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 rgba(0, 0, 0, 0.25);
  --f7-segmented-strong-button-text-color: #000;
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
  --f7-segmented-strong-button-active-text-color: #000;
  --f7-segmented-strong-button-active-bg-color: #fff;
}
:where(.f7-preview-ui) .dark,
:where(.f7-preview-ui).dark{
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
  --f7-segmented-strong-button-text-color: #fff;
  --f7-segmented-strong-button-active-text-color: #fff;
}
html.ios :where(.f7-preview-ui){
  --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-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
}
html.ios :where(.f7-preview-ui) .dark,
html.ios.dark :where(.f7-preview-ui){
  --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
}
html.ios :where(.f7-preview-ui),
html.ios :where(.f7-preview-ui) .dark,
html.ios :where(.f7-preview-ui) [class*='color-']{
  --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);
}
html.md :where(.f7-preview-ui){
  --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: transparent;
}
html.md :where(.f7-preview-ui),
html.md :where(.f7-preview-ui) .dark,
html.md :where(.f7-preview-ui) [class*='color-']{
  --f7-button-fill-pressed-bg-color: transparent;
  --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: transparent;
  --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
}
:where(.f7-preview-ui) button{
  appearance: none;
  width: 100%;
}
:where(.f7-preview-ui) .button{
  --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
  text-decoration: none;
  text-align: center;
  display: flex;
  appearance: none;
  background: none;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  cursor: pointer;
  outline: 0;
  box-sizing: border-box;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
  font-size: var(--f7-button-font-size);
  color: var(--f7-button-text-color, var(--f7-theme-color));
  height: var(--f7-button-height);
  line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
  padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
  border-radius: var(--f7-button-border-radius);
  min-width: var(--f7-button-min-width);
  font-weight: var(--f7-button-font-weight);
  letter-spacing: var(--f7-button-letter-spacing);
  text-transform: var(--f7-button-text-transform);
  background-color: var(--f7-button-bg-color);
  box-shadow: var(--f7-button-box-shadow);
}
:where(.f7-preview-ui) .button.active-state{
  color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
}
:where(.f7-preview-ui) input[type='submit'].button,
:where(.f7-preview-ui) input[type='button'].button,
:where(.f7-preview-ui) input[type='reset'].button{
  width: 100%;
}
:where(.f7-preview-ui) .button > i + span,
:where(.f7-preview-ui) .button > span + span,
:where(.f7-preview-ui) .button > span ~ i{
  margin-left: 4px;
}
:where(.f7-preview-ui) .subnavbar .button,
:where(.f7-preview-ui) .navbar .button,
:where(.f7-preview-ui) .toolbar .button,
:where(.f7-preview-ui) .searchbar .button{
  color: var(--f7-button-text-color, var(--f7-theme-color));
}
:where(.f7-preview-ui) .button-round,
html.ios :where(.f7-preview-ui) .button-round-ios,
html.md :where(.f7-preview-ui) .button-round-md{
  --f7-button-border-radius: var(--f7-button-height);
}
:where(.f7-preview-ui) .button-fill,
html.ios :where(.f7-preview-ui) .button-fill-ios,
html.md :where(.f7-preview-ui) .button-fill-md,
:where(.f7-preview-ui) .button-active,
:where(.f7-preview-ui) .button.tab-link-active{
  --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);
}
html.ios :where(.f7-preview-ui) .color-white .button-fill,
html.ios :where(.f7-preview-ui) .color-white .ios .button-fill-ios,
html.ios :where(.f7-preview-ui) .color-white .md .button-fill-md,
html.ios :where(.f7-preview-ui) .color-white .button-active,
html.ios :where(.f7-preview-ui) .color-white .button.tab-link-active,
html.ios :where(.f7-preview-ui) .button-fill.color-white,
html.ios :where(.f7-preview-ui) .ios .button-fill-ios.color-white,
html.ios :where(.f7-preview-ui) .md .button-fill-md.color-white,
html.ios :where(.f7-preview-ui) .button-active.color-white,
html.ios :where(.f7-preview-ui) .button.tab-link-active.color-white{
  --f7-button-text-color: #000;
}
:where(.f7-preview-ui) .button-fill,
html.ios :where(.f7-preview-ui) .button-fill-ios,
html.md :where(.f7-preview-ui) .button-fill-md{
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
}
:where(.f7-preview-ui) .button-active,
:where(.f7-preview-ui) .button.tab-link-active{
  --f7-button-pressed-bg-color: var(--f7-button-bg-color);
}
:where(.f7-preview-ui) .button-outline,
html.ios :where(.f7-preview-ui) .button-outline-ios,
html.md :where(.f7-preview-ui) .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);
}
:where(.f7-preview-ui) .button-tonal,
html.ios :where(.f7-preview-ui) .button-tonal-ios,
html.md :where(.f7-preview-ui) .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);
}
:where(.f7-preview-ui) .button-large,
html.ios :where(.f7-preview-ui) .button-large-ios,
html.md :where(.f7-preview-ui) .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);
}
:where(.f7-preview-ui) .button-small,
html.ios :where(.f7-preview-ui) .button-small-ios,
html.md :where(.f7-preview-ui) .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);
}
html.ios :where(.f7-preview-ui) .button-small.button-fill,
html.ios :where(.f7-preview-ui) .button-small-ios.button-fill,
html.ios :where(.f7-preview-ui) .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: transparent;
}
:where(.f7-preview-ui) .segmented{
  align-self: center;
  display: flex;
  flex-wrap: nowrap;
  border-radius: var(--f7-button-border-radius);
  box-shadow: var(--f7-button-box-shadow);
  box-sizing: border-box;
}
:where(.f7-preview-ui) .segmented .button,
:where(.f7-preview-ui) .segmented button{
  width: 100%;
  flex-shrink: 1;
  min-width: 0;
  border-radius: 0;
}
:where(.f7-preview-ui) .segmented .button:first-child{
  border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
}
:where(.f7-preview-ui) .segmented .button:not(.button-outline):first-child{
  border-left: none;
}
:where(.f7-preview-ui) .segmented .button.button-outline:nth-child(n + 2){
  border-left: none;
}
:where(.f7-preview-ui) .segmented .button:last-child{
  border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
}
:where(.f7-preview-ui) .segmented .button-round:first-child{
  border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
}
:where(.f7-preview-ui) .segmented .button-round:last-child{
  border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
}
:where(.f7-preview-ui) .segmented .button:first-child:last-child{
  border-radius: var(--f7-button-border-radius);
}
:where(.f7-preview-ui) .segmented-raised,
html.ios :where(.f7-preview-ui) .segmented-raised-ios,
html.md :where(.f7-preview-ui) .segmented-raised-md{
  box-shadow: var(--f7-button-raised-box-shadow);
}
:where(.f7-preview-ui) .segmented-raised .button:not(.button-outline),
html.ios :where(.f7-preview-ui) .segmented-raised-ios .button:not(.button-outline),
html.md :where(.f7-preview-ui) .segmented-raised-md .button:not(.button-outline){
  border-left: 1px solid var(--f7-segmented-raised-divider-color);
}
:where(.f7-preview-ui) .button-raised,
html.ios :where(.f7-preview-ui) .button-raised-ios,
html.md :where(.f7-preview-ui) .button-raised-md{
  --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
}
:where(.f7-preview-ui) .button-raised.active-state,
html.ios :where(.f7-preview-ui) .button-raised-ios.active-state,
html.md :where(.f7-preview-ui) .button-raised-md.active-state{
  --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
}
:where(.f7-preview-ui) .segmented-strong,
html.ios :where(.f7-preview-ui) .segmented-strong-ios,
html.md :where(.f7-preview-ui) .segmented-strong-md{
  --f7-button-bg-color: transparent;
  --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);
  position: relative;
  background: var(--f7-segmented-strong-bg-color);
  border-radius: calc(var(--f7-button-border-radius) + 2px);
  box-shadow: none;
  padding: var(--f7-segmented-strong-padding);
  overflow: hidden;
}
:where(.f7-preview-ui) .segmented-strong .button,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button,
html.md :where(.f7-preview-ui) .segmented-strong-md .button{
  z-index: 1;
  transform: translate3d(0, 0, 0);
}
:where(.f7-preview-ui) .segmented-strong .button,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button,
html.md :where(.f7-preview-ui) .segmented-strong-md .button,
:where(.f7-preview-ui) .segmented-strong .button:first-child,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button:first-child,
html.md :where(.f7-preview-ui) .segmented-strong-md .button:first-child,
:where(.f7-preview-ui) .segmented-strong .button:last-child,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button:last-child,
html.md :where(.f7-preview-ui) .segmented-strong-md .button:last-child{
  border-radius: var(--f7-button-border-radius);
}
:where(.f7-preview-ui) .segmented-strong .button + .button,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button + .button,
html.md :where(.f7-preview-ui) .segmented-strong-md .button + .button{
  margin-left: var(--f7-segmented-strong-between-buttons);
}
:where(.f7-preview-ui) .segmented-strong .button.button-active,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button.button-active,
html.md :where(.f7-preview-ui) .segmented-strong-md .button.button-active,
:where(.f7-preview-ui) .segmented-strong .button.tab-link-active,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .button.tab-link-active,
html.md :where(.f7-preview-ui) .segmented-strong-md .button.tab-link-active{
  --f7-button-hover-bg-color: transparent;
  --f7-button-bg-color: transparent;
  --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
  --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
}
:where(.f7-preview-ui) .segmented-strong .segmented-highlight,
html.ios :where(.f7-preview-ui) .segmented-strong-ios .segmented-highlight,
html.md :where(.f7-preview-ui) .segmented-strong-md .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));
  position: absolute;
  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);
  left: var(--f7-segmented-strong-padding);
  top: var(--f7-segmented-strong-padding);
  height: calc(100% - var(--f7-segmented-strong-padding) * 2);
  width: var(--f7-segmented-highlight-width);
  z-index: 0;
  transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
  transition: 200ms;
}
:where(.f7-preview-ui) .button:nth-child(2) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 2;
}
:where(.f7-preview-ui) .button:nth-child(3) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 3;
}
:where(.f7-preview-ui) .button:nth-child(4) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 4;
}
:where(.f7-preview-ui) .button:nth-child(5) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 5;
}
:where(.f7-preview-ui) .button:nth-child(6) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 6;
}
:where(.f7-preview-ui) .button:nth-child(7) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 7;
}
:where(.f7-preview-ui) .button:nth-child(8) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 8;
}
:where(.f7-preview-ui) .button:nth-child(9) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 9;
}
:where(.f7-preview-ui) .button:nth-child(10) ~ .segmented-highlight{
  --f7-segmented-highlight-num: 10;
}
:where(.f7-preview-ui) .button-active:nth-child(2) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(2) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 1;
}
:where(.f7-preview-ui) .button-active:nth-child(3) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(3) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 2;
}
:where(.f7-preview-ui) .button-active:nth-child(4) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(4) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 3;
}
:where(.f7-preview-ui) .button-active:nth-child(5) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(5) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 4;
}
:where(.f7-preview-ui) .button-active:nth-child(6) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(6) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 5;
}
:where(.f7-preview-ui) .button-active:nth-child(7) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(7) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 6;
}
:where(.f7-preview-ui) .button-active:nth-child(8) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(8) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 7;
}
:where(.f7-preview-ui) .button-active:nth-child(9) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(9) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 8;
}
:where(.f7-preview-ui) .button-active:nth-child(10) ~ .segmented-highlight,
:where(.f7-preview-ui) .tab-link-active:nth-child(10) ~ .segmented-highlight{
  --f7-segmented-highlight-active: 9;
}
:where(.f7-preview-ui) .segmented-round,
html.ios :where(.f7-preview-ui) .segmented-round-ios,
html.md :where(.f7-preview-ui) .segmented-round-md{
  border-radius: var(--f7-button-height);
}
:where(.f7-preview-ui) .segmented-round .segmented-highlight,
html.ios :where(.f7-preview-ui) .segmented-round-ios .segmented-highlight,
html.md :where(.f7-preview-ui) .segmented-round-md .segmented-highlight{
  border-radius: var(--f7-button-height);
}
:where(.f7-preview-ui) .subnavbar .segmented{
  width: 100%;
}
:where(.f7-preview-ui) .button-preloader{
  position: relative;
  --f7-preloader-color: var(--f7-button-text-color, var(--f7-theme-color));
}
:where(.f7-preview-ui) .button-preloader:not(.button-large){
  --f7-preloader-size: calc(var(--f7-button-height) - 6px);
}
:where(.f7-preview-ui) .button-preloader.button-fill{
  --f7-preloader-color: #fff;
}
:where(.f7-preview-ui) .button-preloader > span:not(.preloader){
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  transform: scale(1);
}
:where(.f7-preview-ui) .button-preloader > .preloader{
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.2s;
  transition-property: opacity;
  opacity: 0;
  visibility: hidden;
  margin-left: calc(-1 * var(--f7-preloader-size) / 2);
  margin-top: calc(-1 * var(--f7-preloader-size) / 2);
}
:where(.f7-preview-ui) .button-preloader.button-loading > span:not(.preloader){
  opacity: 0;
  transform: scale(0);
}
:where(.f7-preview-ui) .button-preloader.button-loading > .preloader{
  opacity: 1;
  visibility: visible;
}
html.ios :where(.f7-preview-ui) .button{
  transition-duration: 100ms;
}
html.ios :where(.f7-preview-ui) .button.active-state{
  background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
}
html.ios :where(.f7-preview-ui) .button-fill,
html.ios :where(.f7-preview-ui) .button-fill-ios{
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
}
html.ios :where(.f7-preview-ui) .button-small,
html.ios :where(.f7-preview-ui) .button-small-ios{
  transition-duration: 200ms;
}
html.md :where(.f7-preview-ui) .button{
  transition-duration: 300ms;
  transform: translate3d(0, 0, 0);
}
html.md :where(.f7-preview-ui) .button-fill,
html.md :where(.f7-preview-ui) .button-fill-md{
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, transparent);
}
/* modal backdrop styles */
:where(.f7-preview-ui) .custom-modal-backdrop{
  z-index: 10500;
}
:where(.f7-preview-ui) .custom-modal-backdrop,
:where(.f7-preview-ui) .actions-backdrop,
:where(.f7-preview-ui) .dialog-backdrop,
:where(.f7-preview-ui) .popover-backdrop,
:where(.f7-preview-ui) .popup-backdrop,
:where(.f7-preview-ui) .preloader-backdrop,
:where(.f7-preview-ui) .sheet-backdrop,
:where(.f7-preview-ui) .fab-backdrop{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 13000;
  visibility: hidden;
  opacity: 0;
  transition-duration: 400ms;
}
:where(.f7-preview-ui) .custom-modal-backdrop.not-animated,
:where(.f7-preview-ui) .actions-backdrop.not-animated,
:where(.f7-preview-ui) .dialog-backdrop.not-animated,
:where(.f7-preview-ui) .popover-backdrop.not-animated,
:where(.f7-preview-ui) .popup-backdrop.not-animated,
:where(.f7-preview-ui) .preloader-backdrop.not-animated,
:where(.f7-preview-ui) .sheet-backdrop.not-animated,
:where(.f7-preview-ui) .fab-backdrop.not-animated{
  transition-duration: 0ms;
}
:where(.f7-preview-ui) .custom-modal-backdrop.backdrop-in,
:where(.f7-preview-ui) .actions-backdrop.backdrop-in,
:where(.f7-preview-ui) .dialog-backdrop.backdrop-in,
:where(.f7-preview-ui) .popover-backdrop.backdrop-in,
:where(.f7-preview-ui) .popup-backdrop.backdrop-in,
:where(.f7-preview-ui) .preloader-backdrop.backdrop-in,
:where(.f7-preview-ui) .sheet-backdrop.backdrop-in,
:where(.f7-preview-ui) .fab-backdrop.backdrop-in{
  visibility: visible;
  opacity: 1;
}
/* sheet */
:where(.f7-preview-ui){--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}
html.ios :where(.f7-preview-ui){--f7-sheet-border-radius:32px;--f7-sheet-border-color:#0000;--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:32px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:var(--f7-glass-bg-color)}
html.md :where(.f7-preview-ui){--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:#0000;--f7-sheet-transition-timing-function:cubic-bezier(0,0.8,0.34,1);--f7-sheet-transition-duration:400ms}
html.md :where(.f7-preview-ui),
html.md :where(.f7-preview-ui) .dark,
html.md :where(.f7-preview-ui) [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}
:where(.f7-preview-ui) .sheet-backdrop{z-index:11000}
:where(.f7-preview-ui) .sheet-backdrop-unique,
:where(.f7-preview-ui) .sheet-modal{z-index:12500}
:where(.f7-preview-ui) .sheet-modal{background:var(--f7-sheet-bg-color);bottom:0;box-sizing:border-box;display:none;height:var(--f7-sheet-height);left:0;overflow:hidden;position:absolute;transform:translate3d(0,100%,0);transition-property:transform;width:100%;will-change:transform,opacity}
:where(.f7-preview-ui) .sheet-modal.modal-in,
:where(.f7-preview-ui) .sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}
:where(.f7-preview-ui) .sheet-modal.not-animated{transition-duration:0s}
:where(.f7-preview-ui) .sheet-modal.modal-in{display:block;transform:translateZ(0)}
:where(.f7-preview-ui) .sheet-modal.modal-in-breakpoint,
:where(.f7-preview-ui) .sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}
:where(.f7-preview-ui) .sheet-modal.modal-out{transform:translate3d(0,100%,0)}
:where(.f7-preview-ui) .sheet-modal .sheet-modal-inner{height:100%;overflow:hidden;position:relative}
:where(.f7-preview-ui) .sheet-modal .toolbar{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}
:where(.f7-preview-ui) .sheet-backdrop,
:where(.f7-preview-ui) .sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}
:where(.f7-preview-ui) .sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}
:where(.f7-preview-ui) .sheet-modal-top:after{backface-visibility:hidden;background-color:var(--f7-sheet-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%;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}
:where(.f7-preview-ui) .sheet-modal-bottom,
:where(.f7-preview-ui) .sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}
:where(.f7-preview-ui) .sheet-modal-bottom:before,
:where(.f7-preview-ui) .sheet-modal:not(.sheet-modal-top):before{backface-visibility:hidden;background-color:var(--f7-sheet-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;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}
:where(.f7-preview-ui) .sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0}
:where(.f7-preview-ui) .sheet-modal-top,
:where(.f7-preview-ui) .sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}
:where(.f7-preview-ui) .sheet-modal-top .toolbar-bottom{position:absolute}
:where(.f7-preview-ui) .sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}
@keyframes sheet-dark-push-overlay-fade-in{0%{opacity:0}to{opacity:1}}
html.ios :where(.f7-preview-ui) .sheet-modal{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}
html.ios :where(.f7-preview-ui) .sheet-modal .toolbar{position:absolute}
html.ios:not(.device-ios) :where(.f7-preview-ui) .sheet-modal .toolbar:before{display:none}
html.md :where(.f7-preview-ui) .sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}
html.md :where(.f7-preview-ui) .sheet-modal .toolbar:after,
html.md :where(.f7-preview-ui) .sheet-modal .toolbar:before{display:none}
html.md :where(.f7-preview-ui) .sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}
html.md :where(.f7-preview-ui) .sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}
html.md :where(.f7-preview-ui) .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}
/* messages */
:where(.f7-preview-ui){--f7-message-text-header-opacity:0.65;--f7-message-text-header-font-size:12px;--f7-message-text-footer-opacity:0.65;--f7-message-text-footer-font-size:12px;--f7-message-bubble-line-height:1.2;--f7-message-header-font-size:12px;--f7-message-footer-font-size:11px;--f7-message-name-font-size:12px;--f7-message-name-font-weight:inherit;--f7-message-avatar-border-radius:50%;--f7-messages-title-font-weight:inherit;--f7-message-typing-indicator-bg-color:#000}
:where(.f7-preview-ui) .dark,
:where(.f7-preview-ui).dark{--f7-message-typing-indicator-bg-color:#fff}
html.ios :where(.f7-preview-ui){--f7-message-text-header-text-color:inherit;--f7-message-text-footer-text-color:inherit;--f7-messages-title-font-size:11px;--f7-message-avatar-size:29px;--f7-message-margin:16px;--f7-message-bubble-min-height:32px;--f7-message-bubble-font-size:17px;--f7-message-bubble-border-radius:16px;--f7-message-bubble-padding-vertical:6px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.35;--f7-message-sent-text-color:#fff;--f7-messages-content-bg-color:#fff;--f7-message-received-text-color:#000;--f7-message-received-bg-color:#e5e5ea;--f7-messages-title-text-color:#00000073;--f7-message-header-text-color:#00000073;--f7-message-footer-text-color:#00000073;--f7-message-name-text-color:#00000073}
html.ios :where(.f7-preview-ui) .dark,
html.ios.dark :where(.f7-preview-ui){--f7-message-received-bg-color:#252525;--f7-message-received-text-color:#fff;--f7-messages-content-bg-color:#0000;--f7-messages-title-text-color:#ffffff8a;--f7-message-header-text-color:#ffffff8a;--f7-message-name-text-color:#ffffff8a;--f7-message-footer-text-color:#ffffff8a}
html.md :where(.f7-preview-ui){--f7-messages-content-bg-color:#0000;--f7-messages-title-font-size:12px;--f7-message-avatar-size:32px;--f7-message-margin:16px;--f7-message-bubble-min-height:40px;--f7-message-bubble-font-size:16px;--f7-message-bubble-border-radius:20px;--f7-message-bubble-padding-vertical:10px;--f7-message-bubble-padding-horizontal:16px;--f7-message-typing-indicator-opacity:0.6}
html.md :where(.f7-preview-ui),
html.md :where(.f7-preview-ui) .dark,
html.md :where(.f7-preview-ui) [class*=color-]{--f7-message-sent-bg-color:var(--f7-md-primary);--f7-message-sent-text-color:var(--f7-md-on-primary);--f7-message-received-bg-color:var(--f7-md-surface-variant);--f7-message-received-text-color:var(--f7-md-on-surface);--f7-message-text-header-text-color:var(--f7-md-on-surface-variant);--f7-message-text-footer-text-color:var(--f7-md-on-surface-variant);--f7-messages-title-text-color:var(--f7-md-on-surface-variant);--f7-message-header-text-color:var(--f7-md-on-surface-variant);--f7-message-footer-text-color:var(--f7-md-on-surface-variant);--f7-message-name-text-color:var(--f7-md-on-surface-variant)}
:where(.f7-preview-ui) .messages,
:where(.f7-preview-ui) .messages-content{background:var(--f7-messages-content-bg-color)}
:where(.f7-preview-ui) .messages{display:flex;flex-direction:column;min-height:100%;position:relative;z-index:1}
:where(.f7-preview-ui) .message,
:where(.f7-preview-ui) .messages-title{margin-top:var(--f7-message-margin)}
:where(.f7-preview-ui) .message:last-child,
:where(.f7-preview-ui) .messages-title:last-child{margin-bottom:var(--f7-message-margin)}
:where(.f7-preview-ui) .messages-title{color:var(--f7-messages-title-text-color);font-size:var(--f7-messages-title-font-size);font-weight:var(--f7-messages-title-font-weight);line-height:1;text-align:center;width:100%}
:where(.f7-preview-ui) .message{align-items:flex-end;box-sizing:border-box;display:flex;max-width:70%;position:relative;transform:translateZ(0);z-index:1}
:where(.f7-preview-ui) .message-avatar{align-self:flex-end;background-size:cover;border-radius:var(--f7-message-avatar-border-radius);flex-shrink:0;height:var(--f7-message-avatar-size);position:relative;width:var(--f7-message-avatar-size)}
:where(.f7-preview-ui) .message-content{display:flex;flex-direction:column;position:relative}
:where(.f7-preview-ui) .message-footer,
:where(.f7-preview-ui) .message-header,
:where(.f7-preview-ui) .message-name{line-height:1}
:where(.f7-preview-ui) .message-header{color:var(--f7-message-header-text-color);font-size:var(--f7-message-header-font-size)}
:where(.f7-preview-ui) .message-footer{color:var(--f7-message-footer-text-color);font-size:var(--f7-message-footer-font-size);margin-bottom:-1em}
:where(.f7-preview-ui) .message-name{color:var(--f7-message-name-text-color);font-size:var(--f7-message-name-font-size);font-weight:var(--f7-message-name-font-weight)}
:where(.f7-preview-ui) .message-bubble{border-radius:var(--f7-message-bubble-border-radius);box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--f7-message-bubble-font-size);line-height:var(--f7-message-bubble-line-height);min-height:var(--f7-message-bubble-min-height);padding:var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);position:relative;word-break:break-word}
:where(.f7-preview-ui) .message-image img{display:block;height:auto;max-width:100%;width:auto}
:where(.f7-preview-ui) .message-text-footer,
:where(.f7-preview-ui) .message-text-header{line-height:1}
:where(.f7-preview-ui) .message-text-header{color:var(--f7-message-text-header-text-color);font-size:var(--f7-message-text-header-font-size);opacity:var(--f7-message-text-header-opacity)}
:where(.f7-preview-ui) .message-text-footer{color:var(--f7-message-text-footer-text-color);font-size:var(--f7-message-text-footer-font-size);opacity:var(--f7-message-text-footer-opacity)}
:where(.f7-preview-ui) .message-text{text-align:left}
:where(.f7-preview-ui) .message-sent{align-self:flex-end;flex-direction:row-reverse;text-align:right}
:where(.f7-preview-ui) .message-sent .message-bubble{background:var(--f7-message-sent-bg-color,var(--f7-theme-color));color:var(--f7-message-sent-text-color)}
:where(.f7-preview-ui) .message-sent .message-content{align-items:flex-end}
:where(.f7-preview-ui) .message-received{flex-direction:row}
:where(.f7-preview-ui) .message-received .message-bubble{background:var(--f7-message-received-bg-color);color:var(--f7-message-received-text-color)}
:where(.f7-preview-ui) .message-received .message-content{align-items:flex-start}
:where(.f7-preview-ui) .message:not(.message-last) .message-avatar{opacity:0}
:where(.f7-preview-ui) .message.message-same-footer .message-footer,
:where(.f7-preview-ui) .message.message-same-header .message-header,
:where(.f7-preview-ui) .message.message-same-name .message-name,
:where(.f7-preview-ui) .message:not(.message-first) .message-name{display:none}
:where(.f7-preview-ui) .message-appear-from-bottom{animation:message-appear-from-bottom .3s}
:where(.f7-preview-ui) .message-appear-from-top{animation:message-appear-from-top .3s}
:where(.f7-preview-ui) .message-typing-indicator{display:inline-block;font-size:0;vertical-align:middle}
:where(.f7-preview-ui) .message-typing-indicator>div{background:var(--f7-message-typing-indicator-bg-color);border-radius:50%;display:inline-block;opacity:var(--f7-message-typing-indicator-opacity);position:relative;vertical-align:middle}
@keyframes message-appear-from-bottom{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}
@keyframes message-appear-from-top{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(0)}}
html.ios :where(.f7-preview-ui) .messages{box-sizing:border-box;padding-bottom:16px}
html.ios :where(.f7-preview-ui) .message-footer b,
html.ios :where(.f7-preview-ui) .message-header b,
html.ios :where(.f7-preview-ui) .message-name b,
html.ios :where(.f7-preview-ui) .messages-title b{font-weight:600}
html.ios :where(.f7-preview-ui) .message-header,
html.ios :where(.f7-preview-ui) .message-name{margin-bottom:3px}
html.ios :where(.f7-preview-ui) .message-footer{margin-top:3px}
html.ios :where(.f7-preview-ui) .message-bubble{min-width:48px}
html.ios :where(.f7-preview-ui) .message-image{margin:var(--f7-message-bubble-padding-vertical) calc(var(--f7-message-bubble-padding-horizontal)*-1)}
html.ios :where(.f7-preview-ui) .message-image:first-child{margin-top:calc(var(--f7-message-bubble-padding-vertical)*-1)}
html.ios :where(.f7-preview-ui) .message-image:first-child img{border-top-left-radius:var(--f7-message-bubble-border-radius);border-top-right-radius:var(--f7-message-bubble-border-radius)}
html.ios :where(.f7-preview-ui) .message-image:last-child{margin-bottom:calc(var(--f7-message-bubble-padding-vertical)*-1)}
html.ios :where(.f7-preview-ui) .message-image:last-child img{border-bottom-left-radius:var(--f7-message-bubble-border-radius);border-bottom-right-radius:var(--f7-message-bubble-border-radius)}
html.ios :where(.f7-preview-ui) .message-text-header{margin-bottom:3px}
html.ios :where(.f7-preview-ui) .message-text-footer{margin-top:3px}
html.ios :where(.f7-preview-ui) .message-received{margin-left:calc(16px + var(--f7-safe-area-left))}
html.ios :where(.f7-preview-ui) .message-received .message-footer,
html.ios :where(.f7-preview-ui) .message-received .message-header,
html.ios :where(.f7-preview-ui) .message-received .message-name{margin-left:var(--f7-message-bubble-padding-horizontal)}
html.ios :where(.f7-preview-ui) .message-received .message-bubble{padding-left:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35"/></svg>') 50% 42% 46% 56%}
html.ios :where(.f7-preview-ui) .message-received .message-image{margin-left:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}
html.ios :where(.f7-preview-ui) .message-received.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0}
html.ios :where(.f7-preview-ui) .message-received.message-tail:not(.message-typing) .message-bubble{-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35"/><path d="M0 70c6-2 12-10 12-19V35l14 27s-8 8-26 8"/></svg>') 50% 42% 46% 56%}
html.ios :where(.f7-preview-ui) .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img{border-bottom-left-radius:0}
html.ios :where(.f7-preview-ui) .message-sent{margin-right:calc(16px + var(--f7-safe-area-right))}
html.ios :where(.f7-preview-ui) .message-sent .message-footer,
html.ios :where(.f7-preview-ui) .message-sent .message-header,
html.ios :where(.f7-preview-ui) .message-sent .message-name{margin-right:var(--f7-message-bubble-padding-horizontal)}
html.ios :where(.f7-preview-ui) .message-sent .message-bubble{padding-right:calc(var(--f7-message-bubble-padding-horizontal) + 6px);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/></svg>') 50% 56% 46% 42%}
html.ios :where(.f7-preview-ui) .message-sent .message-image{margin-right:calc((var(--f7-message-bubble-padding-horizontal) + 6px)*-1)}
html.ios :where(.f7-preview-ui) .message-sent.message-tail .message-bubble{border-radius:var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="35" viewBox="0 0 96 70"><path d="M84 35c1 7-5 37-42 35C5 72-1 42 0 35-1 28 5-2 42 0c37-2 43 28 42 35"/><path d="M96 70c-6-2-12-10-12-19V35L70 62s8 8 26 8"/></svg>') 50% 56% 46% 42%}
html.ios :where(.f7-preview-ui) .message-sent.message-tail .message-bubble .message-image:last-child img{border-bottom-right-radius:0}
html.ios :where(.f7-preview-ui) .message+.message:not(.message-first){margin-top:1px}
html.ios :where(.f7-preview-ui) .message-received.message-typing .message-content:after,
html.ios :where(.f7-preview-ui) .message-received.message-typing .message-content:before{background:var(--f7-message-received-bg-color);border-radius:50%;content:"";position:absolute}
html.ios :where(.f7-preview-ui) .message-received.message-typing .message-content:after{bottom:0;height:11px;left:4px;width:11px}
html.ios :where(.f7-preview-ui) .message-received.message-typing .message-content:before{bottom:-4px;height:6px;left:-1px;width:6px}
html.ios :where(.f7-preview-ui) .message-typing-indicator>div{height:9px;width:9px}
html.ios :where(.f7-preview-ui) .message-typing-indicator>div+div{margin-left:4px}
html.ios :where(.f7-preview-ui) .message-typing-indicator>div:first-child{animation:ios-message-typing-indicator .9s infinite}
html.ios :where(.f7-preview-ui) .message-typing-indicator>div:nth-child(2){animation:ios-message-typing-indicator .9s .15s infinite}
html.ios :where(.f7-preview-ui) .message-typing-indicator>div:nth-child(3){animation:ios-message-typing-indicator .9s .3s infinite}
@keyframes ios-message-typing-indicator{0%{opacity:.35}25%{opacity:.2}50%{opacity:.2}}
html.md :where(.f7-preview-ui) .message-footer b,
html.md :where(.f7-preview-ui) .message-header b,
html.md :where(.f7-preview-ui) .message-name b,
html.md :where(.f7-preview-ui) .messages-title b{font-weight:500}
html.md :where(.f7-preview-ui) .message-header,
html.md :where(.f7-preview-ui) .message-name{margin-bottom:2px}
html.md :where(.f7-preview-ui) .message-footer{margin-top:2px}
html.md :where(.f7-preview-ui) .message-text-header{margin-bottom:4px}
html.md :where(.f7-preview-ui) .message-text-footer{margin-top:4px}
html.md :where(.f7-preview-ui) .message-image{margin:calc(var(--f7-message-bubble-padding-vertical)*-1) calc(var(--f7-message-bubble-padding-horizontal)*-1)}
html.md :where(.f7-preview-ui) .message-image,
html.md :where(.f7-preview-ui) .message-image img{border-radius:var(--f7-message-bubble-border-radius)}
html.md :where(.f7-preview-ui) .message-received{margin-left:calc(8px + var(--f7-safe-area-left))}
html.md :where(.f7-preview-ui) .message-received .message-footer,
html.md :where(.f7-preview-ui) .message-received .message-header,
html.md :where(.f7-preview-ui) .message-received .message-name{margin-left:16px}
html.md :where(.f7-preview-ui) .message-received.message-first:not(.message-last) .message-bubble,
html.md :where(.f7-preview-ui) .message-received.message-first:not(.message-last) .message-image,
html.md :where(.f7-preview-ui) .message-received.message-first:not(.message-last) .message-image img{border-bottom-left-radius:4px}
html.md :where(.f7-preview-ui) .message-received.message-last:not(.message-first) .message-bubble,
html.md :where(.f7-preview-ui) .message-received.message-last:not(.message-first) .message-image,
html.md :where(.f7-preview-ui) .message-received.message-last:not(.message-first) .message-image img{border-top-left-radius:4px}
html.md :where(.f7-preview-ui) .message-received:not(.message-last):not(.message-first) .message-bubble,
html.md :where(.f7-preview-ui) .message-received:not(.message-last):not(.message-first) .message-image,
html.md :where(.f7-preview-ui) .message-received:not(.message-last):not(.message-first) .message-image img{border-bottom-left-radius:4px;border-top-left-radius:4px}
html.md :where(.f7-preview-ui) .message-received .message-avatar+.message-content{margin-left:8px}
html.md :where(.f7-preview-ui) .message-sent{margin-right:calc(8px + var(--f7-safe-area-right))}
html.md :where(.f7-preview-ui) .message-sent .message-footer,
html.md :where(.f7-preview-ui) .message-sent .message-header,
html.md :where(.f7-preview-ui) .message-sent .message-name{margin-right:16px}
html.md :where(.f7-preview-ui) .message-sent.message-first:not(.message-last) .message-bubble,
html.md :where(.f7-preview-ui) .message-sent.message-first:not(.message-last) .message-image,
html.md :where(.f7-preview-ui) .message-sent.message-first:not(.message-last) .message-image img{border-bottom-right-radius:4px}
html.md :where(.f7-preview-ui) .message-sent.message-last:not(.message-first) .message-bubble,
html.md :where(.f7-preview-ui) .message-sent.message-last:not(.message-first) .message-image,
html.md :where(.f7-preview-ui) .message-sent.message-last:not(.message-first) .message-image img{border-top-right-radius:4px}
html.md :where(.f7-preview-ui) .message-sent:not(.message-last):not(.message-first) .message-bubble,
html.md :where(.f7-preview-ui) .message-sent:not(.message-last):not(.message-first) .message-image,
html.md :where(.f7-preview-ui) .message-sent:not(.message-last):not(.message-first) .message-image img{border-bottom-right-radius:4px;border-top-right-radius:4px}
html.md :where(.f7-preview-ui) .message-sent .message-avatar+.message-content{margin-right:var(--f7-message-bubble-padding-horizontal)}
html.md :where(.f7-preview-ui) .message+.message:not(.message-first){margin-top:2px}
html.md :where(.f7-preview-ui) .message-typing-indicator>div{height:6px;width:6px}
html.md :where(.f7-preview-ui) .message-typing-indicator>div+div{margin-left:6px}
html.md :where(.f7-preview-ui) .message-typing-indicator>div:first-child{animation:md-message-typing-indicator .9s infinite}
html.md :where(.f7-preview-ui) .message-typing-indicator>div:nth-child(2){animation:md-message-typing-indicator .9s .15s infinite}
html.md :where(.f7-preview-ui) .message-typing-indicator>div:nth-child(3){animation:md-message-typing-indicator .9s .3s infinite}
@keyframes md-message-typing-indicator{0%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(0)}}
/* messagebar */
:where(.f7-preview-ui){--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}
html.ios :where(.f7-preview-ui){--f7-messagebar-height:60px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:var(--f7-glass-bg-color);--f7-messagebar-link-color:var(--f7-bars-text-color);--f7-messagebar-border-color:#0000;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:10px 16px 6px;--f7-messagebar-textarea-height:40px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-border-color:#0000;--f7-messagebar-attachment-border-radius:20px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-attachments-border-color:#0000;--f7-messagebar-textarea-border:none;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-textarea-placeholder-color:#0006;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}
html.ios :where(.f7-preview-ui) .dark,
html.ios.dark :where(.f7-preview-ui){--f7-messagebar-sheet-bg-color:#000;--f7-messagebar-textarea-placeholder-color:#fff6;--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}
html.md :where(.f7-preview-ui){--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid #0000;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:#0000;--f7-messagebar-attachments-border-color:#0000}
html.md :where(.f7-preview-ui),
html.md :where(.f7-preview-ui) .dark,
html.md :where(.f7-preview-ui) [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}
:where(.f7-preview-ui) .messagebar{bottom:0;font-size:var(--f7-messagebar-font-size);height:auto;min-height:var(--f7-messagebar-height);padding-bottom:var(--f7-safe-area-bottom);transform:translateZ(0)}
:where(.f7-preview-ui) .messagebar.no-outline:before,
:where(.f7-preview-ui) .messagebar.toolbar-hidden:after{display:none!important}
:where(.f7-preview-ui) .messagebar .toolbar-inner{bottom:auto;height:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));position:relative;top:auto}
:where(.f7-preview-ui) .messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}
:where(.f7-preview-ui) .messagebar .messagebar-area{flex-shrink:1;min-width:0;position:relative;width:100%}
:where(.f7-preview-ui) .messagebar textarea{background-color:var(--f7-messagebar-textarea-bg-color);border:var(--f7-messagebar-textarea-border);border-radius:var(--f7-messagebar-textarea-border-radius);color:var(--f7-messagebar-textarea-text-color);flex-shrink:1;font-size:var(--f7-messagebar-textarea-font-size);height:var(--f7-messagebar-textarea-height);line-height:var(--f7-messagebar-textarea-line-height);padding:var(--f7-messagebar-textarea-padding);width:100%}
:where(.f7-preview-ui) .messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}
:where(.f7-preview-ui) .messagebar .toolbar-pane,
:where(.f7-preview-ui) .messagebar a.link{align-self:flex-end;color:var(--f7-messagebar-link-color,var(--f7-theme-color));flex-shrink:0}
:where(.f7-preview-ui) .messagebar-attachments{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:0;position:relative;white-space:nowrap}
:where(.f7-preview-ui) .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}
:where(.f7-preview-ui) .messagebar-attachment{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--f7-messagebar-attachment-border-radius);display:inline-block;height:var(--f7-messagebar-attachment-height);position:relative;vertical-align:middle;white-space:normal}
@media (orientation:landscape){:where(.f7-preview-ui) .messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}
:where(.f7-preview-ui) .messagebar-attachment img{border-radius:var(--f7-messagebar-attachment-border-radius);display:block;height:100%;width:auto}
:where(.f7-preview-ui) .messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);display:flex;flex-direction:column;flex-wrap:wrap;height:var(--f7-messagebar-sheet-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}
@media (orientation:landscape){:where(.f7-preview-ui) .messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}
:where(.f7-preview-ui) .messagebar-sheet-image{background-position:50%;background-repeat:no-repeat;background-size:cover}
:where(.f7-preview-ui) .messagebar-sheet-image>img{border-radius:inherit;height:100%;object-fit:cover;object-position:center;transition-duration:.2s;width:100%}
:where(.f7-preview-ui) .messagebar-attachment-delete{border-radius:50%;box-sizing:border-box;cursor:pointer;display:block;position:absolute}
:where(.f7-preview-ui) .messagebar-attachment-delete:after,
:where(.f7-preview-ui) .messagebar-attachment-delete:before{content:"";left:50%;position:absolute;top:50%}
:where(.f7-preview-ui) .messagebar-attachment-delete:after{transform:rotate(45deg)}
:where(.f7-preview-ui) .messagebar-attachment-delete:before{transform:rotate(-45deg)}
:where(.f7-preview-ui) .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}
:where(.f7-preview-ui) .messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}
html.ios :where(.f7-preview-ui) .messagebar :is(a,button):is(.icon-only,:has(i:only-child),:has(svg:only-child)){min-height:var(--f7-messagebar-textarea-height);min-width:var(--f7-messagebar-textarea-height)}
html.ios :where(.f7-preview-ui) .messagebar textarea{backdrop-filter:var(--f7-glass-backdrop);box-shadow:var(--f7-glass-shadow);min-height:var(--f7-messagebar-textarea-height)}
html.ios :where(.f7-preview-ui) .messagebar-attachments{border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;padding:5px}
html.ios :where(.f7-preview-ui) .messagebar-area,
html.ios :where(.f7-preview-ui) .messagebar-attachments-visible .messagebar-area{border-radius:var(--f7-messagebar-textarea-border-radius)}
html.ios :where(.f7-preview-ui) .messagebar-attachments-visible .messagebar-area{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-messagebar-textarea-bg-color);box-shadow:var(--f7-glass-shadow)}
html.ios :where(.f7-preview-ui) .messagebar-attachments-visible .messagebar-attachments+textarea{backdrop-filter:none;background:#0000;border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);box-shadow:none}
html.ios :where(.f7-preview-ui) .messagebar-attachment{font-size:14px}
html.ios :where(.f7-preview-ui) .messagebar-attachment+.messagebar-attachment{margin-left:8px}
html.ios :where(.f7-preview-ui) .messagebar-attachment-delete{background:#7d7e80;border:2px solid #fff;box-shadow:0 0 2px #0003;height:20px;right:5px;top:5px;width:20px}
html.ios :where(.f7-preview-ui) .messagebar-attachment-delete:after,
html.ios :where(.f7-preview-ui) .messagebar-attachment-delete:before{background:#fff;height:2px;margin-left:-5px;margin-top:-1px;width:10px}
html.ios :where(.f7-preview-ui) .messagebar-sheet-image,
html.ios :where(.f7-preview-ui) .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 2px)/2);margin-left:1px;margin-top:1px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 2px)/2)}
@media (orientation:landscape){html.ios :where(.f7-preview-ui) .messagebar-sheet-image,
html.ios :where(.f7-preview-ui) .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2)}}
html.ios :where(.f7-preview-ui) .messagebar-sheet-image .icon-checkbox,
html.ios :where(.f7-preview-ui) .messagebar-sheet-image .icon-radio,
html.ios :where(.f7-preview-ui) .messagebar-sheet-item .icon-checkbox,
html.ios :where(.f7-preview-ui) .messagebar-sheet-item .icon-radio{bottom:8px;position:absolute;right:8px;z-index:1}
html.md :where(.f7-preview-ui) .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height);background:var(--f7-messagebar-bg-color)}
html.md :where(.f7-preview-ui) .messagebar:before{background-color:var(--f7-messagebar-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}
html.md :where(.f7-preview-ui) .messagebar-attachments{border-bottom:1px solid var(--f7-messagebar-attachments-border-color);padding:16px 16px 0}
html.md :where(.f7-preview-ui) .messagebar-attachment img{height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center;width:var(--f7-messagebar-attachment-height)}
html.md :where(.f7-preview-ui) .messagebar-attachment+.messagebar-attachment{margin-left:16px}
html.md :where(.f7-preview-ui) .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}
html.md :where(.f7-preview-ui) .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}
html.md :where(.f7-preview-ui) .messagebar-area{margin-bottom:8px;margin-top:8px;overflow:hidden}
html.md :where(.f7-preview-ui) .messagebar-attachment-delete{background-color:var(--f7-md-inverse-surface);border:2px solid var(--f7-messagebar-textarea-bg-color);border-radius:24px;height:24px;right:-6px;top:-6px;width:24px}
html.md :where(.f7-preview-ui) .messagebar-attachment-delete:after,
html.md :where(.f7-preview-ui) .messagebar-attachment-delete:before{background:var(--f7-messagebar-textarea-bg-color);height:2px;margin-left:-6px;margin-top:-1px;width:12px}
html.md :where(.f7-preview-ui) .messagebar-sheet-image,
html.md :where(.f7-preview-ui) .messagebar-sheet-item{--f7-touch-ripple-color:#0000;border-radius:4px;box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 24px)/2);margin-left:8px;margin-top:8px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 24px)/2)}
@media (orientation:landscape){html.md :where(.f7-preview-ui) .messagebar-sheet-image,
html.md :where(.f7-preview-ui) .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/2)}}
html.md :where(.f7-preview-ui) .messagebar-sheet-image input:checked~img,
html.md :where(.f7-preview-ui) .messagebar-sheet-item input:checked~img{transform:scale(.85)}
html.md :where(.f7-preview-ui) .messagebar-sheet-image input:checked~.icon-checkbox,
html.md :where(.f7-preview-ui) .messagebar-sheet-image input:checked~.icon-radio,
html.md :where(.f7-preview-ui) .messagebar-sheet-item input:checked~.icon-checkbox,
html.md :where(.f7-preview-ui) .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}
html.md :where(.f7-preview-ui) .messagebar-sheet-image .icon-checkbox,
html.md :where(.f7-preview-ui) .messagebar-sheet-image .icon-radio,
html.md :where(.f7-preview-ui) .messagebar-sheet-item .icon-checkbox,
html.md :where(.f7-preview-ui) .messagebar-sheet-item .icon-radio{align-items:center;border:none;border-radius:50%;display:flex;height:32px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.85);width:32px;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}
html.md :where(.f7-preview-ui) .messagebar-sheet-image .icon-checkbox:after,
html.md :where(.f7-preview-ui) .messagebar-sheet-image .icon-radio:after,
html.md :where(.f7-preview-ui) .messagebar-sheet-item .icon-checkbox:after,
html.md :where(.f7-preview-ui) .messagebar-sheet-item .icon-radio:after{color:var(--f7-md-on-surface);font-size:18px;height:100%;left:0;line-height:32px;position:static;width:auto}