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