framework7/css/framework7.bundle.css

   1 /**
   2  * Framework7 4.0.5
   3  * Full featured mobile HTML framework for building iOS & Android apps
   4  * http://framework7.io/
   5  *
   6  * Copyright 2014-2019 Vladimir Kharlampidi
   7  *
   8  * Released under the MIT License
   9  *
  10  * Released on: February 14, 2019
  11  */
  12
  13 /*====================
  14   Core
  15   ==================== */
  16 :root {
  17   --f7-theme-color: #007aff;
  18   --f7-theme-color-rgb: 0, 122, 255;
  19   --f7-theme-color-shade: #0066d6;
  20   --f7-theme-color-tint: #298fff;
  21   --f7-safe-area-left: 0px;
  22   --f7-safe-area-right: 0px;
  23   --f7-safe-area-top: 0px;
  24   --f7-safe-area-bottom: 0px;
  25   --f7-safe-area-outer-left: 0px;
  26   --f7-safe-area-outer-right: 0px;
  27   --f7-device-pixel-ratio: 1;
  28 }
  29 @supports (left: env(safe-area-inset-left)) {
  30   :root {
  31     --f7-safe-area-top: env(safe-area-inset-top);
  32     --f7-safe-area-bottom: env(safe-area-inset-bottom);
  33   }
  34   :root .ios-left-edge,
  35   :root .ios-edges,
  36   :root .safe-area-left,
  37   :root .safe-areas,
  38   :root .popup,
  39   :root .sheet-modal,
  40   :root .panel-left {
  41     --f7-safe-area-left: env(safe-area-inset-left);
  42     --f7-safe-area-outer-left: env(safe-area-inset-left);
  43   }
  44   :root .ios-right-edge,
  45   :root .ios-edges,
  46   :root .safe-area-right,
  47   :root .safe-areas,
  48   :root .popup,
  49   :root .sheet-modal,
  50   :root .panel-right {
  51     --f7-safe-area-right: env(safe-area-inset-right);
  52     --f7-safe-area-outer-right: env(safe-area-inset-right);
  53   }
  54   :root .no-safe-areas,
  55   :root .no-safe-area-left,
  56   :root .no-ios-edges,
  57   :root .no-ios-left-edge {
  58     --f7-safe-area-left: 0px;
  59     --f7-safe-area-outer-left: 0px;
  60   }
  61   :root .no-safe-areas,
  62   :root .no-safe-area-right,
  63   :root .no-ios-edges,
  64   :root .no-ios-right-edge {
  65     --f7-safe-area-right: 0px;
  66     --f7-safe-area-outer-right: 0px;
  67   }
  68 }
  69 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  70   :root {
  71     --f7-device-pixel-ratio: 2;
  72   }
  73 }
  74 @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  75   :root {
  76     --f7-device-pixel-ratio: 3;
  77   }
  78 }
  79 /*====================
  80   Fonts
  81   ==================== */
  82 .ios {
  83   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  84   --f7-text-color: #000;
  85   --f7-font-size: 14px;
  86   --f7-line-height: 1.4;
  87 }
  88 .ios .theme-dark,
  89 .ios.theme-dark {
  90   --f7-text-color: #fff;
  91 }
  92 .md {
  93   --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  94   --f7-text-color: #212121;
  95   --f7-font-size: 14px;
  96   --f7-line-height: 1.5;
  97 }
  98 .md .theme-dark,
  99 .md.theme-dark {
 100   --f7-text-color: rgba(255, 255, 255, 0.87);
 101 }
 102 /*====================
 103   Bars
 104   ==================== */
 105 :root {
 106   /*
 107   --f7-bars-link-color: var(--f7-theme-color);
 108   */
 109   --f7-bars-bg-image: none;
 110   --f7-bars-bg-color: #f7f7f8;
 111   --f7-bars-bg-color-rgb: 247, 247, 248;
 112   --f7-bars-text-color: #000;
 113   --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
 114   --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
 115 }
 116 .theme-dark {
 117   --f7-bars-bg-color: #1b1b1b;
 118   --f7-bars-text-color: #fff;
 119 }
 120 .ios {
 121   --f7-bars-border-color: #c4c4c4;
 122 }
 123 .ios .theme-dark,
 124 .ios.theme-dark {
 125   --f7-bars-border-color: #282829;
 126 }
 127 .md {
 128   --f7-bars-border-color: transparent;
 129 }
 130 /*====================
 131   Color Themes
 132   ==================== */
 133 .text-color-primary {
 134   --f7-theme-color-text-color: var(--f7-theme-color);
 135 }
 136 .bg-color-primary {
 137   --f7-theme-color-bg-color: var(--f7-theme-color);
 138 }
 139 .border-color-primary {
 140   --f7-theme-color-border-color: var(--f7-theme-color);
 141 }
 142 .ripple-color-primary {
 143   --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
 144 }
 145 :root {
 146   --f7-color-red: #ff3b30;
 147   --f7-color-red-rgb: 255, 59, 48;
 148   --f7-color-red-shade: #ff1407;
 149   --f7-color-red-tint: #ff6259;
 150   --f7-color-green: #4cd964;
 151   --f7-color-green-rgb: 76, 217, 100;
 152   --f7-color-green-shade: #2cd048;
 153   --f7-color-green-tint: #6ee081;
 154   --f7-color-blue: #2196f3;
 155   --f7-color-blue-rgb: 33, 150, 243;
 156   --f7-color-blue-shade: #0c82df;
 157   --f7-color-blue-tint: #48a8f5;
 158   --f7-color-pink: #ff2d55;
 159   --f7-color-pink-rgb: 255, 45, 85;
 160   --f7-color-pink-shade: #ff0434;
 161   --f7-color-pink-tint: #ff5676;
 162   --f7-color-yellow: #ffcc00;
 163   --f7-color-yellow-rgb: 255, 204, 0;
 164   --f7-color-yellow-shade: #d6ab00;
 165   --f7-color-yellow-tint: #ffd429;
 166   --f7-color-orange: #ff9500;
 167   --f7-color-orange-rgb: 255, 149, 0;
 168   --f7-color-orange-shade: #d67d00;
 169   --f7-color-orange-tint: #ffa629;
 170   --f7-color-purple: #9c27b0;
 171   --f7-color-purple-rgb: 156, 39, 176;
 172   --f7-color-purple-shade: #7e208f;
 173   --f7-color-purple-tint: #b92fd1;
 174   --f7-color-deeppurple: #673ab7;
 175   --f7-color-deeppurple-rgb: 103, 58, 183;
 176   --f7-color-deeppurple-shade: #563098;
 177   --f7-color-deeppurple-tint: #7c52c8;
 178   --f7-color-lightblue: #5ac8fa;
 179   --f7-color-lightblue-rgb: 90, 200, 250;
 180   --f7-color-lightblue-shade: #32bbf9;
 181   --f7-color-lightblue-tint: #82d5fb;
 182   --f7-color-teal: #009688;
 183   --f7-color-teal-rgb: 0, 150, 136;
 184   --f7-color-teal-shade: #006d63;
 185   --f7-color-teal-tint: #00bfad;
 186   --f7-color-lime: #cddc39;
 187   --f7-color-lime-rgb: 205, 220, 57;
 188   --f7-color-lime-shade: #bac923;
 189   --f7-color-lime-tint: #d6e25c;
 190   --f7-color-deeporange: #ff6b22;
 191   --f7-color-deeporange-rgb: 255, 107, 34;
 192   --f7-color-deeporange-shade: #f85200;
 193   --f7-color-deeporange-tint: #ff864b;
 194   --f7-color-gray: #8e8e93;
 195   --f7-color-gray-rgb: 142, 142, 147;
 196   --f7-color-gray-shade: #79797f;
 197   --f7-color-gray-tint: #a3a3a7;
 198   --f7-color-white: #ffffff;
 199   --f7-color-white-rgb: 255, 255, 255;
 200   --f7-color-white-shade: #ebebeb;
 201   --f7-color-white-tint: #ffffff;
 202   --f7-color-black: #000000;
 203   --f7-color-black-rgb: 0, 0, 0;
 204   --f7-color-black-shade: #000000;
 205   --f7-color-black-tint: #141414;
 206 }
 207 .color-theme-red {
 208   --f7-theme-color: #ff3b30;
 209   --f7-theme-color-rgb: 255, 59, 48;
 210   --f7-theme-color-shade: #ff1407;
 211   --f7-theme-color-tint: #ff6259;
 212 }
 213 .color-theme-green {
 214   --f7-theme-color: #4cd964;
 215   --f7-theme-color-rgb: 76, 217, 100;
 216   --f7-theme-color-shade: #2cd048;
 217   --f7-theme-color-tint: #6ee081;
 218 }
 219 .color-theme-blue {
 220   --f7-theme-color: #2196f3;
 221   --f7-theme-color-rgb: 33, 150, 243;
 222   --f7-theme-color-shade: #0c82df;
 223   --f7-theme-color-tint: #48a8f5;
 224 }
 225 .color-theme-pink {
 226   --f7-theme-color: #ff2d55;
 227   --f7-theme-color-rgb: 255, 45, 85;
 228   --f7-theme-color-shade: #ff0434;
 229   --f7-theme-color-tint: #ff5676;
 230 }
 231 .color-theme-yellow {
 232   --f7-theme-color: #ffcc00;
 233   --f7-theme-color-rgb: 255, 204, 0;
 234   --f7-theme-color-shade: #d6ab00;
 235   --f7-theme-color-tint: #ffd429;
 236 }
 237 .color-theme-orange {
 238   --f7-theme-color: #ff9500;
 239   --f7-theme-color-rgb: 255, 149, 0;
 240   --f7-theme-color-shade: #d67d00;
 241   --f7-theme-color-tint: #ffa629;
 242 }
 243 .color-theme-purple {
 244   --f7-theme-color: #9c27b0;
 245   --f7-theme-color-rgb: 156, 39, 176;
 246   --f7-theme-color-shade: #7e208f;
 247   --f7-theme-color-tint: #b92fd1;
 248 }
 249 .color-theme-deeppurple {
 250   --f7-theme-color: #673ab7;
 251   --f7-theme-color-rgb: 103, 58, 183;
 252   --f7-theme-color-shade: #563098;
 253   --f7-theme-color-tint: #7c52c8;
 254 }
 255 .color-theme-lightblue {
 256   --f7-theme-color: #5ac8fa;
 257   --f7-theme-color-rgb: 90, 200, 250;
 258   --f7-theme-color-shade: #32bbf9;
 259   --f7-theme-color-tint: #82d5fb;
 260 }
 261 .color-theme-teal {
 262   --f7-theme-color: #009688;
 263   --f7-theme-color-rgb: 0, 150, 136;
 264   --f7-theme-color-shade: #006d63;
 265   --f7-theme-color-tint: #00bfad;
 266 }
 267 .color-theme-lime {
 268   --f7-theme-color: #cddc39;
 269   --f7-theme-color-rgb: 205, 220, 57;
 270   --f7-theme-color-shade: #bac923;
 271   --f7-theme-color-tint: #d6e25c;
 272 }
 273 .color-theme-deeporange {
 274   --f7-theme-color: #ff6b22;
 275   --f7-theme-color-rgb: 255, 107, 34;
 276   --f7-theme-color-shade: #f85200;
 277   --f7-theme-color-tint: #ff864b;
 278 }
 279 .color-theme-gray {
 280   --f7-theme-color: #8e8e93;
 281   --f7-theme-color-rgb: 142, 142, 147;
 282   --f7-theme-color-shade: #79797f;
 283   --f7-theme-color-tint: #a3a3a7;
 284 }
 285 .color-theme-white {
 286   --f7-theme-color: #ffffff;
 287   --f7-theme-color-rgb: 255, 255, 255;
 288   --f7-theme-color-shade: #ebebeb;
 289   --f7-theme-color-tint: #ffffff;
 290 }
 291 .color-theme-black {
 292   --f7-theme-color: #000000;
 293   --f7-theme-color-rgb: 0, 0, 0;
 294   --f7-theme-color-shade: #000000;
 295   --f7-theme-color-tint: #141414;
 296 }
 297 .color-red {
 298   --f7-theme-color: #ff3b30;
 299   --f7-theme-color-rgb: 255, 59, 48;
 300   --f7-theme-color-shade: #ff1407;
 301   --f7-theme-color-tint: #ff6259;
 302 }
 303 .text-color-red {
 304   --f7-theme-color-text-color: #ff3b30;
 305 }
 306 .bg-color-red {
 307   --f7-theme-color-bg-color: #ff3b30;
 308 }
 309 .border-color-red {
 310   --f7-theme-color-border-color: #ff3b30;
 311 }
 312 .ripple-color-red,
 313 .ripple-red {
 314   --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
 315 }
 316 .color-green {
 317   --f7-theme-color: #4cd964;
 318   --f7-theme-color-rgb: 76, 217, 100;
 319   --f7-theme-color-shade: #2cd048;
 320   --f7-theme-color-tint: #6ee081;
 321 }
 322 .text-color-green {
 323   --f7-theme-color-text-color: #4cd964;
 324 }
 325 .bg-color-green {
 326   --f7-theme-color-bg-color: #4cd964;
 327 }
 328 .border-color-green {
 329   --f7-theme-color-border-color: #4cd964;
 330 }
 331 .ripple-color-green,
 332 .ripple-green {
 333   --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
 334 }
 335 .color-blue {
 336   --f7-theme-color: #2196f3;
 337   --f7-theme-color-rgb: 33, 150, 243;
 338   --f7-theme-color-shade: #0c82df;
 339   --f7-theme-color-tint: #48a8f5;
 340 }
 341 .text-color-blue {
 342   --f7-theme-color-text-color: #2196f3;
 343 }
 344 .bg-color-blue {
 345   --f7-theme-color-bg-color: #2196f3;
 346 }
 347 .border-color-blue {
 348   --f7-theme-color-border-color: #2196f3;
 349 }
 350 .ripple-color-blue,
 351 .ripple-blue {
 352   --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
 353 }
 354 .color-pink {
 355   --f7-theme-color: #ff2d55;
 356   --f7-theme-color-rgb: 255, 45, 85;
 357   --f7-theme-color-shade: #ff0434;
 358   --f7-theme-color-tint: #ff5676;
 359 }
 360 .text-color-pink {
 361   --f7-theme-color-text-color: #ff2d55;
 362 }
 363 .bg-color-pink {
 364   --f7-theme-color-bg-color: #ff2d55;
 365 }
 366 .border-color-pink {
 367   --f7-theme-color-border-color: #ff2d55;
 368 }
 369 .ripple-color-pink,
 370 .ripple-pink {
 371   --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
 372 }
 373 .color-yellow {
 374   --f7-theme-color: #ffcc00;
 375   --f7-theme-color-rgb: 255, 204, 0;
 376   --f7-theme-color-shade: #d6ab00;
 377   --f7-theme-color-tint: #ffd429;
 378 }
 379 .text-color-yellow {
 380   --f7-theme-color-text-color: #ffcc00;
 381 }
 382 .bg-color-yellow {
 383   --f7-theme-color-bg-color: #ffcc00;
 384 }
 385 .border-color-yellow {
 386   --f7-theme-color-border-color: #ffcc00;
 387 }
 388 .ripple-color-yellow,
 389 .ripple-yellow {
 390   --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
 391 }
 392 .color-orange {
 393   --f7-theme-color: #ff9500;
 394   --f7-theme-color-rgb: 255, 149, 0;
 395   --f7-theme-color-shade: #d67d00;
 396   --f7-theme-color-tint: #ffa629;
 397 }
 398 .text-color-orange {
 399   --f7-theme-color-text-color: #ff9500;
 400 }
 401 .bg-color-orange {
 402   --f7-theme-color-bg-color: #ff9500;
 403 }
 404 .border-color-orange {
 405   --f7-theme-color-border-color: #ff9500;
 406 }
 407 .ripple-color-orange,
 408 .ripple-orange {
 409   --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
 410 }
 411 .color-purple {
 412   --f7-theme-color: #9c27b0;
 413   --f7-theme-color-rgb: 156, 39, 176;
 414   --f7-theme-color-shade: #7e208f;
 415   --f7-theme-color-tint: #b92fd1;
 416 }
 417 .text-color-purple {
 418   --f7-theme-color-text-color: #9c27b0;
 419 }
 420 .bg-color-purple {
 421   --f7-theme-color-bg-color: #9c27b0;
 422 }
 423 .border-color-purple {
 424   --f7-theme-color-border-color: #9c27b0;
 425 }
 426 .ripple-color-purple,
 427 .ripple-purple {
 428   --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
 429 }
 430 .color-deeppurple {
 431   --f7-theme-color: #673ab7;
 432   --f7-theme-color-rgb: 103, 58, 183;
 433   --f7-theme-color-shade: #563098;
 434   --f7-theme-color-tint: #7c52c8;
 435 }
 436 .text-color-deeppurple {
 437   --f7-theme-color-text-color: #673ab7;
 438 }
 439 .bg-color-deeppurple {
 440   --f7-theme-color-bg-color: #673ab7;
 441 }
 442 .border-color-deeppurple {
 443   --f7-theme-color-border-color: #673ab7;
 444 }
 445 .ripple-color-deeppurple,
 446 .ripple-deeppurple {
 447   --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
 448 }
 449 .color-lightblue {
 450   --f7-theme-color: #5ac8fa;
 451   --f7-theme-color-rgb: 90, 200, 250;
 452   --f7-theme-color-shade: #32bbf9;
 453   --f7-theme-color-tint: #82d5fb;
 454 }
 455 .text-color-lightblue {
 456   --f7-theme-color-text-color: #5ac8fa;
 457 }
 458 .bg-color-lightblue {
 459   --f7-theme-color-bg-color: #5ac8fa;
 460 }
 461 .border-color-lightblue {
 462   --f7-theme-color-border-color: #5ac8fa;
 463 }
 464 .ripple-color-lightblue,
 465 .ripple-lightblue {
 466   --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
 467 }
 468 .color-teal {
 469   --f7-theme-color: #009688;
 470   --f7-theme-color-rgb: 0, 150, 136;
 471   --f7-theme-color-shade: #006d63;
 472   --f7-theme-color-tint: #00bfad;
 473 }
 474 .text-color-teal {
 475   --f7-theme-color-text-color: #009688;
 476 }
 477 .bg-color-teal {
 478   --f7-theme-color-bg-color: #009688;
 479 }
 480 .border-color-teal {
 481   --f7-theme-color-border-color: #009688;
 482 }
 483 .ripple-color-teal,
 484 .ripple-teal {
 485   --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
 486 }
 487 .color-lime {
 488   --f7-theme-color: #cddc39;
 489   --f7-theme-color-rgb: 205, 220, 57;
 490   --f7-theme-color-shade: #bac923;
 491   --f7-theme-color-tint: #d6e25c;
 492 }
 493 .text-color-lime {
 494   --f7-theme-color-text-color: #cddc39;
 495 }
 496 .bg-color-lime {
 497   --f7-theme-color-bg-color: #cddc39;
 498 }
 499 .border-color-lime {
 500   --f7-theme-color-border-color: #cddc39;
 501 }
 502 .ripple-color-lime,
 503 .ripple-lime {
 504   --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
 505 }
 506 .color-deeporange {
 507   --f7-theme-color: #ff6b22;
 508   --f7-theme-color-rgb: 255, 107, 34;
 509   --f7-theme-color-shade: #f85200;
 510   --f7-theme-color-tint: #ff864b;
 511 }
 512 .text-color-deeporange {
 513   --f7-theme-color-text-color: #ff6b22;
 514 }
 515 .bg-color-deeporange {
 516   --f7-theme-color-bg-color: #ff6b22;
 517 }
 518 .border-color-deeporange {
 519   --f7-theme-color-border-color: #ff6b22;
 520 }
 521 .ripple-color-deeporange,
 522 .ripple-deeporange {
 523   --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
 524 }
 525 .color-gray {
 526   --f7-theme-color: #8e8e93;
 527   --f7-theme-color-rgb: 142, 142, 147;
 528   --f7-theme-color-shade: #79797f;
 529   --f7-theme-color-tint: #a3a3a7;
 530 }
 531 .text-color-gray {
 532   --f7-theme-color-text-color: #8e8e93;
 533 }
 534 .bg-color-gray {
 535   --f7-theme-color-bg-color: #8e8e93;
 536 }
 537 .border-color-gray {
 538   --f7-theme-color-border-color: #8e8e93;
 539 }
 540 .ripple-color-gray,
 541 .ripple-gray {
 542   --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
 543 }
 544 .color-white {
 545   --f7-theme-color: #ffffff;
 546   --f7-theme-color-rgb: 255, 255, 255;
 547   --f7-theme-color-shade: #ebebeb;
 548   --f7-theme-color-tint: #ffffff;
 549 }
 550 .text-color-white {
 551   --f7-theme-color-text-color: #ffffff;
 552 }
 553 .bg-color-white {
 554   --f7-theme-color-bg-color: #ffffff;
 555 }
 556 .border-color-white {
 557   --f7-theme-color-border-color: #ffffff;
 558 }
 559 .ripple-color-white,
 560 .ripple-white {
 561   --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
 562 }
 563 .color-black {
 564   --f7-theme-color: #000000;
 565   --f7-theme-color-rgb: 0, 0, 0;
 566   --f7-theme-color-shade: #000000;
 567   --f7-theme-color-tint: #141414;
 568 }
 569 .text-color-black {
 570   --f7-theme-color-text-color: #000000;
 571 }
 572 .bg-color-black {
 573   --f7-theme-color-bg-color: #000000;
 574 }
 575 .border-color-black {
 576   --f7-theme-color-border-color: #000000;
 577 }
 578 .ripple-color-black,
 579 .ripple-black {
 580   --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
 581 }
 582 @font-face {
 583   font-family: 'framework7-core-icons';
 584   src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAucABAAAAAAFdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALgAAAABkAAAAciVvo20dERUYAAAmwAAAAIwAAACQAdwBXR1BPUwAAC1AAAAAuAAAANuAY7+xHU1VCAAAJ1AAAAXsAAANI9IT86E9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAnQAAACIAAABYt6F0cBjdnQgAAAC/AAAAAQAAAAEABEBRGdhc3AAAAmoAAAACAAAAAj//wADZ2x5ZgAAA4gAAAOZAAAITCn3I+5oZWFkAAABbAAAADAAAAA2FHn/62hoZWEAAAGcAAAAIAAAACQHggM3aG10eAAAAigAAABMAAABDCk9AApsb2NhAAADAAAAAIgAAACIN4I51G1heHAAAAG8AAAAHwAAACAAiQBLbmFtZQAAByQAAAFTAAAC1pgGDVZwb3N0AAAIeAAAAS4AAAH92CB3HXjaY2BkYGAA4uKM/yHx/DZfGbiZGEDgRu397TD6/89/vSxpTJ+BXA4GsDQAfeMOn3jaY2BkYGD6/K+XQY8l7f9PBgaWNAagCApwBgCRZgXAeNpjYGRgYHBmkGJgYQABJiBmZACJOTDogQQADRYA1QB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wLxWSCWAGI3CGZKg/KBNBNIjTHEHKazED1MQD4AiKAPYnjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DEAMiAzQDRANqA3wDlgOqA7wDzgP2BAwEJnja7VTPaxtHFH7fyNLGCFuWrF/tpZa82nVpcYhW0qZUrgWKezAtDcHuwZdYJeiUQ0yIe5N8LAGhHhyMRW6GHNqTZdOeKqu9KBc1oFMpPqlQh0JOPgXiVd/MaoOT/gclMLNv5pu3b7753pshQWEi2sc6+UijxUPQ1WJbm6AX2cOA/7TY9gke0qFPwn4Jt7UAXhXbkLgVtsKmFZ4Pf/dttYp158cwLI4Gbl3VeRS+JsfvsHfY/x4TlzAfo58IBdME90ncxAbfsBDFKEEUSQei8WwhZ2Tj0UDayPltM4SEbf6wViyuFR/fXV29u4ry1L3p6a3pLZSKa0tLa1+vSvjl9L0pCbocRr/C4k0iRJl0SMhIyzCNXCH7AeIwAfwVnIsHT06C8VRwGGoLMQzG54KdE4kOQy7n0Rm6eMLvwHscJaGZeTMwn5Yx4rGolkhLlswWpR1jR1tcXqlUHn6zoP20eePGZrmxY9Rj2kLlYaWy8tmiVt4slzcVLzKow+f1E81qHNLubG/rrRYKytCY+zlaaNAV3jWWkk4JDS3naVPv9/XmnznXjn1pCr/hjoxnIwHTbiKkO/2mvj62hNFL1uIj1oLfM7uwDKYfZUmlvFdh+MEn5zN3OvL8w9Az+IZSE567Ssg9otRzOdtMxrR7B3q9rv/M31rmzfU8U01o4+VMra4rHZ3GRFWcU1DmN2OyQ8LmjNqmmNPFTESfm4jMCFHqFXpe+9T53bnY24MPWfj29v7p2d6S/er0NexcSLf/aiYF4/fXRkvqZH3flQbXWUBPsxK+RIkCPElo19gbH+qnWzpjbOa/UJxpA30Y6u2nJaRi/nwqhr5joX9uWfuWpfbsIsm68rkzkLogOaLk8+fJrmvcvW7jc44j882Z1MwDJQ4MZTw+r304CGvj+tw+0Gs1XdVhQ1RxzkxmiXIznL+ZQBocy1Py2Dk+dmj0frXqtRLo6GhER9i/BNKbnPOQuQIlz86SXYwZezVVxX3OF0FTpBUtVJtN3Wv46tJE/uN0RUt0paY2a29N4u/+mdN1njSEdaFk82Kv8L00lPZKehvWszuRW78gqszbd0RWv8k3Q3/wABtstrdpfDc3RF8YNMmvhtTEkqLMp2cvVddg99Fg8Gh3t1aocavL78dYGAycPwZ4XLdrNbuuvm/Xj9ozlU+ZfVk3zlNcb6IhhzlVPz7JT1jMT9YGaxTOu9Uhuzys22HkcjuqEf0LOMqq8QAAAHjarZC9TgJBFIXP8GOihTFG+lsCYTfDhoRAZUJCQ2MstnazjDCB3cFhE0J8Fms7G2ufwtha+hzeGaawoLBgk5v59sy5M+cOgEu8QeDwtXEfWKCF18A1XOAzcB1S3AZuoCVeAjdxJb4Cn6FVu2anaJzz353vcizQxXPgGm7wEbiOB3wHbqArngI3QeI98BnrP5jAYIM9LDQWWKICceYcHV4TSPQxQo85xRoZ5uwquCwrM3ZnTE4v+AztdzExm73Vi2VF7bxDieyPepSus7kutKXZMrPrrNjoOTsfudm1Kuw4hMUKQ0R8tWPFpD2X2LLVZoXaGbsaRrmxKtK5KVk+6v1rmHqx8qvl+ZSfKua5CGOu/0c4+AesJb4OL4OpKaupsQtFSSxpTEeDsj6Iksi9xSmmTtlneV97H3EUFyb2qxsMqbJbbUqSsh9LKekEl/4CxNCFmAB42m2QB2/CMBCF30FbSBgJBcJof0333nsoColprEIcOWb8+ao1I4hIPcmS796973xGDvP4/QHhv9jXh5BDHjbqaKAJBy200UEXO9jFHg5wiCMc4wSnOMM5LnCJK1zjBre4wz0e8IgnPOMFr3jDOz7wSTnK0wZt0hYVqEgGmVSiMlWoShbZVKNtqlODmuRQi9rUoa6ZME/6octFUvNDNpYiciX/CtWsYizFYWCl2oD1lc4rnpRikmYlrfrfPTHVdzvTqSGVDLa8LjuRULzPfU9xXfEHImEzh7WA94RSYqiRhvQCLmZKIRFyPjCZ8JhJN2JTZabEUbyCB2ISWQEbMMVcKUZRsOaJJRsbS00vEivpLuZpfnm1iE7s7H/o1TJE3VFdGFO9OH+drv8BbS2SHgAAAAAAAf//AAJ42mNgZGBg4AFiGSBmAkJmBk0GRgYtBicgmwUsxgAADTQAzwB42nVSSVLCQBR9HSmJOIAhSkpJkEGwEOcZcVy4cO2SDSu1inJFuXDhUTyBJ/AcnsMjiO93TAKhUl1Jd7/3+v2hGwpABh5aUP3e4AUmUkQwHEIY1X9+7BGDvyOX0rMJZfwiDRuv6tPIGB2jawwwRXwDdzhEFmUOD3WuFjlXOTwUuSsijxssjPBlOFhGgQqf3cb8CLvKGEshl6GyjS7e8YEvfONHmWoNm4xRoG5dn3Jjng6xCnaRi2kiZ19xNaGIZ7bFOclD+D1mnuRwhrkYl9cVutifYALXy3/GworuYiPMdQezE4xkcMoOjXvVUNL30sQ9rlmhrd2r/LJaU6MqH/q2uUpSiH8HM2O8YPIqDlil3LLDvB1mldNrPwOLevG2wyhy4oK9qtI/S2102xF/xEg5ugsS4NN8N3V25QFPeMM5e1AnU6Kz+JT4l8pPYrjLucFYTfbG1tEs9ijwbOmKIlQqumW/PCLR2zjmWw8Qv+Y0z1hcuTpu5Q/+XTUsAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlguvb+dhgNAEgzB6UAAAA=") format("woff");
 585   font-weight: 400;
 586   font-style: normal;
 587 }
 588 @font-face {
 589   font-family: 'framework7-skeleton';
 590   src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
 591   font-weight: 300, 400, 500, 600, 700;
 592   font-style: normal, italic;
 593 }
 594 html,
 595 body,
 596 .framework7-root {
 597   position: relative;
 598   height: 100%;
 599   width: 100%;
 600   overflow-x: hidden;
 601 }
 602 body {
 603   margin: 0;
 604   padding: 0;
 605   width: 100%;
 606   background: #fff;
 607   overflow: hidden;
 608   -webkit-text-size-adjust: 100%;
 609   -webkit-font-smoothing: antialiased;
 610   font-family: var(--f7-font-family);
 611   font-size: var(--f7-font-size);
 612   line-height: var(--f7-line-height);
 613   color: var(--f7-text-color);
 614 }
 615 .theme-dark {
 616   color: var(--f7-text-color);
 617 }
 618 .framework7-root {
 619   overflow: hidden;
 620   box-sizing: border-box;
 621 }
 622 .framework7-initializing *,
 623 .framework7-initializing *:before,
 624 .framework7-initializing *:after {
 625   transition-duration: 0ms !important;
 626 }
 627 .device-ios,
 628 .device-android {
 629   cursor: pointer;
 630 }
 631 .device-ios {
 632   touch-action: manipulation;
 633 }
 634 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 635   html,
 636   body,
 637   .framework7-root {
 638     height: 671px;
 639   }
 640 }
 641 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 642   html,
 643   body,
 644   .framework7-root {
 645     height: 672px;
 646   }
 647 }
 648 * {
 649   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 650   -webkit-touch-callout: none;
 651 }
 652 a,
 653 input,
 654 textarea,
 655 select {
 656   outline: 0;
 657 }
 658 a {
 659   cursor: pointer;
 660   text-decoration: none;
 661   color: var(--f7-theme-color);
 662 }
 663 p {
 664   margin: 1em 0;
 665 }
 666 .disabled {
 667   opacity: 0.55 !important;
 668   pointer-events: none !important;
 669 }
 670 html.device-full-viewport,
 671 html.device-full-viewport body {
 672   height: 100vh;
 673 }
 674 .ios .md-only,
 675 .ios .if-md {
 676   display: none !important;
 677 }
 678 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 679   .ios,
 680   .ios body,
 681   .ios .framework7-root {
 682     height: 671px;
 683   }
 684 }
 685 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 686   .ios,
 687   .ios body,
 688   .ios .framework7-root {
 689     height: 672px;
 690   }
 691 }
 692 .md .ios-only,
 693 .md .if-ios {
 694   display: none !important;
 695 }
 696 /* === Statusbar === */
 697 :root {
 698   --f7-statusbar-height: 0px;
 699   --f7-statusbar-bg-color: var(--f7-bars-bg-color);
 700 }
 701 .device-ios {
 702   --f7-statusbar-height: var(--f7-safe-area-top, 20px);
 703 }
 704 .device-android {
 705   --f7-statusbar-height: var(--f7-safe-area-top, 24px);
 706 }
 707 .with-statusbar.ios:not(.device-ios):not(.device-android) {
 708   --f7-statusbar-height: 20px;
 709 }
 710 .with-statusbar.md:not(.device-ios):not(.device-android) {
 711   --f7-statusbar-height: 24px;
 712 }
 713 @supports not (top: env(safe-area-inset-top)) {
 714   .with-statusbar.device-ios {
 715     --f7-statusbar-height: 20px;
 716   }
 717 }
 718 @supports not (top: env(safe-area-inset-top)) {
 719   .with-statusbar.device-android {
 720     --f7-statusbar-height: 24px;
 721   }
 722 }
 723 .statusbar {
 724   position: absolute;
 725   left: 0;
 726   top: 0;
 727   width: 100%;
 728   z-index: 10000;
 729   box-sizing: border-box;
 730   display: block;
 731   height: var(--f7-statusbar-height);
 732 }
 733 .framework7-root {
 734   padding-top: var(--f7-statusbar-height);
 735 }
 736 .ios .statusbar {
 737   background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
 738 }
 739 .md .statusbar {
 740   background: var(--f7-statusbar-bg-color, var(--f7-theme-color-shade));
 741 }
 742 /* === Views === */
 743 .views,
 744 .view {
 745   position: relative;
 746   height: 100%;
 747   z-index: 5000;
 748   overflow: hidden;
 749   box-sizing: border-box;
 750 }
 751 /* === Pages === */
 752 :root {
 753   --f7-page-master-width: 320px;
 754   --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
 755   --f7-page-master-border-width: 1px;
 756 }
 757 .ios {
 758   --f7-page-bg-color: #efeff4;
 759   --f7-page-transition-duration: 400ms;
 760   --f7-page-swipeback-transition-duration: 400ms;
 761 }
 762 .md {
 763   --f7-page-bg-color: #fff;
 764   --f7-page-transition-duration: 250ms;
 765   --f7-page-swipeback-transition-duration: 400ms;
 766 }
 767 .theme-dark {
 768   --f7-page-bg-color: #171717;
 769   --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
 770 }
 771 .pages {
 772   position: relative;
 773   width: 100%;
 774   height: 100%;
 775   overflow: hidden;
 776 }
 777 .page {
 778   box-sizing: border-box;
 779   position: absolute;
 780   left: 0;
 781   top: 0;
 782   width: 100%;
 783   height: 100%;
 784   transform: translate3d(0, 0, 0);
 785   background-color: var(--f7-page-bg-color);
 786 }
 787 .page.stacked {
 788   display: none;
 789 }
 790 .page-with-navbar-large-collapsed {
 791   --f7-navbar-large-collapse-progress: 1;
 792 }
 793 .page-previous {
 794   pointer-events: none;
 795 }
 796 .page-content {
 797   will-change: scroll-position;
 798   overflow: auto;
 799   -webkit-overflow-scrolling: touch;
 800   box-sizing: border-box;
 801   height: 100%;
 802   position: relative;
 803   z-index: 1;
 804 }
 805 .page-transitioning,
 806 .page-transitioning .page-shadow-effect,
 807 .page-transitioning .page-opacity-effect {
 808   transition-duration: var(--f7-page-transition-duration);
 809 }
 810 .page-transitioning-swipeback,
 811 .page-transitioning-swipeback .page-shadow-effect,
 812 .page-transitioning-swipeback .page-opacity-effect {
 813   transition-duration: var(--f7-page-swipeback-transition-duration);
 814 }
 815 .router-transition-forward .page-next,
 816 .router-transition-backward .page-next,
 817 .router-transition-forward .page-current,
 818 .router-transition-backward .page-current,
 819 .router-transition-forward .page-previous:not(.stacked),
 820 .router-transition-backward .page-previous:not(.stacked) {
 821   pointer-events: none;
 822 }
 823 .page-shadow-effect {
 824   position: absolute;
 825   top: 0;
 826   width: 16px;
 827   bottom: 0;
 828   z-index: -1;
 829   content: '';
 830   opacity: 0;
 831   right: 100%;
 832   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 833 }
 834 .page-opacity-effect {
 835   position: absolute;
 836   left: 0;
 837   top: 0;
 838   background: rgba(0, 0, 0, 0.1);
 839   width: 100%;
 840   bottom: 0;
 841   content: '';
 842   opacity: 0;
 843   z-index: 10000;
 844 }
 845 .ios .page-previous {
 846   transform: translate3d(-20%, 0, 0);
 847 }
 848 .ios .page-next {
 849   transform: translate3d(100%, 0, 0);
 850 }
 851 .ios .page-previous .page-opacity-effect {
 852   opacity: 1;
 853 }
 854 .ios .page-previous:after {
 855   opacity: 1;
 856 }
 857 .ios .page-current .page-shadow-effect {
 858   opacity: 1;
 859 }
 860 .ios .router-transition-forward .page-next,
 861 .ios .router-transition-forward .page-current {
 862   will-change: transform;
 863 }
 864 .ios .router-transition-forward .page-next {
 865   animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
 866 }
 867 .ios .router-transition-forward .page-next:before {
 868   position: absolute;
 869   top: 0;
 870   width: 16px;
 871   bottom: 0;
 872   z-index: -1;
 873   content: '';
 874   opacity: 0;
 875   right: 100%;
 876   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 877   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 878 }
 879 .ios .router-transition-forward .page-current {
 880   animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
 881 }
 882 .ios .router-transition-forward .page-current:after {
 883   position: absolute;
 884   left: 0;
 885   top: 0;
 886   background: rgba(0, 0, 0, 0.1);
 887   width: 100%;
 888   bottom: 0;
 889   content: '';
 890   opacity: 0;
 891   z-index: 10000;
 892   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 893 }
 894 .ios .router-transition-backward .page-previous,
 895 .ios .router-transition-backward .page-current {
 896   will-change: transform;
 897 }
 898 .ios .router-transition-backward .page-previous {
 899   animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
 900 }
 901 .ios .router-transition-backward .page-previous:after {
 902   position: absolute;
 903   left: 0;
 904   top: 0;
 905   background: rgba(0, 0, 0, 0.1);
 906   width: 100%;
 907   bottom: 0;
 908   content: '';
 909   opacity: 0;
 910   z-index: 10000;
 911   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 912 }
 913 .ios .router-transition-backward .page-current {
 914   animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
 915 }
 916 .ios .router-transition-backward .page-current:before {
 917   position: absolute;
 918   top: 0;
 919   width: 16px;
 920   bottom: 0;
 921   z-index: -1;
 922   content: '';
 923   opacity: 0;
 924   right: 100%;
 925   background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 926   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 927 }
 928 .ios .router-dynamic-navbar-inside .page-shadow-effect,
 929 .ios .router-dynamic-navbar-inside .page-opacity-effect {
 930   top: var(--f7-navbar-height);
 931 }
 932 .ios .router-dynamic-navbar-inside .page-next:before,
 933 .ios .router-dynamic-navbar-inside .page-current:after,
 934 .ios .router-dynamic-navbar-inside .page-current:before,
 935 .ios .router-dynamic-navbar-inside .page-previous:after {
 936   top: var(--f7-navbar-height);
 937 }
 938 @keyframes ios-page-next-to-current {
 939   from {
 940     transform: translate3d(100%, 0, 0);
 941   }
 942   to {
 943     transform: translate3d(0%, 0, 0);
 944   }
 945 }
 946 @keyframes ios-page-previous-to-current {
 947   from {
 948     transform: translate3d(-20%, 0, 0);
 949   }
 950   to {
 951     transform: translate3d(0%, 0, 0);
 952   }
 953 }
 954 @keyframes ios-page-current-to-previous {
 955   from {
 956     transform: translate3d(0, 0, 0);
 957   }
 958   to {
 959     transform: translate3d(-20%, 0, 0);
 960   }
 961 }
 962 @keyframes ios-page-current-to-next {
 963   from {
 964     transform: translate3d(0, 0, 0);
 965   }
 966   to {
 967     transform: translate3d(100%, 0, 0);
 968   }
 969 }
 970 @keyframes ios-page-element-fade-in {
 971   from {
 972     opacity: 0;
 973   }
 974   to {
 975     opacity: 1;
 976   }
 977 }
 978 @keyframes ios-page-element-fade-out {
 979   from {
 980     opacity: 1;
 981   }
 982   to {
 983     opacity: 0;
 984   }
 985 }
 986 .md .page-next {
 987   transform: translate3d(0, 56px, 0);
 988   opacity: 0;
 989   pointer-events: none;
 990 }
 991 .md .page-next.page-next-on-right {
 992   transform: translate3d(100%, 0, 0);
 993 }
 994 .md .router-transition-forward .page-next {
 995   will-change: transform, opacity;
 996   animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
 997 }
 998 .md .router-transition-forward .page-current {
 999   animation: none;
1000 }
1001 .md .router-transition-backward .page-current {
1002   will-change: transform, opacity;
1003   animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1004 }
1005 .md .router-transition-backward .page-previous {
1006   animation: none;
1007 }
1008 @keyframes md-page-next-to-current {
1009   from {
1010     transform: translate3d(0, 56px, 0);
1011     opacity: 0;
1012   }
1013   to {
1014     transform: translate3d(0, 0px, 0);
1015     opacity: 1;
1016   }
1017 }
1018 @keyframes md-page-current-to-next {
1019   from {
1020     transform: translate3d(0, 0, 0);
1021     opacity: 1;
1022   }
1023   to {
1024     transform: translate3d(0, 56px, 0);
1025     opacity: 0;
1026   }
1027 }
1028 .view:not(.view-master-detail) .page-master-stacked {
1029   display: none;
1030 }
1031 .view:not(.view-master-detail) .navbar-master-stacked {
1032   display: none;
1033 }
1034 .view-master-detail .page-master,
1035 .view-master-detail .navbar-master {
1036   width: var(--f7-page-master-width);
1037   --f7-safe-area-right: 0px;
1038   --f7-safe-area-outer-right: 0px;
1039   border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1040 }
1041 .view-master-detail .page-master-detail,
1042 .view-master-detail .navbar-master-detail {
1043   width: calc(100% - var(--f7-page-master-width));
1044   --f7-safe-area-left: 0px;
1045   --f7-safe-area-outer-left: 0px;
1046   left: var(--f7-page-master-width);
1047 }
1048 .view-master-detail .page-master {
1049   z-index: 1;
1050   transform: none;
1051   pointer-events: auto;
1052 }
1053 .view-master-detail .page-master:before,
1054 .view-master-detail .page-master:after {
1055   display: none;
1056 }
1057 .view-master-detail.router-transition .page-master {
1058   animation: none;
1059 }
1060 /* === Link === */
1061 :root {
1062   --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1063   --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1064   --f7-link-highlight-color: var(--f7-link-highlight-black);
1065 }
1066 .theme-dark {
1067   --f7-link-highlight-color: var(--f7-link-highlight-white);
1068 }
1069 .link,
1070 .tab-link {
1071   display: inline-flex;
1072   align-items: center;
1073   align-content: center;
1074   justify-content: center;
1075   position: relative;
1076   box-sizing: border-box;
1077   transform: translate3d(0, 0, 0);
1078   z-index: 1;
1079 }
1080 .link i + span,
1081 .link i + i,
1082 .link span + i,
1083 .link span + span {
1084   margin-left: 4px;
1085 }
1086 .ios .link {
1087   transition: opacity 300ms;
1088 }
1089 .ios .link.active-state {
1090   opacity: 0.3;
1091   transition-duration: 0ms;
1092 }
1093 /* === Navbar === */
1094 :root {
1095   /*
1096   --f7-navbar-bg-color: var(--f7-bars-bg-color);
1097   --f7-navbar-bg-image: var(--f7-bars-bg-image);
1098   --f7-navbar-border-color: var(--f7-bars-border-color);
1099   --f7-navbar-link-color: var(--f7-bars-link-color);
1100   --f7-navbar-text-color: var(--f7-bars-text-color);
1101   */
1102   --f7-navbar-hide-show-transition-duration: 400ms;
1103   --f7-navbar-title-line-height: 1.2;
1104 }
1105 .ios {
1106   --f7-navbar-height: 44px;
1107   --f7-navbar-tablet-height: 44px;
1108   --f7-navbar-font-size: 17px;
1109   --f7-navbar-inner-padding-left: 8px;
1110   --f7-navbar-inner-padding-right: 8px;
1111   --f7-navbar-title-font-weight: 600;
1112   --f7-navbar-title-margin-left: 0;
1113   --f7-navbar-title-margin-right: 0;
1114   --f7-navbar-title-text-align: center;
1115   --f7-navbar-subtitle-text-color: #6d6d72;
1116   --f7-navbar-subtitle-font-size: 10px;
1117   --f7-navbar-subtitle-line-height: 1;
1118   --f7-navbar-subtitle-text-align: inherit;
1119   --f7-navbar-shadow-image: none;
1120   --f7-navbar-large-title-height: 52px;
1121   --f7-navbar-large-title-font-size: 34px;
1122   --f7-navbar-large-title-font-weight: 700;
1123   --f7-navbar-large-title-line-height: 1.2;
1124   --f7-navbar-large-title-letter-spacing: -0.03em;
1125   --f7-navbar-large-title-padding-left: 15px;
1126   --f7-navbar-large-title-padding-right: 15px;
1127   --f7-navbar-large-title-text-color: inherit;
1128 }
1129 .ios .theme-dark,
1130 .ios.theme-dark {
1131   --f7-navbar-subtitle-text-color: #8e8e93;
1132 }
1133 .md {
1134   --f7-navbar-height: 56px;
1135   --f7-navbar-tablet-height: 64px;
1136   --f7-navbar-font-size: 20px;
1137   --f7-navbar-inner-padding-left: 0px;
1138   --f7-navbar-inner-padding-right: 0px;
1139   --f7-navbar-title-font-weight: 500;
1140   --f7-navbar-title-margin-left: 16px;
1141   --f7-navbar-title-margin-right: 16px;
1142   --f7-navbar-title-text-align: left;
1143   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1144   --f7-navbar-subtitle-font-size: 14px;
1145   --f7-navbar-subtitle-line-height: 1.2;
1146   --f7-navbar-subtitle-text-align: inherit;
1147   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1148   --f7-navbar-large-title-font-size: 34px;
1149   --f7-navbar-large-title-height: 56px;
1150   --f7-navbar-large-title-font-weight: 500;
1151   --f7-navbar-large-title-line-height: 1.2;
1152   --f7-navbar-large-title-letter-spacing: 0;
1153   --f7-navbar-large-title-padding-left: 16px;
1154   --f7-navbar-large-title-padding-right: 16px;
1155   --f7-navbar-large-title-text-color: inherit;
1156 }
1157 .md .theme-dark,
1158 .md.theme-dark {
1159   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1160 }
1161 .navbar {
1162   --f7-navbar-large-collapse-progress: 0;
1163   position: relative;
1164   left: 0;
1165   top: 0;
1166   width: 100%;
1167   z-index: 500;
1168   -webkit-backface-visibility: hidden;
1169           backface-visibility: hidden;
1170   box-sizing: border-box;
1171   margin: 0;
1172   transform: translate3d(0, 0, 0);
1173   height: var(--f7-navbar-height);
1174   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1175   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1176   color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1177   font-size: var(--f7-navbar-font-size);
1178 }
1179 .navbar .material-icons {
1180   width: 24px;
1181 }
1182 .navbar .f7-icons {
1183   width: 28px;
1184 }
1185 .navbar b {
1186   font-weight: 500;
1187 }
1188 .navbar a {
1189   color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1190 }
1191 .navbar a.link {
1192   display: flex;
1193   justify-content: flex-start;
1194   line-height: var(--f7-navbar-height);
1195   height: var(--f7-navbar-height);
1196 }
1197 .navbar .title,
1198 .navbar .left,
1199 .navbar .right {
1200   position: relative;
1201   z-index: 10;
1202 }
1203 .navbar .title {
1204   text-align: center;
1205   position: relative;
1206   overflow: hidden;
1207   text-overflow: ellipsis;
1208   white-space: nowrap;
1209   flex-shrink: 10;
1210   font-weight: var(--f7-navbar-title-font-weight);
1211   display: inline-block;
1212   line-height: var(--f7-navbar-title-line-height);
1213   text-align: var(--f7-navbar-title-text-align);
1214   margin-left: var(--f7-navbar-title-margin-left);
1215   margin-right: var(--f7-navbar-title-margin-left);
1216 }
1217 .navbar .subtitle {
1218   display: block;
1219   color: var(--f7-navbar-subtitle-text-color);
1220   font-weight: normal;
1221   font-size: var(--f7-navbar-subtitle-font-size);
1222   line-height: var(--f7-navbar-subtitle-line-height);
1223   text-align: var(--f7-navbar-subtitle-text-align);
1224 }
1225 .navbar .left,
1226 .navbar .right {
1227   flex-shrink: 0;
1228   display: flex;
1229   justify-content: flex-start;
1230   align-items: center;
1231   transform: translate3d(0, 0, 0);
1232 }
1233 .navbar .right:first-child {
1234   position: absolute;
1235   height: 100%;
1236 }
1237 .navbar.no-hairline:after,
1238 .navbar.no-border:after {
1239   display: none !important;
1240 }
1241 .navbar.no-hairline .title-large:after,
1242 .navbar.no-border .title-large:after {
1243   display: none !important;
1244 }
1245 .navbar.no-shadow:before {
1246   display: none !important;
1247 }
1248 .navbar.navbar-hidden:before {
1249   opacity: 0 !important;
1250 }
1251 .navbar:after,
1252 .navbar:before {
1253   -webkit-backface-visibility: hidden;
1254           backface-visibility: hidden;
1255 }
1256 .navbar:after {
1257   content: '';
1258   position: absolute;
1259   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1260   display: block;
1261   z-index: 15;
1262   top: auto;
1263   right: auto;
1264   bottom: 0;
1265   left: 0;
1266   height: 1px;
1267   width: 100%;
1268   transform-origin: 50% 100%;
1269   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1270 }
1271 .navbar:before {
1272   content: '';
1273   position: absolute;
1274   right: 0;
1275   width: 100%;
1276   top: 100%;
1277   bottom: auto;
1278   height: 8px;
1279   pointer-events: none;
1280   background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
1281 }
1282 .navbar:after {
1283   z-index: 1;
1284 }
1285 @media (min-width: 768px) {
1286   :root {
1287     --f7-navbar-height: var(--f7-navbar-tablet-height);
1288   }
1289 }
1290 .navbar-transitioning,
1291 .navbar-transitioning:before,
1292 .navbar-transitioning .title,
1293 .navbar-transitioning .title-large,
1294 .navbar-transitioning .title-large-inner,
1295 .navbar-transitioning .title-large-text,
1296 .navbar-transitioning .subnavbar {
1297   transition-duration: var(--f7-navbar-hide-show-transition-duration);
1298 }
1299 .navbar-page-transitioning {
1300   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1301 }
1302 .navbar-page-transitioning .title-large-text,
1303 .navbar-page-transitioning .title-large-inner {
1304   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1305 }
1306 .navbar-hidden {
1307   transform: translate3d(0, -100%, 0);
1308 }
1309 .navbar-large-hidden {
1310   --f7-navbar-large-collapse-progress: 1;
1311 }
1312 .navbar-inner {
1313   position: absolute;
1314   left: 0;
1315   top: 0;
1316   width: 100%;
1317   height: var(--f7-navbar-height);
1318   display: flex;
1319   align-items: center;
1320   box-sizing: border-box;
1321   padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-left));
1322 }
1323 .navbar-inner.stacked {
1324   display: none;
1325 }
1326 .views > .navbar,
1327 .view > .navbar,
1328 .page > .navbar {
1329   position: absolute;
1330 }
1331 .navbar-large:before {
1332   transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1333 }
1334 .navbar-inner-large > .title {
1335   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1336 }
1337 .navbar-large-collapsed,
1338 .navbar-inner-large-collapsed {
1339   --f7-navbar-large-collapse-progress: 1;
1340 }
1341 .navbar .title-large {
1342   box-sizing: border-box;
1343   position: absolute;
1344   left: 0;
1345   right: 0;
1346   top: 100%;
1347   display: flex;
1348   align-items: center;
1349   white-space: nowrap;
1350   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1351   will-change: transform, opacity;
1352   transition-property: transform;
1353   overflow: hidden;
1354   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1355   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1356   height: calc(var(--f7-navbar-large-title-height) + 1px);
1357   z-index: 5;
1358   margin-top: -1px;
1359   transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1360 }
1361 .navbar .title-large:after {
1362   content: '';
1363   position: absolute;
1364   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1365   display: block;
1366   z-index: 15;
1367   top: auto;
1368   right: auto;
1369   bottom: 0;
1370   left: 0;
1371   height: 1px;
1372   width: 100%;
1373   transform-origin: 50% 100%;
1374   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1375 }
1376 .title-large-text,
1377 .title-large-inner .title {
1378   text-overflow: ellipsis;
1379   white-space: nowrap;
1380   color: var(--f7-navbar-large-title-text-color);
1381   letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1382   font-size: var(--f7-navbar-large-title-font-size);
1383   font-weight: var(--f7-navbar-large-title-font-weight);
1384   line-height: var(--f7-navbar-large-title-line-height);
1385   padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1386   padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1387   transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
1388 }
1389 .title-large-text,
1390 .title-large-inner {
1391   box-sizing: border-box;
1392   overflow: hidden;
1393   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1394   transition-property: transform, opacity;
1395   width: 100%;
1396 }
1397 .navbar-no-title-large-transition .title-large,
1398 .navbar-no-title-large-transition .title-large-text,
1399 .navbar-no-title-large-transition .title-large-inner {
1400   transition-duration: 0ms;
1401 }
1402 .navbar ~ * .page:not(.no-navbar) .page-content,
1403 .navbar ~ .page:not(.no-navbar) .page-content,
1404 .navbar ~ .page-content,
1405 .navbar ~ :not(.page) .page-content {
1406   padding-top: var(--f7-navbar-height);
1407 }
1408 .navbar ~ * .page:not(.no-navbar).page-with-navbar-large .page-content,
1409 .navbar ~ .page:not(.no-navbar).page-with-navbar-large .page-content,
1410 .page-with-navbar-large .navbar ~ .page-content,
1411 .page-with-navbar-large .navbar ~ * .page-content {
1412   padding-top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
1413 }
1414 .ios {
1415   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1416   --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1417 }
1418 .ios .navbar a.icon-only {
1419   width: 44px;
1420   margin: 0;
1421   justify-content: center;
1422 }
1423 .ios .navbar .left a + a,
1424 .ios .navbar .right a + a {
1425   margin-left: 15px;
1426 }
1427 .ios .navbar b {
1428   font-weight: 600;
1429 }
1430 .ios .navbar .left {
1431   margin-right: 10px;
1432 }
1433 .ios .navbar .right {
1434   margin-left: 10px;
1435 }
1436 .ios .navbar .right:first-child {
1437   right: calc(8px + var(--f7-safe-area-right));
1438 }
1439 .ios .navbar-inner {
1440   justify-content: space-between;
1441 }
1442 .ios .navbar-inner-left-title {
1443   justify-content: flex-start;
1444 }
1445 .ios .navbar-inner-left-title .right {
1446   margin-left: auto;
1447 }
1448 .ios .navbar-inner-left-title .title {
1449   text-align: left;
1450   margin-right: 10px;
1451 }
1452 .ios .view-master-detail .navbar-previous:not(.navbar-master),
1453 .ios .view:not(.view-master-detail) .navbar-previous {
1454   pointer-events: none;
1455 }
1456 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1457 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1458   transform: translateY(-100%);
1459   opacity: 0;
1460   transition: 0ms;
1461 }
1462 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1463 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1464   transform: scale(0.5);
1465   transition: 0ms;
1466 }
1467 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1468 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1469   transform: translateX(-100%);
1470   opacity: 0;
1471   transition: 0ms;
1472 }
1473 .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1474 .ios .view:not(.view-master-detail) .navbar-previous .left,
1475 .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1476 .ios .view:not(.view-master-detail) .navbar-previous .right,
1477 .ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1478 .ios .view:not(.view-master-detail) .navbar-previous > .title,
1479 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1480 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1481 .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1482 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1483   opacity: 0;
1484 }
1485 .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1486 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1487   opacity: 0;
1488 }
1489 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1490 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1491 .ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1492 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1493   opacity: 1;
1494   transform: translate3d(-100%, 0, 0);
1495 }
1496 .ios .navbar-next {
1497   pointer-events: none;
1498 }
1499 .ios .navbar-next .title-large {
1500   transform: translateX(100%);
1501   transition: 0ms;
1502 }
1503 .ios .navbar-next .title-large .title-large-text,
1504 .ios .navbar-next .title-large .title-large-inner {
1505   transition: 0ms;
1506 }
1507 .ios .navbar-next .left,
1508 .ios .navbar-next .right,
1509 .ios .navbar-next > .title,
1510 .ios .navbar-next .subnavbar,
1511 .ios .navbar-next .fading {
1512   opacity: 0;
1513 }
1514 .ios .navbar-next .sliding {
1515   opacity: 0;
1516 }
1517 .ios .navbar-next.sliding .left,
1518 .ios .navbar-next.sliding .right,
1519 .ios .navbar-next.sliding > .title,
1520 .ios .navbar-next.sliding .subnavbar {
1521   opacity: 0;
1522 }
1523 .ios .navbar-next .subnavbar.sliding,
1524 .ios .navbar-next.sliding .subnavbar {
1525   opacity: 1;
1526   transform: translate3d(100%, 0, 0);
1527 }
1528 .ios .router-dynamic-navbar-inside .navbar-next .title-large,
1529 .ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1530 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1531   transform: none;
1532 }
1533 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1534   opacity: 1;
1535   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1536 }
1537 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1538 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1539   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1540 }
1541 .ios .router-transition .navbar {
1542   transition-duration: var(--f7-page-transition-duration);
1543 }
1544 .ios .router-transition .title-large {
1545   transition: 0ms;
1546 }
1547 .ios .router-transition .navbar-current .left,
1548 .ios .router-transition .navbar-current > .title,
1549 .ios .router-transition .navbar-current .right,
1550 .ios .router-transition .navbar-current .subnavbar {
1551   animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1552 }
1553 .ios .router-transition .navbar-current .sliding,
1554 .ios .router-transition .navbar-current .left.sliding .icon + span,
1555 .ios .router-transition .navbar-current.sliding .left,
1556 .ios .router-transition .navbar-current.sliding .left .icon + span,
1557 .ios .router-transition .navbar-current.sliding > .title,
1558 .ios .router-transition .navbar-current.sliding .right {
1559   transition-duration: var(--f7-page-transition-duration);
1560   opacity: 0 !important;
1561   animation: none;
1562 }
1563 .ios .router-transition .navbar-current.sliding .subnavbar,
1564 .ios .router-transition .navbar-current .sliding.subnavbar {
1565   transition-duration: var(--f7-page-transition-duration);
1566   animation: none;
1567   opacity: 1;
1568 }
1569 .ios .router-transition-forward .navbar-next .left,
1570 .ios .router-transition-backward .navbar-previous .left,
1571 .ios .router-transition-forward .navbar-next > .title,
1572 .ios .router-transition-backward .navbar-previous > .title,
1573 .ios .router-transition-forward .navbar-next .right,
1574 .ios .router-transition-backward .navbar-previous .right,
1575 .ios .router-transition-forward .navbar-next .subnavbar,
1576 .ios .router-transition-backward .navbar-previous .subnavbar {
1577   animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1578 }
1579 .ios .router-transition-forward .navbar-next .sliding,
1580 .ios .router-transition-backward .navbar-previous .sliding,
1581 .ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1582 .ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1583 .ios .router-transition-forward .navbar-next.sliding .left,
1584 .ios .router-transition-backward .navbar-previous.sliding .left,
1585 .ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1586 .ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1587 .ios .router-transition-forward .navbar-next.sliding > .title,
1588 .ios .router-transition-backward .navbar-previous.sliding > .title,
1589 .ios .router-transition-forward .navbar-next.sliding .right,
1590 .ios .router-transition-backward .navbar-previous.sliding .right,
1591 .ios .router-transition-forward .navbar-next.sliding .subnavbar,
1592 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1593   transition-duration: var(--f7-page-transition-duration);
1594   animation: none;
1595   transform: translate3d(0, 0, 0) !important;
1596   opacity: 1 !important;
1597 }
1598 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1599   overflow: visible;
1600 }
1601 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1602   animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
1603 }
1604 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1605   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1606 }
1607 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1608   animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
1609 }
1610 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1611   animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1612 }
1613 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1614   animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1615   transition: none;
1616   transform-origin: left center;
1617 }
1618 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1619   overflow: visible;
1620 }
1621 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1622 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1623   animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1624 }
1625 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1626   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1627 }
1628 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1629 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1630   animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1631 }
1632 .ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1633 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1634   animation: none;
1635   opacity: 0 !important;
1636   transition-duration: 0;
1637 }
1638 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1639 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1640 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1641 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1642 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1643 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1644   animation: none !important;
1645 }
1646 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1647   animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1648   transition: none;
1649   transform-origin: left center;
1650 }
1651 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1652   overflow: visible;
1653   transform: translateX(100%);
1654 }
1655 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1656 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1657   animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1658 }
1659 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1660   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1661 }
1662 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1663 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1664   animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1665 }
1666 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1667   opacity: 0;
1668 }
1669 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1670   overflow: visible;
1671   opacity: 1;
1672   transform: translateY(0);
1673 }
1674 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1675   animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1676 }
1677 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1678   opacity: 1;
1679   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1680 }
1681 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1682   animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1683 }
1684 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1685   animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1686 }
1687 .ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1688 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1689   animation: none;
1690   opacity: 0 !important;
1691   transition-duration: 0;
1692 }
1693 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1694 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1695 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1696 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1697 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1698 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1699   animation: none !important;
1700 }
1701 .view-master-detail .navbar-master.navbar-previous {
1702   pointer-events: auto;
1703 }
1704 .view-master-detail .navbar-master.navbar-previous .left,
1705 .view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1706 .view-master-detail .navbar-master.navbar-previous .right,
1707 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1708   opacity: 1;
1709 }
1710 .ios .view-master-detail.router-transition .navbar-master .left,
1711 .ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1712 .ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1713 .ios .view-master-detail.router-transition .navbar-master .right,
1714 .ios .view-master-detail.router-transition .navbar-master .subnavbar,
1715 .ios .view-master-detail.router-transition .navbar-master .sliding,
1716 .ios .view-master-detail.router-transition .navbar-master .fading {
1717   opacity: 1 !important;
1718   transition-duration: 0ms;
1719   transform: none !important;
1720   animation: none !important;
1721 }
1722 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1723   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1724   transition-duration: 0ms;
1725   transform: none !important;
1726   animation: none !important;
1727 }
1728 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1729 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1730 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1731   transition-duration: 0ms;
1732   animation: none !important;
1733 }
1734 @keyframes ios-navbar-element-fade-in {
1735   from {
1736     opacity: 0;
1737   }
1738   to {
1739     opacity: 1;
1740   }
1741 }
1742 @keyframes ios-navbar-element-fade-out {
1743   from {
1744     opacity: 1;
1745   }
1746   to {
1747     opacity: 0;
1748   }
1749 }
1750 @keyframes ios-navbar-title-large-slide-up {
1751   0% {
1752     transform: translateY(0%);
1753   }
1754   100% {
1755     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1756   }
1757 }
1758 @keyframes ios-navbar-title-large-slide-down {
1759   0% {
1760     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1761   }
1762   100% {
1763     transform: translateY(0%);
1764   }
1765 }
1766 @keyframes ios-navbar-title-large-text-slide-up {
1767   0% {
1768     transform: translateX(0px) translateY(0%) scale(1);
1769   }
1770   100% {
1771     transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1772   }
1773 }
1774 @keyframes ios-navbar-title-large-text-slide-down {
1775   0% {
1776     transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1777   }
1778   100% {
1779     transform: translateX(0px) translateY(0%) scale(1);
1780   }
1781 }
1782 @keyframes ios-navbar-title-large-text-slide-left {
1783   0% {
1784     transform: translateX(0%) scale(1);
1785   }
1786   100% {
1787     transform: translateX(-100%) scale(1);
1788   }
1789 }
1790 @keyframes ios-navbar-title-large-text-slide-right {
1791   0% {
1792     transform: translateX(-100%) scale(1);
1793   }
1794   100% {
1795     transform: translateX(0%) scale(1);
1796   }
1797 }
1798 @keyframes ios-navbar-title-large-text-slide-left-top {
1799   0% {
1800     transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1801   }
1802   100% {
1803     transform: translateX(0%) translateY(0%) scale(1);
1804   }
1805 }
1806 @keyframes ios-navbar-title-large-text-slide-right-bottom {
1807   0% {
1808     transform: translateX(0%) translateY(0%) scale(1);
1809   }
1810   100% {
1811     transform: translateX(100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1812   }
1813 }
1814 @keyframes ios-navbar-title-large-text-fade-out {
1815   0% {
1816     opacity: 1;
1817   }
1818   80% {
1819     opacity: 0;
1820   }
1821   100% {
1822     opacity: 0;
1823   }
1824 }
1825 @keyframes ios-navbar-title-large-text-fade-in {
1826   0% {
1827     opacity: 0;
1828   }
1829   20% {
1830     opacity: 0;
1831   }
1832   100% {
1833     opacity: 1;
1834   }
1835 }
1836 @keyframes ios-navbar-title-large-text-scale-out {
1837   0% {
1838     transform: translateY(0%) scale(1);
1839   }
1840   100% {
1841     transform: translateY(0%) scale(0.5);
1842   }
1843 }
1844 @keyframes ios-navbar-title-large-text-scale-in {
1845   0% {
1846     transform: translateY(0%) scale(0.5);
1847   }
1848   100% {
1849     transform: translateY(0%) scale(1);
1850   }
1851 }
1852 @keyframes ios-navbar-back-text-current-to-previous {
1853   0% {
1854     opacity: 1;
1855     transform: translateY(0px) translateX(0px) scale(1);
1856   }
1857   80% {
1858     opacity: 0;
1859   }
1860   100% {
1861     opacity: 0;
1862     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1863   }
1864 }
1865 @keyframes ios-navbar-back-text-next-to-current {
1866   0% {
1867     opacity: 0;
1868     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1869   }
1870   20% {
1871     opacity: 0;
1872   }
1873   100% {
1874     opacity: 1;
1875     transform: translateX(0px) translateY(0px) scale(1);
1876   }
1877 }
1878 @keyframes ios-navbar-title-large-inner-current-to-previous {
1879   0% {
1880     transform: translateX(0%);
1881     opacity: 1;
1882   }
1883   100% {
1884     transform: translateX(-100%);
1885     opacity: 0;
1886   }
1887 }
1888 @keyframes ios-navbar-title-large-inner-previous-to-current {
1889   0% {
1890     transform: translateX(-100%);
1891     opacity: 0;
1892   }
1893   100% {
1894     transform: translateX(0%);
1895     opacity: 1;
1896   }
1897 }
1898 .md .navbar a.link {
1899   padding: 0 16px;
1900   min-width: 48px;
1901 }
1902 .md .navbar a.link:before {
1903   content: '';
1904   width: 152%;
1905   height: 152%;
1906   position: absolute;
1907   left: -26%;
1908   top: -26%;
1909   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
1910   background-repeat: no-repeat;
1911   background-position: center;
1912   background-size: 100% 100%;
1913   opacity: 0;
1914   pointer-events: none;
1915   transition-duration: 600ms;
1916 }
1917 .md .navbar a.link.active-state:before {
1918   opacity: 1;
1919   transition-duration: 150ms;
1920 }
1921 .md .navbar a.icon-only {
1922   min-width: 0;
1923   flex-shrink: 0;
1924   width: 56px;
1925 }
1926 .md .navbar .right {
1927   margin-left: auto;
1928 }
1929 .md .navbar .right:first-child {
1930   right: var(--f7-safe-area-right);
1931 }
1932 .md .navbar-inner {
1933   justify-content: flex-start;
1934   overflow: hidden;
1935 }
1936 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
1937   overflow: visible;
1938 }
1939 .md .page.page-with-subnavbar .navbar-inner {
1940   overflow: visible;
1941 }
1942 .md .navbar-inner-centered-title {
1943   justify-content: space-between;
1944 }
1945 .md .navbar-inner-centered-title .right {
1946   margin-left: 0;
1947 }
1948 .md .navbar-inner-centered-title .title {
1949   text-align: center;
1950 }
1951 /* === Toolbar === */
1952 :root {
1953   /*
1954   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
1955   --f7-toolbar-bg-image: var(--f7-bars-bg-image);
1956   --f7-toolbar-border-color: var(--f7-bars-border-color);
1957   --f7-toolbar-link-color: var(--f7-bars-link-color);
1958   --f7-toolbar-text-color: var(--f7-bars-text-color);
1959   */
1960   --f7-toolbar-hide-show-transition-duration: 400ms;
1961 }
1962 .ios {
1963   --f7-toolbar-height: 44px;
1964   --f7-toolbar-font-size: 17px;
1965   --f7-tabbar-labels-height: 50px;
1966   --f7-tabbar-labels-tablet-height: 56px;
1967   --f7-tabbar-link-inactive-color: #929292;
1968   /*
1969   --f7-tabbar-link-active-color: var(--f7-theme-color);
1970   */
1971   --f7-toolbar-top-shadow-image: none;
1972   --f7-toolbar-bottom-shadow-image: none;
1973   --f7-tabbar-icon-size: 28px;
1974   --f7-tabbar-link-text-transform: none;
1975   --f7-tabbar-link-font-weight: 400;
1976   --f7-tabbar-link-letter-spacing: 0;
1977   --f7-tabbar-label-font-size: 10px;
1978   --f7-tabbar-label-tablet-font-size: 14px;
1979   --f7-tabbar-label-text-transform: none;
1980   --f7-tabbar-label-font-weight: 400;
1981   --f7-tabbar-label-letter-spacing: 0.01;
1982 }
1983 .md {
1984   --f7-toolbar-height: 48px;
1985   --f7-toolbar-font-size: 14px;
1986   --f7-tabbar-labels-height: 56px;
1987   --f7-tabbar-labels-tablet-height: 56px;
1988   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
1989   /*
1990   --f7-tabbar-link-active-color: var(--f7-theme-color);
1991   --f7-tabbar-link-active-border-color: var(--f7-theme-color);
1992   */
1993   --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
1994   --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
1995   --f7-tabbar-icon-size: 24px;
1996   --f7-tabbar-link-text-transform: uppercase;
1997   --f7-tabbar-link-font-weight: 500;
1998   --f7-tabbar-link-letter-spacing: 0.03em;
1999   --f7-tabbar-label-font-size: 14px;
2000   --f7-tabbar-label-tablet-font-size: 14px;
2001   --f7-tabbar-label-text-transform: none;
2002   --f7-tabbar-label-font-weight: 400;
2003   --f7-tabbar-label-letter-spacing: 0;
2004 }
2005 .md .theme-dark,
2006 .md.theme-dark {
2007   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2008 }
2009 .toolbar {
2010   width: 100%;
2011   position: relative;
2012   margin: 0;
2013   transform: translate3d(0, 0, 0);
2014   -webkit-backface-visibility: hidden;
2015           backface-visibility: hidden;
2016   z-index: 500;
2017   box-sizing: border-box;
2018   left: 0;
2019   height: var(--f7-toolbar-height);
2020   background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2021   background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2022   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2023   font-size: var(--f7-toolbar-font-size);
2024 }
2025 .toolbar b {
2026   font-weight: 600;
2027 }
2028 .toolbar a {
2029   color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2030   box-sizing: border-box;
2031   flex-shrink: 1;
2032   position: relative;
2033   white-space: nowrap;
2034   text-overflow: ellipsis;
2035 }
2036 .toolbar a.link {
2037   display: flex;
2038   line-height: var(--f7-toolbar-height);
2039   height: var(--f7-toolbar-height);
2040 }
2041 .toolbar i.icon {
2042   display: block;
2043 }
2044 .toolbar:after,
2045 .toolbar:before {
2046   -webkit-backface-visibility: hidden;
2047           backface-visibility: hidden;
2048 }
2049 .views > .toolbar,
2050 .view > .toolbar,
2051 .page > .toolbar {
2052   position: absolute;
2053 }
2054 .toolbar-top,
2055 .ios .toolbar-top-ios,
2056 .md .toolbar-top-md {
2057   top: 0;
2058 }
2059 .toolbar-top .tab-link-highlight,
2060 .ios .toolbar-top-ios .tab-link-highlight,
2061 .md .toolbar-top-md .tab-link-highlight {
2062   bottom: 0;
2063 }
2064 .toolbar-top.no-hairline:after,
2065 .ios .toolbar-top-ios.no-hairline:after,
2066 .md .toolbar-top-md.no-hairline:after,
2067 .toolbar-top.no-border:after,
2068 .ios .toolbar-top-ios.no-border:after,
2069 .md .toolbar-top-md.no-border:after {
2070   display: none !important;
2071 }
2072 .toolbar-top.no-shadow:before,
2073 .ios .toolbar-top-ios.no-shadow:before,
2074 .md .toolbar-top-md.no-shadow:before,
2075 .toolbar-top.toolbar-hidden:before,
2076 .ios .toolbar-top-ios.toolbar-hidden:before,
2077 .md .toolbar-top-md.toolbar-hidden:before {
2078   display: none !important;
2079 }
2080 .toolbar-top:after,
2081 .ios .toolbar-top-ios:after,
2082 .md .toolbar-top-md:after,
2083 .toolbar-top:before,
2084 .ios .toolbar-top-ios:before,
2085 .md .toolbar-top-md:before {
2086   -webkit-backface-visibility: hidden;
2087           backface-visibility: hidden;
2088 }
2089 .toolbar-top:after,
2090 .ios .toolbar-top-ios:after,
2091 .md .toolbar-top-md:after {
2092   content: '';
2093   position: absolute;
2094   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2095   display: block;
2096   z-index: 15;
2097   top: auto;
2098   right: auto;
2099   bottom: 0;
2100   left: 0;
2101   height: 1px;
2102   width: 100%;
2103   transform-origin: 50% 100%;
2104   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2105 }
2106 .toolbar-top:before,
2107 .ios .toolbar-top-ios:before,
2108 .md .toolbar-top-md:before {
2109   content: '';
2110   position: absolute;
2111   right: 0;
2112   width: 100%;
2113   top: 100%;
2114   bottom: auto;
2115   height: 8px;
2116   pointer-events: none;
2117   background: var(--f7-toolbar-top-shadow-image, var(--f7-bars-shadow-bottom-image));
2118 }
2119 .toolbar-bottom,
2120 .ios .toolbar-bottom-ios,
2121 .md .toolbar-bottom-md {
2122   bottom: 0;
2123   height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2124 }
2125 .toolbar-bottom .tab-link-highlight,
2126 .ios .toolbar-bottom-ios .tab-link-highlight,
2127 .md .toolbar-bottom-md .tab-link-highlight {
2128   top: 0;
2129 }
2130 .toolbar-bottom .toolbar-inner,
2131 .ios .toolbar-bottom-ios .toolbar-inner,
2132 .md .toolbar-bottom-md .toolbar-inner {
2133   height: auto;
2134   top: 0;
2135   bottom: var(--f7-safe-area-bottom);
2136 }
2137 .toolbar-bottom.no-hairline:before,
2138 .ios .toolbar-bottom-ios.no-hairline:before,
2139 .md .toolbar-bottom-md.no-hairline:before,
2140 .toolbar-bottom.no-border:before,
2141 .ios .toolbar-bottom-ios.no-border:before,
2142 .md .toolbar-bottom-md.no-border:before {
2143   display: none !important;
2144 }
2145 .toolbar-bottom.no-shadow:after,
2146 .ios .toolbar-bottom-ios.no-shadow:after,
2147 .md .toolbar-bottom-md.no-shadow:after,
2148 .toolbar-bottom.toolbar-hidden:after,
2149 .ios .toolbar-bottom-ios.toolbar-hidden:after,
2150 .md .toolbar-bottom-md.toolbar-hidden:after {
2151   display: none !important;
2152 }
2153 .toolbar-bottom:before,
2154 .ios .toolbar-bottom-ios:before,
2155 .md .toolbar-bottom-md:before {
2156   content: '';
2157   position: absolute;
2158   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2159   display: block;
2160   z-index: 15;
2161   top: 0;
2162   right: auto;
2163   bottom: auto;
2164   left: 0;
2165   height: 1px;
2166   width: 100%;
2167   transform-origin: 50% 0%;
2168   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2169 }
2170 .toolbar-bottom:after,
2171 .ios .toolbar-bottom-ios:after,
2172 .md .toolbar-bottom-md:after {
2173   content: '';
2174   position: absolute;
2175   right: 0;
2176   width: 100%;
2177   bottom: 100%;
2178   height: 8px;
2179   top: auto;
2180   pointer-events: none;
2181   background: var(--f7-toolbar-bottom-shadow-image, var(--f7-bars-shadow-top-image));
2182 }
2183 .toolbar-inner {
2184   position: absolute;
2185   left: 0;
2186   top: 0;
2187   width: 100%;
2188   height: 100%;
2189   display: flex;
2190   justify-content: space-between;
2191   box-sizing: border-box;
2192   align-items: center;
2193   align-content: center;
2194   overflow: hidden;
2195 }
2196 .views > .tabbar,
2197 .views > .tabbar-labels {
2198   z-index: 5001;
2199 }
2200 .tabbar a,
2201 .tabbar-labels a {
2202   color: var(--f7-tabbar-link-inactive-color);
2203 }
2204 .tabbar a.link,
2205 .tabbar-labels a.link {
2206   line-height: 1.4;
2207 }
2208 .tabbar a.tab-link,
2209 .tabbar-labels a.tab-link,
2210 .tabbar a.link,
2211 .tabbar-labels a.link {
2212   height: 100%;
2213   width: 100%;
2214   box-sizing: border-box;
2215   display: flex;
2216   justify-content: center;
2217   align-items: center;
2218   flex-direction: column;
2219   text-transform: var(--f7-tabbar-link-text-transform);
2220   font-weight: var(--f7-tabbar-link-font-weight);
2221   letter-spacing: var(--f7-tabbar-link-letter-spacing);
2222   overflow: hidden;
2223 }
2224 .tabbar .tab-link-active,
2225 .tabbar-labels .tab-link-active {
2226   color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
2227 }
2228 .tabbar i.icon,
2229 .tabbar-labels i.icon {
2230   font-size: var(--f7-tabbar-icon-size);
2231   height: var(--f7-tabbar-icon-size);
2232   line-height: var(--f7-tabbar-icon-size);
2233 }
2234 .tabbar-labels {
2235   --f7-toolbar-height: var(--f7-tabbar-labels-height);
2236 }
2237 .tabbar-labels a.tab-link,
2238 .tabbar-labels a.link {
2239   height: 100%;
2240   justify-content: space-between;
2241   align-items: center;
2242 }
2243 .tabbar-labels .tabbar-label {
2244   display: block;
2245   line-height: 1;
2246   margin: 0;
2247   position: relative;
2248   text-overflow: ellipsis;
2249   white-space: nowrap;
2250   font-size: var(--f7-tabbar-label-font-size);
2251   text-transform: var(--f7-tabbar-label-text-transform);
2252   font-weight: var(--f7-tabbar-label-font-weight);
2253   letter-spacing: var(--f7-tabbar-label-letter-spacing);
2254 }
2255 @media (min-width: 768px) {
2256   :root {
2257     --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2258     --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2259   }
2260 }
2261 .tabbar-scrollable .toolbar-inner {
2262   will-change: scroll-position;
2263   overflow: auto;
2264   -webkit-overflow-scrolling: touch;
2265 }
2266 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2267   display: none !important;
2268   width: 0 !important;
2269   height: 0 !important;
2270   -webkit-appearance: none;
2271   opacity: 0 !important;
2272 }
2273 .tabbar-scrollable a.tab-link,
2274 .tabbar-scrollable a.link {
2275   width: auto;
2276   flex-shrink: 0;
2277 }
2278 .toolbar-transitioning,
2279 .navbar-transitioning + .toolbar,
2280 .navbar-transitioning ~ * .toolbar {
2281   transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2282 }
2283 .toolbar-bottom.toolbar-hidden,
2284 .ios .toolbar-bottom-ios.toolbar-hidden,
2285 .md .toolbar-bottom-md.toolbar-hidden {
2286   transform: translate3d(0, 100%, 0);
2287 }
2288 .toolbar-bottom ~ .page-content,
2289 .ios .toolbar-bottom-ios ~ .page-content,
2290 .md .toolbar-bottom-md ~ .page-content,
2291 .toolbar-bottom ~ * .page-content,
2292 .ios .toolbar-bottom-ios ~ * .page-content,
2293 .md .toolbar-bottom-md ~ * .page-content {
2294   padding-bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2295 }
2296 .toolbar-bottom.tabbar-labels ~ .page-content,
2297 .ios .toolbar-bottom-ios.tabbar-labels ~ .page-content,
2298 .md .toolbar-bottom-md.tabbar-labels ~ .page-content,
2299 .toolbar-bottom.tabbar-labels ~ * .page-content,
2300 .ios .toolbar-bottom-ios.tabbar-labels ~ * .page-content,
2301 .md .toolbar-bottom-md.tabbar-labels ~ * .page-content {
2302   padding-bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
2303 }
2304 .toolbar-top.toolbar-hidden,
2305 .ios .toolbar-top-ios.toolbar-hidden,
2306 .md .toolbar-top-md.toolbar-hidden {
2307   transform: translate3d(0, -100%, 0);
2308 }
2309 .toolbar-top ~ .page-content,
2310 .ios .toolbar-top-ios ~ .page-content,
2311 .md .toolbar-top-md ~ .page-content,
2312 .toolbar-top ~ * .page-content,
2313 .ios .toolbar-top-ios ~ * .page-content,
2314 .md .toolbar-top-md ~ * .page-content {
2315   padding-top: var(--f7-toolbar-height);
2316 }
2317 .toolbar-top.tabbar-labels ~ .page-content,
2318 .ios .toolbar-top-ios.tabbar-labels ~ .page-content,
2319 .md .toolbar-top-md.tabbar-labels ~ .page-content,
2320 .toolbar-top.tabbar-labels ~ * .page-content,
2321 .ios .toolbar-top-ios.tabbar-labels ~ * .page-content,
2322 .md .toolbar-top-md.tabbar-labels ~ * .page-content {
2323   padding-top: var(--f7-tabbar-labels-height);
2324 }
2325 .navbar ~ .toolbar-top,
2326 .ios .navbar ~ .toolbar-top-ios,
2327 .md .navbar ~ .toolbar-top-md,
2328 .navbar ~ * .toolbar-top,
2329 .ios .navbar ~ * .toolbar-top-ios,
2330 .md .navbar ~ * .toolbar-top-md,
2331 .navbar ~ .page:not(.no-navbar) .toolbar-top,
2332 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
2333 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
2334   top: var(--f7-navbar-height);
2335 }
2336 .navbar ~ .toolbar-top ~ .page-content,
2337 .ios .navbar ~ .toolbar-top-ios ~ .page-content,
2338 .md .navbar ~ .toolbar-top-md ~ .page-content,
2339 .navbar ~ * .toolbar-top ~ .page-content,
2340 .ios .navbar ~ * .toolbar-top-ios ~ .page-content,
2341 .md .navbar ~ * .toolbar-top-md ~ .page-content,
2342 .navbar ~ .page:not(.no-navbar) .toolbar-top ~ .page-content,
2343 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ .page-content,
2344 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ .page-content,
2345 .navbar ~ .toolbar-top ~ * .page-content,
2346 .ios .navbar ~ .toolbar-top-ios ~ * .page-content,
2347 .md .navbar ~ .toolbar-top-md ~ * .page-content,
2348 .navbar ~ * .toolbar-top ~ * .page-content,
2349 .ios .navbar ~ * .toolbar-top-ios ~ * .page-content,
2350 .md .navbar ~ * .toolbar-top-md ~ * .page-content,
2351 .navbar ~ .page:not(.no-navbar) .toolbar-top ~ * .page-content,
2352 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ * .page-content,
2353 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ * .page-content {
2354   padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
2355 }
2356 .navbar ~ .toolbar-top.tabbar-labels ~ .page-content,
2357 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .page-content,
2358 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .page-content,
2359 .navbar ~ * .toolbar-top.tabbar-labels ~ .page-content,
2360 .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ .page-content,
2361 .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ .page-content,
2362 .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ .page-content,
2363 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ .page-content,
2364 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ .page-content,
2365 .navbar ~ .toolbar-top.tabbar-labels ~ * .page-content,
2366 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ * .page-content,
2367 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ * .page-content,
2368 .navbar ~ * .toolbar-top.tabbar-labels ~ * .page-content,
2369 .ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ * .page-content,
2370 .md .navbar ~ * .toolbar-top-md.tabbar-labels ~ * .page-content,
2371 .navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ * .page-content,
2372 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ * .page-content,
2373 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ * .page-content {
2374   padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
2375 }
2376 .navbar ~ .toolbar-top.toolbar-hidden,
2377 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2378 .md .navbar ~ .toolbar-top-md.toolbar-hidden,
2379 .navbar ~ * .toolbar-top.toolbar-hidden,
2380 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2381 .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
2382 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2383 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
2384 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
2385   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2386 }
2387 .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2388 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2389 .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
2390 .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2391 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2392 .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
2393 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2394 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2395 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels {
2396   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2397 }
2398 .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2399 .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2400 .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
2401 .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2402 .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2403 .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2404   transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2405 }
2406 .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2407 .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2408 .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2409 .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2410 .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2411 .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2412   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2413 }
2414 .ios .toolbar a.icon-only {
2415   min-height: var(--f7-toolbar-height);
2416   display: flex;
2417   justify-content: center;
2418   align-items: center;
2419   margin: 0;
2420   min-width: 44px;
2421 }
2422 .ios .toolbar-inner {
2423   padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left));
2424 }
2425 .ios .tabbar-labels a.tab-link,
2426 .ios .tabbar-labels a.link {
2427   padding-top: 4px;
2428   padding-bottom: 4px;
2429 }
2430 .ios .tabbar-labels a.tab-link i + span,
2431 .ios .tabbar-labels a.link i + span {
2432   margin: 0;
2433 }
2434 @media (min-width: 768px) {
2435   .ios .tabbar .toolbar-inner,
2436   .ios .tabbar-labels .toolbar-inner {
2437     justify-content: center;
2438   }
2439   .ios .tabbar a.tab-link,
2440   .ios .tabbar-labels a.tab-link,
2441   .ios .tabbar a.link,
2442   .ios .tabbar-labels a.link {
2443     width: auto;
2444     min-width: 105px;
2445   }
2446 }
2447 .ios .tabbar-scrollable .toolbar-inner {
2448   justify-content: flex-start;
2449 }
2450 .ios .tabbar-scrollable a.tab-link,
2451 .ios .tabbar-scrollable a.link {
2452   padding: 0 8px;
2453 }
2454 .md .toolbar a.link {
2455   justify-content: center;
2456   padding: 0 16px;
2457   min-width: 48px;
2458 }
2459 .md .toolbar a.link:before {
2460   content: '';
2461   width: 152%;
2462   height: 152%;
2463   position: absolute;
2464   left: -26%;
2465   top: -26%;
2466   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2467   background-repeat: no-repeat;
2468   background-position: center;
2469   background-size: 100% 100%;
2470   opacity: 0;
2471   pointer-events: none;
2472   transition-duration: 600ms;
2473 }
2474 .md .toolbar a.link.active-state:before {
2475   opacity: 1;
2476   transition-duration: 150ms;
2477 }
2478 .md .toolbar a.icon-only {
2479   min-width: 0;
2480   flex-shrink: 0;
2481 }
2482 .md .toolbar-inner {
2483   padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left);
2484 }
2485 .md .tabbar a.tab-link,
2486 .md .tabbar-labels a.tab-link,
2487 .md .tabbar a.link,
2488 .md .tabbar-labels a.link {
2489   padding-left: 0;
2490   padding-right: 0;
2491 }
2492 .md .tabbar a.tab-link,
2493 .md .tabbar-labels a.tab-link {
2494   transition-duration: 300ms;
2495   overflow: hidden;
2496   position: relative;
2497 }
2498 .md .tabbar .tab-link-highlight,
2499 .md .tabbar-labels .tab-link-highlight {
2500   position: absolute;
2501   height: 2px;
2502   background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2503   transition-duration: 300ms;
2504   left: 0;
2505 }
2506 .md .tabbar-labels a.tab-link,
2507 .md .tabbar-labels a.link {
2508   padding-top: 7px;
2509   padding-bottom: 7px;
2510 }
2511 .md .tabbar-label {
2512   max-width: 100%;
2513   overflow: hidden;
2514   line-height: 1.2;
2515 }
2516 .md .tabbar-scrollable .toolbar-inner {
2517   overflow: auto;
2518   justify-content: flex-start;
2519 }
2520 .md .tabbar-scrollable a.tab-link,
2521 .md .tabbar-scrollable a.link {
2522   padding: 0 16px;
2523 }
2524 /* === Subnavbar === */
2525 :root {
2526   /*
2527   --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2528   --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2529   --f7-subnavbar-border-color: var(--f7-bars-border-color);
2530   --f7-subnavbar-link-color: var(--f7-bars-link-color);
2531   --f7-subnavbar-text-color: var(--f7-bars-text-color);
2532   */
2533 }
2534 .ios {
2535   --f7-subnavbar-height: 44px;
2536   --f7-subnavbar-inner-padding-left: 8px;
2537   --f7-subnavbar-inner-padding-right: 8px;
2538   --f7-subnavbar-title-font-size: 34px;
2539   --f7-subnavbar-title-font-weight: 700;
2540   --f7-subnavbar-title-line-height: 1.2;
2541   --f7-subnavbar-title-letter-spacing: -0.03em;
2542   --f7-subnavbar-title-margin-left: 7px;
2543   --f7-navbar-shadow-image: none;
2544 }
2545 .md {
2546   --f7-subnavbar-height: 48px;
2547   --f7-subnavbar-inner-padding-left: 16px;
2548   --f7-subnavbar-inner-padding-right: 16px;
2549   --f7-subnavbar-title-font-size: 20px;
2550   --f7-subnavbar-title-font-weight: 500;
2551   --f7-subnavbar-title-line-height: 1.2;
2552   --f7-subnavbar-title-letter-spacing: 0;
2553   --f7-subnavbar-title-margin-left: 0px;
2554   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2555 }
2556 .subnavbar {
2557   width: 100%;
2558   position: absolute;
2559   left: 0;
2560   top: 0;
2561   z-index: 500;
2562   box-sizing: border-box;
2563   display: flex;
2564   justify-content: space-between;
2565   align-items: center;
2566   background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2567   background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2568   color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2569 }
2570 .subnavbar .title {
2571   position: relative;
2572   overflow: hidden;
2573   text-overflow: ellpsis;
2574   white-space: nowrap;
2575   font-size: var(--f7-subnavbar-title-font-size);
2576   font-weight: var(--f7-subnavbar-title-font-weight);
2577   text-align: left;
2578   display: inline-block;
2579   line-height: var(--f7-subnavbar-title-line-height);
2580   letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2581   margin-left: var(--f7-subnavbar-title-margin-left);
2582 }
2583 .subnavbar .left,
2584 .subnavbar .right {
2585   flex-shrink: 0;
2586   display: flex;
2587   justify-content: flex-start;
2588   align-items: center;
2589 }
2590 .subnavbar .right:first-child {
2591   position: absolute;
2592   height: 100%;
2593 }
2594 .subnavbar a {
2595   color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2596 }
2597 .subnavbar a.link {
2598   line-height: var(--f7-subnavbar-height);
2599   height: var(--f7-subnavbar-height);
2600 }
2601 .subnavbar a.icon-only {
2602   min-width: var(--f7-subnavbar-height);
2603 }
2604 .subnavbar.no-hairline:after,
2605 .subnavbar.no-border:after {
2606   display: none !important;
2607 }
2608 .subnavbar.no-shadow:before,
2609 .subnavbar.navbar-hidden:before {
2610   display: none !important;
2611 }
2612 .subnavbar:after,
2613 .subnavbar:before {
2614   -webkit-backface-visibility: hidden;
2615           backface-visibility: hidden;
2616 }
2617 .subnavbar:after {
2618   content: '';
2619   position: absolute;
2620   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
2621   display: block;
2622   z-index: 15;
2623   top: auto;
2624   right: auto;
2625   bottom: 0;
2626   left: 0;
2627   height: 1px;
2628   width: 100%;
2629   transform-origin: 50% 100%;
2630   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2631 }
2632 .subnavbar:before {
2633   content: '';
2634   position: absolute;
2635   right: 0;
2636   width: 100%;
2637   top: 100%;
2638   bottom: auto;
2639   height: 8px;
2640   pointer-events: none;
2641   background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
2642 }
2643 .subnavbar-inner {
2644   width: 100%;
2645   height: 100%;
2646   display: flex;
2647   align-items: center;
2648   box-sizing: border-box;
2649   justify-content: space-between;
2650   overflow: hidden;
2651   padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
2652 }
2653 .subnavbar-inner.stacked {
2654   display: none;
2655 }
2656 .navbar .subnavbar {
2657   top: 100%;
2658 }
2659 .views > .subnavbar,
2660 .view > .subnavbar,
2661 .page > .subnavbar {
2662   position: absolute;
2663 }
2664 .navbar ~ * .subnavbar,
2665 .page-with-subnavbar .navbar ~ .subnavbar,
2666 .page-with-subnavbar .navbar ~ * .subnavbar,
2667 .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2668 .navbar ~ .subnavbar {
2669   top: var(--f7-navbar-height);
2670 }
2671 .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2672 .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2673 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2674   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2675   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2676 }
2677 .navbar .title-large ~ .subnavbar {
2678   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2679   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2680 }
2681 .page-with-subnavbar .page-content,
2682 .subnavbar ~ .page-content,
2683 .subnavbar ~ * .page-content {
2684   padding-top: var(--f7-subnavbar-height);
2685 }
2686 .navbar ~ .page-with-subnavbar:not(.no-navbar) .page-content,
2687 .navbar ~ *:not(.no-navbar) .subnavbar ~ .page-content,
2688 .navbar ~ *:not(.no-navbar) .subnavbar ~ * .page-content,
2689 .navbar ~ .subnavbar ~ .page-content,
2690 .navbar ~ .subnavbar ~ * .page-content,
2691 .page-with-subnavbar .navbar ~ * .page-content,
2692 .page-with-subnavbar .navbar ~ .page-content {
2693   padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
2694 }
2695 .navbar ~ .page-with-subnavbar.page-with-navbar-large:not(.no-navbar) .page-content,
2696 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .page-content,
2697 .page-with-subnavbar.page-with-navbar-large .navbar ~ .page-content,
2698 .page-with-subnavbar.page-with-navbar-large .page-content {
2699   padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height));
2700 }
2701 .ios .subnavbar {
2702   height: calc(var(--f7-subnavbar-height) + 1px);
2703   margin-top: -1px;
2704   padding-top: 1px;
2705 }
2706 .ios .subnavbar .title {
2707   align-self: flex-start;
2708   flex-shrink: 10;
2709 }
2710 .ios .subnavbar .left a + a,
2711 .ios .subnavbar .right a + a {
2712   margin-left: 15px;
2713 }
2714 .ios .subnavbar .left {
2715   margin-right: 10px;
2716 }
2717 .ios .subnavbar .right {
2718   margin-left: 10px;
2719 }
2720 .ios .subnavbar .right:first-child {
2721   right: 8px;
2722 }
2723 .ios .subnavbar a.link {
2724   justify-content: flex-start;
2725 }
2726 .ios .subnavbar a.icon-only {
2727   justify-content: center;
2728   margin: 0;
2729 }
2730 .md .subnavbar {
2731   height: var(--f7-subnavbar-height);
2732 }
2733 .md .subnavbar .right {
2734   margin-left: auto;
2735 }
2736 .md .subnavbar .right:first-child {
2737   right: 16px;
2738 }
2739 .md .subnavbar a.link {
2740   justify-content: center;
2741   padding: 0 16px;
2742 }
2743 .md .subnavbar a.link:before {
2744   content: '';
2745   width: 152%;
2746   height: 152%;
2747   position: absolute;
2748   left: -26%;
2749   top: -26%;
2750   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2751   background-repeat: no-repeat;
2752   background-position: center;
2753   background-size: 100% 100%;
2754   opacity: 0;
2755   pointer-events: none;
2756   transition-duration: 600ms;
2757 }
2758 .md .subnavbar a.link.active-state:before {
2759   opacity: 1;
2760   transition-duration: 150ms;
2761 }
2762 .md .subnavbar a.icon-only {
2763   flex-shrink: 0;
2764 }
2765 .md .subnavbar-inner > a.link:first-child {
2766   margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
2767 }
2768 .md .subnavbar-inner > a.link:last-child {
2769   margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
2770 }
2771 /* === Content Block === */
2772 :root {
2773   --f7-block-font-size: inherit;
2774   --f7-block-strong-bg-color: #fff;
2775   --f7-block-title-font-size: inherit;
2776   --f7-block-header-margin: 10px;
2777   --f7-block-footer-margin: 10px;
2778   --f7-block-header-font-size: 14px;
2779   --f7-block-footer-font-size: 14px;
2780   --f7-block-title-white-space: nowrap;
2781   --f7-block-title-medium-text-color: #000;
2782   --f7-block-title-medium-text-transform: none;
2783   --f7-block-title-large-text-color: #000;
2784   --f7-block-title-large-text-transform: none;
2785 }
2786 :root .theme-dark,
2787 :root.theme-dark {
2788   --f7-block-title-medium-text-color: #fff;
2789   --f7-block-title-large-text-color: #fff;
2790 }
2791 .ios {
2792   --f7-block-text-color: #6d6d72;
2793   --f7-block-padding-horizontal: 15px;
2794   --f7-block-padding-vertical: 15px;
2795   --f7-block-margin-vertical: 35px;
2796   --f7-block-strong-text-color: #000;
2797   --f7-block-strong-border-color: #c8c7cc;
2798   --f7-block-title-text-transform: uppercase;
2799   --f7-block-title-text-color: #6d6d72;
2800   --f7-block-title-font-weight: 400;
2801   --f7-block-title-line-height: 17px;
2802   --f7-block-title-margin-bottom: 10px;
2803   --f7-block-title-medium-font-size: 22px;
2804   --f7-block-title-medium-font-weight: bold;
2805   --f7-block-title-medium-line-height: 1.4;
2806   --f7-block-title-large-font-size: 29px;
2807   --f7-block-title-large-font-weight: bold;
2808   --f7-block-title-large-line-height: 1.3;
2809   --f7-block-inset-side-margin: 15px;
2810   --f7-block-inset-border-radius: 7px;
2811   --f7-block-header-text-color: #8f8f94;
2812   --f7-block-footer-text-color: #8f8f94;
2813 }
2814 .ios .theme-dark,
2815 .ios.theme-dark {
2816   --f7-block-strong-border-color: #282829;
2817   --f7-block-title-text-color: #8E8E93;
2818   --f7-block-header-text-color: #8E8E93;
2819   --f7-block-footer-text-color: #8E8E93;
2820   --f7-block-strong-bg-color: #1c1c1d;
2821   --f7-block-strong-text-color: #fff;
2822 }
2823 .md {
2824   --f7-block-text-color: inherit;
2825   --f7-block-padding-horizontal: 16px;
2826   --f7-block-padding-vertical: 16px;
2827   --f7-block-margin-vertical: 32px;
2828   --f7-block-strong-text-color: inherit;
2829   --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
2830   --f7-block-title-text-transform: none;
2831   --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
2832   --f7-block-title-font-weight: 500;
2833   --f7-block-title-line-height: 16px;
2834   --f7-block-title-margin-bottom: 16px;
2835   --f7-block-title-medium-font-size: 24px;
2836   --f7-block-title-medium-font-weight: 500;
2837   --f7-block-title-medium-line-height: 1.3;
2838   --f7-block-title-large-font-size: 34px;
2839   --f7-block-title-large-font-weight: 500;
2840   --f7-block-title-large-line-height: 1.2;
2841   --f7-block-inset-side-margin: 16px;
2842   --f7-block-inset-border-radius: 4px;
2843   --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
2844   --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
2845 }
2846 .md .theme-dark,
2847 .md.theme-dark {
2848   --f7-block-strong-border-color: #282829;
2849   --f7-block-title-text-color: #fff;
2850   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
2851   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
2852   --f7-block-strong-bg-color: #1c1c1d;
2853 }
2854 .block {
2855   box-sizing: border-box;
2856   position: relative;
2857   z-index: 1;
2858   color: var(--f7-block-text-color);
2859   margin: var(--f7-block-margin-vertical) 0;
2860   padding-top: 0;
2861   padding-bottom: 0;
2862   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2863   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2864   font-size: var(--f7-block-font-size);
2865 }
2866 .block.no-hairlines:before,
2867 .block.no-hairlines ul:before,
2868 .md .block.no-hairlines-md:before,
2869 .md .block.no-hairlines-md ul:before,
2870 .ios .block.no-hairlines-ios:before,
2871 .ios .block.no-hairlines-ios ul:before {
2872   display: none !important;
2873 }
2874 .block.no-hairlines:after,
2875 .block.no-hairlines ul:after,
2876 .md .block.no-hairlines-md:after,
2877 .md .block.no-hairlines-md ul:after,
2878 .ios .block.no-hairlines-ios:after,
2879 .ios .block.no-hairlines-ios ul:after {
2880   display: none !important;
2881 }
2882 .block.no-hairline-top:before,
2883 .block.no-hairline-top ul:before,
2884 .md .block.no-hairline-top-md:before,
2885 .md .block.no-hairline-top-md ul:before,
2886 .ios .block.no-hairline-top-ios:before,
2887 .ios .block.no-hairline-top-ios ul:before {
2888   display: none !important;
2889 }
2890 .block.no-hairline-bottom:after,
2891 .block.no-hairline-bottom ul:after,
2892 .md .block.no-hairline-bottom-md:after,
2893 .md .block.no-hairline-bottom-md ul:after,
2894 .ios .block.no-hairline-bottom-ios:after,
2895 .ios .block.no-hairline-bottom-ios ul:after {
2896   display: none !important;
2897 }
2898 .block > h1:first-child,
2899 .block > h2:first-child,
2900 .block > h3:first-child,
2901 .block > h4:first-child,
2902 .block > p:first-child {
2903   margin-top: 0;
2904 }
2905 .block > h1:last-child,
2906 .block > h2:last-child,
2907 .block > h3:last-child,
2908 .block > h4:last-child,
2909 .block > p:last-child {
2910   margin-bottom: 0;
2911 }
2912 .block-strong {
2913   color: var(--f7-block-strong-text-color);
2914   padding-top: var(--f7-block-padding-vertical);
2915   padding-bottom: var(--f7-block-padding-vertical);
2916   background-color: var(--f7-block-strong-bg-color);
2917 }
2918 .block-strong:before {
2919   content: '';
2920   position: absolute;
2921   background-color: var(--f7-block-strong-border-color);
2922   display: block;
2923   z-index: 15;
2924   top: 0;
2925   right: auto;
2926   bottom: auto;
2927   left: 0;
2928   height: 1px;
2929   width: 100%;
2930   transform-origin: 50% 0%;
2931   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2932 }
2933 .block-strong:after {
2934   content: '';
2935   position: absolute;
2936   background-color: var(--f7-block-strong-border-color);
2937   display: block;
2938   z-index: 15;
2939   top: auto;
2940   right: auto;
2941   bottom: 0;
2942   left: 0;
2943   height: 1px;
2944   width: 100%;
2945   transform-origin: 50% 100%;
2946   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2947 }
2948 .block-title {
2949   position: relative;
2950   overflow: hidden;
2951   margin: 0;
2952   white-space: var(--f7-block-title-white-space);
2953   text-overflow: ellipsis;
2954   text-transform: var(--f7-block-title-text-transform);
2955   color: var(--f7-block-title-text-color);
2956   font-size: var(--f7-block-title-font-size, inherit);
2957   font-weight: var(--f7-block-title-font-weight);
2958   line-height: var(--f7-block-title-line-height);
2959   margin-top: var(--f7-block-margin-vertical);
2960   margin-bottom: var(--f7-block-title-margin-bottom);
2961   margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2962   margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2963 }
2964 .block-title + .list,
2965 .block-title + .block,
2966 .block-title + .card,
2967 .block-title + .timeline,
2968 .block-title + .block-header {
2969   margin-top: 0px;
2970 }
2971 .block-title-medium {
2972   font-size: var(--f7-block-title-medium-font-size);
2973   text-transform: var(--f7-block-title-medium-text-transform);
2974   color: var(--f7-block-title-medium-text-color);
2975   font-weight: var(--f7-block-title-medium-font-weight);
2976   line-height: var(--f7-block-title-medium-line-height);
2977 }
2978 .block-title-large {
2979   font-size: var(--f7-block-title-large-font-size);
2980   text-transform: var(--f7-block-title-large-text-transform);
2981   color: var(--f7-block-title-large-text-color);
2982   font-weight: var(--f7-block-title-large-font-weight);
2983   line-height: var(--f7-block-title-large-line-height);
2984 }
2985 .block > .block-title:first-child,
2986 .list > .block-title:first-child {
2987   margin-top: 0;
2988   margin-left: 0;
2989   margin-right: 0;
2990 }
2991 .block-header {
2992   color: var(--f7-block-header-text-color);
2993   font-size: var(--f7-block-header-font-size);
2994   margin-bottom: var(--f7-block-header-margin);
2995   margin-top: var(--f7-block-margin-vertical);
2996 }
2997 .block-header + .list,
2998 .block-header + .block,
2999 .block-header + .card,
3000 .block-header + .timeline {
3001   margin-top: var(--f7-block-header-margin);
3002 }
3003 .block-footer {
3004   color: var(--f7-block-footer-text-color);
3005   font-size: var(--f7-block-footer-font-size);
3006   margin-top: var(--f7-block-footer-margin);
3007   margin-bottom: var(--f7-block-margin-vertical);
3008 }
3009 .block-footer,
3010 .block-header {
3011   padding-top: 0;
3012   padding-bottom: 0;
3013   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3014   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3015 }
3016 .block-footer ul:first-child,
3017 .block-header ul:first-child,
3018 .block-footer p:first-child,
3019 .block-header p:first-child,
3020 .block-footer h1:first-child,
3021 .block-header h1:first-child,
3022 .block-footer h2:first-child,
3023 .block-header h2:first-child,
3024 .block-footer h3:first-child,
3025 .block-header h3:first-child,
3026 .block-footer h4:first-child,
3027 .block-header h4:first-child {
3028   margin-top: 0;
3029 }
3030 .block-footer ul:last-child,
3031 .block-header ul:last-child,
3032 .block-footer p:last-child,
3033 .block-header p:last-child,
3034 .block-footer h1:last-child,
3035 .block-header h1:last-child,
3036 .block-footer h2:last-child,
3037 .block-header h2:last-child,
3038 .block-footer h3:last-child,
3039 .block-header h3:last-child,
3040 .block-footer h4:last-child,
3041 .block-header h4:last-child {
3042   margin-bottom: 0;
3043 }
3044 .block-footer ul:first-child:last-child,
3045 .block-header ul:first-child:last-child,
3046 .block-footer p:first-child:last-child,
3047 .block-header p:first-child:last-child,
3048 .block-footer h1:first-child:last-child,
3049 .block-header h1:first-child:last-child,
3050 .block-footer h2:first-child:last-child,
3051 .block-header h2:first-child:last-child,
3052 .block-footer h3:first-child:last-child,
3053 .block-header h3:first-child:last-child,
3054 .block-footer h4:first-child:last-child,
3055 .block-header h4:first-child:last-child {
3056   margin-top: 0;
3057   margin-bottom: 0;
3058 }
3059 .list .block-header,
3060 .block .block-header,
3061 .card .block-header,
3062 .timeline .block-header {
3063   margin-top: 0;
3064 }
3065 .list .block-footer,
3066 .block .block-footer,
3067 .card .block-footer,
3068 .timeline .block-footer {
3069   margin-bottom: 0;
3070 }
3071 .list + .block-footer,
3072 .block + .block-footer,
3073 .card + .block-footer,
3074 .timeline + .block-footer {
3075   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3076 }
3077 .block + .block-footer {
3078   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3079   margin-bottom: var(--f7-block-margin-vertical);
3080 }
3081 .block .block-header,
3082 .block .block-footer {
3083   padding: 0;
3084 }
3085 .block.inset {
3086   border-radius: var(--f7-block-inset-border-radius);
3087   margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3088   margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3089   --f7-safe-area-left: 0px;
3090   --f7-safe-area-right: 0px;
3091 }
3092 .block-strong.inset:before {
3093   display: none !important;
3094 }
3095 .block-strong.inset:after {
3096   display: none !important;
3097 }
3098 @media (min-width: 768px) {
3099   .block.tablet-inset {
3100     border-radius: var(--f7-block-inset-border-radius);
3101     margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3102     margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3103     --f7-safe-area-left: 0px;
3104     --f7-safe-area-right: 0px;
3105   }
3106   .block-strong.tablet-inset:before {
3107     display: none !important;
3108   }
3109   .block-strong.tablet-inset:after {
3110     display: none !important;
3111   }
3112 }
3113 /* === List View === */
3114 :root {
3115   --f7-list-bg-color: #fff;
3116   --f7-list-item-text-max-lines: 2;
3117   --f7-list-chevron-icon-color: #c7c7cc;
3118   --f7-list-item-title-font-size: inherit;
3119   --f7-list-item-title-font-weight: 400;
3120   --f7-list-item-title-text-color: inherit;
3121   --f7-list-item-title-line-height: inherit;
3122   --f7-list-item-title-white-space: nowrap;
3123   --f7-list-item-subtitle-font-weight: 400;
3124   --f7-list-item-subtitle-text-color: inherit;
3125   --f7-list-item-subtitle-line-height: inherit;
3126   --f7-list-item-header-text-color: inherit;
3127   --f7-list-item-header-font-size: 12px;
3128   --f7-list-item-header-font-weight: 400;
3129   --f7-list-item-header-line-height: 1.2;
3130   --f7-list-item-footer-font-size: 12px;
3131   --f7-list-item-footer-font-weight: 400;
3132   --f7-list-item-footer-line-height: 1.2;
3133 }
3134 .ios {
3135   --f7-list-inset-side-margin: 15px;
3136   --f7-list-inset-border-radius: 7px;
3137   --f7-list-margin-vertical: 35px;
3138   --f7-list-font-size: 17px;
3139   --f7-list-chevron-icon-area: 20px;
3140   --f7-list-border-color: #c8c7cc;
3141   --f7-list-item-border-color: #c8c7cc;
3142   --f7-list-link-pressed-bg-color: #d9d9d9;
3143   --f7-list-item-subtitle-font-size: 15px;
3144   --f7-list-item-text-font-size: 15px;
3145   --f7-list-item-text-font-weight: 400;
3146   --f7-list-item-text-text-color: #8e8e93;
3147   --f7-list-item-text-line-height: 21px;
3148   --f7-list-item-after-font-size: inherit;
3149   --f7-list-item-after-font-weight: 400;
3150   --f7-list-item-after-text-color: #8e8e93;
3151   --f7-list-item-after-line-height: inherit;
3152   --f7-list-item-after-padding: 5px;
3153   --f7-list-item-footer-text-color: #8e8e93;
3154   --f7-list-item-min-height: 44px;
3155   --f7-list-item-media-margin: 15px;
3156   --f7-list-item-media-icons-margin: 5px;
3157   --f7-list-item-cell-margin: 15px;
3158   --f7-list-item-padding-vertical: 8px;
3159   --f7-list-item-padding-horizontal: 15px;
3160   --f7-list-media-item-padding-vertical: 10px;
3161   --f7-list-media-item-padding-horizontal: 15px;
3162   /*
3163   --f7-list-button-text-color: var(--f7-theme-color);
3164   */
3165   --f7-list-button-font-size: inherit;
3166   --f7-list-button-font-weight: 400;
3167   --f7-list-button-text-align: center;
3168   --f7-list-button-border-color: #c8c7cc;
3169   --f7-list-button-pressed-bg-color: #d9d9d9;
3170   --f7-list-item-divider-height: 31px;
3171   --f7-list-item-divider-text-color: #8e8e93;
3172   --f7-list-item-divider-font-size: inherit;
3173   --f7-list-item-divider-font-weight: 400;
3174   --f7-list-item-divider-bg-color: #f7f7f7;
3175   --f7-list-item-divider-line-height: inherit;
3176   --f7-list-item-divider-border-color: #c8c7cc;
3177   --f7-list-group-title-height: 31px;
3178   --f7-list-group-title-text-color: #8e8e93;
3179   --f7-list-group-title-font-size: inherit;
3180   --f7-list-group-title-font-weight: 400;
3181   --f7-list-group-title-bg-color: #f7f7f7;
3182   --f7-list-group-title-line-height: inherit;
3183 }
3184 .ios .theme-dark,
3185 .ios.theme-dark {
3186   --f7-list-bg-color: #1c1c1d;
3187   --f7-list-border-color: #282829;
3188   --f7-list-button-border-color: #282829;
3189   --f7-list-item-border-color: #282829;
3190   --f7-list-item-divider-border-color: #282829;
3191   --f7-list-item-divider-bg-color: #232323;
3192   --f7-list-group-title-bg-color: #232323;
3193   --f7-list-link-pressed-bg-color: #363636;
3194   --f7-list-button-pressed-bg-color: #363636;
3195   --f7-list-chevron-icon-color: #434345;
3196 }
3197 .md {
3198   --f7-list-inset-side-margin: 16px;
3199   --f7-list-inset-border-radius: 4px;
3200   --f7-list-margin-vertical: 32px;
3201   --f7-list-font-size: 16px;
3202   --f7-list-chevron-icon-area: 26px;
3203   --f7-list-border-color: rgba(0, 0, 0, 0.12);
3204   --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3205   --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3206   --f7-list-item-subtitle-font-size: 14px;
3207   --f7-list-item-text-font-size: 14px;
3208   --f7-list-item-text-font-weight: 400;
3209   --f7-list-item-text-text-color: #757575;
3210   --f7-list-item-text-line-height: 20px;
3211   --f7-list-item-after-font-size: 14px;
3212   --f7-list-item-after-font-weight: 400;
3213   --f7-list-item-after-text-color: #757575;
3214   --f7-list-item-after-line-height: inherit;
3215   --f7-list-item-after-padding: 8px;
3216   --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3217   --f7-list-item-min-height: 48px;
3218   --f7-list-item-media-margin: 16px;
3219   --f7-list-item-media-icons-margin: 8px;
3220   --f7-list-item-cell-margin: 16px;
3221   --f7-list-item-padding-vertical: 8px;
3222   --f7-list-item-padding-horizontal: 16px;
3223   --f7-list-media-item-padding-vertical: 14px;
3224   --f7-list-media-item-padding-horizontal: 16px;
3225   --f7-list-button-text-color: #212121;
3226   --f7-list-button-font-size: inherit;
3227   --f7-list-button-font-weight: 400;
3228   --f7-list-button-text-align: left;
3229   --f7-list-button-border-color: transparent;
3230   --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3231   --f7-list-item-divider-height: 48px;
3232   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3233   --f7-list-item-divider-font-size: 14px;
3234   --f7-list-item-divider-font-weight: 400;
3235   --f7-list-item-divider-bg-color: #f4f4f4;
3236   --f7-list-item-divider-line-height: inherit;
3237   --f7-list-item-divider-border-color: transparent;
3238   --f7-list-group-title-height: 48px;
3239   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3240   --f7-list-group-title-font-size: 14px;
3241   --f7-list-group-title-font-weight: 400;
3242   --f7-list-group-title-bg-color: #f4f4f4;
3243   --f7-list-group-title-line-height: inherit;
3244 }
3245 .md .theme-dark,
3246 .md.theme-dark {
3247   --f7-list-bg-color: #1c1c1d;
3248   --f7-list-border-color: #282829;
3249   --f7-list-button-text-color: #fff;
3250   --f7-list-item-border-color: #282829;
3251   --f7-list-item-divider-border-color: #282829;
3252   --f7-list-item-divider-bg-color: #232323;
3253   --f7-list-item-divider-text-color: #fff;
3254   --f7-list-group-title-bg-color: #232323;
3255   --f7-list-group-title-text-color: #fff;
3256   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3257   --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3258   --f7-list-chevron-icon-color: #434345;
3259   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3260   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3261   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3262 }
3263 .list {
3264   position: relative;
3265   z-index: 1;
3266   font-size: var(--f7-list-font-size);
3267   margin: var(--f7-list-margin-vertical) 0;
3268 }
3269 .list ul {
3270   list-style: none;
3271   margin: 0;
3272   padding: 0;
3273   position: relative;
3274   background: var(--f7-list-bg-color);
3275 }
3276 .list ul:before {
3277   content: '';
3278   position: absolute;
3279   background-color: var(--f7-list-border-color);
3280   display: block;
3281   z-index: 15;
3282   top: 0;
3283   right: auto;
3284   bottom: auto;
3285   left: 0;
3286   height: 1px;
3287   width: 100%;
3288   transform-origin: 50% 0%;
3289   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3290 }
3291 .list ul:after {
3292   content: '';
3293   position: absolute;
3294   background-color: var(--f7-list-border-color);
3295   display: block;
3296   z-index: 15;
3297   top: auto;
3298   right: auto;
3299   bottom: 0;
3300   left: 0;
3301   height: 1px;
3302   width: 100%;
3303   transform-origin: 50% 100%;
3304   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3305 }
3306 .list ul ul:before {
3307   display: none !important;
3308 }
3309 .list ul ul:after {
3310   display: none !important;
3311 }
3312 .list li {
3313   position: relative;
3314   box-sizing: border-box;
3315 }
3316 .list .item-media {
3317   display: flex;
3318   flex-shrink: 0;
3319   flex-wrap: nowrap;
3320   align-items: center;
3321   box-sizing: border-box;
3322   padding-bottom: var(--f7-list-item-padding-vertical);
3323   padding-top: var(--f7-list-item-padding-vertical);
3324 }
3325 .list .item-media + .item-inner {
3326   margin-left: var(--f7-list-item-media-margin);
3327 }
3328 .list .item-media i + i,
3329 .list .item-media i + img {
3330   margin-left: var(--f7-list-item-media-icons-margin);
3331 }
3332 .list .item-after {
3333   padding-left: var(--f7-list-item-after-padding);
3334 }
3335 .list .item-inner {
3336   position: relative;
3337   width: 100%;
3338   min-width: 0;
3339   display: flex;
3340   justify-content: space-between;
3341   box-sizing: border-box;
3342   align-items: center;
3343   align-self: stretch;
3344   padding-top: var(--f7-list-item-padding-vertical);
3345   padding-bottom: var(--f7-list-item-padding-vertical);
3346   min-height: var(--f7-list-item-min-height);
3347   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3348 }
3349 .list .item-title {
3350   min-width: 0;
3351   flex-shrink: 1;
3352   white-space: var(--f7-list-item-title-white-space);
3353   position: relative;
3354   overflow: hidden;
3355   text-overflow: ellipsis;
3356   max-width: 100%;
3357   font-size: var(--f7-list-item-title-font-size);
3358   font-weight: var(--f7-list-item-title-font-weight);
3359   color: var(--f7-list-item-title-text-color);
3360   line-height: var(--f7-list-item-title-line-height);
3361 }
3362 .list .item-after {
3363   white-space: nowrap;
3364   flex-shrink: 0;
3365   display: flex;
3366   font-size: var(--f7-list-item-after-font-size);
3367   font-weight: var(--f7-list-item-after-font-weight);
3368   color: var(--f7-list-item-after-text-color);
3369   line-height: var(--f7-list-item-after-line-height);
3370   margin-left: auto;
3371 }
3372 .list .item-header,
3373 .list .item-footer {
3374   white-space: normal;
3375 }
3376 .list .item-header {
3377   color: var(--f7-list-item-header-text-color);
3378   font-size: var(--f7-list-item-header-font-size);
3379   font-weight: var(--f7-list-item-header-font-weight);
3380   line-height: var(--f7-list-item-header-line-height);
3381 }
3382 .list .item-footer {
3383   color: var(--f7-list-item-footer-text-color);
3384   font-size: var(--f7-list-item-footer-font-size);
3385   font-weight: var(--f7-list-item-footer-font-weight);
3386   line-height: var(--f7-list-item-footer-line-height);
3387 }
3388 .list .item-link,
3389 .list .list-button {
3390   transition-duration: 300ms;
3391   transition-property: background-color;
3392   display: block;
3393   position: relative;
3394   overflow: hidden;
3395   z-index: 0;
3396 }
3397 .list .item-link {
3398   color: inherit;
3399 }
3400 .list .item-link.active-state {
3401   background-color: var(--f7-list-link-pressed-bg-color);
3402 }
3403 .list .item-link .item-inner {
3404   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3405 }
3406 .list .item-content {
3407   display: flex;
3408   justify-content: space-between;
3409   box-sizing: border-box;
3410   align-items: center;
3411   min-height: var(--f7-list-item-min-height);
3412   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3413 }
3414 .list .item-subtitle {
3415   position: relative;
3416   overflow: hidden;
3417   white-space: nowrap;
3418   max-width: 100%;
3419   text-overflow: ellipsis;
3420   font-size: var(--f7-list-item-subtitle-font-size);
3421   font-weight: var(--f7-list-item-subtitle-font-weight);
3422   color: var(--f7-list-item-subtitle-text-color);
3423   line-height: var(--f7-list-item-subtitle-line-height);
3424 }
3425 .list .item-text {
3426   position: relative;
3427   overflow: hidden;
3428   text-overflow: hidden;
3429   -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3430   display: -webkit-box;
3431   font-size: var(--f7-list-item-text-font-size);
3432   font-weight: var(--f7-list-item-text-font-weight);
3433   color: var(--f7-list-item-text-text-color);
3434   line-height: var(--f7-list-item-text-line-height);
3435   max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3436 }
3437 .list .item-title-row {
3438   position: relative;
3439   display: flex;
3440   justify-content: space-between;
3441   box-sizing: border-box;
3442 }
3443 .list .item-title-row .item-after {
3444   align-self: center;
3445 }
3446 .list .item-row {
3447   display: flex;
3448   justify-content: space-between;
3449   box-sizing: border-box;
3450 }
3451 .list .item-cell {
3452   display: block;
3453   align-self: center;
3454   box-sizing: border-box;
3455   width: 100%;
3456   min-width: 0;
3457   margin-left: var(--f7-list-item-cell-margin);
3458   flex-shrink: 1;
3459 }
3460 .list .item-cell:first-child {
3461   margin-left: 0;
3462 }
3463 .list .ripple-wave + .item-cell {
3464   margin-left: 0;
3465 }
3466 .list li:last-child .list-button:after {
3467   display: none !important;
3468 }
3469 .list li:last-child > .item-inner:after,
3470 .list li:last-child li:last-child > .item-inner:after,
3471 .list li:last-child > .item-content > .item-inner:after,
3472 .list li:last-child li:last-child > .item-content > .item-inner:after,
3473 .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3474 .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3475 .list li:last-child > .item-link > .item-content > .item-inner:after,
3476 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3477   display: none !important;
3478 }
3479 .list li li:last-child .item-inner:after,
3480 .list li:last-child li .item-inner:after {
3481   content: '';
3482   position: absolute;
3483   background-color: var(--f7-list-item-border-color);
3484   display: block;
3485   z-index: 15;
3486   top: auto;
3487   right: auto;
3488   bottom: 0;
3489   left: 0;
3490   height: 1px;
3491   width: 100%;
3492   transform-origin: 50% 100%;
3493   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3494 }
3495 .list.no-hairlines:before,
3496 .list.no-hairlines ul:before,
3497 .md .list.no-hairlines-md:before,
3498 .md .list.no-hairlines-md ul:before,
3499 .ios .list.no-hairlines-ios:before,
3500 .ios .list.no-hairlines-ios ul:before {
3501   display: none !important;
3502 }
3503 .list.no-hairlines:after,
3504 .list.no-hairlines ul:after,
3505 .md .list.no-hairlines-md:after,
3506 .md .list.no-hairlines-md ul:after,
3507 .ios .list.no-hairlines-ios:after,
3508 .ios .list.no-hairlines-ios ul:after {
3509   display: none !important;
3510 }
3511 .list.no-hairline-top:before,
3512 .list.no-hairline-top ul:before,
3513 .md .list.no-hairline-top-md:before,
3514 .md .list.no-hairline-top-md ul:before,
3515 .ios .list.no-hairline-top-ios:before,
3516 .ios .list.no-hairline-top-ios ul:before {
3517   display: none !important;
3518 }
3519 .list.no-hairline-bottom:after,
3520 .list.no-hairline-bottom ul:after,
3521 .md .list.no-hairline-bottom-md:after,
3522 .md .list.no-hairline-bottom-md ul:after,
3523 .ios .list.no-hairline-bottom-ios:after,
3524 .ios .list.no-hairline-bottom-ios ul:after {
3525   display: none !important;
3526 }
3527 .list.no-hairlines-between .item-inner:after,
3528 .md .list.no-hairlines-between-md .item-inner:after,
3529 .ios .list.no-hairlines-between-ios .item-inner:after,
3530 .list.no-hairlines-between .list-button:after,
3531 .md .list.no-hairlines-between-md .list-button:after,
3532 .ios .list.no-hairlines-between-ios .list-button:after,
3533 .list.no-hairlines-between .item-divider:after,
3534 .md .list.no-hairlines-between-md .item-divider:after,
3535 .ios .list.no-hairlines-between-ios .item-divider:after,
3536 .list.no-hairlines-between .list-group-title:after,
3537 .md .list.no-hairlines-between-md .list-group-title:after,
3538 .ios .list.no-hairlines-between-ios .list-group-title:after,
3539 .list.no-hairlines-between .list-group-title:after,
3540 .md .list.no-hairlines-between-md .list-group-title:after,
3541 .ios .list.no-hairlines-between-ios .list-group-title:after {
3542   display: none !important;
3543 }
3544 .list.no-hairlines-between.simple-list li:after,
3545 .md .list.no-hairlines-between-md.simple-list li:after,
3546 .ios .list.no-hairlines-between-ios.simple-list li:after {
3547   display: none !important;
3548 }
3549 .list.no-hairlines-between.links-list a:after,
3550 .md .list.no-hairlines-between-md.links-list a:after,
3551 .ios .list.no-hairlines-between-ios.links-list a:after {
3552   display: none !important;
3553 }
3554 .list-button {
3555   padding: 0 var(--f7-list-item-padding-horizontal);
3556   line-height: var(--f7-list-item-min-height);
3557   color: var(--f7-list-button-text-color, var(--f7-theme-color));
3558   font-size: var(--f7-list-button-font-size);
3559   font-weight: var(--f7-list-button-font-weight);
3560   text-align: var(--f7-list-button-text-align);
3561 }
3562 .list-button:after {
3563   content: '';
3564   position: absolute;
3565   background-color: var(--f7-list-button-border-color);
3566   display: block;
3567   z-index: 15;
3568   top: auto;
3569   right: auto;
3570   bottom: 0;
3571   left: 0;
3572   height: 1px;
3573   width: 100%;
3574   transform-origin: 50% 100%;
3575   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3576 }
3577 .list-button.active-state {
3578   background-color: var(--f7-list-button-pressed-bg-color);
3579 }
3580 .list-button[class*="color-"] {
3581   --f7-list-button-text-color: var(--f7-theme-color);
3582 }
3583 .simple-list li {
3584   position: relative;
3585   white-space: nowrap;
3586   text-overflow: ellipsis;
3587   max-width: 100%;
3588   box-sizing: border-box;
3589   display: flex;
3590   justify-content: space-between;
3591   align-items: center;
3592   align-content: center;
3593   line-height: var(--f7-list-item-min-height);
3594   height: var(--f7-list-item-min-height);
3595   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3596   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3597 }
3598 .simple-list li:after {
3599   left: var(--f7-list-item-padding-horizontal);
3600   width: auto;
3601   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3602   right: 0;
3603 }
3604 .simple-list li:last-child:after {
3605   display: none !important;
3606 }
3607 .links-list li {
3608   z-index: 1;
3609 }
3610 .links-list a {
3611   transition-duration: 300ms;
3612   transition-property: background-color;
3613   display: block;
3614   position: relative;
3615   overflow: hidden;
3616   display: flex;
3617   align-items: center;
3618   align-content: center;
3619   justify-content: space-between;
3620   box-sizing: border-box;
3621   white-space: nowrap;
3622   text-overflow: ellipsis;
3623   max-width: 100%;
3624   height: var(--f7-list-item-min-height);
3625   color: inherit;
3626 }
3627 .links-list a .ripple-wave {
3628   z-index: 0;
3629 }
3630 .links-list a:after {
3631   width: auto;
3632 }
3633 .links-list a.active-state {
3634   background-color: var(--f7-list-link-pressed-bg-color);
3635 }
3636 .links-list a {
3637   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3638   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3639 }
3640 .links-list a:after {
3641   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3642   right: 0;
3643 }
3644 .links-list li:last-child a:after {
3645   display: none !important;
3646 }
3647 .simple-list li:after,
3648 .links-list a:after,
3649 .list .item-inner:after {
3650   content: '';
3651   position: absolute;
3652   background-color: var(--f7-list-item-border-color);
3653   display: block;
3654   z-index: 15;
3655   top: auto;
3656   right: auto;
3657   bottom: 0;
3658   left: 0;
3659   height: 1px;
3660   width: 100%;
3661   transform-origin: 50% 100%;
3662   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3663 }
3664 .media-list,
3665 li.media-item {
3666   --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
3667   --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
3668 }
3669 .media-list .item-inner,
3670 li.media-item .item-inner {
3671   display: block;
3672   align-self: stretch;
3673 }
3674 .media-list .item-media,
3675 li.media-item .item-media {
3676   align-self: flex-start;
3677 }
3678 .media-list .item-media img,
3679 li.media-item .item-media img {
3680   display: block;
3681 }
3682 .media-list .item-link .item-inner,
3683 li.media-item .item-link .item-inner {
3684   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3685 }
3686 .media-list .item-link .item-title-row,
3687 li.media-item .item-link .item-title-row {
3688   padding-right: calc(var(--f7-list-chevron-icon-area));
3689 }
3690 .media-list.chevron-center .item-link .item-inner,
3691 .media-list .chevron-center .item-link .item-inner,
3692 .media-list .item-link.chevron-center .item-inner,
3693 li.media-item.chevron-center .item-link .item-inner,
3694 li.media-item .item-link.chevron-center .item-inner,
3695 li.media-item .chevron-center .item-link .item-inner {
3696   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3697 }
3698 .media-list.chevron-center .item-title-row,
3699 .media-list .chevron-center .item-title-row,
3700 li.media-item.chevron-center .item-title-row,
3701 li.media-item .chevron-center .item-title-row {
3702   padding-right: 0;
3703 }
3704 .list .item-link .item-inner:before,
3705 .links-list a:before,
3706 .media-list .item-link .item-title-row:before,
3707 li.media-item .item-link .item-title-row:before,
3708 .media-list.chevron-center .item-link .item-inner:before,
3709 .media-list .chevron-center .item-link .item-inner:before,
3710 .media-list .item-link.chevron-center .item-inner:before,
3711 li.media-item.chevron-center .item-link .item-inner:before,
3712 li.media-item .chevron-center .item-link .item-inner:before,
3713 li.media-item .item-link.chevron-center .item-inner:before {
3714   font-family: 'framework7-core-icons';
3715   font-weight: normal;
3716   font-style: normal;
3717   line-height: 1;
3718   letter-spacing: normal;
3719   text-transform: none;
3720   white-space: nowrap;
3721   word-wrap: normal;
3722   direction: ltr;
3723   -webkit-font-smoothing: antialiased;
3724   text-rendering: optimizeLegibility;
3725   -moz-osx-font-smoothing: grayscale;
3726   -moz-font-feature-settings: "liga";
3727        font-feature-settings: "liga";
3728   text-align: center;
3729   display: block;
3730   width: 100%;
3731   height: 100%;
3732   position: absolute;
3733   top: 50%;
3734   width: 8px;
3735   height: 14px;
3736   margin-top: -7px;
3737   font-size: 20px;
3738   line-height: 14px;
3739   color: var(--f7-list-chevron-icon-color);
3740   pointer-events: none;
3741   right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3742   content: 'chevron_right';
3743 }
3744 .media-list.chevron-center .item-title-row:before,
3745 .media-list .chevron-center .item-title-row:before,
3746 li.media-item.chevron-center .item-title-row:before,
3747 li.media-item .chevron-center .item-title-row:before {
3748   display: none;
3749 }
3750 .media-list .item-link .item-inner:before,
3751 li.media-item .item-link .item-inner:before {
3752   display: none;
3753 }
3754 .media-list .item-link .item-title-row:before,
3755 li.media-item .item-link .item-title-row:before {
3756   right: 0;
3757 }
3758 .list-group ul:after,
3759 .list-group ul:before {
3760   z-index: 25 !important;
3761 }
3762 .list-group + .list-group ul:before {
3763   display: none !important;
3764 }
3765 li.item-divider,
3766 .item-divider,
3767 li.list-group-title {
3768   white-space: nowrap;
3769   position: relative;
3770   max-width: 100%;
3771   text-overflow: ellipsis;
3772   overflow: hidden;
3773   z-index: 15;
3774   padding-top: 0;
3775   padding-bottom: 0;
3776   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3777   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3778   box-sizing: border-box;
3779   display: flex;
3780   align-items: center;
3781   align-content: center;
3782 }
3783 li.item-divider:after,
3784 .item-divider:after,
3785 li.list-group-title:after {
3786   display: none !important;
3787 }
3788 li.item-divider,
3789 .item-divider {
3790   margin-top: -1px;
3791   height: var(--f7-list-item-divider-height);
3792   color: var(--f7-list-item-divider-text-color);
3793   font-size: var(--f7-list-item-divider-font-size);
3794   font-weight: var(--f7-list-item-divider-font-weight);
3795   background-color: var(--f7-list-item-divider-bg-color);
3796   line-height: var(--f7-list-item-divider-line-height);
3797 }
3798 li.item-divider:before,
3799 .item-divider:before {
3800   content: '';
3801   position: absolute;
3802   background-color: var(--f7-list-item-divider-border-color);
3803   display: block;
3804   z-index: 15;
3805   top: 0;
3806   right: auto;
3807   bottom: auto;
3808   left: 0;
3809   height: 1px;
3810   width: 100%;
3811   transform-origin: 50% 0%;
3812   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3813 }
3814 li.list-group-title,
3815 .list li.list-group-title {
3816   position: relative;
3817   position: -webkit-sticky;
3818   position: sticky;
3819   top: 0;
3820   margin-top: 0;
3821   z-index: 20;
3822   height: var(--f7-list-group-title-height);
3823   color: var(--f7-list-group-title-text-color);
3824   font-size: var(--f7-list-group-title-font-size);
3825   font-weight: var(--f7-list-group-title-font-weight);
3826   background-color: var(--f7-list-group-title-bg-color);
3827   line-height: var(--f7-list-group-title-line-height);
3828 }
3829 .list.inset {
3830   margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3831   margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3832   border-radius: var(--f7-list-inset-border-radius);
3833   --f7-safe-area-left: 0px;
3834   --f7-safe-area-right: 0px;
3835 }
3836 .list.inset .block-title {
3837   margin-left: 0;
3838   margin-right: 0;
3839 }
3840 .list.inset ul {
3841   border-radius: var(--f7-list-inset-border-radius);
3842 }
3843 .list.inset ul:before {
3844   display: none !important;
3845 }
3846 .list.inset ul:after {
3847   display: none !important;
3848 }
3849 .list.inset li.swipeout:first-child,
3850 .list.inset li:first-child > a {
3851   border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3852 }
3853 .list.inset li.swipeout:last-child,
3854 .list.inset li:last-child > a {
3855   border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3856 }
3857 .list.inset li.swipeout:first-child:last-child,
3858 .list.inset li:first-child:last-child > a {
3859   border-radius: var(--f7-list-inset-border-radius);
3860 }
3861 @media (min-width: 768px) {
3862   .list.tablet-inset {
3863     margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3864     margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3865     border-radius: var(--f7-list-inset-border-radius);
3866     --f7-safe-area-left: 0px;
3867     --f7-safe-area-right: 0px;
3868   }
3869   .list.tablet-inset .block-title {
3870     margin-left: 0;
3871     margin-right: 0;
3872   }
3873   .list.tablet-inset ul {
3874     border-radius: var(--f7-list-inset-border-radius);
3875   }
3876   .list.tablet-inset ul:before {
3877     display: none !important;
3878   }
3879   .list.tablet-inset ul:after {
3880     display: none !important;
3881   }
3882   .list.tablet-inset li:first-child > a {
3883     border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3884   }
3885   .list.tablet-inset li:last-child > a {
3886     border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3887   }
3888   .list.tablet-inset li:first-child:last-child > a {
3889     border-radius: var(--f7-list-inset-border-radius);
3890   }
3891 }
3892 .list.no-chevron,
3893 .list .no-chevron {
3894   --f7-list-chevron-icon-color: transparent;
3895   --f7-list-chevron-icon-area: 0px;
3896 }
3897 .ios .list ul ul {
3898   padding-left: calc(var(--f7-list-item-padding-horizontal) + 30px);
3899 }
3900 .ios .item-link.active-state .item-inner:after,
3901 .ios .list-button.active-state:after,
3902 .ios .links-list a.active-state:after {
3903   background-color: transparent;
3904 }
3905 .ios .links-list a.active-state,
3906 .ios .list .item-link.active-state,
3907 .ios .list .list-button.active-state {
3908   transition-duration: 0ms;
3909 }
3910 .ios .media-list .item-title,
3911 .ios li.media-item .item-title {
3912   font-weight: 600;
3913 }
3914 .md .list ul ul {
3915   padding-left: calc(var(--f7-list-item-padding-horizontal) + 40px);
3916 }
3917 .md .list .item-media {
3918   min-width: 40px;
3919 }
3920 /* === Badge === */
3921 :root {
3922   --f7-badge-text-color: #fff;
3923   --f7-badge-bg-color: #8e8e93;
3924   --f7-badge-padding: 0 4px;
3925   --f7-badge-in-icon-size: 16px;
3926   --f7-badge-in-icon-font-size: 10px;
3927   --f7-badge-font-weight: normal;
3928   --f7-badge-font-size: 12px;
3929 }
3930 .ios {
3931   --f7-badge-size: 20px;
3932 }
3933 .md {
3934   --f7-badge-size: 18px;
3935 }
3936 .badge {
3937   display: inline-flex;
3938   align-items: center;
3939   align-content: center;
3940   justify-content: center;
3941   color: var(--f7-badge-text-color);
3942   background: var(--f7-badge-bg-color);
3943   position: relative;
3944   box-sizing: border-box;
3945   text-align: center;
3946   vertical-align: middle;
3947   font-weight: var(--f7-badge-font-weight);
3948   font-size: var(--f7-badge-font-size);
3949   border-radius: var(--f7-badge-size);
3950   padding: var(--f7-badge-padding);
3951   height: var(--f7-badge-size);
3952   min-width: var(--f7-badge-size);
3953 }
3954 .icon .badge,
3955 .f7-icons .badge,
3956 .framework7-icons .badge,
3957 .material-icons .badge {
3958   position: absolute;
3959   left: 100%;
3960   margin-left: -10px;
3961   top: -2px;
3962   font-family: var(--f7-font-family);
3963   --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
3964   --f7-badge-size: var(--f7-badge-in-icon-size);
3965 }
3966 .badge[class*="color-"] {
3967   --f7-badge-bg-color: var(--f7-theme-color);
3968 }
3969 :root {
3970   --f7-button-font-size: 14px;
3971   --f7-button-min-width: 32px;
3972   --f7-button-bg-color: transparent;
3973   --f7-button-border-width: 0px;
3974   /*
3975   --f7-button-text-color: var(--f7-theme-color);
3976   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
3977   --f7-button-border-color: var(--f7-theme-color);
3978   --f7-button-fill-text-color: #fff;
3979   --f7-button-fill-bg-color: var(--f7-theme-color);
3980   --f7-button-outline-border-color: var(--f7-theme-color);
3981   */
3982   --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
3983   --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
3984   --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
3985 }
3986 .ios {
3987   --f7-button-height: 29px;
3988   --f7-button-padding-horizontal: 10px;
3989   --f7-button-border-radius: 5px;
3990   --f7-button-font-weight: 400;
3991   --f7-button-letter-spacing: 0;
3992   --f7-button-text-transform: none;
3993   /*
3994   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
3995   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
3996   */
3997   --f7-button-outline-border-width: 1px;
3998   --f7-button-large-height: 44px;
3999   --f7-button-large-font-size: 17px;
4000   --f7-button-small-height: 26px;
4001   --f7-button-small-font-size: 13px;
4002   --f7-button-small-font-weight: 600;
4003   --f7-button-small-text-transform: uppercase;
4004   --f7-button-small-outline-border-width: 2px;
4005 }
4006 .md {
4007   --f7-button-height: 36px;
4008   --f7-button-padding-horizontal: 8px;
4009   --f7-button-border-radius: 4px;
4010   --f7-button-font-weight: 500;
4011   --f7-button-letter-spacing: 0.03em;
4012   --f7-button-text-transform: uppercase;
4013   --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4014   /*
4015   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4016   */
4017   --f7-button-outline-border-width: 2px;
4018   --f7-button-large-height: 48px;
4019   --f7-button-large-font-size: 14px;
4020   --f7-button-small-height: 28px;
4021   --f7-button-small-font-size: 13px;
4022   --f7-button-small-font-weight: 500;
4023   --f7-button-small-text-transform: uppercase;
4024   --f7-button-small-outline-border-width: 2px;
4025 }
4026 .md .theme-dark,
4027 .md.theme-dark {
4028   --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4029 }
4030 button {
4031   -webkit-appearance: none;
4032      -moz-appearance: none;
4033           appearance: none;
4034   width: 100%;
4035 }
4036 .button {
4037   text-decoration: none;
4038   text-align: center;
4039   display: block;
4040   -webkit-appearance: none;
4041      -moz-appearance: none;
4042           appearance: none;
4043   background: none;
4044   margin: 0;
4045   white-space: nowrap;
4046   text-overflow: ellipsis;
4047   position: relative;
4048   overflow: hidden;
4049   font-family: inherit;
4050   cursor: pointer;
4051   outline: 0;
4052   box-sizing: border-box;
4053   vertical-align: middle;
4054   border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4055   font-size: var(--f7-button-font-size);
4056   color: var(--f7-button-text-color, var(--f7-theme-color));
4057   height: var(--f7-button-height);
4058   line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
4059   padding: var(--f7-button-padding-vertical, 0) var(--f7-button-padding-horizontal);
4060   border-radius: var(--f7-button-border-radius);
4061   min-width: var(--f7-button-min-width);
4062   font-weight: var(--f7-button-font-weight);
4063   letter-spacing: var(--f7-button-letter-spacing);
4064   text-transform: var(--f7-button-text-transform);
4065   background-color: var(--f7-button-bg-color);
4066   box-shadow: var(--f7-button-box-shadow);
4067 }
4068 .button.active-state {
4069   background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4070   color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4071 }
4072 input[type="submit"].button,
4073 input[type="button"].button {
4074   width: 100%;
4075 }
4076 .button > i + span,
4077 .button > span + span,
4078 .button > span + i,
4079 .button > i + i {
4080   margin-left: 4px;
4081 }
4082 .subnavbar .button,
4083 .navbar .button,
4084 .toolbar .button,
4085 .searchbar .button {
4086   color: var(--f7-button-text-color, var(--f7-theme-color));
4087 }
4088 .button-round,
4089 .ios .button-round-ios,
4090 .md .button-round-md {
4091   --f7-button-border-radius: var(--f7-button-height);
4092 }
4093 .button-fill,
4094 .ios .button-fill-ios,
4095 .md .button-fill-md,
4096 .button-active,
4097 .button.tab-link-active {
4098   --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4099   --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4100   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4101 }
4102 .button-fill,
4103 .ios .button-fill-ios,
4104 .md .button-fill-md {
4105   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4106 }
4107 .button-active,
4108 .button.tab-link-active {
4109   --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4110 }
4111 .button-outline,
4112 .ios .button-outline-ios,
4113 .md .button-outline-md {
4114   --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4115   --f7-button-border-width: var(--f7-button-outline-border-width);
4116 }
4117 .button-large,
4118 .ios .button-large-ios,
4119 .md .button-large-md {
4120   --f7-button-height: var(--f7-button-large-height);
4121   --f7-button-font-size: var(--f7-button-large-font-size);
4122 }
4123 .button-small,
4124 .ios .button-small-ios,
4125 .md .button-small-md {
4126   --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4127   --f7-button-height: var(--f7-button-small-height);
4128   --f7-button-font-size: var(--f7-button-small-font-size);
4129   --f7-button-font-weight: var(--f7-button-small-font-weight);
4130   --f7-button-text-transform: var(--f7-button-small-text-transform);
4131 }
4132 .ios .button-small.button-fill,
4133 .ios .button-small-ios.button-fill,
4134 .ios .button-small.button-fill-ios {
4135   --f7-button-border-width: var(--f7-button-small-outline-border-width);
4136   --f7-button-pressed-text-color: var(--f7-theme-color);
4137   --f7-button-pressed-bg-color: transparent;
4138 }
4139 .segmented {
4140   align-self: center;
4141   display: flex;
4142   flex-wrap: nowrap;
4143   border-radius: var(--f7-button-border-radius);
4144   box-shadow: var(--f7-button-box-shadow);
4145 }
4146 .segmented .button,
4147 .segmented button {
4148   width: 100%;
4149   flex-shrink: 1;
4150   min-width: 0;
4151   border-radius: 0;
4152 }
4153 .segmented .button:first-child {
4154   border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4155 }
4156 .segmented .button:not(.button-outline):first-child {
4157   border-left: none;
4158 }
4159 .segmented .button.button-outline:nth-child(n + 2) {
4160   border-left: none;
4161 }
4162 .segmented .button:last-child {
4163   border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4164 }
4165 .segmented .button-round:first-child {
4166   border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4167 }
4168 .segmented .button-round:last-child {
4169   border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4170 }
4171 .segmented .button:first-child:last-child {
4172   border-radius: var(--f7-button-border-radius);
4173 }
4174 .segmented-round,
4175 .ios .segmented-round-ios,
4176 .md .segmented-round-md {
4177   border-radius: var(--f7-button-height);
4178 }
4179 .segmented-raised,
4180 .ios .segmented-raised-ios,
4181 .md .segmented-raised-md {
4182   box-shadow: var(--f7-button-raised-box-shadow);
4183 }
4184 .segmented-raised .button:not(.button-outline),
4185 .ios .segmented-raised-ios .button:not(.button-outline),
4186 .md .segmented-raised-md .button:not(.button-outline) {
4187   border-left: 1px solid var(--f7-segmented-raised-divider-color);
4188 }
4189 .button-raised,
4190 .ios .button-raised-ios,
4191 .md .button-raised-md {
4192   --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4193 }
4194 .button-raised.active-state,
4195 .ios .button-raised-ios.active-state,
4196 .md .button-raised-md.active-state {
4197   --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4198 }
4199 .subnavbar .segmented {
4200   width: 100%;
4201 }
4202 .ios .button {
4203   transition-duration: 100ms;
4204 }
4205 .ios .button-fill,
4206 .ios .button-fill-ios {
4207   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4208 }
4209 .ios .button-small,
4210 .ios .button-small-ios {
4211   transition-duration: 200ms;
4212 }
4213 .md .button {
4214   transition-duration: 300ms;
4215   transform: translate3d(0, 0, 0);
4216 }
4217 .md .button-fill,
4218 .md .button-fill-md {
4219   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4220 }
4221 /* === Touch Ripple === */
4222 :root {
4223   --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4224   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4225   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4226 }
4227 .theme-dark {
4228   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4229 }
4230 .ripple,
4231 .fab a,
4232 a.link,
4233 a.item-link,
4234 a.list-button,
4235 .button,
4236 .dialog-button,
4237 .tab-link,
4238 .radio,
4239 .checkbox,
4240 .actions-button,
4241 .speed-dial-buttons a {
4242   -webkit-user-select: none;
4243   -moz-user-select: none;
4244    -ms-user-select: none;
4245        user-select: none;
4246 }
4247 .ripple-wave {
4248   left: 0;
4249   top: 0;
4250   position: absolute !important;
4251   border-radius: 50%;
4252   pointer-events: none;
4253   z-index: -1;
4254   padding: 0;
4255   margin: 0;
4256   font-size: 0;
4257   transform: translate3d(0px, 0px, 0) scale(0);
4258   transition-duration: 1400ms;
4259   background-color: var(--f7-touch-ripple-color);
4260   will-change: transform, opacity;
4261 }
4262 .ripple-wave.ripple-wave-fill {
4263   transition-duration: 300ms;
4264   opacity: 0.35;
4265 }
4266 .ripple-wave.ripple-wave-out {
4267   transition-duration: 600ms;
4268   opacity: 0;
4269 }
4270 .button-fill .ripple-wave,
4271 .picker-calendar-day .ripple-wave,
4272 .menu .ripple-wave {
4273   z-index: 1;
4274 }
4275 .checkbox .ripple-wave,
4276 .radio .ripple-wave,
4277 .data-table .sortable-cell .ripple-wave {
4278   z-index: 0;
4279 }
4280 [class*="ripple-color-"] {
4281   --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4282 }
4283 /* === Icon === */
4284 i.icon {
4285   display: inline-block;
4286   vertical-align: middle;
4287   background-size: 100% auto;
4288   background-position: center;
4289   background-repeat: no-repeat;
4290   font-style: normal;
4291   position: relative;
4292 }
4293 .icon-back:after,
4294 .icon-prev:after,
4295 .icon-forward:after,
4296 .icon-next:after {
4297   font-family: 'framework7-core-icons';
4298   font-weight: normal;
4299   font-style: normal;
4300   line-height: 1;
4301   letter-spacing: normal;
4302   text-transform: none;
4303   white-space: nowrap;
4304   word-wrap: normal;
4305   direction: ltr;
4306   -webkit-font-smoothing: antialiased;
4307   text-rendering: optimizeLegibility;
4308   -moz-osx-font-smoothing: grayscale;
4309   -moz-font-feature-settings: "liga";
4310        font-feature-settings: "liga";
4311   text-align: center;
4312   display: block;
4313   width: 100%;
4314   height: 100%;
4315   font-size: 20px;
4316 }
4317 .icon[class*="color-"] {
4318   color: var(--f7-theme-color);
4319 }
4320 .ios .icon-back,
4321 .ios .icon-prev,
4322 .ios .icon-forward,
4323 .ios .icon-next {
4324   width: 12px;
4325   height: 20px;
4326   line-height: 20px;
4327 }
4328 .ios .icon-back:after,
4329 .ios .icon-prev:after,
4330 .ios .icon-forward:after,
4331 .ios .icon-next:after {
4332   line-height: inherit;
4333 }
4334 .ios .icon-prev:after,
4335 .ios .icon-next:after {
4336   font-size: 16px;
4337 }
4338 .ios .item-media .icon {
4339   color: #808080;
4340 }
4341 .ios .item-media .f7-icons {
4342   font-size: 28px;
4343   width: 28px;
4344   height: 28px;
4345 }
4346 .ios .icon-back:after,
4347 .ios .icon-prev:after {
4348   content: 'chevron_left_ios';
4349 }
4350 .ios .icon-forward:after,
4351 .ios .icon-next:after {
4352   content: 'chevron_right_ios';
4353 }
4354 .md .icon-back,
4355 .md .icon-forward,
4356 .md .icon-next,
4357 .md .icon-prev {
4358   width: 24px;
4359   height: 24px;
4360 }
4361 .md .icon-back:after,
4362 .md .icon-forward:after,
4363 .md .icon-next:after,
4364 .md .icon-prev:after {
4365   line-height: 1.2;
4366 }
4367 .md .item-media .icon {
4368   color: #737373;
4369 }
4370 .md .item-media .material-icons {
4371   font-size: 24px;
4372   width: 24px;
4373   height: 24px;
4374 }
4375 .md .icon-back:after {
4376   content: 'arrow_left_md';
4377 }
4378 .md .icon-forward:after {
4379   content: 'arrow_right_md';
4380 }
4381 .md .icon-next:after {
4382   content: 'chevron_right_md';
4383 }
4384 .md .icon-prev:after {
4385   content: 'chevron_left_md';
4386 }
4387 .custom-modal-backdrop {
4388   z-index: 10500;
4389 }
4390 .custom-modal-backdrop,
4391 .actions-backdrop,
4392 .dialog-backdrop,
4393 .popover-backdrop,
4394 .popup-backdrop,
4395 .preloader-backdrop,
4396 .sheet-backdrop {
4397   position: absolute;
4398   left: 0;
4399   top: 0;
4400   width: 100%;
4401   height: 100%;
4402   background: rgba(0, 0, 0, 0.4);
4403   z-index: 13000;
4404   visibility: hidden;
4405   opacity: 0;
4406   transition-duration: 400ms;
4407 }
4408 .custom-modal-backdrop.not-animated,
4409 .actions-backdrop.not-animated,
4410 .dialog-backdrop.not-animated,
4411 .popover-backdrop.not-animated,
4412 .popup-backdrop.not-animated,
4413 .preloader-backdrop.not-animated,
4414 .sheet-backdrop.not-animated {
4415   transition-duration: 0ms;
4416 }
4417 .custom-modal-backdrop.backdrop-in,
4418 .actions-backdrop.backdrop-in,
4419 .dialog-backdrop.backdrop-in,
4420 .popover-backdrop.backdrop-in,
4421 .popup-backdrop.backdrop-in,
4422 .preloader-backdrop.backdrop-in,
4423 .sheet-backdrop.backdrop-in {
4424   visibility: visible;
4425   opacity: 1;
4426 }
4427 /* === Dialog === */
4428 :root {
4429   --f7-dialog-button-text-color: var(--f7-theme-color);
4430 }
4431 .ios {
4432   --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
4433   --f7-dialog-box-shadow: none;
4434   --f7-dialog-width: 270px;
4435   --f7-dialog-border-radius: 13px;
4436   --f7-dialog-text-color: #000;
4437   --f7-dialog-text-align: center;
4438   --f7-dialog-font-size: 14px;
4439   --f7-dialog-title-text-color: inherit;
4440   --f7-dialog-title-font-size: 18px;
4441   --f7-dialog-title-font-weight: 600;
4442   --f7-dialog-title-line-height: inherit;
4443   --f7-dialog-button-font-size: 17px;
4444   --f7-dialog-button-height: 44px;
4445   --f7-dialog-button-letter-spacing: 0;
4446   --f7-dialog-button-text-align: center;
4447   --f7-dialog-button-font-weight: 400;
4448   --f7-dialog-button-text-transform: none;
4449   --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
4450   --f7-dialog-input-font-size: 14px;
4451   --f7-dialog-input-height: 32px;
4452   --f7-dialog-input-bg-color: #fff;
4453   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
4454   --f7-dialog-input-border-width: 1px;
4455   --f7-dialog-input-placeholder-color: #a9a9a9;
4456   --f7-dialog-preloader-size: 34px;
4457 }
4458 .md {
4459   --f7-dialog-bg-color: #fff;
4460   --f7-dialog-box-shadow: var(--f7-elevation-24);
4461   --f7-dialog-width: 280px;
4462   --f7-dialog-border-radius: 4px;
4463   --f7-dialog-text-color: #757575;
4464   --f7-dialog-text-align: left;
4465   --f7-dialog-font-size: 16px;
4466   --f7-dialog-title-text-color: #212121;
4467   --f7-dialog-title-font-size: 20px;
4468   --f7-dialog-title-font-weight: 500;
4469   --f7-dialog-title-line-height: 1.3;
4470   --f7-dialog-button-font-size: 14px;
4471   --f7-dialog-button-height: 36px;
4472   --f7-dialog-button-letter-spacing: 0.03em;
4473   --f7-dialog-button-text-align: center;
4474   --f7-dialog-button-font-weight: 500;
4475   --f7-dialog-button-text-transform: uppercase;
4476   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4477   --f7-dialog-input-font-size: 16px;
4478   --f7-dialog-input-height: 36px;
4479   --f7-dialog-input-bg-color: #fff;
4480   --f7-dialog-input-border-color: transparent;
4481   --f7-dialog-input-border-width: 0px;
4482   --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
4483   --f7-dialog-preloader-size: 32px;
4484 }
4485 .dialog {
4486   position: absolute;
4487   z-index: 13500;
4488   left: 50%;
4489   margin-top: 0;
4490   top: 50%;
4491   overflow: hidden;
4492   opacity: 0;
4493   transform: translate3d(0, -50%, 0) scale(1.185);
4494   transition-property: transform, opacity;
4495   display: none;
4496   transition-duration: 400ms;
4497   box-shadow: var(--f7-dialog-box-shadow);
4498   width: var(--f7-dialog-width);
4499   margin-left: calc(-1 * var(--f7-dialog-width) / 2);
4500   border-radius: var(--f7-dialog-border-radius);
4501   text-align: var(--f7-dialog-text-align);
4502   color: var(--f7-dialog-text-color);
4503   font-size: var(--f7-dialog-font-size);
4504   will-change: transform, opacity;
4505 }
4506 .dialog.modal-in {
4507   opacity: 1;
4508   transform: translate3d(0, -50%, 0) scale(1);
4509 }
4510 .dialog.modal-out {
4511   opacity: 0;
4512   z-index: 13499;
4513 }
4514 .dialog.not-animated {
4515   transition-duration: 0ms;
4516 }
4517 .dialog-inner {
4518   position: relative;
4519 }
4520 .dialog-title {
4521   color: var(--f7-dialog-title-text-color);
4522   font-size: var(--f7-dialog-title-font-size);
4523   font-weight: var(--f7-dialog-title-font-weight);
4524   line-height: var(--f7-dialog-title-line-height);
4525 }
4526 .dialog-buttons {
4527   position: relative;
4528   display: flex;
4529 }
4530 .dialog-buttons-vertical .dialog-buttons {
4531   display: block;
4532   height: auto !important;
4533 }
4534 .dialog-button {
4535   box-sizing: border-box;
4536   overflow: hidden;
4537   position: relative;
4538   white-space: nowrap;
4539   text-overflow: ellipsis;
4540   color: var(--f7-dialog-button-text-color);
4541   font-size: var(--f7-dialog-button-font-size);
4542   height: var(--f7-dialog-button-height);
4543   line-height: var(--f7-dialog-button-height);
4544   letter-spacing: var(--f7-dialog-button-letter-spacing);
4545   text-align: var(--f7-dialog-button-text-align);
4546   font-weight: var(--f7-dialog-button-font-weight);
4547   text-transform: var(--f7-dialog-button-text-transform);
4548   display: block;
4549   cursor: pointer;
4550 }
4551 .dialog-button[class*="color-"] {
4552   --f7-dialog-button-text-color: var(--f7-theme-color);
4553 }
4554 .dialog-no-buttons .dialog-buttons {
4555   display: none;
4556 }
4557 .dialog-input-field {
4558   position: relative;
4559 }
4560 input.dialog-input[type] {
4561   box-sizing: border-box;
4562   margin: 0;
4563   margin-top: 15px;
4564   border-radius: 0;
4565   -webkit-appearance: none;
4566      -moz-appearance: none;
4567           appearance: none;
4568   width: 100%;
4569   display: block;
4570   font-family: inherit;
4571   box-shadow: none;
4572   font-size: var(--f7-dialog-input-font-size);
4573   height: var(--f7-dialog-input-height);
4574   background-color: var(--f7-dialog-input-bg-color);
4575   border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
4576 }
4577 input.dialog-input[type]::-webkit-input-placeholder {
4578   color: var(--f7-dialog-input-placeholder-color);
4579 }
4580 input.dialog-input[type]::-moz-placeholder {
4581   color: var(--f7-dialog-input-placeholder-color);
4582 }
4583 input.dialog-input[type]::-ms-input-placeholder {
4584   color: var(--f7-dialog-input-placeholder-color);
4585 }
4586 input.dialog-input[type]::placeholder {
4587   color: var(--f7-dialog-input-placeholder-color);
4588 }
4589 .dialog-preloader .preloader {
4590   --f7-preloader-size: var(--f7-dialog-preloader-size);
4591 }
4592 html.with-modal-dialog .page-content {
4593   overflow: hidden;
4594   -webkit-overflow-scrolling: auto;
4595 }
4596 .ios .dialog.modal-out {
4597   transform: translate3d(0, -50%, 0) scale(1);
4598 }
4599 .ios .dialog-inner {
4600   padding: 15px;
4601   border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
4602   background: var(--f7-dialog-bg-color);
4603 }
4604 .ios .dialog-inner:after {
4605   content: '';
4606   position: absolute;
4607   background-color: rgba(0, 0, 0, 0.2);
4608   display: block;
4609   z-index: 15;
4610   top: auto;
4611   right: auto;
4612   bottom: 0;
4613   left: 0;
4614   height: 1px;
4615   width: 100%;
4616   transform-origin: 50% 100%;
4617   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4618 }
4619 .ios .dialog-title + .dialog-text {
4620   margin-top: 5px;
4621 }
4622 .ios .dialog-buttons {
4623   height: 44px;
4624   justify-content: center;
4625 }
4626 .ios .dialog-button {
4627   width: 100%;
4628   padding: 0 5px;
4629   -webkit-box-flex: 1;
4630   -ms-flex: 1;
4631   background: var(--f7-dialog-bg-color);
4632 }
4633 .ios .dialog-button:after {
4634   content: '';
4635   position: absolute;
4636   background-color: rgba(0, 0, 0, 0.2);
4637   display: block;
4638   z-index: 15;
4639   top: 0;
4640   right: 0;
4641   bottom: auto;
4642   left: auto;
4643   width: 1px;
4644   height: 100%;
4645   transform-origin: 100% 50%;
4646   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
4647 }
4648 .ios .dialog-button.active-state {
4649   background-color: var(--f7-dialog-button-pressed-bg-color);
4650 }
4651 .ios .dialog-button:first-child {
4652   border-radius: 0 0 0 var(--f7-dialog-border-radius);
4653 }
4654 .ios .dialog-button:last-child {
4655   border-radius: 0 0 var(--f7-dialog-border-radius) 0;
4656 }
4657 .ios .dialog-button:last-child:after {
4658   display: none !important;
4659 }
4660 .ios .dialog-button:first-child:last-child {
4661   border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
4662 }
4663 .ios .dialog-button.dialog-button-bold {
4664   font-weight: 500;
4665 }
4666 .ios .dialog-buttons-vertical .dialog-buttons {
4667   height: auto;
4668 }
4669 .ios .dialog-buttons-vertical .dialog-button {
4670   border-radius: 0;
4671 }
4672 .ios .dialog-buttons-vertical .dialog-button:after {
4673   content: '';
4674   position: absolute;
4675   background-color: rgba(0, 0, 0, 0.2);
4676   display: block;
4677   z-index: 15;
4678   top: auto;
4679   right: auto;
4680   bottom: 0;
4681   left: 0;
4682   height: 1px;
4683   width: 100%;
4684   transform-origin: 50% 100%;
4685   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4686 }
4687 .ios .dialog-buttons-vertical .dialog-button:last-child {
4688   border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
4689 }
4690 .ios .dialog-buttons-vertical .dialog-button:last-child:after {
4691   display: none !important;
4692 }
4693 .ios .dialog-no-buttons .dialog-inner {
4694   border-radius: var(--f7-dialog-border-radius);
4695 }
4696 .ios .dialog-no-buttons .dialog-inner:after {
4697   display: none !important;
4698 }
4699 .ios .dialog-input-field {
4700   margin-top: 15px;
4701 }
4702 .ios .dialog-input {
4703   padding: 0 5px;
4704 }
4705 .ios .dialog-input + .dialog-input {
4706   margin-top: 5px;
4707 }
4708 .ios .dialog-input-double + .dialog-input-double {
4709   margin-top: 0;
4710 }
4711 .ios .dialog-input-double + .dialog-input-double .dialog-input {
4712   border-top: 0;
4713   margin-top: 0;
4714 }
4715 .ios .dialog-preloader .dialog-title ~ .preloader,
4716 .ios .dialog-preloader .dialog-text ~ .preloader {
4717   margin-top: 15px;
4718 }
4719 .ios .dialog-progress .dialog-title ~ .progressbar,
4720 .ios .dialog-progress .dialog-text ~ .progressbar,
4721 .ios .dialog-progress .dialog-title ~ .progressbar-infinite,
4722 .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
4723   margin-top: 15px;
4724 }
4725 .md .dialog {
4726   background: var(--f7-dialog-bg-color);
4727 }
4728 .md .dialog.modal-out {
4729   transform: translate3d(0, -50%, 0) scale(0.815);
4730 }
4731 .md .dialog-inner {
4732   padding: 24px 24px 20px;
4733 }
4734 .md .dialog-title + .dialog-text {
4735   margin-top: 20px;
4736 }
4737 .md .dialog-text {
4738   line-height: 1.5;
4739 }
4740 .md .dialog-buttons {
4741   height: 48px;
4742   padding: 6px 8px;
4743   overflow: hidden;
4744   box-sizing: border-box;
4745   justify-content: flex-end;
4746 }
4747 .md .dialog-button {
4748   border-radius: 4px;
4749   min-width: 64px;
4750   padding: 0 8px;
4751   border: none;
4752   transition-duration: 300ms;
4753   transform: translate3d(0, 0, 0);
4754 }
4755 .md .dialog-button.active-state {
4756   background-color: var(--f7-dialog-button-pressed-bg-color);
4757 }
4758 .md .dialog-button.dialog-button-bold {
4759   font-weight: 700;
4760 }
4761 .md .dialog-button + .dialog-button {
4762   margin-left: 4px;
4763 }
4764 .md .dialog-buttons-vertical .dialog-buttons {
4765   padding: 0 0 8px 0;
4766 }
4767 .md .dialog-buttons-vertical .dialog-button {
4768   margin-left: 0;
4769   text-align: right;
4770   height: 48px;
4771   line-height: 48px;
4772   border-radius: 0;
4773   padding-left: 16px;
4774   padding-right: 16px;
4775 }
4776 .md .dialog-input {
4777   padding: 0;
4778   transition-duration: 200ms;
4779   position: relative;
4780 }
4781 .md .dialog-input + .dialog-input {
4782   margin-top: 16px;
4783 }
4784 .md .dialog-preloader .dialog-title,
4785 .md .dialog-progress .dialog-title,
4786 .md .dialog-preloader .dialog-inner,
4787 .md .dialog-progress .dialog-inner {
4788   text-align: center;
4789 }
4790 .md .dialog-preloader .dialog-title ~ .preloader,
4791 .md .dialog-preloader .dialog-text ~ .preloader {
4792   margin-top: 20px;
4793 }
4794 .md .dialog-progress .dialog-title ~ .progressbar,
4795 .md .dialog-progress .dialog-text ~ .progressbar,
4796 .md .dialog-progress .dialog-title ~ .progressbar-infinite,
4797 .md .dialog-progress .dialog-text ~ .progressbar-infinite {
4798   margin-top: 16px;
4799 }
4800 /* === Popup === */
4801 :root {
4802   --f7-popup-border-radius: 0px;
4803   --f7-popup-tablet-width: 630px;
4804   --f7-popup-tablet-height: 630px;
4805   /*
4806   --f7-popup-tablet-border-radius: 0px;
4807   */
4808 }
4809 .ios {
4810   --f7-popup-box-shadow: none;
4811 }
4812 .md {
4813   --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
4814 }
4815 .popup-backdrop {
4816   z-index: 10500;
4817 }
4818 .popup {
4819   position: absolute;
4820   left: 0;
4821   top: var(--f7-statusbar-height);
4822   width: 100%;
4823   height: calc(100% - var(--f7-statusbar-height));
4824   display: none;
4825   box-sizing: border-box;
4826   transition-property: transform;
4827   transform: translate3d(0, 100%, 0);
4828   background: #fff;
4829   z-index: 11000;
4830   will-change: transform;
4831   overflow: hidden;
4832   border-radius: var(--f7-popup-border-radius);
4833 }
4834 .popup.modal-in,
4835 .popup.modal-out {
4836   transition-duration: 400ms;
4837 }
4838 .popup.not-animated {
4839   transition-duration: 0ms;
4840 }
4841 .popup.modal-in {
4842   display: block;
4843   transform: translate3d(0, 0, 0);
4844 }
4845 .popup.modal-out {
4846   transform: translate3d(0, 100%, 0);
4847 }
4848 @media (min-width: 630px) and (min-height: 630px) {
4849   .popup:not(.popup-tablet-fullscreen) {
4850     width: var(--f7-popup-tablet-width);
4851     height: var(--f7-popup-tablet-height);
4852     left: 50%;
4853     top: 50%;
4854     margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
4855     margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
4856     transform: translate3d(0, 100vh, 0);
4857     box-shadow: var(--f7-popup-box-shadow);
4858     border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
4859   }
4860   .popup:not(.popup-tablet-fullscreen).modal-in {
4861     transform: translate3d(0, 0, 0);
4862   }
4863   .popup:not(.popup-tablet-fullscreen).modal-out {
4864     transform: translate3d(0, 100vh, 0);
4865   }
4866 }
4867 @media (max-width: 629px), (max-height: 629px) {
4868   .popup-backdrop {
4869     z-index: 9500;
4870   }
4871 }
4872 html.with-modal-popup .framework7-root > .views .page-content,
4873 html.with-modal-popup .framework7-root > .view .page-content,
4874 html.with-modal-popup .framework7-root > .panel .page-content {
4875   overflow: hidden;
4876   -webkit-overflow-scrolling: auto;
4877 }
4878 /* === Login Screen === */
4879 :root {
4880   --f7-login-screen-bg-color: #fff;
4881   --f7-login-screen-content-bg-color: #fff;
4882   --f7-login-screen-blocks-max-width: 480px;
4883   /*
4884    --f7-login-screen-list-button-text-color: var(--f7-theme-color);
4885    */
4886   --f7-login-screen-title-text-align: center;
4887   --f7-login-screen-title-text-color: inherit;
4888   --f7-login-screen-title-letter-spacing: 0;
4889 }
4890 :root .theme-dark,
4891 :root.theme-dark {
4892   --f7-login-screen-bg-color: #171717;
4893   --f7-login-screen-content-bg-color: transparent;
4894 }
4895 .ios {
4896   --f7-login-screen-blocks-margin-vertical: 25px;
4897   --f7-login-screen-title-font-size: 30px;
4898   --f7-login-screen-title-font-weight: normal;
4899 }
4900 .md {
4901   --f7-login-screen-blocks-margin-vertical: 24px;
4902   --f7-login-screen-title-font-size: 34px;
4903   --f7-login-screen-title-font-weight: normal;
4904 }
4905 .login-screen {
4906   position: absolute;
4907   left: 0;
4908   top: var(--f7-statusbar-height);
4909   width: 100%;
4910   height: calc(100% - var(--f7-statusbar-height));
4911   display: none;
4912   box-sizing: border-box;
4913   transition-property: transform;
4914   transform: translate3d(0, 100%, 0);
4915   background: var(--f7-login-screen-bg-color);
4916   z-index: 11000;
4917   will-change: transform;
4918 }
4919 .login-screen.modal-in,
4920 .login-screen.modal-out {
4921   transition-duration: 400ms;
4922 }
4923 .login-screen.not-animated {
4924   transition-duration: 0ms;
4925 }
4926 .login-screen.modal-in {
4927   display: block;
4928   transform: translate3d(0, 0, 0);
4929 }
4930 .login-screen.modal-out {
4931   transform: translate3d(0, 100%, 0);
4932 }
4933 .login-screen-content {
4934   background: var(--f7-login-screen-content-bg-color);
4935 }
4936 .login-screen-content .list-button {
4937   text-align: center;
4938   color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
4939 }
4940 .login-screen-content .login-screen-title,
4941 .login-screen-content .list,
4942 .login-screen-content .block {
4943   margin: var(--f7-login-screen-blocks-margin-vertical) auto;
4944 }
4945 .login-screen-content .login-screen-title,
4946 .login-screen-content .list,
4947 .login-screen-content .block,
4948 .login-screen-content .block-footer,
4949 .login-screen-content .block-header {
4950   max-width: var(--f7-login-screen-blocks-max-width);
4951 }
4952 .login-screen-content .list ul {
4953   background: none;
4954 }
4955 .login-screen-content .list ul:before {
4956   display: none !important;
4957 }
4958 .login-screen-content .list ul:after {
4959   display: none !important;
4960 }
4961 .login-screen-content .block-footer,
4962 .login-screen-content .block-header {
4963   text-align: center;
4964   margin-left: auto;
4965   margin-right: auto;
4966 }
4967 .login-screen-title {
4968   text-align: var(--f7-login-screen-title-text-align);
4969   font-size: var(--f7-login-screen-title-font-size);
4970   font-weight: var(--f7-login-screen-title-font-weight);
4971   color: var(--f7-login-screen-title-text-color);
4972   letter-spacing: var(--f7-login-screen-title-letter-spacing);
4973 }
4974 .theme-dark .login-screen-content .list ul,
4975 .theme-dark .login-screen-content .block-strong {
4976   background-color: transparent;
4977 }
4978 /* === Popover === */
4979 :root {
4980   --f7-popover-width: 260px;
4981 }
4982 .ios {
4983   --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
4984   --f7-popover-border-radius: 13px;
4985   --f7-popover-box-shadow: none;
4986   --f7-popover-actions-icon-size: 28px;
4987   --f7-popover-actions-label-text-color: #8a8a8a;
4988 }
4989 .ios .theme-dark,
4990 .ios.theme-dark {
4991   --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
4992 }
4993 .md {
4994   --f7-popover-bg-color: #fff;
4995   --f7-popover-border-radius: 4px;
4996   --f7-popover-box-shadow: var(--f7-elevation-8);
4997   --f7-popover-actions-icon-size: 24px;
4998   --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
4999 }
5000 .md .theme-dark,
5001 .md.theme-dark {
5002   --f7-popover-bg-color: #202020;
5003   --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
5004 }
5005 .popover {
5006   width: var(--f7-popover-width);
5007   z-index: 13500;
5008   margin: 0;
5009   top: 0;
5010   opacity: 0;
5011   left: 0;
5012   position: absolute;
5013   display: none;
5014   transition-duration: 300ms;
5015   background-color: var(--f7-popover-bg-color);
5016   border-radius: var(--f7-popover-border-radius);
5017   box-shadow: var(--f7-popover-box-shadow);
5018   will-change: transform, opacity;
5019 }
5020 .popover .list {
5021   margin: 0;
5022 }
5023 .popover .list ul {
5024   background: none;
5025 }
5026 .popover .list:first-child ul:before {
5027   display: none !important;
5028 }
5029 .popover .list:last-child ul:after {
5030   display: none !important;
5031 }
5032 .popover .list:first-child ul {
5033   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5034 }
5035 .popover .list:first-child li:first-child,
5036 .popover .list:first-child li:first-child a,
5037 .popover .list:first-child li:first-child > label {
5038   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5039 }
5040 .popover .list:last-child ul {
5041   border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5042 }
5043 .popover .list:last-child li:last-child,
5044 .popover .list:last-child li:last-child a,
5045 .popover .list:last-child li:last-child > label {
5046   border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5047 }
5048 .popover .list:first-child:last-child li:first-child:last-child,
5049 .popover .list:first-child:last-child li:first-child:last-child a,
5050 .popover .list:first-child:last-child li:first-child:last-child > label,
5051 .popover .list:first-child:last-child ul {
5052   border-radius: var(--f7-popover-border-radius);
5053 }
5054 .popover .list + .list {
5055   margin-top: var(--f7-list-margin-vertical);
5056 }
5057 .popover.modal-in {
5058   opacity: 1;
5059 }
5060 .popover.not-animated {
5061   transition-duration: 0ms;
5062 }
5063 .popover-inner {
5064   will-change: scroll-position;
5065   overflow: auto;
5066   -webkit-overflow-scrolling: touch;
5067 }
5068 .popover-from-actions .item-link i.icon {
5069   width: var(--f7-popover-actions-icon-size);
5070   height: var(--f7-popover-actions-icon-size);
5071   font-size: var(--f7-popover-actions-icon-size);
5072 }
5073 .popover-from-actions-bold {
5074   font-weight: 600;
5075 }
5076 .popover-from-actions-label {
5077   line-height: 1.3;
5078   position: relative;
5079   display: flex;
5080   align-items: center;
5081   padding: var(--f7-actions-label-padding);
5082   color: var(--f7-popover-actions-label-text-color);
5083   font-size: var(--f7-actions-label-font-size);
5084   justify-content: var(--f7-actions-label-justify-content);
5085 }
5086 .popover-from-actions-label:after {
5087   content: '';
5088   position: absolute;
5089   background-color: var(--f7-list-item-border-color);
5090   display: block;
5091   z-index: 15;
5092   top: auto;
5093   right: auto;
5094   bottom: 0;
5095   left: 0;
5096   height: 1px;
5097   width: 100%;
5098   transform-origin: 50% 100%;
5099   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5100 }
5101 .popover-from-actions-label:last-child:after {
5102   display: none !important;
5103 }
5104 .ios .popover {
5105   transform: none;
5106   transition-property: opacity;
5107 }
5108 .ios .popover-angle {
5109   width: 26px;
5110   height: 26px;
5111   position: absolute;
5112   left: -26px;
5113   top: 0;
5114   z-index: 100;
5115   overflow: hidden;
5116 }
5117 .ios .popover-angle:after {
5118   content: '';
5119   background: var(--f7-popover-bg-color);
5120   width: 26px;
5121   height: 26px;
5122   position: absolute;
5123   left: 0;
5124   top: 0;
5125   border-radius: 3px;
5126   transform: rotate(45deg);
5127 }
5128 .ios .popover-angle.on-left {
5129   left: -26px;
5130 }
5131 .ios .popover-angle.on-left:after {
5132   left: 19px;
5133   top: 0;
5134 }
5135 .ios .popover-angle.on-right {
5136   left: 100%;
5137 }
5138 .ios .popover-angle.on-right:after {
5139   left: -19px;
5140   top: 0;
5141 }
5142 .ios .popover-angle.on-top {
5143   left: 0;
5144   top: -26px;
5145 }
5146 .ios .popover-angle.on-top:after {
5147   left: 0;
5148   top: 19px;
5149 }
5150 .ios .popover-angle.on-bottom {
5151   left: 0;
5152   top: 100%;
5153 }
5154 .ios .popover-angle.on-bottom:after {
5155   left: 0;
5156   top: -19px;
5157 }
5158 .md .popover {
5159   transform: scale(0.85, 0.6);
5160   transition-property: opacity, transform;
5161 }
5162 .md .popover.modal-in {
5163   opacity: 1;
5164   transform: scale(1);
5165 }
5166 .md .popover.modal-out {
5167   opacity: 0;
5168   transform: scale(1);
5169 }
5170 .md .popover-on-top {
5171   transform-origin: center bottom;
5172 }
5173 .md .popover-on-bottom {
5174   transform-origin: center top;
5175 }
5176 /* === Actions === */
5177 .ios {
5178   --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
5179   --f7-actions-border-radius: 13px;
5180   --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
5181   --f7-actions-button-text-color: var(--f7-theme-color);
5182   --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
5183   --f7-actions-button-padding: 0px;
5184   --f7-actions-button-text-align: center;
5185   --f7-actions-button-height: 57px;
5186   --f7-actions-button-height-landscape: 44px;
5187   --f7-actions-button-font-size: 20px;
5188   --f7-actions-button-icon-size: 28px;
5189   --f7-actions-button-justify-content: center;
5190   --f7-actions-label-padding: 8px 10px;
5191   --f7-actions-label-text-color: #8a8a8a;
5192   --f7-actions-label-font-size: 13px;
5193   --f7-actions-label-justify-content: center;
5194   --f7-actions-group-border-color: transparent;
5195   --f7-actions-group-margin: 8px;
5196   --f7-actions-grid-button-text-color: #757575;
5197   --f7-actions-grid-button-icon-size: 48px;
5198   --f7-actions-grid-button-font-size: 12px;
5199 }
5200 .md {
5201   --f7-actions-bg-color: #fff;
5202   --f7-actions-border-radius: 0px;
5203   --f7-actions-button-border-color: transparent;
5204   --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
5205   --f7-actions-button-pressed-bg-color: #e5e5e5;
5206   --f7-actions-button-padding: 0 16px;
5207   --f7-actions-button-text-align: left;
5208   --f7-actions-button-height: 48px;
5209   --f7-actions-button-height-landscape: 48px;
5210   --f7-actions-button-font-size: 16px;
5211   --f7-actions-button-icon-size: 24px;
5212   --f7-actions-button-justify-content: space-between;
5213   --f7-actions-label-padding: 12px 16px;
5214   --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
5215   --f7-actions-label-font-size: 16px;
5216   --f7-actions-label-justify-content: flex-start;
5217   --f7-actions-group-border-color: #d2d2d6;
5218   --f7-actions-group-margin: 0px;
5219   --f7-actions-grid-button-text-color: #757575;
5220   --f7-actions-grid-button-icon-size: 48px;
5221   --f7-actions-grid-button-font-size: 12px;
5222 }
5223 .actions-modal {
5224   position: absolute;
5225   left: 0;
5226   bottom: 0;
5227   z-index: 13500;
5228   width: 100%;
5229   transform: translate3d(0, 100%, 0);
5230   display: none;
5231   max-height: 100%;
5232   will-change: scroll-position;
5233   overflow: auto;
5234   -webkit-overflow-scrolling: touch;
5235   transition-property: transform;
5236   will-change: transform;
5237 }
5238 .actions-modal.modal-in,
5239 .actions-modal.modal-out {
5240   transition-duration: 300ms;
5241 }
5242 .actions-modal.not-animated {
5243   transition-duration: 0ms;
5244 }
5245 .actions-modal.modal-in {
5246   transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
5247 }
5248 .actions-modal.modal-out {
5249   z-index: 13499;
5250   transform: translate3d(0, 100%, 0);
5251 }
5252 @media (min-width: 496px) {
5253   .actions-modal {
5254     width: 480px;
5255     left: 50%;
5256     margin-left: -240px;
5257   }
5258 }
5259 @media (orientation: landscape) {
5260   .actions-modal {
5261     --f7-actions-button-height: var(--f7-actions-button-height-landscape);
5262   }
5263 }
5264 .actions-group {
5265   overflow: hidden;
5266   position: relative;
5267   margin: var(--f7-actions-group-margin);
5268   border-radius: var(--f7-actions-border-radius);
5269   transform: translate3d(0, 0, 0);
5270 }
5271 .actions-group:after {
5272   content: '';
5273   position: absolute;
5274   background-color: var(--f7-actions-group-border-color);
5275   display: block;
5276   z-index: 15;
5277   top: auto;
5278   right: auto;
5279   bottom: 0;
5280   left: 0;
5281   height: 1px;
5282   width: 100%;
5283   transform-origin: 50% 100%;
5284   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5285 }
5286 .actions-group:last-child:after {
5287   display: none !important;
5288 }
5289 .actions-button,
5290 .actions-label {
5291   width: 100%;
5292   font-weight: normal;
5293   margin: 0;
5294   box-sizing: border-box;
5295   display: block;
5296   position: relative;
5297   overflow: hidden;
5298   text-align: var(--f7-actions-button-text-align);
5299   background: var(--f7-actions-bg-color);
5300 }
5301 .actions-button:after,
5302 .actions-label:after {
5303   content: '';
5304   position: absolute;
5305   background-color: var(--f7-actions-button-border-color);
5306   display: block;
5307   z-index: 15;
5308   top: auto;
5309   right: auto;
5310   bottom: 0;
5311   left: 0;
5312   height: 1px;
5313   width: 100%;
5314   transform-origin: 50% 100%;
5315   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5316 }
5317 .actions-button:first-child,
5318 .actions-label:first-child {
5319   border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
5320 }
5321 .actions-button:last-child,
5322 .actions-label:last-child {
5323   border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
5324 }
5325 .actions-button:last-child:after,
5326 .actions-label:last-child:after {
5327   display: none !important;
5328 }
5329 .actions-button:first-child:last-child,
5330 .actions-label:first-child:last-child {
5331   border-radius: var(--f7-actions-border-radius);
5332 }
5333 .actions-button a,
5334 .actions-label a {
5335   text-decoration: none;
5336   color: inherit;
5337   display: block;
5338 }
5339 .actions-button b,
5340 .actions-label b,
5341 .actions-button.actions-button-bold,
5342 .actions-label.actions-button-bold {
5343   font-weight: 600;
5344 }
5345 .actions-button {
5346   cursor: pointer;
5347   display: flex;
5348   color: var(--f7-actions-button-text-color);
5349   font-size: var(--f7-actions-button-font-size);
5350   height: var(--f7-actions-button-height);
5351   line-height: var(--f7-actions-button-height);
5352   padding: var(--f7-actions-button-padding);
5353   justify-content: var(--f7-actions-button-justify-content);
5354   z-index: 10;
5355 }
5356 .actions-button.active-state {
5357   background-color: var(--f7-actions-button-pressed-bg-color) !important;
5358 }
5359 .actions-button[class*="color-"] {
5360   color: var(--f7-theme-color);
5361 }
5362 .actions-button-media {
5363   flex-shrink: 0;
5364   display: flex;
5365   align-items: center;
5366 }
5367 .actions-button-media i.icon {
5368   width: var(--f7-actions-button-icon-size);
5369   height: var(--f7-actions-button-icon-size);
5370   font-size: var(--f7-actions-button-icon-size);
5371 }
5372 .actions-button a,
5373 .actions-button-text {
5374   position: relative;
5375   overflow: hidden;
5376   white-space: nowrap;
5377   text-overflow: ellipsis;
5378 }
5379 .actions-button-text {
5380   width: 100%;
5381   flex-shrink: 1;
5382   text-align: var(--f7-actions-button-text-align);
5383 }
5384 .actions-label {
5385   line-height: 1.3;
5386   display: flex;
5387   align-items: center;
5388   font-size: var(--f7-actions-label-font-size);
5389   color: var(--f7-actions-label-text-color);
5390   padding: var(--f7-actions-label-padding);
5391   justify-content: var(--f7-actions-label-justify-content);
5392   min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
5393 }
5394 .actions-label[class*=" color-"] {
5395   --f7-actions-label-text-color: var(--f7-theme-color);
5396 }
5397 .actions-grid .actions-group {
5398   display: flex;
5399   flex-wrap: wrap;
5400   justify-content: flex-start;
5401   border-radius: 0;
5402   background: var(--f7-actions-bg-color);
5403   margin-top: 0;
5404 }
5405 .actions-grid .actions-group:first-child {
5406   border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
5407 }
5408 .actions-grid .actions-group:last-child {
5409   border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
5410 }
5411 .actions-grid .actions-group:first-child:last-child {
5412   border-radius: var(--f7-actions-border-radius);
5413 }
5414 .actions-grid .actions-group:not(:last-child) {
5415   margin-bottom: 0;
5416 }
5417 .actions-grid .actions-button,
5418 .actions-grid .actions-label {
5419   border-radius: 0 !important;
5420   background: none;
5421 }
5422 .actions-grid .actions-button {
5423   width: 33.33333333%;
5424   display: block;
5425   color: var(--f7-actions-grid-button-text-color);
5426   height: auto;
5427   line-height: 1;
5428   padding: 16px;
5429 }
5430 .actions-grid .actions-button:after {
5431   display: none !important;
5432 }
5433 .actions-grid .actions-button-media {
5434   margin-left: auto !important;
5435   margin-right: auto !important;
5436   width: var(--f7-actions-grid-button-icon-size);
5437   height: var(--f7-actions-grid-button-icon-size);
5438 }
5439 .actions-grid .actions-button-media i.icon {
5440   width: var(--f7-actions-grid-button-icon-size);
5441   height: var(--f7-actions-grid-button-icon-size);
5442   font-size: var(--f7-actions-grid-button-icon-size);
5443 }
5444 .actions-grid .actions-button-text {
5445   margin-left: 0 !important;
5446   text-align: center !important;
5447   margin-top: 8px;
5448   line-height: 1.33em;
5449   height: 1.33em;
5450   font-size: var(--f7-actions-grid-button-font-size);
5451 }
5452 .ios .actions-button-media {
5453   margin-left: 15px;
5454 }
5455 .ios .actions-button-media + .actions-button-text {
5456   text-align: left;
5457   margin-left: 15px;
5458 }
5459 .md .actions-button {
5460   transition-duration: 300ms;
5461 }
5462 .md .actions-button-media {
5463   min-width: 40px;
5464 }
5465 .md .actions-button-media + .actions-button-text {
5466   margin-left: 16px;
5467 }
5468 /* === Sheet Modal === */
5469 :root {
5470   --f7-sheet-height: 260px;
5471 }
5472 .ios {
5473   --f7-sheet-bg-color: #cfd5da;
5474   --f7-sheet-border-color: #929499;
5475 }
5476 .ios .theme-dark,
5477 .ios.theme-dark {
5478   --f7-sheet-bg-color: #171717;
5479   --f7-sheet-border-color: var(--f7-bars-border-color);
5480 }
5481 .md {
5482   --f7-sheet-bg-color: #fff;
5483   --f7-sheet-border-color: transparent;
5484 }
5485 .md .theme-dark,
5486 .md.theme-dark {
5487   --f7-sheet-bg-color: #202020;
5488   --f7-sheet-border-color: transparent;
5489 }
5490 .sheet-backdrop {
5491   z-index: 11000;
5492 }
5493 .sheet-modal {
5494   position: absolute;
5495   left: 0;
5496   bottom: 0;
5497   width: 100%;
5498   height: var(--f7-sheet-height);
5499   display: none;
5500   box-sizing: border-box;
5501   transition-property: transform;
5502   transform: translate3d(0, 100%, 0);
5503   background: var(--f7-sheet-bg-color);
5504   z-index: 12500;
5505   will-change: transform;
5506 }
5507 .sheet-modal:before {
5508   content: '';
5509   position: absolute;
5510   background-color: var(--f7-sheet-border-color);
5511   display: block;
5512   z-index: 15;
5513   top: 0;
5514   right: auto;
5515   bottom: auto;
5516   left: 0;
5517   height: 1px;
5518   width: 100%;
5519   transform-origin: 50% 0%;
5520   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5521 }
5522 .sheet-modal:before {
5523   z-index: 600;
5524   -webkit-backface-visibility: hidden;
5525           backface-visibility: hidden;
5526   transform-style: preserve-3d;
5527 }
5528 .sheet-modal.modal-in,
5529 .sheet-modal.modal-out {
5530   transition-duration: 300ms;
5531 }
5532 .sheet-modal.not-animated {
5533   transition-duration: 0ms;
5534 }
5535 .sheet-modal.modal-in {
5536   display: block;
5537   transform: translate3d(0, 0, 0);
5538 }
5539 .sheet-modal.modal-out {
5540   transform: translate3d(0, 100%, 0);
5541 }
5542 .sheet-modal .sheet-modal-inner {
5543   height: 100%;
5544   position: relative;
5545   overflow: hidden;
5546 }
5547 .sheet-modal .toolbar {
5548   position: relative;
5549   width: 100%;
5550 }
5551 .sheet-modal .toolbar:after,
5552 .sheet-modal .toolbar:before {
5553   display: none;
5554 }
5555 .sheet-modal .toolbar ~ * .page-content {
5556   padding-top: 0;
5557   padding-bottom: 0;
5558 }
5559 .sheet-modal .toolbar + .sheet-modal-inner {
5560   height: calc(100% - var(--f7-toolbar-height));
5561 }
5562 .sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
5563   padding-bottom: 0;
5564   padding-top: 0;
5565 }
5566 .sheet-modal .toolbar ~ .sheet-modal-inner .page-content,
5567 .sheet-modal .sheet-modal-inner > .page-content {
5568   padding-bottom: var(--f7-safe-area-bottom);
5569 }
5570 .md .sheet-modal .toolbar a.link:not(.tab-link) {
5571   flex-shrink: 0;
5572 }
5573 /* === Toast === */
5574 .ios {
5575   --f7-toast-text-color: #fff;
5576   --f7-toast-font-size: 14px;
5577   --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
5578   --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
5579   --f7-toast-padding-horizontal: 15px;
5580   --f7-toast-padding-vertical: 12px;
5581   --f7-toast-border-radius: 8px;
5582   --f7-toast-button-min-width: 64px;
5583   --f7-toast-icon-size: 48px;
5584 }
5585 .md {
5586   --f7-toast-text-color: #fff;
5587   --f7-toast-font-size: 14px;
5588   --f7-toast-bg-color: #323232;
5589   --f7-toast-padding-horizontal: 24px;
5590   --f7-toast-padding-vertical: 14px;
5591   --f7-toast-border-radius: 4px;
5592   --f7-toast-button-min-width: 64px;
5593   --f7-toast-icon-size: 48px;
5594 }
5595 .toast {
5596   transition-property: transform, opacity;
5597   position: absolute;
5598   max-width: 568px;
5599   z-index: 20000;
5600   color: var(--f7-toast-text-color);
5601   font-size: var(--f7-toast-font-size);
5602   box-sizing: border-box;
5603   background-color: var(--f7-toast-bg-color);
5604   opacity: 0;
5605   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5606 }
5607 .toast.modal-in {
5608   opacity: 1;
5609 }
5610 .toast .toast-content {
5611   display: flex;
5612   justify-content: space-between;
5613   align-items: center;
5614   box-sizing: border-box;
5615   padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
5616 }
5617 .toast .toast-text {
5618   line-height: 20px;
5619   flex-shrink: 1;
5620   min-width: 0;
5621 }
5622 .toast .toast-button {
5623   flex-shrink: 0;
5624   min-width: var(--f7-toast-button-min-width);
5625   margin-top: -8px;
5626   margin-bottom: -8px;
5627 }
5628 .toast.toast-with-icon .toast-content {
5629   display: block;
5630   text-align: center;
5631 }
5632 .toast.toast-with-icon .toast-text {
5633   text-align: center;
5634 }
5635 .toast.toast-with-icon .toast-icon .f7-icons,
5636 .toast.toast-with-icon .toast-icon .material-icons {
5637   font-size: var(--f7-toast-icon-size);
5638   width: var(--f7-toast-icon-size);
5639   height: var(--f7-toast-icon-size);
5640 }
5641 .toast.toast-center {
5642   top: 50%;
5643 }
5644 .toast.toast-top {
5645   margin-top: var(--f7-statusbar-height);
5646 }
5647 .ios .toast {
5648   transition-duration: 300ms;
5649   width: 100%;
5650   left: 0;
5651 }
5652 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
5653   .ios .toast {
5654     background: var(--f7-toast-translucent-bg-color-ios);
5655     -webkit-backdrop-filter: blur(10px);
5656             backdrop-filter: blur(10px);
5657   }
5658 }
5659 .ios .toast.toast-top {
5660   top: 0;
5661   transform: translate3d(0, -100%, 0);
5662 }
5663 .ios .toast.toast-top.modal-in {
5664   transform: translate3d(0, 0%, 0);
5665 }
5666 .ios .toast.toast-center {
5667   width: auto;
5668   left: 50%;
5669   border-radius: var(--f7-toast-border-radius);
5670   transform: translate3d(-50%, -50%, 0);
5671 }
5672 .ios .toast.toast-center.modal-in {
5673   transform: translate3d(-50%, -50%, 0);
5674 }
5675 .ios .toast.toast-bottom {
5676   bottom: 0;
5677   transform: translate3d(0, 100%, 0);
5678 }
5679 .ios .toast.toast-bottom.modal-in {
5680   transform: translate3d(0, 0%, 0);
5681 }
5682 @media (max-width: 568px) {
5683   .ios .toast.toast-bottom .toast-content {
5684     padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
5685   }
5686 }
5687 @media (min-width: 569px) {
5688   .ios .toast {
5689     left: 50%;
5690     margin-left: -284px;
5691     border-radius: var(--f7-toast-border-radius);
5692   }
5693   .ios .toast.toast-top {
5694     top: 15px;
5695   }
5696   .ios .toast.toast-center {
5697     margin-left: 0;
5698   }
5699   .ios .toast.toast-bottom {
5700     margin-bottom: calc(15px + var(--f7-safe-area-bottom));
5701   }
5702 }
5703 @media (min-width: 1024px) {
5704   .ios .toast {
5705     margin-left: 0;
5706     width: auto;
5707   }
5708   .ios .toast.toast-bottom,
5709   .ios .toast.toast-top {
5710     left: 15px;
5711   }
5712 }
5713 .ios .toast-button {
5714   margin-left: 15px;
5715   margin-right: calc(-1 * var(--f7-button-padding-horizontal));
5716 }
5717 .md .toast {
5718   transition-duration: 200ms;
5719   border-radius: var(--f7-toast-border-radius);
5720   left: 8px;
5721   width: calc(100% - 16px);
5722   transform: scale(0.9);
5723 }
5724 .md .toast.modal-in {
5725   transform: scale(1);
5726 }
5727 .md .toast.modal-out {
5728   transform: scale(1);
5729 }
5730 .md .toast.toast-top {
5731   top: 8px;
5732 }
5733 .md .toast.toast-center {
5734   left: 50%;
5735   width: auto;
5736   transform: scale(0.9) translate3d(-55%, -55%, 0);
5737 }
5738 .md .toast.toast-center.modal-in {
5739   transform: scale(1) translate3d(-50%, -50%, 0);
5740 }
5741 .md .toast.toast-center.modal-out {
5742   transform: scale(1) translate3d(-50%, -50%, 0);
5743 }
5744 .md .toast.toast-bottom {
5745   bottom: calc(8px + var(--f7-safe-area-bottom));
5746 }
5747 @media (min-width: 584px) {
5748   .md .toast {
5749     left: 50%;
5750     margin-left: -284px;
5751   }
5752   .md .toast.toast-center {
5753     margin-left: 0;
5754   }
5755 }
5756 @media (min-width: 1024px) {
5757   .md .toast {
5758     margin-left: 0;
5759     width: auto;
5760   }
5761   .md .toast.toast-bottom,
5762   .md .toast.toast-top {
5763     left: 24px;
5764   }
5765   .md .toast.toast-bottom {
5766     bottom: calc(24px + var(--f7-safe-area-bottom));
5767   }
5768   .md .toast.toast-top {
5769     top: 24px;
5770   }
5771 }
5772 .md .toast-button {
5773   margin-left: 16px;
5774   margin-right: -8px;
5775 }
5776 /* === Preloader === */
5777 :root {
5778   --f7-preloader-modal-padding: 8px;
5779   --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
5780 }
5781 .ios {
5782   --f7-preloader-color: #6c6c6c;
5783   --f7-preloader-size: 20px;
5784   --f7-preloader-modal-preloader-size: 34px;
5785   --f7-preloader-modal-border-radius: 5px;
5786 }
5787 .md {
5788   --f7-preloader-color: #757575;
5789   --f7-preloader-size: 32px;
5790   --f7-preloader-modal-preloader-size: 32px;
5791   --f7-preloader-modal-border-radius: 4px;
5792 }
5793 .preloader {
5794   display: inline-block;
5795   vertical-align: middle;
5796   width: var(--f7-preloader-size);
5797   height: var(--f7-preloader-size);
5798   font-size: 0;
5799   position: relative;
5800 }
5801 /* === Preloader Modal === */
5802 .preloader-backdrop {
5803   visibility: visible;
5804   opacity: 0;
5805   background: none;
5806   z-index: 14000;
5807 }
5808 .preloader-modal {
5809   position: absolute;
5810   left: 50%;
5811   top: 50%;
5812   padding: var(--f7-preloader-modal-padding);
5813   background: var(--f7-preloader-modal-bg-color);
5814   z-index: 14500;
5815   transform: translateX(-50%) translateY(-50%);
5816   border-radius: var(--f7-preloader-modal-border-radius);
5817 }
5818 .preloader-modal .preloader {
5819   --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
5820   display: block !important;
5821 }
5822 html.with-modal-preloader .page-content {
5823   overflow: hidden;
5824   -webkit-overflow-scrolling: auto;
5825 }
5826 .preloader[class*="color-"] {
5827   --f7-preloader-color: var(--f7-theme-color);
5828 }
5829 .ios .preloader {
5830   animation: ios-preloader-spin 1s steps(12, end) infinite;
5831 }
5832 .ios .preloader .preloader-inner-line {
5833   display: block;
5834   width: 10%;
5835   height: 25%;
5836   border-radius: 100px;
5837   background: var(--f7-preloader-color);
5838   position: absolute;
5839   left: 50%;
5840   top: 50%;
5841   transform-origin: center 200%;
5842 }
5843 .ios .preloader .preloader-inner-line:nth-child(1) {
5844   transform: translate(-50%, -200%) rotate(0deg);
5845   opacity: 0.27;
5846 }
5847 .ios .preloader .preloader-inner-line:nth-child(2) {
5848   transform: translate(-50%, -200%) rotate(30deg);
5849   opacity: 0.32272727;
5850 }
5851 .ios .preloader .preloader-inner-line:nth-child(3) {
5852   transform: translate(-50%, -200%) rotate(60deg);
5853   opacity: 0.37545455;
5854 }
5855 .ios .preloader .preloader-inner-line:nth-child(4) {
5856   transform: translate(-50%, -200%) rotate(90deg);
5857   opacity: 0.42818182;
5858 }
5859 .ios .preloader .preloader-inner-line:nth-child(5) {
5860   transform: translate(-50%, -200%) rotate(120deg);
5861   opacity: 0.48090909;
5862 }
5863 .ios .preloader .preloader-inner-line:nth-child(6) {
5864   transform: translate(-50%, -200%) rotate(150deg);
5865   opacity: 0.53363636;
5866 }
5867 .ios .preloader .preloader-inner-line:nth-child(7) {
5868   transform: translate(-50%, -200%) rotate(180deg);
5869   opacity: 0.58636364;
5870 }
5871 .ios .preloader .preloader-inner-line:nth-child(8) {
5872   transform: translate(-50%, -200%) rotate(210deg);
5873   opacity: 0.63909091;
5874 }
5875 .ios .preloader .preloader-inner-line:nth-child(9) {
5876   transform: translate(-50%, -200%) rotate(240deg);
5877   opacity: 0.69181818;
5878 }
5879 .ios .preloader .preloader-inner-line:nth-child(10) {
5880   transform: translate(-50%, -200%) rotate(270deg);
5881   opacity: 0.74454545;
5882 }
5883 .ios .preloader .preloader-inner-line:nth-child(11) {
5884   transform: translate(-50%, -200%) rotate(300deg);
5885   opacity: 0.79727273;
5886 }
5887 .ios .preloader .preloader-inner-line:nth-child(12) {
5888   transform: translate(-50%, -200%) rotate(330deg);
5889   opacity: 0.85;
5890 }
5891 @keyframes ios-preloader-spin {
5892   100% {
5893     transform: rotate(360deg);
5894   }
5895 }
5896 .md .preloader {
5897   animation: md-preloader-outer 3300ms linear infinite;
5898 }
5899 @keyframes md-preloader-outer {
5900   0% {
5901     transform: rotate(0);
5902   }
5903   100% {
5904     transform: rotate(360deg);
5905   }
5906 }
5907 .md .preloader-inner {
5908   position: relative;
5909   display: block;
5910   width: 100%;
5911   height: 100%;
5912   animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
5913 }
5914 .md .preloader-inner .preloader-inner-gap {
5915   position: absolute;
5916   width: 2px;
5917   left: 50%;
5918   margin-left: -1px;
5919   top: 0;
5920   bottom: 0;
5921   box-sizing: border-box;
5922   border-top: 4px solid var(--f7-preloader-color);
5923 }
5924 .md .preloader-inner .preloader-inner-left,
5925 .md .preloader-inner .preloader-inner-right {
5926   position: absolute;
5927   top: 0;
5928   height: 100%;
5929   width: 50%;
5930   overflow: hidden;
5931 }
5932 .md .preloader-inner .preloader-inner-half-circle {
5933   position: absolute;
5934   top: 0;
5935   height: 100%;
5936   width: 200%;
5937   box-sizing: border-box;
5938   border: 4px solid var(--f7-preloader-color);
5939   border-bottom-color: transparent !important;
5940   border-radius: 50%;
5941   animation-iteration-count: infinite;
5942   animation-duration: 1.3125s;
5943   animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
5944 }
5945 .md .preloader-inner .preloader-inner-left {
5946   left: 0;
5947 }
5948 .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
5949   left: 0;
5950   border-right-color: transparent !important;
5951   animation-name: md-preloader-left-rotate;
5952 }
5953 .md .preloader-inner .preloader-inner-right {
5954   right: 0;
5955 }
5956 .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
5957   right: 0;
5958   border-left-color: transparent !important;
5959   animation-name: md-preloader-right-rotate;
5960 }
5961 .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
5962   animation-name: md-preloader-left-rotate-multicolor;
5963 }
5964 .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
5965   animation-name: md-preloader-right-rotate-multicolor;
5966 }
5967 @keyframes md-preloader-left-rotate {
5968   0%,
5969   100% {
5970     transform: rotate(130deg);
5971   }
5972   50% {
5973     transform: rotate(-5deg);
5974   }
5975 }
5976 @keyframes md-preloader-right-rotate {
5977   0%,
5978   100% {
5979     transform: rotate(-130deg);
5980   }
5981   50% {
5982     transform: rotate(5deg);
5983   }
5984 }
5985 @keyframes md-preloader-inner-rotate {
5986   12.5% {
5987     transform: rotate(135deg);
5988   }
5989   25% {
5990     transform: rotate(270deg);
5991   }
5992   37.5% {
5993     transform: rotate(405deg);
5994   }
5995   50% {
5996     transform: rotate(540deg);
5997   }
5998   62.5% {
5999     transform: rotate(675deg);
6000   }
6001   75% {
6002     transform: rotate(810deg);
6003   }
6004   87.5% {
6005     transform: rotate(945deg);
6006   }
6007   100% {
6008     transform: rotate(1080deg);
6009   }
6010 }
6011 @keyframes md-preloader-left-rotate-multicolor {
6012   0%,
6013   100% {
6014     border-left-color: #4285F4;
6015     transform: rotate(130deg);
6016   }
6017   75% {
6018     border-left-color: #1B9A59;
6019     border-top-color: #1B9A59;
6020   }
6021   50% {
6022     border-left-color: #F7C223;
6023     border-top-color: #F7C223;
6024     transform: rotate(-5deg);
6025   }
6026   25% {
6027     border-left-color: #DE3E35;
6028     border-top-color: #DE3E35;
6029   }
6030 }
6031 @keyframes md-preloader-right-rotate-multicolor {
6032   0%,
6033   100% {
6034     border-right-color: #4285F4;
6035     transform: rotate(-130deg);
6036   }
6037   75% {
6038     border-right-color: #1B9A59;
6039     border-top-color: #1B9A59;
6040   }
6041   50% {
6042     border-right-color: #F7C223;
6043     border-top-color: #F7C223;
6044     transform: rotate(5deg);
6045   }
6046   25% {
6047     border-top-color: #DE3E35;
6048     border-right-color: #DE3E35;
6049   }
6050 }
6051 /* === Progressbar === */
6052 .ios {
6053   /*
6054   --f7-progressbar-progress-color: var(--f7-theme-color);
6055   */
6056   --f7-progressbar-bg-color: #b6b6b6;
6057   --f7-progressbar-height: 2px;
6058   --f7-progressbar-border-radius: 2px;
6059 }
6060 .md {
6061   /*
6062   --f7-progressbar-progress-color: var(--f7-theme-color);
6063   --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
6064   */
6065   --f7-progressbar-height: 4px;
6066   --f7-progressbar-border-radius: 0px;
6067 }
6068 .progressbar,
6069 .progressbar-infinite {
6070   width: 100%;
6071   overflow: hidden;
6072   position: relative;
6073   display: block;
6074   transform-style: preserve-3d;
6075   background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
6076   transform-origin: center top;
6077   height: var(--f7-progressbar-height);
6078   border-radius: var(--f7-progressbar-border-radius);
6079 }
6080 .progressbar {
6081   vertical-align: middle;
6082 }
6083 .progressbar span {
6084   background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
6085   width: 100%;
6086   height: 100%;
6087   position: absolute;
6088   left: 0;
6089   top: 0;
6090   transform: translate3d(-100%, 0, 0);
6091   transition-duration: 150ms;
6092 }
6093 .progressbar-infinite {
6094   z-index: 15000;
6095 }
6096 .progressbar-infinite:before,
6097 .progressbar-infinite:after {
6098   content: '';
6099   position: absolute;
6100   left: 0;
6101   top: 0;
6102   width: 100%;
6103   height: 100%;
6104   transform-origin: left center;
6105   transform: translate3d(0, 0, 0);
6106   display: block;
6107   background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
6108 }
6109 .progressbar-infinite.color-multi {
6110   background: none !important;
6111 }
6112 .progressbar-in {
6113   animation: progressbar-in 150ms forwards;
6114 }
6115 .progressbar-out {
6116   animation: progressbar-out 150ms forwards;
6117 }
6118 body > .progressbar,
6119 .view > .progressbar,
6120 .views > .progressbar,
6121 .page > .progressbar,
6122 .panel > .progressbar,
6123 .popup > .progressbar,
6124 .framework7-root > .progressbar,
6125 body > .progressbar-infinite,
6126 .view > .progressbar-infinite,
6127 .views > .progressbar-infinite,
6128 .page > .progressbar-infinite,
6129 .panel > .progressbar-infinite,
6130 .popup > .progressbar-infinite,
6131 .framework7-root > .progressbar-infinite {
6132   position: absolute;
6133   left: 0;
6134   top: 0;
6135   z-index: 15000;
6136   border-radius: 0 !important;
6137   transform-origin: center top !important;
6138 }
6139 body > .progressbar,
6140 .framework7-root > .progressbar,
6141 body > .progressbar-infinite,
6142 .framework7-root > .progressbar-infinite {
6143   top: var(--f7-statusbar-height);
6144 }
6145 @keyframes progressbar-in {
6146   from {
6147     opacity: 0;
6148     transform: scaleY(0);
6149   }
6150   to {
6151     opacity: 1;
6152     transform: scaleY(1);
6153   }
6154 }
6155 @keyframes progressbar-out {
6156   from {
6157     opacity: 1;
6158     transform: scaleY(1);
6159   }
6160   to {
6161     opacity: 0;
6162     transform: scaleY(0);
6163   }
6164 }
6165 .ios .progressbar-infinite:before {
6166   animation: ios-progressbar-infinite 1s linear infinite;
6167 }
6168 .ios .progressbar-infinite:after {
6169   display: none;
6170 }
6171 .ios .progressbar-infinite.color-multi:before {
6172   width: 400%;
6173   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
6174   background-size: 25% 100%;
6175   background-repeat: repeat-x;
6176   animation: ios-progressbar-infinite-multicolor 3s linear infinite;
6177 }
6178 @keyframes ios-progressbar-infinite {
6179   0% {
6180     transform: translate3d(-100%, 0, 0);
6181   }
6182   100% {
6183     transform: translate3d(100%, 0, 0);
6184   }
6185 }
6186 @keyframes ios-progressbar-infinite-multicolor {
6187   0% {
6188     transform: translate3d(0%, 0, 0);
6189   }
6190   100% {
6191     transform: translate3d(-50%, 0, 0);
6192   }
6193 }
6194 .md .progressbar-infinite:before {
6195   animation: md-progressbar-infinite-1 2s linear infinite;
6196 }
6197 .md .progressbar-infinite:after {
6198   animation: md-progressbar-infinite-2 2s linear infinite;
6199 }
6200 .md .progressbar-infinite.color-multi:before {
6201   background: none;
6202   animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
6203 }
6204 .md .progressbar-infinite.color-multi:after {
6205   background: none;
6206   animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
6207   transform-origin: center center;
6208 }
6209 @keyframes md-progressbar-infinite-1 {
6210   0% {
6211     transform: translateX(-10%) scaleX(0.1);
6212   }
6213   25% {
6214     transform: translateX(30%) scaleX(0.6);
6215   }
6216   50% {
6217     transform: translateX(100%) scaleX(1);
6218   }
6219   100% {
6220     transform: translateX(100%) scaleX(1);
6221   }
6222 }
6223 @keyframes md-progressbar-infinite-2 {
6224   0% {
6225     transform: translateX(-100%) scaleX(1);
6226   }
6227   40% {
6228     transform: translateX(-100%) scaleX(1);
6229   }
6230   75% {
6231     transform: translateX(60%) scaleX(0.35);
6232   }
6233   90% {
6234     transform: translateX(100%) scaleX(0.1);
6235   }
6236   100% {
6237     transform: translateX(100%) scaleX(0.1);
6238   }
6239 }
6240 @keyframes md-progressbar-infinite-multicolor-bg {
6241   0% {
6242     background-color: #4caf50;
6243   }
6244   25% {
6245     background-color: #f44336;
6246   }
6247   50% {
6248     background-color: #2196f3;
6249   }
6250   75% {
6251     background-color: #ffeb3b;
6252   }
6253 }
6254 @keyframes md-progressbar-infinite-multicolor-fill {
6255   0% {
6256     transform: scaleX(0);
6257     background-color: #f44336;
6258   }
6259   24.9% {
6260     transform: scaleX(1);
6261     background-color: #f44336;
6262   }
6263   25% {
6264     transform: scaleX(0);
6265     background-color: #2196f3;
6266   }
6267   49.9% {
6268     transform: scaleX(1);
6269     background-color: #2196f3;
6270   }
6271   50% {
6272     transform: scaleX(0);
6273     background-color: #ffeb3b;
6274   }
6275   74.9% {
6276     transform: scaleX(1);
6277     background-color: #ffeb3b;
6278   }
6279   75% {
6280     transform: scaleX(0);
6281     background-color: #4caf50;
6282   }
6283   100% {
6284     transform: scaleX(1);
6285     background-color: #4caf50;
6286   }
6287 }
6288 /* === Sortable === */
6289 :root {
6290   --f7-sortable-handler-color: #c7c7cc;
6291   --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
6292 }
6293 :root .theme-dark,
6294 :root.theme-dark {
6295   --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
6296 }
6297 .ios {
6298   --f7-sortable-handler-width: 35px;
6299   --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
6300 }
6301 .md {
6302   --f7-sortable-handler-width: 42px;
6303   --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
6304 }
6305 .sortable .sortable-handler {
6306   width: var(--f7-sortable-handler-width);
6307   height: 100%;
6308   position: absolute;
6309   top: 0;
6310   z-index: 10;
6311   opacity: 0;
6312   pointer-events: none;
6313   cursor: move;
6314   transition-duration: 300ms;
6315   display: flex;
6316   align-items: center;
6317   justify-content: center;
6318   overflow: hidden;
6319   right: var(--f7-safe-area-right);
6320 }
6321 .sortable .sortable-handler:after {
6322   font-family: 'framework7-core-icons';
6323   font-weight: normal;
6324   font-style: normal;
6325   line-height: 1;
6326   letter-spacing: normal;
6327   text-transform: none;
6328   white-space: nowrap;
6329   word-wrap: normal;
6330   direction: ltr;
6331   -webkit-font-smoothing: antialiased;
6332   text-rendering: optimizeLegibility;
6333   -moz-osx-font-smoothing: grayscale;
6334   -moz-font-feature-settings: "liga";
6335        font-feature-settings: "liga";
6336   text-align: center;
6337   display: block;
6338   width: 100%;
6339   height: 100%;
6340   font-size: 20px;
6341   transition-duration: 300ms;
6342   transform: translateX(10px);
6343   color: var(--f7-sortable-handler-color);
6344   overflow: hidden;
6345   height: 20px;
6346   width: 18px;
6347 }
6348 .sortable .item-inner {
6349   transition-duration: 300ms;
6350 }
6351 .sortable li.sorting {
6352   z-index: 50;
6353   background: var(--f7-sortable-sorting-item-bg-color);
6354   transition-duration: 0ms;
6355   box-shadow: var(--f7-sortable-sorting-item-box-shadow);
6356 }
6357 .sortable li.sorting .item-inner:after {
6358   display: none !important;
6359 }
6360 .sortable-sorting li {
6361   transition-duration: 300ms;
6362 }
6363 .sortable-enabled .sortable-handler {
6364   pointer-events: auto;
6365   opacity: 1;
6366 }
6367 .sortable-enabled .sortable-handler:after {
6368   transform: translateX(0px);
6369 }
6370 .sortable-enabled .item-link .item-inner,
6371 .sortable-enabled .item-link .item-title-row {
6372   background-image: none !important;
6373 }
6374 .list.sortable-enabled .item-inner,
6375 .list.sortable-enabled .item-link .item-inner,
6376 .list.sortable-enabled .item-link.no-chevron .item-inner,
6377 .list.sortable-enabled.no-chevron .item-link .item-inner,
6378 .list.sortable-enabled .no-chevron .item-link .item-inner,
6379 .no-chevron .list.sortable-enabled .item-link .item-inner {
6380   padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
6381 }
6382 .ios .sortable-handler:after {
6383   content: 'sort_ios';
6384 }
6385 .md .sortable-handler:after {
6386   content: 'sort_md';
6387 }
6388 /* === Swipeout === */
6389 :root {
6390   --f7-swipeout-button-text-color: #fff;
6391   --f7-swipeout-button-bg-color: #c7c7cc;
6392   --f7-swipeout-delete-button-bg-color: #ff3b30;
6393 }
6394 .ios {
6395   --f7-swipeout-button-padding: 0 30px;
6396 }
6397 .md {
6398   --f7-swipeout-button-padding: 0 24px;
6399 }
6400 .swipeout {
6401   overflow: hidden;
6402   transform-style: preserve-3d;
6403 }
6404 .swipeout-deleting {
6405   transition-duration: 300ms;
6406 }
6407 .swipeout-deleting .swipeout-content {
6408   transform: translateX(-100%);
6409 }
6410 .swipeout-transitioning .swipeout-content,
6411 .swipeout-transitioning .swipeout-actions-right a,
6412 .swipeout-transitioning .swipeout-actions-left a,
6413 .swipeout-transitioning .swipeout-overswipe {
6414   transition-duration: 300ms;
6415   transition-property: transform, left;
6416 }
6417 .swipeout-content {
6418   position: relative;
6419   z-index: 10;
6420 }
6421 .swipeout-overswipe {
6422   transition-duration: 200ms;
6423   transition-property: left;
6424 }
6425 .swipeout-actions-left,
6426 .swipeout-actions-right {
6427   position: absolute;
6428   top: 0;
6429   height: 100%;
6430   display: flex;
6431   direction: ltr;
6432 }
6433 .swipeout-actions-left > a,
6434 .swipeout-actions-right > a,
6435 .swipeout-actions-left > button,
6436 .swipeout-actions-right > button,
6437 .swipeout-actions-left > span,
6438 .swipeout-actions-right > span,
6439 .swipeout-actions-left > div,
6440 .swipeout-actions-right > div {
6441   color: var(--f7-swipeout-button-text-color);
6442   background: var(--f7-swipeout-button-bg-color);
6443   padding: var(--f7-swipeout-button-padding);
6444   display: flex;
6445   align-items: center;
6446   position: relative;
6447   left: 0;
6448 }
6449 .swipeout-actions-left > a:after,
6450 .swipeout-actions-right > a:after,
6451 .swipeout-actions-left > button:after,
6452 .swipeout-actions-right > button:after,
6453 .swipeout-actions-left > span:after,
6454 .swipeout-actions-right > span:after,
6455 .swipeout-actions-left > div:after,
6456 .swipeout-actions-right > div:after {
6457   content: '';
6458   position: absolute;
6459   top: 0;
6460   width: 600%;
6461   height: 100%;
6462   background: inherit;
6463   z-index: -1;
6464   transform: translate3d(0, 0, 0);
6465   pointer-events: none;
6466 }
6467 .swipeout-actions-left .swipeout-delete,
6468 .swipeout-actions-right .swipeout-delete {
6469   background: var(--f7-swipeout-delete-button-bg-color);
6470 }
6471 .swipeout-actions-right {
6472   right: 0%;
6473   transform: translateX(100%);
6474 }
6475 .swipeout-actions-right > a:after,
6476 .swipeout-actions-right > button:after,
6477 .swipeout-actions-right > span:after,
6478 .swipeout-actions-right > div:after {
6479   left: 100%;
6480   margin-left: -1px;
6481 }
6482 .swipeout-actions-left {
6483   left: 0%;
6484   transform: translateX(-100%);
6485 }
6486 .swipeout-actions-left > a:after,
6487 .swipeout-actions-left > button:after,
6488 .swipeout-actions-left > span:after,
6489 .swipeout-actions-left > div:after {
6490   right: 100%;
6491   margin-right: -1px;
6492 }
6493 .swipeout-actions-left [class*="color-"],
6494 .swipeout-actions-right [class*="color-"] {
6495   --f7-swipeout-button-bg-color: var(--f7-theme-color);
6496 }
6497 /* === Accordion === */
6498 .accordion-item-toggle {
6499   cursor: pointer;
6500   transition-duration: 300ms;
6501 }
6502 .accordion-item-toggle.active-state {
6503   transition-duration: 300ms;
6504 }
6505 .accordion-item-toggle.active-state > .item-inner:after {
6506   background-color: transparent;
6507 }
6508 .accordion-item-toggle .item-inner {
6509   transition-duration: 300ms;
6510   transition-property: background-color;
6511 }
6512 .accordion-item-toggle .item-inner:after {
6513   transition-duration: 300ms;
6514 }
6515 .accordion-item .item-link .item-inner:after {
6516   transition-duration: 300ms;
6517 }
6518 .accordion-item .list,
6519 .accordion-item .block {
6520   margin-top: 0;
6521   margin-bottom: 0;
6522 }
6523 .accordion-item .block > h1:first-child,
6524 .accordion-item .block > h2:first-child,
6525 .accordion-item .block > h3:first-child,
6526 .accordion-item .block > h4:first-child,
6527 .accordion-item .block > p:first-child {
6528   margin-top: 10px;
6529 }
6530 .accordion-item .block > h1:last-child,
6531 .accordion-item .block > h2:last-child,
6532 .accordion-item .block > h3:last-child,
6533 .accordion-item .block > h4:last-child,
6534 .accordion-item .block > p:last-child {
6535   margin-bottom: 10px;
6536 }
6537 .accordion-item-opened .accordion-item-toggle .item-inner:after,
6538 .accordion-item-opened > .item-link .item-inner:after {
6539   background-color: transparent;
6540 }
6541 .list li.accordion-item ul {
6542   padding-left: 0;
6543 }
6544 .accordion-item-content {
6545   position: relative;
6546   overflow: hidden;
6547   height: 0;
6548   font-size: 14px;
6549   transition-duration: 300ms;
6550 }
6551 .accordion-item-opened > .accordion-item-content {
6552   height: auto;
6553 }
6554 html.device-android-4 .accordion-item-content {
6555   transform: none;
6556 }
6557 .list .accordion-item-toggle .item-inner {
6558   padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-right));
6559 }
6560 .list .accordion-item-toggle .item-inner:before {
6561   font-family: 'framework7-core-icons';
6562   font-weight: normal;
6563   font-style: normal;
6564   line-height: 1;
6565   letter-spacing: normal;
6566   text-transform: none;
6567   white-space: nowrap;
6568   word-wrap: normal;
6569   direction: ltr;
6570   -webkit-font-smoothing: antialiased;
6571   text-rendering: optimizeLegibility;
6572   -moz-osx-font-smoothing: grayscale;
6573   -moz-font-feature-settings: "liga";
6574        font-feature-settings: "liga";
6575   text-align: center;
6576   display: block;
6577   width: 100%;
6578   height: 100%;
6579   position: absolute;
6580   top: 50%;
6581   width: 14px;
6582   height: 8px;
6583   margin-top: -4px;
6584   font-size: 20px;
6585   line-height: 14px;
6586   color: var(--f7-list-chevron-icon-color);
6587   pointer-events: none;
6588   right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
6589   content: 'chevron_right';
6590 }
6591 .list .accordion-item-toggle.active-state {
6592   background-color: var(--f7-list-link-pressed-bg-color);
6593 }
6594 .list .accordion-item-toggle .item-inner:before,
6595 .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
6596 .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
6597 .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
6598 .media-list .accordion-item > .item-link .item-title-row:before,
6599 .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
6600 .accordion-item.media-item > .item-link .item-title-row:before,
6601 .links-list .accordion-item > a:before {
6602   content: 'chevron_down';
6603   width: 14px;
6604   height: 8px;
6605   margin-top: -4px;
6606   line-height: 8px;
6607 }
6608 .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
6609 .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
6610 .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
6611 .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
6612 .media-list .accordion-item-opened > .item-link .item-title-row:before,
6613 .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
6614 .accordion-item-opened.media-item > .item-link .item-title-row:before,
6615 .links-list .accordion-item-opened > a:before {
6616   content: 'chevron_up';
6617   width: 14px;
6618   height: 8px;
6619   margin-top: -4px;
6620   line-height: 8px;
6621 }
6622 /* === Contacts === */
6623 .ios {
6624   --f7-contacts-list-title-font-size: inherit;
6625   --f7-contacts-list-title-font-weight: 600;
6626   --f7-contacts-list-title-text-color: #000;
6627   --f7-contacts-list-title-height: 22px;
6628   --f7-contacts-list-title-bg-color: #f7f7f7;
6629 }
6630 .ios .theme-dark,
6631 .ios.theme-dark {
6632   --f7-contacts-list-title-text-color: #fff;
6633   --f7-contacts-list-title-bg-color: #232323;
6634 }
6635 .md {
6636   --f7-contacts-list-title-font-size: 20px;
6637   --f7-contacts-list-title-font-weight: 500;
6638   --f7-contacts-list-title-text-color: var(--f7-theme-color);
6639   --f7-contacts-list-title-height: 48px;
6640   --f7-contacts-list-title-bg-color: transparent;
6641 }
6642 .md .theme-dark,
6643 .md.theme-dark {
6644   --f7-contacts-list-title-text-color: #fff;
6645 }
6646 .contacts-list {
6647   --f7-list-margin-vertical: 0px;
6648 }
6649 .contacts-list .list-group-title,
6650 .contacts-list li.list-group-title {
6651   background-color: var(--f7-contacts-list-title-bg-color);
6652   font-weight: var(--f7-contacts-list-title-font-weight);
6653   font-size: var(--f7-contacts-list-title-font-size);
6654   color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
6655   line-height: var(--f7-contacts-list-title-height);
6656   height: var(--f7-contacts-list-title-height);
6657 }
6658 .contacts-list .list-group:first-child ul:before {
6659   display: none !important;
6660 }
6661 .contacts-list .list-group:last-child ul:after {
6662   display: none !important;
6663 }
6664 .md .contacts-list .list-group-title {
6665   pointer-events: none;
6666   overflow: visible;
6667   width: 56px;
6668 }
6669 .md .contacts-list .list-group-title + li {
6670   margin-top: calc(var(--f7-contacts-list-title-height) * -1);
6671 }
6672 .md .contacts-list li:not(.list-group-title) {
6673   padding-left: 56px;
6674 }
6675 /* === Virtual List === */
6676 /* === Indexed List === */
6677 :root {
6678   --f7-list-index-width: 16px;
6679   --f7-list-index-font-size: 11px;
6680   --f7-list-index-font-weight: 600;
6681   /* --f7-list-index-text-color: var(--f7-theme-color); */
6682   --f7-list-index-item-height: 14px;
6683   --f7-list-index-label-text-color: #fff;
6684   /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
6685   --f7-list-index-label-font-weight: 500;
6686 }
6687 .ios {
6688   --f7-list-index-label-size: 44px;
6689   --f7-list-index-label-font-size: 17px;
6690   --f7-list-index-skip-dot-size: 6px;
6691 }
6692 .md {
6693   --f7-list-index-label-size: 56px;
6694   --f7-list-index-label-font-size: 20px;
6695   --f7-list-index-skip-dot-size: 4px;
6696 }
6697 .list-index {
6698   position: absolute;
6699   top: 0;
6700   bottom: 0;
6701   text-align: center;
6702   z-index: 10;
6703   width: var(--f7-list-index-width);
6704   cursor: pointer;
6705   -webkit-user-select: none;
6706      -moz-user-select: none;
6707       -ms-user-select: none;
6708           user-select: none;
6709   right: var(--f7-safe-area-right);
6710 }
6711 .list-index:before {
6712   content: '';
6713   position: absolute;
6714   width: 20px;
6715   top: 0;
6716   right: 100%;
6717   height: 100%;
6718 }
6719 .list-index ul {
6720   color: var(--f7-list-index-text-color, var(--f7-theme-color));
6721   font-size: var(--f7-list-index-font-size);
6722   font-weight: var(--f7-list-index-font-weight);
6723   list-style: none;
6724   margin: 0;
6725   padding: 0;
6726   display: flex;
6727   flex-direction: column;
6728   justify-content: center;
6729   align-items: center;
6730   flex-shrink: 0;
6731   height: 100%;
6732   width: 100%;
6733   position: relative;
6734 }
6735 .list-index li {
6736   margin: 0;
6737   padding: 0;
6738   list-style: none;
6739   position: relative;
6740   height: var(--f7-list-index-item-height);
6741   line-height: var(--f7-list-index-item-height);
6742   flex-shrink: 0;
6743   display: block;
6744   width: 100%;
6745 }
6746 .list-index .list-index-skip-placeholder:after {
6747   content: '';
6748   position: absolute;
6749   left: 50%;
6750   top: 50%;
6751   border-radius: 50%;
6752   width: var(--f7-list-index-skip-dot-size);
6753   height: var(--f7-list-index-skip-dot-size);
6754   margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
6755   margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
6756   background: var(--f7-list-index-text-color, var(--f7-theme-color));
6757 }
6758 .list-index .list-index-label {
6759   position: absolute;
6760   bottom: 0;
6761   right: 100%;
6762   text-align: center;
6763   background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
6764   color: var(--f7-list-index-label-text-color);
6765   width: var(--f7-list-index-label-size);
6766   height: var(--f7-list-index-label-size);
6767   line-height: var(--f7-list-index-label-size);
6768   font-size: var(--f7-list-index-label-font-size);
6769   font-weight: var(--f7-list-index-label-font-weight);
6770 }
6771 .navbar ~ .page > .list-index,
6772 .navbar ~ .list-index {
6773   top: var(--f7-navbar-height);
6774 }
6775 .navbar ~ .toolbar-top ~ .list-index,
6776 .ios .navbar ~ .toolbar-top-ios ~ .list-index,
6777 .md .navbar ~ .toolbar-top-md ~ .list-index {
6778   top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
6779 }
6780 .navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
6781 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
6782 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
6783   top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
6784 }
6785 .navbar ~ .subnavbar ~ .list-index,
6786 .page-with-subnavbar .navbar ~ .list-index {
6787   top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
6788 }
6789 .toolbar-bottom ~ .page > .list-index,
6790 .ios .toolbar-bottom-ios ~ .page > .list-index,
6791 .md .toolbar-bottom-md ~ .page > .list-index,
6792 .toolbar-bottom ~ * .page > .list-index,
6793 .ios .toolbar-bottom-ios ~ * .page > .list-index,
6794 .md .toolbar-bottom-md ~ * .page > .list-index,
6795 .toolbar-bottom ~ .list-index,
6796 .ios .toolbar-bottom-ios ~ .list-index,
6797 .md .toolbar-bottom-md ~ .list-index {
6798   bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
6799 }
6800 .toolbar-bottom.tabbar-labels ~ .page > .list-index,
6801 .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
6802 .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
6803 .toolbar-bottom.tabbar-labels ~ * .page > .list-index,
6804 .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
6805 .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
6806 .toolbar-bottom.tabbar-labels ~ .list-index,
6807 .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
6808 .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
6809   bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
6810 }
6811 .ios .list-index .list-index-label {
6812   margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
6813   margin-right: calc(var(--f7-list-index-width) - 1px);
6814   border-radius: 50%;
6815 }
6816 .ios .list-index .list-index-label:before {
6817   position: absolute;
6818   width: 100%;
6819   height: 100%;
6820   border-radius: 50% 0% 50% 50%;
6821   content: '';
6822   background-color: inherit;
6823   left: 0;
6824   top: 0;
6825   transform: rotate(45deg);
6826   z-index: -1;
6827 }
6828 .md .list-index .list-index-label {
6829   border-radius: 50% 50% 0 50%;
6830 }
6831 /* === Timeline === */
6832 :root {
6833   --f7-timeline-horizontal-date-height: 34px;
6834   --f7-timeline-year-height: 24px;
6835   --f7-timeline-month-height: 24px;
6836   --f7-timeline-item-inner-bg-color: #fff;
6837 }
6838 :root .theme-dark,
6839 :root.theme-dark {
6840   --f7-timeline-item-inner-bg-color: #1c1c1d;
6841 }
6842 .ios {
6843   --f7-timeline-padding-horizontal: 15px;
6844   --f7-timeline-margin-vertical: 35px;
6845   --f7-timeline-divider-margin-horizontal: 15px;
6846   --f7-timeline-inner-block-margin-vertical: 15px;
6847   --f7-timeline-item-inner-border-radius: 7px;
6848   --f7-timeline-item-inner-box-shadow: none;
6849   --f7-timeline-item-time-font-size: 13px;
6850   --f7-timeline-item-time-text-color: #6d6d72;
6851   --f7-timeline-item-title-font-size: 17px;
6852   --f7-timeline-item-title-font-weight: 600;
6853   --f7-timeline-item-subtitle-font-size: 15px;
6854   --f7-timeline-item-subtitle-font-weight: inherit;
6855   --f7-timeline-horizontal-item-padding: 10px;
6856   --f7-timeline-horizontal-item-border-color: #c4c4c4;
6857   --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
6858   --f7-timeline-horizontal-item-date-shadow-image: none;
6859 }
6860 .ios .theme-dark,
6861 .ios.theme-dark {
6862   --f7-timeline-item-time-text-color: #8E8E93;
6863 }
6864 .md {
6865   --f7-timeline-padding-horizontal: 16px;
6866   --f7-timeline-margin-vertical: 32px;
6867   --f7-timeline-divider-margin-horizontal: 16px;
6868   --f7-timeline-inner-block-margin-vertical: 16px;
6869   --f7-timeline-item-inner-border-radius: 4px;
6870   --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
6871   --f7-timeline-item-time-font-size: 13px;
6872   --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
6873   --f7-timeline-item-title-font-size: 16px;
6874   --f7-timeline-item-title-font-weight: 400;
6875   --f7-timeline-item-subtitle-font-size: inherit;
6876   --f7-timeline-item-subtitle-font-weight: inherit;
6877   --f7-timeline-horizontal-item-padding: 12px;
6878   --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
6879   --f7-timeline-horizontal-item-date-border-color: transparent;
6880   --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
6881 }
6882 .md .theme-dark,
6883 .md.theme-dark {
6884   --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
6885 }
6886 .timeline {
6887   box-sizing: border-box;
6888   margin: var(--f7-timeline-margin-vertical) 0;
6889   padding: 0 var(--f7-timeline-padding-horizontal);
6890   padding-top: 0;
6891   padding-bottom: 0;
6892   padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
6893   padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
6894 }
6895 .block-strong .timeline {
6896   padding: 0;
6897   margin: 0;
6898 }
6899 .timeline-item {
6900   display: flex;
6901   justify-content: flex-start;
6902   overflow: hidden;
6903   box-sizing: border-box;
6904   position: relative;
6905   padding: 2px 0px var(--f7-timeline-padding-horizontal);
6906 }
6907 .timeline-item:last-child {
6908   padding-bottom: 2px;
6909 }
6910 .timeline-item-date {
6911   flex-shrink: 0;
6912   width: 50px;
6913   text-align: right;
6914   box-sizing: border-box;
6915 }
6916 .timeline-item-date small {
6917   font-size: 10px;
6918 }
6919 .timeline-item-content {
6920   margin: 2px;
6921   min-width: 0;
6922   position: relative;
6923   flex-shrink: 10;
6924 }
6925 .timeline-item-content .card,
6926 .timeline-item-content.card,
6927 .timeline-item-content .list,
6928 .timeline-item-content.list,
6929 .timeline-item-content .block,
6930 .timeline-item-content.block {
6931   margin: 0;
6932   width: 100%;
6933 }
6934 .timeline-item-content .card + .card,
6935 .timeline-item-content .list + .card,
6936 .timeline-item-content .block + .card,
6937 .timeline-item-content .card + .list,
6938 .timeline-item-content .list + .list,
6939 .timeline-item-content .block + .list,
6940 .timeline-item-content .card + .block,
6941 .timeline-item-content .list + .block,
6942 .timeline-item-content .block + .block {
6943   margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
6944 }
6945 .timeline-item-content p:first-child,
6946 .timeline-item-content ul:first-child,
6947 .timeline-item-content ol:first-child,
6948 .timeline-item-content h1:first-child,
6949 .timeline-item-content h2:first-child,
6950 .timeline-item-content h3:first-child,
6951 .timeline-item-content h4:first-child {
6952   margin-top: 0;
6953 }
6954 .timeline-item-content p:last-child,
6955 .timeline-item-content ul:last-child,
6956 .timeline-item-content ol:last-child,
6957 .timeline-item-content h1:last-child,
6958 .timeline-item-content h2:last-child,
6959 .timeline-item-content h3:last-child,
6960 .timeline-item-content h4:last-child {
6961   margin-bottom: 0;
6962 }
6963 .timeline-item-inner {
6964   background: var(--f7-timeline-item-inner-bg-color);
6965   box-sizing: border-box;
6966   border-radius: var(--f7-timeline-item-inner-border-radius);
6967   padding: 8px var(--f7-timeline-padding-horizontal);
6968   box-shadow: var(--f7-timeline-item-inner-box-shadow);
6969 }
6970 .timeline-item-inner + .timeline-item-inner {
6971   margin-top: var(--f7-timeline-inner-block-margin-vertical);
6972 }
6973 .timeline-item-inner .block {
6974   padding: 0;
6975   color: inherit;
6976 }
6977 .timeline-item-inner .block-strong {
6978   padding-left: 0;
6979   padding-right: 0;
6980   margin: 0;
6981 }
6982 .timeline-item-inner .block-strong:before {
6983   display: none !important;
6984 }
6985 .timeline-item-inner .block-strong:after {
6986   display: none !important;
6987 }
6988 .timeline-item-inner .list ul:before {
6989   display: none !important;
6990 }
6991 .timeline-item-inner .list ul:after {
6992   display: none !important;
6993 }
6994 .timeline-item-divider {
6995   width: 1px;
6996   position: relative;
6997   width: 10px;
6998   height: 10px;
6999   background: #bbb;
7000   border-radius: 50%;
7001   flex-shrink: 0;
7002   margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
7003 }
7004 .timeline-item-divider:after,
7005 .timeline-item-divider:before {
7006   content: ' ';
7007   width: 1px;
7008   height: 100vh;
7009   position: absolute;
7010   left: 50%;
7011   background: inherit;
7012   transform: translate3d(-50%, 0, 0);
7013 }
7014 .timeline-item-divider:after {
7015   top: 100%;
7016 }
7017 .timeline-item-divider:before {
7018   bottom: 100%;
7019 }
7020 .timeline-item:last-child .timeline-item-divider:after {
7021   display: none;
7022 }
7023 .timeline-item:first-child .timeline-item-divider:before {
7024   display: none;
7025 }
7026 .timeline-item-time {
7027   font-size: var(--f7-timeline-item-time-font-size);
7028   margin-top: var(--f7-timeline-inner-block-margin-vertical);
7029   color: var(--f7-timeline-item-time-text-color);
7030 }
7031 .timeline-item-time:first-child,
7032 .timeline-item-time:last-child {
7033   margin-top: 0;
7034 }
7035 .timeline-item-title + .timeline-item-time {
7036   margin-top: 0;
7037 }
7038 .timeline-item-title {
7039   font-size: var(--f7-timeline-item-title-font-size);
7040   font-weight: var(--f7-timeline-item-title-font-weight);
7041 }
7042 .timeline-item-subtitle {
7043   font-size: var(--f7-timeline-item-subtitle-font-size);
7044   font-weight: var(--f7-timeline-item-subtitle-font-weight);
7045 }
7046 .timeline-sides .timeline-item-right,
7047 .timeline-sides .timeline-item {
7048   margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7049   margin-right: 0;
7050 }
7051 .timeline-sides .timeline-item-right .timeline-item-date,
7052 .timeline-sides .timeline-item .timeline-item-date {
7053   text-align: right;
7054 }
7055 .timeline-sides .timeline-item-left,
7056 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
7057   flex-direction: row-reverse;
7058   margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7059   margin-left: 0;
7060 }
7061 .timeline-sides .timeline-item-left .timeline-item-date,
7062 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
7063   text-align: left;
7064 }
7065 @media (min-width: 768px) {
7066   .tablet-sides .timeline-item-right,
7067   .tablet-sides .timeline-item {
7068     margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7069     margin-right: 0;
7070   }
7071   .tablet-sides .timeline-item-right .timeline-item-date,
7072   .tablet-sides .timeline-item .timeline-item-date {
7073     text-align: right;
7074   }
7075   .tablet-sides .timeline-item-left,
7076   .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
7077     flex-direction: row-reverse;
7078     margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7079     margin-left: 0;
7080   }
7081   .tablet-sides .timeline-item-left .timeline-item-date,
7082   .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
7083     text-align: left;
7084   }
7085 }
7086 .timeline-horizontal {
7087   height: 100%;
7088   display: flex;
7089   padding: 0;
7090   margin: 0;
7091   position: relative;
7092   padding-left: var(--f7-safe-area-left);
7093   padding-right: 0;
7094 }
7095 .timeline-horizontal .timeline-item {
7096   display: block;
7097   width: 33.33333333vw;
7098   margin: 0;
7099   padding: 0;
7100   flex-shrink: 0;
7101   position: relative;
7102   height: 100%;
7103   padding-top: var(--f7-timeline-horizontal-date-height) !important;
7104   padding-bottom: var(--f7-timeline-horizontal-item-padding);
7105 }
7106 .timeline-horizontal .timeline-item:after {
7107   content: '';
7108   position: absolute;
7109   background-color: var(--f7-timeline-horizontal-item-border-color);
7110   display: block;
7111   z-index: 15;
7112   top: 0;
7113   right: 0;
7114   bottom: auto;
7115   left: auto;
7116   width: 1px;
7117   height: 100%;
7118   transform-origin: 100% 50%;
7119   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
7120 }
7121 .timeline-horizontal .timeline-item-date {
7122   padding: 0px var(--f7-timeline-horizontal-item-padding);
7123   width: auto;
7124   line-height: var(--f7-timeline-horizontal-date-height);
7125   position: absolute;
7126   left: 0;
7127   top: 0;
7128   width: 100%;
7129   height: var(--f7-timeline-horizontal-date-height);
7130   background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
7131   color: var(--f7-bars-text-color);
7132   text-align: left;
7133 }
7134 .timeline-horizontal .timeline-item-date:after {
7135   content: '';
7136   position: absolute;
7137   background-color: var(--f7-timeline-horizontal-item-date-border-color);
7138   display: block;
7139   z-index: 15;
7140   top: auto;
7141   right: auto;
7142   bottom: 0;
7143   left: 0;
7144   height: 1px;
7145   width: 100%;
7146   transform-origin: 50% 100%;
7147   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7148 }
7149 .timeline-horizontal .timeline-item-date:before {
7150   content: '';
7151   position: absolute;
7152   right: 0;
7153   width: 100%;
7154   top: 100%;
7155   bottom: auto;
7156   height: 8px;
7157   pointer-events: none;
7158   background: var(--f7-timeline-horizontal-item-date-shadow-image);
7159 }
7160 .timeline-horizontal.no-shadow .timeline-item-date:before {
7161   display: none;
7162 }
7163 .timeline-horizontal .timeline-item-content {
7164   padding: var(--f7-timeline-horizontal-item-padding);
7165   height: calc(100% - var(--f7-timeline-horizontal-item-padding));
7166   will-change: scroll-position;
7167   overflow: auto;
7168   -webkit-overflow-scrolling: touch;
7169   margin: 0;
7170 }
7171 .timeline-horizontal .timeline-item-divider {
7172   display: none;
7173 }
7174 .timeline-horizontal > .timeline-item:last-child:after,
7175 .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
7176   display: none !important;
7177 }
7178 .timeline-horizontal.col-5 .timeline-item {
7179   width: 5vw;
7180 }
7181 .timeline-horizontal.col-10 .timeline-item {
7182   width: 10vw;
7183 }
7184 .timeline-horizontal.col-15 .timeline-item {
7185   width: 15vw;
7186 }
7187 .timeline-horizontal.col-20 .timeline-item {
7188   width: 20vw;
7189 }
7190 .timeline-horizontal.col-25 .timeline-item {
7191   width: 25vw;
7192 }
7193 .timeline-horizontal.col-30 .timeline-item {
7194   width: 30vw;
7195 }
7196 .timeline-horizontal.col-33 .timeline-item {
7197   width: 33.333333333333336vw;
7198 }
7199 .timeline-horizontal.col-35 .timeline-item {
7200   width: 35vw;
7201 }
7202 .timeline-horizontal.col-40 .timeline-item {
7203   width: 40vw;
7204 }
7205 .timeline-horizontal.col-45 .timeline-item {
7206   width: 45vw;
7207 }
7208 .timeline-horizontal.col-50 .timeline-item {
7209   width: 50vw;
7210 }
7211 .timeline-horizontal.col-55 .timeline-item {
7212   width: 55vw;
7213 }
7214 .timeline-horizontal.col-60 .timeline-item {
7215   width: 60vw;
7216 }
7217 .timeline-horizontal.col-65 .timeline-item {
7218   width: 65vw;
7219 }
7220 .timeline-horizontal.col-66 .timeline-item {
7221   width: 66.66666666666666vw;
7222 }
7223 .timeline-horizontal.col-70 .timeline-item {
7224   width: 70vw;
7225 }
7226 .timeline-horizontal.col-75 .timeline-item {
7227   width: 75vw;
7228 }
7229 .timeline-horizontal.col-80 .timeline-item {
7230   width: 80vw;
7231 }
7232 .timeline-horizontal.col-85 .timeline-item {
7233   width: 85vw;
7234 }
7235 .timeline-horizontal.col-90 .timeline-item {
7236   width: 90vw;
7237 }
7238 .timeline-horizontal.col-95 .timeline-item {
7239   width: 95vw;
7240 }
7241 .timeline-horizontal.col-100 .timeline-item {
7242   width: 100vw;
7243 }
7244 @media (min-width: 768px) {
7245   .timeline-horizontal.tablet-5 .timeline-item {
7246     width: 5vw;
7247   }
7248   .timeline-horizontal.tablet-10 .timeline-item {
7249     width: 10vw;
7250   }
7251   .timeline-horizontal.tablet-15 .timeline-item {
7252     width: 15vw;
7253   }
7254   .timeline-horizontal.tablet-20 .timeline-item {
7255     width: 20vw;
7256   }
7257   .timeline-horizontal.tablet-25 .timeline-item {
7258     width: 25vw;
7259   }
7260   .timeline-horizontal.tablet-30 .timeline-item {
7261     width: 30vw;
7262   }
7263   .timeline-horizontal.tablet-33 .timeline-item {
7264     width: 33.333333333333336vw;
7265   }
7266   .timeline-horizontal.tablet-35 .timeline-item {
7267     width: 35vw;
7268   }
7269   .timeline-horizontal.tablet-40 .timeline-item {
7270     width: 40vw;
7271   }
7272   .timeline-horizontal.tablet-45 .timeline-item {
7273     width: 45vw;
7274   }
7275   .timeline-horizontal.tablet-50 .timeline-item {
7276     width: 50vw;
7277   }
7278   .timeline-horizontal.tablet-55 .timeline-item {
7279     width: 55vw;
7280   }
7281   .timeline-horizontal.tablet-60 .timeline-item {
7282     width: 60vw;
7283   }
7284   .timeline-horizontal.tablet-65 .timeline-item {
7285     width: 65vw;
7286   }
7287   .timeline-horizontal.tablet-66 .timeline-item {
7288     width: 66.66666666666666vw;
7289   }
7290   .timeline-horizontal.tablet-70 .timeline-item {
7291     width: 70vw;
7292   }
7293   .timeline-horizontal.tablet-75 .timeline-item {
7294     width: 75vw;
7295   }
7296   .timeline-horizontal.tablet-80 .timeline-item {
7297     width: 80vw;
7298   }
7299   .timeline-horizontal.tablet-85 .timeline-item {
7300     width: 85vw;
7301   }
7302   .timeline-horizontal.tablet-90 .timeline-item {
7303     width: 90vw;
7304   }
7305   .timeline-horizontal.tablet-95 .timeline-item {
7306     width: 95vw;
7307   }
7308   .timeline-horizontal.tablet-100 .timeline-item {
7309     width: 100vw;
7310   }
7311 }
7312 .timeline-year {
7313   padding-top: var(--f7-timeline-year-height);
7314 }
7315 .timeline-year:after {
7316   content: '';
7317   position: absolute;
7318   background-color: var(--f7-timeline-horizontal-item-border-color);
7319   display: block;
7320   z-index: 15;
7321   top: 0;
7322   right: 0;
7323   bottom: auto;
7324   left: auto;
7325   width: 1px;
7326   height: 100%;
7327   transform-origin: 100% 50%;
7328   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
7329 }
7330 .timeline-year:last-child:after {
7331   display: none !important;
7332 }
7333 .timeline-month {
7334   padding-top: var(--f7-timeline-month-height);
7335 }
7336 .timeline-month .timeline-item:before {
7337   content: '';
7338   position: absolute;
7339   background-color: var(--f7-timeline-horizontal-item-border-color);
7340   display: block;
7341   z-index: 15;
7342   top: 0;
7343   right: auto;
7344   bottom: auto;
7345   left: 0;
7346   height: 1px;
7347   width: 100%;
7348   transform-origin: 50% 0%;
7349   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7350 }
7351 .timeline-year,
7352 .timeline-month {
7353   display: flex;
7354   flex-shrink: 0;
7355   position: relative;
7356   box-sizing: border-box;
7357   height: 100%;
7358 }
7359 .timeline-year-title {
7360   line-height: var(--f7-timeline-year-height);
7361   height: var(--f7-timeline-year-height);
7362 }
7363 .timeline-month-title {
7364   line-height: var(--f7-timeline-month-height);
7365   height: var(--f7-timeline-month-height);
7366 }
7367 .timeline-year-title,
7368 .timeline-month-title {
7369   position: absolute;
7370   left: 0;
7371   top: 0;
7372   width: 100%;
7373   box-sizing: border-box;
7374   padding: 0 var(--f7-timeline-horizontal-item-padding);
7375   background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
7376   color: var(--f7-bars-text-color);
7377 }
7378 .timeline-year-title span,
7379 .timeline-month-title span {
7380   display: inline-block;
7381   position: -webkit-sticky;
7382   position: sticky;
7383   left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
7384 }
7385 .timeline-year-title {
7386   font-size: 16px;
7387 }
7388 .timeline-month-title span {
7389   margin-top: -2px;
7390 }
7391 .timeline-year:first-child .timeline-year-title,
7392 .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
7393 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
7394   left: calc(var(--f7-safe-area-left) * -1);
7395   right: 0;
7396   width: auto;
7397 }
7398 .timeline-horizontal .timeline-item:first-child,
7399 .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
7400 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
7401 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
7402   overflow: visible;
7403 }
7404 .timeline-horizontal .timeline-item:first-child .timeline-item-date,
7405 .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
7406 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
7407 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
7408   width: auto;
7409   padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
7410   left: calc(0px - var(--f7-safe-area-left));
7411   right: 0;
7412 }
7413 .timeline-year:last-child .timeline-year-title,
7414 .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
7415   width: auto;
7416   right: calc(0px - var(--f7-safe-area-right));
7417 }
7418 .timeline-horizontal .timeline-item:last-child,
7419 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
7420   overflow: visible;
7421 }
7422 .timeline-horizontal .timeline-item:last-child .timeline-item-date,
7423 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
7424   width: auto;
7425   right: calc(0px - var(--f7-safe-area-right));
7426   left: 0;
7427 }
7428 /* === Timeline iOS === */
7429 .ios .block-strong .timeline-item-inner {
7430   border-radius: 3px;
7431   border: 1px solid rgba(0, 0, 0, 0.1);
7432 }
7433 .ios .timeline-year-title span {
7434   margin-top: 3px;
7435 }
7436 /* === Timeline MD === */
7437 .md .timeline-year-title span {
7438   margin-top: 2px;
7439 }
7440 /* === Tabs === */
7441 .tabs .tab {
7442   display: none;
7443 }
7444 .tabs .tab-active {
7445   display: block;
7446 }
7447 .tabs-animated-wrap {
7448   position: relative;
7449   width: 100%;
7450   overflow: hidden;
7451   height: 100%;
7452 }
7453 .tabs-animated-wrap > .tabs {
7454   display: flex;
7455   height: 100%;
7456   transition-duration: 300ms;
7457 }
7458 .tabs-animated-wrap > .tabs > .tab {
7459   width: 100%;
7460   display: block;
7461   flex-shrink: 0;
7462 }
7463 .tabs-animated-wrap.not-animated > .tabs {
7464   transition-duration: 300ms;
7465 }
7466 .tabs-swipeable-wrap {
7467   height: 100%;
7468 }
7469 .tabs-swipeable-wrap > .tabs {
7470   height: 100%;
7471 }
7472 .tabs-swipeable-wrap > .tabs > .tab {
7473   display: block;
7474 }
7475 .page > .tabs {
7476   height: 100%;
7477 }
7478 /* === Panels === */
7479 :root {
7480   --f7-panel-width: 260px;
7481   --f7-panel-bg-color: #fff;
7482 }
7483 .ios {
7484   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
7485   --f7-panel-transition-duration: 400ms;
7486   --f7-panel-shadow: transparent;
7487 }
7488 .md {
7489   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
7490   --f7-panel-transition-duration: 300ms;
7491   --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
7492     rgba(0, 0, 0, 0.1) 30%,
7493     rgba(0, 0, 0, 0.05) 40%,
7494     rgba(0, 0, 0, 0) 60%,
7495     rgba(0, 0, 0, 0) 100%;
7496 }
7497 .panel-backdrop {
7498   position: absolute;
7499   left: 0;
7500   top: var(--f7-statusbar-height);
7501   width: 100%;
7502   height: calc(100% - var(--f7-statusbar-height));
7503   opacity: 0;
7504   z-index: 5999;
7505   display: none;
7506   transform: translate3d(0, 0, 0);
7507   background-color: var(--f7-panel-backdrop-bg-color);
7508   transition-duration: var(--f7-panel-transition-duration);
7509   will-change: transform, opacity;
7510 }
7511 .panel-backdrop.not-animated {
7512   transition-duration: 0ms !important;
7513 }
7514 .panel {
7515   z-index: 1000;
7516   display: none;
7517   box-sizing: border-box;
7518   position: absolute;
7519   top: var(--f7-statusbar-height);
7520   height: calc(100% - var(--f7-statusbar-height));
7521   transform: translate3d(0, 0, 0);
7522   width: var(--f7-panel-width);
7523   background-color: var(--f7-panel-bg-color);
7524   overflow: visible;
7525   will-change: transform;
7526 }
7527 .panel:after {
7528   pointer-events: none;
7529   opacity: 0;
7530   z-index: 5999;
7531   position: absolute;
7532   content: '';
7533   top: 0;
7534   width: 20px;
7535   height: 100%;
7536 }
7537 .panel,
7538 .panel:after {
7539   transition-duration: var(--f7-panel-transition-duration);
7540 }
7541 .panel.not-animated,
7542 .panel.not-animated:after {
7543   transition-duration: 0ms !important;
7544 }
7545 .panel.panel-reveal.not-animated ~ .views,
7546 .panel.panel-reveal.not-animated ~ .view {
7547   transition-duration: 0ms !important;
7548 }
7549 .panel-cover {
7550   z-index: 6000;
7551 }
7552 .panel-left {
7553   left: 0;
7554 }
7555 .panel-left.panel-cover {
7556   transform: translate3d(-100%, 0, 0);
7557 }
7558 .panel-left.panel-cover:after {
7559   left: 100%;
7560   background: linear-gradient(to right, var(--f7-panel-shadow));
7561 }
7562 html.with-panel-left-cover .panel-left.panel-cover:after {
7563   opacity: 1;
7564 }
7565 .panel-left.panel-reveal:after {
7566   right: 100%;
7567   background: linear-gradient(to left, var(--f7-panel-shadow));
7568 }
7569 html.with-panel-left-reveal .panel-left.panel-reveal:after {
7570   opacity: 1;
7571   transform: translate3d(var(--f7-panel-width), 0, 0);
7572 }
7573 .panel-right {
7574   right: 0;
7575 }
7576 .panel-right.panel-cover {
7577   transform: translate3d(100%, 0, 0);
7578 }
7579 .panel-right.panel-cover:after {
7580   right: 100%;
7581   background: linear-gradient(to left, var(--f7-panel-shadow));
7582 }
7583 html.with-panel-right-cover .panel-right.panel-cover:after {
7584   opacity: 1;
7585 }
7586 .panel-right.panel-reveal:after {
7587   left: 100%;
7588   background: linear-gradient(to right, var(--f7-panel-shadow));
7589 }
7590 html.with-panel-right-reveal .panel-right.panel-reveal:after {
7591   opacity: 1;
7592   transform: translate3d(calc(-1 * (var(--f7-panel-width))), 0, 0);
7593 }
7594 .panel-visible-by-breakpoint {
7595   display: block;
7596   transform: translate3d(0, 0, 0) !important;
7597 }
7598 .panel-visible-by-breakpoint:after {
7599   display: none;
7600 }
7601 .panel-visible-by-breakpoint.panel-cover {
7602   z-index: 5900;
7603 }
7604 html.with-panel-left-reveal .views,
7605 html.with-panel-right-reveal .views,
7606 html.with-panel-transitioning .views,
7607 html.with-panel-left-reveal .framework7-root > .view,
7608 html.with-panel-right-reveal .framework7-root > .view,
7609 html.with-panel-transitioning .framework7-root > .view {
7610   transition-duration: var(--f7-panel-transition-duration);
7611   transition-property: transform;
7612 }
7613 html.with-panel-left-reveal .panel-backdrop,
7614 html.with-panel-right-reveal .panel-backdrop,
7615 html.with-panel-transitioning .panel-backdrop {
7616   background: rgba(0, 0, 0, 0);
7617   display: block;
7618   opacity: 0;
7619 }
7620 html.with-panel .framework7-root > .views .page-content,
7621 html.with-panel .framework7-root > .view .page-content {
7622   overflow: hidden;
7623   -webkit-overflow-scrolling: auto;
7624 }
7625 html.with-panel-left-cover .panel-backdrop,
7626 html.with-panel-right-cover .panel-backdrop {
7627   display: block;
7628   opacity: 1;
7629 }
7630 html.with-panel-left-reveal .views,
7631 html.with-panel-left-reveal .framework7-root > .view,
7632 html.with-panel-left-reveal .panel-backdrop {
7633   transform: translate3d(var(--f7-panel-width), 0, 0);
7634 }
7635 html.with-panel-right-reveal .views,
7636 html.with-panel-right-reveal .framework7-root > .view,
7637 html.with-panel-right-reveal .panel-backdrop {
7638   transform: translate3d(calc(-1 * var(--f7-panel-width)), 0, 0);
7639 }
7640 html.with-panel-left-cover .panel-left {
7641   transform: translate3d(0px, 0, 0);
7642 }
7643 html.with-panel-right-cover .panel-right {
7644   transform: translate3d(0px, 0, 0);
7645 }
7646 /* === Card === */
7647 :root {
7648   --f7-card-bg-color: #fff;
7649   --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
7650   --f7-card-border-radius: 4px;
7651   --f7-card-font-size: inherit;
7652   --f7-card-header-text-color: inherit;
7653   --f7-card-header-font-weight: 400;
7654   --f7-card-header-border-color: #e1e1e1;
7655   --f7-card-footer-border-color: #e1e1e1;
7656   --f7-card-footer-font-weight: 400;
7657   --f7-card-footer-font-size: inherit;
7658   --f7-card-expandable-bg-color: #fff;
7659   --f7-card-expandable-font-size: 16px;
7660   --f7-card-expandable-tablet-width: 670px;
7661   --f7-card-expandable-tablet-height: 670px;
7662 }
7663 :root .theme-dark,
7664 :root.theme-dark {
7665   --f7-card-bg-color: #1c1c1d;
7666   --f7-card-outline-border-color: #282829;
7667   --f7-card-header-border-color: #282829;
7668   --f7-card-footer-border-color: #282829;
7669   --f7-card-footer-text-color: #8E8E93;
7670 }
7671 .ios {
7672   --f7-card-margin-horizontal: 10px;
7673   --f7-card-margin-vertical: 10px;
7674   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
7675   --f7-card-content-padding-horizontal: 15px;
7676   --f7-card-content-padding-vertical: 15px;
7677   --f7-card-header-font-size: 17px;
7678   --f7-card-header-padding-vertical: 10px;
7679   --f7-card-header-padding-horizontal: 15px;
7680   --f7-card-header-min-height: 44px;
7681   --f7-card-footer-text-color: #6d6d72;
7682   --f7-card-footer-padding-vertical: 10px;
7683   --f7-card-footer-padding-horizontal: 15px;
7684   --f7-card-footer-min-height: 44px;
7685   --f7-card-expandable-margin-horizontal: 20px;
7686   --f7-card-expandable-margin-vertical: 30px;
7687   --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
7688   --f7-card-expandable-border-radius: 15px;
7689   --f7-card-expandable-tablet-border-radius: 5px;
7690   --f7-card-expandable-header-font-size: 27px;
7691   --f7-card-expandable-header-font-weight: bold;
7692 }
7693 .md {
7694   --f7-card-margin-horizontal: 8px;
7695   --f7-card-margin-vertical: 8px;
7696   --f7-card-box-shadow: var(--f7-elevation-1);
7697   --f7-card-content-padding-horizontal: 16px;
7698   --f7-card-content-padding-vertical: 16px;
7699   --f7-card-header-font-size: 16px;
7700   --f7-card-header-padding-vertical: 4px;
7701   --f7-card-header-padding-horizontal: 16px;
7702   --f7-card-header-min-height: 48px;
7703   --f7-card-footer-text-color: #757575;
7704   --f7-card-footer-padding-vertical: 4px;
7705   --f7-card-footer-padding-horizontal: 16px;
7706   --f7-card-footer-min-height: 48px;
7707   --f7-card-expandable-margin-horizontal: 12px;
7708   --f7-card-expandable-margin-vertical: 24px;
7709   --f7-card-expandable-box-shadow: var(--f7-elevation-10);
7710   --f7-card-expandable-border-radius: 8px;
7711   --f7-card-expandable-tablet-border-radius: 4px;
7712   --f7-card-expandable-header-font-size: 24px;
7713   --f7-card-expandable-header-font-weight: 500;
7714 }
7715 .cards-list > ul:before,
7716 .card .list > ul:before {
7717   display: none !important;
7718 }
7719 .cards-list > ul:after,
7720 .card .list > ul:after {
7721   display: none !important;
7722 }
7723 .cards-list ul,
7724 .card .list ul {
7725   background: none;
7726 }
7727 .card {
7728   background: var(--f7-card-bg-color);
7729   position: relative;
7730   border-radius: var(--f7-card-border-radius);
7731   font-size: var(--f7-card-font-size);
7732   margin-top: var(--f7-card-margin-vertical);
7733   margin-bottom: var(--f7-card-margin-vertical);
7734   margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
7735   margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
7736   box-shadow: var(--f7-card-box-shadow);
7737 }
7738 .card .list,
7739 .card .block {
7740   margin: 0;
7741 }
7742 .row:not(.no-gap) .col > .card {
7743   margin-left: 0;
7744   margin-right: 0;
7745 }
7746 .card.no-shadow {
7747   box-shadow: none;
7748 }
7749 .card-outline,
7750 .ios .card-outline-ios,
7751 .md .card-outline-md {
7752   box-shadow: none;
7753   border: 1px solid var(--f7-card-outline-border-color);
7754 }
7755 .card-outline.no-border,
7756 .ios .card-outline-ios.no-border,
7757 .md .card-outline-md.no-border,
7758 .card-outline.no-hairlines,
7759 .ios .card-outline-ios.no-hairlines,
7760 .md .card-outline-md.no-hairlines {
7761   border: none;
7762 }
7763 .card-content {
7764   position: relative;
7765 }
7766 .card-content-padding {
7767   position: relative;
7768   padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
7769 }
7770 .card-content-padding > .list,
7771 .card-content-padding > .block {
7772   margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
7773 }
7774 .card-content-padding > p:first-child {
7775   margin-top: 0;
7776 }
7777 .card-content-padding > p:last-child {
7778   margin-bottom: 0;
7779 }
7780 .card-header {
7781   min-height: var(--f7-card-header-min-height);
7782   color: var(--f7-card-header-text-color);
7783   font-size: var(--f7-card-header-font-size);
7784   font-weight: var(--f7-card-header-font-weight);
7785   padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
7786 }
7787 .card-footer {
7788   min-height: var(--f7-card-footer-min-height);
7789   color: var(--f7-card-footer-text-color);
7790   font-size: var(--f7-card-footer-font-size);
7791   font-weight: var(--f7-card-footer-font-weight);
7792   padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
7793 }
7794 .card-footer a.link {
7795   overflow: hidden;
7796 }
7797 .card-header,
7798 .card-footer {
7799   position: relative;
7800   box-sizing: border-box;
7801   display: flex;
7802   justify-content: space-between;
7803   align-items: center;
7804 }
7805 .card-header[valign="top"],
7806 .card-footer[valign="top"] {
7807   align-items: flex-start;
7808 }
7809 .card-header[valign="bottom"],
7810 .card-footer[valign="bottom"] {
7811   align-items: flex-end;
7812 }
7813 .card-header a.link,
7814 .card-footer a.link {
7815   position: relative;
7816 }
7817 .card-header a.link i.icon,
7818 .card-footer a.link i.icon {
7819   display: block;
7820 }
7821 .card-header a.icon-only,
7822 .card-footer a.icon-only {
7823   display: flex;
7824   justify-content: center;
7825   align-items: center;
7826   margin: 0;
7827 }
7828 .card-header {
7829   border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
7830 }
7831 .card-header:after {
7832   content: '';
7833   position: absolute;
7834   background-color: var(--f7-card-header-border-color);
7835   display: block;
7836   z-index: 15;
7837   top: auto;
7838   right: auto;
7839   bottom: 0;
7840   left: 0;
7841   height: 1px;
7842   width: 100%;
7843   transform-origin: 50% 100%;
7844   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7845 }
7846 .card-header.no-hairline:after {
7847   display: none !important;
7848 }
7849 .card-footer {
7850   border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
7851 }
7852 .card-footer:before {
7853   content: '';
7854   position: absolute;
7855   background-color: var(--f7-card-footer-border-color);
7856   display: block;
7857   z-index: 15;
7858   top: 0;
7859   right: auto;
7860   bottom: auto;
7861   left: 0;
7862   height: 1px;
7863   width: 100%;
7864   transform-origin: 50% 0%;
7865   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7866 }
7867 .card-footer.no-hairline:before {
7868   display: none !important;
7869 }
7870 .card-expandable {
7871   overflow: hidden;
7872   height: 300px;
7873   background: var(--f7-card-expandable-bg-color);
7874   position: relative;
7875   transform-origin: center center;
7876   transition-property: transform, border-radius;
7877   border-radius: var(--f7-card-expandable-border-radius);
7878   z-index: 2;
7879   transition-duration: 200ms;
7880   margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
7881   margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
7882   margin-top: var(--f7-card-expandable-margin-vertical);
7883   margin-bottom: var(--f7-card-expandable-margin-vertical);
7884   box-shadow: var(--f7-card-expandable-box-shadow);
7885   font-size: var(--f7-card-expandable-font-size);
7886 }
7887 .card-expandable.card-no-transition {
7888   transition-duration: 0ms;
7889 }
7890 .card-expandable.card-expandable-animate-width .card-content {
7891   transition-property: width, transform;
7892   width: 100%;
7893 }
7894 .card-expandable.active-state {
7895   transform: scale(0.97);
7896 }
7897 .card-expandable .card-opened-fade-in,
7898 .card-expandable .card-opened-fade-out {
7899   transition-duration: 400ms;
7900 }
7901 .card-expandable .card-opened-fade-in {
7902   opacity: 0;
7903   pointer-events: none;
7904 }
7905 .card-expandable .card-content {
7906   position: absolute;
7907   top: 0;
7908   width: 100vw;
7909   height: 100vh;
7910   transform-origin: center top;
7911   overflow: hidden;
7912   transition-property: transform;
7913   box-sizing: border-box;
7914   pointer-events: none;
7915   left: 0;
7916 }
7917 .card-expandable .card-content .card-content-padding {
7918   padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
7919   padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
7920 }
7921 .card-expandable.card-opened {
7922   transition-duration: 0ms;
7923 }
7924 .card-expandable.card-opening,
7925 .card-expandable.card-closing,
7926 .card-expandable.card-transitioning {
7927   transition-duration: 400ms;
7928 }
7929 .card-expandable.card-opening .card-content {
7930   transition-duration: 300ms;
7931 }
7932 .card-expandable.card-closing .card-content {
7933   transition-duration: 500ms;
7934 }
7935 .card-expandable.card-opening,
7936 .card-expandable.card-opened,
7937 .card-expandable.card-closing {
7938   z-index: 100;
7939 }
7940 .card-expandable.card-opening,
7941 .card-expandable.card-opened {
7942   border-radius: 0;
7943 }
7944 .card-expandable.card-opening .card-opened-fade-in,
7945 .card-expandable.card-opened .card-opened-fade-in {
7946   opacity: 1;
7947   pointer-events: auto;
7948 }
7949 .card-expandable.card-opening .card-opened-fade-out,
7950 .card-expandable.card-opened .card-opened-fade-out {
7951   opacity: 0;
7952   pointer-events: none;
7953 }
7954 .card-expandable.card-opened .card-content {
7955   overflow: auto;
7956   -webkit-overflow-scrolling: touch;
7957   pointer-events: auto;
7958 }
7959 .card-expandable .card-header {
7960   font-size: var(--f7-card-expandable-header-font-size);
7961   font-weight: var(--f7-card-expandable-header-font-weight);
7962 }
7963 .card-expandable .card-header:after {
7964   display: none !important;
7965 }
7966 .card-prevent-open {
7967   pointer-events: auto;
7968 }
7969 .card-expandable-size {
7970   width: 0;
7971   height: 0;
7972   position: absolute;
7973   left: 0;
7974   top: 0;
7975   opacity: 0;
7976   pointer-events: none;
7977   visibility: hidden;
7978 }
7979 @media (min-width: 768px) and (min-height: 670px) {
7980   .card-expandable:not(.card-tablet-fullscreen) {
7981     max-width: var(--f7-card-expandable-tablet-width);
7982   }
7983   .card-expandable:not(.card-tablet-fullscreen).card-opened,
7984   .card-expandable:not(.card-tablet-fullscreen).card-opening {
7985     border-radius: var(--f7-card-expandable-tablet-border-radius);
7986   }
7987   .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
7988     width: var(--f7-card-expandable-tablet-width);
7989   }
7990   .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
7991     width: var(--f7-card-expandable-tablet-width);
7992     height: var(--f7-card-expandable-tablet-height);
7993   }
7994 }
7995 .page.page-with-card-opened .page-content {
7996   overflow: hidden;
7997 }
7998 .card-backdrop {
7999   position: fixed;
8000   left: 0;
8001   top: 0;
8002   width: 100%;
8003   height: 100%;
8004   z-index: 99;
8005   pointer-events: none;
8006   background: rgba(0, 0, 0, 0.2);
8007   opacity: 0;
8008 }
8009 .card-backdrop-in {
8010   animation: card-backdrop-fade-in 400ms forwards;
8011   pointer-events: auto;
8012 }
8013 .card-backdrop-out {
8014   animation: card-backdrop-fade-out 400ms forwards;
8015 }
8016 @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
8017   .card-backdrop {
8018     background: transparent;
8019     opacity: 1;
8020   }
8021   .card-backdrop-in {
8022     animation: card-backdrop-blur-in 400ms forwards;
8023   }
8024   .card-backdrop-out {
8025     animation: card-backdrop-blur-out 400ms forwards;
8026   }
8027 }
8028 @keyframes card-backdrop-fade-in {
8029   from {
8030     opacity: 0;
8031   }
8032   to {
8033     opacity: 1;
8034   }
8035 }
8036 @keyframes card-backdrop-fade-out {
8037   from {
8038     opacity: 1;
8039   }
8040   to {
8041     opacity: 0;
8042   }
8043 }
8044 @keyframes card-backdrop-blur-in {
8045   from {
8046     -webkit-backdrop-filter: blur(0px);
8047             backdrop-filter: blur(0px);
8048   }
8049   to {
8050     -webkit-backdrop-filter: blur(15px);
8051             backdrop-filter: blur(15px);
8052   }
8053 }
8054 @keyframes card-backdrop-blur-out {
8055   from {
8056     -webkit-backdrop-filter: blur(15px);
8057             backdrop-filter: blur(15px);
8058   }
8059   to {
8060     -webkit-backdrop-filter: blur(0px);
8061             backdrop-filter: blur(0px);
8062   }
8063 }
8064 /* === Chips === */
8065 :root {
8066   --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
8067   --f7-chip-font-size: 13px;
8068   --f7-chip-font-weight: normal;
8069   --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
8070   --f7-chip-media-font-size: 16px;
8071   --f7-chip-delete-button-color: #000;
8072 }
8073 :root .theme-dark,
8074 :root.theme-dark {
8075   --f7-chip-delete-button-color: #fff;
8076   --f7-chip-bg-color: #333;
8077   --f7-chip-outline-border-color: #333;
8078 }
8079 .ios {
8080   --f7-chip-text-color: #000;
8081   --f7-chip-height: 24px;
8082   --f7-chip-padding-horizontal: 10px;
8083 }
8084 .ios .theme-dark,
8085 .ios.theme-dark {
8086   --f7-chip-text-color: #fff;
8087 }
8088 .md {
8089   --f7-chip-text-color: rgba(0, 0, 0, 0.87);
8090   --f7-chip-height: 32px;
8091   --f7-chip-padding-horizontal: 12px;
8092 }
8093 .md .theme-dark,
8094 .md.theme-dark {
8095   --f7-chip-text-color: rgba(255, 255, 255, 0.87);
8096 }
8097 .chip {
8098   padding-left: var(--f7-chip-padding-horizontal);
8099   padding-right: var(--f7-chip-padding-horizontal);
8100   font-weight: var(--f7-chip-font-weight);
8101   display: inline-flex;
8102   box-sizing: border-box;
8103   vertical-align: middle;
8104   align-items: center;
8105   margin: 2px 0;
8106   background-color: var(--f7-chip-bg-color);
8107   font-size: var(--f7-chip-font-size);
8108   color: var(--f7-chip-text-color);
8109   height: var(--f7-chip-height);
8110   line-height: var(--f7-chip-height);
8111   border-radius: var(--f7-chip-height);
8112   position: relative;
8113 }
8114 .chip-media {
8115   border-radius: 50%;
8116   flex-shrink: 0;
8117   display: flex;
8118   align-items: center;
8119   justify-content: center;
8120   height: var(--f7-chip-height);
8121   width: var(--f7-chip-height);
8122   border-radius: var(--f7-chip-height);
8123   text-align: center;
8124   line-height: var(--f7-chip-height);
8125   box-sizing: border-box;
8126   color: #fff;
8127   font-size: var(--f7-chip-media-font-size);
8128   vertical-align: middle;
8129   margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
8130 }
8131 .chip-media i.icon {
8132   font-size: calc(var(--f7-chip-height) - 8px);
8133   height: calc(var(--f7-chip-height) - 8px);
8134 }
8135 .chip-media img {
8136   max-width: 100%;
8137   max-height: 100%;
8138   width: auto;
8139   height: auto;
8140   border-radius: 50%;
8141   display: block;
8142 }
8143 .chip-media + .chip-label {
8144   margin-left: 4px;
8145 }
8146 .chip-label {
8147   white-space: nowrap;
8148   overflow: hidden;
8149   text-overflow: ellipsis;
8150   position: relative;
8151   flex-shrink: 1;
8152   min-width: 0;
8153 }
8154 .chip-delete {
8155   text-align: center;
8156   cursor: pointer;
8157   flex-shrink: 0;
8158   background-repeat: no-repeat;
8159   width: 24px;
8160   height: 24px;
8161   color: var(--f7-chip-delete-button-color);
8162   opacity: 0.54;
8163   position: relative;
8164 }
8165 .chip-delete:after {
8166   font-family: 'framework7-core-icons';
8167   font-weight: normal;
8168   font-style: normal;
8169   line-height: 1;
8170   letter-spacing: normal;
8171   text-transform: none;
8172   white-space: nowrap;
8173   word-wrap: normal;
8174   direction: ltr;
8175   -webkit-font-smoothing: antialiased;
8176   text-rendering: optimizeLegibility;
8177   -moz-osx-font-smoothing: grayscale;
8178   -moz-font-feature-settings: "liga";
8179        font-feature-settings: "liga";
8180   text-align: center;
8181   display: block;
8182   width: 100%;
8183   height: 100%;
8184   font-size: 20px;
8185   content: 'delete_round_ios';
8186   line-height: 24px;
8187 }
8188 .chip .chip-delete.active-state {
8189   opacity: 1;
8190 }
8191 .chip-outline,
8192 .ios .chip-outline-ios,
8193 .md .chip-outline-md {
8194   border: 1px solid var(--f7-chip-outline-border-color);
8195   background: none;
8196 }
8197 .chip[class*="color-"] {
8198   --f7-chip-bg-color: var(--f7-theme-color);
8199   --f7-chip-text-color: #fff;
8200 }
8201 .chip-outline[class*="color-"],
8202 .ios .chip-outline-ios[class*="color-"],
8203 .md .chip-outline-md[class*="color-"] {
8204   --f7-chip-outline-border-color: var(--f7-theme-color);
8205   --f7-chip-text-color: var(--f7-theme-color);
8206 }
8207 .ios .chip-delete {
8208   margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
8209 }
8210 .ios .chip-delete:after {
8211   font-size: 10px;
8212 }
8213 .md .chip-label + .chip-delete {
8214   margin-left: 4px;
8215 }
8216 .md .chip-delete {
8217   margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
8218 }
8219 .md .chip-delete:after {
8220   font-size: 12px;
8221 }
8222 /* === Form === */
8223 /* === Input === */
8224 :root {
8225   --f7-label-font-size: 12px;
8226   --f7-label-font-weight: 400;
8227   --f7-label-line-height: 1.2;
8228   --f7-input-error-text-color: #ff3b30;
8229   --f7-input-error-font-size: 12px;
8230   --f7-input-error-line-height: 1.4;
8231   --f7-input-error-font-weight: 400;
8232   --f7-input-info-font-size: 12px;
8233   --f7-input-info-line-height: 1.4;
8234 }
8235 .ios {
8236   --f7-input-height: 44px;
8237   --f7-input-text-color: #000000;
8238   --f7-input-font-size: 17px;
8239   --f7-input-placeholder-color: #a9a9a9;
8240   /*
8241   --f7-input-focused-border-color: var(--f7-list-item-border-color);
8242   --f7-input-invalid-border-color: var(--f7-list-item-border-color);
8243   --f7-input-invalid-text-color: var(--f7-input-error-text-color);
8244   */
8245   --f7-label-text-color: inherit;
8246   /*
8247   --f7-label-focused-text-color: var(--f7-label-text-color);
8248   --f7-label-invalid-text-color: var(--f7-label-text-color);
8249   */
8250   --f7-floating-label-scale: calc(17 / 12);
8251   --f7-inline-label-font-size: 17px;
8252   --f7-inline-label-line-height: 1.4;
8253   --f7-input-info-text-color: #8e8e93;
8254   --f7-input-clear-button-size: 14px;
8255   --f7-input-clear-button-color: #8e8e93;
8256 }
8257 .ios .theme-dark,
8258 .ios.theme-dark {
8259   --f7-input-text-color: #fff;
8260 }
8261 .md {
8262   --f7-input-height: 36px;
8263   --f7-input-text-color: #212121;
8264   --f7-input-font-size: 16px;
8265   --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
8266   /*
8267   --f7-input-focused-border-color: var(--f7-theme-color);
8268   --f7-input-invalid-border-color: var(--f7-input-error-text-color);
8269   --f7-input-invalid-text-color: var(--f7-input-text-color);
8270   */
8271   --f7-label-text-color: rgba(0, 0, 0, 0.65);
8272   /*
8273   --f7-label-focused-text-color: var(--f7-theme-color);
8274   --f7-label-invalid-text-color: var(--f7-input-error-text-color );
8275   */
8276   --f7-floating-label-scale: calc(16 / 12);
8277   --f7-inline-label-font-size: 16px;
8278   --f7-inline-label-line-height: 1.5;
8279   --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
8280   --f7-input-clear-button-size: 24px;
8281   --f7-input-clear-button-color: #aaa;
8282 }
8283 .md .theme-dark,
8284 .md.theme-dark {
8285   --f7-input-text-color: rgba(255, 255, 255, 0.87);
8286   --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
8287   --f7-label-text-color: rgba(255, 255, 255, 0.54);
8288   --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
8289 }
8290 input[type="text"],
8291 input[type="password"],
8292 input[type="search"],
8293 input[type="email"],
8294 input[type="tel"],
8295 input[type="url"],
8296 input[type="date"],
8297 input[type="datetime-local"],
8298 input[type="time"],
8299 input[type="number"],
8300 select,
8301 textarea {
8302   box-sizing: border-box;
8303   -webkit-appearance: none;
8304      -moz-appearance: none;
8305           appearance: none;
8306   border: none;
8307   box-shadow: none;
8308   border-radius: 0;
8309   outline: 0;
8310   display: block;
8311   padding: 0;
8312   margin: 0;
8313   font-family: inherit;
8314   background: none;
8315   resize: none;
8316   font-size: inherit;
8317   color: inherit;
8318 }
8319 .textarea-resizable-shadow {
8320   opacity: 0;
8321   position: absolute;
8322   z-index: -1000;
8323   pointer-events: none;
8324   left: -1000px;
8325   top: -1000px;
8326   visibility: hidden;
8327 }
8328 .list input[type="text"],
8329 .list input[type="password"],
8330 .list input[type="search"],
8331 .list input[type="email"],
8332 .list input[type="tel"],
8333 .list input[type="url"],
8334 .list input[type="date"],
8335 .list input[type="datetime-local"],
8336 .list input[type="time"],
8337 .list input[type="number"],
8338 .list select {
8339   width: 100%;
8340   height: var(--f7-input-height);
8341   color: var(--f7-input-text-color);
8342   font-size: var(--f7-input-font-size);
8343 }
8344 .list input[type="text"]::-webkit-input-placeholder,
8345 .list input[type="password"]::-webkit-input-placeholder,
8346 .list input[type="search"]::-webkit-input-placeholder,
8347 .list input[type="email"]::-webkit-input-placeholder,
8348 .list input[type="tel"]::-webkit-input-placeholder,
8349 .list input[type="url"]::-webkit-input-placeholder,
8350 .list input[type="date"]::-webkit-input-placeholder,
8351 .list input[type="datetime-local"]::-webkit-input-placeholder,
8352 .list input[type="time"]::-webkit-input-placeholder,
8353 .list input[type="number"]::-webkit-input-placeholder,
8354 .list select::-webkit-input-placeholder {
8355   color: var(--f7-input-placeholder-color);
8356 }
8357 .list input[type="text"]::-moz-placeholder,
8358 .list input[type="password"]::-moz-placeholder,
8359 .list input[type="search"]::-moz-placeholder,
8360 .list input[type="email"]::-moz-placeholder,
8361 .list input[type="tel"]::-moz-placeholder,
8362 .list input[type="url"]::-moz-placeholder,
8363 .list input[type="date"]::-moz-placeholder,
8364 .list input[type="datetime-local"]::-moz-placeholder,
8365 .list input[type="time"]::-moz-placeholder,
8366 .list input[type="number"]::-moz-placeholder,
8367 .list select::-moz-placeholder {
8368   color: var(--f7-input-placeholder-color);
8369 }
8370 .list input[type="text"]::-ms-input-placeholder,
8371 .list input[type="password"]::-ms-input-placeholder,
8372 .list input[type="search"]::-ms-input-placeholder,
8373 .list input[type="email"]::-ms-input-placeholder,
8374 .list input[type="tel"]::-ms-input-placeholder,
8375 .list input[type="url"]::-ms-input-placeholder,
8376 .list input[type="date"]::-ms-input-placeholder,
8377 .list input[type="datetime-local"]::-ms-input-placeholder,
8378 .list input[type="time"]::-ms-input-placeholder,
8379 .list input[type="number"]::-ms-input-placeholder,
8380 .list select::-ms-input-placeholder {
8381   color: var(--f7-input-placeholder-color);
8382 }
8383 .list input[type="text"]::placeholder,
8384 .list input[type="password"]::placeholder,
8385 .list input[type="search"]::placeholder,
8386 .list input[type="email"]::placeholder,
8387 .list input[type="tel"]::placeholder,
8388 .list input[type="url"]::placeholder,
8389 .list input[type="date"]::placeholder,
8390 .list input[type="datetime-local"]::placeholder,
8391 .list input[type="time"]::placeholder,
8392 .list input[type="number"]::placeholder,
8393 .list select::placeholder {
8394   color: var(--f7-input-placeholder-color);
8395 }
8396 .list textarea {
8397   width: 100%;
8398   color: var(--f7-input-text-color);
8399   font-size: var(--f7-input-font-size);
8400   resize: none;
8401   line-height: 1.4;
8402   height: 100px;
8403 }
8404 .list textarea::-webkit-input-placeholder {
8405   color: var(--f7-input-placeholder-color);
8406 }
8407 .list textarea::-moz-placeholder {
8408   color: var(--f7-input-placeholder-color);
8409 }
8410 .list textarea::-ms-input-placeholder {
8411   color: var(--f7-input-placeholder-color);
8412 }
8413 .list textarea::placeholder {
8414   color: var(--f7-input-placeholder-color);
8415 }
8416 .list textarea.resizable {
8417   height: var(--f7-input-height);
8418 }
8419 .list input[type="datetime-local"] {
8420   max-width: 50vw;
8421 }
8422 .list input[type="date"],
8423 .list input[type="datetime-local"] {
8424   line-height: var(--f7-input-height);
8425 }
8426 .list .item-label,
8427 .list .item-floating-label {
8428   width: 100%;
8429   vertical-align: top;
8430   flex-shrink: 0;
8431   font-size: var(--f7-label-font-size);
8432   font-weight: var(--f7-label-font-weight);
8433   line-height: var(--f7-label-line-height);
8434   color: var(--f7-label-text-color);
8435   transition-duration: 200ms;
8436   transition-property: transform, color;
8437 }
8438 .list .item-floating-label {
8439   transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-input-height) / 2));
8440   color: var(--f7-input-placeholder-color);
8441   width: auto;
8442   max-width: calc(100% / var(--f7-floating-label-scale));
8443   pointer-events: none;
8444   transform-origin: left bottom;
8445 }
8446 .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder,
8447 .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
8448   opacity: 0;
8449   transition-duration: 100ms;
8450 }
8451 .list .item-floating-label ~ .item-input-wrap input::-moz-placeholder,
8452 .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
8453   opacity: 0;
8454   transition-duration: 100ms;
8455 }
8456 .list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder,
8457 .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
8458   opacity: 0;
8459   transition-duration: 100ms;
8460 }
8461 .list .item-floating-label ~ .item-input-wrap input::placeholder,
8462 .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
8463   opacity: 0;
8464   transition-duration: 100ms;
8465 }
8466 .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder,
8467 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
8468   opacity: 1;
8469   transition-duration: 300ms;
8470 }
8471 .list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder,
8472 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
8473   opacity: 1;
8474   transition-duration: 300ms;
8475 }
8476 .list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder,
8477 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
8478   opacity: 1;
8479   transition-duration: 300ms;
8480 }
8481 .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
8482 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
8483   opacity: 1;
8484   transition-duration: 300ms;
8485 }
8486 .list .item-input-with-value .item-floating-label {
8487   color: var(--f7-label-text-color);
8488 }
8489 .list .item-input-with-value .item-floating-label,
8490 .list .item-input-focused .item-floating-label {
8491   transform: scale(1) translateY(0);
8492 }
8493 .list .item-input-wrap {
8494   width: 100%;
8495   flex-shrink: 1;
8496   position: relative;
8497 }
8498 .item-input .item-inner {
8499   display: block;
8500 }
8501 .item-input-error-message,
8502 .input-error-message {
8503   font-size: var(--f7-input-error-font-size);
8504   line-height: var(--f7-input-error-line-height);
8505   color: var(--f7-input-error-text-color);
8506   font-weight: var(--f7-input-error-font-weight);
8507   display: none;
8508 }
8509 .item-input-info,
8510 .input-info {
8511   font-size: var(--f7-input-info-font-size);
8512   line-height: var(--f7-input-info-line-height);
8513   color: var(--f7-input-info-text-color);
8514 }
8515 .item-input-invalid .item-input-error-message,
8516 .input-invalid .item-input-error-message,
8517 .item-input-invalid .input-error-message,
8518 .input-invalid .input-error-message {
8519   display: block;
8520 }
8521 .item-input-invalid .item-input-info,
8522 .input-invalid .item-input-info,
8523 .item-input-invalid .input-info,
8524 .input-invalid .input-info {
8525   display: none;
8526 }
8527 .inline-labels .item-inner,
8528 .inline-label .item-inner {
8529   display: flex;
8530 }
8531 .inline-labels .item-label,
8532 .inline-label .item-label,
8533 .inline-labels .item-floating-label,
8534 .inline-label .item-floating-label {
8535   align-self: flex-start;
8536   width: 35%;
8537   font-size: var(--f7-inline-label-font-size);
8538   line-height: var(--f7-inline-label-line-height);
8539 }
8540 .inline-labels .item-label + .item-input-wrap,
8541 .inline-label .item-label + .item-input-wrap,
8542 .inline-labels .item-floating-label + .item-input-wrap,
8543 .inline-label .item-floating-label + .item-input-wrap {
8544   margin-left: 8px;
8545 }
8546 .input {
8547   position: relative;
8548 }
8549 .input input,
8550 .input select,
8551 .input textarea {
8552   width: 100%;
8553 }
8554 .input-clear-button {
8555   opacity: 0;
8556   pointer-events: none;
8557   visibility: hidden;
8558   transition-duration: 100ms;
8559   position: absolute;
8560   top: 50%;
8561   border: none;
8562   padding: 0;
8563   margin: 0;
8564   outline: 0;
8565   z-index: 1;
8566   cursor: pointer;
8567   background: none;
8568   width: var(--f7-input-clear-button-size);
8569   height: var(--f7-input-clear-button-size);
8570   margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
8571   color: var(--f7-input-clear-button-color);
8572   right: 0;
8573 }
8574 .input-clear-button:after {
8575   font-family: 'framework7-core-icons';
8576   font-weight: normal;
8577   font-style: normal;
8578   line-height: 1;
8579   letter-spacing: normal;
8580   text-transform: none;
8581   white-space: nowrap;
8582   word-wrap: normal;
8583   direction: ltr;
8584   -webkit-font-smoothing: antialiased;
8585   text-rendering: optimizeLegibility;
8586   -moz-osx-font-smoothing: grayscale;
8587   -moz-font-feature-settings: "liga";
8588        font-feature-settings: "liga";
8589   text-align: center;
8590   display: block;
8591   width: 100%;
8592   height: 100%;
8593   font-size: 20px;
8594 }
8595 .input-clear-button:before {
8596   position: absolute;
8597   content: '';
8598   left: 50%;
8599   top: 50%;
8600 }
8601 .item-input-wrap .input-clear-button {
8602   top: calc(var(--f7-input-height) / 2);
8603 }
8604 .input-with-value ~ .input-clear-button,
8605 .item-input-with-value .input-clear-button,
8606 .input-with-value .input-clear-button {
8607   opacity: 1;
8608   pointer-events: auto;
8609   visibility: visible;
8610 }
8611 .input-dropdown-wrap,
8612 .input-dropdown {
8613   position: relative;
8614 }
8615 .input-dropdown-wrap:before,
8616 .input-dropdown:before {
8617   content: '';
8618   pointer-events: none;
8619   position: absolute;
8620   top: 50%;
8621   margin-top: -2px;
8622   width: 0;
8623   height: 0;
8624   border-left: 4px solid transparent;
8625   border-right: 4px solid transparent;
8626   border-top: 5px solid #727272;
8627   right: 6px;
8628 }
8629 .input-dropdown-wrap select,
8630 .input-dropdown select,
8631 .input-dropdown-wrap input,
8632 .input-dropdown input,
8633 .input-dropdown-wrap textarea,
8634 .input-dropdown textarea {
8635   padding-right: 20px;
8636 }
8637 .ios .list textarea {
8638   padding-top: 11px;
8639   padding-bottom: 11px;
8640 }
8641 .ios .item-label + .item-input-wrap,
8642 .ios .item-floating-label + .item-input-wrap {
8643   margin-top: 0;
8644 }
8645 .ios .item-input-focused .item-floating-label {
8646   color: var(--f7-label-text-color);
8647 }
8648 .ios .item-input .item-media {
8649   align-self: flex-start;
8650 }
8651 .ios .item-input-wrap {
8652   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8653   margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
8654 }
8655 .ios .inline-labels .item-label,
8656 .ios .inline-label .item-label,
8657 .ios .inline-labels .item-floating-label,
8658 .ios .inline-label .item-floating-label {
8659   padding-top: 3px;
8660 }
8661 .ios .inline-labels .item-label + .item-input-wrap,
8662 .ios .inline-label .item-label + .item-input-wrap,
8663 .ios .inline-labels .item-floating-label + .item-input-wrap,
8664 .ios .inline-label .item-floating-label + .item-input-wrap {
8665   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8666 }
8667 .ios .inline-labels .item-input-wrap,
8668 .ios .inline-label .item-input-wrap {
8669   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8670 }
8671 .ios .item-input-error-message,
8672 .ios .item-input-info,
8673 .ios .input-error-message,
8674 .ios .input-info {
8675   position: relative;
8676   margin-bottom: 6px;
8677   margin-top: -8px;
8678 }
8679 .ios .item-input-focused .item-label,
8680 .ios .item-input-focused .item-floating-label {
8681   color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
8682 }
8683 .ios .item-input-focused .item-inner:after {
8684   background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
8685 }
8686 .ios .item-input-invalid .item-label,
8687 .ios .item-input-invalid .item-floating-label {
8688   color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
8689 }
8690 .ios .item-input-invalid .item-inner:after {
8691   background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
8692 }
8693 .ios .item-input-invalid input,
8694 .ios .input-invalid input,
8695 .ios .item-input-invalid select,
8696 .ios .input-invalid select,
8697 .ios .item-input-invalid textarea,
8698 .ios .input-invalid textarea {
8699   color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
8700 }
8701 .ios .input-clear-button:after {
8702   content: 'delete_round_ios';
8703   font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
8704   line-height: 1.4;
8705 }
8706 .ios .input-clear-button:before {
8707   width: 44px;
8708   height: 44px;
8709   margin-left: -22px;
8710   margin-top: -22px;
8711 }
8712 .md .list textarea {
8713   padding-top: 7px;
8714   padding-bottom: 7px;
8715 }
8716 .md .item-input-wrap:after,
8717 .md .input:after {
8718   content: '';
8719   position: absolute;
8720   background-color: var(--f7-list-item-border-color);
8721   display: block;
8722   z-index: 15;
8723   top: auto;
8724   right: auto;
8725   bottom: 0;
8726   left: 0;
8727   height: 1px;
8728   width: 100%;
8729   transform-origin: 50% 100%;
8730   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8731 }
8732 .md .item-input-wrap:after,
8733 .md .input:after {
8734   transition-duration: 200ms;
8735 }
8736 .md .item-input-wrap {
8737   min-height: var(--f7-input-height);
8738 }
8739 .md .item-input .item-media {
8740   align-self: flex-end;
8741 }
8742 .md .item-input .item-inner:after {
8743   display: none !important;
8744 }
8745 .md .inline-labels .item-media,
8746 .md .inline-label .item-media {
8747   align-self: flex-start;
8748   padding-top: 14px;
8749 }
8750 .md .inline-labels .item-label,
8751 .md .inline-label .item-label,
8752 .md .inline-labels .item-floating-label,
8753 .md .inline-label .item-floating-label {
8754   padding-top: 7px;
8755 }
8756 .md .item-input-with-error-message,
8757 .md .item-input-with-info,
8758 .md .input-with-error-message,
8759 .md .input-with-info {
8760   padding-bottom: 20px;
8761 }
8762 .md .item-input-error-message,
8763 .md .item-input-info,
8764 .md .input-error-message,
8765 .md .input-info {
8766   position: absolute;
8767   top: 100%;
8768   margin-top: 4px;
8769   white-space: nowrap;
8770   overflow: hidden;
8771   text-overflow: ellipsis;
8772   width: 100%;
8773   left: 0;
8774 }
8775 .md .item-input-focused .item-label,
8776 .md .item-input-focused .item-floating-label {
8777   color: var(--f7-label-focused-text-color, var(--f7-theme-color));
8778 }
8779 .md .item-input-focused .item-input-wrap:after,
8780 .md .input-focused:after {
8781   background: var(--f7-input-focused-border-color, var(--f7-theme-color));
8782 }
8783 .md .item-input-invalid .item-input-wrap:after,
8784 .md .item-input-focused .item-input-wrap:after,
8785 .md .input-invalid:after,
8786 .md .input-focused:after {
8787   transform: scaleY(2) !important;
8788 }
8789 .md .item-input-invalid .item-input-wrap:after,
8790 .md .input-invalid:after {
8791   background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
8792 }
8793 .md .item-input-invalid .item-label,
8794 .md .item-input-invalid .item-floating-label {
8795   color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
8796 }
8797 .md .item-input-invalid input,
8798 .md .input-invalid input,
8799 .md .item-input-invalid select,
8800 .md .input-invalid select,
8801 .md .item-input-invalid textarea,
8802 .md .input-invalid textarea {
8803   color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
8804 }
8805 .md .input-clear-button:after {
8806   font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
8807   content: 'delete_round_md';
8808   line-height: 1.2;
8809 }
8810 .md .input-clear-button:before {
8811   width: 48px;
8812   height: 48px;
8813   margin-left: -24px;
8814   margin-top: -24px;
8815 }
8816 /* === Checkbox === */
8817 :root {
8818   /* --f7-checkbox-active-color: var(--f7-theme-color); */
8819   --f7-checkbox-icon-color: #fff;
8820 }
8821 .ios {
8822   --f7-checkbox-size: 22px;
8823   --f7-checkbox-border-radius: 50%;
8824   --f7-checkbox-border-width: 1px;
8825   --f7-checkbox-inactive-color: #c7c7cc;
8826   --f7-checkbox-extra-margin: 0px;
8827 }
8828 .md {
8829   --f7-checkbox-size: 18px;
8830   --f7-checkbox-border-radius: 2px;
8831   --f7-checkbox-border-width: 2px;
8832   --f7-checkbox-inactive-color: #6d6d6d;
8833   --f7-checkbox-extra-margin: 22px;
8834 }
8835 .checkbox {
8836   position: relative;
8837   display: inline-block;
8838   vertical-align: middle;
8839   z-index: 1;
8840   background-color: transparent;
8841   --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
8842 }
8843 .icon-checkbox,
8844 .checkbox i {
8845   flex-shrink: 0;
8846   border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
8847   width: var(--f7-checkbox-size);
8848   height: var(--f7-checkbox-size);
8849   border-radius: var(--f7-checkbox-border-radius);
8850   box-sizing: border-box;
8851   position: relative;
8852   display: block;
8853 }
8854 .icon-checkbox:after,
8855 .checkbox i:after {
8856   font-family: 'framework7-core-icons';
8857   font-weight: normal;
8858   font-style: normal;
8859   line-height: 1;
8860   letter-spacing: normal;
8861   text-transform: none;
8862   white-space: nowrap;
8863   word-wrap: normal;
8864   direction: ltr;
8865   -webkit-font-smoothing: antialiased;
8866   text-rendering: optimizeLegibility;
8867   -moz-osx-font-smoothing: grayscale;
8868   -moz-font-feature-settings: "liga";
8869        font-feature-settings: "liga";
8870   text-align: center;
8871   display: block;
8872   width: 100%;
8873   height: 100%;
8874   font-size: 20px;
8875   width: var(--f7-checkbox-size);
8876   height: var(--f7-checkbox-size);
8877   line-height: var(--f7-checkbox-size);
8878   left: calc(0px - var(--f7-checkbox-border-width));
8879   top: calc(0px - var(--f7-checkbox-border-width));
8880   opacity: 0;
8881   color: var(--f7-checkbox-icon-color);
8882   position: relative;
8883 }
8884 label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
8885 label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
8886 .checkbox input[type="checkbox"]:checked ~ i {
8887   border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
8888   background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
8889 }
8890 label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
8891 label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
8892 .checkbox input[type="checkbox"]:checked ~ i:after {
8893   opacity: 1;
8894 }
8895 label.item-checkbox,
8896 .checkbox {
8897   cursor: pointer;
8898 }
8899 label.item-checkbox input[type="checkbox"],
8900 .checkbox input[type="checkbox"],
8901 label.item-checkbox input[type="radio"],
8902 .checkbox input[type="radio"] {
8903   display: none;
8904 }
8905 label.item-checkbox {
8906   transition-duration: 300ms;
8907 }
8908 label.item-checkbox .item-content .item-media,
8909 label.item-checkbox.item-content .item-media {
8910   align-self: center;
8911 }
8912 label.item-checkbox > .icon-checkbox {
8913   margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
8914 }
8915 label.item-checkbox.active-state {
8916   background-color: var(--f7-list-link-pressed-bg-color);
8917 }
8918 label.item-checkbox.active-state:after {
8919   background-color: transparent;
8920 }
8921 label.item-checkbox.disabled,
8922 .disabled label.item-checkbox {
8923   opacity: 0.55;
8924   pointer-events: none;
8925   opacity: 0.55 !important;
8926   pointer-events: none !important;
8927 }
8928 .ios .icon-checkbox:after,
8929 .ios .checkbox i:after {
8930   content: 'checkbox_ios';
8931   font-size: 21px;
8932 }
8933 .ios label.item-checkbox.active-state {
8934   transition-duration: 0ms;
8935 }
8936 .md .icon-checkbox,
8937 .md .checkbox i {
8938   transition-duration: 200ms;
8939 }
8940 .md .icon-checkbox:after,
8941 .md .checkbox i:after {
8942   content: 'checkbox_md';
8943   transition-duration: 200ms;
8944   font-size: 15px;
8945 }
8946 .md label.item-checkbox {
8947   position: relative;
8948   overflow: hidden;
8949   z-index: 0;
8950 }
8951 /* === Radio === */
8952 :root {
8953   /*
8954   --f7-radio-active-color: var(--f7-theme-color);
8955   */
8956   --f7-radio-border-radius: 50%;
8957 }
8958 .ios {
8959   --f7-radio-size: 22px;
8960   --f7-radio-border-width: 1px;
8961   --f7-radio-inactive-color: #c7c7cc;
8962   --f7-radio-extra-margin: 0px;
8963 }
8964 .md {
8965   --f7-radio-size: 20px;
8966   --f7-radio-border-width: 2px;
8967   --f7-radio-inactive-color: #6d6d6d;
8968   --f7-radio-extra-margin: 22px;
8969 }
8970 .radio {
8971   position: relative;
8972   display: inline-block;
8973   vertical-align: middle;
8974   z-index: 1;
8975   --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
8976 }
8977 .icon-radio {
8978   width: var(--f7-radio-size);
8979   height: var(--f7-radio-size);
8980   border-radius: var(--f7-radio-border-radius);
8981   position: relative;
8982   box-sizing: border-box;
8983   display: block;
8984   flex-shrink: 0;
8985 }
8986 .radio .icon-radio,
8987 .md .icon-radio {
8988   border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
8989 }
8990 label.item-radio,
8991 .radio {
8992   cursor: pointer;
8993 }
8994 label.item-radio input[type="checkbox"],
8995 .radio input[type="checkbox"],
8996 label.item-radio input[type="radio"],
8997 .radio input[type="radio"] {
8998   display: none;
8999 }
9000 label.item-radio {
9001   transition-duration: 300ms;
9002 }
9003 label.item-radio .item-content .item-media,
9004 label.item-radio.item-content .item-media {
9005   align-self: center;
9006 }
9007 label.item-radio.active-state {
9008   background-color: var(--f7-list-link-pressed-bg-color);
9009 }
9010 label.item-radio.active-state:after {
9011   background-color: transparent;
9012 }
9013 label.item-radio.disabled,
9014 .disabled label.item-radio {
9015   opacity: 0.55;
9016   pointer-events: none;
9017   opacity: 0.55 !important;
9018   pointer-events: none !important;
9019 }
9020 .ios .icon-radio:after {
9021   font-family: 'framework7-core-icons';
9022   font-weight: normal;
9023   font-style: normal;
9024   line-height: 1;
9025   letter-spacing: normal;
9026   text-transform: none;
9027   white-space: nowrap;
9028   word-wrap: normal;
9029   direction: ltr;
9030   -webkit-font-smoothing: antialiased;
9031   text-rendering: optimizeLegibility;
9032   -moz-osx-font-smoothing: grayscale;
9033   -moz-font-feature-settings: "liga";
9034        font-feature-settings: "liga";
9035   text-align: center;
9036   display: block;
9037   width: 100%;
9038   height: 100%;
9039   width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
9040   height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
9041   line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
9042   font-size: 20px;
9043   content: 'radio_ios';
9044   color: var(--f7-radio-active-color, var(--f7-theme-color));
9045   opacity: 0;
9046 }
9047 .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
9048 .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
9049 .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
9050   opacity: 1;
9051 }
9052 .ios .radio input[type="radio"]:checked ~ .icon-radio {
9053   border-color: var(--f7-radio-active-color, var(--f7-theme-color));
9054 }
9055 .ios label.item-radio input[type="radio"] ~ .icon-radio {
9056   position: absolute;
9057   top: 50%;
9058   margin-top: -11px;
9059   right: calc(var(--f7-safe-area-right) + 10px);
9060 }
9061 .ios label.item-radio .item-inner {
9062   padding-right: calc(var(--f7-safe-area-right) + 35px);
9063 }
9064 .ios label.item-radio.active-state {
9065   transition-duration: 0ms;
9066 }
9067 .md .icon-radio {
9068   transition-duration: 200ms;
9069 }
9070 .md .icon-radio:after {
9071   content: '';
9072   position: absolute;
9073   width: 10px;
9074   height: 10px;
9075   left: 50%;
9076   top: 50%;
9077   margin-left: -5px;
9078   margin-top: -5px;
9079   background-color: var(--f7-radio-active-color, var(--f7-theme-color));
9080   border-radius: 50%;
9081   transform: scale(0);
9082   transition-duration: 200ms;
9083 }
9084 .md label.item-radio input[type="radio"]:checked ~ .icon-radio,
9085 .md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
9086 .md .radio input[type="radio"]:checked ~ .icon-radio {
9087   border-color: var(--f7-radio-active-color, var(--f7-theme-color));
9088 }
9089 .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
9090 .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
9091 .md .radio input[type="radio"]:checked ~ .icon-radio:after {
9092   background-color: var(--f7-radio-active-color, var(--f7-theme-color));
9093   transform: scale(1);
9094 }
9095 .md label.item-radio {
9096   position: relative;
9097   overflow: hidden;
9098   z-index: 0;
9099 }
9100 .md label.item-radio > .icon-radio {
9101   margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
9102 }
9103 /* === Toggle === */
9104 .ios {
9105   --f7-toggle-handle-color: #fff;
9106   --f7-toggle-width: 52px;
9107   --f7-toggle-height: 32px;
9108   --f7-toggle-border-color-ios: #e5e5e5;
9109   --f7-toggle-inactive-color: #fff;
9110 }
9111 .ios .theme-dark,
9112 .ios.theme-dark {
9113   --f7-toggle-border-color-ios: #555;
9114   --f7-toggle-inactive-color: #222;
9115 }
9116 .md {
9117   --f7-toggle-handle-color: #fff;
9118   --f7-toggle-width: 36px;
9119   --f7-toggle-height: 14px;
9120   --f7-toggle-inactive-color: #b0afaf;
9121 }
9122 .md .theme-dark,
9123 .md.theme-dark {
9124   --f7-toggle-inactive-color: #555;
9125 }
9126 .toggle,
9127 .toggle-icon {
9128   width: var(--f7-toggle-width);
9129   height: var(--f7-toggle-height);
9130   border-radius: var(--f7-toggle-height);
9131 }
9132 .toggle {
9133   display: inline-block;
9134   vertical-align: middle;
9135   position: relative;
9136   box-sizing: border-box;
9137   align-self: center;
9138   -webkit-user-select: none;
9139      -moz-user-select: none;
9140       -ms-user-select: none;
9141           user-select: none;
9142 }
9143 .toggle input[type="checkbox"] {
9144   display: none;
9145 }
9146 .toggle input[disabled] ~ .toggle-icon {
9147   pointer-events: none;
9148 }
9149 .toggle-icon {
9150   z-index: 0;
9151   margin: 0;
9152   padding: 0;
9153   -webkit-appearance: none;
9154      -moz-appearance: none;
9155           appearance: none;
9156   border: none;
9157   position: relative;
9158   transition: 300ms;
9159   box-sizing: border-box;
9160   display: block;
9161   cursor: pointer;
9162 }
9163 .toggle-icon:before,
9164 .toggle-icon:after {
9165   content: '';
9166   will-change: transform;
9167 }
9168 .toggle-icon:after {
9169   background: var(--f7-toggle-handle-color);
9170   position: absolute;
9171   z-index: 2;
9172   transform: translateX(0px);
9173   transition-duration: 300ms;
9174 }
9175 .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
9176   background: var(--f7-toggle-active-color, var(--f7-theme-color));
9177 }
9178 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
9179   transform: scale(0);
9180 }
9181 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
9182   transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
9183 }
9184 .ios .toggle-icon {
9185   background: var(--f7-toggle-border-color-ios);
9186 }
9187 .ios .toggle-icon:before {
9188   position: absolute;
9189   left: 2px;
9190   top: 2px;
9191   width: calc(var(--f7-toggle-width) - 4px);
9192   height: calc(var(--f7-toggle-height) - 4px);
9193   border-radius: var(--f7-toggle-height);
9194   box-sizing: border-box;
9195   background: var(--f7-toggle-inactive-color);
9196   z-index: 1;
9197   transition-duration: 300ms;
9198   transform: scale(1);
9199 }
9200 .ios .toggle-icon:after {
9201   height: calc(var(--f7-toggle-height) - 4px);
9202   width: calc(var(--f7-toggle-height) - 4px);
9203   top: 2px;
9204   left: 2px;
9205   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
9206   border-radius: calc(var(--f7-toggle-height) - 4px);
9207 }
9208 .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
9209   transform: scale(0);
9210 }
9211 .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
9212   width: calc(var(--f7-toggle-height) + 4px);
9213 }
9214 .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
9215   transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
9216 }
9217 .md .toggle input[type="checkbox"]:checked + .toggle-icon {
9218   background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
9219 }
9220 .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
9221   transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));
9222   background: var(--f7-toggle-active-color, var(--f7-theme-color));
9223 }
9224 .md .toggle-icon {
9225   background: var(--f7-toggle-inactive-color);
9226 }
9227 .md .toggle-icon:after {
9228   height: calc(var(--f7-toggle-height) + 6px);
9229   width: calc(var(--f7-toggle-height) + 6px);
9230   top: -3px;
9231   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
9232   border-radius: var(--f7-toggle-height);
9233   left: 0;
9234 }
9235 /* === Range Slider === */
9236 .ios {
9237   --f7-range-size: 28px;
9238   --f7-range-bar-bg-color: #b7b8b7;
9239   /*
9240   --f7-range-bar-active-bg-color: var(--f7-theme-color);
9241   */
9242   --f7-range-bar-size: 1px;
9243   --f7-range-bar-border-radius: 2px;
9244   --f7-range-knob-size: 28px;
9245   --f7-range-knob-color: #fff;
9246   --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
9247   --f7-range-label-size: 20px;
9248   --f7-range-label-text-color: #000;
9249   --f7-range-label-bg-color: #fff;
9250   --f7-range-label-font-size: 12px;
9251   --f7-range-label-border-radius: 5px;
9252   /*
9253   --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
9254   */
9255   --f7-range-scale-step-width: 1px;
9256   --f7-range-scale-step-height: 5px;
9257   --f7-range-scale-font-size: 12px;
9258   --f7-range-scale-font-weight: 400;
9259   --f7-range-scale-text-color: #666;
9260   --f7-range-scale-label-offset: 4px;
9261   /*
9262   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
9263   */
9264   --f7-range-scale-substep-width: 1px;
9265   --f7-range-scale-substep-height: 4px;
9266 }
9267 .md {
9268   --f7-range-size: 20px;
9269   --f7-range-bar-bg-color: #b9b9b9;
9270   /*
9271   --f7-range-bar-active-bg-color: var(--f7-theme-color);
9272   */
9273   --f7-range-bar-size: 2px;
9274   --f7-range-bar-border-radius: 0px;
9275   --f7-range-knob-size: 12px;
9276   /*
9277   --f7-range-knob-color: var(--f7-theme-color);
9278   */
9279   --f7-range-knob-box-shadow: none;
9280   --f7-range-label-size: 26px;
9281   --f7-range-label-text-color: #fff;
9282   /*
9283   --f7-range-label-bg-color: var(--f7-theme-color);
9284   */
9285   --f7-range-label-font-size: 10px;
9286   --f7-range-label-border-radius: 50%;
9287   /*
9288   --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
9289   */
9290   --f7-range-scale-step-width: 2px;
9291   --f7-range-scale-step-height: 5px;
9292   --f7-range-scale-font-size: 12px;
9293   --f7-range-scale-font-weight: 400;
9294   --f7-range-scale-text-color: #666;
9295   --f7-range-scale-label-offset: 4px;
9296   /*
9297   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
9298   */
9299   --f7-range-scale-substep-width: 1px;
9300   --f7-range-scale-substep-height: 4px;
9301 }
9302 .range-slider {
9303   display: block;
9304   position: relative;
9305   align-self: center;
9306   cursor: pointer;
9307   -webkit-user-select: none;
9308      -moz-user-select: none;
9309       -ms-user-select: none;
9310           user-select: none;
9311 }
9312 .range-slider input[type="range"] {
9313   display: none;
9314 }
9315 .range-slider.range-slider-horizontal {
9316   width: 100%;
9317   height: var(--f7-range-size);
9318 }
9319 .range-slider.range-slider-vertical {
9320   height: 100%;
9321   width: var(--f7-range-size);
9322 }
9323 .range-bar {
9324   position: absolute;
9325   overflow: hidden;
9326   background: var(--f7-range-bar-bg-color);
9327   border-radius: var(--f7-range-bar-border-radius);
9328 }
9329 .range-slider-vertical .range-bar {
9330   left: 50%;
9331   top: 0;
9332   height: 100%;
9333   width: var(--f7-range-bar-size);
9334   margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
9335 }
9336 .range-slider-horizontal .range-bar {
9337   left: 0;
9338   top: 50%;
9339   width: 100%;
9340   height: var(--f7-range-bar-size);
9341   margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
9342 }
9343 .range-bar-active {
9344   position: absolute;
9345   background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
9346 }
9347 .range-slider-horizontal .range-bar-active {
9348   left: 0;
9349   top: 0;
9350   height: 100%;
9351 }
9352 .range-slider-vertical .range-bar-active {
9353   left: 0;
9354   bottom: 0;
9355   width: 100%;
9356 }
9357 .range-slider-vertical-reversed .range-bar-active {
9358   top: 0;
9359   bottom: auto;
9360 }
9361 .range-knob-wrap {
9362   z-index: 20;
9363   position: absolute;
9364   height: var(--f7-range-knob-size);
9365   width: var(--f7-range-knob-size);
9366 }
9367 .range-slider-horizontal .range-knob-wrap {
9368   top: 50%;
9369   margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
9370   margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
9371   left: 0;
9372 }
9373 .range-slider-vertical .range-knob-wrap {
9374   left: 50%;
9375   margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
9376   bottom: 0;
9377   margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
9378 }
9379 .range-slider-vertical-reversed .range-knob-wrap {
9380   bottom: auto;
9381   top: 0;
9382   margin-bottom: 0;
9383   margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
9384 }
9385 .range-knob {
9386   box-sizing: border-box;
9387   border-radius: 50%;
9388   position: absolute;
9389   left: 0;
9390   top: 0;
9391   width: 100%;
9392   height: 100%;
9393   z-index: 1;
9394   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
9395   box-shadow: var(--f7-range-knob-box-shadow);
9396 }
9397 .range-knob:after {
9398   content: '';
9399   position: absolute;
9400   left: 50%;
9401   top: 50%;
9402   width: 44px;
9403   height: 44px;
9404   margin-left: -22px;
9405   margin-top: -22px;
9406 }
9407 .range-knob-label {
9408   position: absolute;
9409   left: 50%;
9410   bottom: 100%;
9411   text-align: center;
9412   transition-duration: 120ms;
9413   transition-property: transform;
9414   transform: translateY(100%) scale(0);
9415   height: var(--f7-range-label-size);
9416   line-height: var(--f7-range-label-size);
9417   min-width: var(--f7-range-label-size);
9418   color: var(--f7-range-label-text-color);
9419   background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
9420   font-size: var(--f7-range-label-font-size);
9421   border-radius: var(--f7-range-label-border-radius);
9422 }
9423 .range-knob-active-state .range-knob-label {
9424   transform: translateY(0%) scale(1);
9425 }
9426 .range-scale {
9427   position: absolute;
9428 }
9429 .range-slider-horizontal .range-scale {
9430   top: 50%;
9431   left: 0;
9432   width: 100%;
9433   margin-top: calc(var(--f7-range-bar-size) / 2);
9434 }
9435 .range-slider-vertical .range-scale {
9436   right: 50%;
9437   top: 0;
9438   height: 100%;
9439   margin-right: calc(var(--f7-range-bar-size) / 2);
9440 }
9441 .range-scale-step {
9442   position: absolute;
9443   box-sizing: border-box;
9444   display: flex;
9445   font-size: var(--f7-range-scale-font-size);
9446   font-weight: var(--f7-range-scale-font-weight);
9447   color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
9448   line-height: 1;
9449 }
9450 .range-scale-step:before {
9451   content: '';
9452   position: absolute;
9453   background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
9454 }
9455 .range-slider-horizontal .range-scale-step {
9456   justify-content: center;
9457   align-items: flex-start;
9458   width: var(--f7-range-scale-step-width);
9459   height: var(--f7-range-scale-step-height);
9460   padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
9461   top: 0;
9462   margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2);
9463 }
9464 .range-slider-horizontal .range-scale-step:before {
9465   left: 0;
9466   top: 0;
9467   width: 100%;
9468   height: var(--f7-range-scale-step-height);
9469 }
9470 .range-slider-horizontal .range-scale-step:first-child {
9471   margin-left: 0;
9472 }
9473 .range-slider-horizontal .range-scale-step:last-child {
9474   margin-left: calc(-1 * var(--f7-range-scale-step-width));
9475 }
9476 .range-slider-vertical .range-scale-step {
9477   line-height: 1;
9478   justify-content: flex-end;
9479   align-items: center;
9480   height: var(--f7-range-scale-step-width);
9481   width: var(--f7-range-scale-step-height);
9482   padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
9483   right: 0;
9484   margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
9485 }
9486 .range-slider-vertical .range-scale-step:first-child {
9487   margin-bottom: 0;
9488 }
9489 .range-slider-vertical .range-scale-step:last-child {
9490   margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
9491 }
9492 .range-slider-vertical .range-scale-step:before {
9493   right: 0;
9494   top: 0;
9495   height: 100%;
9496   width: var(--f7-range-scale-step-height);
9497 }
9498 .range-scale-substep {
9499   --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
9500   --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
9501   --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
9502 }
9503 .ios .range-knob-label {
9504   margin-bottom: 6px;
9505   transform: translateX(-50%) translateY(100%) scale(0);
9506 }
9507 .ios .range-knob-active-state .range-knob-label {
9508   transform: translateX(-50%) translateY(0%) scale(1);
9509 }
9510 .md .range-knob {
9511   transition-duration: 200ms;
9512   transition-property: transform, background-color;
9513 }
9514 .md .range-knob-active-state .range-knob {
9515   transform: scale(1.5);
9516 }
9517 .md .range-slider-min:not(.range-slider-dual) .range-knob {
9518   background: #fff !important;
9519   border: 2px solid var(--f7-range-bar-bg-color);
9520 }
9521 .md .range-knob-label {
9522   width: var(--f7-range-label-size);
9523   margin-left: calc(-1 * var(--f7-range-label-size) / 2);
9524   margin-bottom: 8px;
9525 }
9526 .md .range-knob-label:before {
9527   content: '';
9528   left: 50%;
9529   top: 0px;
9530   margin-left: calc(-1 * var(--f7-range-label-size) / 2);
9531   position: absolute;
9532   z-index: -1;
9533   width: var(--f7-range-label-size);
9534   height: var(--f7-range-label-size);
9535   background: var(--f7-range-label-bg-color, var(--f7-theme-color));
9536   transform: rotate(-45deg);
9537   border-radius: 50% 50% 50% 0;
9538 }
9539 .md .range-knob-active-state .range-knob-label {
9540   transform: translateY(0%) scale(1);
9541 }
9542 .md .range-slider-label .range-knob-active-state .range-knob {
9543   transform: scale(0);
9544 }
9545 /* === Stepper === */
9546 :root {
9547   /*
9548   --f7-stepper-button-text-color: var(--f7-theme-color);
9549   --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
9550   */
9551   --f7-stepper-fill-button-text-color: #fff;
9552   /*
9553   --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
9554   */
9555   --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
9556 }
9557 .ios {
9558   --f7-stepper-height: 29px;
9559   --f7-stepper-border-radius: 5px;
9560   /*
9561   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
9562   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
9563   */
9564   --f7-stepper-border-width: 1px;
9565   --f7-stepper-large-height: 44px;
9566   --f7-stepper-small-height: 26px;
9567   --f7-stepper-small-border-width: 2px;
9568   --f7-stepper-value-font-size: 17px;
9569   --f7-stepper-value-font-weight: 400;
9570 }
9571 .md {
9572   --f7-stepper-height: 36px;
9573   --f7-stepper-border-radius: 4px;
9574   --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
9575   /*
9576   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
9577   */
9578   --f7-stepper-border-width: 2px;
9579   --f7-stepper-large-height: 48px;
9580   --f7-stepper-small-border-width: 2px;
9581   --f7-stepper-small-height: 28px;
9582   --f7-stepper-value-font-size: 14px;
9583   --f7-stepper-value-font-weight: 500;
9584 }
9585 .md .theme-dark,
9586 .md.theme-dark {
9587   --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
9588 }
9589 .stepper {
9590   display: inline-flex;
9591   align-items: stretch;
9592   height: var(--f7-stepper-height);
9593   border-radius: var(--f7-stepper-border-radius);
9594 }
9595 .stepper-button,
9596 .stepper-button-minus,
9597 .stepper-button-plus {
9598   background-color: var(--f7-stepper-button-bg-color);
9599   width: 40px;
9600   border-radius: var(--f7-stepper-border-radius);
9601   border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9602   color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
9603   line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
9604   text-align: center;
9605   display: flex;
9606   justify-content: center;
9607   align-content: center;
9608   align-items: center;
9609   flex-shrink: 0;
9610   box-sizing: border-box;
9611   position: relative;
9612   cursor: pointer;
9613 }
9614 .stepper-button.active-state,
9615 .stepper-button-minus.active-state,
9616 .stepper-button-plus.active-state {
9617   background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
9618   color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
9619 }
9620 .stepper-button:first-child,
9621 .stepper-button-minus:first-child,
9622 .stepper-button-plus:first-child {
9623   border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
9624 }
9625 .stepper-button:last-child,
9626 .stepper-button-minus:last-child,
9627 .stepper-button-plus:last-child {
9628   border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
9629 }
9630 .stepper-button .icon,
9631 .stepper-button-minus .icon,
9632 .stepper-button-plus .icon {
9633   pointer-events: none;
9634 }
9635 .stepper-button + .stepper-button,
9636 .stepper-button-minus + .stepper-button,
9637 .stepper-button-plus + .stepper-button,
9638 .stepper-button + .stepper-button-minus,
9639 .stepper-button-minus + .stepper-button-minus,
9640 .stepper-button-plus + .stepper-button-minus,
9641 .stepper-button + .stepper-button-plus,
9642 .stepper-button-minus + .stepper-button-plus,
9643 .stepper-button-plus + .stepper-button-plus {
9644   border-left: none;
9645 }
9646 .stepper-button-plus,
9647 .stepper-button-minus {
9648   -webkit-user-select: none;
9649      -moz-user-select: none;
9650       -ms-user-select: none;
9651           user-select: none;
9652 }
9653 .stepper-button-plus:after,
9654 .stepper-button-minus:after,
9655 .stepper-button-plus:before,
9656 .stepper-button-minus:before {
9657   content: '';
9658   position: absolute;
9659   left: 50%;
9660   top: 50%;
9661   transform: translate(-50%, -50%);
9662   background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
9663 }
9664 .stepper-button-plus:after,
9665 .stepper-button-minus:after {
9666   width: 15px;
9667   height: 2px;
9668 }
9669 .stepper-button-plus:before {
9670   height: 15px;
9671   width: 2px;
9672 }
9673 .stepper-value {
9674   display: flex;
9675   align-content: center;
9676   align-items: center;
9677   justify-content: center;
9678 }
9679 .stepper-input-wrap,
9680 .stepper-value {
9681   flex-shrink: 1;
9682   text-align: center;
9683   border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9684   border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9685 }
9686 .stepper-input-wrap input,
9687 .stepper-value {
9688   width: 45px;
9689   color: var(--f7-theme-color);
9690   font-size: var(--f7-stepper-value-font-size);
9691   font-weight: var(--f7-stepper-value-font-weight);
9692   text-align: center;
9693 }
9694 .stepper-input-wrap input {
9695   height: 100%;
9696 }
9697 .stepper-round,
9698 .ios .stepper-round-ios,
9699 .md .stepper-round-md {
9700   --f7-stepper-border-radius: var(--f7-stepper-height);
9701 }
9702 .stepper-fill,
9703 .ios .stepper-fill-ios,
9704 .md .stepper-fill-md {
9705   --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
9706   --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
9707   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
9708 }
9709 .stepper-fill .stepper-button + .stepper-button,
9710 .ios .stepper-fill-ios .stepper-button + .stepper-button,
9711 .md .stepper-fill-md .stepper-button + .stepper-button,
9712 .stepper-raised .stepper-button + .stepper-button,
9713 .ios .stepper-raised-ios .stepper-button + .stepper-button,
9714 .md .stepper-raised-md .stepper-button + .stepper-button,
9715 .stepper-fill .stepper-button-minus + .stepper-button-plus,
9716 .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
9717 .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
9718 .stepper-raised .stepper-button-minus + .stepper-button-plus,
9719 .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
9720 .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus {
9721   border-left: 1px solid rgba(0, 0, 0, 0.1);
9722 }
9723 .stepper-fill .stepper-button + .stepper-button.active-state,
9724 .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
9725 .md .stepper-fill-md .stepper-button + .stepper-button.active-state,
9726 .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
9727 .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
9728 .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state {
9729   border-left-color: var(--f7-stepper-button-pressed-bg-color);
9730 }
9731 .stepper-raised:not(.stepper-fill) .stepper-input-wrap,
9732 .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
9733 .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
9734 .stepper-raised:not(.stepper-fill) .stepper-value,
9735 .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
9736 .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value {
9737   border-left: 1px solid rgba(0, 0, 0, 0.1);
9738   border-right: 1px solid rgba(0, 0, 0, 0.1);
9739 }
9740 .stepper-large,
9741 .ios .stepper-large-ios,
9742 .md .stepper-large-md {
9743   --f7-stepper-height: var(--f7-stepper-large-height);
9744 }
9745 .stepper-small,
9746 .ios .stepper-small-ios,
9747 .md .stepper-small-md {
9748   --f7-stepper-border-width: var(--f7-stepper-small-border-width);
9749   --f7-stepper-height: var(--f7-stepper-small-height);
9750 }
9751 .ios .stepper-fill.stepper-small-ios,
9752 .ios .stepper-fill.stepper-small {
9753   --f7-stepper-button-pressed-bg-color: transparent;
9754   --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
9755 }
9756 .stepper-raised,
9757 .ios .stepper-raised-ios,
9758 .md .stepper-raised-md {
9759   --f7-stepper-border-width: 0;
9760   box-shadow: var(--f7-stepper-raised-box-shadow);
9761 }
9762 .ios .stepper-button .f7-icons,
9763 .ios .stepper-button-minus .f7-icons,
9764 .ios .stepper-button-plus .f7-icons {
9765   font-size: 22px;
9766 }
9767 .ios .stepper-fill,
9768 .ios .stepper-fill-ios {
9769   --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
9770 }
9771 .ios .stepper-small.stepper-raised,
9772 .ios .stepper-small-ios.stepper-raised,
9773 .ios .stepper-small.stepper-raised-ios,
9774 .ios .stepper-small-ios.stepper-raised-ios {
9775   --f7-stepper-border-width: 0px;
9776 }
9777 .ios .stepper-small .stepper-button,
9778 .ios .stepper-small-ios .stepper-button,
9779 .ios .stepper-small .stepper-button-minus,
9780 .ios .stepper-small-ios .stepper-button-minus,
9781 .ios .stepper-small .stepper-button-plus,
9782 .ios .stepper-small-ios .stepper-button-plus {
9783   transition-duration: 200ms;
9784 }
9785 .ios .stepper-small .stepper-button.active-state:after,
9786 .ios .stepper-small-ios .stepper-button.active-state:after,
9787 .ios .stepper-small .stepper-button-minus.active-state:after,
9788 .ios .stepper-small-ios .stepper-button-minus.active-state:after,
9789 .ios .stepper-small .stepper-button-plus.active-state:after,
9790 .ios .stepper-small-ios .stepper-button-plus.active-state:after,
9791 .ios .stepper-small .stepper-button.active-state:before,
9792 .ios .stepper-small-ios .stepper-button.active-state:before,
9793 .ios .stepper-small .stepper-button-minus.active-state:before,
9794 .ios .stepper-small-ios .stepper-button-minus.active-state:before,
9795 .ios .stepper-small .stepper-button-plus.active-state:before,
9796 .ios .stepper-small-ios .stepper-button-plus.active-state:before {
9797   transition-duration: 200ms;
9798   background-color: var(--f7-theme-color);
9799 }
9800 .md .stepper-button,
9801 .md .stepper-button-minus,
9802 .md .stepper-button-plus {
9803   transition-duration: 300ms;
9804   transform: translate3d(0, 0, 0);
9805   overflow: hidden;
9806 }
9807 .md .stepper-fill,
9808 .md .stepper-fill-md {
9809   --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
9810 }
9811 /* === Smart Select === */
9812 .smart-select :root {
9813   /*
9814   --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
9815   --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
9816   */
9817 }
9818 .smart-select select {
9819   display: none;
9820 }
9821 .smart-select .item-after {
9822   max-width: 70%;
9823   overflow: hidden;
9824   text-overflow: ellipsis;
9825   position: relative;
9826   display: block;
9827 }
9828 .smart-select-sheet .page,
9829 .smart-select-sheet .sheet-modal-inner,
9830 .smart-select-sheet .list ul {
9831   background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
9832 }
9833 .smart-select-sheet .toolbar:after {
9834   content: '';
9835   position: absolute;
9836   background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
9837   display: block;
9838   z-index: 15;
9839   top: auto;
9840   right: auto;
9841   bottom: 0;
9842   left: 0;
9843   height: 1px;
9844   width: 100%;
9845   transform-origin: 50% 100%;
9846   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9847 }
9848 .smart-select-sheet .toolbar:after {
9849   display: block;
9850 }
9851 .smart-select-sheet .list {
9852   margin: 0;
9853 }
9854 .smart-select-sheet .list ul:before {
9855   display: none !important;
9856 }
9857 .smart-select-sheet .list ul:after {
9858   display: none !important;
9859 }
9860 .smart-select-popover .popover-inner {
9861   max-height: 40vh;
9862 }
9863 /* === Grid === */
9864 .ios {
9865   --f7-grid-gap: 15px;
9866 }
9867 .md {
9868   --f7-grid-gap: 16px;
9869 }
9870 .row {
9871   display: flex;
9872   justify-content: space-between;
9873   flex-wrap: wrap;
9874   align-items: flex-start;
9875   --f7-cols-per-row: 1;
9876 }
9877 .row > [class*="col-"],
9878 .row > .col {
9879   box-sizing: border-box;
9880   width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
9881 }
9882 .row.no-gap {
9883   --f7-grid-gap: 0px;
9884 }
9885 .row .col-5 {
9886   --f7-cols-per-row: 20;
9887 }
9888 .row .col-10 {
9889   --f7-cols-per-row: 10;
9890 }
9891 .row .col-15 {
9892   --f7-cols-per-row: 6.66666667;
9893 }
9894 .row .col-20 {
9895   --f7-cols-per-row: 5;
9896 }
9897 .row .col-25 {
9898   --f7-cols-per-row: 4;
9899 }
9900 .row .col-30 {
9901   --f7-cols-per-row: 3.33333333;
9902 }
9903 .row .col-33 {
9904   --f7-cols-per-row: 3;
9905 }
9906 .row .col-35 {
9907   --f7-cols-per-row: 2.85714286;
9908 }
9909 .row .col-40 {
9910   --f7-cols-per-row: 2.5;
9911 }
9912 .row .col-45 {
9913   --f7-cols-per-row: 2.22222222;
9914 }
9915 .row .col-50 {
9916   --f7-cols-per-row: 2;
9917 }
9918 .row .col-55 {
9919   --f7-cols-per-row: 1.81818182;
9920 }
9921 .row .col-60 {
9922   --f7-cols-per-row: 1.66666667;
9923 }
9924 .row .col-65 {
9925   --f7-cols-per-row: 1.53846154;
9926 }
9927 .row .col-66 {
9928   --f7-cols-per-row: 1.5;
9929 }
9930 .row .col-70 {
9931   --f7-cols-per-row: 1.42857143;
9932 }
9933 .row .col-75 {
9934   --f7-cols-per-row: 1.33333333;
9935 }
9936 .row .col-80 {
9937   --f7-cols-per-row: 1.25;
9938 }
9939 .row .col-85 {
9940   --f7-cols-per-row: 1.17647059;
9941 }
9942 .row .col-90 {
9943   --f7-cols-per-row: 1.11111111;
9944 }
9945 .row .col-95 {
9946   --f7-cols-per-row: 1.05263158;
9947 }
9948 .row .col-100 {
9949   --f7-cols-per-row: 1;
9950 }
9951 .row .col:nth-last-child(1),
9952 .row .col:nth-last-child(1) ~ .col {
9953   --f7-cols-per-row: 1;
9954 }
9955 .row .col:nth-last-child(2),
9956 .row .col:nth-last-child(2) ~ .col {
9957   --f7-cols-per-row: 2;
9958 }
9959 .row .col:nth-last-child(3),
9960 .row .col:nth-last-child(3) ~ .col {
9961   --f7-cols-per-row: 3;
9962 }
9963 .row .col:nth-last-child(4),
9964 .row .col:nth-last-child(4) ~ .col {
9965   --f7-cols-per-row: 4;
9966 }
9967 .row .col:nth-last-child(5),
9968 .row .col:nth-last-child(5) ~ .col {
9969   --f7-cols-per-row: 5;
9970 }
9971 .row .col:nth-last-child(6),
9972 .row .col:nth-last-child(6) ~ .col {
9973   --f7-cols-per-row: 6;
9974 }
9975 .row .col:nth-last-child(7),
9976 .row .col:nth-last-child(7) ~ .col {
9977   --f7-cols-per-row: 7;
9978 }
9979 .row .col:nth-last-child(8),
9980 .row .col:nth-last-child(8) ~ .col {
9981   --f7-cols-per-row: 8;
9982 }
9983 .row .col:nth-last-child(9),
9984 .row .col:nth-last-child(9) ~ .col {
9985   --f7-cols-per-row: 9;
9986 }
9987 .row .col:nth-last-child(10),
9988 .row .col:nth-last-child(10) ~ .col {
9989   --f7-cols-per-row: 10;
9990 }
9991 .row .col:nth-last-child(11),
9992 .row .col:nth-last-child(11) ~ .col {
9993   --f7-cols-per-row: 11;
9994 }
9995 .row .col:nth-last-child(12),
9996 .row .col:nth-last-child(12) ~ .col {
9997   --f7-cols-per-row: 12;
9998 }
9999 .row .col:nth-last-child(13),
10000 .row .col:nth-last-child(13) ~ .col {
10001   --f7-cols-per-row: 13;
10002 }
10003 .row .col:nth-last-child(14),
10004 .row .col:nth-last-child(14) ~ .col {
10005   --f7-cols-per-row: 14;
10006 }
10007 .row .col:nth-last-child(15),
10008 .row .col:nth-last-child(15) ~ .col {
10009   --f7-cols-per-row: 15;
10010 }
10011 .row .col:nth-last-child(16),
10012 .row .col:nth-last-child(16) ~ .col {
10013   --f7-cols-per-row: 16;
10014 }
10015 .row .col:nth-last-child(17),
10016 .row .col:nth-last-child(17) ~ .col {
10017   --f7-cols-per-row: 17;
10018 }
10019 .row .col:nth-last-child(18),
10020 .row .col:nth-last-child(18) ~ .col {
10021   --f7-cols-per-row: 18;
10022 }
10023 .row .col:nth-last-child(19),
10024 .row .col:nth-last-child(19) ~ .col {
10025   --f7-cols-per-row: 19;
10026 }
10027 .row .col:nth-last-child(20),
10028 .row .col:nth-last-child(20) ~ .col {
10029   --f7-cols-per-row: 20;
10030 }
10031 .row .col:nth-last-child(21),
10032 .row .col:nth-last-child(21) ~ .col {
10033   --f7-cols-per-row: 21;
10034 }
10035 .row .col:nth-last-child(22),
10036 .row .col:nth-last-child(22) ~ .col {
10037   --f7-cols-per-row: 22;
10038 }
10039 @media (min-width: 768px) {
10040   .row .tablet-5 {
10041     --f7-cols-per-row: 20;
10042   }
10043   .row .tablet-10 {
10044     --f7-cols-per-row: 10;
10045   }
10046   .row .tablet-15 {
10047     --f7-cols-per-row: 6.66666667;
10048   }
10049   .row .tablet-20 {
10050     --f7-cols-per-row: 5;
10051   }
10052   .row .tablet-25 {
10053     --f7-cols-per-row: 4;
10054   }
10055   .row .tablet-30 {
10056     --f7-cols-per-row: 3.33333333;
10057   }
10058   .row .tablet-33 {
10059     --f7-cols-per-row: 3;
10060   }
10061   .row .tablet-35 {
10062     --f7-cols-per-row: 2.85714286;
10063   }
10064   .row .tablet-40 {
10065     --f7-cols-per-row: 2.5;
10066   }
10067   .row .tablet-45 {
10068     --f7-cols-per-row: 2.22222222;
10069   }
10070   .row .tablet-50 {
10071     --f7-cols-per-row: 2;
10072   }
10073   .row .tablet-55 {
10074     --f7-cols-per-row: 1.81818182;
10075   }
10076   .row .tablet-60 {
10077     --f7-cols-per-row: 1.66666667;
10078   }
10079   .row .tablet-65 {
10080     --f7-cols-per-row: 1.53846154;
10081   }
10082   .row .tablet-66 {
10083     --f7-cols-per-row: 1.5;
10084   }
10085   .row .tablet-70 {
10086     --f7-cols-per-row: 1.42857143;
10087   }
10088   .row .tablet-75 {
10089     --f7-cols-per-row: 1.33333333;
10090   }
10091   .row .tablet-80 {
10092     --f7-cols-per-row: 1.25;
10093   }
10094   .row .tablet-85 {
10095     --f7-cols-per-row: 1.17647059;
10096   }
10097   .row .tablet-90 {
10098     --f7-cols-per-row: 1.11111111;
10099   }
10100   .row .tablet-95 {
10101     --f7-cols-per-row: 1.05263158;
10102   }
10103   .row .tablet-100 {
10104     --f7-cols-per-row: 1;
10105   }
10106   .row .tablet-auto:nth-last-child(1),
10107   .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
10108     --f7-cols-per-row: 1;
10109   }
10110   .row .tablet-auto:nth-last-child(2),
10111   .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
10112     --f7-cols-per-row: 2;
10113   }
10114   .row .tablet-auto:nth-last-child(3),
10115   .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
10116     --f7-cols-per-row: 3;
10117   }
10118   .row .tablet-auto:nth-last-child(4),
10119   .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
10120     --f7-cols-per-row: 4;
10121   }
10122   .row .tablet-auto:nth-last-child(5),
10123   .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
10124     --f7-cols-per-row: 5;
10125   }
10126   .row .tablet-auto:nth-last-child(6),
10127   .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
10128     --f7-cols-per-row: 6;
10129   }
10130   .row .tablet-auto:nth-last-child(7),
10131   .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
10132     --f7-cols-per-row: 7;
10133   }
10134   .row .tablet-auto:nth-last-child(8),
10135   .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
10136     --f7-cols-per-row: 8;
10137   }
10138   .row .tablet-auto:nth-last-child(9),
10139   .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
10140     --f7-cols-per-row: 9;
10141   }
10142   .row .tablet-auto:nth-last-child(10),
10143   .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
10144     --f7-cols-per-row: 10;
10145   }
10146   .row .tablet-auto:nth-last-child(11),
10147   .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
10148     --f7-cols-per-row: 11;
10149   }
10150   .row .tablet-auto:nth-last-child(12),
10151   .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
10152     --f7-cols-per-row: 12;
10153   }
10154   .row .tablet-auto:nth-last-child(13),
10155   .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
10156     --f7-cols-per-row: 13;
10157   }
10158   .row .tablet-auto:nth-last-child(14),
10159   .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
10160     --f7-cols-per-row: 14;
10161   }
10162   .row .tablet-auto:nth-last-child(15),
10163   .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
10164     --f7-cols-per-row: 15;
10165   }
10166   .row .tablet-auto:nth-last-child(16),
10167   .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
10168     --f7-cols-per-row: 16;
10169   }
10170   .row .tablet-auto:nth-last-child(17),
10171   .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
10172     --f7-cols-per-row: 17;
10173   }
10174   .row .tablet-auto:nth-last-child(18),
10175   .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
10176     --f7-cols-per-row: 18;
10177   }
10178   .row .tablet-auto:nth-last-child(19),
10179   .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
10180     --f7-cols-per-row: 19;
10181   }
10182   .row .tablet-auto:nth-last-child(20),
10183   .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
10184     --f7-cols-per-row: 20;
10185   }
10186   .row .tablet-auto:nth-last-child(21),
10187   .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
10188     --f7-cols-per-row: 21;
10189   }
10190   .row .tablet-auto:nth-last-child(22),
10191   .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
10192     --f7-cols-per-row: 22;
10193   }
10194 }
10195 @media (min-width: 1025px) {
10196   .row .desktop-5 {
10197     --f7-cols-per-row: 20;
10198   }
10199   .row .desktop-10 {
10200     --f7-cols-per-row: 10;
10201   }
10202   .row .desktop-15 {
10203     --f7-cols-per-row: 6.66666667;
10204   }
10205   .row .desktop-20 {
10206     --f7-cols-per-row: 5;
10207   }
10208   .row .desktop-25 {
10209     --f7-cols-per-row: 4;
10210   }
10211   .row .desktop-30 {
10212     --f7-cols-per-row: 3.33333333;
10213   }
10214   .row .desktop-33 {
10215     --f7-cols-per-row: 3;
10216   }
10217   .row .desktop-35 {
10218     --f7-cols-per-row: 2.85714286;
10219   }
10220   .row .desktop-40 {
10221     --f7-cols-per-row: 2.5;
10222   }
10223   .row .desktop-45 {
10224     --f7-cols-per-row: 2.22222222;
10225   }
10226   .row .desktop-50 {
10227     --f7-cols-per-row: 2;
10228   }
10229   .row .desktop-55 {
10230     --f7-cols-per-row: 1.81818182;
10231   }
10232   .row .desktop-60 {
10233     --f7-cols-per-row: 1.66666667;
10234   }
10235   .row .desktop-65 {
10236     --f7-cols-per-row: 1.53846154;
10237   }
10238   .row .desktop-66 {
10239     --f7-cols-per-row: 1.5;
10240   }
10241   .row .desktop-70 {
10242     --f7-cols-per-row: 1.42857143;
10243   }
10244   .row .desktop-75 {
10245     --f7-cols-per-row: 1.33333333;
10246   }
10247   .row .desktop-80 {
10248     --f7-cols-per-row: 1.25;
10249   }
10250   .row .desktop-85 {
10251     --f7-cols-per-row: 1.17647059;
10252   }
10253   .row .desktop-90 {
10254     --f7-cols-per-row: 1.11111111;
10255   }
10256   .row .desktop-95 {
10257     --f7-cols-per-row: 1.05263158;
10258   }
10259   .row .desktop-100 {
10260     --f7-cols-per-row: 1;
10261   }
10262   .row .desktop-auto:nth-last-child(1),
10263   .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
10264     --f7-cols-per-row: 1;
10265   }
10266   .row .desktop-auto:nth-last-child(2),
10267   .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
10268     --f7-cols-per-row: 2;
10269   }
10270   .row .desktop-auto:nth-last-child(3),
10271   .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
10272     --f7-cols-per-row: 3;
10273   }
10274   .row .desktop-auto:nth-last-child(4),
10275   .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
10276     --f7-cols-per-row: 4;
10277   }
10278   .row .desktop-auto:nth-last-child(5),
10279   .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
10280     --f7-cols-per-row: 5;
10281   }
10282   .row .desktop-auto:nth-last-child(6),
10283   .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
10284     --f7-cols-per-row: 6;
10285   }
10286   .row .desktop-auto:nth-last-child(7),
10287   .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
10288     --f7-cols-per-row: 7;
10289   }
10290   .row .desktop-auto:nth-last-child(8),
10291   .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
10292     --f7-cols-per-row: 8;
10293   }
10294   .row .desktop-auto:nth-last-child(9),
10295   .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
10296     --f7-cols-per-row: 9;
10297   }
10298   .row .desktop-auto:nth-last-child(10),
10299   .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
10300     --f7-cols-per-row: 10;
10301   }
10302   .row .desktop-auto:nth-last-child(11),
10303   .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
10304     --f7-cols-per-row: 11;
10305   }
10306   .row .desktop-auto:nth-last-child(12),
10307   .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
10308     --f7-cols-per-row: 12;
10309   }
10310   .row .desktop-auto:nth-last-child(13),
10311   .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
10312     --f7-cols-per-row: 13;
10313   }
10314   .row .desktop-auto:nth-last-child(14),
10315   .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
10316     --f7-cols-per-row: 14;
10317   }
10318   .row .desktop-auto:nth-last-child(15),
10319   .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
10320     --f7-cols-per-row: 15;
10321   }
10322   .row .desktop-auto:nth-last-child(16),
10323   .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
10324     --f7-cols-per-row: 16;
10325   }
10326   .row .desktop-auto:nth-last-child(17),
10327   .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
10328     --f7-cols-per-row: 17;
10329   }
10330   .row .desktop-auto:nth-last-child(18),
10331   .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
10332     --f7-cols-per-row: 18;
10333   }
10334   .row .desktop-auto:nth-last-child(19),
10335   .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
10336     --f7-cols-per-row: 19;
10337   }
10338   .row .desktop-auto:nth-last-child(20),
10339   .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
10340     --f7-cols-per-row: 20;
10341   }
10342   .row .desktop-auto:nth-last-child(21),
10343   .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
10344     --f7-cols-per-row: 21;
10345   }
10346   .row .desktop-auto:nth-last-child(22),
10347   .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
10348     --f7-cols-per-row: 22;
10349   }
10350 }
10351 /* === Calendar/Datepicker === */
10352 :root {
10353   --f7-calendar-height: 320px;
10354   --f7-calendar-sheet-landscape-height: 220px;
10355   --f7-calendar-sheet-bg-color: #fff;
10356   --f7-calendar-popover-width: 320px;
10357   --f7-calendar-popover-height: 320px;
10358   --f7-calendar-modal-height: 420px;
10359   --f7-calendar-modal-max-width: 380px;
10360   --f7-calendar-modal-border-radius: 4px;
10361   --f7-calendar-modal-bg-color: #fff;
10362   /*
10363   --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
10364   --f7-calendar-header-link-color: var(--f7-bars-link-color);
10365   --f7-calendar-header-text-color: var(--f7-bars-text-color);
10366   --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
10367   --f7-calendar-footer-border-color: var(--f7-bars-border-color);
10368   --f7-calendar-footer-link-color: var(--f7-bars-link-color);
10369   --f7-calendar-footer-text-color: var(--f7-bars-text-color);
10370   --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
10371   --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
10372   */
10373   --f7-calendar-prev-next-text-color: #b8b8b8;
10374   --f7-calendar-disabled-text-color: #d4d4d4;
10375   --f7-calendar-event-dot-size: 4px;
10376   /*
10377   --f7-calendar-event-bg-color: var(--f7-theme-color);
10378   */
10379 }
10380 .ios {
10381   --f7-calendar-sheet-border-color: #929499;
10382   --f7-calendar-header-height: 44px;
10383   --f7-calendar-header-font-size: 17px;
10384   --f7-calendar-header-font-weight: 600;
10385   --f7-calendar-header-padding: 0 8px;
10386   --f7-calendar-footer-height: 44px;
10387   --f7-calendar-footer-font-size: 17px;
10388   --f7-calendar-footer-padding: 0 8px;
10389   --f7-calendar-week-header-height: 18px;
10390   --f7-calendar-week-header-font-size: 11px;
10391   --f7-calendar-row-border-color: #c4c4c4;
10392   --f7-calendar-day-font-size: 15px;
10393   --f7-calendar-day-text-color: #000;
10394   --f7-calendar-today-text-color: #000;
10395   --f7-calendar-today-bg-color: #e3e3e3;
10396   --f7-calendar-selected-text-color: #fff;
10397   /*
10398   --f7-calendar-selected-bg-color: var(--f7-theme-color);
10399   */
10400   --f7-calendar-day-size: 30px;
10401 }
10402 .ios .theme-dark,
10403 .ios.theme-dark {
10404   --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
10405   --f7-calendar-row-border-color: var(--f7-bars-border-color);
10406   --f7-calendar-modal-bg-color: #171717;
10407   --f7-calendar-sheet-bg-color: #171717;
10408   --f7-calendar-day-text-color: #fff;
10409   --f7-calendar-today-text-color: #fff;
10410   --f7-calendar-today-bg-color: #333;
10411 }
10412 .md {
10413   --f7-calendar-sheet-border-color: #ccc;
10414   --f7-calendar-header-height: 56px;
10415   --f7-calendar-header-font-size: 20px;
10416   --f7-calendar-header-font-weight: 400;
10417   --f7-calendar-header-padding: 0 24px;
10418   --f7-calendar-footer-height: 48px;
10419   --f7-calendar-footer-font-size: 14px;
10420   --f7-calendar-footer-padding: 0 8px;
10421   --f7-calendar-week-header-height: 24px;
10422   --f7-calendar-week-header-font-size: 11px;
10423   --f7-calendar-row-border-color: transparent;
10424   --f7-calendar-day-font-size: 14px;
10425   --f7-calendar-day-text-color: #000;
10426   /*
10427   --f7-calendar-today-text-color: var(--f7-theme-color);
10428   */
10429   --f7-calendar-today-bg-color: none;
10430   --f7-calendar-selected-text-color: #fff;
10431   /*
10432   --f7-calendar-selected-bg-color: var(--f7-theme-color);
10433   */
10434   --f7-calendar-day-size: 32px;
10435 }
10436 .md .theme-dark,
10437 .md.theme-dark {
10438   --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
10439   --f7-calendar-modal-bg-color: #171717;
10440   --f7-calendar-sheet-bg-color: #171717;
10441   --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
10442 }
10443 .calendar {
10444   overflow: hidden;
10445   height: var(--f7-calendar-height);
10446   width: 100%;
10447   display: flex;
10448   flex-direction: column;
10449 }
10450 .calendar.modal-in {
10451   display: flex;
10452 }
10453 @media (orientation: landscape) and (max-height: 415px) {
10454   .calendar.calendar-sheet {
10455     height: var(--f7-calendar-sheet-landscape-height);
10456   }
10457   .calendar.calendar-modal {
10458     height: calc(100vh - var(--f7-navbar-height));
10459   }
10460 }
10461 .calendar.calendar-inline,
10462 .calendar.calendar-popover .calendar {
10463   position: relative;
10464 }
10465 .calendar-sheet {
10466   --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
10467   background: var(--f7-calendar-sheet-bg-color);
10468 }
10469 .calendar-sheet:before {
10470   z-index: 600;
10471 }
10472 .calendar-sheet .sheet-modal-inner {
10473   margin-bottom: var(--f7-safe-area-bottom);
10474 }
10475 .calendar-sheet .toolbar:before,
10476 .calendar-modal .toolbar:before,
10477 .calendar-popover .toolbar:before {
10478   display: none;
10479 }
10480 .calendar-popover {
10481   width: var(--f7-calendar-popover-width);
10482 }
10483 .calendar-popover .calendar {
10484   height: var(--f7-calendar-popover-height);
10485   border-radius: var(--f7-popover-border-radius);
10486 }
10487 .calendar-header {
10488   width: 100%;
10489   position: relative;
10490   overflow: hidden;
10491   flex-shrink: 0;
10492   white-space: nowrap;
10493   text-overflow: ellipsis;
10494   box-sizing: border-box;
10495   padding: var(--f7-calendar-header-padding);
10496   background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
10497   color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
10498   height: var(--f7-calendar-header-height);
10499   line-height: var(--f7-calendar-header-height);
10500   font-size: var(--f7-calendar-header-font-size);
10501   font-weight: var(--f7-calendar-header-font-weight);
10502 }
10503 .calendar-header a {
10504   color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
10505 }
10506 .calendar-footer {
10507   width: 100%;
10508   flex-shrink: 0;
10509   padding: var(--f7-calendar-footer-padding);
10510   background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
10511   color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
10512   height: var(--f7-calendar-footer-height);
10513   font-size: var(--f7-calendar-header-font-size);
10514   display: flex;
10515   justify-content: flex-end;
10516   box-sizing: border-box;
10517   align-items: center;
10518   position: relative;
10519 }
10520 .calendar-footer a {
10521   color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
10522 }
10523 .calendar-footer:before {
10524   content: '';
10525   position: absolute;
10526   background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
10527   display: block;
10528   z-index: 15;
10529   top: 0;
10530   right: auto;
10531   bottom: auto;
10532   left: 0;
10533   height: 1px;
10534   width: 100%;
10535   transform-origin: 50% 0%;
10536   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10537 }
10538 .calendar-modal {
10539   position: absolute;
10540   height: var(--f7-calendar-modal-height);
10541   overflow: hidden;
10542   top: 50%;
10543   left: 50%;
10544   min-width: 300px;
10545   max-width: var(--f7-calendar-modal-max-width);
10546   transform: translate3d(-50%, 100%, 0);
10547   transition-property: transform;
10548   display: flex;
10549   z-index: 12000;
10550   background: var(--f7-calendar-modal-bg-color);
10551   width: 90%;
10552   border-radius: var(--f7-calendar-modal-border-radius);
10553   box-shadow: var(--f7-elevation-24);
10554 }
10555 .calendar-modal.modal-in,
10556 .calendar-modal.modal-out {
10557   transition-duration: 400ms;
10558 }
10559 .calendar-modal.modal-in {
10560   transform: translate3d(-50%, -50%, 0);
10561 }
10562 .calendar-modal.modal-out {
10563   transform: translate3d(-50%, 100%, 0);
10564 }
10565 .calendar-week-header {
10566   display: flex;
10567   box-sizing: border-box;
10568   position: relative;
10569   font-size: var(--f7-calendar-week-header-font-size);
10570   background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
10571   color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
10572   height: var(--f7-calendar-week-header-height);
10573   padding-left: var(--f7-safe-area-left);
10574   padding-right: var(--f7-safe-area-right);
10575 }
10576 .calendar-week-header .calendar-week-day {
10577   flex-shrink: 1;
10578   width: calc(100% / 7);
10579   text-align: center;
10580   line-height: var(--f7-calendar-week-header-height);
10581 }
10582 .calendar-months {
10583   width: 100%;
10584   height: 100%;
10585   overflow: hidden;
10586   position: relative;
10587   flex-shrink: 10;
10588 }
10589 .calendar-months-wrapper {
10590   position: relative;
10591   width: 100%;
10592   height: 100%;
10593   transition: 300ms;
10594 }
10595 .calendar-month {
10596   display: flex;
10597   flex-direction: column;
10598   width: 100%;
10599   height: 100%;
10600   position: absolute;
10601   left: 0;
10602   top: 0;
10603 }
10604 .calendar-row {
10605   height: 16.66666667%;
10606   height: calc(100% / 6);
10607   display: flex;
10608   flex-shrink: 1;
10609   width: 100%;
10610   position: relative;
10611   box-sizing: border-box;
10612   padding-left: var(--f7-safe-area-left);
10613   padding-right: var(--f7-safe-area-right);
10614 }
10615 .calendar-row:before {
10616   content: '';
10617   position: absolute;
10618   background-color: var(--f7-calendar-row-border-color);
10619   display: block;
10620   z-index: 15;
10621   top: 0;
10622   right: auto;
10623   bottom: auto;
10624   left: 0;
10625   height: 1px;
10626   width: 100%;
10627   transform-origin: 50% 0%;
10628   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10629 }
10630 .calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
10631 .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
10632   display: none !important;
10633 }
10634 .calendar-day {
10635   flex-shrink: 1;
10636   display: flex;
10637   justify-content: center;
10638   align-items: center;
10639   box-sizing: border-box;
10640   width: 14.28571429%;
10641   width: calc(100% / 7);
10642   text-align: center;
10643   cursor: pointer;
10644   z-index: 20;
10645   color: var(--f7-calendar-day-text-color);
10646   height: 100%;
10647   font-size: var(--f7-calendar-day-font-size);
10648 }
10649 .calendar-day.calendar-day-today .calendar-day-number {
10650   color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
10651   background-color: var(--f7-calendar-today-bg-color);
10652 }
10653 .calendar-day.calendar-day-prev,
10654 .calendar-day.calendar-day-next {
10655   color: var(--f7-calendar-prev-next-text-color);
10656 }
10657 .calendar-day.calendar-day-disabled {
10658   color: var(--f7-calendar-disabled-text-color);
10659   cursor: auto;
10660 }
10661 .calendar-day.calendar-day-selected .calendar-day-number {
10662   color: var(--f7-calendar-selected-text-color);
10663   background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
10664 }
10665 .calendar-day .calendar-day-number {
10666   display: inline-block;
10667   border-radius: 50%;
10668   position: relative;
10669   width: var(--f7-calendar-day-size);
10670   height: var(--f7-calendar-day-size);
10671   line-height: var(--f7-calendar-day-size);
10672 }
10673 .calendar-day .calendar-day-events {
10674   position: absolute;
10675   display: flex;
10676   left: 0;
10677   width: 100%;
10678   top: 100%;
10679   align-items: center;
10680   justify-content: center;
10681   margin-top: 1px;
10682 }
10683 .calendar-day .calendar-day-event {
10684   width: var(--f7-calendar-event-dot-size);
10685   height: var(--f7-calendar-event-dot-size);
10686   border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
10687   background-color: var(--f7-calendar-event-bg-color);
10688 }
10689 .calendar-day .calendar-day-event + .calendar-day-event {
10690   margin-left: 2px;
10691 }
10692 .calendar-range .calendar-day.calendar-day-selected {
10693   align-items: stretch;
10694   align-content: stretch;
10695 }
10696 .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
10697   width: 100%;
10698   border-radius: 0;
10699   height: auto;
10700   text-align: center;
10701   display: flex;
10702   align-items: center;
10703   justify-content: center;
10704 }
10705 .calendar-month-selector,
10706 .calendar-year-selector {
10707   display: flex;
10708   justify-content: space-between;
10709   align-items: center;
10710   width: 50%;
10711   max-width: 200px;
10712   flex-shrink: 10;
10713 }
10714 .calendar-month-selector .calendar-day-number,
10715 .calendar-year-selector .calendar-day-number {
10716   flex-shrink: 1;
10717   position: relative;
10718   overflow: hidden;
10719   text-overflow: ellipsis;
10720 }
10721 .calendar-month-selector a.icon-only,
10722 .calendar-year-selector a.icon-only {
10723   min-width: 36px;
10724 }
10725 /* === Picker === */
10726 :root {
10727   --f7-picker-height: 260px;
10728   --f7-picker-inline-height: 200px;
10729   --f7-picker-popover-height: 200px;
10730   --f7-picker-popover-width: 280px;
10731   --f7-picker-landscape-height: 200px;
10732   --f7-picker-item-height: 36px;
10733 }
10734 .ios {
10735   --f7-picker-column-font-size: 24px;
10736   --f7-picker-divider-text-color: #000;
10737   --f7-picker-item-text-color: #707274;
10738   --f7-picker-item-selected-text-color: #000;
10739   --f7-picker-item-selected-border-color: #a8abb0;
10740 }
10741 .ios .theme-dark,
10742 .ios.theme-dark {
10743   --f7-picker-divider-text-color: #fff;
10744   --f7-picker-item-selected-text-color: #fff;
10745   --f7-picker-item-selected-border-color: #282829;
10746 }
10747 .md {
10748   --f7-picker-column-font-size: 20px;
10749   --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
10750   --f7-picker-item-text-color: inherit;
10751   --f7-picker-item-selected-text-color: inherit;
10752   --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
10753 }
10754 .md .theme-dark,
10755 .md.theme-dark {
10756   --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
10757   --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
10758 }
10759 .picker {
10760   width: 100%;
10761   height: var(--f7-picker-height);
10762 }
10763 .picker.picker-inline {
10764   height: var(--f7-picker-inline-height);
10765 }
10766 .popover .picker {
10767   height: var(--f7-picker-popover-height);
10768 }
10769 @media (orientation: landscape) and (max-height: 415px) {
10770   .picker:not(.picker-inline) {
10771     height: var(--f7-picker-landscape-height);
10772   }
10773 }
10774 .picker-popover {
10775   width: var(--f7-picker-popover-width);
10776 }
10777 .picker-popover .toolbar {
10778   background: none;
10779   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
10780 }
10781 .picker-popover .toolbar:before {
10782   display: none !important;
10783 }
10784 .picker-popover .toolbar + .picker-columns {
10785   height: calc(100% - var(--f7-toolbar-height));
10786 }
10787 .picker-columns {
10788   display: flex;
10789   overflow: hidden;
10790   justify-content: center;
10791   padding: 0;
10792   text-align: right;
10793   height: 100%;
10794   position: relative;
10795   -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
10796   font-size: var(--f7-picker-column-font-size);
10797 }
10798 .picker-column {
10799   position: relative;
10800   max-height: 100%;
10801 }
10802 .picker-column.picker-column-first:before,
10803 .picker-column.picker-column-last:after {
10804   height: 100%;
10805   width: 100vw;
10806   position: absolute;
10807   content: '';
10808   top: 0;
10809 }
10810 .picker-column.picker-column-first:before {
10811   right: 100%;
10812 }
10813 .picker-column.picker-column-last:after {
10814   left: 100%;
10815 }
10816 .picker-column.picker-column-left {
10817   text-align: left;
10818 }
10819 .picker-column.picker-column-center {
10820   text-align: center;
10821 }
10822 .picker-column.picker-column-right {
10823   text-align: right;
10824 }
10825 .picker-column.picker-column-divider {
10826   display: flex;
10827   align-items: center;
10828   color: var(--f7-picker-divider-text-color);
10829 }
10830 .picker-items {
10831   transition: 300ms;
10832   transition-timing-function: ease-out;
10833 }
10834 .picker-item {
10835   height: var(--f7-picker-item-height);
10836   line-height: var(--f7-picker-item-height);
10837   white-space: nowrap;
10838   position: relative;
10839   overflow: hidden;
10840   text-overflow: ellipsis;
10841   left: 0;
10842   top: 0;
10843   width: 100%;
10844   box-sizing: border-box;
10845   transition: 300ms;
10846   color: var(--f7-picker-item-text-color);
10847 }
10848 .picker-item span {
10849   padding: 0 10px;
10850 }
10851 .picker-column-absolute .picker-item {
10852   position: absolute;
10853 }
10854 .picker-item.picker-item-far {
10855   pointer-events: none;
10856 }
10857 .picker-item.picker-item-selected {
10858   color: var(--f7-picker-item-selected-text-color);
10859   transform: translate3d(0, 0, 0) rotateX(0deg);
10860 }
10861 .picker-center-highlight {
10862   height: var(--f7-picker-item-height);
10863   box-sizing: border-box;
10864   position: absolute;
10865   left: 0;
10866   width: 100%;
10867   top: 50%;
10868   margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
10869   pointer-events: none;
10870 }
10871 .picker-center-highlight:before {
10872   content: '';
10873   position: absolute;
10874   background-color: var(--f7-picker-item-selected-border-color);
10875   display: block;
10876   z-index: 15;
10877   top: 0;
10878   right: auto;
10879   bottom: auto;
10880   left: 0;
10881   height: 1px;
10882   width: 100%;
10883   transform-origin: 50% 0%;
10884   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10885 }
10886 .picker-center-highlight:after {
10887   content: '';
10888   position: absolute;
10889   background-color: var(--f7-picker-item-selected-border-color);
10890   display: block;
10891   z-index: 15;
10892   top: auto;
10893   right: auto;
10894   bottom: 0;
10895   left: 0;
10896   height: 1px;
10897   width: 100%;
10898   transform-origin: 50% 100%;
10899   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10900 }
10901 .picker-3d .picker-columns {
10902   overflow: hidden;
10903   perspective: 1200px;
10904 }
10905 .picker-3d .picker-column,
10906 .picker-3d .picker-items,
10907 .picker-3d .picker-item {
10908   transform-style: preserve-3d;
10909 }
10910 .picker-3d .picker-column {
10911   overflow: visible;
10912 }
10913 .picker-3d .picker-item {
10914   transform-origin: center center -110px;
10915   -webkit-backface-visibility: hidden;
10916           backface-visibility: hidden;
10917   transition-timing-function: ease-out;
10918 }
10919 /* === Infinite === */
10920 .infinite-scroll-preloader {
10921   margin-left: auto;
10922   margin-right: auto;
10923   text-align: center;
10924 }
10925 .infinite-scroll-preloader.preloader {
10926   display: block;
10927 }
10928 .ios .infinite-scroll-preloader {
10929   margin-top: 35px;
10930   margin-bottom: 35px;
10931 }
10932 .ios .infinite-scroll-preloader .preloader,
10933 .ios .infinite-scroll-preloader.preloader {
10934   width: 27px;
10935   height: 27px;
10936 }
10937 .md .infinite-scroll-preloader {
10938   margin-top: 32px;
10939   margin-bottom: 32px;
10940 }
10941 /* === PTR === */
10942 .ios {
10943   --f7-ptr-preloader-size: 20px;
10944   --f7-ptr-size: 44px;
10945 }
10946 .md {
10947   --f7-ptr-preloader-size: 22px;
10948   --f7-ptr-size: 40px;
10949 }
10950 .ptr-preloader {
10951   position: relative;
10952   top: var(--f7-ptr-top, 0);
10953   height: var(--f7-ptr-size);
10954 }
10955 .ptr-preloader .preloader {
10956   position: absolute;
10957   left: 50%;
10958   width: var(--f7-ptr-preloader-size);
10959   height: var(--f7-ptr-preloader-size);
10960   margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
10961   margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
10962   top: 50%;
10963   visibility: hidden;
10964 }
10965 .ptr-bottom .ptr-preloader {
10966   top: auto;
10967   bottom: 0;
10968   position: fixed;
10969 }
10970 .ios .ptr-preloader {
10971   margin-top: calc(-1 * var(--f7-ptr-size));
10972   width: 100%;
10973   left: 0;
10974 }
10975 .ios .ptr-arrow {
10976   position: absolute;
10977   left: 50%;
10978   top: 50%;
10979   background: no-repeat center;
10980   z-index: 10;
10981   transform: rotate(0deg) translate3d(0, 0, 0);
10982   transition-duration: 300ms;
10983   transition-property: transform;
10984   width: 12px;
10985   height: 20px;
10986   margin-left: -6px;
10987   margin-top: -10px;
10988   visibility: visible;
10989   color: var(--f7-preloader-color);
10990 }
10991 .ios .ptr-arrow:after {
10992   font-family: 'framework7-core-icons';
10993   font-weight: normal;
10994   font-style: normal;
10995   line-height: 1;
10996   letter-spacing: normal;
10997   text-transform: none;
10998   white-space: nowrap;
10999   word-wrap: normal;
11000   direction: ltr;
11001   -webkit-font-smoothing: antialiased;
11002   text-rendering: optimizeLegibility;
11003   -moz-osx-font-smoothing: grayscale;
11004   -moz-font-feature-settings: "liga";
11005        font-feature-settings: "liga";
11006   text-align: center;
11007   display: block;
11008   width: 100%;
11009   height: 100%;
11010   font-size: 20px;
11011   width: 12px;
11012   height: 20px;
11013   line-height: 20px;
11014   font-size: 10px;
11015   content: 'ptr_arrow_ios';
11016 }
11017 .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
11018   animation: none;
11019 }
11020 .ios .ptr-transitioning,
11021 .ios .ptr-refreshing {
11022   transition-duration: 300ms;
11023   transition-property: transform;
11024 }
11025 .ios .ptr-refreshing {
11026   transform: translate3d(0, var(--f7-ptr-size), 0);
11027 }
11028 .ios .ptr-refreshing .ptr-arrow {
11029   visibility: hidden;
11030 }
11031 .ios .ptr-refreshing .ptr-preloader .preloader {
11032   visibility: visible;
11033 }
11034 .ios .ptr-pull-up .ptr-arrow {
11035   transform: rotate(180deg) translate3d(0, 0, 0);
11036 }
11037 .ios .ptr-no-navbar {
11038   margin-top: calc(-1 * var(--f7-ptr-size));
11039   height: calc(100% + var(--f7-ptr-size));
11040 }
11041 .ios .ptr-no-navbar .ptr-preloader {
11042   margin-top: 0;
11043 }
11044 .ios .ptr-bottom .ptr-preloader {
11045   margin-top: 0;
11046   margin-bottom: calc(-1 * var(--f7-ptr-size));
11047 }
11048 .ios .ptr-bottom.ptr-transitioning > *,
11049 .ios .ptr-bottom.ptr-refreshing > * {
11050   transition-duration: 300ms;
11051   transition-property: transform;
11052 }
11053 .ios .ptr-bottom.ptr-refreshing {
11054   transform: none;
11055 }
11056 .ios .ptr-bottom.ptr-refreshing > * {
11057   transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
11058 }
11059 .ios .ptr-bottom .ptr-arrow {
11060   transform: rotate(180deg) translate3d(0, 0, 0);
11061 }
11062 .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
11063   transform: rotate(0deg) translate3d(0, 0, 0);
11064 }
11065 .md {
11066   --f7-ptr-top: -4px;
11067 }
11068 .md .ptr-preloader {
11069   left: 50%;
11070   width: var(--f7-ptr-size);
11071   border-radius: 50%;
11072   background: #fff;
11073   margin-left: calc(-1 * var(--f7-ptr-size) / 2);
11074   margin-top: calc(-1 * var(--f7-ptr-size));
11075   z-index: 100;
11076   box-shadow: var(--f7-elevation-1);
11077 }
11078 .md .ptr-preloader .preloader .preloader-inner-gap,
11079 .md .ptr-preloader .preloader .preloader-inner-half-circle {
11080   border-width: 3px;
11081 }
11082 .md .ptr-arrow {
11083   width: 22px;
11084   height: 22px;
11085   box-sizing: border-box;
11086   border: 3px solid var(--f7-preloader-color);
11087   position: absolute;
11088   left: 50%;
11089   top: 50%;
11090   margin-left: -11px;
11091   margin-top: -11px;
11092   border-left-color: transparent;
11093   border-radius: 50%;
11094   opacity: 1;
11095   transform: rotate(150deg);
11096 }
11097 .md .ptr-arrow:after {
11098   content: '';
11099   width: 0px;
11100   height: 0px;
11101   position: absolute;
11102   left: -5px;
11103   bottom: 0px;
11104   border-bottom-width: 6px;
11105   border-bottom-style: solid;
11106   border-bottom-color: inherit;
11107   border-left: 5px solid transparent;
11108   border-right: 5px solid transparent;
11109   transform: rotate(-40deg);
11110 }
11111 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
11112 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
11113   animation: none;
11114 }
11115 .md .ptr-refreshing .ptr-preloader .preloader,
11116 .md .ptr-pull-up .ptr-preloader .preloader {
11117   visibility: visible;
11118 }
11119 .md .ptr-refreshing .ptr-arrow,
11120 .md .ptr-pull-up .ptr-arrow {
11121   visibility: hidden;
11122 }
11123 .md .ptr-refreshing .ptr-preloader {
11124   transform: translate3d(0, 66px, 0);
11125 }
11126 .md .ptr-transitioning .ptr-arrow {
11127   transition: 300ms;
11128 }
11129 .md .ptr-pull-up .ptr-arrow {
11130   transition: 400ms;
11131   transform: rotate(620deg) !important;
11132   opacity: 0;
11133 }
11134 .md .ptr-transitioning .ptr-preloader,
11135 .md .ptr-refreshing .ptr-preloader {
11136   transition-duration: 300ms;
11137   transition-property: transform;
11138 }
11139 .md .ptr-bottom .ptr-preloader {
11140   margin-top: 0;
11141   margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
11142 }
11143 .md .ptr-bottom.ptr-refreshing .ptr-preloader {
11144   transform: translate3d(0, -66px, 0);
11145 }
11146 /* === Images Lazy Loading === */
11147 .lazy-loaded.lazy-fade-in {
11148   animation: lazyFadeIn 600ms;
11149 }
11150 @keyframes lazyFadeIn {
11151   from {
11152     opacity: 0;
11153   }
11154   to {
11155     opacity: 1;
11156   }
11157 }
11158 /* === Data Table === */
11159 :root {
11160   --f7-table-head-font-size: 12px;
11161   --f7-table-body-font-size: 14px;
11162   --f7-table-footer-font-size: 12px;
11163   --f7-table-input-height: 24px;
11164   --f7-table-input-font-size: 14px;
11165   --f7-table-collapsible-cell-padding: 15px;
11166 }
11167 .ios {
11168   --f7-table-head-font-weight: 600;
11169   --f7-table-head-text-color: #8e8e93;
11170   --f7-table-head-cell-height: 44px;
11171   --f7-table-head-icon-size: 18px;
11172   --f7-table-body-cell-height: 44px;
11173   --f7-table-cell-border-color: #c8c7cc;
11174   --f7-table-cell-padding-vertical: 0px;
11175   --f7-table-cell-padding-horizontal: 15px;
11176   --f7-table-edge-cell-padding-horizontal: 15px;
11177   --f7-table-label-cell-padding-horizontal: 15px;
11178   --f7-table-checkbox-cell-width: 22px;
11179   /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
11180   --f7-table-selected-row-bg-color: #f7f7f8;
11181   /* --f7-table-actions-link-color: var(--f7-theme-color); */
11182   --f7-table-title-font-size: 17px;
11183   --f7-table-title-font-weight: 600;
11184   --f7-table-card-header-height: 64px;
11185   --f7-table-footer-height: 44px;
11186   --f7-table-footer-text-color: #8e8e93;
11187   --f7-table-sortable-icon-color: #000;
11188   --f7-table-input-text-color: #000;
11189 }
11190 .ios .theme-dark,
11191 .ios.theme-dark {
11192   --f7-table-cell-border-color: #282829;
11193   --f7-table-selected-row-bg-color: #363636;
11194   --f7-table-sortable-icon-color: #fff;
11195   --f7-table-input-text-color: #fff;
11196 }
11197 .md {
11198   --f7-table-head-font-weight: 500;
11199   --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
11200   --f7-table-head-cell-height: 56px;
11201   --f7-table-head-icon-size: 16px;
11202   --f7-table-body-cell-height: 48px;
11203   --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
11204   --f7-table-cell-padding-vertical: 0px;
11205   --f7-table-cell-padding-horizontal: 28px;
11206   --f7-table-edge-cell-padding-horizontal: 24px;
11207   --f7-table-label-cell-padding-horizontal: 24px;
11208   --f7-table-checkbox-cell-width: 18px;
11209   --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
11210   --f7-table-selected-row-bg-color: #f5f5f5;
11211   --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
11212   --f7-table-title-font-size: 20px;
11213   --f7-table-title-font-weight: 400;
11214   --f7-table-card-header-height: 64px;
11215   --f7-table-footer-height: 56px;
11216   --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
11217   --f7-table-sortable-icon-color: #000;
11218   --f7-table-input-text-color: #212121;
11219 }
11220 .md .theme-dark,
11221 .md.theme-dark {
11222   --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
11223   --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
11224   --f7-table-cell-border-color: #282829;
11225   --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
11226   --f7-table-sortable-icon-color: #fff;
11227   --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
11228   --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
11229   --f7-table-input-text-color: #fff;
11230 }
11231 .data-table {
11232   overflow-x: auto;
11233 }
11234 .data-table table {
11235   width: 100%;
11236   border: none;
11237   padding: 0;
11238   margin: 0;
11239   border-collapse: collapse;
11240   text-align: left;
11241 }
11242 .data-table thead th,
11243 .data-table thead td {
11244   font-size: var(--f7-table-head-font-size);
11245   font-weight: var(--f7-table-head-font-weight);
11246   overflow: hidden;
11247   white-space: nowrap;
11248   text-overflow: ellipsis;
11249   line-height: 16px;
11250   height: var(--f7-table-head-cell-height);
11251 }
11252 .data-table thead th:not(.sortable-cell-active),
11253 .data-table thead td:not(.sortable-cell-active) {
11254   color: var(--f7-table-head-text-color);
11255 }
11256 .data-table thead i.icon,
11257 .data-table thead i.f7-icons,
11258 .data-table thead i.material-icons {
11259   vertical-align: top;
11260   font-size: var(--f7-table-head-icon-size);
11261   width: var(--f7-table-head-icon-size);
11262   height: var(--f7-table-head-icon-size);
11263 }
11264 .data-table tbody {
11265   font-size: var(--f7-table-body-font-size);
11266 }
11267 .data-table tbody th,
11268 .data-table tbody td {
11269   height: var(--f7-table-body-cell-height);
11270 }
11271 .data-table tbody tr.data-table-row-selected,
11272 .device-desktop .data-table tbody tr:hover {
11273   background: var(--f7-table-selected-row-bg-color);
11274 }
11275 .data-table tbody td:before {
11276   content: '';
11277   position: absolute;
11278   background-color: var(--f7-table-cell-border-color);
11279   display: block;
11280   z-index: 15;
11281   top: 0;
11282   right: auto;
11283   bottom: auto;
11284   left: 0;
11285   height: 1px;
11286   width: 100%;
11287   transform-origin: 50% 0%;
11288   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11289 }
11290 .data-table th,
11291 .data-table td {
11292   --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
11293   --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
11294   padding-top: var(--f7-table-cell-padding-vertical);
11295   padding-bottom: var(--f7-table-cell-padding-vertical);
11296   padding-left: var(--f7-table-cell-padding-left);
11297   padding-right: var(--f7-table-cell-padding-right);
11298   position: relative;
11299   box-sizing: border-box;
11300 }
11301 .data-table th:first-child,
11302 .data-table td:first-child {
11303   --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
11304 }
11305 .data-table th:last-child,
11306 .data-table td:last-child {
11307   --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
11308 }
11309 .data-table th.label-cell,
11310 .data-table td.label-cell {
11311   --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
11312   --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
11313 }
11314 .data-table th.numeric-cell,
11315 .data-table td.numeric-cell {
11316   text-align: right;
11317 }
11318 .data-table th.checkbox-cell,
11319 .data-table td.checkbox-cell {
11320   overflow: visible;
11321   width: var(--f7-table-checkbox-cell-width);
11322 }
11323 .data-table th.checkbox-cell label + span,
11324 .data-table td.checkbox-cell label + span {
11325   margin-left: 8px;
11326 }
11327 .data-table th.checkbox-cell:first-child,
11328 .data-table td.checkbox-cell:first-child {
11329   padding-right: calc(var(--f7-table-cell-padding-right) / 2);
11330 }
11331 .data-table th.checkbox-cell:first-child + td,
11332 .data-table td.checkbox-cell:first-child + td,
11333 .data-table th.checkbox-cell:first-child + th,
11334 .data-table td.checkbox-cell:first-child + th {
11335   padding-left: calc(var(--f7-table-cell-padding-left) / 2);
11336 }
11337 .data-table th.checkbox-cell:last-child,
11338 .data-table td.checkbox-cell:last-child {
11339   padding-left: calc(var(--f7-table-cell-padding-left) / 2);
11340 }
11341 .data-table th.actions-cell,
11342 .data-table td.actions-cell {
11343   text-align: right;
11344   white-space: nowrap;
11345 }
11346 .data-table th.actions-cell a.link,
11347 .data-table td.actions-cell a.link {
11348   color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
11349 }
11350 .data-table th a.icon-only,
11351 .data-table td a.icon-only,
11352 .card .data-table th a.icon-only,
11353 .card .data-table td a.icon-only,
11354 .card.data-table th a.icon-only,
11355 .card.data-table td a.icon-only {
11356   display: inline-block;
11357   vertical-align: middle;
11358   text-align: center;
11359   font-size: 0;
11360   min-width: 0;
11361 }
11362 .data-table th a.icon-only i,
11363 .data-table td a.icon-only i,
11364 .card .data-table th a.icon-only i,
11365 .card .data-table td a.icon-only i,
11366 .card.data-table th a.icon-only i,
11367 .card.data-table td a.icon-only i {
11368   font-size: 20px;
11369   vertical-align: middle;
11370 }
11371 .data-table .sortable-cell:not(.input-cell) {
11372   cursor: pointer;
11373   position: relative;
11374 }
11375 .data-table .sortable-cell.input-cell .table-head-label {
11376   cursor: pointer;
11377   position: relative;
11378 }
11379 .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
11380 .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
11381 .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
11382 .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
11383   content: 'arrow_bottom_md';
11384   font-family: 'framework7-core-icons';
11385   font-weight: normal;
11386   font-style: normal;
11387   line-height: 1;
11388   letter-spacing: normal;
11389   text-transform: none;
11390   white-space: nowrap;
11391   word-wrap: normal;
11392   direction: ltr;
11393   -webkit-font-smoothing: antialiased;
11394   text-rendering: optimizeLegibility;
11395   -moz-osx-font-smoothing: grayscale;
11396   -moz-font-feature-settings: "liga";
11397        font-feature-settings: "liga";
11398   text-align: center;
11399   display: block;
11400   width: 100%;
11401   height: 100%;
11402   font-size: 20px;
11403   display: inline-block;
11404   vertical-align: top;
11405   width: 16px;
11406   height: 16px;
11407   color: var(--f7-table-sortable-icon-color);
11408   font-size: 13px;
11409   line-height: 16px;
11410   transition-duration: 300ms;
11411   transform: rotate(0);
11412   opacity: 0;
11413 }
11414 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
11415 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
11416 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
11417 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
11418   opacity: 0.54;
11419 }
11420 .data-table .sortable-cell.sortable-cell-active:after,
11421 .data-table .sortable-cell.sortable-cell-active .table-head-label:after,
11422 .data-table .sortable-cell.sortable-cell-active:before,
11423 .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
11424   opacity: 0.87 !important;
11425 }
11426 .data-table .sortable-cell.sortable-desc:after,
11427 .data-table .sortable-cell.sortable-desc:after,
11428 .data-table .table-head-label:after,
11429 .data-table .sortable-cell.sortable-desc:before,
11430 .data-table .sortable-cell.sortable-desc:before,
11431 .data-table .table-head-label:before {
11432   transform: rotate(180deg) !important;
11433 }
11434 .data-table.card .card-header,
11435 .card .data-table .card-header,
11436 .data-table.card .card-footer,
11437 .card .data-table .card-footer {
11438   padding-left: var(--f7-table-edge-cell-padding-horizontal);
11439   padding-right: var(--f7-table-edge-cell-padding-horizontal);
11440 }
11441 .data-table.card .card-header,
11442 .card .data-table .card-header {
11443   height: var(--f7-table-card-header-height);
11444 }
11445 .data-table.card .card-content,
11446 .card .data-table .card-content {
11447   overflow-x: auto;
11448 }
11449 .data-table.card .card-footer,
11450 .card .data-table .card-footer {
11451   height: var(--f7-table-footer-height);
11452 }
11453 .data-table .data-table-title {
11454   font-size: var(--f7-table-title-font-size);
11455   font-weight: var(--f7-table-title-font-weight);
11456 }
11457 .data-table .data-table-links,
11458 .data-table .data-table-actions {
11459   display: flex;
11460 }
11461 .data-table .data-table-links .button {
11462   min-width: 64px;
11463 }
11464 .data-table .data-table-actions {
11465   margin-left: auto;
11466   align-items: center;
11467 }
11468 .data-table .data-table-actions a.link {
11469   color: var(--f7-table-actions-link-color, var(--f7-theme-color));
11470   min-width: 0;
11471 }
11472 .data-table .data-table-actions a.link.icon-only {
11473   line-height: 1;
11474   justify-content: center;
11475   padding: 0;
11476 }
11477 .data-table .data-table-header,
11478 .data-table .data-table-header-selected {
11479   display: flex;
11480   justify-content: space-between;
11481   align-items: center;
11482   width: 100%;
11483 }
11484 .data-table .card-header > .data-table-header,
11485 .data-table .card-header > .data-table-header-selected {
11486   padding-top: var(--f7-card-header-padding-vertical);
11487   padding-bottom: var(--f7-card-header-padding-vertical);
11488   height: 100%;
11489   padding-left: var(--f7-table-edge-cell-padding-horizontal);
11490   padding-right: var(--f7-table-edge-cell-padding-horizontal);
11491   margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
11492   margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
11493 }
11494 .data-table .data-table-header-selected {
11495   background: rgba(var(--f7-theme-color-rgb), 0.1);
11496   display: none;
11497 }
11498 .data-table.data-table-has-checked .data-table-header {
11499   display: none;
11500 }
11501 .data-table.data-table-has-checked .data-table-header-selected {
11502   display: flex;
11503 }
11504 .data-table .data-table-title-selected {
11505   font-size: 14px;
11506   color: var(--f7-theme-color);
11507 }
11508 .data-table .data-table-footer {
11509   display: flex;
11510   align-items: center;
11511   box-sizing: border-box;
11512   position: relative;
11513   font-size: var(--f7-table-footer-font-size);
11514   overflow: hidden;
11515   height: var(--f7-table-footer-height);
11516   color: var(--f7-table-footer-text-color);
11517   justify-content: flex-end;
11518 }
11519 .data-table .data-table-footer:before {
11520   content: '';
11521   position: absolute;
11522   background-color: var(--f7-table-cell-border-color);
11523   display: block;
11524   z-index: 15;
11525   top: 0;
11526   right: auto;
11527   bottom: auto;
11528   left: 0;
11529   height: 1px;
11530   width: 100%;
11531   transform-origin: 50% 0%;
11532   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11533 }
11534 .data-table .data-table-rows-select,
11535 .data-table .data-table-pagination {
11536   display: flex;
11537   align-items: center;
11538 }
11539 .data-table .input-cell {
11540   padding-top: 8px;
11541   padding-bottom: 8px;
11542   height: auto;
11543   vertical-align: top;
11544 }
11545 .data-table .input-cell .table-head-label + .input {
11546   margin-top: 4px;
11547 }
11548 .data-table .input-cell .input {
11549   height: var(--f7-table-input-height);
11550 }
11551 .data-table .input-cell .input input,
11552 .data-table .input-cell .input textarea,
11553 .data-table .input-cell .input select {
11554   height: var(--f7-table-input-height);
11555   color: var(--f7-table-input-text-color);
11556   font-size: var(--f7-table-input-font-size);
11557 }
11558 @media (max-width: 480px) and (orientation: portrait) {
11559   .data-table.data-table-collapsible thead {
11560     display: none;
11561   }
11562   .data-table.data-table-collapsible tbody,
11563   .data-table.data-table-collapsible tr,
11564   .data-table.data-table-collapsible td {
11565     display: block;
11566   }
11567   .data-table.data-table-collapsible tr {
11568     position: relative;
11569   }
11570   .data-table.data-table-collapsible tr:before {
11571     content: '';
11572     position: absolute;
11573     background-color: var(--f7-table-cell-border-color);
11574     display: block;
11575     z-index: 15;
11576     top: 0;
11577     right: auto;
11578     bottom: auto;
11579     left: 0;
11580     height: 1px;
11581     width: 100%;
11582     transform-origin: 50% 0%;
11583     transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11584   }
11585   .data-table.data-table-collapsible tr:hover {
11586     background-color: inherit;
11587   }
11588   .data-table.data-table-collapsible td {
11589     --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
11590     --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
11591     display: flex;
11592     align-content: center;
11593     align-items: center;
11594     justify-content: flex-start;
11595     text-align: left;
11596   }
11597   .data-table.data-table-collapsible td:before {
11598     display: none !important;
11599   }
11600   .data-table.data-table-collapsible td:not(.checkbox-cell):before {
11601     width: 40%;
11602     display: block !important;
11603     content: attr(data-collapsible-title);
11604     position: relative;
11605     height: auto;
11606     background: none !important;
11607     transform: none !important;
11608     font-size: var(--f7-table-head-font-size);
11609     font-weight: var(--f7-table-head-font-weight);
11610     color: var(--f7-table-head-text-color);
11611     margin-right: 16px;
11612     flex-shrink: 0;
11613   }
11614   .data-table.data-table-collapsible td.checkbox-cell {
11615     position: absolute;
11616     top: 0;
11617     left: 0;
11618   }
11619   .data-table.data-table-collapsible td.checkbox-cell + td {
11620     padding-left: 16px;
11621   }
11622   .data-table.data-table-collapsible td.checkbox-cell ~ td {
11623     margin-left: 32px;
11624   }
11625 }
11626 .data-table .tablet-only,
11627 .data-table .tablet-landscape-only {
11628   display: none;
11629 }
11630 @media (min-width: 768px) {
11631   .data-table .tablet-only {
11632     display: table-cell;
11633   }
11634 }
11635 @media (min-width: 768px) and (orientation: landscape) {
11636   .data-table .tablet-landscape-only {
11637     display: table-cell;
11638   }
11639 }
11640 .ios .data-table th.actions-cell a.link + a.link,
11641 .ios .data-table td.actions-cell a.link + a.link {
11642   margin-left: 15px;
11643 }
11644 .ios .sortable-cell:not(.numeric-cell):after {
11645   margin-left: 5px;
11646 }
11647 .ios .sortable-cell.numeric-cell:before {
11648   margin-right: 5px;
11649 }
11650 .ios .data-table-links a.link + a.link,
11651 .ios .data-table-actions a.link + a.link,
11652 .ios .data-table-links .button + .button,
11653 .ios .data-table-actions .button + .button {
11654   margin-left: 15px;
11655 }
11656 .ios .data-table-actions a.link.icon-only {
11657   width: 44px;
11658   height: 44px;
11659 }
11660 .ios .data-table-rows-select a.link,
11661 .ios .data-table-pagination a.link {
11662   width: 44px;
11663   height: 44px;
11664 }
11665 .ios .data-table-rows-select + .data-table-pagination {
11666   margin-left: 30px;
11667 }
11668 .ios .data-table-rows-select .input {
11669   margin-left: 20px;
11670 }
11671 .ios .data-table-pagination-label {
11672   margin-right: 15px;
11673 }
11674 .md .data-table th.actions-cell a.link + a.link,
11675 .md .data-table td.actions-cell a.link + a.link {
11676   margin-left: 24px;
11677 }
11678 .md .data-table th.actions-cell a.icon-only,
11679 .md .data-table td.actions-cell a.icon-only {
11680   width: 24px;
11681   height: 24px;
11682   line-height: 24px;
11683 }
11684 .md .sortable-cell:not(.numeric-cell):after {
11685   margin-left: 8px;
11686 }
11687 .md .sortable-cell.numeric-cell:before {
11688   margin-right: 8px;
11689 }
11690 .md .data-table-links a.link + a.link,
11691 .md .data-table-actions a.link + a.link,
11692 .md .data-table-links .button + .button,
11693 .md .data-table-actions .button + .button {
11694   margin-left: 24px;
11695 }
11696 .md .data-table-actions a.link.icon-only {
11697   width: 24px;
11698   height: 24px;
11699   overflow: visible;
11700 }
11701 .md .data-table-actions a.link.icon-only.active-state {
11702   background: none;
11703 }
11704 .md .data-table-rows-select a.link,
11705 .md .data-table-pagination a.link {
11706   width: 48px;
11707   height: 48px;
11708 }
11709 .md .data-table-rows-select a.link:before,
11710 .md .data-table-pagination a.link:before {
11711   content: '';
11712   width: 152%;
11713   height: 152%;
11714   position: absolute;
11715   left: -26%;
11716   top: -26%;
11717   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
11718   background-repeat: no-repeat;
11719   background-position: center;
11720   background-size: 100% 100%;
11721   opacity: 0;
11722   pointer-events: none;
11723   transition-duration: 600ms;
11724 }
11725 .md .data-table-rows-select a.link.active-state:before,
11726 .md .data-table-pagination a.link.active-state:before {
11727   opacity: 1;
11728   transition-duration: 150ms;
11729 }
11730 .md .data-table-rows-select + .data-table-pagination {
11731   margin-left: 32px;
11732 }
11733 .md .data-table-rows-select .input {
11734   margin-left: 24px;
11735 }
11736 .md .data-table-pagination-label {
11737   margin-right: 20px;
11738 }
11739 .md .input-cell .input-clear-button {
11740   transform: scale(0.8);
11741 }
11742 /* === FAB === */
11743 :root {
11744   --f7-fab-text-color: #fff;
11745   --f7-fab-extended-text-font-size: 14px;
11746   --f7-fab-extended-text-padding: 0 20px;
11747   --f7-fab-label-bg-color: #fff;
11748   --f7-fab-label-text-color: #333;
11749   --f7-fab-label-border-radius: 4px;
11750   --f7-fab-label-padding: 4px 12px;
11751   --f7-fab-button-size: 40px;
11752 }
11753 .ios {
11754   --f7-fab-size: 50px;
11755   --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
11756   --f7-fab-margin: 15px;
11757   --f7-fab-extended-size: 50px;
11758   --f7-fab-extended-text-font-weight: 400;
11759   --f7-fab-extended-text-letter-spacing: 0;
11760   --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
11761   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
11762 }
11763 .md {
11764   --f7-fab-size: 56px;
11765   --f7-fab-box-shadow: var(--f7-elevation-6);
11766   --f7-fab-margin: 16px;
11767   --f7-fab-extended-size: 48px;
11768   --f7-fab-extended-text-font-weight: 500;
11769   --f7-fab-extended-text-letter-spacing: 0.03em;
11770   --f7-fab-label-box-shadow: var(--f7-elevation-3);
11771   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
11772 }
11773 .fab {
11774   position: absolute;
11775   z-index: 1500;
11776 }
11777 .fab a {
11778   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
11779 }
11780 .fab[class*="fab-left"] {
11781   left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
11782 }
11783 .fab[class*="fab-right"] {
11784   right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
11785 }
11786 .fab[class*="-top"] {
11787   top: var(--f7-fab-margin);
11788 }
11789 .fab[class*="-bottom"] {
11790   bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
11791 }
11792 .fab[class*="fab-center"] {
11793   left: 50%;
11794   transform: translateX(-50%);
11795 }
11796 .fab[class*="left-center"],
11797 .fab[class*="right-center"] {
11798   top: 50%;
11799   transform: translateY(-50%);
11800 }
11801 .fab[class*="center-center"] {
11802   top: 50%;
11803   left: 50%;
11804   transform: translateX(-50%) translateY(-50%);
11805 }
11806 .fab > a,
11807 .fab-buttons a {
11808   background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
11809   width: var(--f7-fab-size);
11810   height: var(--f7-fab-size);
11811   box-shadow: var(--f7-fab-box-shadow);
11812   border-radius: calc(var(--f7-fab-size) / 2);
11813   position: relative;
11814   transition-duration: 300ms;
11815   display: flex;
11816   align-items: center;
11817   justify-content: center;
11818   overflow: hidden;
11819   z-index: 1;
11820   color: var(--f7-fab-text-color);
11821 }
11822 .fab > a.active-state,
11823 .fab-buttons a.active-state {
11824   background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
11825 }
11826 .fab > a i {
11827   position: absolute;
11828   left: 50%;
11829   top: 50%;
11830   transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
11831   transition: 300ms;
11832 }
11833 .fab > a i + i {
11834   transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
11835   opacity: 0;
11836 }
11837 .fab-buttons a {
11838   border-radius: calc(var(--f7-fab-button-size) / 2);
11839   width: var(--f7-fab-button-size);
11840   height: var(--f7-fab-button-size);
11841 }
11842 .fab-buttons {
11843   display: flex;
11844   visibility: hidden;
11845   pointer-events: none;
11846   position: absolute;
11847 }
11848 .fab-buttons a {
11849   opacity: 0;
11850 }
11851 .fab-opened:not(.fab-morph) > a i {
11852   transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
11853   opacity: 0;
11854 }
11855 .fab-opened:not(.fab-morph) > a i + i {
11856   transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
11857   opacity: 1;
11858 }
11859 .fab-opened .fab-buttons {
11860   visibility: visible;
11861   pointer-events: auto;
11862 }
11863 .fab-opened .fab-buttons a {
11864   opacity: 1;
11865   transform: translate3d(0, 0px, 0) scale(1) !important;
11866 }
11867 .fab-opened .fab-buttons a:nth-child(2) {
11868   transition-delay: 50ms;
11869 }
11870 .fab-opened .fab-buttons a:nth-child(3) {
11871   transition-delay: 100ms;
11872 }
11873 .fab-opened .fab-buttons a:nth-child(4) {
11874   transition-delay: 150ms;
11875 }
11876 .fab-opened .fab-buttons a:nth-child(5) {
11877   transition-delay: 200ms;
11878 }
11879 .fab-opened .fab-buttons a:nth-child(6) {
11880   transition-delay: 250ms;
11881 }
11882 .fab-buttons-top,
11883 .fab-buttons-bottom {
11884   left: 50%;
11885   width: var(--f7-fab-button-size);
11886   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11887 }
11888 .fab-buttons-top {
11889   bottom: 100%;
11890   margin-bottom: 16px;
11891   flex-direction: column-reverse;
11892 }
11893 .fab-buttons-top a {
11894   transform: translate3d(0, 8px, 0) scale(0.3);
11895   transform-origin: center bottom;
11896 }
11897 .fab-buttons-top a + a {
11898   margin-bottom: 16px;
11899 }
11900 .fab-buttons-bottom {
11901   top: 100%;
11902   margin-top: 16px;
11903   flex-direction: column;
11904 }
11905 .fab-buttons-bottom a {
11906   transform: translate3d(0, -8px, 0) scale(0.3);
11907   transform-origin: center top;
11908 }
11909 .fab-buttons-bottom a + a {
11910   margin-top: 16px;
11911 }
11912 .fab-buttons-left,
11913 .fab-buttons-right {
11914   top: 50%;
11915   height: var(--f7-fab-button-size);
11916   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11917 }
11918 .fab-buttons-left {
11919   right: 100%;
11920   margin-right: 16px;
11921   flex-direction: row-reverse;
11922 }
11923 .fab-buttons-left a {
11924   transform: translate3d(8px, 0px, 0) scale(0.3);
11925   transform-origin: right center;
11926 }
11927 .fab-buttons-left a + a {
11928   margin-right: 16px;
11929 }
11930 .fab-buttons-right {
11931   left: 100%;
11932   margin-left: 16px;
11933 }
11934 .fab-buttons-right a {
11935   transform: translate3d(-8px, 0, 0) scale(0.3);
11936   transform-origin: left center;
11937 }
11938 .fab-buttons-right a + a {
11939   margin-left: 16px;
11940 }
11941 .fab-buttons-center {
11942   left: 0%;
11943   top: 0%;
11944   width: 100%;
11945   height: 100%;
11946 }
11947 .fab-buttons-center a {
11948   position: absolute;
11949 }
11950 .fab-buttons-center a:nth-child(1) {
11951   left: 50%;
11952   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11953   bottom: 100%;
11954   margin-bottom: 16px;
11955   transform: translateY(-8px) scale(0.3);
11956   transform-origin: center bottom;
11957 }
11958 .fab-buttons-center a:nth-child(2) {
11959   left: 100%;
11960   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11961   top: 50%;
11962   margin-left: 16px;
11963   transform: translateX(-8px) scale(0.3);
11964   transform-origin: left center;
11965 }
11966 .fab-buttons-center a:nth-child(3) {
11967   left: 50%;
11968   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11969   top: 100%;
11970   margin-top: 16px;
11971   transform: translateY(8px) scale(0.3);
11972   transform-origin: center top;
11973 }
11974 .fab-buttons-center a:nth-child(4) {
11975   right: 100%;
11976   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11977   top: 50%;
11978   margin-right: 16px;
11979   transform: translateX(8px) scale(0.3);
11980   transform-origin: right center;
11981 }
11982 .fab-morph {
11983   border-radius: calc(var(--f7-fab-size) / 2);
11984   background: var(--f7-fab-bg-color, var(--f7-theme-color));
11985   box-shadow: var(--f7-fab-box-shadow);
11986 }
11987 .fab-morph > a {
11988   box-shadow: none;
11989   background: none !important;
11990 }
11991 .fab-opened.fab-morph > a i {
11992   opacity: 0;
11993 }
11994 .fab-morph,
11995 .fab-morph > a,
11996 .fab-morph-target {
11997   transition-duration: 250ms;
11998 }
11999 .fab-morph-target:not(.fab-morph-target-visible) {
12000   display: none;
12001 }
12002 .fab-extended {
12003   width: auto;
12004   min-width: var(--f7-fab-extended-size);
12005 }
12006 .fab-extended > a {
12007   width: 100%;
12008   height: var(--f7-fab-extended-size);
12009 }
12010 .fab-extended > a i {
12011   left: calc(var(--f7-fab-extended-size) / 2);
12012 }
12013 .fab-extended i ~ .fab-text {
12014   padding-left: var(--f7-fab-extended-size);
12015 }
12016 .fab-extended > a {
12017   width: 100% !important;
12018 }
12019 .fab-text {
12020   box-sizing: border-box;
12021   font-size: var(--f7-fab-extended-text-font-size);
12022   padding: var(--f7-fab-extended-text-padding);
12023   font-weight: var(--f7-fab-extended-text-font-weight);
12024   letter-spacing: var(--f7-fab-extended-text-letter-spacing);
12025   text-transform: uppercase;
12026 }
12027 .fab-label-button {
12028   overflow: visible !important;
12029 }
12030 .fab-label {
12031   position: absolute;
12032   top: 50%;
12033   padding: var(--f7-fab-label-padding);
12034   border-radius: var(--f7-fab-label-border-radius);
12035   background: var(--f7-fab-label-bg-color);
12036   color: var(--f7-fab-label-text-color);
12037   box-shadow: var(--f7-fab-label-box-shadow);
12038   white-space: nowrap;
12039   transform: translateY(-50%);
12040   pointer-events: none;
12041 }
12042 .fab[class*="fab-right-"] .fab-label {
12043   right: 100%;
12044   margin-right: 8px;
12045 }
12046 .fab[class*="fab-left-"] .fab-label {
12047   left: 100%;
12048   margin-left: 8px;
12049 }
12050 .navbar ~ * .fab[class*="-top"],
12051 .navbar ~ .fab[class*="-top"] {
12052   margin-top: var(--f7-navbar-height);
12053 }
12054 .toolbar-top ~ * .fab[class*="-top"],
12055 .toolbar-top ~ .fab[class*="-top"],
12056 .ios .toolbar-top-ios ~ * .fab[class*="-top"],
12057 .ios .toolbar-top-ios ~ .fab[class*="-top"],
12058 .md .toolbar-top-md ~ * .fab[class*="-top"],
12059 .md .toolbar-top-md ~ .fab[class*="-top"] {
12060   margin-top: var(--f7-toolbar-height);
12061 }
12062 .toolbar-bottom ~ * .fab[class*="-bottom"],
12063 .toolbar-bottom ~ .fab[class*="-bottom"],
12064 .ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
12065 .ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
12066 .md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
12067 .md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
12068   margin-bottom: var(--f7-toolbar-height);
12069 }
12070 .tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
12071 .tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
12072 .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
12073 .ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
12074 .md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
12075 .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
12076   margin-bottom: var(--f7-tabbar-labels-height);
12077 }
12078 .tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
12079 .tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
12080 .ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
12081 .ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
12082 .md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
12083 .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
12084   margin-top: var(--f7-tabbar-labels-height);
12085 }
12086 .messagebar ~ * .fab[class*="-bottom"],
12087 .messagebar ~ .fab[class*="-bottom"] {
12088   margin-bottom: var(--f7-messagebar-height);
12089 }
12090 .navbar + .toolbar-top ~ * .fab[class*="-top"],
12091 .ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
12092 .md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
12093 .navbar + .toolbar-top ~ .fab[class*="-top"],
12094 .ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"],
12095 .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
12096   margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height));
12097 }
12098 .navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"],
12099 .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
12100 .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
12101 .navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"],
12102 .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"],
12103 .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
12104   margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height));
12105 }
12106 .ios .fab > a.active-state,
12107 .ios .fab-buttons a.active-state {
12108   transition-duration: 0ms;
12109 }
12110 /* === Searchbar === */
12111 :root {
12112   /*
12113   --f7-searchbar-link-color: var(--f7-bars-link-color);
12114   */
12115 }
12116 .ios {
12117   /*
12118   --f7-searchbar-bg-image: var(--f7-bars-bg-image);
12119   --f7-searchbar-bg-color: var(--f7-bars-bg-color);
12120   --f7-searchbar-border-color: var(--f7-bars-border-color);
12121   */
12122   --f7-searchbar-height: 44px;
12123   /*
12124   --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
12125   */
12126   --f7-searchbar-search-icon-color: #939398;
12127   --f7-searchbar-placeholder-color: #939398;
12128   --f7-searchbar-input-text-color: #000;
12129   --f7-searchbar-input-font-size: 17px;
12130   --f7-searchbar-input-bg-color: #e8e8ea;
12131   --f7-searchbar-input-border-radius: 8px;
12132   --f7-searchbar-input-height: 32px;
12133   --f7-searchbar-input-padding-horizontal: 28px;
12134   /*
12135   --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
12136   */
12137   --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
12138   --f7-searchbar-shadow-image: none;
12139   --f7-searchbar-in-page-content-margin: 0px;
12140   --f7-searchbar-in-page-content-box-shadow: none;
12141   --f7-searchbar-in-page-content-border-radius: 0;
12142 }
12143 .ios .theme-dark,
12144 .ios.theme-dark {
12145   --f7-searchbar-bg-color: #303030;
12146   --f7-searchbar-input-bg-color: #171717;
12147   --f7-searchbar-input-text-color: #fff;
12148 }
12149 .md {
12150   --f7-searchbar-bg-color: #fff;
12151   --f7-searchbar-border-color: transparent;
12152   --f7-searchbar-height: 48px;
12153   --f7-searchbar-link-color: #737373;
12154   --f7-searchbar-search-icon-color: #737373;
12155   --f7-searchbar-placeholder-color: #939398;
12156   --f7-searchbar-input-text-color: #000;
12157   --f7-searchbar-input-font-size: 20px;
12158   --f7-searchbar-input-bg-color: #fff;
12159   --f7-searchbar-input-border-radius: 0px;
12160   --f7-searchbar-input-height: 100%;
12161   --f7-searchbar-input-padding-horizontal: 48px;
12162   --f7-searchbar-input-clear-button-color: #737373;
12163   --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
12164   --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
12165   --f7-searchbar-in-page-content-margin: 8px;
12166   --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
12167   --f7-searchbar-in-page-content-border-radius: 4px;
12168 }
12169 .searchbar {
12170   width: 100%;
12171   position: relative;
12172   z-index: 200;
12173   height: var(--f7-searchbar-height);
12174   background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
12175   background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
12176   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
12177 }
12178 .searchbar.no-hairline:after,
12179 .searchbar.no-border:after {
12180   display: none !important;
12181 }
12182 .searchbar.no-shadow:before {
12183   display: none !important;
12184 }
12185 .searchbar:after {
12186   content: '';
12187   position: absolute;
12188   background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
12189   display: block;
12190   z-index: 15;
12191   top: auto;
12192   right: auto;
12193   bottom: 0;
12194   left: 0;
12195   height: 1px;
12196   width: 100%;
12197   transform-origin: 50% 100%;
12198   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12199 }
12200 .page > .searchbar {
12201   z-index: 510;
12202 }
12203 .page > .searchbar:before {
12204   content: '';
12205   position: absolute;
12206   right: 0;
12207   width: 100%;
12208   top: 100%;
12209   bottom: auto;
12210   height: 8px;
12211   pointer-events: none;
12212   background: var(--f7-searchbar-shadow-image, var(--f7-bars-shadow-bottom-image));
12213 }
12214 .searchbar input[type="text"],
12215 .searchbar input[type="search"] {
12216   box-sizing: border-box;
12217   width: 100%;
12218   height: 100%;
12219   display: block;
12220   border: none;
12221   -webkit-appearance: none;
12222      -moz-appearance: none;
12223           appearance: none;
12224   font-family: inherit;
12225   font-weight: normal;
12226   color: var(--f7-searchbar-input-text-color);
12227   font-size: var(--f7-searchbar-input-font-size);
12228   background-color: var(--f7-searchbar-input-bg-color);
12229   border-radius: var(--f7-searchbar-input-border-radius);
12230   position: relative;
12231   padding: 0;
12232   padding-left: var(--f7-searchbar-input-padding-left);
12233   padding-right: var(--f7-searchbar-input-padding-right);
12234 }
12235 .searchbar input[type="text"]::-webkit-input-placeholder,
12236 .searchbar input[type="search"]::-webkit-input-placeholder {
12237   color: var(--f7-searchbar-placeholder-color);
12238   opacity: 1;
12239 }
12240 .searchbar input[type="text"]::-moz-placeholder,
12241 .searchbar input[type="search"]::-moz-placeholder {
12242   color: var(--f7-searchbar-placeholder-color);
12243   opacity: 1;
12244 }
12245 .searchbar input[type="text"]::-ms-input-placeholder,
12246 .searchbar input[type="search"]::-ms-input-placeholder {
12247   color: var(--f7-searchbar-placeholder-color);
12248   opacity: 1;
12249 }
12250 .searchbar input[type="text"]::placeholder,
12251 .searchbar input[type="search"]::placeholder {
12252   color: var(--f7-searchbar-placeholder-color);
12253   opacity: 1;
12254 }
12255 .searchbar input::-webkit-search-cancel-button {
12256   -webkit-appearance: none;
12257           appearance: none;
12258 }
12259 .searchbar .searchbar-input-wrap {
12260   flex-shrink: 1;
12261   width: 100%;
12262   height: var(--f7-searchbar-input-height);
12263   position: relative;
12264 }
12265 .searchbar a {
12266   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12267 }
12268 .page > .searchbar {
12269   position: absolute;
12270   left: 0;
12271   top: 0;
12272 }
12273 .page-content .searchbar {
12274   border-radius: var(--f7-searchbar-in-page-content-border-radius);
12275   margin: var(--f7-searchbar-in-page-content-margin);
12276   width: auto;
12277   box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
12278 }
12279 .page-content .searchbar .searchbar-inner,
12280 .page-content .searchbar input[type="text"],
12281 .page-content .searchbar input[type="search"] {
12282   border-radius: var(--f7-searchbar-in-page-content-border-radius);
12283 }
12284 .searchbar .input-clear-button {
12285   color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
12286 }
12287 .searchbar-expandable {
12288   position: absolute;
12289   transition-duration: 300ms;
12290   pointer-events: none;
12291 }
12292 .navbar-inner-large .searchbar-expandable:after {
12293   display: none !important;
12294 }
12295 .navbar .searchbar.searchbar-expandable {
12296   --f7-searchbar-expandable-size: var(--f7-navbar-height);
12297 }
12298 .toolbar .searchbar.searchbar-expandable {
12299   --f7-searchbar-expandable-size: var(--f7-toolbar-height);
12300 }
12301 .subnavbar .searchbar.searchbar-expandable {
12302   --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
12303 }
12304 .tabbar-labels .searchbar.searchbar-expandable {
12305   --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
12306 }
12307 .searchbar-inner {
12308   position: absolute;
12309   left: 0;
12310   top: 0;
12311   width: 100%;
12312   height: 100%;
12313   display: flex;
12314   align-items: center;
12315   box-sizing: border-box;
12316 }
12317 .searchbar-disable-button {
12318   cursor: pointer;
12319   pointer-events: none;
12320   -webkit-appearance: none;
12321      -moz-appearance: none;
12322           appearance: none;
12323   background: none;
12324   border: none;
12325   outline: 0;
12326   padding: 0;
12327   margin: 0;
12328   width: auto;
12329   opacity: 0;
12330 }
12331 .searchbar-icon {
12332   pointer-events: none;
12333   background-position: center;
12334   background-repeat: no-repeat;
12335 }
12336 .searchbar-icon:after {
12337   color: var(--f7-searchbar-search-icon-color);
12338   font-family: 'framework7-core-icons';
12339   font-weight: normal;
12340   font-style: normal;
12341   line-height: 1;
12342   letter-spacing: normal;
12343   text-transform: none;
12344   white-space: nowrap;
12345   word-wrap: normal;
12346   direction: ltr;
12347   -webkit-font-smoothing: antialiased;
12348   text-rendering: optimizeLegibility;
12349   -moz-osx-font-smoothing: grayscale;
12350   -moz-font-feature-settings: "liga";
12351        font-feature-settings: "liga";
12352   text-align: center;
12353   display: block;
12354   width: 100%;
12355   height: 100%;
12356   font-size: 20px;
12357 }
12358 .searchbar-backdrop {
12359   position: absolute;
12360   left: 0;
12361   top: 0;
12362   width: 100%;
12363   height: 100%;
12364   z-index: 100;
12365   opacity: 0;
12366   pointer-events: none;
12367   transition-duration: 300ms;
12368   transform: translate3d(0, 0, 0);
12369   background: var(--f7-searchbar-backdrop-bg-color);
12370 }
12371 .searchbar-backdrop.searchbar-backdrop-in {
12372   opacity: 1;
12373   pointer-events: auto;
12374 }
12375 .page-content > .searchbar-backdrop {
12376   position: fixed;
12377 }
12378 .searchbar-not-found {
12379   display: none;
12380 }
12381 .hidden-by-searchbar,
12382 .list .hidden-by-searchbar,
12383 .list.li.hidden-by-searchbar,
12384 .list li.hidden-by-searchbar {
12385   display: none !important;
12386 }
12387 .navbar.with-searchbar-expandable-enabled,
12388 .navbar-inner.with-searchbar-expandable-enabled {
12389   --f7-navbar-large-collapse-progress: 1;
12390 }
12391 .navbar.with-searchbar-expandable-enabled .title-large,
12392 .navbar-inner.with-searchbar-expandable-enabled .title-large,
12393 .navbar.with-searchbar-expandable-enabled .title-large-text,
12394 .navbar-inner.with-searchbar-expandable-enabled .title-large-text,
12395 .navbar.with-searchbar-expandable-enabled .title-large-inner,
12396 .navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
12397   transition-duration: 300ms;
12398 }
12399 .page-content.with-searchbar-expandable-enabled {
12400   height: calc(100% + var(--f7-navbar-large-title-height));
12401   transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
12402   transition-duration: 300ms;
12403   transition-property: transform;
12404 }
12405 .navbar ~ .page:not(.no-navbar) > .searchbar,
12406 .page > .navbar ~ .searchbar {
12407   top: var(--f7-navbar-height);
12408 }
12409 .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
12410 .page-with-navbar-large .navbar ~ .searchbar,
12411 .page-with-navbar-large .navbar ~ * .searchbar {
12412   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
12413   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
12414 }
12415 .page > .searchbar ~ * .page-content,
12416 .page > .searchbar ~ .page-content {
12417   padding-top: var(--f7-searchbar-height);
12418 }
12419 .page > .navbar ~ .searchbar ~ * .page-content,
12420 .page > .navbar ~ .searchbar ~ .page-content,
12421 .navbar ~ .page:not(.no-navbar) > .searchbar ~ .page-content,
12422 .navbar ~ .page:not(.no-navbar) > .searchbar ~ * .page-content {
12423   padding-top: calc(var(--f7-navbar-height) + var(--f7-searchbar-height));
12424 }
12425 .page-with-navbar-large > .navbar ~ .searchbar ~ * .page-content,
12426 .page-with-navbar-large > .navbar ~ .searchbar ~ .page-content,
12427 .navbar ~ .page-with-navbar-large:not(.no-navbar) > .searchbar ~ .page-content,
12428 .navbar ~ .page-with-navbar-large:not(.no-navbar) > .searchbar ~ * .page-content {
12429   padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height));
12430 }
12431 .page > .toolbar-top ~ .searchbar,
12432 .ios .page > .toolbar-top-ios ~ .searchbar,
12433 .md .page > .toolbar-top-md ~ .searchbar {
12434   top: var(--f7-toolbar-height);
12435 }
12436 .page > .toolbar-top ~ .searchbar ~ * .page-content,
12437 .ios .page > .toolbar-top-ios ~ .searchbar ~ * .page-content,
12438 .md .page > .toolbar-top-md ~ .searchbar ~ * .page-content,
12439 .page > .toolbar-top ~ .searchbar ~ .page-content,
12440 .ios .page > .toolbar-top-ios ~ .searchbar ~ .page-content,
12441 .md .page > .toolbar-top-md ~ .searchbar ~ .page-content {
12442   padding-top: calc(var(--f7-toolbar-height) + var(--f7-searchbar-height));
12443 }
12444 .page > .tabbar-labels.toolbar-top ~ .searchbar,
12445 .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
12446 .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar {
12447   top: var(--f7-tabbar-labels-height);
12448 }
12449 .page > .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content,
12450 .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content,
12451 .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content,
12452 .page > .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content,
12453 .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content,
12454 .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content {
12455   padding-top: calc(var(--f7-tabbar-labels-height) + var(--f7-searchbar-height));
12456 }
12457 .page > .navbar ~ .toolbar-top ~ .searchbar,
12458 .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
12459 .md .page > .navbar ~ .toolbar-top-md ~ .searchbar {
12460   top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
12461 }
12462 .page > .navbar ~ .toolbar-top ~ .searchbar ~ * .page-content,
12463 .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ * .page-content,
12464 .md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ * .page-content,
12465 .page > .navbar ~ .toolbar-top ~ .searchbar ~ .page-content,
12466 .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ .page-content,
12467 .md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ .page-content {
12468   padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-searchbar-height));
12469 }
12470 .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
12471 .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
12472 .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar {
12473   top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
12474 }
12475 .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content,
12476 .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content,
12477 .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content,
12478 .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content,
12479 .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content,
12480 .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content {
12481   padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-searchbar-height));
12482 }
12483 .ios {
12484   --f7-searchbar-input-padding-left: var(--f7-searchbar-input-padding-horizontal);
12485   --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal);
12486 }
12487 .ios .searchbar input[type="search"],
12488 .ios .searchbar input[type="text"] {
12489   z-index: 30;
12490 }
12491 .ios .searchbar .input-clear-button {
12492   z-index: 40;
12493   right: 7px;
12494 }
12495 .ios .searchbar-inner {
12496   padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left));
12497 }
12498 .ios .searchbar-icon {
12499   width: 13px;
12500   height: 13px;
12501   position: absolute;
12502   top: 50%;
12503   margin-top: -6px;
12504   z-index: 40;
12505   left: 8px;
12506 }
12507 .ios .searchbar-icon:after {
12508   content: 'search_ios';
12509   line-height: 13px;
12510 }
12511 .ios .searchbar-disable-button {
12512   font-size: 17px;
12513   flex-shrink: 0;
12514   transform: translate3d(0, 0, 0);
12515   transition-duration: 300ms;
12516   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12517   display: none;
12518 }
12519 .ios .searchbar-disable-button.active-state {
12520   transition-duration: 0ms;
12521   opacity: 0.3 !important;
12522 }
12523 .ios .searchbar-enabled .searchbar-disable-button {
12524   pointer-events: auto;
12525   opacity: 1;
12526   margin-left: 8px;
12527 }
12528 .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
12529   transition-duration: 300ms !important;
12530 }
12531 .ios .searchbar-expandable {
12532   --f7-searchbar-expandable-size: var(--f7-searchbar-height);
12533   left: 0;
12534   bottom: 0;
12535   opacity: 1;
12536   width: 100%;
12537   height: 0%;
12538   transform: translate3d(0, 0, 0);
12539   overflow: hidden;
12540 }
12541 .ios .searchbar-expandable .searchbar-disable-button {
12542   margin-left: 8px;
12543   opacity: 1;
12544   display: block;
12545 }
12546 .ios .searchbar-expandable .searchbar-inner {
12547   height: var(--f7-searchbar-expandable-size);
12548 }
12549 .ios .navbar-inner.with-searchbar-expandable-enabled .left,
12550 .ios .navbar-inner.with-searchbar-expandable-enabled .title,
12551 .ios .navbar-inner.with-searchbar-expandable-enabled .right {
12552   transform: translateY(calc(-1 * var(--f7-navbar-height)));
12553   transition: 300ms;
12554   opacity: 0;
12555 }
12556 .ios .searchbar-expandable.searchbar-enabled {
12557   opacity: 1;
12558   height: var(--f7-searchbar-expandable-size);
12559   pointer-events: auto;
12560 }
12561 .md {
12562   --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px);
12563   --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal);
12564 }
12565 .md .searchbar-inner {
12566   padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left);
12567 }
12568 .md .searchbar-icon,
12569 .md .searchbar-disable-button {
12570   position: absolute;
12571   left: calc(-4px + var(--f7-safe-area-left));
12572   top: 50%;
12573   transition-duration: 300ms;
12574 }
12575 .md .searchbar-icon {
12576   width: 24px;
12577   height: 24px;
12578   margin-left: 12px;
12579   margin-top: -12px;
12580 }
12581 .md .searchbar-icon:after {
12582   content: 'search_md';
12583   line-height: 1.2;
12584 }
12585 .md .searchbar-disable-button {
12586   width: 48px;
12587   height: 48px;
12588   transform: rotate(-90deg) scale(0.5);
12589   font-size: 0 !important;
12590   display: block;
12591   margin-top: -24px;
12592   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12593   --f7-link-highlight-color: var(--f7-link-highlight-black);
12594 }
12595 .md .searchbar-disable-button:before {
12596   content: '';
12597   width: 152%;
12598   height: 152%;
12599   position: absolute;
12600   left: -26%;
12601   top: -26%;
12602   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
12603   background-repeat: no-repeat;
12604   background-position: center;
12605   background-size: 100% 100%;
12606   opacity: 0;
12607   pointer-events: none;
12608   transition-duration: 600ms;
12609 }
12610 .md .searchbar-disable-button.active-state:before {
12611   opacity: 1;
12612   transition-duration: 150ms;
12613 }
12614 .md .searchbar-disable-button:after {
12615   font-family: 'framework7-core-icons';
12616   font-weight: normal;
12617   font-style: normal;
12618   line-height: 1;
12619   letter-spacing: normal;
12620   text-transform: none;
12621   white-space: nowrap;
12622   word-wrap: normal;
12623   direction: ltr;
12624   -webkit-font-smoothing: antialiased;
12625   text-rendering: optimizeLegibility;
12626   -moz-osx-font-smoothing: grayscale;
12627   -moz-font-feature-settings: "liga";
12628        font-feature-settings: "liga";
12629   text-align: center;
12630   display: block;
12631   width: 100%;
12632   height: 100%;
12633   font-size: 20px;
12634   line-height: 48px;
12635   content: "arrow_left_md";
12636 }
12637 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
12638   transform: rotate(0deg) scale(1);
12639   pointer-events: auto;
12640   opacity: 1;
12641 }
12642 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
12643   opacity: 0;
12644   transform: rotate(90deg) scale(0.5);
12645 }
12646 .md .searchbar .input-clear-button {
12647   width: 48px;
12648   height: 48px;
12649   margin-top: -24px;
12650   right: 0;
12651   --f7-link-highlight-color: var(--f7-link-highlight-black);
12652 }
12653 .md .searchbar .input-clear-button:before {
12654   content: '';
12655   width: 152%;
12656   height: 152%;
12657   position: absolute;
12658   left: -26%;
12659   top: -26%;
12660   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
12661   background-repeat: no-repeat;
12662   background-position: center;
12663   background-size: 100% 100%;
12664   opacity: 0;
12665   pointer-events: none;
12666   transition-duration: 600ms;
12667 }
12668 .md .searchbar .input-clear-button.active-state:before {
12669   opacity: 1;
12670   transition-duration: 150ms;
12671 }
12672 .md .searchbar .input-clear-button:after {
12673   line-height: 48px;
12674   content: 'delete_md';
12675   opacity: 1;
12676 }
12677 .md .searchbar .input-clear-button:before {
12678   margin-left: 0;
12679   margin-top: 0;
12680 }
12681 .md .page > .searchbar,
12682 .md .subnavbar .searchbar,
12683 .md .searchbar-expandable {
12684   --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px + 8px);
12685 }
12686 .md .page > .searchbar .searchbar-icon,
12687 .md .subnavbar .searchbar .searchbar-icon,
12688 .md .searchbar-expandable .searchbar-icon,
12689 .md .page > .searchbar .searchbar-disable-button,
12690 .md .subnavbar .searchbar .searchbar-disable-button,
12691 .md .searchbar-expandable .searchbar-disable-button {
12692   left: calc(-4px + 8px + var(--f7-safe-area-left));
12693 }
12694 .md .searchbar-expandable {
12695   --f7-searchbar-expandable-size: var(--f7-searchbar-height);
12696   height: 100%;
12697   opacity: 0;
12698   top: 50%;
12699   border-radius: calc(var(--f7-searchbar-expandable-size));
12700   width: calc(var(--f7-searchbar-expandable-size));
12701   margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
12702   transform: translate3d(0px, 0px, 0px);
12703   left: 100%;
12704   margin-left: calc(var(--f7-searchbar-expandable-size) * -1);
12705 }
12706 .md .searchbar-expandable.searchbar-enabled {
12707   width: 100%;
12708   border-radius: 0;
12709   opacity: 1;
12710   pointer-events: auto;
12711   top: 0;
12712   margin-top: 0;
12713   left: 0;
12714   margin-left: 0;
12715 }
12716 /* === Messages === */
12717 :root {
12718   --f7-messages-content-bg-color: #fff;
12719   --f7-message-text-header-text-color: inherit;
12720   --f7-message-text-header-opacity: 0.65;
12721   --f7-message-text-header-font-size: 12px;
12722   --f7-message-text-footer-text-color: inherit;
12723   --f7-message-text-footer-opacity: 0.65;
12724   --f7-message-text-footer-font-size: 12px;
12725   --f7-message-bubble-line-height: 1.2;
12726   --f7-message-header-font-size: 12px;
12727   --f7-message-footer-font-size: 11px;
12728   --f7-message-name-font-size: 12px;
12729   --f7-message-typing-indicator-bg-color: #000;
12730   /*
12731   --f7-message-sent-bg-color: var(--f7-theme-color);
12732   */
12733   --f7-message-sent-text-color: #fff;
12734   --f7-message-received-bg-color: #e5e5ea;
12735   --f7-message-received-text-color: #000;
12736 }
12737 .ios {
12738   --f7-messages-title-text-color: #8e8e93;
12739   --f7-messages-title-font-size: 11px;
12740   --f7-message-header-text-color: #8e8e93;
12741   --f7-message-footer-text-color: #8e8e93;
12742   --f7-message-name-text-color: #8e8e93;
12743   --f7-message-avatar-size: 29px;
12744   --f7-message-margin: 10px;
12745   --f7-message-bubble-font-size: 17px;
12746   --f7-message-bubble-border-radius: 16px;
12747   --f7-message-bubble-padding-vertical: 6px;
12748   --f7-message-bubble-padding-horizontal: 16px;
12749   --f7-message-typing-indicator-opacity: 0.35;
12750 }
12751 .ios .theme-dark,
12752 .ios.theme-dark {
12753   --f7-messages-content-bg-color: transparent;
12754   --f7-message-received-bg-color: #333;
12755   --f7-message-received-text-color: #fff;
12756   --f7-message-typing-indicator-bg-color: #fff;
12757 }
12758 .md {
12759   --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
12760   --f7-messages-title-font-size: 12px;
12761   --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
12762   --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
12763   --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
12764   --f7-message-avatar-size: 32px;
12765   --f7-message-margin: 16px;
12766   --f7-message-bubble-font-size: 16px;
12767   --f7-message-bubble-border-radius: 4px;
12768   --f7-message-bubble-padding-vertical: 6px;
12769   --f7-message-bubble-padding-horizontal: 8px;
12770   --f7-message-typing-indicator-opacity: 0.6;
12771 }
12772 .md .theme-dark,
12773 .md.theme-dark {
12774   --f7-messages-content-bg-color: transparent;
12775   --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
12776   --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
12777   --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
12778   --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
12779   --f7-message-received-bg-color: #333;
12780   --f7-message-received-text-color: #fff;
12781   --f7-message-typing-indicator-bg-color: #fff;
12782 }
12783 .messages-content,
12784 .messages {
12785   background: var(--f7-messages-content-bg-color);
12786 }
12787 .messages {
12788   display: flex;
12789   flex-direction: column;
12790   min-height: 100%;
12791   position: relative;
12792   z-index: 1;
12793 }
12794 .messages-title,
12795 .message {
12796   margin-top: var(--f7-message-margin);
12797 }
12798 .messages-title:last-child,
12799 .message:last-child {
12800   margin-bottom: var(--f7-message-margin);
12801 }
12802 .messages-title {
12803   text-align: center;
12804   width: 100%;
12805   line-height: 1;
12806   color: var(--f7-messages-title-text-color);
12807   font-size: var(--f7-messages-title-font-size);
12808 }
12809 .message {
12810   max-width: 70%;
12811   box-sizing: border-box;
12812   display: flex;
12813   align-items: flex-end;
12814   position: relative;
12815   z-index: 1;
12816   transform: translate3d(0, 0, 0);
12817 }
12818 .message-avatar {
12819   border-radius: 50%;
12820   position: relative;
12821   background-size: cover;
12822   align-self: flex-end;
12823   flex-shrink: 0;
12824   width: var(--f7-message-avatar-size);
12825   height: var(--f7-message-avatar-size);
12826 }
12827 .message-content {
12828   position: relative;
12829   display: flex;
12830   flex-direction: column;
12831 }
12832 .message-header,
12833 .message-footer,
12834 .message-name {
12835   line-height: 1;
12836 }
12837 .message-header {
12838   color: var(--f7-message-header-text-color);
12839   font-size: var(--f7-message-header-font-size);
12840 }
12841 .message-footer {
12842   color: var(--f7-message-footer-text-color);
12843   font-size: var(--f7-message-footer-font-size);
12844   margin-bottom: -1em;
12845 }
12846 .message-name {
12847   color: var(--f7-message-name-text-color);
12848   font-size: var(--f7-message-name-font-size);
12849 }
12850 .message-bubble {
12851   box-sizing: border-box;
12852   word-break: break-word;
12853   display: flex;
12854   flex-direction: column;
12855   position: relative;
12856   line-height: var(--f7-message-bubble-line-height);
12857   font-size: var(--f7-message-bubble-font-size);
12858   border-radius: var(--f7-message-bubble-border-radius);
12859   padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
12860   min-height: 32px;
12861 }
12862 .message-image img {
12863   display: block;
12864   max-width: 100%;
12865   height: auto;
12866   width: auto;
12867 }
12868 .message-text-header,
12869 .message-text-footer {
12870   line-height: 1;
12871 }
12872 .message-text-header {
12873   color: var(--f7-message-text-header-text-color);
12874   opacity: var(--f7-message-text-header-opacity);
12875   font-size: var(--f7-message-text-header-font-size);
12876 }
12877 .message-text-footer {
12878   color: var(--f7-message-text-footer-text-color);
12879   opacity: var(--f7-message-text-footer-opacity);
12880   font-size: var(--f7-message-text-footer-font-size);
12881 }
12882 .message-text {
12883   text-align: left;
12884 }
12885 .message-sent {
12886   text-align: right;
12887   flex-direction: row-reverse;
12888   align-self: flex-end;
12889 }
12890 .message-sent .message-bubble {
12891   color: var(--f7-message-sent-text-color);
12892   background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
12893 }
12894 .message-sent .message-content {
12895   align-items: flex-end;
12896 }
12897 .message-sent.message-tail .message-bubble {
12898   border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
12899 }
12900 .message-received {
12901   flex-direction: row;
12902 }
12903 .message-received .message-bubble {
12904   color: var(--f7-message-received-text-color);
12905   background: var(--f7-message-received-bg-color);
12906 }
12907 .message-received .message-content {
12908   align-items: flex-start;
12909 }
12910 .message-received.message-tail .message-bubble {
12911   border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
12912 }
12913 .message:not(.message-last) .message-avatar {
12914   opacity: 0;
12915 }
12916 .message:not(.message-first) .message-name {
12917   display: none;
12918 }
12919 .message.message-same-name .message-name {
12920   display: none;
12921 }
12922 .message.message-same-header .message-header {
12923   display: none;
12924 }
12925 .message.message-same-footer .message-footer {
12926   display: none;
12927 }
12928 .message-appear-from-bottom {
12929   animation: message-appear-from-bottom 300ms;
12930 }
12931 .message-appear-from-top {
12932   animation: message-appear-from-top 300ms;
12933 }
12934 .message-typing-indicator {
12935   display: inline-block;
12936   font-size: 0;
12937   vertical-align: middle;
12938 }
12939 .message-typing-indicator > div {
12940   display: inline-block;
12941   position: relative;
12942   background: var(--f7-message-typing-indicator-bg-color);
12943   opacity: var(--f7-message-typing-indicator-opacity);
12944   vertical-align: middle;
12945   border-radius: 50%;
12946 }
12947 @keyframes message-appear-from-bottom {
12948   from {
12949     transform: translate3d(0, 100%, 0);
12950   }
12951   to {
12952     transform: translate3d(0, 0, 0);
12953   }
12954 }
12955 @keyframes message-appear-from-top {
12956   from {
12957     transform: translate3d(0, -100%, 0);
12958   }
12959   to {
12960     transform: translate3d(0, 0, 0);
12961   }
12962 }
12963 .ios .messages-title b,
12964 .ios .message-header b,
12965 .ios .message-footer b,
12966 .ios .message-name b {
12967   font-weight: 600;
12968 }
12969 .ios .message-header,
12970 .ios .message-name {
12971   margin-bottom: 3px;
12972 }
12973 .ios .message-footer {
12974   margin-top: 3px;
12975 }
12976 .ios .message-bubble {
12977   min-width: 48px;
12978 }
12979 .ios .message-image {
12980   margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
12981 }
12982 .ios .message-image:first-child {
12983   margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
12984 }
12985 .ios .message-image:first-child img {
12986   border-top-left-radius: var(--f7-message-bubble-border-radius);
12987   border-top-right-radius: var(--f7-message-bubble-border-radius);
12988 }
12989 .ios .message-image:last-child {
12990   margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
12991 }
12992 .ios .message-image:last-child img {
12993   border-bottom-left-radius: var(--f7-message-bubble-border-radius);
12994   border-bottom-right-radius: var(--f7-message-bubble-border-radius);
12995 }
12996 .ios .message-text-header {
12997   margin-bottom: 3px;
12998 }
12999 .ios .message-text-footer {
13000   margin-top: 3px;
13001 }
13002 .ios .message-received {
13003   margin-left: calc(10px + var(--f7-safe-area-left));
13004 }
13005 .ios .message-received .message-header,
13006 .ios .message-received .message-footer,
13007 .ios .message-received .message-name {
13008   margin-left: var(--f7-message-bubble-padding-horizontal);
13009 }
13010 .ios .message-received .message-bubble {
13011   padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
13012   -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
13013 }
13014 .ios .message-received .message-image {
13015   margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
13016 }
13017 .ios .message-received.message-tail:not(.message-typing) .message-bubble {
13018   -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
13019 }
13020 .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
13021   border-bottom-left-radius: 0px;
13022 }
13023 .ios .message-sent {
13024   margin-right: calc(10px + var(--f7-safe-area-right));
13025 }
13026 .ios .message-sent .message-header,
13027 .ios .message-sent .message-footer,
13028 .ios .message-sent .message-name {
13029   margin-right: var(--f7-message-bubble-padding-horizontal);
13030 }
13031 .ios .message-sent .message-bubble {
13032   padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
13033   -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
13034 }
13035 .ios .message-sent .message-image {
13036   margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
13037 }
13038 .ios .message-sent.message-tail .message-bubble {
13039   -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
13040 }
13041 .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
13042   border-bottom-right-radius: 0px;
13043 }
13044 .ios .message + .message:not(.message-first) {
13045   margin-top: 1px;
13046 }
13047 .ios .message-received.message-typing .message-content:after,
13048 .ios .message-received.message-typing .message-content:before {
13049   content: '';
13050   position: absolute;
13051   background: var(--f7-message-received-bg-color);
13052   border-radius: 50%;
13053 }
13054 .ios .message-received.message-typing .message-content:after {
13055   width: 11px;
13056   height: 11px;
13057   left: 4px;
13058   bottom: 0px;
13059 }
13060 .ios .message-received.message-typing .message-content:before {
13061   width: 6px;
13062   height: 6px;
13063   left: -1px;
13064   bottom: -4px;
13065 }
13066 .ios .message-typing-indicator > div {
13067   width: 9px;
13068   height: 9px;
13069 }
13070 .ios .message-typing-indicator > div + div {
13071   margin-left: 4px;
13072 }
13073 .ios .message-typing-indicator > div:nth-child(1) {
13074   animation: ios-message-typing-indicator 900ms infinite;
13075 }
13076 .ios .message-typing-indicator > div:nth-child(2) {
13077   animation: ios-message-typing-indicator 900ms 150ms infinite;
13078 }
13079 .ios .message-typing-indicator > div:nth-child(3) {
13080   animation: ios-message-typing-indicator 900ms 300ms infinite;
13081 }
13082 @keyframes ios-message-typing-indicator {
13083   0% {
13084     opacity: 0.35;
13085   }
13086   25% {
13087     opacity: 0.2;
13088   }
13089   50% {
13090     opacity: 0.2;
13091   }
13092 }
13093 .md .messages-title b,
13094 .md .message-header b,
13095 .md .message-footer b,
13096 .md .message-name b {
13097   font-weight: 500;
13098 }
13099 .md .message-header,
13100 .md .message-name {
13101   margin-bottom: 2px;
13102 }
13103 .md .message-footer {
13104   margin-top: 2px;
13105 }
13106 .md .message-text-header {
13107   margin-bottom: 4px;
13108 }
13109 .md .message-text-footer {
13110   margin-top: 4px;
13111 }
13112 .md .message-received.message-tail .message-bubble:before,
13113 .md .message-sent.message-tail .message-bubble:before {
13114   position: absolute;
13115   content: '';
13116   bottom: 0;
13117   width: 0;
13118   height: 0;
13119 }
13120 .md .message-received {
13121   margin-left: calc(8px + var(--f7-safe-area-left));
13122 }
13123 .md .message-received .message-avatar + .message-content {
13124   margin-left: var(--f7-message-bubble-padding-horizontal);
13125 }
13126 .md .message-received.message-tail .message-bubble:before {
13127   border-left: 8px solid transparent;
13128   border-right: 0 solid transparent;
13129   border-bottom: 8px solid var(--f7-message-received-bg-color);
13130   right: 100%;
13131 }
13132 .md .message-sent {
13133   margin-right: calc(8px + var(--f7-safe-area-right));
13134 }
13135 .md .message-sent .message-avatar + .message-content {
13136   margin-right: var(--f7-message-bubble-padding-horizontal);
13137 }
13138 .md .message-sent.message-tail .message-bubble:before {
13139   border-left: 0 solid transparent;
13140   border-right: 8px solid transparent;
13141   border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
13142   left: 100%;
13143 }
13144 .md .message + .message:not(.message-first) {
13145   margin-top: 8px;
13146 }
13147 .md .message-typing-indicator > div {
13148   width: 6px;
13149   height: 6px;
13150 }
13151 .md .message-typing-indicator > div + div {
13152   margin-left: 6px;
13153 }
13154 .md .message-typing-indicator > div:nth-child(1) {
13155   animation: md-message-typing-indicator 900ms infinite;
13156 }
13157 .md .message-typing-indicator > div:nth-child(2) {
13158   animation: md-message-typing-indicator 900ms 150ms infinite;
13159 }
13160 .md .message-typing-indicator > div:nth-child(3) {
13161   animation: md-message-typing-indicator 900ms 300ms infinite;
13162 }
13163 @keyframes md-message-typing-indicator {
13164   0% {
13165     transform: translateY(0%);
13166   }
13167   25% {
13168     transform: translateY(-5px);
13169   }
13170   50% {
13171     transform: translateY(0%);
13172   }
13173 }
13174 /* === Messagebar === */
13175 :root {
13176   --f7-messagebar-bg-color: #fff;
13177   --f7-messagebar-textarea-bg-color: transparent;
13178   --f7-messagebar-attachments-height: 155px;
13179   --f7-messagebar-attachment-height: 155px;
13180   --f7-messagebar-attachment-landscape-height: 120px;
13181   --f7-messagebar-sheet-height: 252px;
13182   --f7-messagebar-sheet-landscape-height: 192px;
13183 }
13184 .ios {
13185   --f7-messagebar-height: 44px;
13186   --f7-messagebar-font-size: 17px;
13187   /*
13188   --f7-messagebar-link-color: var(--f7-theme-color);
13189   */
13190   --f7-messagebar-border-color: transparent;
13191   --f7-messagebar-shadow-image: none;
13192   --f7-messagebar-textarea-border-radius: 17px;
13193   --f7-messagebar-textarea-padding: 6px 15px;
13194   --f7-messagebar-textarea-height: 34px;
13195   --f7-messagebar-textarea-text-color: #000;
13196   --f7-messagebar-textarea-font-size: 17px;
13197   --f7-messagebar-textarea-line-height: 20px;
13198   --f7-messagebar-textarea-border: 1px solid #c8c8cd;
13199   --f7-messagebar-sheet-bg-color: #d1d5da;
13200   --f7-messagebar-attachments-border-color: #c8c8cd;
13201   --f7-messagebar-attachment-border-radius: 12px;
13202 }
13203 .ios .theme-dark,
13204 .ios.theme-dark {
13205   --f7-messagebar-bg-color: var(--f7-bars-bg-color);
13206   --f7-messagebar-textarea-text-color: #fff;
13207   --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
13208   --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
13209 }
13210 .md {
13211   --f7-messagebar-height: 48px;
13212   --f7-messagebar-font-size: 16px;
13213   --f7-messagebar-link-color: #333;
13214   --f7-messagebar-border-color: #d1d1d1;
13215   --f7-messagebar-shadow-image: none;
13216   --f7-messagebar-textarea-border-radius: 0px;
13217   --f7-messagebar-textarea-padding: 5px 8px;
13218   --f7-messagebar-textarea-height: 32px;
13219   --f7-messagebar-textarea-text-color: #333;
13220   --f7-messagebar-textarea-font-size: 16px;
13221   --f7-messagebar-textarea-line-height: 22px;
13222   --f7-messagebar-textarea-border: 1px solid transparent;
13223   --f7-messagebar-sheet-bg-color: #fff;
13224   --f7-messagebar-attachments-border-color: #ddd;
13225   --f7-messagebar-attachment-border-radius: 4px;
13226 }
13227 .md .theme-dark,
13228 .md.theme-dark {
13229   --f7-messagebar-bg-color: var(--f7-bars-bg-color);
13230   --f7-messagebar-border-color: #282829;
13231   --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
13232   --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
13233   --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
13234 }
13235 .messagebar {
13236   transform: translate3d(0, 0, 0);
13237   background: var(--f7-messagebar-bg-color);
13238   height: auto;
13239   min-height: var(--f7-messagebar-height);
13240   font-size: var(--f7-messagebar-font-size);
13241   padding-bottom: var(--f7-safe-area-bottom);
13242   bottom: 0;
13243 }
13244 .messagebar:before {
13245   content: '';
13246   position: absolute;
13247   background-color: var(--f7-messagebar-border-color);
13248   display: block;
13249   z-index: 15;
13250   top: 0;
13251   right: auto;
13252   bottom: auto;
13253   left: 0;
13254   height: 1px;
13255   width: 100%;
13256   transform-origin: 50% 0%;
13257   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13258 }
13259 .messagebar:after {
13260   content: '';
13261   position: absolute;
13262   right: 0;
13263   width: 100%;
13264   bottom: 100%;
13265   height: 8px;
13266   top: auto;
13267   pointer-events: none;
13268   background: var(--f7-messagebar-shadow-image);
13269 }
13270 .messagebar.no-hairline:before,
13271 .messagebar.no-border:before {
13272   display: none !important;
13273 }
13274 .messagebar.no-shadow:after,
13275 .messagebar.toolbar-hidden:after {
13276   display: none !important;
13277 }
13278 .messagebar .toolbar-inner {
13279   top: auto;
13280   position: relative;
13281   height: auto;
13282   bottom: auto;
13283 }
13284 .messagebar.messagebar-sheet-visible > .toolbar-inner {
13285   bottom: 0;
13286 }
13287 .messagebar .messagebar-area {
13288   width: 100%;
13289   flex-shrink: 1;
13290   overflow: hidden;
13291   position: relative;
13292 }
13293 .messagebar textarea {
13294   width: 100%;
13295   flex-shrink: 1;
13296   background-color: var(--f7-messagebar-textarea-bg-color);
13297   border-radius: var(--f7-messagebar-textarea-border-radius);
13298   padding: var(--f7-messagebar-textarea-padding);
13299   height: var(--f7-messagebar-textarea-height);
13300   color: var(--f7-messagebar-textarea-text-color);
13301   font-size: var(--f7-messagebar-textarea-font-size);
13302   line-height: var(--f7-messagebar-textarea-line-height);
13303   border: var(--f7-messagebar-textarea-border);
13304 }
13305 .messagebar a.link {
13306   align-self: flex-end;
13307   flex-shrink: 0;
13308   color: var(--f7-messagebar-link-color, var(--f7-theme-color));
13309 }
13310 .messagebar-attachments {
13311   width: 100%;
13312   will-change: scroll-position;
13313   overflow: auto;
13314   -webkit-overflow-scrolling: touch;
13315   font-size: 0;
13316   white-space: nowrap;
13317   box-sizing: border-box;
13318   position: relative;
13319 }
13320 .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
13321   display: none;
13322 }
13323 .messagebar-attachment {
13324   background-size: cover;
13325   background-position: center;
13326   background-repeat: no-repeat;
13327   display: inline-block;
13328   vertical-align: middle;
13329   white-space: normal;
13330   height: var(--f7-messagebar-attachment-height);
13331   position: relative;
13332   border-radius: var(--f7-messagebar-attachment-border-radius);
13333 }
13334 @media (orientation: landscape) {
13335   .messagebar-attachment {
13336     height: var(--f7-messagebar-attachment-landscape-height);
13337   }
13338 }
13339 .messagebar-attachment img {
13340   display: block;
13341   width: auto;
13342   height: 100%;
13343   border-radius: var(--f7-messagebar-attachment-border-radius);
13344 }
13345 .messagebar-attachment + .messagebar-attachment {
13346   margin-left: 8px;
13347 }
13348 .messagebar-sheet {
13349   will-change: scroll-position;
13350   overflow: auto;
13351   -webkit-overflow-scrolling: touch;
13352   display: flex;
13353   flex-wrap: wrap;
13354   flex-direction: column;
13355   align-content: flex-start;
13356   height: var(--f7-messagebar-sheet-height);
13357   background-color: var(--f7-messagebar-sheet-bg-color);
13358   padding-left: var(--f7-safe-area-left);
13359   padding-right: var(--f7-safe-area-right);
13360 }
13361 @media (orientation: landscape) {
13362   .messagebar-sheet {
13363     height: var(--f7-messagebar-sheet-landscape-height);
13364   }
13365 }
13366 .messagebar-sheet-image,
13367 .messagebar-sheet-item {
13368   box-sizing: border-box;
13369   flex-shrink: 0;
13370   margin-top: 1px;
13371   position: relative;
13372   overflow: hidden;
13373   height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
13374   width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
13375   margin-left: 1px;
13376 }
13377 @media (orientation: landscape) {
13378   .messagebar-sheet-image,
13379   .messagebar-sheet-item {
13380     width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
13381     height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
13382   }
13383 }
13384 .messagebar-sheet-image .icon-checkbox,
13385 .messagebar-sheet-item .icon-checkbox,
13386 .messagebar-sheet-image .icon-radio,
13387 .messagebar-sheet-item .icon-radio {
13388   position: absolute;
13389   right: 8px;
13390   bottom: 8px;
13391 }
13392 .messagebar-sheet-image {
13393   background-size: cover;
13394   background-position: center;
13395   background-repeat: no-repeat;
13396 }
13397 .messagebar-attachment-delete {
13398   display: block;
13399   position: absolute;
13400   border-radius: 50%;
13401   box-sizing: border-box;
13402   cursor: pointer;
13403   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
13404 }
13405 .messagebar-attachment-delete:after,
13406 .messagebar-attachment-delete:before {
13407   position: absolute;
13408   content: '';
13409   left: 50%;
13410   top: 50%;
13411 }
13412 .messagebar-attachment-delete:after {
13413   transform: rotate(45deg);
13414 }
13415 .messagebar-attachment-delete:before {
13416   transform: rotate(-45deg);
13417 }
13418 .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
13419   display: none;
13420 }
13421 .messagebar ~ .page-content,
13422 .messagebar ~ * .page-content {
13423   padding-bottom: calc(var(--f7-messagebar-height) + var(--f7-safe-area-bottom));
13424 }
13425 .ios .messagebar a.link.icon-only:first-child {
13426   margin-left: -8px;
13427 }
13428 .ios .messagebar a.link.icon-only:last-child {
13429   margin-right: -8px;
13430 }
13431 .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
13432   margin-left: 8px;
13433 }
13434 .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
13435   margin-left: 8px;
13436 }
13437 .ios .messagebar-area {
13438   margin-top: 5px;
13439   margin-bottom: 5px;
13440 }
13441 .ios .messagebar-attachments {
13442   padding: 5px;
13443   border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
13444   border: 1px solid var(--f7-messagebar-attachments-border-color);
13445   border-bottom: none;
13446 }
13447 .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
13448   border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
13449 }
13450 .ios .messagebar-attachment {
13451   font-size: 14px;
13452 }
13453 .ios .messagebar-attachment-delete {
13454   right: 5px;
13455   top: 5px;
13456   width: 20px;
13457   height: 20px;
13458   background: #7d7e80;
13459   border: 2px solid #fff;
13460 }
13461 .ios .messagebar-attachment-delete:after,
13462 .ios .messagebar-attachment-delete:before {
13463   width: 10px;
13464   height: 2px;
13465   background: #fff;
13466   margin-left: -5px;
13467   margin-top: -1px;
13468 }
13469 .md .messagebar-attachments {
13470   padding: 8px;
13471   border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
13472 }
13473 .md .messagebar-area {
13474   margin-top: 8px;
13475   margin-bottom: 8px;
13476 }
13477 .md .messagebar-sheet-image .icon-checkbox,
13478 .md .messagebar-sheet-item .icon-checkbox {
13479   border-color: #fff;
13480   background: rgba(255, 255, 255, 0.25);
13481   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
13482 }
13483 .md .messagebar-attachment-delete {
13484   right: 8px;
13485   top: 8px;
13486   width: 24px;
13487   height: 24px;
13488   background-color: var(--f7-theme-color);
13489   border-radius: 4px;
13490 }
13491 .md .messagebar-attachment-delete:after,
13492 .md .messagebar-attachment-delete:before {
13493   width: 14px;
13494   height: 2px;
13495   background: #fff;
13496   margin-left: -7px;
13497   margin-top: -1px;
13498 }
13499 /* === Swiper === */
13500 .swiper-container {
13501   margin: 0 auto;
13502   position: relative;
13503   overflow: hidden;
13504   list-style: none;
13505   padding: 0;
13506   /* Fix of Webkit flickering */
13507   z-index: 1;
13508 }
13509 .swiper-container-no-flexbox .swiper-slide {
13510   float: left;
13511 }
13512 .swiper-container-vertical > .swiper-wrapper {
13513   flex-direction: column;
13514 }
13515 .swiper-wrapper {
13516   position: relative;
13517   width: 100%;
13518   height: 100%;
13519   z-index: 1;
13520   display: flex;
13521   transition-property: transform;
13522   box-sizing: content-box;
13523 }
13524 .swiper-container-android .swiper-slide,
13525 .swiper-wrapper {
13526   transform: translate3d(0px, 0, 0);
13527 }
13528 .swiper-container-multirow > .swiper-wrapper {
13529   flex-wrap: wrap;
13530 }
13531 .swiper-container-free-mode > .swiper-wrapper {
13532   transition-timing-function: ease-out;
13533   margin: 0 auto;
13534 }
13535 .swiper-slide {
13536   flex-shrink: 0;
13537   width: 100%;
13538   height: 100%;
13539   position: relative;
13540   transition-property: transform;
13541 }
13542 .swiper-slide-invisible-blank {
13543   visibility: hidden;
13544 }
13545 /* Auto Height */
13546 .swiper-container-autoheight,
13547 .swiper-container-autoheight .swiper-slide {
13548   height: auto;
13549 }
13550 .swiper-container-autoheight .swiper-wrapper {
13551   align-items: flex-start;
13552   transition-property: transform, height;
13553 }
13554 /* 3D Effects */
13555 .swiper-container-3d {
13556   perspective: 1200px;
13557 }
13558 .swiper-container-3d .swiper-wrapper,
13559 .swiper-container-3d .swiper-slide,
13560 .swiper-container-3d .swiper-slide-shadow-left,
13561 .swiper-container-3d .swiper-slide-shadow-right,
13562 .swiper-container-3d .swiper-slide-shadow-top,
13563 .swiper-container-3d .swiper-slide-shadow-bottom,
13564 .swiper-container-3d .swiper-cube-shadow {
13565   transform-style: preserve-3d;
13566 }
13567 .swiper-container-3d .swiper-slide-shadow-left,
13568 .swiper-container-3d .swiper-slide-shadow-right,
13569 .swiper-container-3d .swiper-slide-shadow-top,
13570 .swiper-container-3d .swiper-slide-shadow-bottom {
13571   position: absolute;
13572   left: 0;
13573   top: 0;
13574   width: 100%;
13575   height: 100%;
13576   pointer-events: none;
13577   z-index: 10;
13578 }
13579 .swiper-container-3d .swiper-slide-shadow-left {
13580   background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13581 }
13582 .swiper-container-3d .swiper-slide-shadow-right {
13583   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13584 }
13585 .swiper-container-3d .swiper-slide-shadow-top {
13586   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13587 }
13588 .swiper-container-3d .swiper-slide-shadow-bottom {
13589   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13590 }
13591 /* IE10 Windows Phone 8 Fixes */
13592 .swiper-container-wp8-horizontal,
13593 .swiper-container-wp8-horizontal > .swiper-wrapper {
13594   touch-action: pan-y;
13595 }
13596 .swiper-container-wp8-vertical,
13597 .swiper-container-wp8-vertical > .swiper-wrapper {
13598   touch-action: pan-x;
13599 }
13600 /* a11y */
13601 .swiper-container .swiper-notification {
13602   position: absolute;
13603   left: 0;
13604   top: 0;
13605   pointer-events: none;
13606   opacity: 0;
13607   z-index: -1000;
13608 }
13609 .swiper-container-coverflow .swiper-wrapper {
13610   /* Windows 8 IE 10 fix */
13611   -ms-perspective: 1200px;
13612 }
13613 .swiper-container-cube {
13614   overflow: visible;
13615 }
13616 .swiper-container-cube .swiper-slide {
13617   pointer-events: none;
13618   -webkit-backface-visibility: hidden;
13619           backface-visibility: hidden;
13620   z-index: 1;
13621   visibility: hidden;
13622   transform-origin: 0 0;
13623   width: 100%;
13624   height: 100%;
13625 }
13626 .swiper-container-cube .swiper-slide .swiper-slide {
13627   pointer-events: none;
13628 }
13629 .swiper-container-cube.swiper-container-rtl .swiper-slide {
13630   transform-origin: 100% 0;
13631 }
13632 .swiper-container-cube .swiper-slide-active,
13633 .swiper-container-cube .swiper-slide-active .swiper-slide-active {
13634   pointer-events: auto;
13635 }
13636 .swiper-container-cube .swiper-slide-active,
13637 .swiper-container-cube .swiper-slide-next,
13638 .swiper-container-cube .swiper-slide-prev,
13639 .swiper-container-cube .swiper-slide-next + .swiper-slide {
13640   pointer-events: auto;
13641   visibility: visible;
13642 }
13643 .swiper-container-cube .swiper-slide-shadow-top,
13644 .swiper-container-cube .swiper-slide-shadow-bottom,
13645 .swiper-container-cube .swiper-slide-shadow-left,
13646 .swiper-container-cube .swiper-slide-shadow-right {
13647   z-index: 0;
13648   -webkit-backface-visibility: hidden;
13649           backface-visibility: hidden;
13650 }
13651 .swiper-container-cube .swiper-cube-shadow {
13652   position: absolute;
13653   left: 0;
13654   bottom: 0px;
13655   width: 100%;
13656   height: 100%;
13657   background: #000;
13658   opacity: 0.6;
13659   -webkit-filter: blur(50px);
13660   filter: blur(50px);
13661   z-index: 0;
13662 }
13663 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
13664   transition-timing-function: ease-out;
13665 }
13666 .swiper-container-fade .swiper-slide {
13667   pointer-events: none;
13668   transition-property: opacity;
13669 }
13670 .swiper-container-fade .swiper-slide .swiper-slide {
13671   pointer-events: none;
13672 }
13673 .swiper-container-fade .swiper-slide-active,
13674 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
13675   pointer-events: auto;
13676 }
13677 .swiper-container-flip {
13678   overflow: visible;
13679 }
13680 .swiper-container-flip .swiper-slide {
13681   pointer-events: none;
13682   -webkit-backface-visibility: hidden;
13683           backface-visibility: hidden;
13684   z-index: 1;
13685 }
13686 .swiper-container-flip .swiper-slide .swiper-slide {
13687   pointer-events: none;
13688 }
13689 .swiper-container-flip .swiper-slide-active,
13690 .swiper-container-flip .swiper-slide-active .swiper-slide-active {
13691   pointer-events: auto;
13692 }
13693 .swiper-container-flip .swiper-slide-shadow-top,
13694 .swiper-container-flip .swiper-slide-shadow-bottom,
13695 .swiper-container-flip .swiper-slide-shadow-left,
13696 .swiper-container-flip .swiper-slide-shadow-right {
13697   z-index: 0;
13698   -webkit-backface-visibility: hidden;
13699           backface-visibility: hidden;
13700 }
13701 /* Scrollbar */
13702 .swiper-scrollbar {
13703   border-radius: 10px;
13704   position: relative;
13705   -ms-touch-action: none;
13706   background: rgba(0, 0, 0, 0.1);
13707 }
13708 .swiper-container-horizontal > .swiper-scrollbar {
13709   position: absolute;
13710   left: 1%;
13711   bottom: 3px;
13712   z-index: 50;
13713   height: 5px;
13714   width: 98%;
13715 }
13716 .swiper-container-vertical > .swiper-scrollbar {
13717   position: absolute;
13718   right: 3px;
13719   top: 1%;
13720   z-index: 50;
13721   width: 5px;
13722   height: 98%;
13723 }
13724 .swiper-scrollbar-drag {
13725   height: 100%;
13726   width: 100%;
13727   position: relative;
13728   background: rgba(0, 0, 0, 0.5);
13729   border-radius: 10px;
13730   left: 0;
13731   top: 0;
13732 }
13733 .swiper-scrollbar-cursor-drag {
13734   cursor: move;
13735 }
13736 .swiper-scrollbar-lock {
13737   display: none;
13738 }
13739 .swiper-zoom-container {
13740   width: 100%;
13741   height: 100%;
13742   display: flex;
13743   justify-content: center;
13744   align-items: center;
13745   text-align: center;
13746 }
13747 .swiper-zoom-container > img,
13748 .swiper-zoom-container > svg,
13749 .swiper-zoom-container > canvas {
13750   max-width: 100%;
13751   max-height: 100%;
13752   object-fit: contain;
13753 }
13754 .swiper-slide-zoomed {
13755   cursor: move;
13756 }
13757 .swiper-button-prev,
13758 .swiper-button-next {
13759   position: absolute;
13760   top: 50%;
13761   width: 27px;
13762   height: 44px;
13763   line-height: 44px;
13764   text-align: center;
13765   margin-top: -22px;
13766   z-index: 10;
13767   cursor: pointer;
13768   color: var(--f7-theme-color);
13769 }
13770 .swiper-button-prev:after,
13771 .swiper-button-next:after {
13772   font-family: 'framework7-core-icons';
13773   font-weight: normal;
13774   font-style: normal;
13775   line-height: 1;
13776   letter-spacing: normal;
13777   text-transform: none;
13778   white-space: nowrap;
13779   word-wrap: normal;
13780   direction: ltr;
13781   -webkit-font-smoothing: antialiased;
13782   text-rendering: optimizeLegibility;
13783   -moz-osx-font-smoothing: grayscale;
13784   -moz-font-feature-settings: "liga";
13785        font-feature-settings: "liga";
13786   text-align: center;
13787   display: block;
13788   width: 100%;
13789   height: 100%;
13790   font-size: 20px;
13791   font-size: 44px;
13792 }
13793 .swiper-button-prev.swiper-button-disabled,
13794 .swiper-button-next.swiper-button-disabled {
13795   opacity: 0.35;
13796   cursor: auto;
13797   pointer-events: none;
13798 }
13799 .swiper-button-prev,
13800 .swiper-container-rtl .swiper-button-next {
13801   left: 10px;
13802   right: auto;
13803 }
13804 .swiper-button-prev:after,
13805 .swiper-container-rtl .swiper-button-next:after {
13806   content: 'swiper_prev';
13807 }
13808 .swiper-button-next,
13809 .swiper-container-rtl .swiper-button-prev {
13810   right: 10px;
13811   left: auto;
13812 }
13813 .swiper-button-next:after,
13814 .swiper-container-rtl .swiper-button-prev:after {
13815   content: 'swiper_next';
13816 }
13817 .swiper-pagination {
13818   position: absolute;
13819   text-align: center;
13820   transition: 300ms opacity;
13821   transform: translate3d(0, 0, 0);
13822   z-index: 10;
13823 }
13824 .swiper-pagination.swiper-pagination-hidden {
13825   opacity: 0;
13826 }
13827 .swiper-pagination-fraction,
13828 .swiper-pagination-custom,
13829 .swiper-container-horizontal > .swiper-pagination-bullets {
13830   bottom: 10px;
13831   left: 0;
13832   width: 100%;
13833 }
13834 .swiper-pagination-bullets-dynamic {
13835   overflow: hidden;
13836   font-size: 0;
13837 }
13838 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13839   transform: scale(0.33);
13840   position: relative;
13841 }
13842 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
13843   transform: scale(1);
13844 }
13845 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
13846   transform: scale(0.66);
13847 }
13848 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
13849   transform: scale(0.33);
13850 }
13851 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
13852   transform: scale(0.66);
13853 }
13854 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
13855   transform: scale(0.33);
13856 }
13857 .swiper-pagination-bullet {
13858   width: 8px;
13859   height: 8px;
13860   display: inline-block;
13861   border-radius: 100%;
13862   background: #000;
13863   opacity: 0.2;
13864 }
13865 button.swiper-pagination-bullet {
13866   border: none;
13867   margin: 0;
13868   padding: 0;
13869   box-shadow: none;
13870   -webkit-appearance: none;
13871      -moz-appearance: none;
13872           appearance: none;
13873 }
13874 .swiper-pagination-clickable .swiper-pagination-bullet {
13875   cursor: pointer;
13876 }
13877 .swiper-pagination-bullet-active {
13878   opacity: 1;
13879   background: var(--f7-theme-color);
13880 }
13881 .swiper-container-vertical > .swiper-pagination-bullets {
13882   right: 10px;
13883   top: 50%;
13884   transform: translate3d(0px, -50%, 0);
13885 }
13886 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
13887   margin: 6px 0;
13888   display: block;
13889 }
13890 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
13891   top: 50%;
13892   transform: translateY(-50%);
13893   width: 8px;
13894 }
13895 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13896   display: inline-block;
13897   transition: 200ms transform, 200ms top;
13898 }
13899 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
13900   margin: 0 4px;
13901 }
13902 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
13903   left: 50%;
13904   transform: translateX(-50%);
13905   white-space: nowrap;
13906 }
13907 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13908   transition: 200ms transform, 200ms left;
13909 }
13910 .swiper-pagination-progressbar {
13911   background: rgba(0, 0, 0, 0.25);
13912   position: absolute;
13913 }
13914 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
13915   background: var(--f7-theme-color);
13916   position: absolute;
13917   left: 0;
13918   top: 0;
13919   width: 100%;
13920   height: 100%;
13921   transform: scale(0);
13922   transform-origin: left top;
13923 }
13924 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
13925   transform-origin: right top;
13926 }
13927 .swiper-container-horizontal > .swiper-pagination-progressbar,
13928 .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
13929   width: 100%;
13930   height: 4px;
13931   left: 0;
13932   top: 0;
13933 }
13934 .swiper-container-vertical > .swiper-pagination-progressbar,
13935 .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
13936   width: 4px;
13937   height: 100%;
13938   left: 0;
13939   top: 0;
13940 }
13941 .preloader.swiper-lazy-preloader {
13942   position: absolute;
13943   left: 50%;
13944   top: 50%;
13945   z-index: 10;
13946   width: 32px;
13947   height: 32px;
13948   margin-left: -16px;
13949   margin-top: -16px;
13950 }
13951 /* === Photo Browser === */
13952 :root {
13953   --f7-photobrowser-bg-color: #fff;
13954   --f7-photobrowser-bars-bg-image: none;
13955   /*
13956   --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
13957   --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
13958   --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
13959   */
13960   --f7-photobrowser-caption-font-size: 14px;
13961   --f7-photobrowser-caption-light-text-color: #000;
13962   --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
13963   --f7-photobrowser-caption-dark-text-color: #fff;
13964   --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
13965   --f7-photobrowser-exposed-bg-color: #000;
13966   --f7-photobrowser-dark-bg-color: #000;
13967   --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
13968   --f7-photobrowser-dark-bars-text-color: #fff;
13969   --f7-photobrowser-dark-bars-link-color: #fff;
13970 }
13971 .photo-browser {
13972   position: absolute;
13973   left: 0;
13974   top: 0;
13975   width: 100%;
13976   height: 100%;
13977   z-index: 400;
13978 }
13979 .photo-browser-standalone.modal-in {
13980   transition-duration: 0ms;
13981   animation: photo-browser-in 400ms;
13982 }
13983 .photo-browser-standalone.modal-out {
13984   transition-duration: 0ms;
13985   animation: photo-browser-out 400ms;
13986 }
13987 .photo-browser-standalone.modal-out.swipe-close-to-bottom,
13988 .photo-browser-standalone.modal-out.swipe-close-to-top {
13989   animation: none;
13990 }
13991 .photo-browser-popup.modal-out.swipe-close-to-bottom,
13992 .photo-browser-popup.modal-out.swipe-close-to-top {
13993   transition-duration: 300ms;
13994 }
13995 .photo-browser-popup.modal-out.swipe-close-to-bottom {
13996   transform: translate3d(0, 100%, 0);
13997 }
13998 .photo-browser-popup.modal-out.swipe-close-to-top {
13999   transform: translate3d(0, -100vh, 0);
14000 }
14001 .photo-browser-page {
14002   background: none;
14003 }
14004 .photo-browser-page .toolbar {
14005   transform: none;
14006 }
14007 .photo-browser-popup {
14008   background: none;
14009 }
14010 .photo-browser-of {
14011   margin: 0 5px;
14012 }
14013 .photo-browser-captions {
14014   pointer-events: none;
14015   position: absolute;
14016   left: 0;
14017   width: 100%;
14018   bottom: var(--f7-safe-area-bottom);
14019   z-index: 10;
14020   opacity: 1;
14021   transition: 400ms;
14022 }
14023 .photo-browser-captions.photo-browser-captions-exposed {
14024   opacity: 0;
14025 }
14026 .toolbar ~ .photo-browser-captions {
14027   bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
14028   transform: translate3d(0, 0px, 0);
14029 }
14030 .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
14031   transform: translate3d(0, 0px, 0);
14032 }
14033 .photo-browser-caption {
14034   box-sizing: border-box;
14035   transition: 300ms;
14036   position: absolute;
14037   bottom: 0;
14038   left: 0;
14039   opacity: 0;
14040   padding: 4px 5px;
14041   width: 100%;
14042   text-align: center;
14043   font-size: var(--f7-photobrowser-caption-font-size);
14044 }
14045 .photo-browser-caption:empty {
14046   display: none;
14047 }
14048 .photo-browser-caption.photo-browser-caption-active {
14049   opacity: 1;
14050 }
14051 .photo-browser-captions-light .photo-browser-caption {
14052   color: var(--f7-photobrowser-caption-light-text-color);
14053   background: var(--f7-photobrowser-caption-light-bg-color);
14054 }
14055 .photo-browser-captions-dark .photo-browser-caption {
14056   color: var(--f7-photobrowser-caption-dark-text-color);
14057   background: var(--f7-photobrowser-caption-dark-bg-color);
14058 }
14059 .photo-browser-swiper-container {
14060   position: absolute;
14061   left: 0;
14062   top: 0;
14063   width: 100%;
14064   height: 100%;
14065   overflow: hidden;
14066   background: var(--f7-photobrowser-bg-color);
14067   transition: 400ms;
14068   transition-property: background-color;
14069 }
14070 .photo-browser-prev.swiper-button-disabled,
14071 .photo-browser-next.swiper-button-disabled {
14072   opacity: 0.3;
14073   pointer-events: none;
14074 }
14075 .photo-browser-slide {
14076   width: 100%;
14077   height: 100%;
14078   position: relative;
14079   overflow: hidden;
14080   display: flex;
14081   justify-content: center;
14082   align-items: center;
14083   flex-shrink: 0;
14084   box-sizing: border-box;
14085 }
14086 .photo-browser-slide.photo-browser-transitioning {
14087   transition: 400ms;
14088   transition-property: transform;
14089 }
14090 .photo-browser-slide span.swiper-zoom-container {
14091   display: none;
14092 }
14093 .photo-browser-slide img {
14094   width: auto;
14095   height: auto;
14096   max-width: 100%;
14097   max-height: 100%;
14098   display: none;
14099 }
14100 .photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
14101 .photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
14102 .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
14103   display: flex;
14104 }
14105 .photo-browser-slide.swiper-slide-active img,
14106 .photo-browser-slide.swiper-slide-next img,
14107 .photo-browser-slide.swiper-slide-prev img {
14108   display: inline;
14109 }
14110 .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
14111 .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
14112 .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
14113   display: block;
14114 }
14115 .photo-browser-slide iframe {
14116   width: 100%;
14117   height: 100%;
14118 }
14119 .photo-browser-slide .preloader {
14120   display: none;
14121   position: absolute;
14122   width: 42px;
14123   height: 42px;
14124   margin-left: -21px;
14125   margin-top: -21px;
14126   left: 50%;
14127   top: 50%;
14128 }
14129 .photo-browser-page .navbar,
14130 .view.with-photo-browser-page .navbar,
14131 .photo-browser-page .toolbar,
14132 .view.with-photo-browser-page .toolbar {
14133   background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
14134   background-image: var(--f7-photobrowser-bars-bg-image);
14135   transition: 400ms;
14136   color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
14137 }
14138 .photo-browser-page .navbar a,
14139 .view.with-photo-browser-page .navbar a,
14140 .photo-browser-page .toolbar a,
14141 .view.with-photo-browser-page .toolbar a {
14142   color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14143 }
14144 .photo-browser-exposed .navbar,
14145 .photo-browser-exposed .toolbar {
14146   opacity: 0;
14147   visibility: hidden;
14148   pointer-events: none;
14149 }
14150 .photo-browser-exposed .toolbar ~ .photo-browser-captions {
14151   transform: translate3d(0, var(--f7-toolbar-height), 0);
14152 }
14153 .photo-browser-exposed .photo-browser-swiper-container {
14154   background: var(--f7-photobrowser-exposed-bg-color);
14155 }
14156 .photo-browser-exposed .photo-browser-caption {
14157   color: var(--f7-photobrowser-caption-dark-text-color);
14158   background: var(--f7-photobrowser-caption-dark-bg-color);
14159 }
14160 .view.with-photo-browser-page-exposed .navbar {
14161   opacity: 0;
14162 }
14163 .photo-browser-dark .photo-browser-swiper-container,
14164 .photo-browser-page-dark .photo-browser-swiper-container,
14165 .view.with-photo-browser-page-dark .photo-browser-swiper-container {
14166   background: var(--f7-photobrowser-dark-bg-color);
14167 }
14168 .photo-browser-dark .navbar,
14169 .photo-browser-page-dark .navbar,
14170 .view.with-photo-browser-page-dark .navbar,
14171 .photo-browser-dark .toolbar,
14172 .photo-browser-page-dark .toolbar,
14173 .view.with-photo-browser-page-dark .toolbar {
14174   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
14175   --f7-link-highlight-color: var(--f7-link-highlight-white);
14176   background: var(--f7-photobrowser-dark-bars-bg-color);
14177   color: var(--f7-photobrowser-dark-bars-text-color);
14178 }
14179 .photo-browser-dark .navbar:before,
14180 .photo-browser-page-dark .navbar:before,
14181 .view.with-photo-browser-page-dark .navbar:before,
14182 .photo-browser-dark .toolbar:before,
14183 .photo-browser-page-dark .toolbar:before,
14184 .view.with-photo-browser-page-dark .toolbar:before {
14185   display: none !important;
14186 }
14187 .photo-browser-dark .navbar:after,
14188 .photo-browser-page-dark .navbar:after,
14189 .view.with-photo-browser-page-dark .navbar:after,
14190 .photo-browser-dark .toolbar:after,
14191 .photo-browser-page-dark .toolbar:after,
14192 .view.with-photo-browser-page-dark .toolbar:after {
14193   display: none !important;
14194 }
14195 .photo-browser-dark .navbar a,
14196 .photo-browser-page-dark .navbar a,
14197 .view.with-photo-browser-page-dark .navbar a,
14198 .photo-browser-dark .toolbar a,
14199 .photo-browser-page-dark .toolbar a,
14200 .view.with-photo-browser-page-dark .toolbar a {
14201   color: var(--f7-photobrowser-dark-bars-link-color);
14202 }
14203 @keyframes photo-browser-in {
14204   0% {
14205     transform: translate3d(0, 0, 0) scale(0.5);
14206     opacity: 0;
14207   }
14208   50% {
14209     transform: translate3d(0, 0, 0) scale(1.05);
14210     opacity: 1;
14211   }
14212   100% {
14213     transform: translate3d(0, 0, 0) scale(1);
14214     opacity: 1;
14215   }
14216 }
14217 @keyframes photo-browser-out {
14218   0% {
14219     transform: translate3d(0, 0, 0) scale(1);
14220     opacity: 1;
14221   }
14222   50% {
14223     transform: translate3d(0, 0, 0) scale(1.05);
14224     opacity: 1;
14225   }
14226   100% {
14227     transform: translate3d(0, 0, 0) scale(0.5);
14228     opacity: 0;
14229   }
14230 }
14231 /* === Notifications === */
14232 :root {
14233   --f7-notification-max-width: 568px;
14234 }
14235 .ios {
14236   --f7-notification-margin: 8px;
14237   --f7-notification-padding: 10px;
14238   --f7-notification-border-radius: 12px;
14239   --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
14240   --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
14241   --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
14242   --f7-notification-icon-size: 20px;
14243   --f7-notification-title-color: #000;
14244   --f7-notification-title-font-size: 13px;
14245   --f7-notification-title-text-transform: uppercase;
14246   --f7-notification-title-line-height: 1.4;
14247   --f7-notification-title-font-weight: 400;
14248   --f7-notification-title-letter-spacing: 0.02em;
14249   --f7-notification-title-right-color: #444a51;
14250   --f7-notification-title-right-font-size: 13px;
14251   --f7-notification-subtitle-color: #000;
14252   --f7-notification-subtitle-font-size: 15px;
14253   --f7-notification-subtitle-text-transform: none;
14254   --f7-notification-subtitle-line-height: 1.35;
14255   --f7-notification-subtitle-font-weight: 600;
14256   --f7-notification-text-color: #000;
14257   --f7-notification-text-font-size: 15px;
14258   --f7-notification-text-text-transform: none;
14259   --f7-notification-text-line-height: 1.2;
14260   --f7-notification-text-font-weight: 400;
14261 }
14262 .md {
14263   --f7-notification-margin: 0px;
14264   --f7-notification-padding: 16px;
14265   --f7-notification-border-radius: 0px;
14266   --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
14267   --f7-notification-bg-color: #fff;
14268   --f7-notification-icon-size: 16px;
14269   --f7-notification-title-color: var(--f7-theme-color);
14270   --f7-notification-title-font-size: 12px;
14271   --f7-notification-title-text-transform: none;
14272   --f7-notification-title-line-height: 1;
14273   --f7-notification-title-font-weight: 400;
14274   --f7-notification-title-right-color: #757575;
14275   --f7-notification-title-right-font-size: 12px;
14276   --f7-notification-subtitle-color: #212121;
14277   --f7-notification-subtitle-font-size: 14px;
14278   --f7-notification-subtitle-text-transform: none;
14279   --f7-notification-subtitle-line-height: 1.35;
14280   --f7-notification-subtitle-font-weight: 400;
14281   --f7-notification-text-color: #757575;
14282   --f7-notification-text-font-size: 14px;
14283   --f7-notification-text-text-transform: none;
14284   --f7-notification-text-line-height: 1.35;
14285   --f7-notification-text-font-weight: 400;
14286 }
14287 .notification {
14288   position: absolute;
14289   left: var(--f7-notification-margin);
14290   top: var(--f7-notification-margin);
14291   width: calc(100% - var(--f7-notification-margin) * 2);
14292   z-index: 20000;
14293   font-size: 14px;
14294   margin: 0;
14295   border: none;
14296   display: none;
14297   box-sizing: border-box;
14298   transition-property: transform;
14299   direction: ltr;
14300   max-width: var(--f7-notification-max-width);
14301   padding: var(--f7-notification-padding);
14302   border-radius: var(--f7-notification-border-radius);
14303   box-shadow: var(--f7-notification-box-shadow);
14304   background: var(--f7-notification-bg-color);
14305   margin-top: var(--f7-statusbar-height);
14306   --f7-link-highlight-color: var(--f7-link-highlight-black);
14307   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
14308 }
14309 @media (min-width: 568px) {
14310   .notification {
14311     left: 50%;
14312     width: var(--f7-notification-max-width);
14313     margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
14314   }
14315 }
14316 .notification-title {
14317   color: var(--f7-notification-title-color, var(--f7-theme-color));
14318   font-size: var(--f7-notification-title-font-size);
14319   text-transform: var(--f7-notification-title-text-transform);
14320   line-height: var(--f7-notification-title-line-height);
14321   font-weight: var(--f7-notification-title-font-weight);
14322   letter-spacing: var(--f7-notification-title-letter-spacing);
14323 }
14324 .notification-subtitle {
14325   color: var(--f7-notification-subtitle-color);
14326   font-size: var(--f7-notification-subtitle-font-size);
14327   text-transform: var(--f7-notification-subtitle-text-transform);
14328   line-height: var(--f7-notification-subtitle-line-height);
14329   font-weight: var(--f7-notification-subtitle-font-weight);
14330 }
14331 .notification-text {
14332   color: var(--f7-notification-text-color);
14333   font-size: var(--f7-notification-text-font-size);
14334   text-transform: var(--f7-notification-text-text-transform);
14335   line-height: var(--f7-notification-text-line-height);
14336   font-weight: var(--f7-notification-text-font-weight);
14337 }
14338 .notification-title-right-text {
14339   color: var(--f7-notification-title-right-color);
14340   font-size: var(--f7-notification-title-right-font-size);
14341 }
14342 .notification-icon {
14343   font-size: 0;
14344   line-height: var(--f7-notification-icon-size);
14345 }
14346 .notification-icon i,
14347 .notification-icon {
14348   width: var(--f7-notification-icon-size) !important;
14349   height: var(--f7-notification-icon-size) !important;
14350 }
14351 .notification-icon i {
14352   font-size: var(--f7-notification-icon-size);
14353 }
14354 .notification-header {
14355   display: flex;
14356   justify-content: flex-start;
14357   align-items: center;
14358 }
14359 .notification-close-button {
14360   margin-left: auto;
14361   cursor: pointer;
14362   position: relative;
14363 }
14364 .notification-close-button:after {
14365   font-family: 'framework7-core-icons';
14366   font-weight: normal;
14367   font-style: normal;
14368   line-height: 1;
14369   letter-spacing: normal;
14370   text-transform: none;
14371   white-space: nowrap;
14372   word-wrap: normal;
14373   direction: ltr;
14374   -webkit-font-smoothing: antialiased;
14375   text-rendering: optimizeLegibility;
14376   -moz-osx-font-smoothing: grayscale;
14377   -moz-font-feature-settings: "liga";
14378        font-feature-settings: "liga";
14379   display: block;
14380   width: 100%;
14381   height: 100%;
14382   font-size: 20px;
14383   position: absolute;
14384   left: 50%;
14385   top: 50%;
14386   text-align: center;
14387 }
14388 .ios .notification {
14389   transition-duration: 450ms;
14390   transform: translate3d(0%, -200%, 0);
14391 }
14392 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
14393   .ios .notification {
14394     background: var(--f7-notification-translucent-bg-color-ios);
14395     -webkit-backdrop-filter: blur(10px);
14396             backdrop-filter: blur(10px);
14397   }
14398 }
14399 .ios .notification.modal-in {
14400   transform: translate3d(0%, 0%, 0);
14401   opacity: 1;
14402 }
14403 .ios .notification.modal-out {
14404   transform: translate3d(0%, -200%, 0);
14405 }
14406 .ios .notification-icon {
14407   margin-right: 8px;
14408 }
14409 .ios .notification-header + .notification-content {
14410   margin-top: 10px;
14411 }
14412 .ios .notification-title-right-text {
14413   margin-right: 6px;
14414   margin-left: auto;
14415 }
14416 .ios .notification-title-right-text + .notification-close-button {
14417   margin-left: 10px;
14418 }
14419 .ios .notification-close-button {
14420   font-size: 14px;
14421   width: 20px;
14422   height: 20px;
14423   opacity: 0.3;
14424   transition-duration: 300ms;
14425 }
14426 .ios .notification-close-button.active-state {
14427   transition-duration: 0ms;
14428   opacity: 0.1;
14429 }
14430 .ios .notification-close-button:after {
14431   color: #000;
14432   content: 'notification_close_ios';
14433   font-size: 0.65em;
14434   line-height: 44px;
14435   width: 44px;
14436   height: 44px;
14437   margin-left: -22px;
14438   margin-top: -22px;
14439 }
14440 .md .notification {
14441   transform: translate3d(0, -150%, 0);
14442 }
14443 .md .notification.modal-in {
14444   transition-duration: 0ms;
14445   animation: notification-md-in 400ms ease-out;
14446   transform: translate3d(0, 0%, 0);
14447 }
14448 .md .notification.modal-in.notification-transitioning {
14449   transition-duration: 200ms;
14450 }
14451 .md .notification.modal-out {
14452   animation: none;
14453   transition-duration: 200ms;
14454   transition-timing-function: ease-in;
14455   transform: translate3d(0, -150%, 0);
14456 }
14457 .md .notification-icon {
14458   margin-right: 8px;
14459 }
14460 .md .notification-subtitle + .notification-text {
14461   margin-top: 2px;
14462 }
14463 .md .notification-header + .notification-content {
14464   margin-top: 6px;
14465 }
14466 .md .notification-title-right-text {
14467   margin-left: 4px;
14468 }
14469 .md .notification-title-right-text:before {
14470   content: '';
14471   width: 3px;
14472   height: 3px;
14473   border-radius: 50%;
14474   display: inline-block;
14475   vertical-align: middle;
14476   margin-right: 4px;
14477   background: var(--f7-notification-title-right-color);
14478 }
14479 .md .notification-close-button {
14480   width: 16px;
14481   height: 16px;
14482   transition-duration: 300ms;
14483 }
14484 .md .notification-close-button:before {
14485   content: '';
14486   width: 152%;
14487   height: 152%;
14488   position: absolute;
14489   left: -26%;
14490   top: -26%;
14491   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14492   background-repeat: no-repeat;
14493   background-position: center;
14494   background-size: 100% 100%;
14495   opacity: 0;
14496   pointer-events: none;
14497   transition-duration: 600ms;
14498 }
14499 .md .notification-close-button.active-state:before {
14500   opacity: 1;
14501   transition-duration: 150ms;
14502 }
14503 .md .notification-close-button:before,
14504 .md .notification-close-button:after {
14505   width: 48px;
14506   height: 48px;
14507   left: 50%;
14508   top: 50%;
14509   margin-left: -24px;
14510   margin-top: -24px;
14511 }
14512 .md .notification-close-button:after {
14513   color: #737373;
14514   content: 'delete_md';
14515   line-height: 48px;
14516   font-size: 14px;
14517 }
14518 @keyframes notification-md-in {
14519   0% {
14520     transform: translate3d(0, -150%, 0);
14521   }
14522   50% {
14523     transform: translate3d(0, 10%, 0);
14524   }
14525   100% {
14526     transform: translate3d(0, 0%, 0);
14527   }
14528 }
14529 /* === Autocomplete === */
14530 :root {
14531   --f7-autocomplete-dropdown-bg-color: #fff;
14532   --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
14533   --f7-autocomplete-dropdown-preloader-size: 20px;
14534 }
14535 .ios {
14536   --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
14537   --f7-autocomplete-dropdown-text-color: #000;
14538   --f7-autocomplete-dropdown-text-matching-color: #000;
14539   --f7-autocomplete-dropdown-text-matching-font-weight: 600;
14540 }
14541 .ios .theme-dark,
14542 .ios.theme-dark {
14543   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
14544   --f7-autocomplete-dropdown-text-color: #fff;
14545   --f7-autocomplete-dropdown-text-matching-color: #fff;
14546 }
14547 .md {
14548   --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
14549   --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
14550   --f7-autocomplete-dropdown-text-matching-color: #212121;
14551   --f7-autocomplete-dropdown-text-matching-font-weight: 400;
14552 }
14553 .md .theme-dark,
14554 .md.theme-dark {
14555   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
14556   --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
14557   --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
14558 }
14559 .autocomplete-page .autocomplete-found {
14560   display: block;
14561 }
14562 .autocomplete-page .autocomplete-not-found {
14563   display: none;
14564 }
14565 .autocomplete-page .autocomplete-values {
14566   display: block;
14567 }
14568 .autocomplete-page .list ul:empty {
14569   display: none;
14570 }
14571 .autocomplete-preloader:not(.autocomplete-preloader-visible) {
14572   visibility: hidden;
14573 }
14574 .autocomplete-preloader:not(.autocomplete-preloader-visible),
14575 .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
14576   animation: none;
14577 }
14578 .autocomplete-dropdown {
14579   background: var(--f7-autocomplete-dropdown-bg-color);
14580   box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
14581   box-sizing: border-box;
14582   position: absolute;
14583   z-index: 500;
14584   width: 100%;
14585   left: 0;
14586 }
14587 .autocomplete-dropdown .autocomplete-dropdown-inner {
14588   position: relative;
14589   will-change: scroll-position;
14590   overflow: auto;
14591   -webkit-overflow-scrolling: touch;
14592   height: 100%;
14593   z-index: 1;
14594 }
14595 .autocomplete-dropdown .autocomplete-preloader {
14596   display: none;
14597   position: absolute;
14598   bottom: 100%;
14599   width: var(--f7-autocomplete-dropdown-preloader-size);
14600   height: var(--f7-autocomplete-dropdown-preloader-size);
14601 }
14602 .autocomplete-dropdown .autocomplete-preloader-visible {
14603   display: block;
14604 }
14605 .autocomplete-dropdown .autocomplete-dropdown-placeholder {
14606   color: var(--f7-autocomplete-dropdown-placeholder-color);
14607 }
14608 .autocomplete-dropdown .list {
14609   margin: 0;
14610   color: var(--f7-autocomplete-dropdown-text-color);
14611 }
14612 .autocomplete-dropdown .list b {
14613   color: var(--f7-autocomplete-dropdown-text-matching-color);
14614   font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
14615 }
14616 .autocomplete-dropdown .list ul {
14617   background: none !important;
14618 }
14619 .autocomplete-dropdown .list ul:before {
14620   display: none !important;
14621 }
14622 .autocomplete-dropdown .list ul:after {
14623   display: none !important;
14624 }
14625 .searchbar-input-wrap .autocomplete-dropdown {
14626   background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
14627   border-radius: var(--f7-searchbar-input-border-radius);
14628 }
14629 .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
14630   color: var(--f7-searchbar-placeholder-color);
14631 }
14632 .searchbar-input-wrap .autocomplete-dropdown li:last-child {
14633   border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
14634   position: relative;
14635   overflow: hidden;
14636 }
14637 .searchbar-input-wrap .autocomplete-dropdown .item-content {
14638   padding-left: var(--f7-searchbar-input-padding-left);
14639 }
14640 .list .item-content-dropdown-expanded .item-title.item-label {
14641   width: 0;
14642   flex-shrink: 10;
14643   overflow: hidden;
14644 }
14645 .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
14646   margin-left: 0;
14647 }
14648 .list .item-content-dropdown-expanded .item-input-wrap {
14649   width: 100%;
14650 }
14651 .ios .autocomplete-dropdown .autocomplete-preloader {
14652   right: 15px;
14653   margin-bottom: 12px;
14654 }
14655 .ios .searchbar-input-wrap .autocomplete-dropdown {
14656   margin-top: calc(-1 * var(--f7-searchbar-input-height));
14657   top: 100%;
14658   z-index: 20;
14659 }
14660 .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
14661   padding-top: var(--f7-searchbar-input-height);
14662 }
14663 .md .autocomplete-page .navbar .autocomplete-preloader {
14664   margin-right: 8px;
14665 }
14666 .md .autocomplete-dropdown .autocomplete-preloader {
14667   right: 16px;
14668   margin-bottom: 8px;
14669 }
14670 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
14671 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
14672   border-width: 3px;
14673 }
14674 /* === Tooltip === */
14675 :root {
14676   --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
14677   --f7-tooltip-text-color: #fff;
14678   --f7-tooltip-border-radius: 4px;
14679   --f7-tooltip-padding: 8px 16px;
14680   --f7-tooltip-font-size: 14px;
14681   --f7-tooltip-font-weight: 500;
14682   --f7-tooltip-desktop-padding: 6px 8px;
14683   --f7-tooltip-desktop-font-size: 12px;
14684 }
14685 .tooltip {
14686   position: absolute;
14687   z-index: 20000;
14688   background: var(--f7-tooltip-bg-color);
14689   border-radius: var(--f7-tooltip-border-radius);
14690   padding: var(--f7-tooltip-padding);
14691   color: var(--f7-tooltip-text-color);
14692   font-size: var(--f7-tooltip-font-size);
14693   font-weight: var(--f7-tooltip-font-weight);
14694   box-sizing: border-box;
14695   line-height: 1.2;
14696   opacity: 0;
14697   transform: scale(0.9);
14698   transition-duration: 150ms;
14699   transition-property: opacity, transform;
14700   z-index: 99000;
14701 }
14702 .tooltip.tooltip-in {
14703   transform: scale(1);
14704   opacity: 1;
14705 }
14706 .tooltip.tooltip-out {
14707   opacity: 0;
14708   transform: scale(1);
14709 }
14710 .device-desktop .tooltip {
14711   font-size: var(--f7-tooltip-desktop-font-size);
14712   padding: var(--f7-tooltip-desktop-padding);
14713 }
14714 /* === Gauge === */
14715 .gauge {
14716   position: relative;
14717   text-align: center;
14718   margin-left: auto;
14719   margin-right: auto;
14720   display: inline-block;
14721 }
14722 .gauge-svg,
14723 .gauge svg {
14724   max-width: 100%;
14725   height: auto;
14726 }
14727 .gauge-svg circle,
14728 .gauge svg circle,
14729 .gauge-svg path,
14730 .gauge svg path {
14731   transition-duration: 400ms;
14732 }
14733 /* === Skeleton === */
14734 :root {
14735   --f7-skeleton-color: #ccc;
14736 }
14737 .theme-dark {
14738   --f7-skeleton-color: #515151;
14739 }
14740 .skeleton-text {
14741   font-family: 'framework7-skeleton' !important;
14742 }
14743 .skeleton-text,
14744 .skeleton-text * {
14745   color: var(--f7-skeleton-color) !important;
14746   font-weight: normal !important;
14747   font-style: normal !important;
14748   letter-spacing: -0.015em !important;
14749 }
14750 .skeleton-block {
14751   height: 1em;
14752   background: var(--f7-skeleton-color) !important;
14753   width: 100%;
14754 }
14755 .skeleton-effect-fade {
14756   animation: skeleton-effect-fade 1s infinite;
14757 }
14758 .skeleton-effect-blink {
14759   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
14760   mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
14761   -webkit-mask-size: 200% 100%;
14762   mask-size: 200% 100%;
14763   -webkit-mask-repeat: repeat;
14764   mask-repeat: repeat;
14765   -webkit-mask-position: 50% top;
14766   mask-position: 50% top;
14767   animation: skeleton-effect-blink 1s infinite;
14768 }
14769 .skeleton-effect-pulse {
14770   animation: skeleton-effect-pulse 1s infinite;
14771 }
14772 @keyframes skeleton-effect-fade {
14773   0% {
14774     opacity: 1;
14775   }
14776   50% {
14777     opacity: 0.2;
14778   }
14779   100% {
14780     opacity: 1;
14781   }
14782 }
14783 @keyframes skeleton-effect-blink {
14784   0% {
14785     -webkit-mask-position: 50% top;
14786     mask-position: 50% top;
14787   }
14788   100% {
14789     -webkit-mask-position: -150% top;
14790     mask-position: -150% top;
14791   }
14792 }
14793 @keyframes skeleton-effect-pulse {
14794   0% {
14795     transform: scale(1);
14796   }
14797   40% {
14798     transform: scale(1);
14799   }
14800   50% {
14801     transform: scale(0.975);
14802   }
14803   100% {
14804     transform: scale(1);
14805   }
14806 }
14807 /* === Menu === */
14808 :root {
14809   --f7-menu-text-color: #fff;
14810   --f7-menu-font-size: 16px;
14811   --f7-menu-font-weight: 500;
14812   --f7-menu-line-height: 1.2;
14813   --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
14814   --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
14815   --f7-menu-item-padding-horizontal: 12px;
14816   --f7-menu-item-spacing: 6px;
14817   --f7-menu-item-height: 40px;
14818   --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
14819   --f7-menu-item-border-radius: 8px;
14820   /*
14821   --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
14822   */
14823   --f7-menu-dropdown-item-height: 28px;
14824   --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
14825   --f7-menu-dropdown-padding-vertical: 6px;
14826   /*
14827   --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
14828   */
14829 }
14830 .menu {
14831   z-index: 1000;
14832   position: relative;
14833   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
14834 }
14835 .menu-inner {
14836   display: flex;
14837   justify-content: flex-start;
14838   align-items: flex-start;
14839   padding-left: var(--f7-menu-item-spacing);
14840   padding-right: var(--f7-menu-item-spacing);
14841 }
14842 .menu-inner:after {
14843   content: '';
14844   width: var(--f7-menu-item-spacing);
14845   height: 100%;
14846   flex-shrink: 0;
14847 }
14848 .menu-item {
14849   height: var(--f7-menu-item-height);
14850   min-width: var(--f7-menu-item-height);
14851   flex-shrink: 0;
14852   background: var(--f7-menu-bg-color);
14853   color: var(--f7-menu-text-color);
14854   border-radius: var(--f7-menu-item-border-radius);
14855   position: relative;
14856   box-sizing: border-box;
14857   font-size: var(--f7-menu-font-size);
14858   font-weight: var(--f7-menu-font-weight);
14859   cursor: pointer;
14860   margin-left: var(--f7-menu-item-spacing);
14861 }
14862 .menu-item:first-child {
14863   margin-left: 0;
14864 }
14865 .menu-item.active-state:not(.menu-item-dropdown-opened) {
14866   background-color: rgba(0, 0, 0, 0.7);
14867 }
14868 .menu-item.icon-only {
14869   padding-left: 0;
14870   padding-right: 0;
14871 }
14872 .menu-item-content {
14873   display: flex;
14874   justify-content: center;
14875   align-items: center;
14876   padding: 0 var(--f7-menu-item-padding-horizontal);
14877   height: 100%;
14878   box-sizing: border-box;
14879   width: 100%;
14880   overflow: hidden;
14881   border-radius: var(--f7-menu-item-border-radius);
14882   position: relative;
14883 }
14884 .menu-item-content.icon-only,
14885 .icon-only .menu-item-content {
14886   padding-left: 0;
14887   padding-right: 0;
14888 }
14889 .menu-item-dropdown .menu-item-content:after {
14890   content: '';
14891   position: absolute;
14892   width: 20px;
14893   height: 2px;
14894   left: 50%;
14895   transform: translateX(-50%);
14896   bottom: 4px;
14897   background: var(--f7-menu-item-dropdown-icon-color);
14898   border-radius: 4px;
14899 }
14900 .menu-dropdown {
14901   opacity: 0;
14902   visibility: hidden;
14903   pointer-events: none;
14904   cursor: auto;
14905   height: 10px;
14906   background: var(--f7-menu-bg-color);
14907   position: relative;
14908 }
14909 .menu-dropdown-content {
14910   position: absolute;
14911   top: 100%;
14912   border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
14913   padding-top: var(--f7-menu-dropdown-padding-vertical);
14914   padding-bottom: var(--f7-menu-dropdown-padding-vertical);
14915   box-sizing: border-box;
14916   background: var(--f7-menu-bg-color);
14917   will-change: scroll-position;
14918   overflow: auto;
14919   -webkit-overflow-scrolling: touch;
14920   min-width: calc(100% + 24px);
14921 }
14922 .menu-dropdown-link,
14923 .menu-dropdown-item {
14924   display: flex;
14925   justify-content: space-between;
14926   align-items: center;
14927   padding-left: var(--f7-menu-item-padding-horizontal);
14928   padding-right: var(--f7-menu-item-padding-horizontal);
14929   min-height: var(--f7-menu-dropdown-item-height);
14930   line-height: var(--f7-menu-line-height);
14931   font-size: var(--f7-menu-font-size);
14932   color: var(--f7-menu-text-color);
14933   font-weight: var(--f7-menu-font-weight);
14934   white-space: nowrap;
14935   min-width: 100px;
14936 }
14937 .menu-dropdown-link i,
14938 .menu-dropdown-item i,
14939 .menu-dropdown-link i.icon,
14940 .menu-dropdown-item i.icon,
14941 .menu-dropdown-link i.f7-icons,
14942 .menu-dropdown-item i.f7-icons,
14943 .menu-dropdown-link i.material-icons,
14944 .menu-dropdown-item i.material-icons {
14945   font-size: 20px;
14946 }
14947 .menu-dropdown-link.active-state {
14948   background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
14949   color: var(--f7-menu-text-color);
14950 }
14951 .menu-dropdown-divider {
14952   height: 1px;
14953   margin-top: 2px;
14954   margin-bottom: 2px;
14955   background: var(--f7-menu-dropdown-divider-color);
14956 }
14957 .menu-item-dropdown-opened {
14958   border-bottom-left-radius: 0px;
14959   border-bottom-right-radius: 0px;
14960 }
14961 .menu-item-dropdown-opened .menu-item-content:after {
14962   opacity: 0;
14963 }
14964 .menu-item-dropdown-opened .menu-dropdown {
14965   opacity: 1;
14966   visibility: visible;
14967   pointer-events: auto;
14968 }
14969 .menu-item-dropdown-left .menu-dropdown:after,
14970 .menu-item-dropdown-center .menu-dropdown:after,
14971 .menu-dropdown-left:after .menu-dropdown-center:after {
14972   content: '';
14973   position: absolute;
14974   left: 100%;
14975   bottom: 0;
14976   width: 8px;
14977   height: 8px;
14978   background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
14979 }
14980 .menu-item-dropdown-right .menu-dropdown:before,
14981 .menu-item-dropdown-center .menu-dropdown:before,
14982 .menu-dropdown-right:before,
14983 .menu-dropdown-center:before {
14984   content: '';
14985   position: absolute;
14986   right: 100%;
14987   bottom: 0;
14988   width: 8px;
14989   height: 8px;
14990   background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
14991 }
14992 .menu-item-dropdown-left .menu-dropdown-content,
14993 .menu-dropdown-left .menu-dropdown-content {
14994   left: 0;
14995   border-top-left-radius: 0px;
14996 }
14997 .menu-item-dropdown-right .menu-dropdown-content,
14998 .menu-dropdown-right .menu-dropdown-content {
14999   right: 0;
15000   border-top-right-radius: 0px;
15001 }
15002 .menu-item-dropdown-center .menu-dropdown-content,
15003 .menu-dropdown-center .menu-dropdown-content {
15004   left: 50%;
15005   min-width: calc(100% + 24px + 24px);
15006   transform: translateX(-50%);
15007 }
15008 iframe#viAd {
15009   z-index: 12900 !important;
15010   background: #000 !important;
15011 }
15012 .vi-overlay {
15013   background: rgba(0, 0, 0, 0.85);
15014   z-index: 13100;
15015   position: absolute;
15016   left: 0%;
15017   top: 0%;
15018   width: 100%;
15019   height: 100%;
15020   border-radius: 3px;
15021   display: flex;
15022   justify-content: center;
15023   flex-direction: column;
15024   align-items: center;
15025   align-content: center;
15026   text-align: center;
15027   -webkit-user-select: none;
15028      -moz-user-select: none;
15029       -ms-user-select: none;
15030           user-select: none;
15031 }
15032 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
15033   .vi-overlay {
15034     background: rgba(0, 0, 0, 0.65);
15035     -webkit-backdrop-filter: blur(10px);
15036             backdrop-filter: blur(10px);
15037   }
15038 }
15039 .vi-overlay .vi-overlay-text {
15040   text-align: center;
15041   color: #fff;
15042   max-width: 80%;
15043 }
15044 .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
15045   margin-top: 15px;
15046 }
15047 .vi-overlay .vi-overlay-play-button {
15048   width: 44px;
15049   height: 44px;
15050   border-radius: 50%;
15051   border: 2px solid #fff;
15052   position: relative;
15053 }
15054 .vi-overlay .vi-overlay-play-button.active-state {
15055   opacity: 0.55;
15056 }
15057 .vi-overlay .vi-overlay-play-button:before {
15058   content: '';
15059   width: 0;
15060   height: 0;
15061   border-top: 8px solid transparent;
15062   border-bottom: 8px solid transparent;
15063   border-left: 14px solid #fff;
15064   position: absolute;
15065   left: 50%;
15066   top: 50%;
15067   margin-left: 2px;
15068   transform: translate(-50%, -50%);
15069 }
15070 /* === Elevation === */
15071 :root {
15072   --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
15073   --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
15074     0px 1px 1px 0px rgba(0, 0, 0, 0.14),
15075     0px 1px 3px 0px rgba(0, 0, 0, 0.12);
15076   --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
15077     0px 2px 2px 0px rgba(0, 0, 0, 0.14),
15078     0px 1px 5px 0px rgba(0, 0, 0, 0.12);
15079   --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
15080     0px 3px 4px 0px rgba(0, 0, 0, 0.14),
15081     0px 1px 8px 0px rgba(0, 0, 0, 0.12);
15082   --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
15083     0px 4px 5px 0px rgba(0, 0, 0, 0.14),
15084     0px 1px 10px 0px rgba(0, 0, 0, 0.12);
15085   --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
15086     0px 5px 8px 0px rgba(0, 0, 0, 0.14),
15087     0px 1px 14px 0px rgba(0, 0, 0, 0.12);
15088   --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
15089     0px 6px 10px 0px rgba(0, 0, 0, 0.14),
15090     0px 1px 18px 0px rgba(0, 0, 0, 0.12);
15091   --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
15092     0px 7px 10px 1px rgba(0, 0, 0, 0.14),
15093     0px 2px 16px 1px rgba(0, 0, 0, 0.12);
15094   --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
15095     0px 8px 10px 1px rgba(0, 0, 0, 0.14),
15096     0px 3px 14px 2px rgba(0, 0, 0, 0.12);
15097   --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
15098     0px 9px 12px 1px rgba(0, 0, 0, 0.14),
15099     0px 3px 16px 2px rgba(0, 0, 0, 0.12);
15100   --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
15101     0px 10px 14px 1px rgba(0, 0, 0, 0.14),
15102     0px 4px 18px 3px rgba(0, 0, 0, 0.12);
15103   --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
15104     0px 11px 15px 1px rgba(0, 0, 0, 0.14),
15105     0px 4px 20px 3px rgba(0, 0, 0, 0.12);
15106   --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
15107     0px 12px 17px 2px rgba(0, 0, 0, 0.14),
15108     0px 5px 22px 4px rgba(0, 0, 0, 0.12);
15109   --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
15110     0px 13px 19px 2px rgba(0, 0, 0, 0.14),
15111     0px 5px 24px 4px rgba(0, 0, 0, 0.12);
15112   --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
15113     0px 14px 21px 2px rgba(0, 0, 0, 0.14),
15114     0px 5px 26px 4px rgba(0, 0, 0, 0.12);
15115   --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
15116     0px 15px 22px 2px rgba(0, 0, 0, 0.14),
15117     0px 6px 28px 5px rgba(0, 0, 0, 0.12);
15118   --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
15119     0px 16px 24px 2px rgba(0, 0, 0, 0.14),
15120     0px 6px 30px 5px rgba(0, 0, 0, 0.12);
15121   --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
15122     0px 17px 26px 2px rgba(0, 0, 0, 0.14),
15123     0px 6px 32px 5px rgba(0, 0, 0, 0.12);
15124   --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
15125     0px 18px 28px 2px rgba(0, 0, 0, 0.14),
15126     0px 7px 34px 6px rgba(0, 0, 0, 0.12);
15127   --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
15128     0px 19px 29px 2px rgba(0, 0, 0, 0.14),
15129     0px 7px 36px 6px rgba(0, 0, 0, 0.12);
15130   --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
15131     0px 20px 31px 3px rgba(0, 0, 0, 0.14),
15132     0px 8px 38px 7px rgba(0, 0, 0, 0.12);
15133   --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
15134     0px 21px 33px 3px rgba(0, 0, 0, 0.14),
15135     0px 8px 40px 7px rgba(0, 0, 0, 0.12);
15136   --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
15137     0px 22px 35px 3px rgba(0, 0, 0, 0.14),
15138     0px 8px 42px 7px rgba(0, 0, 0, 0.12);
15139   --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
15140     0px 23px 36px 3px rgba(0, 0, 0, 0.14),
15141     0px 9px 44px 8px rgba(0, 0, 0, 0.12);
15142   --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
15143     0px 24px 38px 3px rgba(0, 0, 0, 0.14),
15144     0px 9px 46px 8px rgba(0, 0, 0, 0.12);
15145 }
15146 .elevation-0 {
15147   box-shadow: var(--f7-elevation-0) !important;
15148 }
15149 .elevation-1 {
15150   box-shadow: var(--f7-elevation-1) !important;
15151 }
15152 .elevation-2 {
15153   box-shadow: var(--f7-elevation-2) !important;
15154 }
15155 .elevation-3 {
15156   box-shadow: var(--f7-elevation-3) !important;
15157 }
15158 .elevation-4 {
15159   box-shadow: var(--f7-elevation-4) !important;
15160 }
15161 .elevation-5 {
15162   box-shadow: var(--f7-elevation-5) !important;
15163 }
15164 .elevation-6 {
15165   box-shadow: var(--f7-elevation-6) !important;
15166 }
15167 .elevation-7 {
15168   box-shadow: var(--f7-elevation-7) !important;
15169 }
15170 .elevation-8 {
15171   box-shadow: var(--f7-elevation-8) !important;
15172 }
15173 .elevation-9 {
15174   box-shadow: var(--f7-elevation-9) !important;
15175 }
15176 .elevation-10 {
15177   box-shadow: var(--f7-elevation-10) !important;
15178 }
15179 .elevation-11 {
15180   box-shadow: var(--f7-elevation-11) !important;
15181 }
15182 .elevation-12 {
15183   box-shadow: var(--f7-elevation-12) !important;
15184 }
15185 .elevation-13 {
15186   box-shadow: var(--f7-elevation-13) !important;
15187 }
15188 .elevation-14 {
15189   box-shadow: var(--f7-elevation-14) !important;
15190 }
15191 .elevation-15 {
15192   box-shadow: var(--f7-elevation-15) !important;
15193 }
15194 .elevation-16 {
15195   box-shadow: var(--f7-elevation-16) !important;
15196 }
15197 .elevation-17 {
15198   box-shadow: var(--f7-elevation-17) !important;
15199 }
15200 .elevation-18 {
15201   box-shadow: var(--f7-elevation-18) !important;
15202 }
15203 .elevation-19 {
15204   box-shadow: var(--f7-elevation-19) !important;
15205 }
15206 .elevation-20 {
15207   box-shadow: var(--f7-elevation-20) !important;
15208 }
15209 .elevation-21 {
15210   box-shadow: var(--f7-elevation-21) !important;
15211 }
15212 .elevation-22 {
15213   box-shadow: var(--f7-elevation-22) !important;
15214 }
15215 .elevation-23 {
15216   box-shadow: var(--f7-elevation-23) !important;
15217 }
15218 .elevation-24 {
15219   box-shadow: var(--f7-elevation-24) !important;
15220 }
15221 .device-desktop .elevation-hover-0:hover {
15222   box-shadow: var(--f7-elevation-0) !important;
15223 }
15224 .device-desktop .elevation-hover-1:hover {
15225   box-shadow: var(--f7-elevation-1) !important;
15226 }
15227 .device-desktop .elevation-hover-2:hover {
15228   box-shadow: var(--f7-elevation-2) !important;
15229 }
15230 .device-desktop .elevation-hover-3:hover {
15231   box-shadow: var(--f7-elevation-3) !important;
15232 }
15233 .device-desktop .elevation-hover-4:hover {
15234   box-shadow: var(--f7-elevation-4) !important;
15235 }
15236 .device-desktop .elevation-hover-5:hover {
15237   box-shadow: var(--f7-elevation-5) !important;
15238 }
15239 .device-desktop .elevation-hover-6:hover {
15240   box-shadow: var(--f7-elevation-6) !important;
15241 }
15242 .device-desktop .elevation-hover-7:hover {
15243   box-shadow: var(--f7-elevation-7) !important;
15244 }
15245 .device-desktop .elevation-hover-8:hover {
15246   box-shadow: var(--f7-elevation-8) !important;
15247 }
15248 .device-desktop .elevation-hover-9:hover {
15249   box-shadow: var(--f7-elevation-9) !important;
15250 }
15251 .device-desktop .elevation-hover-10:hover {
15252   box-shadow: var(--f7-elevation-10) !important;
15253 }
15254 .device-desktop .elevation-hover-11:hover {
15255   box-shadow: var(--f7-elevation-11) !important;
15256 }
15257 .device-desktop .elevation-hover-12:hover {
15258   box-shadow: var(--f7-elevation-12) !important;
15259 }
15260 .device-desktop .elevation-hover-13:hover {
15261   box-shadow: var(--f7-elevation-13) !important;
15262 }
15263 .device-desktop .elevation-hover-14:hover {
15264   box-shadow: var(--f7-elevation-14) !important;
15265 }
15266 .device-desktop .elevation-hover-15:hover {
15267   box-shadow: var(--f7-elevation-15) !important;
15268 }
15269 .device-desktop .elevation-hover-16:hover {
15270   box-shadow: var(--f7-elevation-16) !important;
15271 }
15272 .device-desktop .elevation-hover-17:hover {
15273   box-shadow: var(--f7-elevation-17) !important;
15274 }
15275 .device-desktop .elevation-hover-18:hover {
15276   box-shadow: var(--f7-elevation-18) !important;
15277 }
15278 .device-desktop .elevation-hover-19:hover {
15279   box-shadow: var(--f7-elevation-19) !important;
15280 }
15281 .device-desktop .elevation-hover-20:hover {
15282   box-shadow: var(--f7-elevation-20) !important;
15283 }
15284 .device-desktop .elevation-hover-21:hover {
15285   box-shadow: var(--f7-elevation-21) !important;
15286 }
15287 .device-desktop .elevation-hover-22:hover {
15288   box-shadow: var(--f7-elevation-22) !important;
15289 }
15290 .device-desktop .elevation-hover-23:hover {
15291   box-shadow: var(--f7-elevation-23) !important;
15292 }
15293 .device-desktop .elevation-hover-24:hover {
15294   box-shadow: var(--f7-elevation-24) !important;
15295 }
15296 .active-state.elevation-pressed-0,
15297 .device-desktop .active-state.elevation-pressed-0 {
15298   box-shadow: var(--f7-elevation-0) !important;
15299 }
15300 .active-state.elevation-pressed-1,
15301 .device-desktop .active-state.elevation-pressed-1 {
15302   box-shadow: var(--f7-elevation-1) !important;
15303 }
15304 .active-state.elevation-pressed-2,
15305 .device-desktop .active-state.elevation-pressed-2 {
15306   box-shadow: var(--f7-elevation-2) !important;
15307 }
15308 .active-state.elevation-pressed-3,
15309 .device-desktop .active-state.elevation-pressed-3 {
15310   box-shadow: var(--f7-elevation-3) !important;
15311 }
15312 .active-state.elevation-pressed-4,
15313 .device-desktop .active-state.elevation-pressed-4 {
15314   box-shadow: var(--f7-elevation-4) !important;
15315 }
15316 .active-state.elevation-pressed-5,
15317 .device-desktop .active-state.elevation-pressed-5 {
15318   box-shadow: var(--f7-elevation-5) !important;
15319 }
15320 .active-state.elevation-pressed-6,
15321 .device-desktop .active-state.elevation-pressed-6 {
15322   box-shadow: var(--f7-elevation-6) !important;
15323 }
15324 .active-state.elevation-pressed-7,
15325 .device-desktop .active-state.elevation-pressed-7 {
15326   box-shadow: var(--f7-elevation-7) !important;
15327 }
15328 .active-state.elevation-pressed-8,
15329 .device-desktop .active-state.elevation-pressed-8 {
15330   box-shadow: var(--f7-elevation-8) !important;
15331 }
15332 .active-state.elevation-pressed-9,
15333 .device-desktop .active-state.elevation-pressed-9 {
15334   box-shadow: var(--f7-elevation-9) !important;
15335 }
15336 .active-state.elevation-pressed-10,
15337 .device-desktop .active-state.elevation-pressed-10 {
15338   box-shadow: var(--f7-elevation-10) !important;
15339 }
15340 .active-state.elevation-pressed-11,
15341 .device-desktop .active-state.elevation-pressed-11 {
15342   box-shadow: var(--f7-elevation-11) !important;
15343 }
15344 .active-state.elevation-pressed-12,
15345 .device-desktop .active-state.elevation-pressed-12 {
15346   box-shadow: var(--f7-elevation-12) !important;
15347 }
15348 .active-state.elevation-pressed-13,
15349 .device-desktop .active-state.elevation-pressed-13 {
15350   box-shadow: var(--f7-elevation-13) !important;
15351 }
15352 .active-state.elevation-pressed-14,
15353 .device-desktop .active-state.elevation-pressed-14 {
15354   box-shadow: var(--f7-elevation-14) !important;
15355 }
15356 .active-state.elevation-pressed-15,
15357 .device-desktop .active-state.elevation-pressed-15 {
15358   box-shadow: var(--f7-elevation-15) !important;
15359 }
15360 .active-state.elevation-pressed-16,
15361 .device-desktop .active-state.elevation-pressed-16 {
15362   box-shadow: var(--f7-elevation-16) !important;
15363 }
15364 .active-state.elevation-pressed-17,
15365 .device-desktop .active-state.elevation-pressed-17 {
15366   box-shadow: var(--f7-elevation-17) !important;
15367 }
15368 .active-state.elevation-pressed-18,
15369 .device-desktop .active-state.elevation-pressed-18 {
15370   box-shadow: var(--f7-elevation-18) !important;
15371 }
15372 .active-state.elevation-pressed-19,
15373 .device-desktop .active-state.elevation-pressed-19 {
15374   box-shadow: var(--f7-elevation-19) !important;
15375 }
15376 .active-state.elevation-pressed-20,
15377 .device-desktop .active-state.elevation-pressed-20 {
15378   box-shadow: var(--f7-elevation-20) !important;
15379 }
15380 .active-state.elevation-pressed-21,
15381 .device-desktop .active-state.elevation-pressed-21 {
15382   box-shadow: var(--f7-elevation-21) !important;
15383 }
15384 .active-state.elevation-pressed-22,
15385 .device-desktop .active-state.elevation-pressed-22 {
15386   box-shadow: var(--f7-elevation-22) !important;
15387 }
15388 .active-state.elevation-pressed-23,
15389 .device-desktop .active-state.elevation-pressed-23 {
15390   box-shadow: var(--f7-elevation-23) !important;
15391 }
15392 .active-state.elevation-pressed-24,
15393 .device-desktop .active-state.elevation-pressed-24 {
15394   box-shadow: var(--f7-elevation-24) !important;
15395 }
15396 .elevation-transition-100 {
15397   transition-duration: 100ms;
15398   transition-property: box-shadow;
15399 }
15400 .elevation-transition,
15401 .elevation-transition-200 {
15402   transition-duration: 200ms;
15403   transition-property: box-shadow;
15404 }
15405 .elevation-transition-300 {
15406   transition-duration: 300ms;
15407   transition-property: box-shadow;
15408 }
15409 .elevation-transition-400 {
15410   transition-duration: 400ms;
15411   transition-property: box-shadow;
15412 }
15413 .elevation-transition-500 {
15414   transition-duration: 500ms;
15415   transition-property: box-shadow;
15416 }
15417 /* === Typography === */
15418 .ios {
15419   --f7-typography-padding: 15px;
15420   --f7-typography-margin: 15px;
15421 }
15422 .md {
15423   --f7-typography-padding: 16px;
15424   --f7-typography-margin: 16px;
15425 }
15426 .display-flex {
15427   display: flex !important;
15428 }
15429 .display-block {
15430   display: block !important;
15431 }
15432 .display-inline-flex {
15433   display: inline-flex !important;
15434 }
15435 .display-inline-block {
15436   display: inline-block !important;
15437 }
15438 .display-inline {
15439   display: inline !important;
15440 }
15441 .display-none {
15442   display: none !important;
15443 }
15444 .flex-shrink-0 {
15445   flex-shrink: 0 !important;
15446 }
15447 .flex-shrink-1 {
15448   flex-shrink: 1 !important;
15449 }
15450 .flex-shrink-2 {
15451   flex-shrink: 2 !important;
15452 }
15453 .flex-shrink-3 {
15454   flex-shrink: 3 !important;
15455 }
15456 .flex-shrink-4 {
15457   flex-shrink: 4 !important;
15458 }
15459 .flex-shrink-5 {
15460   flex-shrink: 5 !important;
15461 }
15462 .flex-shrink-6 {
15463   flex-shrink: 6 !important;
15464 }
15465 .flex-shrink-7 {
15466   flex-shrink: 7 !important;
15467 }
15468 .flex-shrink-8 {
15469   flex-shrink: 8 !important;
15470 }
15471 .flex-shrink-9 {
15472   flex-shrink: 9 !important;
15473 }
15474 .flex-shrink-10 {
15475   flex-shrink: 10 !important;
15476 }
15477 .justify-content-flex-start {
15478   justify-content: flex-start !important;
15479 }
15480 .justify-content-center {
15481   justify-content: center !important;
15482 }
15483 .justify-content-flex-end {
15484   justify-content: flex-end !important;
15485 }
15486 .justify-content-space-between {
15487   justify-content: space-between !important;
15488 }
15489 .justify-content-space-around {
15490   justify-content: space-around !important;
15491 }
15492 .justify-content-space-evenly {
15493   justify-content: space-evenly !important;
15494 }
15495 .justify-content-stretch {
15496   justify-content: stretch !important;
15497 }
15498 .justify-content-start {
15499   justify-content: start !important;
15500 }
15501 .justify-content-end {
15502   justify-content: end !important;
15503 }
15504 .justify-content-left {
15505   justify-content: left !important;
15506 }
15507 .justify-content-right {
15508   justify-content: right !important;
15509 }
15510 .align-content-flex-start {
15511   align-content: flex-start !important;
15512 }
15513 .align-content-flex-end {
15514   align-content: flex-end !important;
15515 }
15516 .align-content-center {
15517   align-content: center !important;
15518 }
15519 .align-content-space-between {
15520   align-content: space-between !important;
15521 }
15522 .align-content-space-around {
15523   align-content: space-around !important;
15524 }
15525 .align-content-stretch {
15526   align-content: stretch !important;
15527 }
15528 .align-items-flex-start {
15529   align-items: flex-start !important;
15530 }
15531 .align-items-flex-end {
15532   align-items: flex-end !important;
15533 }
15534 .align-items-center {
15535   align-items: center !important;
15536 }
15537 .align-items-stretch {
15538   align-items: stretch !important;
15539 }
15540 .align-self-flex-start {
15541   align-self: flex-start !important;
15542 }
15543 .align-self-flex-end {
15544   align-self: flex-end !important;
15545 }
15546 .align-self-center {
15547   align-self: center !important;
15548 }
15549 .align-self-stretch {
15550   align-self: stretch !important;
15551 }
15552 .text-align-left {
15553   text-align: left !important;
15554 }
15555 .text-align-center {
15556   text-align: center !important;
15557 }
15558 .text-align-right {
15559   text-align: right !important;
15560 }
15561 .text-align-justify {
15562   text-align: justify !important;
15563 }
15564 .float-left {
15565   float: left !important;
15566 }
15567 .float-right {
15568   float: right !important;
15569 }
15570 .float-none {
15571   float: none !important;
15572 }
15573 .vertical-align-bottom {
15574   vertical-align: bottom !important;
15575 }
15576 .vertical-align-middle {
15577   vertical-align: middle !important;
15578 }
15579 .vertical-align-top {
15580   vertical-align: top !important;
15581 }
15582 .no-padding {
15583   padding: 0 !important;
15584 }
15585 .no-padding-left {
15586   padding-left: 0 !important;
15587 }
15588 .no-padding-right {
15589   padding-right: 0 !important;
15590 }
15591 .no-padding-horizontal {
15592   padding-left: 0 !important;
15593   padding-right: 0 !important;
15594 }
15595 .no-padding-top {
15596   padding-top: 0 !important;
15597 }
15598 .no-padding-bottom {
15599   padding-bottom: 0 !important;
15600 }
15601 .no-padding-vertical {
15602   padding-top: 0 !important;
15603   padding-bottom: 0 !important;
15604 }
15605 .no-margin {
15606   margin: 0 !important;
15607 }
15608 .no-margin-left {
15609   margin-left: 0 !important;
15610 }
15611 .no-margin-right {
15612   margin-right: 0 !important;
15613 }
15614 .no-margin-horizontal {
15615   margin-left: 0 !important;
15616   margin-right: 0 !important;
15617 }
15618 .no-margin-top {
15619   margin-top: 0 !important;
15620 }
15621 .no-margin-bottom {
15622   margin-bottom: 0 !important;
15623 }
15624 .no-margin-vertical {
15625   margin-top: 0 !important;
15626   margin-bottom: 0 !important;
15627 }
15628 .width-auto {
15629   width: auto !important;
15630 }
15631 .width-100 {
15632   width: 100% !important;
15633 }
15634 .padding {
15635   padding: var(--f7-typography-padding) !important;
15636 }
15637 .padding-top {
15638   padding-top: var(--f7-typography-padding) !important;
15639 }
15640 .padding-bottom {
15641   padding-bottom: var(--f7-typography-padding) !important;
15642 }
15643 .padding-left {
15644   padding-left: var(--f7-typography-padding) !important;
15645 }
15646 .padding-right {
15647   padding-right: var(--f7-typography-padding) !important;
15648 }
15649 .padding-vertical {
15650   padding-top: var(--f7-typography-padding) !important;
15651   padding-bottom: var(--f7-typography-padding) !important;
15652 }
15653 .padding-horizontal {
15654   padding-left: var(--f7-typography-padding) !important;
15655   padding-right: var(--f7-typography-padding) !important;
15656 }
15657 .margin {
15658   margin: var(--f7-typography-margin) !important;
15659 }
15660 .margin-top {
15661   margin-top: var(--f7-typography-margin) !important;
15662 }
15663 .margin-bottom {
15664   margin-bottom: var(--f7-typography-margin) !important;
15665 }
15666 .margin-left {
15667   margin-left: var(--f7-typography-margin) !important;
15668 }
15669 .margin-right {
15670   margin-right: var(--f7-typography-margin) !important;
15671 }
15672 .margin-vertical {
15673   margin-top: var(--f7-typography-margin) !important;
15674   margin-bottom: var(--f7-typography-margin) !important;
15675 }
15676 .margin-horizontal {
15677   margin-left: var(--f7-typography-margin) !important;
15678   margin-right: var(--f7-typography-margin) !important;
15679 }
15680 [class*="text-color-"] {
15681   color: var(--f7-theme-color-text-color) !important;
15682 }
15683 [class*="bg-color-"] {
15684   background-color: var(--f7-theme-color-bg-color) !important;
15685 }
15686 [class*="border-color-"] {
15687   border-color: var(--f7-theme-color-border-color) !important;
15688 }