framework7/css/framework7.css

   1 /**
   2  * Framework7 4.0.5
   3  * Full featured mobile HTML framework for building iOS & Android apps
   4  * http://framework7.io/
   5  *
   6  * Copyright 2014-2019 Vladimir Kharlampidi
   7  *
   8  * Released under the MIT License
   9  *
  10  * Released on: February 14, 2019
  11  */
  12
  13 /*====================
  14   Core
  15   ==================== */
  16 :root {
  17   --f7-theme-color: #007aff;
  18   --f7-theme-color-rgb: 0, 122, 255;
  19   --f7-theme-color-shade: #0066d6;
  20   --f7-theme-color-tint: #298fff;
  21   --f7-safe-area-left: 0px;
  22   --f7-safe-area-right: 0px;
  23   --f7-safe-area-top: 0px;
  24   --f7-safe-area-bottom: 0px;
  25   --f7-safe-area-outer-left: 0px;
  26   --f7-safe-area-outer-right: 0px;
  27   --f7-device-pixel-ratio: 1;
  28 }
  29 @supports (left: env(safe-area-inset-left)) {
  30   :root {
  31     --f7-safe-area-top: env(safe-area-inset-top);
  32     --f7-safe-area-bottom: env(safe-area-inset-bottom);
  33   }
  34   :root .ios-left-edge,
  35   :root .ios-edges,
  36   :root .safe-area-left,
  37   :root .safe-areas,
  38   :root .popup,
  39   :root .sheet-modal,
  40   :root .panel-left {
  41     --f7-safe-area-left: env(safe-area-inset-left);
  42     --f7-safe-area-outer-left: env(safe-area-inset-left);
  43   }
  44   :root .ios-right-edge,
  45   :root .ios-edges,
  46   :root .safe-area-right,
  47   :root .safe-areas,
  48   :root .popup,
  49   :root .sheet-modal,
  50   :root .panel-right {
  51     --f7-safe-area-right: env(safe-area-inset-right);
  52     --f7-safe-area-outer-right: env(safe-area-inset-right);
  53   }
  54   :root .no-safe-areas,
  55   :root .no-safe-area-left,
  56   :root .no-ios-edges,
  57   :root .no-ios-left-edge {
  58     --f7-safe-area-left: 0px;
  59     --f7-safe-area-outer-left: 0px;
  60   }
  61   :root .no-safe-areas,
  62   :root .no-safe-area-right,
  63   :root .no-ios-edges,
  64   :root .no-ios-right-edge {
  65     --f7-safe-area-right: 0px;
  66     --f7-safe-area-outer-right: 0px;
  67   }
  68 }
  69 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  70   :root {
  71     --f7-device-pixel-ratio: 2;
  72   }
  73 }
  74 @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  75   :root {
  76     --f7-device-pixel-ratio: 3;
  77   }
  78 }
  79 /*====================
  80   Fonts
  81   ==================== */
  82 .ios {
  83   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  84   --f7-text-color: #000;
  85   --f7-font-size: 14px;
  86   --f7-line-height: 1.4;
  87 }
  88 .ios .theme-dark,
  89 .ios.theme-dark {
  90   --f7-text-color: #fff;
  91 }
  92 .md {
  93   --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  94   --f7-text-color: #212121;
  95   --f7-font-size: 14px;
  96   --f7-line-height: 1.5;
  97 }
  98 .md .theme-dark,
  99 .md.theme-dark {
 100   --f7-text-color: rgba(255, 255, 255, 0.87);
 101 }
 102 /*====================
 103   Bars
 104   ==================== */
 105 :root {
 106   /*
 107   --f7-bars-link-color: var(--f7-theme-color);
 108   */
 109   --f7-bars-bg-image: none;
 110   --f7-bars-bg-color: #f7f7f8;
 111   --f7-bars-bg-color-rgb: 247, 247, 248;
 112   --f7-bars-text-color: #000;
 113   --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%);
 114   --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%);
 115 }
 116 .theme-dark {
 117   --f7-bars-bg-color: #1b1b1b;
 118   --f7-bars-text-color: #fff;
 119 }
 120 .ios {
 121   --f7-bars-border-color: #c4c4c4;
 122 }
 123 .ios .theme-dark,
 124 .ios.theme-dark {
 125   --f7-bars-border-color: #282829;
 126 }
 127 .md {
 128   --f7-bars-border-color: transparent;
 129 }
 130 /*====================
 131   Color Themes
 132   ==================== */
 133 .text-color-primary {
 134   --f7-theme-color-text-color: var(--f7-theme-color);
 135 }
 136 .bg-color-primary {
 137   --f7-theme-color-bg-color: var(--f7-theme-color);
 138 }
 139 .border-color-primary {
 140   --f7-theme-color-border-color: var(--f7-theme-color);
 141 }
 142 .ripple-color-primary {
 143   --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
 144 }
 145 :root {
 146   --f7-color-red: #ff3b30;
 147   --f7-color-red-rgb: 255, 59, 48;
 148   --f7-color-red-shade: #ff1407;
 149   --f7-color-red-tint: #ff6259;
 150   --f7-color-green: #4cd964;
 151   --f7-color-green-rgb: 76, 217, 100;
 152   --f7-color-green-shade: #2cd048;
 153   --f7-color-green-tint: #6ee081;
 154   --f7-color-blue: #2196f3;
 155   --f7-color-blue-rgb: 33, 150, 243;
 156   --f7-color-blue-shade: #0c82df;
 157   --f7-color-blue-tint: #48a8f5;
 158   --f7-color-pink: #ff2d55;
 159   --f7-color-pink-rgb: 255, 45, 85;
 160   --f7-color-pink-shade: #ff0434;
 161   --f7-color-pink-tint: #ff5676;
 162   --f7-color-yellow: #ffcc00;
 163   --f7-color-yellow-rgb: 255, 204, 0;
 164   --f7-color-yellow-shade: #d6ab00;
 165   --f7-color-yellow-tint: #ffd429;
 166   --f7-color-orange: #ff9500;
 167   --f7-color-orange-rgb: 255, 149, 0;
 168   --f7-color-orange-shade: #d67d00;
 169   --f7-color-orange-tint: #ffa629;
 170   --f7-color-purple: #9c27b0;
 171   --f7-color-purple-rgb: 156, 39, 176;
 172   --f7-color-purple-shade: #7e208f;
 173   --f7-color-purple-tint: #b92fd1;
 174   --f7-color-deeppurple: #673ab7;
 175   --f7-color-deeppurple-rgb: 103, 58, 183;
 176   --f7-color-deeppurple-shade: #563098;
 177   --f7-color-deeppurple-tint: #7c52c8;
 178   --f7-color-lightblue: #5ac8fa;
 179   --f7-color-lightblue-rgb: 90, 200, 250;
 180   --f7-color-lightblue-shade: #32bbf9;
 181   --f7-color-lightblue-tint: #82d5fb;
 182   --f7-color-teal: #009688;
 183   --f7-color-teal-rgb: 0, 150, 136;
 184   --f7-color-teal-shade: #006d63;
 185   --f7-color-teal-tint: #00bfad;
 186   --f7-color-lime: #cddc39;
 187   --f7-color-lime-rgb: 205, 220, 57;
 188   --f7-color-lime-shade: #bac923;
 189   --f7-color-lime-tint: #d6e25c;
 190   --f7-color-deeporange: #ff6b22;
 191   --f7-color-deeporange-rgb: 255, 107, 34;
 192   --f7-color-deeporange-shade: #f85200;
 193   --f7-color-deeporange-tint: #ff864b;
 194   --f7-color-gray: #8e8e93;
 195   --f7-color-gray-rgb: 142, 142, 147;
 196   --f7-color-gray-shade: #79797f;
 197   --f7-color-gray-tint: #a3a3a7;
 198   --f7-color-white: #ffffff;
 199   --f7-color-white-rgb: 255, 255, 255;
 200   --f7-color-white-shade: #ebebeb;
 201   --f7-color-white-tint: #ffffff;
 202   --f7-color-black: #000000;
 203   --f7-color-black-rgb: 0, 0, 0;
 204   --f7-color-black-shade: #000000;
 205   --f7-color-black-tint: #141414;
 206 }
 207 .color-theme-red {
 208   --f7-theme-color: #ff3b30;
 209   --f7-theme-color-rgb: 255, 59, 48;
 210   --f7-theme-color-shade: #ff1407;
 211   --f7-theme-color-tint: #ff6259;
 212 }
 213 .color-theme-green {
 214   --f7-theme-color: #4cd964;
 215   --f7-theme-color-rgb: 76, 217, 100;
 216   --f7-theme-color-shade: #2cd048;
 217   --f7-theme-color-tint: #6ee081;
 218 }
 219 .color-theme-blue {
 220   --f7-theme-color: #2196f3;
 221   --f7-theme-color-rgb: 33, 150, 243;
 222   --f7-theme-color-shade: #0c82df;
 223   --f7-theme-color-tint: #48a8f5;
 224 }
 225 .color-theme-pink {
 226   --f7-theme-color: #ff2d55;
 227   --f7-theme-color-rgb: 255, 45, 85;
 228   --f7-theme-color-shade: #ff0434;
 229   --f7-theme-color-tint: #ff5676;
 230 }
 231 .color-theme-yellow {
 232   --f7-theme-color: #ffcc00;
 233   --f7-theme-color-rgb: 255, 204, 0;
 234   --f7-theme-color-shade: #d6ab00;
 235   --f7-theme-color-tint: #ffd429;
 236 }
 237 .color-theme-orange {
 238   --f7-theme-color: #ff9500;
 239   --f7-theme-color-rgb: 255, 149, 0;
 240   --f7-theme-color-shade: #d67d00;
 241   --f7-theme-color-tint: #ffa629;
 242 }
 243 .color-theme-purple {
 244   --f7-theme-color: #9c27b0;
 245   --f7-theme-color-rgb: 156, 39, 176;
 246   --f7-theme-color-shade: #7e208f;
 247   --f7-theme-color-tint: #b92fd1;
 248 }
 249 .color-theme-deeppurple {
 250   --f7-theme-color: #673ab7;
 251   --f7-theme-color-rgb: 103, 58, 183;
 252   --f7-theme-color-shade: #563098;
 253   --f7-theme-color-tint: #7c52c8;
 254 }
 255 .color-theme-lightblue {
 256   --f7-theme-color: #5ac8fa;
 257   --f7-theme-color-rgb: 90, 200, 250;
 258   --f7-theme-color-shade: #32bbf9;
 259   --f7-theme-color-tint: #82d5fb;
 260 }
 261 .color-theme-teal {
 262   --f7-theme-color: #009688;
 263   --f7-theme-color-rgb: 0, 150, 136;
 264   --f7-theme-color-shade: #006d63;
 265   --f7-theme-color-tint: #00bfad;
 266 }
 267 .color-theme-lime {
 268   --f7-theme-color: #cddc39;
 269   --f7-theme-color-rgb: 205, 220, 57;
 270   --f7-theme-color-shade: #bac923;
 271   --f7-theme-color-tint: #d6e25c;
 272 }
 273 .color-theme-deeporange {
 274   --f7-theme-color: #ff6b22;
 275   --f7-theme-color-rgb: 255, 107, 34;
 276   --f7-theme-color-shade: #f85200;
 277   --f7-theme-color-tint: #ff864b;
 278 }
 279 .color-theme-gray {
 280   --f7-theme-color: #8e8e93;
 281   --f7-theme-color-rgb: 142, 142, 147;
 282   --f7-theme-color-shade: #79797f;
 283   --f7-theme-color-tint: #a3a3a7;
 284 }
 285 .color-theme-white {
 286   --f7-theme-color: #ffffff;
 287   --f7-theme-color-rgb: 255, 255, 255;
 288   --f7-theme-color-shade: #ebebeb;
 289   --f7-theme-color-tint: #ffffff;
 290 }
 291 .color-theme-black {
 292   --f7-theme-color: #000000;
 293   --f7-theme-color-rgb: 0, 0, 0;
 294   --f7-theme-color-shade: #000000;
 295   --f7-theme-color-tint: #141414;
 296 }
 297 .color-red {
 298   --f7-theme-color: #ff3b30;
 299   --f7-theme-color-rgb: 255, 59, 48;
 300   --f7-theme-color-shade: #ff1407;
 301   --f7-theme-color-tint: #ff6259;
 302 }
 303 .text-color-red {
 304   --f7-theme-color-text-color: #ff3b30;
 305 }
 306 .bg-color-red {
 307   --f7-theme-color-bg-color: #ff3b30;
 308 }
 309 .border-color-red {
 310   --f7-theme-color-border-color: #ff3b30;
 311 }
 312 .ripple-color-red,
 313 .ripple-red {
 314   --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
 315 }
 316 .color-green {
 317   --f7-theme-color: #4cd964;
 318   --f7-theme-color-rgb: 76, 217, 100;
 319   --f7-theme-color-shade: #2cd048;
 320   --f7-theme-color-tint: #6ee081;
 321 }
 322 .text-color-green {
 323   --f7-theme-color-text-color: #4cd964;
 324 }
 325 .bg-color-green {
 326   --f7-theme-color-bg-color: #4cd964;
 327 }
 328 .border-color-green {
 329   --f7-theme-color-border-color: #4cd964;
 330 }
 331 .ripple-color-green,
 332 .ripple-green {
 333   --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
 334 }
 335 .color-blue {
 336   --f7-theme-color: #2196f3;
 337   --f7-theme-color-rgb: 33, 150, 243;
 338   --f7-theme-color-shade: #0c82df;
 339   --f7-theme-color-tint: #48a8f5;
 340 }
 341 .text-color-blue {
 342   --f7-theme-color-text-color: #2196f3;
 343 }
 344 .bg-color-blue {
 345   --f7-theme-color-bg-color: #2196f3;
 346 }
 347 .border-color-blue {
 348   --f7-theme-color-border-color: #2196f3;
 349 }
 350 .ripple-color-blue,
 351 .ripple-blue {
 352   --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
 353 }
 354 .color-pink {
 355   --f7-theme-color: #ff2d55;
 356   --f7-theme-color-rgb: 255, 45, 85;
 357   --f7-theme-color-shade: #ff0434;
 358   --f7-theme-color-tint: #ff5676;
 359 }
 360 .text-color-pink {
 361   --f7-theme-color-text-color: #ff2d55;
 362 }
 363 .bg-color-pink {
 364   --f7-theme-color-bg-color: #ff2d55;
 365 }
 366 .border-color-pink {
 367   --f7-theme-color-border-color: #ff2d55;
 368 }
 369 .ripple-color-pink,
 370 .ripple-pink {
 371   --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
 372 }
 373 .color-yellow {
 374   --f7-theme-color: #ffcc00;
 375   --f7-theme-color-rgb: 255, 204, 0;
 376   --f7-theme-color-shade: #d6ab00;
 377   --f7-theme-color-tint: #ffd429;
 378 }
 379 .text-color-yellow {
 380   --f7-theme-color-text-color: #ffcc00;
 381 }
 382 .bg-color-yellow {
 383   --f7-theme-color-bg-color: #ffcc00;
 384 }
 385 .border-color-yellow {
 386   --f7-theme-color-border-color: #ffcc00;
 387 }
 388 .ripple-color-yellow,
 389 .ripple-yellow {
 390   --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
 391 }
 392 .color-orange {
 393   --f7-theme-color: #ff9500;
 394   --f7-theme-color-rgb: 255, 149, 0;
 395   --f7-theme-color-shade: #d67d00;
 396   --f7-theme-color-tint: #ffa629;
 397 }
 398 .text-color-orange {
 399   --f7-theme-color-text-color: #ff9500;
 400 }
 401 .bg-color-orange {
 402   --f7-theme-color-bg-color: #ff9500;
 403 }
 404 .border-color-orange {
 405   --f7-theme-color-border-color: #ff9500;
 406 }
 407 .ripple-color-orange,
 408 .ripple-orange {
 409   --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
 410 }
 411 .color-purple {
 412   --f7-theme-color: #9c27b0;
 413   --f7-theme-color-rgb: 156, 39, 176;
 414   --f7-theme-color-shade: #7e208f;
 415   --f7-theme-color-tint: #b92fd1;
 416 }
 417 .text-color-purple {
 418   --f7-theme-color-text-color: #9c27b0;
 419 }
 420 .bg-color-purple {
 421   --f7-theme-color-bg-color: #9c27b0;
 422 }
 423 .border-color-purple {
 424   --f7-theme-color-border-color: #9c27b0;
 425 }
 426 .ripple-color-purple,
 427 .ripple-purple {
 428   --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
 429 }
 430 .color-deeppurple {
 431   --f7-theme-color: #673ab7;
 432   --f7-theme-color-rgb: 103, 58, 183;
 433   --f7-theme-color-shade: #563098;
 434   --f7-theme-color-tint: #7c52c8;
 435 }
 436 .text-color-deeppurple {
 437   --f7-theme-color-text-color: #673ab7;
 438 }
 439 .bg-color-deeppurple {
 440   --f7-theme-color-bg-color: #673ab7;
 441 }
 442 .border-color-deeppurple {
 443   --f7-theme-color-border-color: #673ab7;
 444 }
 445 .ripple-color-deeppurple,
 446 .ripple-deeppurple {
 447   --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
 448 }
 449 .color-lightblue {
 450   --f7-theme-color: #5ac8fa;
 451   --f7-theme-color-rgb: 90, 200, 250;
 452   --f7-theme-color-shade: #32bbf9;
 453   --f7-theme-color-tint: #82d5fb;
 454 }
 455 .text-color-lightblue {
 456   --f7-theme-color-text-color: #5ac8fa;
 457 }
 458 .bg-color-lightblue {
 459   --f7-theme-color-bg-color: #5ac8fa;
 460 }
 461 .border-color-lightblue {
 462   --f7-theme-color-border-color: #5ac8fa;
 463 }
 464 .ripple-color-lightblue,
 465 .ripple-lightblue {
 466   --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
 467 }
 468 .color-teal {
 469   --f7-theme-color: #009688;
 470   --f7-theme-color-rgb: 0, 150, 136;
 471   --f7-theme-color-shade: #006d63;
 472   --f7-theme-color-tint: #00bfad;
 473 }
 474 .text-color-teal {
 475   --f7-theme-color-text-color: #009688;
 476 }
 477 .bg-color-teal {
 478   --f7-theme-color-bg-color: #009688;
 479 }
 480 .border-color-teal {
 481   --f7-theme-color-border-color: #009688;
 482 }
 483 .ripple-color-teal,
 484 .ripple-teal {
 485   --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
 486 }
 487 .color-lime {
 488   --f7-theme-color: #cddc39;
 489   --f7-theme-color-rgb: 205, 220, 57;
 490   --f7-theme-color-shade: #bac923;
 491   --f7-theme-color-tint: #d6e25c;
 492 }
 493 .text-color-lime {
 494   --f7-theme-color-text-color: #cddc39;
 495 }
 496 .bg-color-lime {
 497   --f7-theme-color-bg-color: #cddc39;
 498 }
 499 .border-color-lime {
 500   --f7-theme-color-border-color: #cddc39;
 501 }
 502 .ripple-color-lime,
 503 .ripple-lime {
 504   --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
 505 }
 506 .color-deeporange {
 507   --f7-theme-color: #ff6b22;
 508   --f7-theme-color-rgb: 255, 107, 34;
 509   --f7-theme-color-shade: #f85200;
 510   --f7-theme-color-tint: #ff864b;
 511 }
 512 .text-color-deeporange {
 513   --f7-theme-color-text-color: #ff6b22;
 514 }
 515 .bg-color-deeporange {
 516   --f7-theme-color-bg-color: #ff6b22;
 517 }
 518 .border-color-deeporange {
 519   --f7-theme-color-border-color: #ff6b22;
 520 }
 521 .ripple-color-deeporange,
 522 .ripple-deeporange {
 523   --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
 524 }
 525 .color-gray {
 526   --f7-theme-color: #8e8e93;
 527   --f7-theme-color-rgb: 142, 142, 147;
 528   --f7-theme-color-shade: #79797f;
 529   --f7-theme-color-tint: #a3a3a7;
 530 }
 531 .text-color-gray {
 532   --f7-theme-color-text-color: #8e8e93;
 533 }
 534 .bg-color-gray {
 535   --f7-theme-color-bg-color: #8e8e93;
 536 }
 537 .border-color-gray {
 538   --f7-theme-color-border-color: #8e8e93;
 539 }
 540 .ripple-color-gray,
 541 .ripple-gray {
 542   --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
 543 }
 544 .color-white {
 545   --f7-theme-color: #ffffff;
 546   --f7-theme-color-rgb: 255, 255, 255;
 547   --f7-theme-color-shade: #ebebeb;
 548   --f7-theme-color-tint: #ffffff;
 549 }
 550 .text-color-white {
 551   --f7-theme-color-text-color: #ffffff;
 552 }
 553 .bg-color-white {
 554   --f7-theme-color-bg-color: #ffffff;
 555 }
 556 .border-color-white {
 557   --f7-theme-color-border-color: #ffffff;
 558 }
 559 .ripple-color-white,
 560 .ripple-white {
 561   --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
 562 }
 563 .color-black {
 564   --f7-theme-color: #000000;
 565   --f7-theme-color-rgb: 0, 0, 0;
 566   --f7-theme-color-shade: #000000;
 567   --f7-theme-color-tint: #141414;
 568 }
 569 .text-color-black {
 570   --f7-theme-color-text-color: #000000;
 571 }
 572 .bg-color-black {
 573   --f7-theme-color-bg-color: #000000;
 574 }
 575 .border-color-black {
 576   --f7-theme-color-border-color: #000000;
 577 }
 578 .ripple-color-black,
 579 .ripple-black {
 580   --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
 581 }
 582 @font-face {
 583   font-family: 'framework7-core-icons';
 584   src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAucABAAAAAAFdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALgAAAABkAAAAciVvo20dERUYAAAmwAAAAIwAAACQAdwBXR1BPUwAAC1AAAAAuAAAANuAY7+xHU1VCAAAJ1AAAAXsAAANI9IT86E9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAnQAAACIAAABYt6F0cBjdnQgAAAC/AAAAAQAAAAEABEBRGdhc3AAAAmoAAAACAAAAAj//wADZ2x5ZgAAA4gAAAOZAAAITCn3I+5oZWFkAAABbAAAADAAAAA2FHn/62hoZWEAAAGcAAAAIAAAACQHggM3aG10eAAAAigAAABMAAABDCk9AApsb2NhAAADAAAAAIgAAACIN4I51G1heHAAAAG8AAAAHwAAACAAiQBLbmFtZQAAByQAAAFTAAAC1pgGDVZwb3N0AAAIeAAAAS4AAAH92CB3HXjaY2BkYGAA4uKM/yHx/DZfGbiZGEDgRu397TD6/89/vSxpTJ+BXA4GsDQAfeMOn3jaY2BkYGD6/K+XQY8l7f9PBgaWNAagCApwBgCRZgXAeNpjYGRgYHBmkGJgYQABJiBmZACJOTDogQQADRYA1QB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wLxWSCWAGI3CGZKg/KBNBNIjTHEHKazED1MQD4AiKAPYnjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DEAMiAzQDRANqA3wDlgOqA7wDzgP2BAwEJnja7VTPaxtHFH7fyNLGCFuWrF/tpZa82nVpcYhW0qZUrgWKezAtDcHuwZdYJeiUQ0yIe5N8LAGhHhyMRW6GHNqTZdOeKqu9KBc1oFMpPqlQh0JOPgXiVd/MaoOT/gclMLNv5pu3b7753pshQWEi2sc6+UijxUPQ1WJbm6AX2cOA/7TY9gke0qFPwn4Jt7UAXhXbkLgVtsKmFZ4Pf/dttYp158cwLI4Gbl3VeRS+JsfvsHfY/x4TlzAfo58IBdME90ncxAbfsBDFKEEUSQei8WwhZ2Tj0UDayPltM4SEbf6wViyuFR/fXV29u4ry1L3p6a3pLZSKa0tLa1+vSvjl9L0pCbocRr/C4k0iRJl0SMhIyzCNXCH7AeIwAfwVnIsHT06C8VRwGGoLMQzG54KdE4kOQy7n0Rm6eMLvwHscJaGZeTMwn5Yx4rGolkhLlswWpR1jR1tcXqlUHn6zoP20eePGZrmxY9Rj2kLlYaWy8tmiVt4slzcVLzKow+f1E81qHNLubG/rrRYKytCY+zlaaNAV3jWWkk4JDS3naVPv9/XmnznXjn1pCr/hjoxnIwHTbiKkO/2mvj62hNFL1uIj1oLfM7uwDKYfZUmlvFdh+MEn5zN3OvL8w9Az+IZSE567Ssg9otRzOdtMxrR7B3q9rv/M31rmzfU8U01o4+VMra4rHZ3GRFWcU1DmN2OyQ8LmjNqmmNPFTESfm4jMCFHqFXpe+9T53bnY24MPWfj29v7p2d6S/er0NexcSLf/aiYF4/fXRkvqZH3flQbXWUBPsxK+RIkCPElo19gbH+qnWzpjbOa/UJxpA30Y6u2nJaRi/nwqhr5joX9uWfuWpfbsIsm68rkzkLogOaLk8+fJrmvcvW7jc44j882Z1MwDJQ4MZTw+r304CGvj+tw+0Gs1XdVhQ1RxzkxmiXIznL+ZQBocy1Py2Dk+dmj0frXqtRLo6GhER9i/BNKbnPOQuQIlz86SXYwZezVVxX3OF0FTpBUtVJtN3Wv46tJE/uN0RUt0paY2a29N4u/+mdN1njSEdaFk82Kv8L00lPZKehvWszuRW78gqszbd0RWv8k3Q3/wABtstrdpfDc3RF8YNMmvhtTEkqLMp2cvVddg99Fg8Gh3t1aocavL78dYGAycPwZ4XLdrNbuuvm/Xj9ozlU+ZfVk3zlNcb6IhhzlVPz7JT1jMT9YGaxTOu9Uhuzys22HkcjuqEf0LOMqq8QAAAHjarZC9TgJBFIXP8GOihTFG+lsCYTfDhoRAZUJCQ2MstnazjDCB3cFhE0J8Fms7G2ufwtha+hzeGaawoLBgk5v59sy5M+cOgEu8QeDwtXEfWKCF18A1XOAzcB1S3AZuoCVeAjdxJb4Cn6FVu2anaJzz353vcizQxXPgGm7wEbiOB3wHbqArngI3QeI98BnrP5jAYIM9LDQWWKICceYcHV4TSPQxQo85xRoZ5uwquCwrM3ZnTE4v+AztdzExm73Vi2VF7bxDieyPepSus7kutKXZMrPrrNjoOTsfudm1Kuw4hMUKQ0R8tWPFpD2X2LLVZoXaGbsaRrmxKtK5KVk+6v1rmHqx8qvl+ZSfKua5CGOu/0c4+AesJb4OL4OpKaupsQtFSSxpTEeDsj6Iksi9xSmmTtlneV97H3EUFyb2qxsMqbJbbUqSsh9LKekEl/4CxNCFmAB42m2QB2/CMBCF30FbSBgJBcJof0333nsoColprEIcOWb8+ao1I4hIPcmS796973xGDvP4/QHhv9jXh5BDHjbqaKAJBy200UEXO9jFHg5wiCMc4wSnOMM5LnCJK1zjBre4wz0e8IgnPOMFr3jDOz7wSTnK0wZt0hYVqEgGmVSiMlWoShbZVKNtqlODmuRQi9rUoa6ZME/6octFUvNDNpYiciX/CtWsYizFYWCl2oD1lc4rnpRikmYlrfrfPTHVdzvTqSGVDLa8LjuRULzPfU9xXfEHImEzh7WA94RSYqiRhvQCLmZKIRFyPjCZ8JhJN2JTZabEUbyCB2ISWQEbMMVcKUZRsOaJJRsbS00vEivpLuZpfnm1iE7s7H/o1TJE3VFdGFO9OH+drv8BbS2SHgAAAAAAAf//AAJ42mNgZGBg4AFiGSBmAkJmBk0GRgYtBicgmwUsxgAADTQAzwB42nVSSVLCQBR9HSmJOIAhSkpJkEGwEOcZcVy4cO2SDSu1inJFuXDhUTyBJ/AcnsMjiO93TAKhUl1Jd7/3+v2hGwpABh5aUP3e4AUmUkQwHEIY1X9+7BGDvyOX0rMJZfwiDRuv6tPIGB2jawwwRXwDdzhEFmUOD3WuFjlXOTwUuSsijxssjPBlOFhGgQqf3cb8CLvKGEshl6GyjS7e8YEvfONHmWoNm4xRoG5dn3Jjng6xCnaRi2kiZ19xNaGIZ7bFOclD+D1mnuRwhrkYl9cVutifYALXy3/GworuYiPMdQezE4xkcMoOjXvVUNL30sQ9rlmhrd2r/LJaU6MqH/q2uUpSiH8HM2O8YPIqDlil3LLDvB1mldNrPwOLevG2wyhy4oK9qtI/S2102xF/xEg5ugsS4NN8N3V25QFPeMM5e1AnU6Kz+JT4l8pPYrjLucFYTfbG1tEs9ijwbOmKIlQqumW/PCLR2zjmWw8Qv+Y0z1hcuTpu5Q/+XTUsAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlguvb+dhgNAEgzB6UAAAA=") format("woff");
 585   font-weight: 400;
 586   font-style: normal;
 587 }
 588 @font-face {
 589   font-family: 'framework7-skeleton';
 590   src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
 591   font-weight: 300, 400, 500, 600, 700;
 592   font-style: normal, italic;
 593 }
 594 html,
 595 body,
 596 .framework7-root {
 597   position: relative;
 598   height: 100%;
 599   width: 100%;
 600   overflow-x: hidden;
 601 }
 602 body {
 603   margin: 0;
 604   padding: 0;
 605   width: 100%;
 606   background: #fff;
 607   overflow: hidden;
 608   -webkit-text-size-adjust: 100%;
 609   -webkit-font-smoothing: antialiased;
 610   font-family: var(--f7-font-family);
 611   font-size: var(--f7-font-size);
 612   line-height: var(--f7-line-height);
 613   color: var(--f7-text-color);
 614 }
 615 .theme-dark {
 616   color: var(--f7-text-color);
 617 }
 618 .framework7-root {
 619   overflow: hidden;
 620   box-sizing: border-box;
 621 }
 622 .framework7-initializing *,
 623 .framework7-initializing *:before,
 624 .framework7-initializing *:after {
 625   transition-duration: 0ms !important;
 626 }
 627 .device-ios,
 628 .device-android {
 629   cursor: pointer;
 630 }
 631 .device-ios {
 632   touch-action: manipulation;
 633 }
 634 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 635   html,
 636   body,
 637   .framework7-root {
 638     height: 671px;
 639   }
 640 }
 641 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 642   html,
 643   body,
 644   .framework7-root {
 645     height: 672px;
 646   }
 647 }
 648 * {
 649   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 650   -webkit-touch-callout: none;
 651 }
 652 a,
 653 input,
 654 textarea,
 655 select {
 656   outline: 0;
 657 }
 658 a {
 659   cursor: pointer;
 660   text-decoration: none;
 661   color: var(--f7-theme-color);
 662 }
 663 p {
 664   margin: 1em 0;
 665 }
 666 .disabled {
 667   opacity: 0.55 !important;
 668   pointer-events: none !important;
 669 }
 670 html.device-full-viewport,
 671 html.device-full-viewport body {
 672   height: 100vh;
 673 }
 674 .ios .md-only,
 675 .ios .if-md {
 676   display: none !important;
 677 }
 678 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 679   .ios,
 680   .ios body,
 681   .ios .framework7-root {
 682     height: 671px;
 683   }
 684 }
 685 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 686   .ios,
 687   .ios body,
 688   .ios .framework7-root {
 689     height: 672px;
 690   }
 691 }
 692 .md .ios-only,
 693 .md .if-ios {
 694   display: none !important;
 695 }
 696 /* === Statusbar === */
 697 :root {
 698   --f7-statusbar-height: 0px;
 699   --f7-statusbar-bg-color: var(--f7-bars-bg-color);
 700 }
 701 .device-ios {
 702   --f7-statusbar-height: var(--f7-safe-area-top, 20px);
 703 }
 704 .device-android {
 705   --f7-statusbar-height: var(--f7-safe-area-top, 24px);
 706 }
 707 .with-statusbar.ios:not(.device-ios):not(.device-android) {
 708   --f7-statusbar-height: 20px;
 709 }
 710 .with-statusbar.md:not(.device-ios):not(.device-android) {
 711   --f7-statusbar-height: 24px;
 712 }
 713 @supports not (top: env(safe-area-inset-top)) {
 714   .with-statusbar.device-ios {
 715     --f7-statusbar-height: 20px;
 716   }
 717 }
 718 @supports not (top: env(safe-area-inset-top)) {
 719   .with-statusbar.device-android {
 720     --f7-statusbar-height: 24px;
 721   }
 722 }
 723 .statusbar {
 724   position: absolute;
 725   left: 0;
 726   top: 0;
 727   width: 100%;
 728   z-index: 10000;
 729   box-sizing: border-box;
 730   display: block;
 731   height: var(--f7-statusbar-height);
 732 }
 733 .framework7-root {
 734   padding-top: var(--f7-statusbar-height);
 735 }
 736 .ios .statusbar {
 737   background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
 738 }
 739 .md .statusbar {
 740   background: var(--f7-statusbar-bg-color, var(--f7-theme-color-shade));
 741 }
 742 /* === Views === */
 743 .views,
 744 .view {
 745   position: relative;
 746   height: 100%;
 747   z-index: 5000;
 748   overflow: hidden;
 749   box-sizing: border-box;
 750 }
 751 /* === Pages === */
 752 :root {
 753   --f7-page-master-width: 320px;
 754   --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
 755   --f7-page-master-border-width: 1px;
 756 }
 757 .ios {
 758   --f7-page-bg-color: #efeff4;
 759   --f7-page-transition-duration: 400ms;
 760   --f7-page-swipeback-transition-duration: 400ms;
 761 }
 762 .md {
 763   --f7-page-bg-color: #fff;
 764   --f7-page-transition-duration: 250ms;
 765   --f7-page-swipeback-transition-duration: 400ms;
 766 }
 767 .theme-dark {
 768   --f7-page-bg-color: #171717;
 769   --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
 770 }
 771 .pages {
 772   position: relative;
 773   width: 100%;
 774   height: 100%;
 775   overflow: hidden;
 776 }
 777 .page {
 778   box-sizing: border-box;
 779   position: absolute;
 780   left: 0;
 781   top: 0;
 782   width: 100%;
 783   height: 100%;
 784   transform: translate3d(0, 0, 0);
 785   background-color: var(--f7-page-bg-color);
 786 }
 787 .page.stacked {
 788   display: none;
 789 }
 790 .page-with-navbar-large-collapsed {
 791   --f7-navbar-large-collapse-progress: 1;
 792 }
 793 .page-previous {
 794   pointer-events: none;
 795 }
 796 .page-content {
 797   will-change: scroll-position;
 798   overflow: auto;
 799   -webkit-overflow-scrolling: touch;
 800   box-sizing: border-box;
 801   height: 100%;
 802   position: relative;
 803   z-index: 1;
 804 }
 805 .page-transitioning,
 806 .page-transitioning .page-shadow-effect,
 807 .page-transitioning .page-opacity-effect {
 808   transition-duration: var(--f7-page-transition-duration);
 809 }
 810 .page-transitioning-swipeback,
 811 .page-transitioning-swipeback .page-shadow-effect,
 812 .page-transitioning-swipeback .page-opacity-effect {
 813   transition-duration: var(--f7-page-swipeback-transition-duration);
 814 }
 815 .router-transition-forward .page-next,
 816 .router-transition-backward .page-next,
 817 .router-transition-forward .page-current,
 818 .router-transition-backward .page-current,
 819 .router-transition-forward .page-previous:not(.stacked),
 820 .router-transition-backward .page-previous:not(.stacked) {
 821   pointer-events: none;
 822 }
 823 .page-shadow-effect {
 824   position: absolute;
 825   top: 0;
 826   width: 16px;
 827   bottom: 0;
 828   z-index: -1;
 829   content: '';
 830   opacity: 0;
 831   right: 100%;
 832   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%);
 833 }
 834 .page-opacity-effect {
 835   position: absolute;
 836   left: 0;
 837   top: 0;
 838   background: rgba(0, 0, 0, 0.1);
 839   width: 100%;
 840   bottom: 0;
 841   content: '';
 842   opacity: 0;
 843   z-index: 10000;
 844 }
 845 .ios .page-previous {
 846   transform: translate3d(-20%, 0, 0);
 847 }
 848 .ios .page-next {
 849   transform: translate3d(100%, 0, 0);
 850 }
 851 .ios .page-previous .page-opacity-effect {
 852   opacity: 1;
 853 }
 854 .ios .page-previous:after {
 855   opacity: 1;
 856 }
 857 .ios .page-current .page-shadow-effect {
 858   opacity: 1;
 859 }
 860 .ios .router-transition-forward .page-next,
 861 .ios .router-transition-forward .page-current {
 862   will-change: transform;
 863 }
 864 .ios .router-transition-forward .page-next {
 865   animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
 866 }
 867 .ios .router-transition-forward .page-next:before {
 868   position: absolute;
 869   top: 0;
 870   width: 16px;
 871   bottom: 0;
 872   z-index: -1;
 873   content: '';
 874   opacity: 0;
 875   right: 100%;
 876   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%);
 877   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 878 }
 879 .ios .router-transition-forward .page-current {
 880   animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
 881 }
 882 .ios .router-transition-forward .page-current:after {
 883   position: absolute;
 884   left: 0;
 885   top: 0;
 886   background: rgba(0, 0, 0, 0.1);
 887   width: 100%;
 888   bottom: 0;
 889   content: '';
 890   opacity: 0;
 891   z-index: 10000;
 892   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 893 }
 894 .ios .router-transition-backward .page-previous,
 895 .ios .router-transition-backward .page-current {
 896   will-change: transform;
 897 }
 898 .ios .router-transition-backward .page-previous {
 899   animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
 900 }
 901 .ios .router-transition-backward .page-previous:after {
 902   position: absolute;
 903   left: 0;
 904   top: 0;
 905   background: rgba(0, 0, 0, 0.1);
 906   width: 100%;
 907   bottom: 0;
 908   content: '';
 909   opacity: 0;
 910   z-index: 10000;
 911   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 912 }
 913 .ios .router-transition-backward .page-current {
 914   animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
 915 }
 916 .ios .router-transition-backward .page-current:before {
 917   position: absolute;
 918   top: 0;
 919   width: 16px;
 920   bottom: 0;
 921   z-index: -1;
 922   content: '';
 923   opacity: 0;
 924   right: 100%;
 925   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%);
 926   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 927 }
 928 .ios .router-dynamic-navbar-inside .page-shadow-effect,
 929 .ios .router-dynamic-navbar-inside .page-opacity-effect {
 930   top: var(--f7-navbar-height);
 931 }
 932 .ios .router-dynamic-navbar-inside .page-next:before,
 933 .ios .router-dynamic-navbar-inside .page-current:after,
 934 .ios .router-dynamic-navbar-inside .page-current:before,
 935 .ios .router-dynamic-navbar-inside .page-previous:after {
 936   top: var(--f7-navbar-height);
 937 }
 938 @keyframes ios-page-next-to-current {
 939   from {
 940     transform: translate3d(100%, 0, 0);
 941   }
 942   to {
 943     transform: translate3d(0%, 0, 0);
 944   }
 945 }
 946 @keyframes ios-page-previous-to-current {
 947   from {
 948     transform: translate3d(-20%, 0, 0);
 949   }
 950   to {
 951     transform: translate3d(0%, 0, 0);
 952   }
 953 }
 954 @keyframes ios-page-current-to-previous {
 955   from {
 956     transform: translate3d(0, 0, 0);
 957   }
 958   to {
 959     transform: translate3d(-20%, 0, 0);
 960   }
 961 }
 962 @keyframes ios-page-current-to-next {
 963   from {
 964     transform: translate3d(0, 0, 0);
 965   }
 966   to {
 967     transform: translate3d(100%, 0, 0);
 968   }
 969 }
 970 @keyframes ios-page-element-fade-in {
 971   from {
 972     opacity: 0;
 973   }
 974   to {
 975     opacity: 1;
 976   }
 977 }
 978 @keyframes ios-page-element-fade-out {
 979   from {
 980     opacity: 1;
 981   }
 982   to {
 983     opacity: 0;
 984   }
 985 }
 986 .md .page-next {
 987   transform: translate3d(0, 56px, 0);
 988   opacity: 0;
 989   pointer-events: none;
 990 }
 991 .md .page-next.page-next-on-right {
 992   transform: translate3d(100%, 0, 0);
 993 }
 994 .md .router-transition-forward .page-next {
 995   will-change: transform, opacity;
 996   animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
 997 }
 998 .md .router-transition-forward .page-current {
 999   animation: none;
1000 }
1001 .md .router-transition-backward .page-current {
1002   will-change: transform, opacity;
1003   animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1004 }
1005 .md .router-transition-backward .page-previous {
1006   animation: none;
1007 }
1008 @keyframes md-page-next-to-current {
1009   from {
1010     transform: translate3d(0, 56px, 0);
1011     opacity: 0;
1012   }
1013   to {
1014     transform: translate3d(0, 0px, 0);
1015     opacity: 1;
1016   }
1017 }
1018 @keyframes md-page-current-to-next {
1019   from {
1020     transform: translate3d(0, 0, 0);
1021     opacity: 1;
1022   }
1023   to {
1024     transform: translate3d(0, 56px, 0);
1025     opacity: 0;
1026   }
1027 }
1028 .view:not(.view-master-detail) .page-master-stacked {
1029   display: none;
1030 }
1031 .view:not(.view-master-detail) .navbar-master-stacked {
1032   display: none;
1033 }
1034 .view-master-detail .page-master,
1035 .view-master-detail .navbar-master {
1036   width: var(--f7-page-master-width);
1037   --f7-safe-area-right: 0px;
1038   --f7-safe-area-outer-right: 0px;
1039   border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1040 }
1041 .view-master-detail .page-master-detail,
1042 .view-master-detail .navbar-master-detail {
1043   width: calc(100% - var(--f7-page-master-width));
1044   --f7-safe-area-left: 0px;
1045   --f7-safe-area-outer-left: 0px;
1046   left: var(--f7-page-master-width);
1047 }
1048 .view-master-detail .page-master {
1049   z-index: 1;
1050   transform: none;
1051   pointer-events: auto;
1052 }
1053 .view-master-detail .page-master:before,
1054 .view-master-detail .page-master:after {
1055   display: none;
1056 }
1057 .view-master-detail.router-transition .page-master {
1058   animation: none;
1059 }
1060 /* === Link === */
1061 :root {
1062   --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1063   --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1064   --f7-link-highlight-color: var(--f7-link-highlight-black);
1065 }
1066 .theme-dark {
1067   --f7-link-highlight-color: var(--f7-link-highlight-white);
1068 }
1069 .link,
1070 .tab-link {
1071   display: inline-flex;
1072   align-items: center;
1073   align-content: center;
1074   justify-content: center;
1075   position: relative;
1076   box-sizing: border-box;
1077   transform: translate3d(0, 0, 0);
1078   z-index: 1;
1079 }
1080 .link i + span,
1081 .link i + i,
1082 .link span + i,
1083 .link span + span {
1084   margin-left: 4px;
1085 }
1086 .ios .link {
1087   transition: opacity 300ms;
1088 }
1089 .ios .link.active-state {
1090   opacity: 0.3;
1091   transition-duration: 0ms;
1092 }
1093 /* === Navbar === */
1094 :root {
1095   /*
1096   --f7-navbar-bg-color: var(--f7-bars-bg-color);
1097   --f7-navbar-bg-image: var(--f7-bars-bg-image);
1098   --f7-navbar-border-color: var(--f7-bars-border-color);
1099   --f7-navbar-link-color: var(--f7-bars-link-color);
1100   --f7-navbar-text-color: var(--f7-bars-text-color);
1101   */
1102   --f7-navbar-hide-show-transition-duration: 400ms;
1103   --f7-navbar-title-line-height: 1.2;
1104 }
1105 .ios {
1106   --f7-navbar-height: 44px;
1107   --f7-navbar-tablet-height: 44px;
1108   --f7-navbar-font-size: 17px;
1109   --f7-navbar-inner-padding-left: 8px;
1110   --f7-navbar-inner-padding-right: 8px;
1111   --f7-navbar-title-font-weight: 600;
1112   --f7-navbar-title-margin-left: 0;
1113   --f7-navbar-title-margin-right: 0;
1114   --f7-navbar-title-text-align: center;
1115   --f7-navbar-subtitle-text-color: #6d6d72;
1116   --f7-navbar-subtitle-font-size: 10px;
1117   --f7-navbar-subtitle-line-height: 1;
1118   --f7-navbar-subtitle-text-align: inherit;
1119   --f7-navbar-shadow-image: none;
1120   --f7-navbar-large-title-height: 52px;
1121   --f7-navbar-large-title-font-size: 34px;
1122   --f7-navbar-large-title-font-weight: 700;
1123   --f7-navbar-large-title-line-height: 1.2;
1124   --f7-navbar-large-title-letter-spacing: -0.03em;
1125   --f7-navbar-large-title-padding-left: 15px;
1126   --f7-navbar-large-title-padding-right: 15px;
1127   --f7-navbar-large-title-text-color: inherit;
1128 }
1129 .ios .theme-dark,
1130 .ios.theme-dark {
1131   --f7-navbar-subtitle-text-color: #8e8e93;
1132 }
1133 .md {
1134   --f7-navbar-height: 56px;
1135   --f7-navbar-tablet-height: 64px;
1136   --f7-navbar-font-size: 20px;
1137   --f7-navbar-inner-padding-left: 0px;
1138   --f7-navbar-inner-padding-right: 0px;
1139   --f7-navbar-title-font-weight: 500;
1140   --f7-navbar-title-margin-left: 16px;
1141   --f7-navbar-title-margin-right: 16px;
1142   --f7-navbar-title-text-align: left;
1143   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1144   --f7-navbar-subtitle-font-size: 14px;
1145   --f7-navbar-subtitle-line-height: 1.2;
1146   --f7-navbar-subtitle-text-align: inherit;
1147   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1148   --f7-navbar-large-title-font-size: 34px;
1149   --f7-navbar-large-title-height: 56px;
1150   --f7-navbar-large-title-font-weight: 500;
1151   --f7-navbar-large-title-line-height: 1.2;
1152   --f7-navbar-large-title-letter-spacing: 0;
1153   --f7-navbar-large-title-padding-left: 16px;
1154   --f7-navbar-large-title-padding-right: 16px;
1155   --f7-navbar-large-title-text-color: inherit;
1156 }
1157 .md .theme-dark,
1158 .md.theme-dark {
1159   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1160 }
1161 .navbar {
1162   --f7-navbar-large-collapse-progress: 0;
1163   position: relative;
1164   left: 0;
1165   top: 0;
1166   width: 100%;
1167   z-index: 500;
1168   -webkit-backface-visibility: hidden;
1169           backface-visibility: hidden;
1170   box-sizing: border-box;
1171   margin: 0;
1172   transform: translate3d(0, 0, 0);
1173   height: var(--f7-navbar-height);
1174   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1175   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1176   color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1177   font-size: var(--f7-navbar-font-size);
1178 }
1179 .navbar .material-icons {
1180   width: 24px;
1181 }
1182 .navbar .f7-icons {
1183   width: 28px;
1184 }
1185 .navbar b {
1186   font-weight: 500;
1187 }
1188 .navbar a {
1189   color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1190 }
1191 .navbar a.link {
1192   display: flex;
1193   justify-content: flex-start;
1194   line-height: var(--f7-navbar-height);
1195   height: var(--f7-navbar-height);
1196 }
1197 .navbar .title,
1198 .navbar .left,
1199 .navbar .right {
1200   position: relative;
1201   z-index: 10;
1202 }
1203 .navbar .title {
1204   text-align: center;
1205   position: relative;
1206   overflow: hidden;
1207   text-overflow: ellipsis;
1208   white-space: nowrap;
1209   flex-shrink: 10;
1210   font-weight: var(--f7-navbar-title-font-weight);
1211   display: inline-block;
1212   line-height: var(--f7-navbar-title-line-height);
1213   text-align: var(--f7-navbar-title-text-align);
1214   margin-left: var(--f7-navbar-title-margin-left);
1215   margin-right: var(--f7-navbar-title-margin-left);
1216 }
1217 .navbar .subtitle {
1218   display: block;
1219   color: var(--f7-navbar-subtitle-text-color);
1220   font-weight: normal;
1221   font-size: var(--f7-navbar-subtitle-font-size);
1222   line-height: var(--f7-navbar-subtitle-line-height);
1223   text-align: var(--f7-navbar-subtitle-text-align);
1224 }
1225 .navbar .left,
1226 .navbar .right {
1227   flex-shrink: 0;
1228   display: flex;
1229   justify-content: flex-start;
1230   align-items: center;
1231   transform: translate3d(0, 0, 0);
1232 }
1233 .navbar .right:first-child {
1234   position: absolute;
1235   height: 100%;
1236 }
1237 .navbar.no-hairline:after,
1238 .navbar.no-border:after {
1239   display: none !important;
1240 }
1241 .navbar.no-hairline .title-large:after,
1242 .navbar.no-border .title-large:after {
1243   display: none !important;
1244 }
1245 .navbar.no-shadow:before {
1246   display: none !important;
1247 }
1248 .navbar.navbar-hidden:before {
1249   opacity: 0 !important;
1250 }
1251 .navbar:after,
1252 .navbar:before {
1253   -webkit-backface-visibility: hidden;
1254           backface-visibility: hidden;
1255 }
1256 .navbar:after {
1257   content: '';
1258   position: absolute;
1259   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1260   display: block;
1261   z-index: 15;
1262   top: auto;
1263   right: auto;
1264   bottom: 0;
1265   left: 0;
1266   height: 1px;
1267   width: 100%;
1268   transform-origin: 50% 100%;
1269   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1270 }
1271 .navbar:before {
1272   content: '';
1273   position: absolute;
1274   right: 0;
1275   width: 100%;
1276   top: 100%;
1277   bottom: auto;
1278   height: 8px;
1279   pointer-events: none;
1280   background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
1281 }
1282 .navbar:after {
1283   z-index: 1;
1284 }
1285 @media (min-width: 768px) {
1286   :root {
1287     --f7-navbar-height: var(--f7-navbar-tablet-height);
1288   }
1289 }
1290 .navbar-transitioning,
1291 .navbar-transitioning:before,
1292 .navbar-transitioning .title,
1293 .navbar-transitioning .title-large,
1294 .navbar-transitioning .title-large-inner,
1295 .navbar-transitioning .title-large-text,
1296 .navbar-transitioning .subnavbar {
1297   transition-duration: var(--f7-navbar-hide-show-transition-duration);
1298 }
1299 .navbar-page-transitioning {
1300   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1301 }
1302 .navbar-page-transitioning .title-large-text,
1303 .navbar-page-transitioning .title-large-inner {
1304   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1305 }
1306 .navbar-hidden {
1307   transform: translate3d(0, -100%, 0);
1308 }
1309 .navbar-large-hidden {
1310   --f7-navbar-large-collapse-progress: 1;
1311 }
1312 .navbar-inner {
1313   position: absolute;
1314   left: 0;
1315   top: 0;
1316   width: 100%;
1317   height: var(--f7-navbar-height);
1318   display: flex;
1319   align-items: center;
1320   box-sizing: border-box;
1321   padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-left));
1322 }
1323 .navbar-inner.stacked {
1324   display: none;
1325 }
1326 .views > .navbar,
1327 .view > .navbar,
1328 .page > .navbar {
1329   position: absolute;
1330 }
1331 .navbar-large:before {
1332   transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1333 }
1334 .navbar-inner-large > .title {
1335   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1336 }
1337 .navbar-large-collapsed,
1338 .navbar-inner-large-collapsed {
1339   --f7-navbar-large-collapse-progress: 1;
1340 }
1341 .navbar .title-large {
1342   box-sizing: border-box;
1343   position: absolute;
1344   left: 0;
1345   right: 0;
1346   top: 100%;
1347   display: flex;
1348   align-items: center;
1349   white-space: nowrap;
1350   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1351   will-change: transform, opacity;
1352   transition-property: transform;
1353   overflow: hidden;
1354   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1355   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1356   height: calc(var(--f7-navbar-large-title-height) + 1px);
1357   z-index: 5;
1358   margin-top: -1px;
1359   transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1360 }
1361 .navbar .title-large:after {
1362   content: '';
1363   position: absolute;
1364   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1365   display: block;
1366   z-index: 15;
1367   top: auto;
1368   right: auto;
1369   bottom: 0;
1370   left: 0;
1371   height: 1px;
1372   width: 100%;
1373   transform-origin: 50% 100%;
1374   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1375 }
1376 .title-large-text,
1377 .title-large-inner .title {
1378   text-overflow: ellipsis;
1379   white-space: nowrap;
1380   color: var(--f7-navbar-large-title-text-color);
1381   letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1382   font-size: var(--f7-navbar-large-title-font-size);
1383   font-weight: var(--f7-navbar-large-title-font-weight);
1384   line-height: var(--f7-navbar-large-title-line-height);
1385   padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1386   padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1387   transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1388 }
1389 .title-large-text,
1390 .title-large-inner {
1391   box-sizing: border-box;
1392   overflow: hidden;
1393   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1394   transition-property: transform, opacity;
1395   width: 100%;
1396 }
1397 .navbar-no-title-large-transition .title-large,
1398 .navbar-no-title-large-transition .title-large-text,
1399 .navbar-no-title-large-transition .title-large-inner {
1400   transition-duration: 0ms;
1401 }
1402 .navbar ~ * .page:not(.no-navbar) .page-content,
1403 .navbar ~ .page:not(.no-navbar) .page-content,
1404 .navbar ~ .page-content,
1405 .navbar ~ :not(.page) .page-content {
1406   padding-top: var(--f7-navbar-height);
1407 }
1408 .navbar ~ * .page:not(.no-navbar).page-with-navbar-large .page-content,
1409 .navbar ~ .page:not(.no-navbar).page-with-navbar-large .page-content,
1410 .page-with-navbar-large .navbar ~ .page-content,
1411 .page-with-navbar-large .navbar ~ * .page-content {
1412   padding-top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
1413 }
1414 .ios {
1415   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1416   --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1417 }
1418 .ios .navbar a.icon-only {
1419   width: 44px;
1420   margin: 0;
1421   justify-content: center;
1422 }
1423 .ios .navbar .left a + a,
1424 .ios .navbar .right a + a {
1425   margin-left: 15px;
1426 }
1427 .ios .navbar b {
1428   font-weight: 600;
1429 }
1430 .ios .navbar .left {
1431   margin-right: 10px;
1432 }
1433 .ios .navbar .right {
1434   margin-left: 10px;
1435 }
1436 .ios .navbar .right:first-child {
1437   right: calc(8px + var(--f7-safe-area-right));
1438 }
1439 .ios .navbar-inner {
1440   justify-content: space-between;
1441 }
1442 .ios .navbar-inner-left-title {
1443   justify-content: flex-start;
1444 }
1445 .ios .navbar-inner-left-title .right {
1446   margin-left: auto;
1447 }
1448 .ios .navbar-inner-left-title .title {
1449   text-align: left;
1450   margin-right: 10px;
1451 }
1452 .ios .view-master-detail .navbar-previous:not(.navbar-master),
1453 .ios .view:not(.view-master-detail) .navbar-previous {
1454   pointer-events: none;
1455 }
1456 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1457 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1458   transform: translateY(-100%);
1459   opacity: 0;
1460   transition: 0ms;
1461 }
1462 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1463 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1464   transform: scale(0.5);
1465   transition: 0ms;
1466 }
1467 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1468 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1469   transform: translateX(-100%);
1470   opacity: 0;
1471   transition: 0ms;
1472 }
1473 .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1474 .ios .view:not(.view-master-detail) .navbar-previous .left,
1475 .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1476 .ios .view:not(.view-master-detail) .navbar-previous .right,
1477 .ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1478 .ios .view:not(.view-master-detail) .navbar-previous > .title,
1479 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1480 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1481 .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1482 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1483   opacity: 0;
1484 }
1485 .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1486 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1487   opacity: 0;
1488 }
1489 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1490 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1491 .ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1492 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1493   opacity: 1;
1494   transform: translate3d(-100%, 0, 0);
1495 }
1496 .ios .navbar-next {
1497   pointer-events: none;
1498 }
1499 .ios .navbar-next .title-large {
1500   transform: translateX(100%);
1501   transition: 0ms;
1502 }
1503 .ios .navbar-next .title-large .title-large-text,
1504 .ios .navbar-next .title-large .title-large-inner {
1505   transition: 0ms;
1506 }
1507 .ios .navbar-next .left,
1508 .ios .navbar-next .right,
1509 .ios .navbar-next > .title,
1510 .ios .navbar-next .subnavbar,
1511 .ios .navbar-next .fading {
1512   opacity: 0;
1513 }
1514 .ios .navbar-next .sliding {
1515   opacity: 0;
1516 }
1517 .ios .navbar-next.sliding .left,
1518 .ios .navbar-next.sliding .right,
1519 .ios .navbar-next.sliding > .title,
1520 .ios .navbar-next.sliding .subnavbar {
1521   opacity: 0;
1522 }
1523 .ios .navbar-next .subnavbar.sliding,
1524 .ios .navbar-next.sliding .subnavbar {
1525   opacity: 1;
1526   transform: translate3d(100%, 0, 0);
1527 }
1528 .ios .router-dynamic-navbar-inside .navbar-next .title-large,
1529 .ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1530 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1531   transform: none;
1532 }
1533 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1534   opacity: 1;
1535   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1536 }
1537 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1538 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1539   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1540 }
1541 .ios .router-transition .navbar {
1542   transition-duration: var(--f7-page-transition-duration);
1543 }
1544 .ios .router-transition .title-large {
1545   transition: 0ms;
1546 }
1547 .ios .router-transition .navbar-current .left,
1548 .ios .router-transition .navbar-current > .title,
1549 .ios .router-transition .navbar-current .right,
1550 .ios .router-transition .navbar-current .subnavbar {
1551   animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1552 }
1553 .ios .router-transition .navbar-current .sliding,
1554 .ios .router-transition .navbar-current .left.sliding .icon + span,
1555 .ios .router-transition .navbar-current.sliding .left,
1556 .ios .router-transition .navbar-current.sliding .left .icon + span,
1557 .ios .router-transition .navbar-current.sliding > .title,
1558 .ios .router-transition .navbar-current.sliding .right {
1559   transition-duration: var(--f7-page-transition-duration);
1560   opacity: 0 !important;
1561   animation: none;
1562 }
1563 .ios .router-transition .navbar-current.sliding .subnavbar,
1564 .ios .router-transition .navbar-current .sliding.subnavbar {
1565   transition-duration: var(--f7-page-transition-duration);
1566   animation: none;
1567   opacity: 1;
1568 }
1569 .ios .router-transition-forward .navbar-next .left,
1570 .ios .router-transition-backward .navbar-previous .left,
1571 .ios .router-transition-forward .navbar-next > .title,
1572 .ios .router-transition-backward .navbar-previous > .title,
1573 .ios .router-transition-forward .navbar-next .right,
1574 .ios .router-transition-backward .navbar-previous .right,
1575 .ios .router-transition-forward .navbar-next .subnavbar,
1576 .ios .router-transition-backward .navbar-previous .subnavbar {
1577   animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1578 }
1579 .ios .router-transition-forward .navbar-next .sliding,
1580 .ios .router-transition-backward .navbar-previous .sliding,
1581 .ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1582 .ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1583 .ios .router-transition-forward .navbar-next.sliding .left,
1584 .ios .router-transition-backward .navbar-previous.sliding .left,
1585 .ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1586 .ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1587 .ios .router-transition-forward .navbar-next.sliding > .title,
1588 .ios .router-transition-backward .navbar-previous.sliding > .title,
1589 .ios .router-transition-forward .navbar-next.sliding .right,
1590 .ios .router-transition-backward .navbar-previous.sliding .right,
1591 .ios .router-transition-forward .navbar-next.sliding .subnavbar,
1592 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1593   transition-duration: var(--f7-page-transition-duration);
1594   animation: none;
1595   transform: translate3d(0, 0, 0) !important;
1596   opacity: 1 !important;
1597 }
1598 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1599   overflow: visible;
1600 }
1601 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1602   animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
1603 }
1604 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1605   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1606 }
1607 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1608   animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
1609 }
1610 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1611   animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1612 }
1613 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1614   animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1615   transition: none;
1616   transform-origin: left center;
1617 }
1618 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1619   overflow: visible;
1620 }
1621 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1622 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1623   animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1624 }
1625 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1626   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1627 }
1628 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1629 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1630   animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1631 }
1632 .ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1633 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1634   animation: none;
1635   opacity: 0 !important;
1636   transition-duration: 0;
1637 }
1638 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1639 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1640 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1641 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1642 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1643 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1644   animation: none !important;
1645 }
1646 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1647   animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1648   transition: none;
1649   transform-origin: left center;
1650 }
1651 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1652   overflow: visible;
1653   transform: translateX(100%);
1654 }
1655 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1656 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1657   animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1658 }
1659 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1660   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1661 }
1662 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1663 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1664   animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1665 }
1666 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1667   opacity: 0;
1668 }
1669 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1670   overflow: visible;
1671   opacity: 1;
1672   transform: translateY(0);
1673 }
1674 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1675   animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1676 }
1677 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1678   opacity: 1;
1679   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1680 }
1681 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1682   animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1683 }
1684 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1685   animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1686 }
1687 .ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1688 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1689   animation: none;
1690   opacity: 0 !important;
1691   transition-duration: 0;
1692 }
1693 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1694 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1695 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1696 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1697 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1698 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1699   animation: none !important;
1700 }
1701 .view-master-detail .navbar-master.navbar-previous {
1702   pointer-events: auto;
1703 }
1704 .view-master-detail .navbar-master.navbar-previous .left,
1705 .view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1706 .view-master-detail .navbar-master.navbar-previous .right,
1707 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1708   opacity: 1;
1709 }
1710 .ios .view-master-detail.router-transition .navbar-master .left,
1711 .ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1712 .ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1713 .ios .view-master-detail.router-transition .navbar-master .right,
1714 .ios .view-master-detail.router-transition .navbar-master .subnavbar,
1715 .ios .view-master-detail.router-transition .navbar-master .sliding,
1716 .ios .view-master-detail.router-transition .navbar-master .fading {
1717   opacity: 1 !important;
1718   transition-duration: 0ms;
1719   transform: none !important;
1720   animation: none !important;
1721 }
1722 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1723   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1724   transition-duration: 0ms;
1725   transform: none !important;
1726   animation: none !important;
1727 }
1728 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1729 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1730 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1731   transition-duration: 0ms;
1732   animation: none !important;
1733 }
1734 @keyframes ios-navbar-element-fade-in {
1735   from {
1736     opacity: 0;
1737   }
1738   to {
1739     opacity: 1;
1740   }
1741 }
1742 @keyframes ios-navbar-element-fade-out {
1743   from {
1744     opacity: 1;
1745   }
1746   to {
1747     opacity: 0;
1748   }
1749 }
1750 @keyframes ios-navbar-title-large-slide-up {
1751   0% {
1752     transform: translateY(0%);
1753   }
1754   100% {
1755     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1756   }
1757 }
1758 @keyframes ios-navbar-title-large-slide-down {
1759   0% {
1760     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1761   }
1762   100% {
1763     transform: translateY(0%);
1764   }
1765 }
1766 @keyframes ios-navbar-title-large-text-slide-up {
1767   0% {
1768     transform: translateX(0px) translateY(0%) scale(1);
1769   }
1770   100% {
1771     transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1772   }
1773 }
1774 @keyframes ios-navbar-title-large-text-slide-down {
1775   0% {
1776     transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1777   }
1778   100% {
1779     transform: translateX(0px) translateY(0%) scale(1);
1780   }
1781 }
1782 @keyframes ios-navbar-title-large-text-slide-left {
1783   0% {
1784     transform: translateX(0%) scale(1);
1785   }
1786   100% {
1787     transform: translateX(-100%) scale(1);
1788   }
1789 }
1790 @keyframes ios-navbar-title-large-text-slide-right {
1791   0% {
1792     transform: translateX(-100%) scale(1);
1793   }
1794   100% {
1795     transform: translateX(0%) scale(1);
1796   }
1797 }
1798 @keyframes ios-navbar-title-large-text-slide-left-top {
1799   0% {
1800     transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1801   }
1802   100% {
1803     transform: translateX(0%) translateY(0%) scale(1);
1804   }
1805 }
1806 @keyframes ios-navbar-title-large-text-slide-right-bottom {
1807   0% {
1808     transform: translateX(0%) translateY(0%) scale(1);
1809   }
1810   100% {
1811     transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1812   }
1813 }
1814 @keyframes ios-navbar-title-large-text-fade-out {
1815   0% {
1816     opacity: 1;
1817   }
1818   80% {
1819     opacity: 0;
1820   }
1821   100% {
1822     opacity: 0;
1823   }
1824 }
1825 @keyframes ios-navbar-title-large-text-fade-in {
1826   0% {
1827     opacity: 0;
1828   }
1829   20% {
1830     opacity: 0;
1831   }
1832   100% {
1833     opacity: 1;
1834   }
1835 }
1836 @keyframes ios-navbar-title-large-text-scale-out {
1837   0% {
1838     transform: translateY(0%) scale(1);
1839   }
1840   100% {
1841     transform: translateY(0%) scale(0.5);
1842   }
1843 }
1844 @keyframes ios-navbar-title-large-text-scale-in {
1845   0% {
1846     transform: translateY(0%) scale(0.5);
1847   }
1848   100% {
1849     transform: translateY(0%) scale(1);
1850   }
1851 }
1852 @keyframes ios-navbar-back-text-current-to-previous {
1853   0% {
1854     opacity: 1;
1855     transform: translateY(0px) translateX(0px) scale(1);
1856   }
1857   80% {
1858     opacity: 0;
1859   }
1860   100% {
1861     opacity: 0;
1862     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1863   }
1864 }
1865 @keyframes ios-navbar-back-text-next-to-current {
1866   0% {
1867     opacity: 0;
1868     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1869   }
1870   20% {
1871     opacity: 0;
1872   }
1873   100% {
1874     opacity: 1;
1875     transform: translateX(0px) translateY(0px) scale(1);
1876   }
1877 }
1878 @keyframes ios-navbar-title-large-inner-current-to-previous {
1879   0% {
1880     transform: translateX(0%);
1881     opacity: 1;
1882   }
1883   100% {
1884     transform: translateX(-100%);
1885     opacity: 0;
1886   }
1887 }
1888 @keyframes ios-navbar-title-large-inner-previous-to-current {
1889   0% {
1890     transform: translateX(-100%);
1891     opacity: 0;
1892   }
1893   100% {
1894     transform: translateX(0%);
1895     opacity: 1;
1896   }
1897 }
1898 .md .navbar a.link {
1899   padding: 0 16px;
1900   min-width: 48px;
1901 }
1902 .md .navbar a.link:before {
1903   content: '';
1904   width: 152%;
1905   height: 152%;
1906   position: absolute;
1907   left: -26%;
1908   top: -26%;
1909   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
1910   background-repeat: no-repeat;
1911   background-position: center;
1912   background-size: 100% 100%;
1913   opacity: 0;
1914   pointer-events: none;
1915   transition-duration: 600ms;
1916 }
1917 .md .navbar a.link.active-state:before {
1918   opacity: 1;
1919   transition-duration: 150ms;
1920 }
1921 .md .navbar a.icon-only {
1922   min-width: 0;
1923   flex-shrink: 0;
1924   width: 56px;
1925 }
1926 .md .navbar .right {
1927   margin-left: auto;
1928 }
1929 .md .navbar .right:first-child {
1930   right: var(--f7-safe-area-right);
1931 }
1932 .md .navbar-inner {
1933   justify-content: flex-start;
1934   overflow: hidden;
1935 }
1936 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
1937   overflow: visible;
1938 }
1939 .md .page.page-with-subnavbar .navbar-inner {
1940   overflow: visible;
1941 }
1942 .md .navbar-inner-centered-title {
1943   justify-content: space-between;
1944 }
1945 .md .navbar-inner-centered-title .right {
1946   margin-left: 0;
1947 }
1948 .md .navbar-inner-centered-title .title {
1949   text-align: center;
1950 }
1951 /* === Toolbar === */
1952 :root {
1953   /*
1954   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
1955   --f7-toolbar-bg-image: var(--f7-bars-bg-image);
1956   --f7-toolbar-border-color: var(--f7-bars-border-color);
1957   --f7-toolbar-link-color: var(--f7-bars-link-color);
1958   --f7-toolbar-text-color: var(--f7-bars-text-color);
1959   */
1960   --f7-toolbar-hide-show-transition-duration: 400ms;
1961 }
1962 .ios {
1963   --f7-toolbar-height: 44px;
1964   --f7-toolbar-font-size: 17px;
1965   --f7-tabbar-labels-height: 50px;
1966   --f7-tabbar-labels-tablet-height: 56px;
1967   --f7-tabbar-link-inactive-color: #929292;
1968   /*
1969   --f7-tabbar-link-active-color: var(--f7-theme-color);
1970   */
1971   --f7-toolbar-top-shadow-image: none;
1972   --f7-toolbar-bottom-shadow-image: none;
1973   --f7-tabbar-icon-size: 28px;
1974   --f7-tabbar-link-text-transform: none;
1975   --f7-tabbar-link-font-weight: 400;
1976   --f7-tabbar-link-letter-spacing: 0;
1977   --f7-tabbar-label-font-size: 10px;
1978   --f7-tabbar-label-tablet-font-size: 14px;
1979   --f7-tabbar-label-text-transform: none;
1980   --f7-tabbar-label-font-weight: 400;
1981   --f7-tabbar-label-letter-spacing: 0.01;
1982 }
1983 .md {
1984   --f7-toolbar-height: 48px;
1985   --f7-toolbar-font-size: 14px;
1986   --f7-tabbar-labels-height: 56px;
1987   --f7-tabbar-labels-tablet-height: 56px;
1988   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
1989   /*
1990   --f7-tabbar-link-active-color: var(--f7-theme-color);
1991   --f7-tabbar-link-active-border-color: var(--f7-theme-color);
1992   */
1993   --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
1994   --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
1995   --f7-tabbar-icon-size: 24px;
1996   --f7-tabbar-link-text-transform: uppercase;
1997   --f7-tabbar-link-font-weight: 500;
1998   --f7-tabbar-link-letter-spacing: 0.03em;
1999   --f7-tabbar-label-font-size: 14px;
2000   --f7-tabbar-label-tablet-font-size: 14px;
2001   --f7-tabbar-label-text-transform: none;
2002   --f7-tabbar-label-font-weight: 400;
2003   --f7-tabbar-label-letter-spacing: 0;
2004 }
2005 .md .theme-dark,
2006 .md.theme-dark {
2007   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2008 }
2009 .toolbar {
2010   width: 100%;
2011   position: relative;
2012   margin: 0;
2013   transform: translate3d(0, 0, 0);
2014   -webkit-backface-visibility: hidden;
2015           backface-visibility: hidden;
2016   z-index: 500;
2017   box-sizing: border-box;
2018   left: 0;
2019   height: var(--f7-toolbar-height);
2020   background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2021   background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2022   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2023   font-size: var(--f7-toolbar-font-size);
2024 }
2025 .toolbar b {
2026   font-weight: 600;
2027 }
2028 .toolbar a {
2029   color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2030   box-sizing: border-box;
2031   flex-shrink: 1;
2032   position: relative;
2033   white-space: nowrap;
2034   text-overflow: ellipsis;
2035 }
2036 .toolbar a.link {
2037   display: flex;
2038   line-height: var(--f7-toolbar-height);
2039   height: var(--f7-toolbar-height);
2040 }
2041 .toolbar i.icon {
2042   display: block;
2043 }
2044 .toolbar:after,
2045 .toolbar:before {
2046   -webkit-backface-visibility: hidden;
2047           backface-visibility: hidden;
2048 }
2049 .views > .toolbar,
2050 .view > .toolbar,
2051 .page > .toolbar {
2052   position: absolute;
2053 }
2054 .toolbar-top,
2055 .ios .toolbar-top-ios,
2056 .md .toolbar-top-md {
2057   top: 0;
2058 }
2059 .toolbar-top .tab-link-highlight,
2060 .ios .toolbar-top-ios .tab-link-highlight,
2061 .md .toolbar-top-md .tab-link-highlight {
2062   bottom: 0;
2063 }
2064 .toolbar-top.no-hairline:after,
2065 .ios .toolbar-top-ios.no-hairline:after,
2066 .md .toolbar-top-md.no-hairline:after,
2067 .toolbar-top.no-border:after,
2068 .ios .toolbar-top-ios.no-border:after,
2069 .md .toolbar-top-md.no-border:after {
2070   display: none !important;
2071 }
2072 .toolbar-top.no-shadow:before,
2073 .ios .toolbar-top-ios.no-shadow:before,
2074 .md .toolbar-top-md.no-shadow:before,
2075 .toolbar-top.toolbar-hidden:before,
2076 .ios .toolbar-top-ios.toolbar-hidden:before,
2077 .md .toolbar-top-md.toolbar-hidden:before {
2078   display: none !important;
2079 }
2080 .toolbar-top:after,
2081 .ios .toolbar-top-ios:after,
2082 .md .toolbar-top-md:after,
2083 .toolbar-top:before,
2084 .ios .toolbar-top-ios:before,
2085 .md .toolbar-top-md:before {
2086   -webkit-backface-visibility: hidden;
2087           backface-visibility: hidden;
2088 }
2089 .toolbar-top:after,
2090 .ios .toolbar-top-ios:after,
2091 .md .toolbar-top-md:after {
2092   content: '';
2093   position: absolute;
2094   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2095   display: block;
2096   z-index: 15;
2097   top: auto;
2098   right: auto;
2099   bottom: 0;
2100   left: 0;
2101   height: 1px;
2102   width: 100%;
2103   transform-origin: 50% 100%;
2104   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2105 }
2106 .toolbar-top:before,
2107 .ios .toolbar-top-ios:before,
2108 .md .toolbar-top-md:before {
2109   content: '';
2110   position: absolute;
2111   right: 0;
2112   width: 100%;
2113   top: 100%;
2114   bottom: auto;
2115   height: 8px;
2116   pointer-events: none;
2117   background: var(--f7-toolbar-top-shadow-image, var(--f7-bars-shadow-bottom-image));
2118 }
2119 .toolbar-bottom,
2120 .ios .toolbar-bottom-ios,
2121 .md .toolbar-bottom-md {
2122   bottom: 0;
2123   height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2124 }
2125 .toolbar-bottom .tab-link-highlight,
2126 .ios .toolbar-bottom-ios .tab-link-highlight,
2127 .md .toolbar-bottom-md .tab-link-highlight {
2128   top: 0;
2129 }
2130 .toolbar-bottom .toolbar-inner,
2131 .ios .toolbar-bottom-ios .toolbar-inner,
2132 .md .toolbar-bottom-md .toolbar-inner {
2133   height: auto;
2134   top: 0;
2135   bottom: var(--f7-safe-area-bottom);
2136 }
2137 .toolbar-bottom.no-hairline:before,
2138 .ios .toolbar-bottom-ios.no-hairline:before,
2139 .md .toolbar-bottom-md.no-hairline:before,
2140 .toolbar-bottom.no-border:before,
2141 .ios .toolbar-bottom-ios.no-border:before,
2142 .md .toolbar-bottom-md.no-border:before {
2143   display: none !important;
2144 }
2145 .toolbar-bottom.no-shadow:after,
2146 .ios .toolbar-bottom-ios.no-shadow:after,
2147 .md .toolbar-bottom-md.no-shadow:after,
2148 .toolbar-bottom.toolbar-hidden:after,
2149 .ios .toolbar-bottom-ios.toolbar-hidden:after,
2150 .md .toolbar-bottom-md.toolbar-hidden:after {
2151   display: none !important;
2152 }
2153 .toolbar-bottom:before,
2154 .ios .toolbar-bottom-ios:before,
2155 .md .toolbar-bottom-md:before {
2156   content: '';
2157   position: absolute;
2158   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2159   display: block;
2160   z-index: 15;
2161   top: 0;
2162   right: auto;
2163   bottom: auto;
2164   left: 0;
2165   height: 1px;
2166   width: 100%;
2167   transform-origin: 50% 0%;
2168   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2169 }
2170 .toolbar-bottom:after,
2171 .ios .toolbar-bottom-ios:after,
2172 .md .toolbar-bottom-md:after {
2173   content: '';
2174   position: absolute;
2175   right: 0;
2176   width: 100%;
2177   bottom: 100%;
2178   height: 8px;
2179   top: auto;
2180   pointer-events: none;
2181   background: var(--f7-toolbar-bottom-shadow-image, var(--f7-bars-shadow-top-image));
2182 }
2183 .toolbar-inner {
2184   position: absolute;
2185   left: 0;
2186   top: 0;
2187   width: 100%;
2188   height: 100%;
2189   display: flex;
2190   justify-content: space-between;
2191   box-sizing: border-box;
2192   align-items: center;
2193   align-content: center;
2194   overflow: hidden;
2195 }
2196 .views > .tabbar,
2197 .views > .tabbar-labels {
2198   z-index: 5001;
2199 }
2200 .tabbar a,
2201 .tabbar-labels a {
2202   color: var(--f7-tabbar-link-inactive-color);
2203 }
2204 .tabbar a.link,
2205 .tabbar-labels a.link {
2206   line-height: 1.4;
2207 }
2208 .tabbar a.tab-link,
2209 .tabbar-labels a.tab-link,
2210 .tabbar a.link,
2211 .tabbar-labels a.link {
2212   height: 100%;
2213   width: 100%;
2214   box-sizing: border-box;
2215   display: flex;
2216   justify-content: center;
2217   align-items: center;
2218   flex-direction: column;
2219   text-transform: var(--f7-tabbar-link-text-transform);
2220   font-weight: var(--f7-tabbar-link-font-weight);
2221   letter-spacing: var(--f7-tabbar-link-letter-spacing);
2222   overflow: hidden;
2223 }
2224 .tabbar .tab-link-active,
2225 .tabbar-labels .tab-link-active {
2226   color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
2227 }
2228 .tabbar i.icon,
2229 .tabbar-labels i.icon {
2230   font-size: var(--f7-tabbar-icon-size);
2231   height: var(--f7-tabbar-icon-size);
2232   line-height: var(--f7-tabbar-icon-size);
2233 }
2234 .tabbar-labels {
2235   --f7-toolbar-height: var(--f7-tabbar-labels-height);
2236 }
2237 .tabbar-labels a.tab-link,
2238 .tabbar-labels a.link {
2239   height: 100%;
2240   justify-content: space-between;
2241   align-items: center;
2242 }
2243 .tabbar-labels .tabbar-label {
2244   display: block;
2245   line-height: 1;
2246   margin: 0;
2247   position: relative;
2248   text-overflow: ellipsis;
2249   white-space: nowrap;
2250   font-size: var(--f7-tabbar-label-font-size);
2251   text-transform: var(--f7-tabbar-label-text-transform);
2252   font-weight: var(--f7-tabbar-label-font-weight);
2253   letter-spacing: var(--f7-tabbar-label-letter-spacing);
2254 }
2255 @media (min-width: 768px) {
2256   :root {
2257     --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2258     --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2259   }
2260 }
2261 .tabbar-scrollable .toolbar-inner {
2262   will-change: scroll-position;
2263   overflow: auto;
2264   -webkit-overflow-scrolling: touch;
2265 }
2266 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2267   display: none !important;
2268   width: 0 !important;
2269   height: 0 !important;
2270   -webkit-appearance: none;
2271   opacity: 0 !important;
2272 }
2273 .tabbar-scrollable a.tab-link,
2274 .tabbar-scrollable a.link {
2275   width: auto;
2276   flex-shrink: 0;
2277 }
2278 .toolbar-transitioning,
2279 .navbar-transitioning + .toolbar,
2280 .navbar-transitioning ~ * .toolbar {
2281   transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2282 }
2283 .toolbar-bottom.toolbar-hidden,
2284 .ios .toolbar-bottom-ios.toolbar-hidden,
2285 .md .toolbar-bottom-md.toolbar-hidden {
2286   transform: translate3d(0, 100%, 0);
2287 }
2288 .toolbar-bottom ~ .page-content,
2289 .ios .toolbar-bottom-ios ~ .page-content,
2290 .md .toolbar-bottom-md ~ .page-content,
2291 .toolbar-bottom ~ * .page-content,
2292 .ios .toolbar-bottom-ios ~ * .page-content,
2293 .md .toolbar-bottom-md ~ * .page-content {
2294   padding-bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2295 }
2296 .toolbar-bottom.tabbar-labels ~ .page-content,
2297 .ios .toolbar-bottom-ios.tabbar-labels ~ .page-content,
2298 .md .toolbar-bottom-md.tabbar-labels ~ .page-content,
2299 .toolbar-bottom.tabbar-labels ~ * .page-content,
2300 .ios .toolbar-bottom-ios.tabbar-labels ~ * .page-content,
2301 .md .toolbar-bottom-md.tabbar-labels ~ * .page-content {
2302   padding-bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
2303 }
2304 .toolbar-top.toolbar-hidden,
2305 .ios .toolbar-top-ios.toolbar-hidden,
2306 .md .toolbar-top-md.toolbar-hidden {
2307   transform: translate3d(0, -100%, 0);
2308 }
2309 .toolbar-top ~ .page-content,
2310 .ios .toolbar-top-ios ~ .page-content,
2311 .md .toolbar-top-md ~ .page-content,
2312 .toolbar-top ~ * .page-content,
2313 .ios .toolbar-top-ios ~ * .page-content,
2314 .md .toolbar-top-md ~ * .page-content {
2315   padding-top: var(--f7-toolbar-height);
2316 }
2317 .toolbar-top.tabbar-labels ~ .page-content,
2318 .ios .toolbar-top-ios.tabbar-labels ~ .page-content,
2319 .md .toolbar-top-md.tabbar-labels ~ .page-content,
2320 .toolbar-top.tabbar-labels ~ * .page-content,
2321 .ios .toolbar-top-ios.tabbar-labels ~ * .page-content,
2322 .md .toolbar-top-md.tabbar-labels ~ * .page-content {
2323   padding-top: var(--f7-tabbar-labels-height);
2324 }
2325 .navbar ~ .toolbar-top,
2326 .ios .navbar ~ .toolbar-top-ios,
2327 .md .navbar ~ .toolbar-top-md,
2328 .navbar ~ * .toolbar-top,
2329 .ios .navbar ~ * .toolbar-top-ios,
2330 .md .navbar ~ * .toolbar-top-md,
2331 .navbar ~ .page:not(.no-navbar) .toolbar-top,
2332 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
2333 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
2334   top: var(--f7-navbar-height);
2335 }
2336 .navbar ~ .toolbar-top ~ .page-content,
2337 .ios .navbar ~ .toolbar-top-ios ~ .page-content,
2338 .md .navbar ~ .toolbar-top-md ~ .page-content,
2339 .navbar ~ * .toolbar-top ~ .page-content,
2340 .ios .navbar ~ * .toolbar-top-ios ~ .page-content,
2341 .md .navbar ~ * .toolbar-top-md ~ .page-content,
2342 .navbar ~ .page:not(.no-navbar) .toolbar-top ~ .page-content,
2343 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ .page-content,
2344 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ .page-content,
2345 .navbar ~ .toolbar-top ~ * .page-content,
2346 .ios .navbar ~ .toolbar-top-ios ~ * .page-content,
2347 .md .navbar ~ .toolbar-top-md ~ * .page-content,
2348 .navbar ~ * .toolbar-top ~ * .page-content,
2349 .ios .navbar ~ * .toolbar-top-ios ~ * .page-content,
2350 .md .navbar ~ * .toolbar-top-md ~ * .page-content,
2351 .navbar ~ .page:not(.no-navbar) .toolbar-top ~ * .page-content,
2352 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ * .page-content,
2353 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ * .page-content {
2354   padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
2355 }
2356 .navbar ~ .toolbar-top.tabbar-labels ~ .page-content,
2357 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .page-content,
2358 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .page-content,
2359 .navbar ~ * .toolbar-top.tabbar-labels ~ .page-content,
2360 .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ .page-content,
2361 .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ .page-content,
2362 .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ .page-content,
2363 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ .page-content,
2364 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ .page-content,
2365 .navbar ~ .toolbar-top.tabbar-labels ~ * .page-content,
2366 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ * .page-content,
2367 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ * .page-content,
2368 .navbar ~ * .toolbar-top.tabbar-labels ~ * .page-content,
2369 .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ * .page-content,
2370 .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ * .page-content,
2371 .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ * .page-content,
2372 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ * .page-content,
2373 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ * .page-content {
2374   padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
2375 }
2376 .navbar ~ .toolbar-top.toolbar-hidden,
2377 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2378 .md .navbar ~ .toolbar-top-md.toolbar-hidden,
2379 .navbar ~ * .toolbar-top.toolbar-hidden,
2380 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2381 .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
2382 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2383 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
2384 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
2385   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2386 }
2387 .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2388 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2389 .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
2390 .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2391 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2392 .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
2393 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2394 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2395 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels {
2396   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2397 }
2398 .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2399 .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2400 .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
2401 .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2402 .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2403 .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2404   transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2405 }
2406 .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2407 .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2408 .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2409 .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2410 .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2411 .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2412   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2413 }
2414 .ios .toolbar a.icon-only {
2415   min-height: var(--f7-toolbar-height);
2416   display: flex;
2417   justify-content: center;
2418   align-items: center;
2419   margin: 0;
2420   min-width: 44px;
2421 }
2422 .ios .toolbar-inner {
2423   padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left));
2424 }
2425 .ios .tabbar-labels a.tab-link,
2426 .ios .tabbar-labels a.link {
2427   padding-top: 4px;
2428   padding-bottom: 4px;
2429 }
2430 .ios .tabbar-labels a.tab-link i + span,
2431 .ios .tabbar-labels a.link i + span {
2432   margin: 0;
2433 }
2434 @media (min-width: 768px) {
2435   .ios .tabbar .toolbar-inner,
2436   .ios .tabbar-labels .toolbar-inner {
2437     justify-content: center;
2438   }
2439   .ios .tabbar a.tab-link,
2440   .ios .tabbar-labels a.tab-link,
2441   .ios .tabbar a.link,
2442   .ios .tabbar-labels a.link {
2443     width: auto;
2444     min-width: 105px;
2445   }
2446 }
2447 .ios .tabbar-scrollable .toolbar-inner {
2448   justify-content: flex-start;
2449 }
2450 .ios .tabbar-scrollable a.tab-link,
2451 .ios .tabbar-scrollable a.link {
2452   padding: 0 8px;
2453 }
2454 .md .toolbar a.link {
2455   justify-content: center;
2456   padding: 0 16px;
2457   min-width: 48px;
2458 }
2459 .md .toolbar a.link:before {
2460   content: '';
2461   width: 152%;
2462   height: 152%;
2463   position: absolute;
2464   left: -26%;
2465   top: -26%;
2466   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2467   background-repeat: no-repeat;
2468   background-position: center;
2469   background-size: 100% 100%;
2470   opacity: 0;
2471   pointer-events: none;
2472   transition-duration: 600ms;
2473 }
2474 .md .toolbar a.link.active-state:before {
2475   opacity: 1;
2476   transition-duration: 150ms;
2477 }
2478 .md .toolbar a.icon-only {
2479   min-width: 0;
2480   flex-shrink: 0;
2481 }
2482 .md .toolbar-inner {
2483   padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left);
2484 }
2485 .md .tabbar a.tab-link,
2486 .md .tabbar-labels a.tab-link,
2487 .md .tabbar a.link,
2488 .md .tabbar-labels a.link {
2489   padding-left: 0;
2490   padding-right: 0;
2491 }
2492 .md .tabbar a.tab-link,
2493 .md .tabbar-labels a.tab-link {
2494   transition-duration: 300ms;
2495   overflow: hidden;
2496   position: relative;
2497 }
2498 .md .tabbar .tab-link-highlight,
2499 .md .tabbar-labels .tab-link-highlight {
2500   position: absolute;
2501   height: 2px;
2502   background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2503   transition-duration: 300ms;
2504   left: 0;
2505 }
2506 .md .tabbar-labels a.tab-link,
2507 .md .tabbar-labels a.link {
2508   padding-top: 7px;
2509   padding-bottom: 7px;
2510 }
2511 .md .tabbar-label {
2512   max-width: 100%;
2513   overflow: hidden;
2514   line-height: 1.2;
2515 }
2516 .md .tabbar-scrollable .toolbar-inner {
2517   overflow: auto;
2518   justify-content: flex-start;
2519 }
2520 .md .tabbar-scrollable a.tab-link,
2521 .md .tabbar-scrollable a.link {
2522   padding: 0 16px;
2523 }
2524 /* === Subnavbar === */
2525 :root {
2526   /*
2527   --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2528   --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2529   --f7-subnavbar-border-color: var(--f7-bars-border-color);
2530   --f7-subnavbar-link-color: var(--f7-bars-link-color);
2531   --f7-subnavbar-text-color: var(--f7-bars-text-color);
2532   */
2533 }
2534 .ios {
2535   --f7-subnavbar-height: 44px;
2536   --f7-subnavbar-inner-padding-left: 8px;
2537   --f7-subnavbar-inner-padding-right: 8px;
2538   --f7-subnavbar-title-font-size: 34px;
2539   --f7-subnavbar-title-font-weight: 700;
2540   --f7-subnavbar-title-line-height: 1.2;
2541   --f7-subnavbar-title-letter-spacing: -0.03em;
2542   --f7-subnavbar-title-margin-left: 7px;
2543   --f7-navbar-shadow-image: none;
2544 }
2545 .md {
2546   --f7-subnavbar-height: 48px;
2547   --f7-subnavbar-inner-padding-left: 16px;
2548   --f7-subnavbar-inner-padding-right: 16px;
2549   --f7-subnavbar-title-font-size: 20px;
2550   --f7-subnavbar-title-font-weight: 500;
2551   --f7-subnavbar-title-line-height: 1.2;
2552   --f7-subnavbar-title-letter-spacing: 0;
2553   --f7-subnavbar-title-margin-left: 0px;
2554   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2555 }
2556 .subnavbar {
2557   width: 100%;
2558   position: absolute;
2559   left: 0;
2560   top: 0;
2561   z-index: 500;
2562   box-sizing: border-box;
2563   display: flex;
2564   justify-content: space-between;
2565   align-items: center;
2566   background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2567   background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2568   color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2569 }
2570 .subnavbar .title {
2571   position: relative;
2572   overflow: hidden;
2573   text-overflow: ellpsis;
2574   white-space: nowrap;
2575   font-size: var(--f7-subnavbar-title-font-size);
2576   font-weight: var(--f7-subnavbar-title-font-weight);
2577   text-align: left;
2578   display: inline-block;
2579   line-height: var(--f7-subnavbar-title-line-height);
2580   letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2581   margin-left: var(--f7-subnavbar-title-margin-left);
2582 }
2583 .subnavbar .left,
2584 .subnavbar .right {
2585   flex-shrink: 0;
2586   display: flex;
2587   justify-content: flex-start;
2588   align-items: center;
2589 }
2590 .subnavbar .right:first-child {
2591   position: absolute;
2592   height: 100%;
2593 }
2594 .subnavbar a {
2595   color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2596 }
2597 .subnavbar a.link {
2598   line-height: var(--f7-subnavbar-height);
2599   height: var(--f7-subnavbar-height);
2600 }
2601 .subnavbar a.icon-only {
2602   min-width: var(--f7-subnavbar-height);
2603 }
2604 .subnavbar.no-hairline:after,
2605 .subnavbar.no-border:after {
2606   display: none !important;
2607 }
2608 .subnavbar.no-shadow:before,
2609 .subnavbar.navbar-hidden:before {
2610   display: none !important;
2611 }
2612 .subnavbar:after,
2613 .subnavbar:before {
2614   -webkit-backface-visibility: hidden;
2615           backface-visibility: hidden;
2616 }
2617 .subnavbar:after {
2618   content: '';
2619   position: absolute;
2620   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
2621   display: block;
2622   z-index: 15;
2623   top: auto;
2624   right: auto;
2625   bottom: 0;
2626   left: 0;
2627   height: 1px;
2628   width: 100%;
2629   transform-origin: 50% 100%;
2630   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2631 }
2632 .subnavbar:before {
2633   content: '';
2634   position: absolute;
2635   right: 0;
2636   width: 100%;
2637   top: 100%;
2638   bottom: auto;
2639   height: 8px;
2640   pointer-events: none;
2641   background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
2642 }
2643 .subnavbar-inner {
2644   width: 100%;
2645   height: 100%;
2646   display: flex;
2647   align-items: center;
2648   box-sizing: border-box;
2649   justify-content: space-between;
2650   overflow: hidden;
2651   padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
2652 }
2653 .subnavbar-inner.stacked {
2654   display: none;
2655 }
2656 .navbar .subnavbar {
2657   top: 100%;
2658 }
2659 .views > .subnavbar,
2660 .view > .subnavbar,
2661 .page > .subnavbar {
2662   position: absolute;
2663 }
2664 .navbar ~ * .subnavbar,
2665 .page-with-subnavbar .navbar ~ .subnavbar,
2666 .page-with-subnavbar .navbar ~ * .subnavbar,
2667 .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2668 .navbar ~ .subnavbar {
2669   top: var(--f7-navbar-height);
2670 }
2671 .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2672 .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2673 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2674   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2675   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2676 }
2677 .navbar .title-large ~ .subnavbar {
2678   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2679   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2680 }
2681 .page-with-subnavbar .page-content,
2682 .subnavbar ~ .page-content,
2683 .subnavbar ~ * .page-content {
2684   padding-top: var(--f7-subnavbar-height);
2685 }
2686 .navbar ~ .page-with-subnavbar:not(.no-navbar) .page-content,
2687 .navbar ~ *:not(.no-navbar) .subnavbar ~ .page-content,
2688 .navbar ~ *:not(.no-navbar) .subnavbar ~ * .page-content,
2689 .navbar ~ .subnavbar ~ .page-content,
2690 .navbar ~ .subnavbar ~ * .page-content,
2691 .page-with-subnavbar .navbar ~ * .page-content,
2692 .page-with-subnavbar .navbar ~ .page-content {
2693   padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
2694 }
2695 .navbar ~ .page-with-subnavbar.page-with-navbar-large:not(.no-navbar) .page-content,
2696 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .page-content,
2697 .page-with-subnavbar.page-with-navbar-large .navbar ~ .page-content,
2698 .page-with-subnavbar.page-with-navbar-large .page-content {
2699   padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height));
2700 }
2701 .ios .subnavbar {
2702   height: calc(var(--f7-subnavbar-height) + 1px);
2703   margin-top: -1px;
2704   padding-top: 1px;
2705 }
2706 .ios .subnavbar .title {
2707   align-self: flex-start;
2708   flex-shrink: 10;
2709 }
2710 .ios .subnavbar .left a + a,
2711 .ios .subnavbar .right a + a {
2712   margin-left: 15px;
2713 }
2714 .ios .subnavbar .left {
2715   margin-right: 10px;
2716 }
2717 .ios .subnavbar .right {
2718   margin-left: 10px;
2719 }
2720 .ios .subnavbar .right:first-child {
2721   right: 8px;
2722 }
2723 .ios .subnavbar a.link {
2724   justify-content: flex-start;
2725 }
2726 .ios .subnavbar a.icon-only {
2727   justify-content: center;
2728   margin: 0;
2729 }
2730 .md .subnavbar {
2731   height: var(--f7-subnavbar-height);
2732 }
2733 .md .subnavbar .right {
2734   margin-left: auto;
2735 }
2736 .md .subnavbar .right:first-child {
2737   right: 16px;
2738 }
2739 .md .subnavbar a.link {
2740   justify-content: center;
2741   padding: 0 16px;
2742 }
2743 .md .subnavbar a.link:before {
2744   content: '';
2745   width: 152%;
2746   height: 152%;
2747   position: absolute;
2748   left: -26%;
2749   top: -26%;
2750   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2751   background-repeat: no-repeat;
2752   background-position: center;
2753   background-size: 100% 100%;
2754   opacity: 0;
2755   pointer-events: none;
2756   transition-duration: 600ms;
2757 }
2758 .md .subnavbar a.link.active-state:before {
2759   opacity: 1;
2760   transition-duration: 150ms;
2761 }
2762 .md .subnavbar a.icon-only {
2763   flex-shrink: 0;
2764 }
2765 .md .subnavbar-inner > a.link:first-child {
2766   margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
2767 }
2768 .md .subnavbar-inner > a.link:last-child {
2769   margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
2770 }
2771 /* === Content Block === */
2772 :root {
2773   --f7-block-font-size: inherit;
2774   --f7-block-strong-bg-color: #fff;
2775   --f7-block-title-font-size: inherit;
2776   --f7-block-header-margin: 10px;
2777   --f7-block-footer-margin: 10px;
2778   --f7-block-header-font-size: 14px;
2779   --f7-block-footer-font-size: 14px;
2780   --f7-block-title-white-space: nowrap;
2781   --f7-block-title-medium-text-color: #000;
2782   --f7-block-title-medium-text-transform: none;
2783   --f7-block-title-large-text-color: #000;
2784   --f7-block-title-large-text-transform: none;
2785 }
2786 :root .theme-dark,
2787 :root.theme-dark {
2788   --f7-block-title-medium-text-color: #fff;
2789   --f7-block-title-large-text-color: #fff;
2790 }
2791 .ios {
2792   --f7-block-text-color: #6d6d72;
2793   --f7-block-padding-horizontal: 15px;
2794   --f7-block-padding-vertical: 15px;
2795   --f7-block-margin-vertical: 35px;
2796   --f7-block-strong-text-color: #000;
2797   --f7-block-strong-border-color: #c8c7cc;
2798   --f7-block-title-text-transform: uppercase;
2799   --f7-block-title-text-color: #6d6d72;
2800   --f7-block-title-font-weight: 400;
2801   --f7-block-title-line-height: 17px;
2802   --f7-block-title-margin-bottom: 10px;
2803   --f7-block-title-medium-font-size: 22px;
2804   --f7-block-title-medium-font-weight: bold;
2805   --f7-block-title-medium-line-height: 1.4;
2806   --f7-block-title-large-font-size: 29px;
2807   --f7-block-title-large-font-weight: bold;
2808   --f7-block-title-large-line-height: 1.3;
2809   --f7-block-inset-side-margin: 15px;
2810   --f7-block-inset-border-radius: 7px;
2811   --f7-block-header-text-color: #8f8f94;
2812   --f7-block-footer-text-color: #8f8f94;
2813 }
2814 .ios .theme-dark,
2815 .ios.theme-dark {
2816   --f7-block-strong-border-color: #282829;
2817   --f7-block-title-text-color: #8E8E93;
2818   --f7-block-header-text-color: #8E8E93;
2819   --f7-block-footer-text-color: #8E8E93;
2820   --f7-block-strong-bg-color: #1c1c1d;
2821   --f7-block-strong-text-color: #fff;
2822 }
2823 .md {
2824   --f7-block-text-color: inherit;
2825   --f7-block-padding-horizontal: 16px;
2826   --f7-block-padding-vertical: 16px;
2827   --f7-block-margin-vertical: 32px;
2828   --f7-block-strong-text-color: inherit;
2829   --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
2830   --f7-block-title-text-transform: none;
2831   --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
2832   --f7-block-title-font-weight: 500;
2833   --f7-block-title-line-height: 16px;
2834   --f7-block-title-margin-bottom: 16px;
2835   --f7-block-title-medium-font-size: 24px;
2836   --f7-block-title-medium-font-weight: 500;
2837   --f7-block-title-medium-line-height: 1.3;
2838   --f7-block-title-large-font-size: 34px;
2839   --f7-block-title-large-font-weight: 500;
2840   --f7-block-title-large-line-height: 1.2;
2841   --f7-block-inset-side-margin: 16px;
2842   --f7-block-inset-border-radius: 4px;
2843   --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
2844   --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
2845 }
2846 .md .theme-dark,
2847 .md.theme-dark {
2848   --f7-block-strong-border-color: #282829;
2849   --f7-block-title-text-color: #fff;
2850   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
2851   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
2852   --f7-block-strong-bg-color: #1c1c1d;
2853 }
2854 .block {
2855   box-sizing: border-box;
2856   position: relative;
2857   z-index: 1;
2858   color: var(--f7-block-text-color);
2859   margin: var(--f7-block-margin-vertical) 0;
2860   padding-top: 0;
2861   padding-bottom: 0;
2862   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2863   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2864   font-size: var(--f7-block-font-size);
2865 }
2866 .block.no-hairlines:before,
2867 .block.no-hairlines ul:before,
2868 .md .block.no-hairlines-md:before,
2869 .md .block.no-hairlines-md ul:before,
2870 .ios .block.no-hairlines-ios:before,
2871 .ios .block.no-hairlines-ios ul:before {
2872   display: none !important;
2873 }
2874 .block.no-hairlines:after,
2875 .block.no-hairlines ul:after,
2876 .md .block.no-hairlines-md:after,
2877 .md .block.no-hairlines-md ul:after,
2878 .ios .block.no-hairlines-ios:after,
2879 .ios .block.no-hairlines-ios ul:after {
2880   display: none !important;
2881 }
2882 .block.no-hairline-top:before,
2883 .block.no-hairline-top ul:before,
2884 .md .block.no-hairline-top-md:before,
2885 .md .block.no-hairline-top-md ul:before,
2886 .ios .block.no-hairline-top-ios:before,
2887 .ios .block.no-hairline-top-ios ul:before {
2888   display: none !important;
2889 }
2890 .block.no-hairline-bottom:after,
2891 .block.no-hairline-bottom ul:after,
2892 .md .block.no-hairline-bottom-md:after,
2893 .md .block.no-hairline-bottom-md ul:after,
2894 .ios .block.no-hairline-bottom-ios:after,
2895 .ios .block.no-hairline-bottom-ios ul:after {
2896   display: none !important;
2897 }
2898 .block > h1:first-child,
2899 .block > h2:first-child,
2900 .block > h3:first-child,
2901 .block > h4:first-child,
2902 .block > p:first-child {
2903   margin-top: 0;
2904 }
2905 .block > h1:last-child,
2906 .block > h2:last-child,
2907 .block > h3:last-child,
2908 .block > h4:last-child,
2909 .block > p:last-child {
2910   margin-bottom: 0;
2911 }
2912 .block-strong {
2913   color: var(--f7-block-strong-text-color);
2914   padding-top: var(--f7-block-padding-vertical);
2915   padding-bottom: var(--f7-block-padding-vertical);
2916   background-color: var(--f7-block-strong-bg-color);
2917 }
2918 .block-strong:before {
2919   content: '';
2920   position: absolute;
2921   background-color: var(--f7-block-strong-border-color);
2922   display: block;
2923   z-index: 15;
2924   top: 0;
2925   right: auto;
2926   bottom: auto;
2927   left: 0;
2928   height: 1px;
2929   width: 100%;
2930   transform-origin: 50% 0%;
2931   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2932 }
2933 .block-strong:after {
2934   content: '';
2935   position: absolute;
2936   background-color: var(--f7-block-strong-border-color);
2937   display: block;
2938   z-index: 15;
2939   top: auto;
2940   right: auto;
2941   bottom: 0;
2942   left: 0;
2943   height: 1px;
2944   width: 100%;
2945   transform-origin: 50% 100%;
2946   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2947 }
2948 .block-title {
2949   position: relative;
2950   overflow: hidden;
2951   margin: 0;
2952   white-space: var(--f7-block-title-white-space);
2953   text-overflow: ellipsis;
2954   text-transform: var(--f7-block-title-text-transform);
2955   color: var(--f7-block-title-text-color);
2956   font-size: var(--f7-block-title-font-size, inherit);
2957   font-weight: var(--f7-block-title-font-weight);
2958   line-height: var(--f7-block-title-line-height);
2959   margin-top: var(--f7-block-margin-vertical);
2960   margin-bottom: var(--f7-block-title-margin-bottom);
2961   margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2962   margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2963 }
2964 .block-title + .list,
2965 .block-title + .block,
2966 .block-title + .card,
2967 .block-title + .timeline,
2968 .block-title + .block-header {
2969   margin-top: 0px;
2970 }
2971 .block-title-medium {
2972   font-size: var(--f7-block-title-medium-font-size);
2973   text-transform: var(--f7-block-title-medium-text-transform);
2974   color: var(--f7-block-title-medium-text-color);
2975   font-weight: var(--f7-block-title-medium-font-weight);
2976   line-height: var(--f7-block-title-medium-line-height);
2977 }
2978 .block-title-large {
2979   font-size: var(--f7-block-title-large-font-size);
2980   text-transform: var(--f7-block-title-large-text-transform);
2981   color: var(--f7-block-title-large-text-color);
2982   font-weight: var(--f7-block-title-large-font-weight);
2983   line-height: var(--f7-block-title-large-line-height);
2984 }
2985 .block > .block-title:first-child,
2986 .list > .block-title:first-child {
2987   margin-top: 0;
2988   margin-left: 0;
2989   margin-right: 0;
2990 }
2991 .block-header {
2992   color: var(--f7-block-header-text-color);
2993   font-size: var(--f7-block-header-font-size);
2994   margin-bottom: var(--f7-block-header-margin);
2995   margin-top: var(--f7-block-margin-vertical);
2996 }
2997 .block-header + .list,
2998 .block-header + .block,
2999 .block-header + .card,
3000 .block-header + .timeline {
3001   margin-top: var(--f7-block-header-margin);
3002 }
3003 .block-footer {
3004   color: var(--f7-block-footer-text-color);
3005   font-size: var(--f7-block-footer-font-size);
3006   margin-top: var(--f7-block-footer-margin);
3007   margin-bottom: var(--f7-block-margin-vertical);
3008 }
3009 .block-footer,
3010 .block-header {
3011   padding-top: 0;
3012   padding-bottom: 0;
3013   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3014   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3015 }
3016 .block-footer ul:first-child,
3017 .block-header ul:first-child,
3018 .block-footer p:first-child,
3019 .block-header p:first-child,
3020 .block-footer h1:first-child,
3021 .block-header h1:first-child,
3022 .block-footer h2:first-child,
3023 .block-header h2:first-child,
3024 .block-footer h3:first-child,
3025 .block-header h3:first-child,
3026 .block-footer h4:first-child,
3027 .block-header h4:first-child {
3028   margin-top: 0;
3029 }
3030 .block-footer ul:last-child,
3031 .block-header ul:last-child,
3032 .block-footer p:last-child,
3033 .block-header p:last-child,
3034 .block-footer h1:last-child,
3035 .block-header h1:last-child,
3036 .block-footer h2:last-child,
3037 .block-header h2:last-child,
3038 .block-footer h3:last-child,
3039 .block-header h3:last-child,
3040 .block-footer h4:last-child,
3041 .block-header h4:last-child {
3042   margin-bottom: 0;
3043 }
3044 .block-footer ul:first-child:last-child,
3045 .block-header ul:first-child:last-child,
3046 .block-footer p:first-child:last-child,
3047 .block-header p:first-child:last-child,
3048 .block-footer h1:first-child:last-child,
3049 .block-header h1:first-child:last-child,
3050 .block-footer h2:first-child:last-child,
3051 .block-header h2:first-child:last-child,
3052 .block-footer h3:first-child:last-child,
3053 .block-header h3:first-child:last-child,
3054 .block-footer h4:first-child:last-child,
3055 .block-header h4:first-child:last-child {
3056   margin-top: 0;
3057   margin-bottom: 0;
3058 }
3059 .list .block-header,
3060 .block .block-header,
3061 .card .block-header,
3062 .timeline .block-header {
3063   margin-top: 0;
3064 }
3065 .list .block-footer,
3066 .block .block-footer,
3067 .card .block-footer,
3068 .timeline .block-footer {
3069   margin-bottom: 0;
3070 }
3071 .list + .block-footer,
3072 .block + .block-footer,
3073 .card + .block-footer,
3074 .timeline + .block-footer {
3075   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3076 }
3077 .block + .block-footer {
3078   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3079   margin-bottom: var(--f7-block-margin-vertical);
3080 }
3081 .block .block-header,
3082 .block .block-footer {
3083   padding: 0;
3084 }
3085 .block.inset {
3086   border-radius: var(--f7-block-inset-border-radius);
3087   margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3088   margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3089   --f7-safe-area-left: 0px;
3090   --f7-safe-area-right: 0px;
3091 }
3092 .block-strong.inset:before {
3093   display: none !important;
3094 }
3095 .block-strong.inset:after {
3096   display: none !important;
3097 }
3098 @media (min-width: 768px) {
3099   .block.tablet-inset {
3100     border-radius: var(--f7-block-inset-border-radius);
3101     margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3102     margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3103     --f7-safe-area-left: 0px;
3104     --f7-safe-area-right: 0px;
3105   }
3106   .block-strong.tablet-inset:before {
3107     display: none !important;
3108   }
3109   .block-strong.tablet-inset:after {
3110     display: none !important;
3111   }
3112 }
3113 /* === List View === */
3114 :root {
3115   --f7-list-bg-color: #fff;
3116   --f7-list-item-text-max-lines: 2;
3117   --f7-list-chevron-icon-color: #c7c7cc;
3118   --f7-list-item-title-font-size: inherit;
3119   --f7-list-item-title-font-weight: 400;
3120   --f7-list-item-title-text-color: inherit;
3121   --f7-list-item-title-line-height: inherit;
3122   --f7-list-item-title-white-space: nowrap;
3123   --f7-list-item-subtitle-font-weight: 400;
3124   --f7-list-item-subtitle-text-color: inherit;
3125   --f7-list-item-subtitle-line-height: inherit;
3126   --f7-list-item-header-text-color: inherit;
3127   --f7-list-item-header-font-size: 12px;
3128   --f7-list-item-header-font-weight: 400;
3129   --f7-list-item-header-line-height: 1.2;
3130   --f7-list-item-footer-font-size: 12px;
3131   --f7-list-item-footer-font-weight: 400;
3132   --f7-list-item-footer-line-height: 1.2;
3133 }
3134 .ios {
3135   --f7-list-inset-side-margin: 15px;
3136   --f7-list-inset-border-radius: 7px;
3137   --f7-list-margin-vertical: 35px;
3138   --f7-list-font-size: 17px;
3139   --f7-list-chevron-icon-area: 20px;
3140   --f7-list-border-color: #c8c7cc;
3141   --f7-list-item-border-color: #c8c7cc;
3142   --f7-list-link-pressed-bg-color: #d9d9d9;
3143   --f7-list-item-subtitle-font-size: 15px;
3144   --f7-list-item-text-font-size: 15px;
3145   --f7-list-item-text-font-weight: 400;
3146   --f7-list-item-text-text-color: #8e8e93;
3147   --f7-list-item-text-line-height: 21px;
3148   --f7-list-item-after-font-size: inherit;
3149   --f7-list-item-after-font-weight: 400;
3150   --f7-list-item-after-text-color: #8e8e93;
3151   --f7-list-item-after-line-height: inherit;
3152   --f7-list-item-after-padding: 5px;
3153   --f7-list-item-footer-text-color: #8e8e93;
3154   --f7-list-item-min-height: 44px;
3155   --f7-list-item-media-margin: 15px;
3156   --f7-list-item-media-icons-margin: 5px;
3157   --f7-list-item-cell-margin: 15px;
3158   --f7-list-item-padding-vertical: 8px;
3159   --f7-list-item-padding-horizontal: 15px;
3160   --f7-list-media-item-padding-vertical: 10px;
3161   --f7-list-media-item-padding-horizontal: 15px;
3162   /*
3163   --f7-list-button-text-color: var(--f7-theme-color);
3164   */
3165   --f7-list-button-font-size: inherit;
3166   --f7-list-button-font-weight: 400;
3167   --f7-list-button-text-align: center;
3168   --f7-list-button-border-color: #c8c7cc;
3169   --f7-list-button-pressed-bg-color: #d9d9d9;
3170   --f7-list-item-divider-height: 31px;
3171   --f7-list-item-divider-text-color: #8e8e93;
3172   --f7-list-item-divider-font-size: inherit;
3173   --f7-list-item-divider-font-weight: 400;
3174   --f7-list-item-divider-bg-color: #f7f7f7;
3175   --f7-list-item-divider-line-height: inherit;
3176   --f7-list-item-divider-border-color: #c8c7cc;
3177   --f7-list-group-title-height: 31px;
3178   --f7-list-group-title-text-color: #8e8e93;
3179   --f7-list-group-title-font-size: inherit;
3180   --f7-list-group-title-font-weight: 400;
3181   --f7-list-group-title-bg-color: #f7f7f7;
3182   --f7-list-group-title-line-height: inherit;
3183 }
3184 .ios .theme-dark,
3185 .ios.theme-dark {
3186   --f7-list-bg-color: #1c1c1d;
3187   --f7-list-border-color: #282829;
3188   --f7-list-button-border-color: #282829;
3189   --f7-list-item-border-color: #282829;
3190   --f7-list-item-divider-border-color: #282829;
3191   --f7-list-item-divider-bg-color: #232323;
3192   --f7-list-group-title-bg-color: #232323;
3193   --f7-list-link-pressed-bg-color: #363636;
3194   --f7-list-button-pressed-bg-color: #363636;
3195   --f7-list-chevron-icon-color: #434345;
3196 }
3197 .md {
3198   --f7-list-inset-side-margin: 16px;
3199   --f7-list-inset-border-radius: 4px;
3200   --f7-list-margin-vertical: 32px;
3201   --f7-list-font-size: 16px;
3202   --f7-list-chevron-icon-area: 26px;
3203   --f7-list-border-color: rgba(0, 0, 0, 0.12);
3204   --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3205   --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3206   --f7-list-item-subtitle-font-size: 14px;
3207   --f7-list-item-text-font-size: 14px;
3208   --f7-list-item-text-font-weight: 400;
3209   --f7-list-item-text-text-color: #757575;
3210   --f7-list-item-text-line-height: 20px;
3211   --f7-list-item-after-font-size: 14px;
3212   --f7-list-item-after-font-weight: 400;
3213   --f7-list-item-after-text-color: #757575;
3214   --f7-list-item-after-line-height: inherit;
3215   --f7-list-item-after-padding: 8px;
3216   --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3217   --f7-list-item-min-height: 48px;
3218   --f7-list-item-media-margin: 16px;
3219   --f7-list-item-media-icons-margin: 8px;
3220   --f7-list-item-cell-margin: 16px;
3221   --f7-list-item-padding-vertical: 8px;
3222   --f7-list-item-padding-horizontal: 16px;
3223   --f7-list-media-item-padding-vertical: 14px;
3224   --f7-list-media-item-padding-horizontal: 16px;
3225   --f7-list-button-text-color: #212121;
3226   --f7-list-button-font-size: inherit;
3227   --f7-list-button-font-weight: 400;
3228   --f7-list-button-text-align: left;
3229   --f7-list-button-border-color: transparent;
3230   --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3231   --f7-list-item-divider-height: 48px;
3232   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3233   --f7-list-item-divider-font-size: 14px;
3234   --f7-list-item-divider-font-weight: 400;
3235   --f7-list-item-divider-bg-color: #f4f4f4;
3236   --f7-list-item-divider-line-height: inherit;
3237   --f7-list-item-divider-border-color: transparent;
3238   --f7-list-group-title-height: 48px;
3239   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3240   --f7-list-group-title-font-size: 14px;
3241   --f7-list-group-title-font-weight: 400;
3242   --f7-list-group-title-bg-color: #f4f4f4;
3243   --f7-list-group-title-line-height: inherit;
3244 }
3245 .md .theme-dark,
3246 .md.theme-dark {
3247   --f7-list-bg-color: #1c1c1d;
3248   --f7-list-border-color: #282829;
3249   --f7-list-button-text-color: #fff;
3250   --f7-list-item-border-color: #282829;
3251   --f7-list-item-divider-border-color: #282829;
3252   --f7-list-item-divider-bg-color: #232323;
3253   --f7-list-item-divider-text-color: #fff;
3254   --f7-list-group-title-bg-color: #232323;
3255   --f7-list-group-title-text-color: #fff;
3256   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3257   --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3258   --f7-list-chevron-icon-color: #434345;
3259   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3260   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3261   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3262 }
3263 .list {
3264   position: relative;
3265   z-index: 1;
3266   font-size: var(--f7-list-font-size);
3267   margin: var(--f7-list-margin-vertical) 0;
3268 }
3269 .list ul {
3270   list-style: none;
3271   margin: 0;
3272   padding: 0;
3273   position: relative;
3274   background: var(--f7-list-bg-color);
3275 }
3276 .list ul:before {
3277   content: '';
3278   position: absolute;
3279   background-color: var(--f7-list-border-color);
3280   display: block;
3281   z-index: 15;
3282   top: 0;
3283   right: auto;
3284   bottom: auto;
3285   left: 0;
3286   height: 1px;
3287   width: 100%;
3288   transform-origin: 50% 0%;
3289   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3290 }
3291 .list ul:after {
3292   content: '';
3293   position: absolute;
3294   background-color: var(--f7-list-border-color);
3295   display: block;
3296   z-index: 15;
3297   top: auto;
3298   right: auto;
3299   bottom: 0;
3300   left: 0;
3301   height: 1px;
3302   width: 100%;
3303   transform-origin: 50% 100%;
3304   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3305 }
3306 .list ul ul:before {
3307   display: none !important;
3308 }
3309 .list ul ul:after {
3310   display: none !important;
3311 }
3312 .list li {
3313   position: relative;
3314   box-sizing: border-box;
3315 }
3316 .list .item-media {
3317   display: flex;
3318   flex-shrink: 0;
3319   flex-wrap: nowrap;
3320   align-items: center;
3321   box-sizing: border-box;
3322   padding-bottom: var(--f7-list-item-padding-vertical);
3323   padding-top: var(--f7-list-item-padding-vertical);
3324 }
3325 .list .item-media + .item-inner {
3326   margin-left: var(--f7-list-item-media-margin);
3327 }
3328 .list .item-media i + i,
3329 .list .item-media i + img {
3330   margin-left: var(--f7-list-item-media-icons-margin);
3331 }
3332 .list .item-after {
3333   padding-left: var(--f7-list-item-after-padding);
3334 }
3335 .list .item-inner {
3336   position: relative;
3337   width: 100%;
3338   min-width: 0;
3339   display: flex;
3340   justify-content: space-between;
3341   box-sizing: border-box;
3342   align-items: center;
3343   align-self: stretch;
3344   padding-top: var(--f7-list-item-padding-vertical);
3345   padding-bottom: var(--f7-list-item-padding-vertical);
3346   min-height: var(--f7-list-item-min-height);
3347   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3348 }
3349 .list .item-title {
3350   min-width: 0;
3351   flex-shrink: 1;
3352   white-space: var(--f7-list-item-title-white-space);
3353   position: relative;
3354   overflow: hidden;
3355   text-overflow: ellipsis;
3356   max-width: 100%;
3357   font-size: var(--f7-list-item-title-font-size);
3358   font-weight: var(--f7-list-item-title-font-weight);
3359   color: var(--f7-list-item-title-text-color);
3360   line-height: var(--f7-list-item-title-line-height);
3361 }
3362 .list .item-after {
3363   white-space: nowrap;
3364   flex-shrink: 0;
3365   display: flex;
3366   font-size: var(--f7-list-item-after-font-size);
3367   font-weight: var(--f7-list-item-after-font-weight);
3368   color: var(--f7-list-item-after-text-color);
3369   line-height: var(--f7-list-item-after-line-height);
3370   margin-left: auto;
3371 }
3372 .list .item-header,
3373 .list .item-footer {
3374   white-space: normal;
3375 }
3376 .list .item-header {
3377   color: var(--f7-list-item-header-text-color);
3378   font-size: var(--f7-list-item-header-font-size);
3379   font-weight: var(--f7-list-item-header-font-weight);
3380   line-height: var(--f7-list-item-header-line-height);
3381 }
3382 .list .item-footer {
3383   color: var(--f7-list-item-footer-text-color);
3384   font-size: var(--f7-list-item-footer-font-size);
3385   font-weight: var(--f7-list-item-footer-font-weight);
3386   line-height: var(--f7-list-item-footer-line-height);
3387 }
3388 .list .item-link,
3389 .list .list-button {
3390   transition-duration: 300ms;
3391   transition-property: background-color;
3392   display: block;
3393   position: relative;
3394   overflow: hidden;
3395   z-index: 0;
3396 }
3397 .list .item-link {
3398   color: inherit;
3399 }
3400 .list .item-link.active-state {
3401   background-color: var(--f7-list-link-pressed-bg-color);
3402 }
3403 .list .item-link .item-inner {
3404   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3405 }
3406 .list .item-content {
3407   display: flex;
3408   justify-content: space-between;
3409   box-sizing: border-box;
3410   align-items: center;
3411   min-height: var(--f7-list-item-min-height);
3412   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3413 }
3414 .list .item-subtitle {
3415   position: relative;
3416   overflow: hidden;
3417   white-space: nowrap;
3418   max-width: 100%;
3419   text-overflow: ellipsis;
3420   font-size: var(--f7-list-item-subtitle-font-size);
3421   font-weight: var(--f7-list-item-subtitle-font-weight);
3422   color: var(--f7-list-item-subtitle-text-color);
3423   line-height: var(--f7-list-item-subtitle-line-height);
3424 }
3425 .list .item-text {
3426   position: relative;
3427   overflow: hidden;
3428   text-overflow: hidden;
3429   -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3430   display: -webkit-box;
3431   font-size: var(--f7-list-item-text-font-size);
3432   font-weight: var(--f7-list-item-text-font-weight);
3433   color: var(--f7-list-item-text-text-color);
3434   line-height: var(--f7-list-item-text-line-height);
3435   max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3436 }
3437 .list .item-title-row {
3438   position: relative;
3439   display: flex;
3440   justify-content: space-between;
3441   box-sizing: border-box;
3442 }
3443 .list .item-title-row .item-after {
3444   align-self: center;
3445 }
3446 .list .item-row {
3447   display: flex;
3448   justify-content: space-between;
3449   box-sizing: border-box;
3450 }
3451 .list .item-cell {
3452   display: block;
3453   align-self: center;
3454   box-sizing: border-box;
3455   width: 100%;
3456   min-width: 0;
3457   margin-left: var(--f7-list-item-cell-margin);
3458   flex-shrink: 1;
3459 }
3460 .list .item-cell:first-child {
3461   margin-left: 0;
3462 }
3463 .list .ripple-wave + .item-cell {
3464   margin-left: 0;
3465 }
3466 .list li:last-child .list-button:after {
3467   display: none !important;
3468 }
3469 .list li:last-child > .item-inner:after,
3470 .list li:last-child li:last-child > .item-inner:after,
3471 .list li:last-child > .item-content > .item-inner:after,
3472 .list li:last-child li:last-child > .item-content > .item-inner:after,
3473 .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3474 .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3475 .list li:last-child > .item-link > .item-content > .item-inner:after,
3476 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3477   display: none !important;
3478 }
3479 .list li li:last-child .item-inner:after,
3480 .list li:last-child li .item-inner:after {
3481   content: '';
3482   position: absolute;
3483   background-color: var(--f7-list-item-border-color);
3484   display: block;
3485   z-index: 15;
3486   top: auto;
3487   right: auto;
3488   bottom: 0;
3489   left: 0;
3490   height: 1px;
3491   width: 100%;
3492   transform-origin: 50% 100%;
3493   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3494 }
3495 .list.no-hairlines:before,
3496 .list.no-hairlines ul:before,
3497 .md .list.no-hairlines-md:before,
3498 .md .list.no-hairlines-md ul:before,
3499 .ios .list.no-hairlines-ios:before,
3500 .ios .list.no-hairlines-ios ul:before {
3501   display: none !important;
3502 }
3503 .list.no-hairlines:after,
3504 .list.no-hairlines ul:after,
3505 .md .list.no-hairlines-md:after,
3506 .md .list.no-hairlines-md ul:after,
3507 .ios .list.no-hairlines-ios:after,
3508 .ios .list.no-hairlines-ios ul:after {
3509   display: none !important;
3510 }
3511 .list.no-hairline-top:before,
3512 .list.no-hairline-top ul:before,
3513 .md .list.no-hairline-top-md:before,
3514 .md .list.no-hairline-top-md ul:before,
3515 .ios .list.no-hairline-top-ios:before,
3516 .ios .list.no-hairline-top-ios ul:before {
3517   display: none !important;
3518 }
3519 .list.no-hairline-bottom:after,
3520 .list.no-hairline-bottom ul:after,
3521 .md .list.no-hairline-bottom-md:after,
3522 .md .list.no-hairline-bottom-md ul:after,
3523 .ios .list.no-hairline-bottom-ios:after,
3524 .ios .list.no-hairline-bottom-ios ul:after {
3525   display: none !important;
3526 }
3527 .list.no-hairlines-between .item-inner:after,
3528 .md .list.no-hairlines-between-md .item-inner:after,
3529 .ios .list.no-hairlines-between-ios .item-inner:after,
3530 .list.no-hairlines-between .list-button:after,
3531 .md .list.no-hairlines-between-md .list-button:after,
3532 .ios .list.no-hairlines-between-ios .list-button:after,
3533 .list.no-hairlines-between .item-divider:after,
3534 .md .list.no-hairlines-between-md .item-divider:after,
3535 .ios .list.no-hairlines-between-ios .item-divider:after,
3536 .list.no-hairlines-between .list-group-title:after,
3537 .md .list.no-hairlines-between-md .list-group-title:after,
3538 .ios .list.no-hairlines-between-ios .list-group-title:after,
3539 .list.no-hairlines-between .list-group-title:after,
3540 .md .list.no-hairlines-between-md .list-group-title:after,
3541 .ios .list.no-hairlines-between-ios .list-group-title:after {
3542   display: none !important;
3543 }
3544 .list.no-hairlines-between.simple-list li:after,
3545 .md .list.no-hairlines-between-md.simple-list li:after,
3546 .ios .list.no-hairlines-between-ios.simple-list li:after {
3547   display: none !important;
3548 }
3549 .list.no-hairlines-between.links-list a:after,
3550 .md .list.no-hairlines-between-md.links-list a:after,
3551 .ios .list.no-hairlines-between-ios.links-list a:after {
3552   display: none !important;
3553 }
3554 .list-button {
3555   padding: 0 var(--f7-list-item-padding-horizontal);
3556   line-height: var(--f7-list-item-min-height);
3557   color: var(--f7-list-button-text-color, var(--f7-theme-color));
3558   font-size: var(--f7-list-button-font-size);
3559   font-weight: var(--f7-list-button-font-weight);
3560   text-align: var(--f7-list-button-text-align);
3561 }
3562 .list-button:after {
3563   content: '';
3564   position: absolute;
3565   background-color: var(--f7-list-button-border-color);
3566   display: block;
3567   z-index: 15;
3568   top: auto;
3569   right: auto;
3570   bottom: 0;
3571   left: 0;
3572   height: 1px;
3573   width: 100%;
3574   transform-origin: 50% 100%;
3575   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3576 }
3577 .list-button.active-state {
3578   background-color: var(--f7-list-button-pressed-bg-color);
3579 }
3580 .list-button[class*="color-"] {
3581   --f7-list-button-text-color: var(--f7-theme-color);
3582 }
3583 .simple-list li {
3584   position: relative;
3585   white-space: nowrap;
3586   text-overflow: ellipsis;
3587   max-width: 100%;
3588   box-sizing: border-box;
3589   display: flex;
3590   justify-content: space-between;
3591   align-items: center;
3592   align-content: center;
3593   line-height: var(--f7-list-item-min-height);
3594   height: var(--f7-list-item-min-height);
3595   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3596   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3597 }
3598 .simple-list li:after {
3599   left: var(--f7-list-item-padding-horizontal);
3600   width: auto;
3601   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3602   right: 0;
3603 }
3604 .simple-list li:last-child:after {
3605   display: none !important;
3606 }
3607 .links-list li {
3608   z-index: 1;
3609 }
3610 .links-list a {
3611   transition-duration: 300ms;
3612   transition-property: background-color;
3613   display: block;
3614   position: relative;
3615   overflow: hidden;
3616   display: flex;
3617   align-items: center;
3618   align-content: center;
3619   justify-content: space-between;
3620   box-sizing: border-box;
3621   white-space: nowrap;
3622   text-overflow: ellipsis;
3623   max-width: 100%;
3624   height: var(--f7-list-item-min-height);
3625   color: inherit;
3626 }
3627 .links-list a .ripple-wave {
3628   z-index: 0;
3629 }
3630 .links-list a:after {
3631   width: auto;
3632 }
3633 .links-list a.active-state {
3634   background-color: var(--f7-list-link-pressed-bg-color);
3635 }
3636 .links-list a {
3637   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3638   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3639 }
3640 .links-list a:after {
3641   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3642   right: 0;
3643 }
3644 .links-list li:last-child a:after {
3645   display: none !important;
3646 }
3647 .simple-list li:after,
3648 .links-list a:after,
3649 .list .item-inner:after {
3650   content: '';
3651   position: absolute;
3652   background-color: var(--f7-list-item-border-color);
3653   display: block;
3654   z-index: 15;
3655   top: auto;
3656   right: auto;
3657   bottom: 0;
3658   left: 0;
3659   height: 1px;
3660   width: 100%;
3661   transform-origin: 50% 100%;
3662   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3663 }
3664 .media-list,
3665 li.media-item {
3666   --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
3667   --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
3668 }
3669 .media-list .item-inner,
3670 li.media-item .item-inner {
3671   display: block;
3672   align-self: stretch;
3673 }
3674 .media-list .item-media,
3675 li.media-item .item-media {
3676   align-self: flex-start;
3677 }
3678 .media-list .item-media img,
3679 li.media-item .item-media img {
3680   display: block;
3681 }
3682 .media-list .item-link .item-inner,
3683 li.media-item .item-link .item-inner {
3684   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3685 }
3686 .media-list .item-link .item-title-row,
3687 li.media-item .item-link .item-title-row {
3688   padding-right: calc(var(--f7-list-chevron-icon-area));
3689 }
3690 .media-list.chevron-center .item-link .item-inner,
3691 .media-list .chevron-center .item-link .item-inner,
3692 .media-list .item-link.chevron-center .item-inner,
3693 li.media-item.chevron-center .item-link .item-inner,
3694 li.media-item .item-link.chevron-center .item-inner,
3695 li.media-item .chevron-center .item-link .item-inner {
3696   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3697 }
3698 .media-list.chevron-center .item-title-row,
3699 .media-list .chevron-center .item-title-row,
3700 li.media-item.chevron-center .item-title-row,
3701 li.media-item .chevron-center .item-title-row {
3702   padding-right: 0;
3703 }
3704 .list .item-link .item-inner:before,
3705 .links-list a:before,
3706 .media-list .item-link .item-title-row:before,
3707 li.media-item .item-link .item-title-row:before,
3708 .media-list.chevron-center .item-link .item-inner:before,
3709 .media-list .chevron-center .item-link .item-inner:before,
3710 .media-list .item-link.chevron-center .item-inner:before,
3711 li.media-item.chevron-center .item-link .item-inner:before,
3712 li.media-item .chevron-center .item-link .item-inner:before,
3713 li.media-item .item-link.chevron-center .item-inner:before {
3714   font-family: 'framework7-core-icons';
3715   font-weight: normal;
3716   font-style: normal;
3717   line-height: 1;
3718   letter-spacing: normal;
3719   text-transform: none;
3720   white-space: nowrap;
3721   word-wrap: normal;
3722   direction: ltr;
3723   -webkit-font-smoothing: antialiased;
3724   text-rendering: optimizeLegibility;
3725   -moz-osx-font-smoothing: grayscale;
3726   -moz-font-feature-settings: "liga";
3727        font-feature-settings: "liga";
3728   text-align: center;
3729   display: block;
3730   width: 100%;
3731   height: 100%;
3732   position: absolute;
3733   top: 50%;
3734   width: 8px;
3735   height: 14px;
3736   margin-top: -7px;
3737   font-size: 20px;
3738   line-height: 14px;
3739   color: var(--f7-list-chevron-icon-color);
3740   pointer-events: none;
3741   right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3742   content: 'chevron_right';
3743 }
3744 .media-list.chevron-center .item-title-row:before,
3745 .media-list .chevron-center .item-title-row:before,
3746 li.media-item.chevron-center .item-title-row:before,
3747 li.media-item .chevron-center .item-title-row:before {
3748   display: none;
3749 }
3750 .media-list .item-link .item-inner:before,
3751 li.media-item .item-link .item-inner:before {
3752   display: none;
3753 }
3754 .media-list .item-link .item-title-row:before,
3755 li.media-item .item-link .item-title-row:before {
3756   right: 0;
3757 }
3758 .list-group ul:after,
3759 .list-group ul:before {
3760   z-index: 25 !important;
3761 }
3762 .list-group + .list-group ul:before {
3763   display: none !important;
3764 }
3765 li.item-divider,
3766 .item-divider,
3767 li.list-group-title {
3768   white-space: nowrap;
3769   position: relative;
3770   max-width: 100%;
3771   text-overflow: ellipsis;
3772   overflow: hidden;
3773   z-index: 15;
3774   padding-top: 0;
3775   padding-bottom: 0;
3776   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3777   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3778   box-sizing: border-box;
3779   display: flex;
3780   align-items: center;
3781   align-content: center;
3782 }
3783 li.item-divider:after,
3784 .item-divider:after,
3785 li.list-group-title:after {
3786   display: none !important;
3787 }
3788 li.item-divider,
3789 .item-divider {
3790   margin-top: -1px;
3791   height: var(--f7-list-item-divider-height);
3792   color: var(--f7-list-item-divider-text-color);
3793   font-size: var(--f7-list-item-divider-font-size);
3794   font-weight: var(--f7-list-item-divider-font-weight);
3795   background-color: var(--f7-list-item-divider-bg-color);
3796   line-height: var(--f7-list-item-divider-line-height);
3797 }
3798 li.item-divider:before,
3799 .item-divider:before {
3800   content: '';
3801   position: absolute;
3802   background-color: var(--f7-list-item-divider-border-color);
3803   display: block;
3804   z-index: 15;
3805   top: 0;
3806   right: auto;
3807   bottom: auto;
3808   left: 0;
3809   height: 1px;
3810   width: 100%;
3811   transform-origin: 50% 0%;
3812   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3813 }
3814 li.list-group-title,
3815 .list li.list-group-title {
3816   position: relative;
3817   position: -webkit-sticky;
3818   position: sticky;
3819   top: 0;
3820   margin-top: 0;
3821   z-index: 20;
3822   height: var(--f7-list-group-title-height);
3823   color: var(--f7-list-group-title-text-color);
3824   font-size: var(--f7-list-group-title-font-size);
3825   font-weight: var(--f7-list-group-title-font-weight);
3826   background-color: var(--f7-list-group-title-bg-color);
3827   line-height: var(--f7-list-group-title-line-height);
3828 }
3829 .list.inset {
3830   margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3831   margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3832   border-radius: var(--f7-list-inset-border-radius);
3833   --f7-safe-area-left: 0px;
3834   --f7-safe-area-right: 0px;
3835 }
3836 .list.inset .block-title {
3837   margin-left: 0;
3838   margin-right: 0;
3839 }
3840 .list.inset ul {
3841   border-radius: var(--f7-list-inset-border-radius);
3842 }
3843 .list.inset ul:before {
3844   display: none !important;
3845 }
3846 .list.inset ul:after {
3847   display: none !important;
3848 }
3849 .list.inset li.swipeout:first-child,
3850 .list.inset li:first-child > a {
3851   border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3852 }
3853 .list.inset li.swipeout:last-child,
3854 .list.inset li:last-child > a {
3855   border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3856 }
3857 .list.inset li.swipeout:first-child:last-child,
3858 .list.inset li:first-child:last-child > a {
3859   border-radius: var(--f7-list-inset-border-radius);
3860 }
3861 @media (min-width: 768px) {
3862   .list.tablet-inset {
3863     margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3864     margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3865     border-radius: var(--f7-list-inset-border-radius);
3866     --f7-safe-area-left: 0px;
3867     --f7-safe-area-right: 0px;
3868   }
3869   .list.tablet-inset .block-title {
3870     margin-left: 0;
3871     margin-right: 0;
3872   }
3873   .list.tablet-inset ul {
3874     border-radius: var(--f7-list-inset-border-radius);
3875   }
3876   .list.tablet-inset ul:before {
3877     display: none !important;
3878   }
3879   .list.tablet-inset ul:after {
3880     display: none !important;
3881   }
3882   .list.tablet-inset li:first-child > a {
3883     border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3884   }
3885   .list.tablet-inset li:last-child > a {
3886     border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3887   }
3888   .list.tablet-inset li:first-child:last-child > a {
3889     border-radius: var(--f7-list-inset-border-radius);
3890   }
3891 }
3892 .list.no-chevron,
3893 .list .no-chevron {
3894   --f7-list-chevron-icon-color: transparent;
3895   --f7-list-chevron-icon-area: 0px;
3896 }
3897 .ios .list ul ul {
3898   padding-left: calc(var(--f7-list-item-padding-horizontal) + 30px);
3899 }
3900 .ios .item-link.active-state .item-inner:after,
3901 .ios .list-button.active-state:after,
3902 .ios .links-list a.active-state:after {
3903   background-color: transparent;
3904 }
3905 .ios .links-list a.active-state,
3906 .ios .list .item-link.active-state,
3907 .ios .list .list-button.active-state {
3908   transition-duration: 0ms;
3909 }
3910 .ios .media-list .item-title,
3911 .ios li.media-item .item-title {
3912   font-weight: 600;
3913 }
3914 .md .list ul ul {
3915   padding-left: calc(var(--f7-list-item-padding-horizontal) + 40px);
3916 }
3917 .md .list .item-media {
3918   min-width: 40px;
3919 }
3920 /* === Badge === */
3921 :root {
3922   --f7-badge-text-color: #fff;
3923   --f7-badge-bg-color: #8e8e93;
3924   --f7-badge-padding: 0 4px;
3925   --f7-badge-in-icon-size: 16px;
3926   --f7-badge-in-icon-font-size: 10px;
3927   --f7-badge-font-weight: normal;
3928   --f7-badge-font-size: 12px;
3929 }
3930 .ios {
3931   --f7-badge-size: 20px;
3932 }
3933 .md {
3934   --f7-badge-size: 18px;
3935 }
3936 .badge {
3937   display: inline-flex;
3938   align-items: center;
3939   align-content: center;
3940   justify-content: center;
3941   color: var(--f7-badge-text-color);
3942   background: var(--f7-badge-bg-color);
3943   position: relative;
3944   box-sizing: border-box;
3945   text-align: center;
3946   vertical-align: middle;
3947   font-weight: var(--f7-badge-font-weight);
3948   font-size: var(--f7-badge-font-size);
3949   border-radius: var(--f7-badge-size);
3950   padding: var(--f7-badge-padding);
3951   height: var(--f7-badge-size);
3952   min-width: var(--f7-badge-size);
3953 }
3954 .icon .badge,
3955 .f7-icons .badge,
3956 .framework7-icons .badge,
3957 .material-icons .badge {
3958   position: absolute;
3959   left: 100%;
3960   margin-left: -10px;
3961   top: -2px;
3962   font-family: var(--f7-font-family);
3963   --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
3964   --f7-badge-size: var(--f7-badge-in-icon-size);
3965 }
3966 .badge[class*="color-"] {
3967   --f7-badge-bg-color: var(--f7-theme-color);
3968 }
3969 :root {
3970   --f7-button-font-size: 14px;
3971   --f7-button-min-width: 32px;
3972   --f7-button-bg-color: transparent;
3973   --f7-button-border-width: 0px;
3974   /*
3975   --f7-button-text-color: var(--f7-theme-color);
3976   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
3977   --f7-button-border-color: var(--f7-theme-color);
3978   --f7-button-fill-text-color: #fff;
3979   --f7-button-fill-bg-color: var(--f7-theme-color);
3980   --f7-button-outline-border-color: var(--f7-theme-color);
3981   */
3982   --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
3983   --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
3984   --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
3985 }
3986 .ios {
3987   --f7-button-height: 29px;
3988   --f7-button-padding-horizontal: 10px;
3989   --f7-button-border-radius: 5px;
3990   --f7-button-font-weight: 400;
3991   --f7-button-letter-spacing: 0;
3992   --f7-button-text-transform: none;
3993   /*
3994   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
3995   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
3996   */
3997   --f7-button-outline-border-width: 1px;
3998   --f7-button-large-height: 44px;
3999   --f7-button-large-font-size: 17px;
4000   --f7-button-small-height: 26px;
4001   --f7-button-small-font-size: 13px;
4002   --f7-button-small-font-weight: 600;
4003   --f7-button-small-text-transform: uppercase;
4004   --f7-button-small-outline-border-width: 2px;
4005 }
4006 .md {
4007   --f7-button-height: 36px;
4008   --f7-button-padding-horizontal: 8px;
4009   --f7-button-border-radius: 4px;
4010   --f7-button-font-weight: 500;
4011   --f7-button-letter-spacing: 0.03em;
4012   --f7-button-text-transform: uppercase;
4013   --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4014   /*
4015   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4016   */
4017   --f7-button-outline-border-width: 2px;
4018   --f7-button-large-height: 48px;
4019   --f7-button-large-font-size: 14px;
4020   --f7-button-small-height: 28px;
4021   --f7-button-small-font-size: 13px;
4022   --f7-button-small-font-weight: 500;
4023   --f7-button-small-text-transform: uppercase;
4024   --f7-button-small-outline-border-width: 2px;
4025 }
4026 .md .theme-dark,
4027 .md.theme-dark {
4028   --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4029 }
4030 button {
4031   -webkit-appearance: none;
4032      -moz-appearance: none;
4033           appearance: none;
4034   width: 100%;
4035 }
4036 .button {
4037   text-decoration: none;
4038   text-align: center;
4039   display: block;
4040   -webkit-appearance: none;
4041      -moz-appearance: none;
4042           appearance: none;
4043   background: none;
4044   margin: 0;
4045   white-space: nowrap;
4046   text-overflow: ellipsis;
4047   position: relative;
4048   overflow: hidden;
4049   font-family: inherit;
4050   cursor: pointer;
4051   outline: 0;
4052   box-sizing: border-box;
4053   vertical-align: middle;
4054   border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4055   font-size: var(--f7-button-font-size);
4056   color: var(--f7-button-text-color, var(--f7-theme-color));
4057   height: var(--f7-button-height);
4058   line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
4059   padding: var(--f7-button-padding-vertical, 0) var(--f7-button-padding-horizontal);
4060   border-radius: var(--f7-button-border-radius);
4061   min-width: var(--f7-button-min-width);
4062   font-weight: var(--f7-button-font-weight);
4063   letter-spacing: var(--f7-button-letter-spacing);
4064   text-transform: var(--f7-button-text-transform);
4065   background-color: var(--f7-button-bg-color);
4066   box-shadow: var(--f7-button-box-shadow);
4067 }
4068 .button.active-state {
4069   background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4070   color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4071 }
4072 input[type="submit"].button,
4073 input[type="button"].button {
4074   width: 100%;
4075 }
4076 .button > i + span,
4077 .button > span + span,
4078 .button > span + i,
4079 .button > i + i {
4080   margin-left: 4px;
4081 }
4082 .subnavbar .button,
4083 .navbar .button,
4084 .toolbar .button,
4085 .searchbar .button {
4086   color: var(--f7-button-text-color, var(--f7-theme-color));
4087 }
4088 .button-round,
4089 .ios .button-round-ios,
4090 .md .button-round-md {
4091   --f7-button-border-radius: var(--f7-button-height);
4092 }
4093 .button-fill,
4094 .ios .button-fill-ios,
4095 .md .button-fill-md,
4096 .button-active,
4097 .button.tab-link-active {
4098   --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4099   --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4100   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4101 }
4102 .button-fill,
4103 .ios .button-fill-ios,
4104 .md .button-fill-md {
4105   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4106 }
4107 .button-active,
4108 .button.tab-link-active {
4109   --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4110 }
4111 .button-outline,
4112 .ios .button-outline-ios,
4113 .md .button-outline-md {
4114   --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4115   --f7-button-border-width: var(--f7-button-outline-border-width);
4116 }
4117 .button-large,
4118 .ios .button-large-ios,
4119 .md .button-large-md {
4120   --f7-button-height: var(--f7-button-large-height);
4121   --f7-button-font-size: var(--f7-button-large-font-size);
4122 }
4123 .button-small,
4124 .ios .button-small-ios,
4125 .md .button-small-md {
4126   --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4127   --f7-button-height: var(--f7-button-small-height);
4128   --f7-button-font-size: var(--f7-button-small-font-size);
4129   --f7-button-font-weight: var(--f7-button-small-font-weight);
4130   --f7-button-text-transform: var(--f7-button-small-text-transform);
4131 }
4132 .ios .button-small.button-fill,
4133 .ios .button-small-ios.button-fill,
4134 .ios .button-small.button-fill-ios {
4135   --f7-button-border-width: var(--f7-button-small-outline-border-width);
4136   --f7-button-pressed-text-color: var(--f7-theme-color);
4137   --f7-button-pressed-bg-color: transparent;
4138 }
4139 .segmented {
4140   align-self: center;
4141   display: flex;
4142   flex-wrap: nowrap;
4143   border-radius: var(--f7-button-border-radius);
4144   box-shadow: var(--f7-button-box-shadow);
4145 }
4146 .segmented .button,
4147 .segmented button {
4148   width: 100%;
4149   flex-shrink: 1;
4150   min-width: 0;
4151   border-radius: 0;
4152 }
4153 .segmented .button:first-child {
4154   border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4155 }
4156 .segmented .button:not(.button-outline):first-child {
4157   border-left: none;
4158 }
4159 .segmented .button.button-outline:nth-child(n + 2) {
4160   border-left: none;
4161 }
4162 .segmented .button:last-child {
4163   border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4164 }
4165 .segmented .button-round:first-child {
4166   border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4167 }
4168 .segmented .button-round:last-child {
4169   border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4170 }
4171 .segmented .button:first-child:last-child {
4172   border-radius: var(--f7-button-border-radius);
4173 }
4174 .segmented-round,
4175 .ios .segmented-round-ios,
4176 .md .segmented-round-md {
4177   border-radius: var(--f7-button-height);
4178 }
4179 .segmented-raised,
4180 .ios .segmented-raised-ios,
4181 .md .segmented-raised-md {
4182   box-shadow: var(--f7-button-raised-box-shadow);
4183 }
4184 .segmented-raised .button:not(.button-outline),
4185 .ios .segmented-raised-ios .button:not(.button-outline),
4186 .md .segmented-raised-md .button:not(.button-outline) {
4187   border-left: 1px solid var(--f7-segmented-raised-divider-color);
4188 }
4189 .button-raised,
4190 .ios .button-raised-ios,
4191 .md .button-raised-md {
4192   --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4193 }
4194 .button-raised.active-state,
4195 .ios .button-raised-ios.active-state,
4196 .md .button-raised-md.active-state {
4197   --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4198 }
4199 .subnavbar .segmented {
4200   width: 100%;
4201 }
4202 .ios .button {
4203   transition-duration: 100ms;
4204 }
4205 .ios .button-fill,
4206 .ios .button-fill-ios {
4207   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4208 }
4209 .ios .button-small,
4210 .ios .button-small-ios {
4211   transition-duration: 200ms;
4212 }
4213 .md .button {
4214   transition-duration: 300ms;
4215   transform: translate3d(0, 0, 0);
4216 }
4217 .md .button-fill,
4218 .md .button-fill-md {
4219   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4220 }
4221 /* === Touch Ripple === */
4222 :root {
4223   --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4224   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4225   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4226 }
4227 .theme-dark {
4228   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4229 }
4230 .ripple,
4231 .fab a,
4232 a.link,
4233 a.item-link,
4234 a.list-button,
4235 .button,
4236 .dialog-button,
4237 .tab-link,
4238 .radio,
4239 .checkbox,
4240 .actions-button,
4241 .speed-dial-buttons a {
4242   -webkit-user-select: none;
4243   -moz-user-select: none;
4244    -ms-user-select: none;
4245        user-select: none;
4246 }
4247 .ripple-wave {
4248   left: 0;
4249   top: 0;
4250   position: absolute !important;
4251   border-radius: 50%;
4252   pointer-events: none;
4253   z-index: -1;
4254   padding: 0;
4255   margin: 0;
4256   font-size: 0;
4257   transform: translate3d(0px, 0px, 0) scale(0);
4258   transition-duration: 1400ms;
4259   background-color: var(--f7-touch-ripple-color);
4260   will-change: transform, opacity;
4261 }
4262 .ripple-wave.ripple-wave-fill {
4263   transition-duration: 300ms;
4264   opacity: 0.35;
4265 }
4266 .ripple-wave.ripple-wave-out {
4267   transition-duration: 600ms;
4268   opacity: 0;
4269 }
4270 .button-fill .ripple-wave,
4271 .picker-calendar-day .ripple-wave,
4272 .menu .ripple-wave {
4273   z-index: 1;
4274 }
4275 .checkbox .ripple-wave,
4276 .radio .ripple-wave,
4277 .data-table .sortable-cell .ripple-wave {
4278   z-index: 0;
4279 }
4280 [class*="ripple-color-"] {
4281   --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4282 }
4283 /* === Icon === */
4284 i.icon {
4285   display: inline-block;
4286   vertical-align: middle;
4287   background-size: 100% auto;
4288   background-position: center;
4289   background-repeat: no-repeat;
4290   font-style: normal;
4291   position: relative;
4292 }
4293 .icon-back:after,
4294 .icon-prev:after,
4295 .icon-forward:after,
4296 .icon-next:after {
4297   font-family: 'framework7-core-icons';
4298   font-weight: normal;
4299   font-style: normal;
4300   line-height: 1;
4301   letter-spacing: normal;
4302   text-transform: none;
4303   white-space: nowrap;
4304   word-wrap: normal;
4305   direction: ltr;
4306   -webkit-font-smoothing: antialiased;
4307   text-rendering: optimizeLegibility;
4308   -moz-osx-font-smoothing: grayscale;
4309   -moz-font-feature-settings: "liga";
4310        font-feature-settings: "liga";
4311   text-align: center;
4312   display: block;
4313   width: 100%;
4314   height: 100%;
4315   font-size: 20px;
4316 }
4317 .icon[class*="color-"] {
4318   color: var(--f7-theme-color);
4319 }
4320 .ios .icon-back,
4321 .ios .icon-prev,
4322 .ios .icon-forward,
4323 .ios .icon-next {
4324   width: 12px;
4325   height: 20px;
4326   line-height: 20px;
4327 }
4328 .ios .icon-back:after,
4329 .ios .icon-prev:after,
4330 .ios .icon-forward:after,
4331 .ios .icon-next:after {
4332   line-height: inherit;
4333 }
4334 .ios .icon-prev:after,
4335 .ios .icon-next:after {
4336   font-size: 16px;
4337 }
4338 .ios .item-media .icon {
4339   color: #808080;
4340 }
4341 .ios .item-media .f7-icons {
4342   font-size: 28px;
4343   width: 28px;
4344   height: 28px;
4345 }
4346 .ios .icon-back:after,
4347 .ios .icon-prev:after {
4348   content: 'chevron_left_ios';
4349 }
4350 .ios .icon-forward:after,
4351 .ios .icon-next:after {
4352   content: 'chevron_right_ios';
4353 }
4354 .md .icon-back,
4355 .md .icon-forward,
4356 .md .icon-next,
4357 .md .icon-prev {
4358   width: 24px;
4359   height: 24px;
4360 }
4361 .md .icon-back:after,
4362 .md .icon-forward:after,
4363 .md .icon-next:after,
4364 .md .icon-prev:after {
4365   line-height: 1.2;
4366 }
4367 .md .item-media .icon {
4368   color: #737373;
4369 }
4370 .md .item-media .material-icons {
4371   font-size: 24px;
4372   width: 24px;
4373   height: 24px;
4374 }
4375 .md .icon-back:after {
4376   content: 'arrow_left_md';
4377 }
4378 .md .icon-forward:after {
4379   content: 'arrow_right_md';
4380 }
4381 .md .icon-next:after {
4382   content: 'chevron_right_md';
4383 }
4384 .md .icon-prev:after {
4385   content: 'chevron_left_md';
4386 }
4387 .custom-modal-backdrop {
4388   z-index: 10500;
4389 }
4390 .custom-modal-backdrop,
4391 .actions-backdrop,
4392 .dialog-backdrop,
4393 .popover-backdrop,
4394 .popup-backdrop,
4395 .preloader-backdrop,
4396 .sheet-backdrop {
4397   position: absolute;
4398   left: 0;
4399   top: 0;
4400   width: 100%;
4401   height: 100%;
4402   background: rgba(0, 0, 0, 0.4);
4403   z-index: 13000;
4404   visibility: hidden;
4405   opacity: 0;
4406   transition-duration: 400ms;
4407 }
4408 .custom-modal-backdrop.not-animated,
4409 .actions-backdrop.not-animated,
4410 .dialog-backdrop.not-animated,
4411 .popover-backdrop.not-animated,
4412 .popup-backdrop.not-animated,
4413 .preloader-backdrop.not-animated,
4414 .sheet-backdrop.not-animated {
4415   transition-duration: 0ms;
4416 }
4417 .custom-modal-backdrop.backdrop-in,
4418 .actions-backdrop.backdrop-in,
4419 .dialog-backdrop.backdrop-in,
4420 .popover-backdrop.backdrop-in,
4421 .popup-backdrop.backdrop-in,
4422 .preloader-backdrop.backdrop-in,
4423 .sheet-backdrop.backdrop-in {
4424   visibility: visible;
4425   opacity: 1;
4426 }