framework7/framework7.css

Full featured mobile HTML framework for building iOS & Android apps

/**
 * Framework7 6.3.1
 * Full featured mobile HTML framework for building iOS & Android apps
 * https://framework7.io/
 *
 * Copyright 2014-2021 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 23, 2021
 */

/*====================
  Core
  ==================== */
:root {
  --f7-theme-color: #007aff;
  --f7-theme-color-rgb: 0, 122, 255;
  --f7-theme-color-shade: #0066d6;
  --f7-theme-color-tint: #298fff;
  --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-left-edge,
  :root .ios-edges,
  :root .safe-area-left,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-left {
    --f7-safe-area-left: env(safe-area-inset-left);
    --f7-safe-area-outer-left: env(safe-area-inset-left);
  }
  :root .ios-right-edge,
  :root .ios-edges,
  :root .safe-area-right,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-right {
    --f7-safe-area-right: env(safe-area-inset-right);
    --f7-safe-area-outer-right: env(safe-area-inset-right);
  }
  :root .no-safe-areas,
  :root .no-safe-area-left,
  :root .no-ios-edges,
  :root .no-ios-left-edge {
    --f7-safe-area-left: 0px;
    --f7-safe-area-outer-left: 0px;
  }
  :root .no-safe-areas,
  :root .no-safe-area-right,
  :root .no-ios-edges,
  :root .no-ios-right-edge {
    --f7-safe-area-right: 0px;
    --f7-safe-area-outer-right: 0px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --f7-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --f7-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --f7-font-size: 14px;
  /*
  --f7-bars-link-color: var(--f7-theme-color);
  */
  --f7-bars-bg-image: none;
  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
  --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --f7-bars-text-color: #000;
  --f7-bars-bg-color: #f7f7f8;
  --f7-bars-bg-color-rgb: 247, 247, 248;
}
:root .theme-dark,
:root.theme-dark {
  --f7-bars-text-color: #fff;
}
.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-text-color: #000;
  --f7-bars-border-color: rgba(0, 0, 0, 0.25);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-text-color: #fff;
  --f7-bars-bg-color: #121212;
  --f7-bars-bg-color-rgb: 22, 22, 22;
  --f7-bars-border-color: rgba(255, 255, 255, 0.16);
}
.md {
  --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;
}
.md .theme-dark,
.md.theme-dark {
  --f7-text-color: rgba(255, 255, 255, 0.87);
  --f7-bars-bg-color: #202020;
}
.aurora {
  --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-text-color: #000;
  --f7-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-text-color: #fff;
  --f7-bars-bg-color: #202020;
  --f7-bars-border-color: rgba(255, 255, 255, 0.1);
}
/*====================
  Color Themes
  ==================== */
.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);
}
:root {
  --f7-color-red: #ff3b30;
  --f7-color-red-rgb: 255, 59, 48;
  --f7-color-red-shade: #ff1407;
  --f7-color-red-tint: #ff6259;
  --f7-color-green: #4cd964;
  --f7-color-green-rgb: 76, 217, 100;
  --f7-color-green-shade: #2cd048;
  --f7-color-green-tint: #6ee081;
  --f7-color-blue: #2196f3;
  --f7-color-blue-rgb: 33, 150, 243;
  --f7-color-blue-shade: #0c82df;
  --f7-color-blue-tint: #48a8f5;
  --f7-color-pink: #ff2d55;
  --f7-color-pink-rgb: 255, 45, 85;
  --f7-color-pink-shade: #ff0434;
  --f7-color-pink-tint: #ff5676;
  --f7-color-yellow: #ffcc00;
  --f7-color-yellow-rgb: 255, 204, 0;
  --f7-color-yellow-shade: #d6ab00;
  --f7-color-yellow-tint: #ffd429;
  --f7-color-orange: #ff9500;
  --f7-color-orange-rgb: 255, 149, 0;
  --f7-color-orange-shade: #d67d00;
  --f7-color-orange-tint: #ffa629;
  --f7-color-purple: #9c27b0;
  --f7-color-purple-rgb: 156, 39, 176;
  --f7-color-purple-shade: #7e208f;
  --f7-color-purple-tint: #b92fd1;
  --f7-color-deeppurple: #673ab7;
  --f7-color-deeppurple-rgb: 103, 58, 183;
  --f7-color-deeppurple-shade: #563098;
  --f7-color-deeppurple-tint: #7c52c8;
  --f7-color-lightblue: #5ac8fa;
  --f7-color-lightblue-rgb: 90, 200, 250;
  --f7-color-lightblue-shade: #32bbf9;
  --f7-color-lightblue-tint: #82d5fb;
  --f7-color-teal: #009688;
  --f7-color-teal-rgb: 0, 150, 136;
  --f7-color-teal-shade: #006d63;
  --f7-color-teal-tint: #00bfad;
  --f7-color-lime: #cddc39;
  --f7-color-lime-rgb: 205, 220, 57;
  --f7-color-lime-shade: #bac923;
  --f7-color-lime-tint: #d6e25c;
  --f7-color-deeporange: #ff6b22;
  --f7-color-deeporange-rgb: 255, 107, 34;
  --f7-color-deeporange-shade: #f85200;
  --f7-color-deeporange-tint: #ff864b;
  --f7-color-gray: #8e8e93;
  --f7-color-gray-rgb: 142, 142, 147;
  --f7-color-gray-shade: #79797f;
  --f7-color-gray-tint: #a3a3a7;
  --f7-color-white: #ffffff;
  --f7-color-white-rgb: 255, 255, 255;
  --f7-color-white-shade: #ebebeb;
  --f7-color-white-tint: #ffffff;
  --f7-color-black: #000000;
  --f7-color-black-rgb: 0, 0, 0;
  --f7-color-black-shade: #000000;
  --f7-color-black-tint: #141414;
}
.color-theme-red {
  --f7-theme-color: #ff3b30;
  --f7-theme-color-rgb: 255, 59, 48;
  --f7-theme-color-shade: #ff1407;
  --f7-theme-color-tint: #ff6259;
}
.color-theme-green {
  --f7-theme-color: #4cd964;
  --f7-theme-color-rgb: 76, 217, 100;
  --f7-theme-color-shade: #2cd048;
  --f7-theme-color-tint: #6ee081;
}
.color-theme-blue {
  --f7-theme-color: #2196f3;
  --f7-theme-color-rgb: 33, 150, 243;
  --f7-theme-color-shade: #0c82df;
  --f7-theme-color-tint: #48a8f5;
}
.color-theme-pink {
  --f7-theme-color: #ff2d55;
  --f7-theme-color-rgb: 255, 45, 85;
  --f7-theme-color-shade: #ff0434;
  --f7-theme-color-tint: #ff5676;
}
.color-theme-yellow {
  --f7-theme-color: #ffcc00;
  --f7-theme-color-rgb: 255, 204, 0;
  --f7-theme-color-shade: #d6ab00;
  --f7-theme-color-tint: #ffd429;
}
.color-theme-orange {
  --f7-theme-color: #ff9500;
  --f7-theme-color-rgb: 255, 149, 0;
  --f7-theme-color-shade: #d67d00;
  --f7-theme-color-tint: #ffa629;
}
.color-theme-purple {
  --f7-theme-color: #9c27b0;
  --f7-theme-color-rgb: 156, 39, 176;
  --f7-theme-color-shade: #7e208f;
  --f7-theme-color-tint: #b92fd1;
}
.color-theme-deeppurple {
  --f7-theme-color: #673ab7;
  --f7-theme-color-rgb: 103, 58, 183;
  --f7-theme-color-shade: #563098;
  --f7-theme-color-tint: #7c52c8;
}
.color-theme-lightblue {
  --f7-theme-color: #5ac8fa;
  --f7-theme-color-rgb: 90, 200, 250;
  --f7-theme-color-shade: #32bbf9;
  --f7-theme-color-tint: #82d5fb;
}
.color-theme-teal {
  --f7-theme-color: #009688;
  --f7-theme-color-rgb: 0, 150, 136;
  --f7-theme-color-shade: #006d63;
  --f7-theme-color-tint: #00bfad;
}
.color-theme-lime {
  --f7-theme-color: #cddc39;
  --f7-theme-color-rgb: 205, 220, 57;
  --f7-theme-color-shade: #bac923;
  --f7-theme-color-tint: #d6e25c;
}
.color-theme-deeporange {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-tint: #ff864b;
}
.color-theme-gray {
  --f7-theme-color: #8e8e93;
  --f7-theme-color-rgb: 142, 142, 147;
  --f7-theme-color-shade: #79797f;
  --f7-theme-color-tint: #a3a3a7;
}
.color-theme-white {
  --f7-theme-color: #ffffff;
  --f7-theme-color-rgb: 255, 255, 255;
  --f7-theme-color-shade: #ebebeb;
  --f7-theme-color-tint: #ffffff;
}
.color-theme-black {
  --f7-theme-color: #000000;
  --f7-theme-color-rgb: 0, 0, 0;
  --f7-theme-color-shade: #000000;
  --f7-theme-color-tint: #141414;
}
.color-red {
  --f7-theme-color: #ff3b30;
  --f7-theme-color-rgb: 255, 59, 48;
  --f7-theme-color-shade: #ff1407;
  --f7-theme-color-tint: #ff6259;
}
.text-color-red {
  --f7-theme-color-text-color: #ff3b30;
}
.bg-color-red {
  --f7-theme-color-bg-color: #ff3b30;
}
.border-color-red {
  --f7-theme-color-border-color: #ff3b30;
}
.ripple-color-red,
.ripple-red {
  --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
}
.color-green {
  --f7-theme-color: #4cd964;
  --f7-theme-color-rgb: 76, 217, 100;
  --f7-theme-color-shade: #2cd048;
  --f7-theme-color-tint: #6ee081;
}
.text-color-green {
  --f7-theme-color-text-color: #4cd964;
}
.bg-color-green {
  --f7-theme-color-bg-color: #4cd964;
}
.border-color-green {
  --f7-theme-color-border-color: #4cd964;
}
.ripple-color-green,
.ripple-green {
  --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
}
.color-blue {
  --f7-theme-color: #2196f3;
  --f7-theme-color-rgb: 33, 150, 243;
  --f7-theme-color-shade: #0c82df;
  --f7-theme-color-tint: #48a8f5;
}
.text-color-blue {
  --f7-theme-color-text-color: #2196f3;
}
.bg-color-blue {
  --f7-theme-color-bg-color: #2196f3;
}
.border-color-blue {
  --f7-theme-color-border-color: #2196f3;
}
.ripple-color-blue,
.ripple-blue {
  --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
}
.color-pink {
  --f7-theme-color: #ff2d55;
  --f7-theme-color-rgb: 255, 45, 85;
  --f7-theme-color-shade: #ff0434;
  --f7-theme-color-tint: #ff5676;
}
.text-color-pink {
  --f7-theme-color-text-color: #ff2d55;
}
.bg-color-pink {
  --f7-theme-color-bg-color: #ff2d55;
}
.border-color-pink {
  --f7-theme-color-border-color: #ff2d55;
}
.ripple-color-pink,
.ripple-pink {
  --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
}
.color-yellow {
  --f7-theme-color: #ffcc00;
  --f7-theme-color-rgb: 255, 204, 0;
  --f7-theme-color-shade: #d6ab00;
  --f7-theme-color-tint: #ffd429;
}
.text-color-yellow {
  --f7-theme-color-text-color: #ffcc00;
}
.bg-color-yellow {
  --f7-theme-color-bg-color: #ffcc00;
}
.border-color-yellow {
  --f7-theme-color-border-color: #ffcc00;
}
.ripple-color-yellow,
.ripple-yellow {
  --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
}
.color-orange {
  --f7-theme-color: #ff9500;
  --f7-theme-color-rgb: 255, 149, 0;
  --f7-theme-color-shade: #d67d00;
  --f7-theme-color-tint: #ffa629;
}
.text-color-orange {
  --f7-theme-color-text-color: #ff9500;
}
.bg-color-orange {
  --f7-theme-color-bg-color: #ff9500;
}
.border-color-orange {
  --f7-theme-color-border-color: #ff9500;
}
.ripple-color-orange,
.ripple-orange {
  --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
}
.color-purple {
  --f7-theme-color: #9c27b0;
  --f7-theme-color-rgb: 156, 39, 176;
  --f7-theme-color-shade: #7e208f;
  --f7-theme-color-tint: #b92fd1;
}
.text-color-purple {
  --f7-theme-color-text-color: #9c27b0;
}
.bg-color-purple {
  --f7-theme-color-bg-color: #9c27b0;
}
.border-color-purple {
  --f7-theme-color-border-color: #9c27b0;
}
.ripple-color-purple,
.ripple-purple {
  --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
}
.color-deeppurple {
  --f7-theme-color: #673ab7;
  --f7-theme-color-rgb: 103, 58, 183;
  --f7-theme-color-shade: #563098;
  --f7-theme-color-tint: #7c52c8;
}
.text-color-deeppurple {
  --f7-theme-color-text-color: #673ab7;
}
.bg-color-deeppurple {
  --f7-theme-color-bg-color: #673ab7;
}
.border-color-deeppurple {
  --f7-theme-color-border-color: #673ab7;
}
.ripple-color-deeppurple,
.ripple-deeppurple {
  --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
}
.color-lightblue {
  --f7-theme-color: #5ac8fa;
  --f7-theme-color-rgb: 90, 200, 250;
  --f7-theme-color-shade: #32bbf9;
  --f7-theme-color-tint: #82d5fb;
}
.text-color-lightblue {
  --f7-theme-color-text-color: #5ac8fa;
}
.bg-color-lightblue {
  --f7-theme-color-bg-color: #5ac8fa;
}
.border-color-lightblue {
  --f7-theme-color-border-color: #5ac8fa;
}
.ripple-color-lightblue,
.ripple-lightblue {
  --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
}
.color-teal {
  --f7-theme-color: #009688;
  --f7-theme-color-rgb: 0, 150, 136;
  --f7-theme-color-shade: #006d63;
  --f7-theme-color-tint: #00bfad;
}
.text-color-teal {
  --f7-theme-color-text-color: #009688;
}
.bg-color-teal {
  --f7-theme-color-bg-color: #009688;
}
.border-color-teal {
  --f7-theme-color-border-color: #009688;
}
.ripple-color-teal,
.ripple-teal {
  --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
}
.color-lime {
  --f7-theme-color: #cddc39;
  --f7-theme-color-rgb: 205, 220, 57;
  --f7-theme-color-shade: #bac923;
  --f7-theme-color-tint: #d6e25c;
}
.text-color-lime {
  --f7-theme-color-text-color: #cddc39;
}
.bg-color-lime {
  --f7-theme-color-bg-color: #cddc39;
}
.border-color-lime {
  --f7-theme-color-border-color: #cddc39;
}
.ripple-color-lime,
.ripple-lime {
  --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
}
.color-deeporange {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-tint: #ff864b;
}
.text-color-deeporange {
  --f7-theme-color-text-color: #ff6b22;
}
.bg-color-deeporange {
  --f7-theme-color-bg-color: #ff6b22;
}
.border-color-deeporange {
  --f7-theme-color-border-color: #ff6b22;
}
.ripple-color-deeporange,
.ripple-deeporange {
  --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
}
.color-gray {
  --f7-theme-color: #8e8e93;
  --f7-theme-color-rgb: 142, 142, 147;
  --f7-theme-color-shade: #79797f;
  --f7-theme-color-tint: #a3a3a7;
}
.text-color-gray {
  --f7-theme-color-text-color: #8e8e93;
}
.bg-color-gray {
  --f7-theme-color-bg-color: #8e8e93;
}
.border-color-gray {
  --f7-theme-color-border-color: #8e8e93;
}
.ripple-color-gray,
.ripple-gray {
  --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
}
.color-white {
  --f7-theme-color: #ffffff;
  --f7-theme-color-rgb: 255, 255, 255;
  --f7-theme-color-shade: #ebebeb;
  --f7-theme-color-tint: #ffffff;
}
.text-color-white {
  --f7-theme-color-text-color: #ffffff;
}
.bg-color-white {
  --f7-theme-color-bg-color: #ffffff;
}
.border-color-white {
  --f7-theme-color-border-color: #ffffff;
}
.ripple-color-white,
.ripple-white {
  --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-black {
  --f7-theme-color: #000000;
  --f7-theme-color-rgb: 0, 0, 0;
  --f7-theme-color-shade: #000000;
  --f7-theme-color-tint: #141414;
}
.text-color-black {
  --f7-theme-color-text-color: #000000;
}
.bg-color-black {
  --f7-theme-color-bg-color: #000000;
}
.border-color-black {
  --f7-theme-color-border-color: #000000;
}
.ripple-color-black,
.ripple-black {
  --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
@font-face {
  font-family: 'framework7-core-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
  font-weight: 400;
  font-style: normal;
}
html,
body,
.framework7-root {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #fff;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: var(--f7-font-family);
  font-size: var(--f7-font-size);
  line-height: var(--f7-line-height);
  color: var(--f7-text-color);
}
.theme-dark body,
body.theme-dark {
  background: #000;
}
.theme-dark {
  color: var(--f7-text-color);
}
.framework7-root {
  overflow: hidden;
  box-sizing: border-box;
}
.framework7-initializing *,
.framework7-initializing *:before,
.framework7-initializing *:after {
  transition-duration: 0ms !important;
}
.device-ios,
.device-android {
  cursor: pointer;
}
.device-ios {
  touch-action: manipulation;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  html,
  body,
  .framework7-root {
    height: 671px;
  }
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  html,
  body,
  .framework7-root {
    height: 672px;
  }
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
}
a,
input,
textarea,
select {
  outline: 0;
}
a {
  cursor: pointer;
  text-decoration: none;
  color: var(--f7-theme-color);
}
.link,
.item-link {
  cursor: pointer;
}
p {
  margin: 1em 0;
}
.disabled {
  opacity: 0.55 !important;
  pointer-events: none !important;
}
html.device-full-viewport,
html.device-full-viewport body {
  height: 100vh;
}
.ios .md-only,
.ios .if-md,
.ios .aurora-only,
.ios .if-aurora,
.ios .if-not-ios,
.ios .not-ios {
  display: none !important;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
  .ios,
  .ios body,
  .ios .framework7-root {
    height: 671px;
  }
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
  .ios,
  .ios body,
  .ios .framework7-root {
    height: 672px;
  }
}
.md .ios-only,
.md .if-ios,
.md .aurora-only,
.md .if-aurora,
.md .if-not-md,
.md .not-md {
  display: none !important;
}
.aurora .ios-only,
.aurora .if-ios,
.aurora .md-only,
.aurora .if-md,
.aurora .if-not-aurora,
.aurora .not-aurora {
  display: none !important;
}
/* === Statusbar === */
/* === Views === */
.views,
.view {
  position: relative;
  height: 100%;
  z-index: 5000;
  overflow: hidden;
  box-sizing: border-box;
}
.framework7-root > .view,
.framework7-root > .views {
  height: calc(100% - var(--f7-appbar-app-offset, 0px));
}
.view-resize-handler {
  width: 6px;
  height: 100%;
  position: absolute;
  left: var(--f7-page-master-width);
  margin-left: -3px;
  top: 0;
  cursor: col-resize;
  z-index: 1000;
  display: none;
}
.view-master-detail .view-resize-handler {
  display: block;
}
/* === Pages === */
:root {
  --f7-page-master-width: 320px;
  --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
  --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-content-extra-padding-top: 0px;
  --f7-page-content-extra-padding-bottom: 0px;
  */
  --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 .theme-dark,
.ios.theme-dark {
  --f7-page-bg-color: #000;
}
.md {
  --f7-page-transition-duration: 250ms;
  --f7-page-title-font-size: 34px;
  --f7-page-title-font-weight: 500;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 8px;
  --f7-page-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
  --f7-page-bg-color: #121212;
}
.aurora {
  --f7-page-transition-duration: 250ms;
  --f7-page-title-font-size: 28px;
  --f7-page-title-font-weight: bold;
  --f7-page-title-letter-spacing: 0;
  --f7-page-title-padding-vertical: 7px;
  --f7-page-bg-color: #f3f4f6;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-page-bg-color: #121212;
}
.theme-dark {
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
}
.pages {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.page {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background-color: var(--f7-page-bg-color);
  z-index: 1;
}
.page.stacked {
  display: none;
}
.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%;
  position: relative;
  z-index: 1;
  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));
  padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
}
.page-transitioning,
.page-transitioning .page-shadow-effect,
.page-transitioning .page-opacity-effect {
  transition-duration: var(--f7-page-transition-duration);
}
.page-transitioning-swipeback,
.page-transitioning-swipeback .page-shadow-effect,
.page-transitioning-swipeback .page-opacity-effect {
  transition-duration: var(--f7-page-swipeback-transition-duration);
}
.router-transition-forward .page-next,
.router-transition-backward .page-next,
.router-transition-forward .page-current,
.router-transition-backward .page-current,
.router-transition-forward .page-previous:not(.stacked),
.router-transition-backward .page-previous:not(.stacked) {
  pointer-events: none;
}
.page-shadow-effect {
  position: absolute;
  top: 0;
  width: 16px;
  bottom: 0;
  z-index: -1;
  content: '';
  opacity: 0;
  right: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
}
.page-opacity-effect {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  bottom: 0;
  content: '';
  opacity: 0;
  z-index: 10000;
}
.ios .page-previous {
  transform: translate3d(-20%, 0, 0);
}
.ios .page-next {
  transform: translate3d(100%, 0, 0);
}
.ios .page-previous .page-opacity-effect {
  opacity: 1;
}
.ios .page-previous:after {
  opacity: 1;
}
.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 {
  position: absolute;
  top: 0;
  width: 16px;
  bottom: 0;
  z-index: -1;
  content: '';
  opacity: 0;
  right: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
}
.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 {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  bottom: 0;
  content: '';
  opacity: 0;
  z-index: 10000;
  animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
}
.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 {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  bottom: 0;
  content: '';
  opacity: 0;
  z-index: 10000;
  animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
}
.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 {
  position: absolute;
  top: 0;
  width: 16px;
  bottom: 0;
  z-index: -1;
  content: '';
  opacity: 0;
  right: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
  animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
}
@keyframes ios-page-next-to-current {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
@keyframes ios-page-previous-to-current {
  from {
    transform: translate3d(-20%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
@keyframes ios-page-current-to-previous {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-20%, 0, 0);
  }
}
@keyframes ios-page-current-to-next {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes ios-page-element-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ios-page-element-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.md .page-next {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 56px, 0);
}
.md .page-next.page-next-on-right {
  transform: translate3d(100%, 0, 0);
}
.md .router-transition-forward .page-next {
  animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.md .router-transition-forward .page-current {
  animation: none;
}
.md .router-transition-backward .page-current {
  animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.md .router-transition-backward .page-previous {
  animation: none;
}
@keyframes md-page-next-to-current {
  from {
    transform: translate3d(0, 56px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}
@keyframes md-page-current-to-next {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 56px, 0);
    opacity: 0;
  }
}
.aurora .page-next {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0px, 0);
}
.aurora .page-next.page-next-on-right {
  transform: translate3d(100%, 0, 0);
}
.aurora .router-transition-forward .page-next {
  animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
}
.aurora .router-transition-forward .page-current {
  animation: none;
}
.aurora .router-transition-backward .page-current {
  animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
}
.aurora .router-transition-backward .page-previous {
  animation: none;
}
@keyframes aurora-page-next-to-current {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes aurora-page-current-to-next {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.view:not(.view-master-detail) .page-master-stacked {
  display: none;
}
.view:not(.view-master-detail) .navbar-master-stacked {
  display: none;
}
.view-master-detail .page-master,
.view-master-detail .navbar-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,
.view-master-detail .navbar-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-detail > .navbar-master-detail {
  left: 0;
  right: 0;
  width: 100%;
}
.view-master-detail .page-master {
  z-index: 2;
  transform: none;
  pointer-events: auto;
}
.view-master-detail .page-master:before,
.view-master-detail .page-master:after {
  display: none;
}
.view-master-detail.router-transition .page-master {
  animation: none;
}
.md .router-transition-custom .page-previous,
.ios .router-transition-custom .page-previous,
.aurora .router-transition-custom .page-previous,
.md .router-transition-custom .page-next,
.ios .router-transition-custom .page-next,
.aurora .router-transition-custom .page-next {
  opacity: 1;
  transform: none;
}
.md .router-transition-custom.view-master-detail .page-master,
.ios .router-transition-custom.view-master-detail .page-master,
.aurora .router-transition-custom.view-master-detail .page-master {
  animation: none;
}
.page-title {
  position: relative;
  z-index: 10;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--f7-page-title-text-color);
  letter-spacing: var(--f7-page-title-letter-spacing);
  font-size: var(--f7-page-title-font-size);
  font-weight: var(--f7-page-title-font-weight);
  line-height: var(--f7-page-title-line-height);
  padding-left: calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left));
  padding-right: calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right));
  padding-top: var(--f7-page-title-padding-vertical);
  padding-bottom: var(--f7-page-title-padding-vertical);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
.router-transition-f7-circle-forward:after,
.router-transition-f7-circle-backward:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vmax;
  height: 100vmax;
  margin-left: -50vmax;
  margin-top: -50vmax;
  background: var(--f7-page-bg-color);
  z-index: 100;
}
.router-transition-f7-circle-forward:after {
  transform: scale(0);
  border-radius: 50%;
  animation: f7-circle-circle-in 400ms forwards;
}
.router-transition-f7-circle-forward .page-next {
  opacity: 0 !important;
  transform: scale(0.9) !important;
  animation: f7-circle-next-to-current 300ms forwards;
  animation-delay: 300ms;
  z-index: 150;
}
.router-transition-f7-circle-backward:after {
  animation: f7-circle-circle-out 300ms forwards;
  animation-delay: 350ms;
}
.router-transition-f7-circle-backward .page-current {
  animation: f7-circle-current-to-next 700ms forwards;
  z-index: 150;
}
@keyframes f7-circle-circle-in {
  from {
    transform: scale(0);
    border-radius: 50%;
  }
  50% {
    border-radius: 50%;
  }
  to {
    transform: scale(1);
    border-radius: 0%;
  }
}
@keyframes f7-circle-circle-out {
  from {
    transform: scale(1);
    border-radius: 0%;
  }
  50% {
    border-radius: 50%;
  }
  to {
    transform: scale(0);
    border-radius: 50%;
  }
}
@keyframes f7-circle-next-to-current {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  40% {
    transform: scale(1.035);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes f7-circle-current-to-next {
  from {
    transform: scale(1);
    opacity: 1;
  }
  34% {
    transform: scale(1.035);
    opacity: 1;
  }
  57% {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}
.router-transition-f7-cover-v-forward,
.router-transition-f7-cover-v-backward {
  background: #000;
  perspective: 1200px;
}
.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 {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes f7-cover-v-current-to-next {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes f7-cover-v-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
}
@keyframes f7-cover-v-prev-to-current {
  from {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
.router-transition-f7-cover-forward,
.router-transition-f7-cover-backward {
  background: #000;
  perspective: 1200px;
}
.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 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-cover-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-cover-current-to-prev {
  from {
    transform: translateZ(0);
    opacity: 1;
  }
  to {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
}
@keyframes f7-cover-prev-to-current {
  from {
    transform: translateZ(-300px);
    opacity: 0.5;
  }
  to {
    transform: translateZ(0);
    opacity: 1;
  }
}
.router-transition-f7-dive-forward,
.router-transition-f7-dive-backward {
  background: var(--f7-page-bg-color);
  perspective: 1200px;
}
.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 {
  from {
    opacity: 0;
    transform: translateZ(-150px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateZ(0px);
  }
}
@keyframes f7-dive-current-to-next {
  from {
    opacity: 1;
    transform: translateZ(0px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: translateZ(-150px);
  }
}
@keyframes f7-dive-current-to-prev {
  from {
    transform: translateZ(0px);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: translateZ(150px);
  }
}
@keyframes f7-dive-prev-to-current {
  from {
    opacity: 0;
    transform: translateZ(150px);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateZ(0px);
  }
}
.router-transition-f7-fade-forward,
.router-transition-f7-fade-backward {
  background: var(--f7-page-bg-color);
}
.router-transition-f7-fade-forward .page-next {
  opacity: 0 !important;
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
}
.router-transition-f7-fade-forward .page-current {
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
}
.router-transition-f7-fade-backward .page-current {
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
}
.router-transition-f7-fade-backward .page-previous {
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
}
@keyframes f7-fade-in {
  from {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes f7-fade-out {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}
.router-transition-f7-flip-forward,
.router-transition-f7-flip-backward {
  background: #000;
  perspective: 1200px;
}
.router-transition-f7-flip-forward .page,
.router-transition-f7-flip-backward .page {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.router-transition-f7-flip-forward .page-next {
  animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
}
.router-transition-f7-flip-forward .page-current {
  animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
}
.router-transition-f7-flip-backward .page-current {
  animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
}
.router-transition-f7-flip-backward .page-previous {
  animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
}
@keyframes f7-flip-next-to-current {
  from {
    border-radius: 30px;
    transform: translateZ(-100vmax) rotateY(180deg);
  }
  to {
    border-radius: 0;
    transform: translateZ(0px) rotateY(0deg);
  }
}
@keyframes f7-flip-current-to-next {
  from {
    border-radius: 0px;
    transform: translateZ(0px) rotateY(0deg);
  }
  to {
    border-radius: 30px;
    transform: translateZ(-100vmax) rotateY(180deg);
  }
}
@keyframes f7-flip-current-to-prev {
  from {
    border-radius: 0px;
    transform: translateZ(0px) rotateY(0deg);
  }
  to {
    border-radius: 30px;
    transform: translateZ(-100vmax) rotateY(-180deg);
  }
}
@keyframes f7-flip-prev-to-current {
  from {
    border-radius: 30px;
    transform: translateZ(-100vmax) rotateY(-180deg);
  }
  to {
    border-radius: 0px;
    transform: translateZ(0px) rotateY(0deg);
  }
}
.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-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 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-parallax-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-parallax-current-to-prev {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-20%);
  }
}
@keyframes f7-parallax-prev-to-current {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(0%);
  }
}
.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-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 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes f7-push-current-to-next {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes f7-push-current-to-prev {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes f7-push-prev-to-current {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
/* === Link === */
:root {
  --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
  --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
  --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
}
.ios {
  --f7-link-pressed-opacity: 0.3;
}
.aurora {
  --f7-link-pressed-opacity: 0.3;
  --f7-link-hover-opacity: 0.65;
}
.link,
.tab-link {
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
}
.link i + span,
.link i + i,
.link span + i,
.link span + span {
  margin-left: 4px;
}
.ios .link {
  transition: opacity 300ms;
}
.ios .link.active-state {
  opacity: var(--f7-link-pressed-opacity);
  transition-duration: 0ms;
}
.aurora .link {
  transition: opacity 300ms;
}
.aurora .link.active-state {
  opacity: var(--f7-link-pressed-opacity);
  transition-duration: 0ms;
}
.aurora.device-desktop .link:not(.active-state):not(.no-hover):hover {
  opacity: var(--f7-link-hover-opacity);
  transition-duration: 0ms;
}
/* === Navbar === */
:root {
  /*
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
  --f7-navbar-bg-image: var(--f7-bars-bg-image);
  --f7-navbar-border-color: var(--f7-bars-border-color);
  --f7-navbar-link-color: var(--f7-bars-link-color);
  --f7-navbar-text-color: var(--f7-bars-text-color);
  */
  --f7-navbar-hide-show-transition-duration: 400ms;
  --f7-navbar-title-line-height: 1.2;
  --f7-navbar-title-font-size: inherit;
  --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-height: 44px;
  --f7-navbar-tablet-height: 44px;
  --f7-navbar-font-size: 17px;
  --f7-navbar-inner-padding-left: 8px;
  --f7-navbar-inner-padding-right: 8px;
  --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-shadow-image: none;
  --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-link-height: var(--f7-navbar-height);
  --f7-navbar-link-line-height: var(--f7-navbar-height);
  */
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-navbar-height: 56px;
  --f7-navbar-tablet-height: 64px;
  --f7-navbar-font-size: 20px;
  --f7-navbar-inner-padding-left: 4px;
  --f7-navbar-inner-padding-right: 4px;
  --f7-navbar-title-font-weight: 500;
  --f7-navbar-title-margin-left: 20px;
  --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-shadow-image: var(--f7-bars-shadow-bottom-image);
  --f7-navbar-large-title-font-size: 34px;
  --f7-navbar-large-title-height: 56px;
  --f7-navbar-large-title-font-weight: 500;
  --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;
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
}
.md .theme-dark,
.md.theme-dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
  --f7-navbar-height: 56px;
  --f7-navbar-tablet-height: 56px;
  --f7-navbar-font-size: 18px;
  --f7-navbar-inner-padding-left: 16px;
  --f7-navbar-inner-padding-right: 16px;
  --f7-navbar-title-font-weight: bold;
  --f7-navbar-title-margin-left: 0;
  --f7-navbar-title-margin-right: 0;
  --f7-navbar-title-text-align: center;
  --f7-navbar-subtitle-font-size: 14px;
  --f7-navbar-subtitle-line-height: 1;
  --f7-navbar-shadow-image: none;
  --f7-navbar-large-title-height: 48px;
  --f7-navbar-large-title-font-size: 28px;
  --f7-navbar-large-title-font-weight: bold;
  --f7-navbar-large-title-letter-spacing: 0;
  --f7-navbar-large-title-padding-vertical: 7px;
  --f7-navbar-link-height: auto;
  --f7-navbar-link-line-height: inherit;
  --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}
.navbars,
.navbar {
  z-index: 500;
  left: 0;
  top: 0;
  width: 100%;
}
.navbars {
  position: absolute;
}
.navbars .navbar {
  z-index: auto;
}
.navbars .navbar-transitioning {
  z-index: 500;
}
.navbar {
  --f7-navbar-large-collapse-progress: 0;
  position: relative;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  margin: 0;
  height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
  color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
  font-size: var(--f7-navbar-font-size);
}
.navbar.stacked {
  display: none;
}
.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;
  line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
  height: var(--f7-navbar-link-height, var(--f7-navbar-height));
}
.navbar .title,
.navbar .left,
.navbar .right {
  position: relative;
  z-index: 10;
}
.navbar .title {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 10;
  font-weight: var(--f7-navbar-title-font-weight);
  display: inline-block;
  line-height: var(--f7-navbar-title-line-height);
  text-align: var(--f7-navbar-title-text-align);
  font-size: var(--f7-navbar-title-font-size);
  margin-left: var(--f7-navbar-title-margin-left);
  margin-right: var(--f7-navbar-title-margin-left);
}
.navbar .subtitle {
  display: block;
  color: var