framework7/css/framework7.bundle.rtl.css

   1 /**
   2  * Framework7 4.4.7
   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: July 19, 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 :root {
  83   --f7-font-size: 14px;
  84 }
  85 .ios {
  86   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  87   --f7-text-color: #000;
  88   --f7-line-height: 1.4;
  89 }
  90 .ios .theme-dark,
  91 .ios.theme-dark {
  92   --f7-text-color: #fff;
  93 }
  94 .md {
  95   --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  96   --f7-text-color: #212121;
  97   --f7-line-height: 1.5;
  98 }
  99 .md .theme-dark,
 100 .md.theme-dark {
 101   --f7-text-color: rgba(255, 255, 255, 0.87);
 102 }
 103 .aurora {
 104   --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
 105   --f7-text-color: #000;
 106   --f7-line-height: 1.5;
 107 }
 108 .aurora .theme-dark,
 109 .aurora.theme-dark {
 110   --f7-text-color: #fff;
 111 }
 112 /*====================
 113   Bars
 114   ==================== */
 115 :root {
 116   /*
 117   --f7-bars-link-color: var(--f7-theme-color);
 118   */
 119   --f7-bars-bg-image: none;
 120   --f7-bars-bg-color: #f7f7f8;
 121   --f7-bars-bg-color-rgb: 247, 247, 248;
 122   --f7-bars-text-color: #000;
 123   --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%);
 124   --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%);
 125 }
 126 .theme-dark {
 127   --f7-bars-bg-color: #1b1b1b;
 128   --f7-bars-text-color: #fff;
 129 }
 130 .ios {
 131   --f7-bars-border-color: #c4c4c4;
 132 }
 133 .ios .theme-dark,
 134 .ios.theme-dark {
 135   --f7-bars-border-color: #282829;
 136 }
 137 .md {
 138   --f7-bars-border-color: transparent;
 139 }
 140 .aurora {
 141   --f7-bars-border-color: rgba(0, 0, 0, 0.2);
 142 }
 143 .aurora .theme-dark,
 144 .aurora.theme-dark {
 145   --f7-bars-border-color: #282829;
 146 }
 147 /*====================
 148   Color Themes
 149   ==================== */
 150 .text-color-primary {
 151   --f7-theme-color-text-color: var(--f7-theme-color);
 152 }
 153 .bg-color-primary {
 154   --f7-theme-color-bg-color: var(--f7-theme-color);
 155 }
 156 .border-color-primary {
 157   --f7-theme-color-border-color: var(--f7-theme-color);
 158 }
 159 .ripple-color-primary {
 160   --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
 161 }
 162 :root {
 163   --f7-color-red: #ff3b30;
 164   --f7-color-red-rgb: 255, 59, 48;
 165   --f7-color-red-shade: #ff1407;
 166   --f7-color-red-tint: #ff6259;
 167   --f7-color-green: #4cd964;
 168   --f7-color-green-rgb: 76, 217, 100;
 169   --f7-color-green-shade: #2cd048;
 170   --f7-color-green-tint: #6ee081;
 171   --f7-color-blue: #2196f3;
 172   --f7-color-blue-rgb: 33, 150, 243;
 173   --f7-color-blue-shade: #0c82df;
 174   --f7-color-blue-tint: #48a8f5;
 175   --f7-color-pink: #ff2d55;
 176   --f7-color-pink-rgb: 255, 45, 85;
 177   --f7-color-pink-shade: #ff0434;
 178   --f7-color-pink-tint: #ff5676;
 179   --f7-color-yellow: #ffcc00;
 180   --f7-color-yellow-rgb: 255, 204, 0;
 181   --f7-color-yellow-shade: #d6ab00;
 182   --f7-color-yellow-tint: #ffd429;
 183   --f7-color-orange: #ff9500;
 184   --f7-color-orange-rgb: 255, 149, 0;
 185   --f7-color-orange-shade: #d67d00;
 186   --f7-color-orange-tint: #ffa629;
 187   --f7-color-purple: #9c27b0;
 188   --f7-color-purple-rgb: 156, 39, 176;
 189   --f7-color-purple-shade: #7e208f;
 190   --f7-color-purple-tint: #b92fd1;
 191   --f7-color-deeppurple: #673ab7;
 192   --f7-color-deeppurple-rgb: 103, 58, 183;
 193   --f7-color-deeppurple-shade: #563098;
 194   --f7-color-deeppurple-tint: #7c52c8;
 195   --f7-color-lightblue: #5ac8fa;
 196   --f7-color-lightblue-rgb: 90, 200, 250;
 197   --f7-color-lightblue-shade: #32bbf9;
 198   --f7-color-lightblue-tint: #82d5fb;
 199   --f7-color-teal: #009688;
 200   --f7-color-teal-rgb: 0, 150, 136;
 201   --f7-color-teal-shade: #006d63;
 202   --f7-color-teal-tint: #00bfad;
 203   --f7-color-lime: #cddc39;
 204   --f7-color-lime-rgb: 205, 220, 57;
 205   --f7-color-lime-shade: #bac923;
 206   --f7-color-lime-tint: #d6e25c;
 207   --f7-color-deeporange: #ff6b22;
 208   --f7-color-deeporange-rgb: 255, 107, 34;
 209   --f7-color-deeporange-shade: #f85200;
 210   --f7-color-deeporange-tint: #ff864b;
 211   --f7-color-gray: #8e8e93;
 212   --f7-color-gray-rgb: 142, 142, 147;
 213   --f7-color-gray-shade: #79797f;
 214   --f7-color-gray-tint: #a3a3a7;
 215   --f7-color-white: #ffffff;
 216   --f7-color-white-rgb: 255, 255, 255;
 217   --f7-color-white-shade: #ebebeb;
 218   --f7-color-white-tint: #ffffff;
 219   --f7-color-black: #000000;
 220   --f7-color-black-rgb: 0, 0, 0;
 221   --f7-color-black-shade: #000000;
 222   --f7-color-black-tint: #141414;
 223 }
 224 .color-theme-red {
 225   --f7-theme-color: #ff3b30;
 226   --f7-theme-color-rgb: 255, 59, 48;
 227   --f7-theme-color-shade: #ff1407;
 228   --f7-theme-color-tint: #ff6259;
 229 }
 230 .color-theme-green {
 231   --f7-theme-color: #4cd964;
 232   --f7-theme-color-rgb: 76, 217, 100;
 233   --f7-theme-color-shade: #2cd048;
 234   --f7-theme-color-tint: #6ee081;
 235 }
 236 .color-theme-blue {
 237   --f7-theme-color: #2196f3;
 238   --f7-theme-color-rgb: 33, 150, 243;
 239   --f7-theme-color-shade: #0c82df;
 240   --f7-theme-color-tint: #48a8f5;
 241 }
 242 .color-theme-pink {
 243   --f7-theme-color: #ff2d55;
 244   --f7-theme-color-rgb: 255, 45, 85;
 245   --f7-theme-color-shade: #ff0434;
 246   --f7-theme-color-tint: #ff5676;
 247 }
 248 .color-theme-yellow {
 249   --f7-theme-color: #ffcc00;
 250   --f7-theme-color-rgb: 255, 204, 0;
 251   --f7-theme-color-shade: #d6ab00;
 252   --f7-theme-color-tint: #ffd429;
 253 }
 254 .color-theme-orange {
 255   --f7-theme-color: #ff9500;
 256   --f7-theme-color-rgb: 255, 149, 0;
 257   --f7-theme-color-shade: #d67d00;
 258   --f7-theme-color-tint: #ffa629;
 259 }
 260 .color-theme-purple {
 261   --f7-theme-color: #9c27b0;
 262   --f7-theme-color-rgb: 156, 39, 176;
 263   --f7-theme-color-shade: #7e208f;
 264   --f7-theme-color-tint: #b92fd1;
 265 }
 266 .color-theme-deeppurple {
 267   --f7-theme-color: #673ab7;
 268   --f7-theme-color-rgb: 103, 58, 183;
 269   --f7-theme-color-shade: #563098;
 270   --f7-theme-color-tint: #7c52c8;
 271 }
 272 .color-theme-lightblue {
 273   --f7-theme-color: #5ac8fa;
 274   --f7-theme-color-rgb: 90, 200, 250;
 275   --f7-theme-color-shade: #32bbf9;
 276   --f7-theme-color-tint: #82d5fb;
 277 }
 278 .color-theme-teal {
 279   --f7-theme-color: #009688;
 280   --f7-theme-color-rgb: 0, 150, 136;
 281   --f7-theme-color-shade: #006d63;
 282   --f7-theme-color-tint: #00bfad;
 283 }
 284 .color-theme-lime {
 285   --f7-theme-color: #cddc39;
 286   --f7-theme-color-rgb: 205, 220, 57;
 287   --f7-theme-color-shade: #bac923;
 288   --f7-theme-color-tint: #d6e25c;
 289 }
 290 .color-theme-deeporange {
 291   --f7-theme-color: #ff6b22;
 292   --f7-theme-color-rgb: 255, 107, 34;
 293   --f7-theme-color-shade: #f85200;
 294   --f7-theme-color-tint: #ff864b;
 295 }
 296 .color-theme-gray {
 297   --f7-theme-color: #8e8e93;
 298   --f7-theme-color-rgb: 142, 142, 147;
 299   --f7-theme-color-shade: #79797f;
 300   --f7-theme-color-tint: #a3a3a7;
 301 }
 302 .color-theme-white {
 303   --f7-theme-color: #ffffff;
 304   --f7-theme-color-rgb: 255, 255, 255;
 305   --f7-theme-color-shade: #ebebeb;
 306   --f7-theme-color-tint: #ffffff;
 307 }
 308 .color-theme-black {
 309   --f7-theme-color: #000000;
 310   --f7-theme-color-rgb: 0, 0, 0;
 311   --f7-theme-color-shade: #000000;
 312   --f7-theme-color-tint: #141414;
 313 }
 314 .color-red {
 315   --f7-theme-color: #ff3b30;
 316   --f7-theme-color-rgb: 255, 59, 48;
 317   --f7-theme-color-shade: #ff1407;
 318   --f7-theme-color-tint: #ff6259;
 319 }
 320 .text-color-red {
 321   --f7-theme-color-text-color: #ff3b30;
 322 }
 323 .bg-color-red {
 324   --f7-theme-color-bg-color: #ff3b30;
 325 }
 326 .border-color-red {
 327   --f7-theme-color-border-color: #ff3b30;
 328 }
 329 .ripple-color-red,
 330 .ripple-red {
 331   --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
 332 }
 333 .color-green {
 334   --f7-theme-color: #4cd964;
 335   --f7-theme-color-rgb: 76, 217, 100;
 336   --f7-theme-color-shade: #2cd048;
 337   --f7-theme-color-tint: #6ee081;
 338 }
 339 .text-color-green {
 340   --f7-theme-color-text-color: #4cd964;
 341 }
 342 .bg-color-green {
 343   --f7-theme-color-bg-color: #4cd964;
 344 }
 345 .border-color-green {
 346   --f7-theme-color-border-color: #4cd964;
 347 }
 348 .ripple-color-green,
 349 .ripple-green {
 350   --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
 351 }
 352 .color-blue {
 353   --f7-theme-color: #2196f3;
 354   --f7-theme-color-rgb: 33, 150, 243;
 355   --f7-theme-color-shade: #0c82df;
 356   --f7-theme-color-tint: #48a8f5;
 357 }
 358 .text-color-blue {
 359   --f7-theme-color-text-color: #2196f3;
 360 }
 361 .bg-color-blue {
 362   --f7-theme-color-bg-color: #2196f3;
 363 }
 364 .border-color-blue {
 365   --f7-theme-color-border-color: #2196f3;
 366 }
 367 .ripple-color-blue,
 368 .ripple-blue {
 369   --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
 370 }
 371 .color-pink {
 372   --f7-theme-color: #ff2d55;
 373   --f7-theme-color-rgb: 255, 45, 85;
 374   --f7-theme-color-shade: #ff0434;
 375   --f7-theme-color-tint: #ff5676;
 376 }
 377 .text-color-pink {
 378   --f7-theme-color-text-color: #ff2d55;
 379 }
 380 .bg-color-pink {
 381   --f7-theme-color-bg-color: #ff2d55;
 382 }
 383 .border-color-pink {
 384   --f7-theme-color-border-color: #ff2d55;
 385 }
 386 .ripple-color-pink,
 387 .ripple-pink {
 388   --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
 389 }
 390 .color-yellow {
 391   --f7-theme-color: #ffcc00;
 392   --f7-theme-color-rgb: 255, 204, 0;
 393   --f7-theme-color-shade: #d6ab00;
 394   --f7-theme-color-tint: #ffd429;
 395 }
 396 .text-color-yellow {
 397   --f7-theme-color-text-color: #ffcc00;
 398 }
 399 .bg-color-yellow {
 400   --f7-theme-color-bg-color: #ffcc00;
 401 }
 402 .border-color-yellow {
 403   --f7-theme-color-border-color: #ffcc00;
 404 }
 405 .ripple-color-yellow,
 406 .ripple-yellow {
 407   --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
 408 }
 409 .color-orange {
 410   --f7-theme-color: #ff9500;
 411   --f7-theme-color-rgb: 255, 149, 0;
 412   --f7-theme-color-shade: #d67d00;
 413   --f7-theme-color-tint: #ffa629;
 414 }
 415 .text-color-orange {
 416   --f7-theme-color-text-color: #ff9500;
 417 }
 418 .bg-color-orange {
 419   --f7-theme-color-bg-color: #ff9500;
 420 }
 421 .border-color-orange {
 422   --f7-theme-color-border-color: #ff9500;
 423 }
 424 .ripple-color-orange,
 425 .ripple-orange {
 426   --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
 427 }
 428 .color-purple {
 429   --f7-theme-color: #9c27b0;
 430   --f7-theme-color-rgb: 156, 39, 176;
 431   --f7-theme-color-shade: #7e208f;
 432   --f7-theme-color-tint: #b92fd1;
 433 }
 434 .text-color-purple {
 435   --f7-theme-color-text-color: #9c27b0;
 436 }
 437 .bg-color-purple {
 438   --f7-theme-color-bg-color: #9c27b0;
 439 }
 440 .border-color-purple {
 441   --f7-theme-color-border-color: #9c27b0;
 442 }
 443 .ripple-color-purple,
 444 .ripple-purple {
 445   --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
 446 }
 447 .color-deeppurple {
 448   --f7-theme-color: #673ab7;
 449   --f7-theme-color-rgb: 103, 58, 183;
 450   --f7-theme-color-shade: #563098;
 451   --f7-theme-color-tint: #7c52c8;
 452 }
 453 .text-color-deeppurple {
 454   --f7-theme-color-text-color: #673ab7;
 455 }
 456 .bg-color-deeppurple {
 457   --f7-theme-color-bg-color: #673ab7;
 458 }
 459 .border-color-deeppurple {
 460   --f7-theme-color-border-color: #673ab7;
 461 }
 462 .ripple-color-deeppurple,
 463 .ripple-deeppurple {
 464   --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
 465 }
 466 .color-lightblue {
 467   --f7-theme-color: #5ac8fa;
 468   --f7-theme-color-rgb: 90, 200, 250;
 469   --f7-theme-color-shade: #32bbf9;
 470   --f7-theme-color-tint: #82d5fb;
 471 }
 472 .text-color-lightblue {
 473   --f7-theme-color-text-color: #5ac8fa;
 474 }
 475 .bg-color-lightblue {
 476   --f7-theme-color-bg-color: #5ac8fa;
 477 }
 478 .border-color-lightblue {
 479   --f7-theme-color-border-color: #5ac8fa;
 480 }
 481 .ripple-color-lightblue,
 482 .ripple-lightblue {
 483   --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
 484 }
 485 .color-teal {
 486   --f7-theme-color: #009688;
 487   --f7-theme-color-rgb: 0, 150, 136;
 488   --f7-theme-color-shade: #006d63;
 489   --f7-theme-color-tint: #00bfad;
 490 }
 491 .text-color-teal {
 492   --f7-theme-color-text-color: #009688;
 493 }
 494 .bg-color-teal {
 495   --f7-theme-color-bg-color: #009688;
 496 }
 497 .border-color-teal {
 498   --f7-theme-color-border-color: #009688;
 499 }
 500 .ripple-color-teal,
 501 .ripple-teal {
 502   --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
 503 }
 504 .color-lime {
 505   --f7-theme-color: #cddc39;
 506   --f7-theme-color-rgb: 205, 220, 57;
 507   --f7-theme-color-shade: #bac923;
 508   --f7-theme-color-tint: #d6e25c;
 509 }
 510 .text-color-lime {
 511   --f7-theme-color-text-color: #cddc39;
 512 }
 513 .bg-color-lime {
 514   --f7-theme-color-bg-color: #cddc39;
 515 }
 516 .border-color-lime {
 517   --f7-theme-color-border-color: #cddc39;
 518 }
 519 .ripple-color-lime,
 520 .ripple-lime {
 521   --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
 522 }
 523 .color-deeporange {
 524   --f7-theme-color: #ff6b22;
 525   --f7-theme-color-rgb: 255, 107, 34;
 526   --f7-theme-color-shade: #f85200;
 527   --f7-theme-color-tint: #ff864b;
 528 }
 529 .text-color-deeporange {
 530   --f7-theme-color-text-color: #ff6b22;
 531 }
 532 .bg-color-deeporange {
 533   --f7-theme-color-bg-color: #ff6b22;
 534 }
 535 .border-color-deeporange {
 536   --f7-theme-color-border-color: #ff6b22;
 537 }
 538 .ripple-color-deeporange,
 539 .ripple-deeporange {
 540   --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
 541 }
 542 .color-gray {
 543   --f7-theme-color: #8e8e93;
 544   --f7-theme-color-rgb: 142, 142, 147;
 545   --f7-theme-color-shade: #79797f;
 546   --f7-theme-color-tint: #a3a3a7;
 547 }
 548 .text-color-gray {
 549   --f7-theme-color-text-color: #8e8e93;
 550 }
 551 .bg-color-gray {
 552   --f7-theme-color-bg-color: #8e8e93;
 553 }
 554 .border-color-gray {
 555   --f7-theme-color-border-color: #8e8e93;
 556 }
 557 .ripple-color-gray,
 558 .ripple-gray {
 559   --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
 560 }
 561 .color-white {
 562   --f7-theme-color: #ffffff;
 563   --f7-theme-color-rgb: 255, 255, 255;
 564   --f7-theme-color-shade: #ebebeb;
 565   --f7-theme-color-tint: #ffffff;
 566 }
 567 .text-color-white {
 568   --f7-theme-color-text-color: #ffffff;
 569 }
 570 .bg-color-white {
 571   --f7-theme-color-bg-color: #ffffff;
 572 }
 573 .border-color-white {
 574   --f7-theme-color-border-color: #ffffff;
 575 }
 576 .ripple-color-white,
 577 .ripple-white {
 578   --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
 579 }
 580 .color-black {
 581   --f7-theme-color: #000000;
 582   --f7-theme-color-rgb: 0, 0, 0;
 583   --f7-theme-color-shade: #000000;
 584   --f7-theme-color-tint: #141414;
 585 }
 586 .text-color-black {
 587   --f7-theme-color-text-color: #000000;
 588 }
 589 .bg-color-black {
 590   --f7-theme-color-bg-color: #000000;
 591 }
 592 .border-color-black {
 593   --f7-theme-color-border-color: #000000;
 594 }
 595 .ripple-color-black,
 596 .ripple-black {
 597   --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
 598 }
 599 @font-face {
 600   font-family: 'framework7-core-icons';
 601   src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAz4ABAAAAAAGNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAM3AAAABkAAAAciZuB7UdERUYAAArUAAAAIwAAACQAfQBXR1BPUwAADKwAAAAuAAAANuAY7+xHU1VCAAAK+AAAAbMAAAQuAxQJ5U9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAogAAACIAAABYt6F0cBjdnQgAAADEAAAAAQAAAAEABEBRGdhc3AAAArMAAAACAAAAAj//wADZ2x5ZgAAA6gAAAR1AAAJzOg6B0doZWFkAAABbAAAADAAAAA2FLiY/WhoZWEAAAGcAAAAIAAAACQHgQM9aG10eAAAAigAAABeAAABJC9JAAJsb2NhAAADFAAAAJQAAACUReRIiG1heHAAAAG8AAAAHwAAACAAjwBLbmFtZQAACCAAAAFSAAAC2WG9Sh5wb3N0AAAJdAAAAVYAAAJ2B5LxL3jaY2BkYGAA4r3NMlLx/DZfGbiZGEDgxtw1DjD6/49/vSxpTJ+BXA4GsDQARmkM0njaY2BkYGD6/K+XQY8l7f8PBgaWNAagCArwBACRVQXFeNpjYGRgYPBkkGJgYQABJiBmZACJOTDogQQADbgA2wB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBWIJoNzZ/z8Y3YBsF6g4kM2UBpFjBNJMQD0Mu4FsY4jZTGch5jAZQ8QBlR0UZwAAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcAEZCsw6DJYMsQzVP3/DxQF8QyAvMT///8//n/9/9X/G/6vh5oAB4xsDHAhRiYgwcSApgBiNRywMDCwsrFzcHJx8/DyMRAD+BkEBIWERUTFxCUkpaRlZOXkFRSVlFVU1dQ1NBkGAwAAxH4T6AARAUQAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADQgNgA3IDlgO0A8QD6gP8BBYEKgRKBFwEbgSWBKwExgTmeNrtVc9vG0UUfm8de9y43rVje204lNjZ7AYBKcna3lKcxCIJhwgCqhIIuTSpKp8CaoRsbnZujSosI5QqitVbpCLBKT8EUiUSwyW9mEoWB4RyChKpEJxyoVKz5s2sDXH6H6BKM34z387OfvO9741BgiAAbOAsuIDB4BbC5cw264K/hrc87sPMtkuiIWy5OOzm8Dbz4NPMNnLcDJpBwwz2BVc/y+Vw1v4miCbthtRqotMoOMTHz7Hn2P8ek85gLkLfkAQMXdQv4Ps4TxWmQASiAD0JT1gdTif1YTXsSehJt2UoGLWMr2cymZnMvaWpqaUpHPffkuVleRmzmZmRkZkPpjj8RL7l56DDofkDmvSRHoD+hCLxncbQ0JPp4ZdQRQMRf/P1qr79fZ8a9x0p25J05FN7fXv7HD1SHM7NY6zhfboHXqBdosxIGZ6+BN9DjYRZNMFZElvMrugrbHBscnHxzo0B9u3CxMTCeHlFL0XYwOKdxcXJ0UE2vjA+viB4gQ57dF43QIjRltZeoaBVq5gWAVrcT7CKZfDSVyNxvijKsGo/rGj1ulb5NenE1lrw4494k+9nYRQNq4KKZtcr2mwrAjafkBavkBZ0n1npMST6YZKUy3sZdTfSyenMe3v8/EfKI3QdcU1o7ijBvxGGA4ezRWQM62BTK5W07+i32N/5PEVUo6z1uL9Y0oSOdrkrJ52Aj+e336AFUYsyahlSryYFerTerp6AJGUP0gft9qb9k326vo4uHEbX+vofB1b7kfX08F/YPuXLntWMC0b3r4VVrpP5RY0HvEICtjXL4ruYBQ9NomyIVuPL2uGyRhiFvnecNUv4FuoQoBGXS2gl3GOlMSmzVaZSl1VvPu9FXeYTjsksn2fizDCPdXqf/3fACMYj7lQ8gnXbxPqJaW6YpuBcwxjlhXTrR64rxpoQe/w4VnMC8Wj+DR/Bz/gayACUuaiqoIzExEpHpxa6A4Huj90hz1W/rFz8/Eul26d85UWWVS76ZecM1/Ft4sC9Ri5ixqZIDOoigONxUHGCcuen6gNK3hmHe1r+/nMuNKe9bk1PfzK9NTc6Oje68mFo7hLNpq2hq2Mc6dSLO4yKTNiL8cLrEEuV19tSFQqEdfIkEcgbDs/rm1qxqIk6LEs5PCElQwDJAJELeBJI52k7adfe3bWh+WIu125ZhJ2dJuzgxhkQOjVPIfcqQuz4OFbDluLtmsrhp+RXQCaEE7QwV6lo7YbvnZnwd+yaVJVq3FMWec+8gL/Xj+2afb8smaci7e29L8EDvMF1Sjue+q8gH3TaaDDgXfWGqQdUx1XO+5N0r+nCu8K6FpqPbvZc+x7DIpy/Y/jtYdDNouXzOE+hUGjlvTkv1SUdLvC8k6YmF7UvETpTnY21u43G3bW1YrpIrcR/X8WBRsP+pYH3SlaxaJXE7/n6E9+Mp+JGnded/RCvVLDMh0lRfy7OTzKJH68N0jiYcqqDdy6W00mZ5Ipo53ULOPbiNelc6mSs24zd9jqWwmvP6PYPnHjkAAAAAHjarZC9TsMwFIWP+yfBgBjI7rGtmsjx0p+RSl26IIbsITWt1Sau3EhVxcuwsTGy8RQsTOx9C65dDwwdGBrpyl+Oz7XPNYAbvIPh9HXxGJghwlvgBq7xFbiJlN0HbiFir4HbuGXfgTuIGhE5WeuK/h58l2OGPl4CN3CHz8BNPOEncAt9Vgdug7OPwB3Sj5jCYIsDLDSWWKEGp8wFerRKCKQYY0CcYYMcC3KVVJaUOblzIqeXdIb2u5ia7cHq5arm3aLHpUjHA55t8oUuteXzVW43ebnVC3I+U7NrVdhTCIs1hojpaseKSHuusCOrzUu1N3Y9jAtjVawLU5F81vvXMPNi7VdL8yk/VUJzcUyo/h/h5JcYkSp9nd4GM1PVM2OXistE8Ak/G5V0OYpl7J7jEoNn5LO0r72PUxaXJvGrmw2ZsjttKi5Emggh+AUu/QVMMIYbAAB42m2QCU/CQBSEZ8ADECzIJXj+FuN937dpartKI3TJdjn+vNGFUqGJmzTpvm/evNmHFMbn5xvEf+fIfEQKaRRRRgVV1FDHKhpoYg3r2MEu9rCPAxwa7TFOcIoznOMCl7jCNW5wizvc4wGPeMIzXvCKN6aY5hznucBFZphljkvMs8BlWiyyxBWWWWGVNda5ygabXOM6N7jJLW7nQuEot2X7Miy5LdFXMrCV/9nSo0p2AjueFbO2+NDmXnCUkoP4tmSo+/Uuh+a/mFAak0LCNj+La4HU/ofvOto3FbctQzHqsCLzd6m17BjLrHI8X45IOe725CCwnZ6SylkMpRqHCAd+Vyg7EENt/QWKNLm4r9ctTN4UgdIUTCr52RGWJ9pCC1vJXuDNzOgq0c9OmFlGVys7yjybcbyAqWmUxwiKyT2blSWmGMVyZBbzzPiFpl5JdkbevxMrvisAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQYPIJsFLMYAAA12ANUAeNp1UklOAkEUfUV3Ao4goHSUQQbBIM6z4qxoPIMbNhoT4sIQD+DCMxjjOVx6BuMRjAtvge9XAz2FdLqr+r1X/7/6/0MBGEYWNahWs/2ACEwi6HQgjGrd3zWJwf4jZ+o1AmX8IowknkLt0LdhGiWjDoP4PBrYQBR5PlmUuZvgWuSTRZp/aSSoGHfxeViYQooKm13CmIudYY7JPhfFLK7xiDd84keZqqwa6lY9q3f1ob7UH66oTvGd0+czvugxlDSe5+6U0bxKJ5NbtxXQJbSzjE9X5z29uhJyPs1CQON2ZxErYIW6Qb5sxXlA4a/gItdBMYTf7fJxTOvuVHw+V9mBQRnOMBo4a/ta6zLBrAcBplfDZYwEoonDPc5ksJoyX1X2/4Iekzp6kW9Ua0pUJfpeDrkbpJD4xxjy8ILJdK/zljKtFn1bdBXTe9tBnHqJnexnkRMnrFWR8aWCztQ6/CYzxRhdkB4eJlJjH284yS94xT5jJPX5OG/t7cURK1TmuRwVkiXHr9Rlx4dnuFbopMrKuWPZGWv6vg4q971kNSWHM1nbdNZD7IqI0zh3GZ238A+0lkTEAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlgeu4aBxgNAELpBpEAAAA=") format("woff");
 602   font-weight: 400;
 603   font-style: normal;
 604 }
 605 @font-face {
 606   font-family: 'framework7-skeleton';
 607   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");
 608   font-weight: 300, 400, 500, 600, 700;
 609   font-style: normal, italic;
 610 }
 611 html {
 612   direction: rtl;
 613 }
 614 html,
 615 body,
 616 .framework7-root {
 617   position: relative;
 618   height: 100%;
 619   width: 100%;
 620   overflow-x: hidden;
 621 }
 622 body {
 623   margin: 0;
 624   padding: 0;
 625   width: 100%;
 626   background: #fff;
 627   overflow: hidden;
 628   -webkit-text-size-adjust: 100%;
 629   -webkit-font-smoothing: antialiased;
 630   font-family: var(--f7-font-family);
 631   font-size: var(--f7-font-size);
 632   line-height: var(--f7-line-height);
 633   color: var(--f7-text-color);
 634 }
 635 .theme-dark {
 636   color: var(--f7-text-color);
 637 }
 638 .framework7-root {
 639   overflow: hidden;
 640   box-sizing: border-box;
 641 }
 642 .framework7-initializing *,
 643 .framework7-initializing *:before,
 644 .framework7-initializing *:after {
 645   transition-duration: 0ms !important;
 646 }
 647 .device-ios,
 648 .device-android {
 649   cursor: pointer;
 650 }
 651 .device-ios {
 652   touch-action: manipulation;
 653 }
 654 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 655   html,
 656   body,
 657   .framework7-root {
 658     height: 671px;
 659   }
 660 }
 661 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 662   html,
 663   body,
 664   .framework7-root {
 665     height: 672px;
 666   }
 667 }
 668 * {
 669   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 670   -webkit-touch-callout: none;
 671 }
 672 a,
 673 input,
 674 textarea,
 675 select {
 676   outline: 0;
 677 }
 678 a {
 679   cursor: pointer;
 680   text-decoration: none;
 681   color: var(--f7-theme-color);
 682 }
 683 .link,
 684 .item-link {
 685   cursor: pointer;
 686 }
 687 p {
 688   margin: 1em 0;
 689 }
 690 .disabled {
 691   opacity: 0.55 !important;
 692   pointer-events: none !important;
 693 }
 694 html.device-full-viewport,
 695 html.device-full-viewport body {
 696   height: 100vh;
 697 }
 698 .ios .md-only,
 699 .ios .if-md,
 700 .ios .aurora-only,
 701 .ios .if-aurora,
 702 .ios .if-not-ios,
 703 .ios .not-ios {
 704   display: none !important;
 705 }
 706 @media (width: 1024px) and (height: 691px) and (orientation: landscape) {
 707   .ios,
 708   .ios body,
 709   .ios .framework7-root {
 710     height: 671px;
 711   }
 712 }
 713 @media (width: 1024px) and (height: 692px) and (orientation: landscape) {
 714   .ios,
 715   .ios body,
 716   .ios .framework7-root {
 717     height: 672px;
 718   }
 719 }
 720 .md .ios-only,
 721 .md .if-ios,
 722 .md .aurora-only,
 723 .md .if-aurora,
 724 .md .if-not-md,
 725 .md .not-md {
 726   display: none !important;
 727 }
 728 .aurora .ios-only,
 729 .aurora .if-ios,
 730 .aurora .md-only,
 731 .aurora .if-md,
 732 .aurora .if-not-aurora,
 733 .aurora .not-aurora {
 734   display: none !important;
 735 }
 736 /* === Statusbar === */
 737 :root {
 738   --f7-statusbar-height: 0px;
 739   --f7-statusbar-bg-color: var(--f7-bars-bg-color);
 740 }
 741 .device-ios {
 742   --f7-statusbar-height: var(--f7-safe-area-top, 20px);
 743 }
 744 .device-android {
 745   --f7-statusbar-height: var(--f7-safe-area-top, 24px);
 746 }
 747 .with-statusbar.ios:not(.device-ios):not(.device-android) {
 748   --f7-statusbar-height: 20px;
 749 }
 750 .with-statusbar.md:not(.device-ios):not(.device-android) {
 751   --f7-statusbar-height: 24px;
 752 }
 753 @supports not (top: env(safe-area-inset-top)) {
 754   .with-statusbar.device-ios {
 755     --f7-statusbar-height: 20px;
 756   }
 757 }
 758 @supports not (top: env(safe-area-inset-top)) {
 759   .with-statusbar.device-android {
 760     --f7-statusbar-height: 24px;
 761   }
 762 }
 763 .statusbar {
 764   position: absolute;
 765   left: 0;
 766   top: 0;
 767   width: 100%;
 768   z-index: 10000;
 769   box-sizing: border-box;
 770   display: block;
 771   height: var(--f7-statusbar-height);
 772   background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
 773 }
 774 .framework7-root {
 775   padding-top: var(--f7-statusbar-height);
 776 }
 777 /* === Views === */
 778 .views,
 779 .view {
 780   position: relative;
 781   height: 100%;
 782   z-index: 5000;
 783   overflow: hidden;
 784   box-sizing: border-box;
 785 }
 786 .framework7-root > .view,
 787 .framework7-root > .views {
 788   height: calc(100% - var(--f7-appbar-app-offset, 0px));
 789 }
 790 /* === Pages === */
 791 :root {
 792   --f7-page-master-width: 320px;
 793   --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
 794   --f7-page-master-border-width: 1px;
 795   --f7-page-swipeback-transition-duration: 400ms;
 796   /*
 797   --f7-page-content-extra-padding-top: 0px;
 798   --f7-page-content-extra-padding-bottom: 0px;
 799   */
 800 }
 801 .ios {
 802   --f7-page-bg-color: #efeff4;
 803   --f7-page-transition-duration: 400ms;
 804 }
 805 .md {
 806   --f7-page-bg-color: #fff;
 807   --f7-page-transition-duration: 250ms;
 808 }
 809 .aurora {
 810   --f7-page-bg-color: #f3f3f3;
 811   --f7-page-transition-duration: 400ms;
 812 }
 813 .theme-dark {
 814   --f7-page-bg-color: #171717;
 815   --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
 816 }
 817 .pages {
 818   position: relative;
 819   width: 100%;
 820   height: 100%;
 821   overflow: hidden;
 822 }
 823 .page {
 824   box-sizing: border-box;
 825   position: absolute;
 826   left: 0;
 827   top: 0;
 828   width: 100%;
 829   height: 100%;
 830   transform: none;
 831   background-color: var(--f7-page-bg-color);
 832   z-index: 1;
 833 }
 834 .page.stacked {
 835   display: none;
 836 }
 837 .page-with-navbar-large-collapsed {
 838   --f7-navbar-large-collapse-progress: 1;
 839 }
 840 .page-previous {
 841   pointer-events: none;
 842 }
 843 .page-content {
 844   will-change: scroll-position;
 845   overflow: auto;
 846   -webkit-overflow-scrolling: touch;
 847   box-sizing: border-box;
 848   height: 100%;
 849   position: relative;
 850   z-index: 1;
 851   padding-top: calc(var(--f7-page-navbar-offset, 0px) + var(--f7-page-toolbar-top-offset, 0px) + var(--f7-page-subnavbar-offset, 0px) + var(--f7-page-searchbar-offset, 0px) + var(--f7-page-content-extra-padding-top, 0px));
 852   padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
 853 }
 854 .page-transitioning,
 855 .page-transitioning .page-shadow-effect,
 856 .page-transitioning .page-opacity-effect {
 857   transition-duration: var(--f7-page-transition-duration);
 858 }
 859 .page-transitioning-swipeback,
 860 .page-transitioning-swipeback .page-shadow-effect,
 861 .page-transitioning-swipeback .page-opacity-effect {
 862   transition-duration: var(--f7-page-swipeback-transition-duration);
 863 }
 864 .router-transition-forward .page-next,
 865 .router-transition-backward .page-next,
 866 .router-transition-forward .page-current,
 867 .router-transition-backward .page-current,
 868 .router-transition-forward .page-previous:not(.stacked),
 869 .router-transition-backward .page-previous:not(.stacked) {
 870   pointer-events: none;
 871 }
 872 .page-shadow-effect {
 873   position: absolute;
 874   top: 0;
 875   width: 16px;
 876   bottom: 0;
 877   z-index: -1;
 878   content: '';
 879   opacity: 0;
 880   left: 100%;
 881   background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 882 }
 883 .page-opacity-effect {
 884   position: absolute;
 885   left: 0;
 886   top: 0;
 887   background: rgba(0, 0, 0, 0.1);
 888   width: 100%;
 889   bottom: 0;
 890   content: '';
 891   opacity: 0;
 892   z-index: 10000;
 893 }
 894 .ios .page-previous {
 895   transform: translate3d(20%, 0, 0);
 896 }
 897 .ios .page-next {
 898   transform: translate3d(-100%, 0, 0);
 899 }
 900 .ios .page-previous .page-opacity-effect {
 901   opacity: 1;
 902 }
 903 .ios .page-previous:after {
 904   opacity: 1;
 905 }
 906 .ios .page-current .page-shadow-effect {
 907   opacity: 1;
 908 }
 909 .ios .router-transition-forward .page-next,
 910 .ios .router-transition-forward .page-current {
 911   will-change: transform;
 912 }
 913 .ios .router-transition-forward .page-next {
 914   animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
 915 }
 916 .ios .router-transition-forward .page-next:before {
 917   position: absolute;
 918   top: 0;
 919   width: 16px;
 920   bottom: 0;
 921   z-index: -1;
 922   content: '';
 923   opacity: 0;
 924   left: 100%;
 925   background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 926   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 927 }
 928 .ios .router-transition-forward .page-current {
 929   animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
 930 }
 931 .ios .router-transition-forward .page-current:after {
 932   position: absolute;
 933   left: 0;
 934   top: 0;
 935   background: rgba(0, 0, 0, 0.1);
 936   width: 100%;
 937   bottom: 0;
 938   content: '';
 939   opacity: 0;
 940   z-index: 10000;
 941   animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
 942 }
 943 .ios .router-transition-backward .page-previous,
 944 .ios .router-transition-backward .page-current {
 945   will-change: transform;
 946 }
 947 .ios .router-transition-backward .page-previous {
 948   animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
 949 }
 950 .ios .router-transition-backward .page-previous:after {
 951   position: absolute;
 952   left: 0;
 953   top: 0;
 954   background: rgba(0, 0, 0, 0.1);
 955   width: 100%;
 956   bottom: 0;
 957   content: '';
 958   opacity: 0;
 959   z-index: 10000;
 960   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 961 }
 962 .ios .router-transition-backward .page-current {
 963   animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
 964 }
 965 .ios .router-transition-backward .page-current:before {
 966   position: absolute;
 967   top: 0;
 968   width: 16px;
 969   bottom: 0;
 970   z-index: -1;
 971   content: '';
 972   opacity: 0;
 973   left: 100%;
 974   background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
 975   animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
 976 }
 977 .ios .router-dynamic-navbar-inside .page-shadow-effect,
 978 .ios .router-dynamic-navbar-inside .page-opacity-effect {
 979   top: var(--f7-navbar-height);
 980 }
 981 .ios .router-dynamic-navbar-inside .page-next:before,
 982 .ios .router-dynamic-navbar-inside .page-current:after,
 983 .ios .router-dynamic-navbar-inside .page-current:before,
 984 .ios .router-dynamic-navbar-inside .page-previous:after {
 985   top: var(--f7-navbar-height);
 986 }
 987 @keyframes ios-page-next-to-current {
 988   from {
 989     transform: translate3d(-100%, 0, 0);
 990   }
 991   to {
 992     transform: translate3d(0%, 0, 0);
 993   }
 994 }
 995 @keyframes ios-page-previous-to-current {
 996   from {
 997     transform: translate3d(20%, 0, 0);
 998   }
 999   to {
1000     transform: translate3d(0%, 0, 0);
1001   }
1002 }
1003 @keyframes ios-page-current-to-previous {
1004   from {
1005     transform: translate3d(0, 0, 0);
1006   }
1007   to {
1008     transform: translate3d(20%, 0, 0);
1009   }
1010 }
1011 @keyframes ios-page-current-to-next {
1012   from {
1013     transform: translate3d(0, 0, 0);
1014   }
1015   to {
1016     transform: translate3d(-100%, 0, 0);
1017   }
1018 }
1019 @keyframes ios-page-element-fade-in {
1020   from {
1021     opacity: 0;
1022   }
1023   to {
1024     opacity: 1;
1025   }
1026 }
1027 @keyframes ios-page-element-fade-out {
1028   from {
1029     opacity: 1;
1030   }
1031   to {
1032     opacity: 0;
1033   }
1034 }
1035 .md .page-next {
1036   transform: translate3d(0, 56px, 0);
1037   opacity: 0;
1038   pointer-events: none;
1039 }
1040 .md .page-next.page-next-on-right {
1041   transform: translate3d(-100%, 0, 0);
1042 }
1043 .md .router-transition-forward .page-next {
1044   will-change: transform, opacity;
1045   animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1046 }
1047 .md .router-transition-forward .page-current {
1048   animation: none;
1049 }
1050 .md .router-transition-backward .page-current {
1051   will-change: transform, opacity;
1052   animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1053 }
1054 .md .router-transition-backward .page-previous {
1055   animation: none;
1056 }
1057 @keyframes md-page-next-to-current {
1058   from {
1059     transform: translate3d(0, 56px, 0);
1060     opacity: 0;
1061   }
1062   to {
1063     transform: translate3d(0, 0px, 0);
1064     opacity: 1;
1065   }
1066 }
1067 @keyframes md-page-current-to-next {
1068   from {
1069     transform: translate3d(0, 0, 0);
1070     opacity: 1;
1071   }
1072   to {
1073     transform: translate3d(0, 56px, 0);
1074     opacity: 0;
1075   }
1076 }
1077 .aurora .page-next {
1078   pointer-events: none;
1079   transform: translate3d(-100%, 0px, 0);
1080 }
1081 .aurora .page-next.page-next-on-right {
1082   transform: translate3d(-100%, 0, 0);
1083 }
1084 .aurora .page-previous .page-opacity-effect {
1085   opacity: 1;
1086 }
1087 .aurora .page-previous:after {
1088   opacity: 1;
1089 }
1090 .aurora .router-transition-forward .page-next {
1091   will-change: transform;
1092   animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1093 }
1094 .aurora .router-transition-forward .page-current {
1095   animation: none;
1096 }
1097 .aurora .router-transition-forward .page-current:after {
1098   position: absolute;
1099   left: 0;
1100   top: 0;
1101   background: rgba(0, 0, 0, 0.1);
1102   width: 100%;
1103   bottom: 0;
1104   content: '';
1105   opacity: 0;
1106   z-index: 10000;
1107   animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
1108 }
1109 .aurora .router-transition-backward .page-current {
1110   will-change: transform, opacity;
1111   animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1112 }
1113 .aurora .router-transition-backward .page-previous {
1114   animation: none;
1115 }
1116 .aurora .router-transition-backward .page-previous:after {
1117   position: absolute;
1118   left: 0;
1119   top: 0;
1120   background: rgba(0, 0, 0, 0.1);
1121   width: 100%;
1122   bottom: 0;
1123   content: '';
1124   opacity: 0;
1125   z-index: 10000;
1126   animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
1127 }
1128 @keyframes aurora-page-next-to-current {
1129   from {
1130     transform: translate3d(-100%, 0, 0);
1131   }
1132   to {
1133     transform: translate3d(0, 0px, 0);
1134   }
1135 }
1136 @keyframes aurora-page-current-to-next {
1137   from {
1138     transform: translate3d(0, 0, 0);
1139   }
1140   to {
1141     transform: translate3d(-100%, 0, 0);
1142   }
1143 }
1144 @keyframes aurora-page-element-fade-in {
1145   from {
1146     opacity: 0;
1147   }
1148   to {
1149     opacity: 1;
1150   }
1151 }
1152 @keyframes aurora-page-element-fade-out {
1153   from {
1154     opacity: 1;
1155   }
1156   to {
1157     opacity: 0;
1158   }
1159 }
1160 .view:not(.view-master-detail) .page-master-stacked {
1161   display: none;
1162 }
1163 .view:not(.view-master-detail) .navbar-master-stacked {
1164   display: none;
1165 }
1166 .view-master-detail .page-master,
1167 .view-master-detail .navbar-master {
1168   width: var(--f7-page-master-width);
1169   left: auto;
1170   right: 0;
1171   --f7-safe-area-left: 0px;
1172   --f7-safe-area-outer-left: 0px;
1173   border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1174 }
1175 .view-master-detail .page-master-detail,
1176 .view-master-detail .navbar-master-detail {
1177   width: calc(100% - var(--f7-page-master-width));
1178   --f7-safe-area-right: 0px;
1179   --f7-safe-area-outer-right: 0px;
1180   right: var(--f7-page-master-width);
1181 }
1182 .view-master-detail .page-master {
1183   z-index: 2;
1184   transform: none;
1185   pointer-events: auto;
1186 }
1187 .view-master-detail .page-master:before,
1188 .view-master-detail .page-master:after {
1189   display: none;
1190 }
1191 .view-master-detail.router-transition .page-master {
1192   animation: none;
1193 }
1194 /* === Link === */
1195 :root {
1196   --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1197   --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1198   --f7-link-highlight-color: var(--f7-link-highlight-black);
1199 }
1200 .theme-dark {
1201   --f7-link-highlight-color: var(--f7-link-highlight-white);
1202 }
1203 .link,
1204 .tab-link {
1205   display: inline-flex;
1206   align-items: center;
1207   align-content: center;
1208   justify-content: center;
1209   position: relative;
1210   box-sizing: border-box;
1211   transform: translate3d(0, 0, 0);
1212   z-index: 1;
1213 }
1214 .link i + span,
1215 .link i + i,
1216 .link span + i,
1217 .link span + span {
1218   margin-right: 4px;
1219 }
1220 .ios .link {
1221   transition: opacity 300ms;
1222 }
1223 .ios .link.active-state {
1224   opacity: 0.3;
1225   transition-duration: 0ms;
1226 }
1227 .aurora .link {
1228   transition: opacity 300ms;
1229 }
1230 .aurora .link.active-state {
1231   opacity: 0.3;
1232   transition-duration: 0ms;
1233 }
1234 /* === Navbar === */
1235 :root {
1236   /*
1237   --f7-navbar-bg-color: var(--f7-bars-bg-color);
1238   --f7-navbar-bg-image: var(--f7-bars-bg-image);
1239   --f7-navbar-border-color: var(--f7-bars-border-color);
1240   --f7-navbar-link-color: var(--f7-bars-link-color);
1241   --f7-navbar-text-color: var(--f7-bars-text-color);
1242   */
1243   --f7-navbar-hide-show-transition-duration: 400ms;
1244   --f7-navbar-title-line-height: 1.2;
1245   --f7-navbar-title-font-size: inherit;
1246   --f7-navbar-subtitle-text-align: inherit;
1247   --f7-navbar-large-title-line-height: 1.2;
1248   --f7-navbar-large-title-text-color: inherit;
1249 }
1250 .ios {
1251   --f7-navbar-height: 44px;
1252   --f7-navbar-tablet-height: 44px;
1253   --f7-navbar-font-size: 17px;
1254   --f7-navbar-inner-padding-left: 8px;
1255   --f7-navbar-inner-padding-right: 8px;
1256   --f7-navbar-title-font-weight: 600;
1257   --f7-navbar-title-margin-left: 0;
1258   --f7-navbar-title-margin-right: 0;
1259   --f7-navbar-title-text-align: center;
1260   --f7-navbar-subtitle-text-color: #6d6d72;
1261   --f7-navbar-subtitle-font-size: 10px;
1262   --f7-navbar-subtitle-line-height: 1;
1263   --f7-navbar-shadow-image: none;
1264   --f7-navbar-large-title-height: 52px;
1265   --f7-navbar-large-title-font-size: 34px;
1266   --f7-navbar-large-title-font-weight: 700;
1267   --f7-navbar-large-title-letter-spacing: -0.03em;
1268   --f7-navbar-large-title-padding-left: 15px;
1269   --f7-navbar-large-title-padding-right: 15px;
1270   /*
1271   --f7-navbar-link-height: var(--f7-navbar-height);
1272   --f7-navbar-link-line-height: var(--f7-navbar-height);
1273   */
1274 }
1275 .ios .theme-dark,
1276 .ios.theme-dark {
1277   --f7-navbar-subtitle-text-color: #8e8e93;
1278 }
1279 .md {
1280   --f7-navbar-height: 56px;
1281   --f7-navbar-tablet-height: 64px;
1282   --f7-navbar-font-size: 20px;
1283   --f7-navbar-inner-padding-left: 0px;
1284   --f7-navbar-inner-padding-right: 0px;
1285   --f7-navbar-title-font-weight: 500;
1286   --f7-navbar-title-margin-left: 16px;
1287   --f7-navbar-title-margin-right: 16px;
1288   --f7-navbar-title-text-align: left;
1289   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1290   --f7-navbar-subtitle-font-size: 14px;
1291   --f7-navbar-subtitle-line-height: 1.2;
1292   --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1293   --f7-navbar-large-title-font-size: 34px;
1294   --f7-navbar-large-title-height: 56px;
1295   --f7-navbar-large-title-font-weight: 500;
1296   --f7-navbar-large-title-letter-spacing: 0;
1297   --f7-navbar-large-title-padding-left: 16px;
1298   --f7-navbar-large-title-padding-right: 16px;
1299   /*
1300   --f7-navbar-link-height: var(--f7-navbar-height);
1301   --f7-navbar-link-line-height: var(--f7-navbar-height);
1302   */
1303 }
1304 .md .theme-dark,
1305 .md.theme-dark {
1306   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1307 }
1308 .aurora {
1309   --f7-navbar-height: 38px;
1310   --f7-navbar-tablet-height: 38px;
1311   --f7-navbar-font-size: 14px;
1312   --f7-navbar-inner-padding-left: 15px;
1313   --f7-navbar-inner-padding-right: 15px;
1314   --f7-navbar-title-font-weight: 600;
1315   --f7-navbar-title-margin-left: 0;
1316   --f7-navbar-title-margin-right: 0;
1317   --f7-navbar-title-text-align: center;
1318   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1319   --f7-navbar-subtitle-font-size: 12px;
1320   --f7-navbar-subtitle-line-height: 1;
1321   --f7-navbar-shadow-image: none;
1322   --f7-navbar-large-title-height: 38px;
1323   --f7-navbar-large-title-font-size: 26px;
1324   --f7-navbar-large-title-font-weight: bold;
1325   --f7-navbar-large-title-letter-spacing: -0.03em;
1326   --f7-navbar-large-title-padding-left: 15px;
1327   --f7-navbar-large-title-padding-right: 15px;
1328   --f7-navbar-link-height: auto;
1329   --f7-navbar-link-line-height: inherit;
1330 }
1331 .aurora .theme-dark,
1332 .aurora.theme-dark {
1333   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1334 }
1335 .navbar {
1336   --f7-navbar-large-collapse-progress: 0;
1337   position: relative;
1338   left: 0;
1339   top: 0;
1340   width: 100%;
1341   z-index: 500;
1342   -webkit-backface-visibility: hidden;
1343           backface-visibility: hidden;
1344   box-sizing: border-box;
1345   margin: 0;
1346   transform: translate3d(0, 0, 0);
1347   height: var(--f7-navbar-height);
1348   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1349   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1350   color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1351   font-size: var(--f7-navbar-font-size);
1352 }
1353 .navbar b {
1354   font-weight: 500;
1355 }
1356 .navbar a {
1357   color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1358 }
1359 .navbar a.link {
1360   display: flex;
1361   justify-content: flex-start;
1362   line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
1363   height: var(--f7-navbar-link-height, var(--f7-navbar-height));
1364 }
1365 .navbar .title,
1366 .navbar .left,
1367 .navbar .right {
1368   position: relative;
1369   z-index: 10;
1370 }
1371 .navbar .title {
1372   position: relative;
1373   overflow: hidden;
1374   text-overflow: ellipsis;
1375   white-space: nowrap;
1376   flex-shrink: 10;
1377   font-weight: var(--f7-navbar-title-font-weight);
1378   display: inline-block;
1379   line-height: var(--f7-navbar-title-line-height);
1380   text-align: var(--f7-navbar-title-text-align);
1381   font-size: var(--f7-navbar-title-font-size);
1382   margin-right: var(--f7-navbar-title-margin-left);
1383   margin-left: var(--f7-navbar-title-margin-left);
1384 }
1385 .navbar .subtitle {
1386   display: block;
1387   color: var(--f7-navbar-subtitle-text-color);
1388   font-weight: normal;
1389   font-size: var(--f7-navbar-subtitle-font-size);
1390   line-height: var(--f7-navbar-subtitle-line-height);
1391   text-align: var(--f7-navbar-subtitle-text-align);
1392 }
1393 .navbar .left,
1394 .navbar .right {
1395   flex-shrink: 0;
1396   display: flex;
1397   justify-content: flex-start;
1398   align-items: center;
1399   transform: translate3d(0, 0, 0);
1400 }
1401 .navbar .right:first-child {
1402   position: absolute;
1403   height: 100%;
1404 }
1405 .navbar.no-hairline:after,
1406 .navbar.no-border:after {
1407   display: none !important;
1408 }
1409 .navbar.no-hairline .title-large:after,
1410 .navbar.no-border .title-large:after {
1411   display: none !important;
1412 }
1413 .navbar.no-shadow:before {
1414   display: none !important;
1415 }
1416 .navbar.navbar-hidden:before {
1417   opacity: 0 !important;
1418 }
1419 .navbar:after,
1420 .navbar:before {
1421   -webkit-backface-visibility: hidden;
1422           backface-visibility: hidden;
1423 }
1424 .navbar:after {
1425   content: '';
1426   position: absolute;
1427   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1428   display: block;
1429   z-index: 15;
1430   top: auto;
1431   right: auto;
1432   bottom: 0;
1433   left: 0;
1434   height: 1px;
1435   width: 100%;
1436   transform-origin: 50% 100%;
1437   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1438 }
1439 .navbar:before {
1440   content: '';
1441   position: absolute;
1442   right: 0;
1443   width: 100%;
1444   top: 100%;
1445   bottom: auto;
1446   height: 8px;
1447   pointer-events: none;
1448   background: var(--f7-navbar-shadow-image);
1449 }
1450 .navbar:after {
1451   z-index: 1;
1452 }
1453 @media (min-width: 768px) {
1454   :root {
1455     --f7-navbar-height: var(--f7-navbar-tablet-height);
1456   }
1457 }
1458 .navbar-transitioning,
1459 .navbar-transitioning:before,
1460 .navbar-transitioning .title,
1461 .navbar-transitioning .title-large,
1462 .navbar-transitioning .title-large-inner,
1463 .navbar-transitioning .title-large-text,
1464 .navbar-transitioning .subnavbar {
1465   transition-duration: var(--f7-navbar-hide-show-transition-duration);
1466 }
1467 .navbar-page-transitioning {
1468   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1469 }
1470 .navbar-page-transitioning .title-large-text,
1471 .navbar-page-transitioning .title-large-inner {
1472   transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1473 }
1474 .navbar-hidden {
1475   transform: translate3d(0, -100%, 0);
1476 }
1477 .navbar-large-hidden {
1478   --f7-navbar-large-collapse-progress: 1;
1479 }
1480 .navbar-inner {
1481   position: absolute;
1482   left: 0;
1483   top: 0;
1484   width: 100%;
1485   height: var(--f7-navbar-height);
1486   display: flex;
1487   align-items: center;
1488   box-sizing: border-box;
1489   padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
1490 }
1491 .navbar-inner.stacked {
1492   display: none;
1493 }
1494 .views > .navbar,
1495 .view > .navbar,
1496 .page > .navbar {
1497   position: absolute;
1498 }
1499 .navbar-large:before {
1500   transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1501 }
1502 .navbar-inner-large > .title {
1503   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1504 }
1505 .navbar-large-collapsed,
1506 .navbar-inner-large-collapsed {
1507   --f7-navbar-large-collapse-progress: 1;
1508 }
1509 .navbar .title-large {
1510   box-sizing: border-box;
1511   position: absolute;
1512   left: 0;
1513   right: 0;
1514   top: 100%;
1515   display: flex;
1516   align-items: center;
1517   white-space: nowrap;
1518   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1519   will-change: transform, opacity;
1520   transition-property: transform;
1521   overflow: hidden;
1522   background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1523   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1524   height: calc(var(--f7-navbar-large-title-height) + 1px);
1525   z-index: 5;
1526   margin-top: -1px;
1527   transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1528 }
1529 .navbar .title-large:after {
1530   content: '';
1531   position: absolute;
1532   background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1533   display: block;
1534   z-index: 15;
1535   top: auto;
1536   right: auto;
1537   bottom: 0;
1538   left: 0;
1539   height: 1px;
1540   width: 100%;
1541   transform-origin: 50% 100%;
1542   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1543 }
1544 .title-large-text,
1545 .title-large-inner .title {
1546   text-overflow: ellipsis;
1547   white-space: nowrap;
1548   color: var(--f7-navbar-large-title-text-color);
1549   letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1550   font-size: var(--f7-navbar-large-title-font-size);
1551   font-weight: var(--f7-navbar-large-title-font-weight);
1552   line-height: var(--f7-navbar-large-title-line-height);
1553   padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1554   padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1555   transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1556 }
1557 .title-large-text,
1558 .title-large-inner {
1559   box-sizing: border-box;
1560   overflow: hidden;
1561   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1562   transition-property: transform, opacity;
1563   width: 100%;
1564 }
1565 .navbar-no-title-large-transition .title-large,
1566 .navbar-no-title-large-transition .title-large-text,
1567 .navbar-no-title-large-transition .title-large-inner {
1568   transition-duration: 0ms;
1569 }
1570 .navbar ~ * {
1571   --f7-page-navbar-offset: var(--f7-navbar-height);
1572 }
1573 .navbar ~ * .page-with-navbar-large,
1574 .navbar ~ .page-with-navbar-large,
1575 .page-with-navbar-large .navbar ~ * {
1576   --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
1577 }
1578 .page.no-navbar,
1579 .page.no-navbar .navbar ~ * {
1580   --f7-page-navbar-offset: 0px;
1581 }
1582 .ios {
1583   --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1584   --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1585 }
1586 .ios .navbar .material-icons {
1587   width: 24px;
1588 }
1589 .ios .navbar .f7-icons {
1590   width: 28px;
1591 }
1592 .ios .navbar a.icon-only {
1593   width: 44px;
1594   margin: 0;
1595   justify-content: center;
1596 }
1597 .ios .navbar .left a + a,
1598 .ios .navbar .right a + a {
1599   margin-right: 15px;
1600 }
1601 .ios .navbar b {
1602   font-weight: 600;
1603 }
1604 .ios .navbar .left {
1605   margin-left: 10px;
1606 }
1607 .ios .navbar .right {
1608   margin-right: 10px;
1609 }
1610 .ios .navbar .right:first-child {
1611   left: calc(8px + var(--f7-safe-area-left));
1612 }
1613 .ios .navbar-inner {
1614   justify-content: space-between;
1615 }
1616 .ios .navbar-inner-left-title {
1617   justify-content: flex-start;
1618 }
1619 .ios .navbar-inner-left-title .right {
1620   margin-right: auto;
1621 }
1622 .ios .navbar-inner-left-title .title {
1623   text-align: left;
1624   margin-left: 10px;
1625 }
1626 .ios .view-master-detail .navbar-previous:not(.navbar-master),
1627 .ios .view:not(.view-master-detail) .navbar-previous {
1628   pointer-events: none;
1629 }
1630 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1631 .ios .view:not(.view-master-detail) .navbar-previous .title-large {
1632   transform: translateY(-100%);
1633   opacity: 0;
1634   transition: 0ms;
1635 }
1636 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1637 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1638   transform: scale(0.5);
1639   transition: 0ms;
1640 }
1641 .ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1642 .ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1643   transform: translateX(-100%);
1644   opacity: 0;
1645   transition: 0ms;
1646 }
1647 .ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1648 .ios .view:not(.view-master-detail) .navbar-previous .left,
1649 .ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1650 .ios .view:not(.view-master-detail) .navbar-previous .right,
1651 .ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1652 .ios .view:not(.view-master-detail) .navbar-previous > .title,
1653 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1654 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1655 .ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1656 .ios .view:not(.view-master-detail) .navbar-previous .fading {
1657   opacity: 0;
1658 }
1659 .ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1660 .ios .view:not(.view-master-detail) .navbar-previous .sliding {
1661   opacity: 0;
1662 }
1663 .ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1664 .ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1665 .ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1666 .ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1667   opacity: 1;
1668   transform: translate3d(-100%, 0, 0);
1669 }
1670 .ios .navbar-next {
1671   pointer-events: none;
1672 }
1673 .ios .navbar-next .title-large {
1674   transform: translateX(100%);
1675   transition: 0ms;
1676 }
1677 .ios .navbar-next .title-large .title-large-text,
1678 .ios .navbar-next .title-large .title-large-inner {
1679   transition: 0ms;
1680 }
1681 .ios .navbar-next .left,
1682 .ios .navbar-next .right,
1683 .ios .navbar-next > .title,
1684 .ios .navbar-next .subnavbar,
1685 .ios .navbar-next .fading {
1686   opacity: 0;
1687 }
1688 .ios .navbar-next .sliding {
1689   opacity: 0;
1690 }
1691 .ios .navbar-next.sliding .left,
1692 .ios .navbar-next.sliding .right,
1693 .ios .navbar-next.sliding > .title,
1694 .ios .navbar-next.sliding .subnavbar {
1695   opacity: 0;
1696 }
1697 .ios .navbar-next .subnavbar.sliding,
1698 .ios .navbar-next.sliding .subnavbar {
1699   opacity: 1;
1700   transform: translate3d(100%, 0, 0);
1701 }
1702 .ios .router-dynamic-navbar-inside .navbar-next .title-large,
1703 .ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1704 .ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1705   transform: none;
1706 }
1707 .ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1708   opacity: 1;
1709   transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1710 }
1711 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1712 .ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1713   transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1714 }
1715 .ios .router-transition .navbar {
1716   transition-duration: var(--f7-page-transition-duration);
1717 }
1718 .ios .router-transition .title-large {
1719   transition: 0ms;
1720 }
1721 .ios .router-transition .navbar-current .left,
1722 .ios .router-transition .navbar-current > .title,
1723 .ios .router-transition .navbar-current .right,
1724 .ios .router-transition .navbar-current .subnavbar {
1725   animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1726 }
1727 .ios .router-transition .navbar-current .sliding,
1728 .ios .router-transition .navbar-current .left.sliding .icon + span,
1729 .ios .router-transition .navbar-current.sliding .left,
1730 .ios .router-transition .navbar-current.sliding .left .icon + span,
1731 .ios .router-transition .navbar-current.sliding > .title,
1732 .ios .router-transition .navbar-current.sliding .right {
1733   transition-duration: var(--f7-page-transition-duration);
1734   opacity: 0 !important;
1735   animation: none;
1736 }
1737 .ios .router-transition .navbar-current.sliding .subnavbar,
1738 .ios .router-transition .navbar-current .sliding.subnavbar {
1739   transition-duration: var(--f7-page-transition-duration);
1740   animation: none;
1741   opacity: 1;
1742 }
1743 .ios .router-transition-forward .navbar-next .left,
1744 .ios .router-transition-backward .navbar-previous .left,
1745 .ios .router-transition-forward .navbar-next > .title,
1746 .ios .router-transition-backward .navbar-previous > .title,
1747 .ios .router-transition-forward .navbar-next .right,
1748 .ios .router-transition-backward .navbar-previous .right,
1749 .ios .router-transition-forward .navbar-next .subnavbar,
1750 .ios .router-transition-backward .navbar-previous .subnavbar {
1751   animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1752 }
1753 .ios .router-transition-forward .navbar-next .sliding,
1754 .ios .router-transition-backward .navbar-previous .sliding,
1755 .ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1756 .ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1757 .ios .router-transition-forward .navbar-next.sliding .left,
1758 .ios .router-transition-backward .navbar-previous.sliding .left,
1759 .ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1760 .ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1761 .ios .router-transition-forward .navbar-next.sliding > .title,
1762 .ios .router-transition-backward .navbar-previous.sliding > .title,
1763 .ios .router-transition-forward .navbar-next.sliding .right,
1764 .ios .router-transition-backward .navbar-previous.sliding .right,
1765 .ios .router-transition-forward .navbar-next.sliding .subnavbar,
1766 .ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1767   transition-duration: var(--f7-page-transition-duration);
1768   animation: none;
1769   transform: translate3d(0, 0, 0) !important;
1770   opacity: 1 !important;
1771 }
1772 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1773   overflow: visible;
1774 }
1775 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1776   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;
1777 }
1778 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1779   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1780 }
1781 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1782   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;
1783 }
1784 .ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1785   animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1786 }
1787 .ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1788   animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1789   transition: none;
1790   transform-origin: right center;
1791 }
1792 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1793   overflow: visible;
1794 }
1795 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1796 .ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1797   animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1798 }
1799 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1800   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1801 }
1802 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1803 .ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1804   animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1805 }
1806 .ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1807 .ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1808   animation: none;
1809   opacity: 0 !important;
1810   transition-duration: 0;
1811 }
1812 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1813 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1814 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1815 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1816 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1817 .ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1818   animation: none !important;
1819 }
1820 .ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1821   animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1822   transition: none;
1823   transform-origin: right center;
1824 }
1825 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1826   overflow: visible;
1827   transform: translateX(100%);
1828 }
1829 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1830 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1831   animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1832 }
1833 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1834   animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1835 }
1836 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1837 .ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1838   animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1839 }
1840 .ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1841   opacity: 0;
1842 }
1843 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1844   overflow: visible;
1845   opacity: 1;
1846   transform: translateY(0);
1847 }
1848 .ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1849   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;
1850 }
1851 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1852   opacity: 1;
1853   animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1854 }
1855 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1856   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;
1857 }
1858 .ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1859   animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1860 }
1861 .ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1862 .ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1863   animation: none;
1864   opacity: 0 !important;
1865   transition-duration: 0;
1866 }
1867 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1868 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1869 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1870 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1871 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1872 .ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1873   animation: none !important;
1874 }
1875 .view-master-detail .navbar-master.navbar-previous {
1876   pointer-events: auto;
1877 }
1878 .view-master-detail .navbar-master.navbar-previous .left,
1879 .view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1880 .view-master-detail .navbar-master.navbar-previous .right,
1881 .view-master-detail .navbar-master.navbar-previous .subnavbar {
1882   opacity: 1;
1883 }
1884 .ios .view-master-detail.router-transition .navbar-master .left,
1885 .ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1886 .ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1887 .ios .view-master-detail.router-transition .navbar-master .right,
1888 .ios .view-master-detail.router-transition .navbar-master .subnavbar,
1889 .ios .view-master-detail.router-transition .navbar-master .sliding,
1890 .ios .view-master-detail.router-transition .navbar-master .fading {
1891   opacity: 1 !important;
1892   transition-duration: 0ms;
1893   transform: none !important;
1894   animation: none !important;
1895 }
1896 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1897   opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1898   transition-duration: 0ms;
1899   transform: none !important;
1900   animation: none !important;
1901 }
1902 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1903 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1904 .ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1905   transition-duration: 0ms;
1906   animation: none !important;
1907 }
1908 @keyframes ios-navbar-element-fade-in {
1909   from {
1910     opacity: 0;
1911   }
1912   to {
1913     opacity: 1;
1914   }
1915 }
1916 @keyframes ios-navbar-element-fade-out {
1917   from {
1918     opacity: 1;
1919   }
1920   to {
1921     opacity: 0;
1922   }
1923 }
1924 @keyframes ios-navbar-title-large-slide-up {
1925   0% {
1926     transform: translateY(0%);
1927   }
1928   100% {
1929     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1930   }
1931 }
1932 @keyframes ios-navbar-title-large-slide-down {
1933   0% {
1934     transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1935   }
1936   100% {
1937     transform: translateY(0%);
1938   }
1939 }
1940 @keyframes ios-navbar-title-large-text-slide-up {
1941   0% {
1942     transform: translateX(0px) translateY(0%) scale(1);
1943   }
1944   100% {
1945     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);
1946   }
1947 }
1948 @keyframes ios-navbar-title-large-text-slide-down {
1949   0% {
1950     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);
1951   }
1952   100% {
1953     transform: translateX(0px) translateY(0%) scale(1);
1954   }
1955 }
1956 @keyframes ios-navbar-title-large-text-slide-left {
1957   0% {
1958     transform: translateX(-200%) scale(1);
1959   }
1960   100% {
1961     transform: translateX(-100%) scale(1);
1962   }
1963 }
1964 @keyframes ios-navbar-title-large-text-slide-right {
1965   0% {
1966     transform: translateX(-100%) scale(1);
1967   }
1968   100% {
1969     transform: translateX(-200%) scale(1);
1970   }
1971 }
1972 @keyframes ios-navbar-title-large-text-slide-left-top {
1973   0% {
1974     transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1975   }
1976   100% {
1977     transform: translateX(0%) translateY(0%) scale(1);
1978   }
1979 }
1980 @keyframes ios-navbar-title-large-text-slide-right-bottom {
1981   0% {
1982     transform: translateX(0%) translateY(0%) scale(1);
1983   }
1984   100% {
1985     transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1986   }
1987 }
1988 @keyframes ios-navbar-title-large-text-fade-out {
1989   0% {
1990     opacity: 1;
1991   }
1992   80% {
1993     opacity: 0;
1994   }
1995   100% {
1996     opacity: 0;
1997   }
1998 }
1999 @keyframes ios-navbar-title-large-text-fade-in {
2000   0% {
2001     opacity: 0;
2002   }
2003   20% {
2004     opacity: 0;
2005   }
2006   100% {
2007     opacity: 1;
2008   }
2009 }
2010 @keyframes ios-navbar-title-large-text-scale-out {
2011   0% {
2012     transform: translateY(0%) scale(1);
2013   }
2014   100% {
2015     transform: translateY(0%) scale(0.5);
2016   }
2017 }
2018 @keyframes ios-navbar-title-large-text-scale-in {
2019   0% {
2020     transform: translateY(0%) scale(0.5);
2021   }
2022   100% {
2023     transform: translateY(0%) scale(1);
2024   }
2025 }
2026 @keyframes ios-navbar-back-text-current-to-previous {
2027   0% {
2028     opacity: 1;
2029     transform: translateY(0px) translateX(0px) scale(1);
2030   }
2031   80% {
2032     opacity: 0;
2033   }
2034   100% {
2035     opacity: 0;
2036     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2037   }
2038 }
2039 @keyframes ios-navbar-back-text-next-to-current {
2040   0% {
2041     opacity: 0;
2042     transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
2043   }
2044   20% {
2045     opacity: 0;
2046   }
2047   100% {
2048     opacity: 1;
2049     transform: translateX(0px) translateY(0px) scale(1);
2050   }
2051 }
2052 @keyframes ios-navbar-title-large-inner-current-to-previous {
2053   0% {
2054     transform: translateX(0%);
2055     opacity: 1;
2056   }
2057   100% {
2058     transform: translateX(100%);
2059     opacity: 0;
2060   }
2061 }
2062 @keyframes ios-navbar-title-large-inner-previous-to-current {
2063   0% {
2064     transform: translateX(100%);
2065     opacity: 0;
2066   }
2067   100% {
2068     transform: translateX(0%);
2069     opacity: 1;
2070   }
2071 }
2072 .md .navbar .material-icons {
2073   width: 24px;
2074 }
2075 .md .navbar .f7-icons {
2076   width: 28px;
2077 }
2078 .md .navbar a.link {
2079   padding: 0 16px;
2080   min-width: 48px;
2081 }
2082 .md .navbar a.link:before {
2083   content: '';
2084   width: 152%;
2085   height: 152%;
2086   position: absolute;
2087   left: -26%;
2088   top: -26%;
2089   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2090   background-repeat: no-repeat;
2091   background-position: center;
2092   background-size: 100% 100%;
2093   opacity: 0;
2094   pointer-events: none;
2095   transition-duration: 600ms;
2096 }
2097 .md .navbar a.link.active-state:before {
2098   opacity: 1;
2099   transition-duration: 150ms;
2100 }
2101 .md .navbar a.icon-only {
2102   min-width: 0;
2103   flex-shrink: 0;
2104   width: 56px;
2105 }
2106 .md .navbar .right {
2107   margin-right: auto;
2108 }
2109 .md .navbar .right:first-child {
2110   left: var(--f7-safe-area-left);
2111 }
2112 .md .navbar-inner {
2113   justify-content: flex-start;
2114   overflow: hidden;
2115 }
2116 .md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
2117   overflow: visible;
2118 }
2119 .md .page.page-with-subnavbar .navbar-inner {
2120   overflow: visible;
2121 }
2122 .md .navbar-inner-centered-title {
2123   justify-content: space-between;
2124 }
2125 .md .navbar-inner-centered-title .right {
2126   margin-right: 0;
2127 }
2128 .md .navbar-inner-centered-title .title {
2129   text-align: center;
2130 }
2131 .aurora .navbar a.icon-only {
2132   margin: 0;
2133   justify-content: center;
2134 }
2135 .aurora .navbar .left a + a,
2136 .aurora .navbar .right a + a {
2137   margin-right: 10px;
2138 }
2139 .aurora .navbar b {
2140   font-weight: bold;
2141 }
2142 .aurora .navbar .left {
2143   margin-left: 10px;
2144 }
2145 .aurora .navbar .right {
2146   margin-right: 10px;
2147 }
2148 .aurora .navbar .right:first-child {
2149   left: calc(15px + var(--f7-safe-area-left));
2150 }
2151 .aurora .navbar-inner {
2152   justify-content: space-between;
2153 }
2154 .aurora .navbar-inner-left-title {
2155   justify-content: flex-start;
2156 }
2157 .aurora .navbar-inner-left-title .right {
2158   margin-right: auto;
2159 }
2160 .aurora .navbar-inner-left-title .title {
2161   text-align: left;
2162   margin-left: 10px;
2163 }
2164 /* === Toolbar === */
2165 :root {
2166   /*
2167   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2168   --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2169   --f7-toolbar-border-color: var(--f7-bars-border-color);
2170   --f7-toolbar-link-color: var(--f7-bars-link-color);
2171   --f7-toolbar-text-color: var(--f7-bars-text-color);
2172   --f7-tabbar-link-active-color: var(--f7-theme-color);
2173   */
2174   --f7-tabbar-link-active-bg-color: transparent;
2175   --f7-tabbar-label-text-transform: none;
2176   --f7-toolbar-hide-show-transition-duration: 400ms;
2177 }
2178 .ios {
2179   --f7-toolbar-height: 44px;
2180   --f7-toolbar-font-size: 17px;
2181   --f7-toolbar-inner-padding-left: 8px;
2182   --f7-toolbar-inner-padding-right: 8px;
2183   /*
2184   --f7-toolbar-link-height: var(--f7-toolbar-height);
2185   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2186   */
2187   --f7-tabbar-labels-height: 50px;
2188   --f7-tabbar-labels-tablet-height: 56px;
2189   --f7-tabbar-link-inactive-color: #929292;
2190   --f7-toolbar-top-shadow-image: none;
2191   --f7-toolbar-bottom-shadow-image: none;
2192   --f7-tabbar-icon-size: 28px;
2193   --f7-tabbar-link-text-transform: none;
2194   --f7-tabbar-link-font-weight: 400;
2195   --f7-tabbar-link-letter-spacing: 0;
2196   --f7-tabbar-label-font-size: 10px;
2197   --f7-tabbar-label-tablet-font-size: 14px;
2198   --f7-tabbar-label-font-weight: 400;
2199   --f7-tabbar-label-letter-spacing: 0.01;
2200 }
2201 .md {
2202   --f7-toolbar-height: 48px;
2203   --f7-toolbar-font-size: 14px;
2204   --f7-toolbar-inner-padding-left: 0px;
2205   --f7-toolbar-inner-padding-right: 0px;
2206   /*
2207   --f7-toolbar-link-height: var(--f7-toolbar-height);
2208   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2209   */
2210   --f7-tabbar-labels-height: 56px;
2211   --f7-tabbar-labels-tablet-height: 56px;
2212   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2213   /*
2214   --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2215   */
2216   --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2217   --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2218   --f7-tabbar-icon-size: 24px;
2219   --f7-tabbar-link-text-transform: uppercase;
2220   --f7-tabbar-link-font-weight: 500;
2221   --f7-tabbar-link-letter-spacing: 0.03em;
2222   --f7-tabbar-label-font-size: 14px;
2223   --f7-tabbar-label-tablet-font-size: 14px;
2224   --f7-tabbar-label-font-weight: 400;
2225   --f7-tabbar-label-letter-spacing: 0;
2226 }
2227 .md .theme-dark,
2228 .md.theme-dark {
2229   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2230 }
2231 .aurora {
2232   --f7-toolbar-height: 38px;
2233   --f7-toolbar-font-size: 14px;
2234   --f7-toolbar-inner-padding-left: 15px;
2235   --f7-toolbar-inner-padding-right: 15px;
2236   --f7-toolbar-link-height: auto;
2237   --f7-toolbar-link-line-height: inherit;
2238   --f7-tabbar-labels-height: 44px;
2239   --f7-tabbar-labels-tablet-height: 44px;
2240   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2241   --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
2242   --f7-toolbar-top-shadow-image: none;
2243   --f7-toolbar-bottom-shadow-image: none;
2244   --f7-tabbar-icon-size: 18px;
2245   --f7-tabbar-link-text-transform: none;
2246   --f7-tabbar-link-font-weight: 400;
2247   --f7-tabbar-link-letter-spacing: 0;
2248   --f7-tabbar-label-font-size: 12px;
2249   --f7-tabbar-label-tablet-font-size: 12px;
2250   --f7-tabbar-label-font-weight: 500;
2251   --f7-tabbar-label-letter-spacing: 0.01;
2252 }
2253 .aurora .theme-dark,
2254 .aurora.theme-dark {
2255   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2256 }
2257 .toolbar {
2258   width: 100%;
2259   position: relative;
2260   margin: 0;
2261   transform: translate3d(0, 0, 0);
2262   -webkit-backface-visibility: hidden;
2263           backface-visibility: hidden;
2264   z-index: 500;
2265   box-sizing: border-box;
2266   left: 0;
2267   height: var(--f7-toolbar-height);
2268   background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2269   background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2270   color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2271   font-size: var(--f7-toolbar-font-size);
2272 }
2273 .toolbar b {
2274   font-weight: 600;
2275 }
2276 .toolbar a {
2277   color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2278   box-sizing: border-box;
2279   flex-shrink: 1;
2280   position: relative;
2281   white-space: nowrap;
2282   text-overflow: ellipsis;
2283 }
2284 .toolbar a.link {
2285   display: flex;
2286   line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2287   height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
2288 }
2289 .toolbar i.icon {
2290   display: block;
2291 }
2292 .toolbar:after,
2293 .toolbar:before {
2294   -webkit-backface-visibility: hidden;
2295           backface-visibility: hidden;
2296 }
2297 .views > .toolbar,
2298 .view > .toolbar,
2299 .page > .toolbar {
2300   position: absolute;
2301 }
2302 .toolbar-top,
2303 .ios .toolbar-top-ios,
2304 .md .toolbar-top-md,
2305 .aurora .toolbar-top-aurora {
2306   top: 0;
2307 }
2308 .toolbar-top .tab-link-highlight,
2309 .ios .toolbar-top-ios .tab-link-highlight,
2310 .md .toolbar-top-md .tab-link-highlight,
2311 .aurora .toolbar-top-aurora .tab-link-highlight {
2312   bottom: 0;
2313 }
2314 .toolbar-top.no-hairline:after,
2315 .ios .toolbar-top-ios.no-hairline:after,
2316 .md .toolbar-top-md.no-hairline:after,
2317 .aurora .toolbar-top-aurora.no-hairline:after,
2318 .toolbar-top.no-border:after,
2319 .ios .toolbar-top-ios.no-border:after,
2320 .md .toolbar-top-md.no-border:after,
2321 .aurora .toolbar-top-aurora.no-border:after {
2322   display: none !important;
2323 }
2324 .toolbar-top.no-shadow:before,
2325 .ios .toolbar-top-ios.no-shadow:before,
2326 .md .toolbar-top-md.no-shadow:before,
2327 .aurora .toolbar-top-aurora.no-shadow:before,
2328 .toolbar-top.toolbar-hidden:before,
2329 .ios .toolbar-top-ios.toolbar-hidden:before,
2330 .md .toolbar-top-md.toolbar-hidden:before,
2331 .aurora .toolbar-top-aurora.toolbar-hidden:before {
2332   display: none !important;
2333 }
2334 .toolbar-top:after,
2335 .ios .toolbar-top-ios:after,
2336 .md .toolbar-top-md:after,
2337 .aurora .toolbar-top-aurora:after,
2338 .toolbar-top:before,
2339 .ios .toolbar-top-ios:before,
2340 .md .toolbar-top-md:before,
2341 .aurora .toolbar-top-aurora:before {
2342   -webkit-backface-visibility: hidden;
2343           backface-visibility: hidden;
2344 }
2345 .toolbar-top:after,
2346 .ios .toolbar-top-ios:after,
2347 .md .toolbar-top-md:after,
2348 .aurora .toolbar-top-aurora:after {
2349   content: '';
2350   position: absolute;
2351   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2352   display: block;
2353   z-index: 15;
2354   top: auto;
2355   right: auto;
2356   bottom: 0;
2357   left: 0;
2358   height: 1px;
2359   width: 100%;
2360   transform-origin: 50% 100%;
2361   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2362 }
2363 .toolbar-top:before,
2364 .ios .toolbar-top-ios:before,
2365 .md .toolbar-top-md:before,
2366 .aurora .toolbar-top-aurora:before {
2367   content: '';
2368   position: absolute;
2369   right: 0;
2370   width: 100%;
2371   top: 100%;
2372   bottom: auto;
2373   height: 8px;
2374   pointer-events: none;
2375   background: var(--f7-toolbar-top-shadow-image);
2376 }
2377 .toolbar-bottom,
2378 .ios .toolbar-bottom-ios,
2379 .md .toolbar-bottom-md,
2380 .aurora .toolbar-bottom-aurora {
2381   bottom: 0;
2382   height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2383 }
2384 .toolbar-bottom .tab-link-highlight,
2385 .ios .toolbar-bottom-ios .tab-link-highlight,
2386 .md .toolbar-bottom-md .tab-link-highlight,
2387 .aurora .toolbar-bottom-aurora .tab-link-highlight {
2388   top: 0;
2389 }
2390 .toolbar-bottom .toolbar-inner,
2391 .ios .toolbar-bottom-ios .toolbar-inner,
2392 .md .toolbar-bottom-md .toolbar-inner,
2393 .aurora .toolbar-bottom-aurora .toolbar-inner {
2394   height: auto;
2395   top: 0;
2396   bottom: var(--f7-safe-area-bottom);
2397 }
2398 .toolbar-bottom.no-hairline:before,
2399 .ios .toolbar-bottom-ios.no-hairline:before,
2400 .md .toolbar-bottom-md.no-hairline:before,
2401 .aurora .toolbar-bottom-aurora.no-hairline:before,
2402 .toolbar-bottom.no-border:before,
2403 .ios .toolbar-bottom-ios.no-border:before,
2404 .md .toolbar-bottom-md.no-border:before,
2405 .aurora .toolbar-bottom-aurora.no-border:before {
2406   display: none !important;
2407 }
2408 .toolbar-bottom.no-shadow:after,
2409 .ios .toolbar-bottom-ios.no-shadow:after,
2410 .md .toolbar-bottom-md.no-shadow:after,
2411 .aurora .toolbar-bottom-aurora.no-shadow:after,
2412 .toolbar-bottom.toolbar-hidden:after,
2413 .ios .toolbar-bottom-ios.toolbar-hidden:after,
2414 .md .toolbar-bottom-md.toolbar-hidden:after,
2415 .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2416   display: none !important;
2417 }
2418 .toolbar-bottom:before,
2419 .ios .toolbar-bottom-ios:before,
2420 .md .toolbar-bottom-md:before,
2421 .aurora .toolbar-bottom-aurora:before {
2422   content: '';
2423   position: absolute;
2424   background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2425   display: block;
2426   z-index: 15;
2427   top: 0;
2428   right: auto;
2429   bottom: auto;
2430   left: 0;
2431   height: 1px;
2432   width: 100%;
2433   transform-origin: 50% 0%;
2434   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2435 }
2436 .toolbar-bottom:after,
2437 .ios .toolbar-bottom-ios:after,
2438 .md .toolbar-bottom-md:after,
2439 .aurora .toolbar-bottom-aurora:after {
2440   content: '';
2441   position: absolute;
2442   right: 0;
2443   width: 100%;
2444   bottom: 100%;
2445   height: 8px;
2446   top: auto;
2447   pointer-events: none;
2448   background: var(--f7-toolbar-bottom-shadow-image);
2449 }
2450 .toolbar-inner {
2451   position: absolute;
2452   left: 0;
2453   top: 0;
2454   width: 100%;
2455   height: 100%;
2456   display: flex;
2457   justify-content: space-between;
2458   box-sizing: border-box;
2459   align-items: center;
2460   align-content: center;
2461   overflow: hidden;
2462   padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
2463 }
2464 .views > .tabbar,
2465 .views > .tabbar-labels {
2466   z-index: 5001;
2467 }
2468 .tabbar a,
2469 .tabbar-labels a {
2470   color: var(--f7-tabbar-link-inactive-color);
2471 }
2472 .tabbar a.tab-link:not(.tab-link-active),
2473 .tabbar-labels a.tab-link:not(.tab-link-active) {
2474   background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
2475 }
2476 .tabbar a.link,
2477 .tabbar-labels a.link {
2478   line-height: 1.4;
2479 }
2480 .tabbar a.tab-link,
2481 .tabbar-labels a.tab-link,
2482 .tabbar a.link,
2483 .tabbar-labels a.link {
2484   height: 100%;
2485   width: 100%;
2486   box-sizing: border-box;
2487   display: flex;
2488   justify-content: center;
2489   align-items: center;
2490   flex-direction: column;
2491   text-transform: var(--f7-tabbar-link-text-transform);
2492   font-weight: var(--f7-tabbar-link-font-weight);
2493   letter-spacing: var(--f7-tabbar-link-letter-spacing);
2494   overflow: hidden;
2495 }
2496 .tabbar .tab-link-active,
2497 .tabbar-labels .tab-link-active {
2498   color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
2499   background-color: var(--f7-tabbar-link-active-bg-color, transparent);
2500 }
2501 .tabbar i.icon,
2502 .tabbar-labels i.icon {
2503   font-size: var(--f7-tabbar-icon-size);
2504   height: var(--f7-tabbar-icon-size);
2505   line-height: var(--f7-tabbar-icon-size);
2506 }
2507 .tabbar-labels {
2508   --f7-toolbar-height: var(--f7-tabbar-labels-height);
2509 }
2510 .tabbar-labels a.tab-link,
2511 .tabbar-labels a.link {
2512   height: 100%;
2513   justify-content: space-between;
2514   align-items: center;
2515 }
2516 .tabbar-labels .tabbar-label {
2517   display: block;
2518   line-height: 1;
2519   margin: 0;
2520   position: relative;
2521   text-overflow: ellipsis;
2522   white-space: nowrap;
2523   font-size: var(--f7-tabbar-label-font-size);
2524   text-transform: var(--f7-tabbar-label-text-transform);
2525   font-weight: var(--f7-tabbar-label-font-weight);
2526   letter-spacing: var(--f7-tabbar-label-letter-spacing);
2527 }
2528 @media (min-width: 768px) {
2529   :root {
2530     --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2531     --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2532   }
2533 }
2534 .tabbar-scrollable .toolbar-inner {
2535   justify-content: flex-start;
2536   will-change: scroll-position;
2537   overflow: auto;
2538   -webkit-overflow-scrolling: touch;
2539 }
2540 .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2541   display: none !important;
2542   width: 0 !important;
2543   height: 0 !important;
2544   -webkit-appearance: none;
2545   opacity: 0 !important;
2546 }
2547 .tabbar-scrollable a.tab-link,
2548 .tabbar-scrollable a.link {
2549   width: auto;
2550   flex-shrink: 0;
2551 }
2552 .toolbar-transitioning,
2553 .navbar-transitioning + .toolbar,
2554 .navbar-transitioning ~ * .toolbar {
2555   transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2556 }
2557 .toolbar-bottom ~ *,
2558 .ios .toolbar-bottom-ios ~ *,
2559 .md .toolbar-bottom-md ~ *,
2560 .aurora .toolbar-bottom-aurora ~ * {
2561   --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
2562 }
2563 .toolbar-bottom.tabbar-labels ~ *,
2564 .ios .toolbar-bottom-ios.tabbar-labels ~ *,
2565 .md .toolbar-bottom-md.tabbar-labels ~ *,
2566 .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
2567   --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
2568 }
2569 .toolbar-bottom.toolbar-hidden,
2570 .ios .toolbar-bottom-ios.toolbar-hidden,
2571 .md .toolbar-bottom-md.toolbar-hidden,
2572 .aurora .toolbar-bottom-aurora.toolbar-hidden {
2573   transform: translate3d(0, 100%, 0);
2574 }
2575 .toolbar-top ~ *,
2576 .ios .toolbar-top-ios ~ *,
2577 .md .toolbar-top-md ~ *,
2578 .aurora .toolbar-top-aurora ~ * {
2579   --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
2580 }
2581 .toolbar-top.tabbar-labels ~ *,
2582 .ios .toolbar-top-ios.tabbar-labels ~ *,
2583 .md .toolbar-top-md.tabbar-labels ~ *,
2584 .aurora .toolbar-top-aurora.tabbar-labels ~ * {
2585   --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
2586 }
2587 .toolbar-top.toolbar-hidden,
2588 .ios .toolbar-top-ios.toolbar-hidden,
2589 .md .toolbar-top-md.toolbar-hidden,
2590 .aurora .toolbar-top-aurora.toolbar-hidden {
2591   transform: translate3d(0, -100%, 0);
2592 }
2593 .navbar ~ .toolbar-top,
2594 .ios .navbar ~ .toolbar-top-ios,
2595 .md .navbar ~ .toolbar-top-md,
2596 .aurora .navbar ~ .toolbar-top-aurora,
2597 .navbar ~ * .toolbar-top,
2598 .ios .navbar ~ * .toolbar-top-ios,
2599 .md .navbar ~ * .toolbar-top-md,
2600 .aurora .navbar ~ * .toolbar-top-aurora,
2601 .navbar ~ .page:not(.no-navbar) .toolbar-top,
2602 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
2603 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
2604 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2605   top: var(--f7-navbar-height);
2606 }
2607 .navbar ~ .toolbar-top.toolbar-hidden,
2608 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2609 .md .navbar ~ .toolbar-top-md.toolbar-hidden,
2610 .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
2611 .navbar ~ * .toolbar-top.toolbar-hidden,
2612 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2613 .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
2614 .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
2615 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2616 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
2617 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
2618 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2619   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2620 }
2621 .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2622 .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2623 .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
2624 .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
2625 .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2626 .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2627 .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
2628 .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
2629 .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2630 .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2631 .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
2632 .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
2633   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2634 }
2635 .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2636 .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2637 .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
2638 .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
2639 .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2640 .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2641 .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2642 .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2643   transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2644 }
2645 .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2646 .ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2647 .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2648 .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2649 .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2650 .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
2651 .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2652   transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2653 }
2654 .ios .toolbar a.icon-only {
2655   min-height: var(--f7-toolbar-height);
2656   display: flex;
2657   justify-content: center;
2658   align-items: center;
2659   margin: 0;
2660   min-width: 44px;
2661 }
2662 .ios .tabbar-labels a.tab-link,
2663 .ios .tabbar-labels a.link {
2664   padding-top: 4px;
2665   padding-bottom: 4px;
2666 }
2667 .ios .tabbar-labels a.tab-link i + span,
2668 .ios .tabbar-labels a.link i + span {
2669   margin: 0;
2670 }
2671 @media (min-width: 768px) {
2672   .ios .tabbar .toolbar-inner,
2673   .ios .tabbar-labels .toolbar-inner {
2674     justify-content: center;
2675   }
2676   .ios .tabbar a.tab-link,
2677   .ios .tabbar-labels a.tab-link,
2678   .ios .tabbar a.link,
2679   .ios .tabbar-labels a.link {
2680     width: auto;
2681     min-width: 105px;
2682   }
2683 }
2684 .ios .tabbar-scrollable .toolbar-inner {
2685   justify-content: flex-start;
2686 }
2687 .ios .tabbar-scrollable a.tab-link,
2688 .ios .tabbar-scrollable a.link {
2689   padding: 0 8px;
2690 }
2691 .md .toolbar a.link {
2692   justify-content: center;
2693   padding: 0 16px;
2694   min-width: 48px;
2695 }
2696 .md .toolbar a.link:before {
2697   content: '';
2698   width: 152%;
2699   height: 152%;
2700   position: absolute;
2701   left: -26%;
2702   top: -26%;
2703   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2704   background-repeat: no-repeat;
2705   background-position: center;
2706   background-size: 100% 100%;
2707   opacity: 0;
2708   pointer-events: none;
2709   transition-duration: 600ms;
2710 }
2711 .md .toolbar a.link.active-state:before {
2712   opacity: 1;
2713   transition-duration: 150ms;
2714 }
2715 .md .toolbar a.icon-only {
2716   min-width: 0;
2717   flex-shrink: 0;
2718 }
2719 .md .tabbar a.tab-link,
2720 .md .tabbar-labels a.tab-link,
2721 .md .tabbar a.link,
2722 .md .tabbar-labels a.link {
2723   padding-left: 0;
2724   padding-right: 0;
2725 }
2726 .md .tabbar a.icon-only,
2727 .md .tabbar-labels a.icon-only {
2728   flex-shrink: initial;
2729 }
2730 .md .tabbar a.tab-link,
2731 .md .tabbar-labels a.tab-link {
2732   transition-duration: 300ms;
2733   overflow: hidden;
2734   position: relative;
2735 }
2736 .md .tabbar .tab-link-highlight,
2737 .md .tabbar-labels .tab-link-highlight {
2738   position: absolute;
2739   left: 0;
2740   height: 2px;
2741   background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2742   transition-duration: 300ms;
2743   right: 0;
2744 }
2745 .md .tabbar-labels a.tab-link,
2746 .md .tabbar-labels a.link {
2747   padding-top: 7px;
2748   padding-bottom: 7px;
2749 }
2750 .md .tabbar-label {
2751   max-width: 100%;
2752   overflow: hidden;
2753   line-height: 1.2;
2754 }
2755 .md .tabbar-scrollable .toolbar-inner {
2756   overflow: auto;
2757 }
2758 .md .tabbar-scrollable a.tab-link,
2759 .md .tabbar-scrollable a.link {
2760   padding: 0 16px;
2761 }
2762 .aurora .toolbar a.icon-only {
2763   min-height: var(--f7-toolbar-height);
2764   display: flex;
2765   justify-content: center;
2766   align-items: center;
2767   margin: 0;
2768 }
2769 .aurora .tabbar .toolbar-inner,
2770 .aurora .tabbar-labels .toolbar-inner {
2771   padding-left: 0;
2772   padding-right: 0;
2773 }
2774 .aurora .tabbar a.tab-link,
2775 .aurora .tabbar-labels a.tab-link,
2776 .aurora .tabbar a.link,
2777 .aurora .tabbar-labels a.link {
2778   transition-duration: 200ms;
2779 }
2780 .aurora .tabbar-labels a.tab-link,
2781 .aurora .tabbar-labels a.link {
2782   padding-top: 5px;
2783   padding-bottom: 5px;
2784 }
2785 .aurora .tabbar-labels a.tab-link i + span,
2786 .aurora .tabbar-labels a.link i + span {
2787   margin: 0;
2788 }
2789 .aurora .tabbar-scrollable .toolbar-inner {
2790   justify-content: flex-start;
2791 }
2792 .aurora .tabbar-scrollable a.tab-link,
2793 .aurora .tabbar-scrollable a.link {
2794   padding: 0 15px;
2795 }
2796 /* === Subnavbar === */
2797 :root {
2798   /*
2799   --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2800   --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2801   --f7-subnavbar-border-color: var(--f7-bars-border-color);
2802   --f7-subnavbar-link-color: var(--f7-bars-link-color);
2803   --f7-subnavbar-text-color: var(--f7-bars-text-color);
2804   */
2805   --f7-subnavbar-title-line-height: 1.2;
2806 }
2807 .ios {
2808   --f7-subnavbar-height: 44px;
2809   --f7-subnavbar-inner-padding-left: 8px;
2810   --f7-subnavbar-inner-padding-right: 8px;
2811   --f7-subnavbar-title-font-size: 34px;
2812   --f7-subnavbar-title-font-weight: 700;
2813   --f7-subnavbar-title-letter-spacing: -0.03em;
2814   --f7-subnavbar-title-margin-left: 7px;
2815   --f7-subnavbar-shadow-image: none;
2816   /*
2817   --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2818   --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2819   */
2820 }
2821 .md {
2822   --f7-subnavbar-height: 48px;
2823   --f7-subnavbar-inner-padding-left: 16px;
2824   --f7-subnavbar-inner-padding-right: 16px;
2825   --f7-subnavbar-title-font-size: 20px;
2826   --f7-subnavbar-title-font-weight: 500;
2827   --f7-subnavbar-title-letter-spacing: 0;
2828   --f7-subnavbar-title-margin-left: 0px;
2829   --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2830   /*
2831   --f7-subnavbar-link-height: var(--f7-subnavbar-height);
2832   --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
2833   */
2834 }
2835 .aurora {
2836   --f7-subnavbar-height: 38px;
2837   --f7-subnavbar-inner-padding-left: 15px;
2838   --f7-subnavbar-inner-padding-right: 15px;
2839   --f7-subnavbar-title-font-size: 26px;
2840   --f7-subnavbar-title-font-weight: bold;
2841   --f7-subnavbar-title-letter-spacing: -0.03em;
2842   --f7-subnavbar-title-margin-left: 0px;
2843   --f7-subnavbar-shadow-image: none;
2844   --f7-subnavbar-link-height: auto;
2845   --f7-subnavbar-link-line-height: inherit;
2846 }
2847 .subnavbar {
2848   width: 100%;
2849   position: absolute;
2850   left: 0;
2851   top: 0;
2852   z-index: 500;
2853   box-sizing: border-box;
2854   display: flex;
2855   justify-content: space-between;
2856   align-items: center;
2857   background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2858   background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2859   color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2860 }
2861 .subnavbar .title {
2862   position: relative;
2863   overflow: hidden;
2864   text-overflow: ellpsis;
2865   white-space: nowrap;
2866   font-size: var(--f7-subnavbar-title-font-size);
2867   font-weight: var(--f7-subnavbar-title-font-weight);
2868   text-align: left;
2869   display: inline-block;
2870   line-height: var(--f7-subnavbar-title-line-height);
2871   letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2872   margin-right: var(--f7-subnavbar-title-margin-left);
2873 }
2874 .subnavbar .left,
2875 .subnavbar .right {
2876   flex-shrink: 0;
2877   display: flex;
2878   justify-content: flex-start;
2879   align-items: center;
2880 }
2881 .subnavbar .right:first-child {
2882   position: absolute;
2883   height: 100%;
2884 }
2885 .subnavbar a {
2886   color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2887 }
2888 .subnavbar a.link {
2889   line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
2890   height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
2891 }
2892 .subnavbar a.icon-only {
2893   min-width: var(--f7-subnavbar-height);
2894 }
2895 .subnavbar.no-hairline:after,
2896 .subnavbar.no-border:after {
2897   display: none !important;
2898 }
2899 .subnavbar.no-shadow:before,
2900 .subnavbar.navbar-hidden:before {
2901   display: none !important;
2902 }
2903 .subnavbar:after,
2904 .subnavbar:before {
2905   -webkit-backface-visibility: hidden;
2906           backface-visibility: hidden;
2907 }
2908 .subnavbar:after {
2909   content: '';
2910   position: absolute;
2911   background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
2912   display: block;
2913   z-index: 15;
2914   top: auto;
2915   right: auto;
2916   bottom: 0;
2917   left: 0;
2918   height: 1px;
2919   width: 100%;
2920   transform-origin: 50% 100%;
2921   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2922 }
2923 .subnavbar:before {
2924   content: '';
2925   position: absolute;
2926   right: 0;
2927   width: 100%;
2928   top: 100%;
2929   bottom: auto;
2930   height: 8px;
2931   pointer-events: none;
2932   background: var(--f7-subnavbar-shadow-image);
2933 }
2934 .subnavbar-inner {
2935   width: 100%;
2936   height: 100%;
2937   display: flex;
2938   align-items: center;
2939   box-sizing: border-box;
2940   justify-content: space-between;
2941   overflow: hidden;
2942   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));
2943 }
2944 .subnavbar-inner.stacked {
2945   display: none;
2946 }
2947 .navbar .subnavbar {
2948   top: 100%;
2949 }
2950 .views > .subnavbar,
2951 .view > .subnavbar,
2952 .page > .subnavbar {
2953   position: absolute;
2954 }
2955 .navbar ~ * .subnavbar,
2956 .page-with-subnavbar .navbar ~ .subnavbar,
2957 .page-with-subnavbar .navbar ~ * .subnavbar,
2958 .navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2959 .navbar ~ .subnavbar {
2960   top: var(--f7-navbar-height);
2961 }
2962 .navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2963 .page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2964 .page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2965   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2966   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2967 }
2968 .navbar .title-large ~ .subnavbar {
2969   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2970   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2971 }
2972 .page-with-subnavbar,
2973 .subnavbar ~ * {
2974   --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
2975 }
2976 .ios .subnavbar {
2977   height: calc(var(--f7-subnavbar-height) + 1px);
2978   margin-top: -1px;
2979   padding-top: 1px;
2980 }
2981 .ios .subnavbar .title {
2982   align-self: flex-start;
2983   flex-shrink: 10;
2984 }
2985 .ios .subnavbar .left a + a,
2986 .ios .subnavbar .right a + a {
2987   margin-right: 15px;
2988 }
2989 .ios .subnavbar .left {
2990   margin-left: 10px;
2991 }
2992 .ios .subnavbar .right {
2993   margin-right: 10px;
2994 }
2995 .ios .subnavbar .right:first-child {
2996   left: 8px;
2997 }
2998 .ios .subnavbar a.link {
2999   justify-content: flex-start;
3000 }
3001 .ios .subnavbar a.icon-only {
3002   justify-content: center;
3003   margin: 0;
3004 }
3005 .md .subnavbar {
3006   height: var(--f7-subnavbar-height);
3007 }
3008 .md .subnavbar .right {
3009   margin-right: auto;
3010 }
3011 .md .subnavbar .right:first-child {
3012   left: 16px;
3013 }
3014 .md .subnavbar a.link {
3015   justify-content: center;
3016   padding: 0 16px;
3017 }
3018 .md .subnavbar a.link:before {
3019   content: '';
3020   width: 152%;
3021   height: 152%;
3022   position: absolute;
3023   left: -26%;
3024   top: -26%;
3025   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3026   background-repeat: no-repeat;
3027   background-position: center;
3028   background-size: 100% 100%;
3029   opacity: 0;
3030   pointer-events: none;
3031   transition-duration: 600ms;
3032 }
3033 .md .subnavbar a.link.active-state:before {
3034   opacity: 1;
3035   transition-duration: 150ms;
3036 }
3037 .md .subnavbar a.icon-only {
3038   flex-shrink: 0;
3039 }
3040 .md .subnavbar-inner > a.link:first-child {
3041   margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3042 }
3043 .md .subnavbar-inner > a.link:last-child {
3044   margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3045 }
3046 .aurora .subnavbar {
3047   height: calc(var(--f7-subnavbar-height) + 1px);
3048   margin-top: -1px;
3049   padding-top: 1px;
3050 }
3051 .aurora .subnavbar .title {
3052   align-self: flex-start;
3053   flex-shrink: 10;
3054 }
3055 .aurora .subnavbar .left a + a,
3056 .aurora .subnavbar .right a + a {
3057   margin-right: 10px;
3058 }
3059 .aurora .subnavbar .left {
3060   margin-left: 10px;
3061 }
3062 .aurora .subnavbar .right {
3063   margin-right: 10px;
3064 }
3065 .aurora .subnavbar .right:first-child {
3066   left: 15px;
3067 }
3068 .aurora .subnavbar a.link {
3069   justify-content: flex-start;
3070 }
3071 .aurora .subnavbar a.icon-only {
3072   justify-content: center;
3073   margin: 0;
3074 }
3075 /* === Content Block === */
3076 :root {
3077   --f7-block-font-size: inherit;
3078   --f7-block-strong-bg-color: #fff;
3079   --f7-block-title-font-size: inherit;
3080   --f7-block-header-margin: 10px;
3081   --f7-block-footer-margin: 10px;
3082   --f7-block-header-font-size: 14px;
3083   --f7-block-footer-font-size: 14px;
3084   --f7-block-title-white-space: nowrap;
3085   --f7-block-title-medium-text-color: #000;
3086   --f7-block-title-medium-text-transform: none;
3087   --f7-block-title-large-text-color: #000;
3088   --f7-block-title-large-text-transform: none;
3089 }
3090 :root .theme-dark,
3091 :root.theme-dark {
3092   --f7-block-strong-border-color: #282829;
3093   --f7-block-title-medium-text-color: #fff;
3094   --f7-block-title-large-text-color: #fff;
3095   --f7-block-strong-bg-color: #1c1c1d;
3096 }
3097 .ios {
3098   --f7-block-text-color: #6d6d72;
3099   --f7-block-padding-horizontal: 15px;
3100   --f7-block-padding-vertical: 15px;
3101   --f7-block-margin-vertical: 35px;
3102   --f7-block-strong-text-color: #000;
3103   --f7-block-strong-border-color: #c8c7cc;
3104   --f7-block-title-text-transform: uppercase;
3105   --f7-block-title-text-color: #6d6d72;
3106   --f7-block-title-font-weight: 400;
3107   --f7-block-title-line-height: 17px;
3108   --f7-block-title-margin-bottom: 10px;
3109   --f7-block-title-medium-font-size: 22px;
3110   --f7-block-title-medium-font-weight: bold;
3111   --f7-block-title-medium-line-height: 1.4;
3112   --f7-block-title-large-font-size: 29px;
3113   --f7-block-title-large-font-weight: bold;
3114   --f7-block-title-large-line-height: 1.3;
3115   --f7-block-inset-side-margin: 15px;
3116   --f7-block-inset-border-radius: 7px;
3117   --f7-block-header-text-color: #8f8f94;
3118   --f7-block-footer-text-color: #8f8f94;
3119 }
3120 .ios .theme-dark,
3121 .ios.theme-dark {
3122   --f7-block-title-text-color: #8E8E93;
3123   --f7-block-header-text-color: #8E8E93;
3124   --f7-block-footer-text-color: #8E8E93;
3125   --f7-block-strong-text-color: #fff;
3126 }
3127 .md {
3128   --f7-block-text-color: inherit;
3129   --f7-block-padding-horizontal: 16px;
3130   --f7-block-padding-vertical: 16px;
3131   --f7-block-margin-vertical: 32px;
3132   --f7-block-strong-text-color: inherit;
3133   --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3134   --f7-block-title-text-transform: none;
3135   --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3136   --f7-block-title-font-weight: 500;
3137   --f7-block-title-line-height: 16px;
3138   --f7-block-title-margin-bottom: 16px;
3139   --f7-block-title-medium-font-size: 24px;
3140   --f7-block-title-medium-font-weight: 500;
3141   --f7-block-title-medium-line-height: 1.3;
3142   --f7-block-title-large-font-size: 34px;
3143   --f7-block-title-large-font-weight: 500;
3144   --f7-block-title-large-line-height: 1.2;
3145   --f7-block-inset-side-margin: 16px;
3146   --f7-block-inset-border-radius: 4px;
3147   --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3148   --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3149 }
3150 .md .theme-dark,
3151 .md.theme-dark {
3152   --f7-block-title-text-color: #fff;
3153   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3154   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3155 }
3156 .aurora {
3157   --f7-block-text-color: inherit;
3158   --f7-block-padding-horizontal: 15px;
3159   --f7-block-padding-vertical: 15px;
3160   --f7-block-margin-vertical: 15px;
3161   --f7-block-strong-text-color: inherit;
3162   --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3163   --f7-block-title-text-transform: none;
3164   --f7-block-title-text-color: rgba(0, 0, 0, 0.7);
3165   --f7-block-title-font-weight: 600;
3166   --f7-block-title-line-height: 1.5;
3167   --f7-block-title-margin-bottom: 5px;
3168   --f7-block-title-medium-font-size: 20px;
3169   --f7-block-title-medium-font-weight: 600;
3170   --f7-block-title-medium-line-height: 1.4;
3171   --f7-block-title-large-font-size: 28px;
3172   --f7-block-title-large-font-weight: bold;
3173   --f7-block-title-large-line-height: 1.3;
3174   --f7-block-inset-side-margin: 15px;
3175   --f7-block-inset-border-radius: 4px;
3176   --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3177   --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3178 }
3179 .aurora .theme-dark,
3180 .aurora.theme-dark {
3181   --f7-block-title-text-color: #fff;
3182   --f7-block-header-text-color: rgba(255, 255, 255, 0.52);
3183   --f7-block-footer-text-color: rgba(255, 255, 255, 0.52);
3184   --f7-block-strong-text-color: #fff;
3185 }
3186 .block {
3187   box-sizing: border-box;
3188   position: relative;
3189   z-index: 1;
3190   color: var(--f7-block-text-color);
3191   margin: var(--f7-block-margin-vertical) 0;
3192   padding-top: 0;
3193   padding-bottom: 0;
3194   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3195   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3196   font-size: var(--f7-block-font-size);
3197 }
3198 .block.no-hairlines:before,
3199 .block.no-hairlines ul:before,
3200 .md .block.no-hairlines-md:before,
3201 .md .block.no-hairlines-md ul:before,
3202 .ios .block.no-hairlines-ios:before,
3203 .ios .block.no-hairlines-ios ul:before,
3204 .aurora .block.no-hairlines-aurora:before,
3205 .aurora .block.no-hairlines-aurora ul:before {
3206   display: none !important;
3207 }
3208 .block.no-hairlines:after,
3209 .block.no-hairlines ul:after,
3210 .md .block.no-hairlines-md:after,
3211 .md .block.no-hairlines-md ul:after,
3212 .ios .block.no-hairlines-ios:after,
3213 .ios .block.no-hairlines-ios ul:after,
3214 .aurora .block.no-hairlines-aurora:after,
3215 .aurora .block.no-hairlines-aurora ul:after {
3216   display: none !important;
3217 }
3218 .block.no-hairline-top:before,
3219 .block.no-hairline-top ul:before,
3220 .md .block.no-hairline-top-md:before,
3221 .md .block.no-hairline-top-md ul:before,
3222 .ios .block.no-hairline-top-ios:before,
3223 .ios .block.no-hairline-top-ios ul:before,
3224 .aurora .block.no-hairline-top-aurora:before,
3225 .aurora .block.no-hairline-top-aurora ul:before {
3226   display: none !important;
3227 }
3228 .block.no-hairline-bottom:after,
3229 .block.no-hairline-bottom ul:after,
3230 .md .block.no-hairline-bottom-md:after,
3231 .md .block.no-hairline-bottom-md ul:after,
3232 .ios .block.no-hairline-bottom-ios:after,
3233 .ios .block.no-hairline-bottom-ios ul:after,
3234 .aurora .block.no-hairline-bottom-aurora:after,
3235 .aurora .block.no-hairline-bottom-aurora ul:after {
3236   display: none !important;
3237 }
3238 .block > h1:first-child,
3239 .block > h2:first-child,
3240 .block > h3:first-child,
3241 .block > h4:first-child,
3242 .block > p:first-child {
3243   margin-top: 0;
3244 }
3245 .block > h1:last-child,
3246 .block > h2:last-child,
3247 .block > h3:last-child,
3248 .block > h4:last-child,
3249 .block > p:last-child {
3250   margin-bottom: 0;
3251 }
3252 .block-strong {
3253   color: var(--f7-block-strong-text-color);
3254   padding-top: var(--f7-block-padding-vertical);
3255   padding-bottom: var(--f7-block-padding-vertical);
3256   background-color: var(--f7-block-strong-bg-color);
3257 }
3258 .block-strong:before {
3259   content: '';
3260   position: absolute;
3261   background-color: var(--f7-block-strong-border-color);
3262   display: block;
3263   z-index: 15;
3264   top: 0;
3265   right: auto;
3266   bottom: auto;
3267   left: 0;
3268   height: 1px;
3269   width: 100%;
3270   transform-origin: 50% 0%;
3271   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3272 }
3273 .block-strong:after {
3274   content: '';
3275   position: absolute;
3276   background-color: var(--f7-block-strong-border-color);
3277   display: block;
3278   z-index: 15;
3279   top: auto;
3280   right: auto;
3281   bottom: 0;
3282   left: 0;
3283   height: 1px;
3284   width: 100%;
3285   transform-origin: 50% 100%;
3286   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3287 }
3288 .block-title {
3289   position: relative;
3290   overflow: hidden;
3291   margin: 0;
3292   white-space: var(--f7-block-title-white-space);
3293   text-overflow: ellipsis;
3294   text-transform: var(--f7-block-title-text-transform);
3295   color: var(--f7-block-title-text-color);
3296   font-size: var(--f7-block-title-font-size, inherit);
3297   font-weight: var(--f7-block-title-font-weight);
3298   line-height: var(--f7-block-title-line-height);
3299   margin-top: var(--f7-block-margin-vertical);
3300   margin-bottom: var(--f7-block-title-margin-bottom);
3301   margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3302   margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3303 }
3304 .block-title + .list,
3305 .block-title + .block,
3306 .block-title + .card,
3307 .block-title + .timeline,
3308 .block-title + .block-header {
3309   margin-top: 0px;
3310 }
3311 .block-title-medium {
3312   font-size: var(--f7-block-title-medium-font-size);
3313   text-transform: var(--f7-block-title-medium-text-transform);
3314   color: var(--f7-block-title-medium-text-color);
3315   font-weight: var(--f7-block-title-medium-font-weight);
3316   line-height: var(--f7-block-title-medium-line-height);
3317 }
3318 .block-title-large {
3319   font-size: var(--f7-block-title-large-font-size);
3320   text-transform: var(--f7-block-title-large-text-transform);
3321   color: var(--f7-block-title-large-text-color);
3322   font-weight: var(--f7-block-title-large-font-weight);
3323   line-height: var(--f7-block-title-large-line-height);
3324 }
3325 .block > .block-title:first-child,
3326 .list > .block-title:first-child {
3327   margin-top: 0;
3328   margin-left: 0;
3329   margin-right: 0;
3330 }
3331 .block-header {
3332   color: var(--f7-block-header-text-color);
3333   font-size: var(--f7-block-header-font-size);
3334   margin-bottom: var(--f7-block-header-margin);
3335   margin-top: var(--f7-block-margin-vertical);
3336 }
3337 .block-header + .list,
3338 .block-header + .block,
3339 .block-header + .card,
3340 .block-header + .timeline {
3341   margin-top: var(--f7-block-header-margin);
3342 }
3343 .block-footer {
3344   color: var(--f7-block-footer-text-color);
3345   font-size: var(--f7-block-footer-font-size);
3346   margin-top: var(--f7-block-footer-margin);
3347   margin-bottom: var(--f7-block-margin-vertical);
3348 }
3349 .block-footer,
3350 .block-header {
3351   padding-top: 0;
3352   padding-bottom: 0;
3353   padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3354   padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3355 }
3356 .block-footer ul:first-child,
3357 .block-header ul:first-child,
3358 .block-footer p:first-child,
3359 .block-header p:first-child,
3360 .block-footer h1:first-child,
3361 .block-header h1:first-child,
3362 .block-footer h2:first-child,
3363 .block-header h2:first-child,
3364 .block-footer h3:first-child,
3365 .block-header h3:first-child,
3366 .block-footer h4:first-child,
3367 .block-header h4:first-child {
3368   margin-top: 0;
3369 }
3370 .block-footer ul:last-child,
3371 .block-header ul:last-child,
3372 .block-footer p:last-child,
3373 .block-header p:last-child,
3374 .block-footer h1:last-child,
3375 .block-header h1:last-child,
3376 .block-footer h2:last-child,
3377 .block-header h2:last-child,
3378 .block-footer h3:last-child,
3379 .block-header h3:last-child,
3380 .block-footer h4:last-child,
3381 .block-header h4:last-child {
3382   margin-bottom: 0;
3383 }
3384 .block-footer ul:first-child:last-child,
3385 .block-header ul:first-child:last-child,
3386 .block-footer p:first-child:last-child,
3387 .block-header p:first-child:last-child,
3388 .block-footer h1:first-child:last-child,
3389 .block-header h1:first-child:last-child,
3390 .block-footer h2:first-child:last-child,
3391 .block-header h2:first-child:last-child,
3392 .block-footer h3:first-child:last-child,
3393 .block-header h3:first-child:last-child,
3394 .block-footer h4:first-child:last-child,
3395 .block-header h4:first-child:last-child {
3396   margin-top: 0;
3397   margin-bottom: 0;
3398 }
3399 .list .block-header,
3400 .block .block-header,
3401 .card .block-header,
3402 .timeline .block-header {
3403   margin-top: 0;
3404 }
3405 .list .block-footer,
3406 .block .block-footer,
3407 .card .block-footer,
3408 .timeline .block-footer {
3409   margin-bottom: 0;
3410 }
3411 .list + .block-footer,
3412 .block + .block-footer,
3413 .card + .block-footer,
3414 .timeline + .block-footer {
3415   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3416 }
3417 .block + .block-footer {
3418   margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3419   margin-bottom: var(--f7-block-margin-vertical);
3420 }
3421 .block .block-header,
3422 .block .block-footer {
3423   padding: 0;
3424 }
3425 .block.inset {
3426   border-radius: var(--f7-block-inset-border-radius);
3427   margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3428   margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3429   --f7-safe-area-left: 0px;
3430   --f7-safe-area-right: 0px;
3431 }
3432 .block-strong.inset:before {
3433   display: none !important;
3434 }
3435 .block-strong.inset:after {
3436   display: none !important;
3437 }
3438 @media (min-width: 768px) {
3439   .block.tablet-inset {
3440     border-radius: var(--f7-block-inset-border-radius);
3441     margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3442     margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3443     --f7-safe-area-left: 0px;
3444     --f7-safe-area-right: 0px;
3445   }
3446   .block-strong.tablet-inset:before {
3447     display: none !important;
3448   }
3449   .block-strong.tablet-inset:after {
3450     display: none !important;
3451   }
3452 }
3453 /* === List View === */
3454 :root {
3455   --f7-list-bg-color: #fff;
3456   --f7-list-item-text-max-lines: 2;
3457   --f7-list-chevron-icon-color: #c7c7cc;
3458   --f7-list-chevron-icon-font-size: 20px;
3459   --f7-list-item-title-font-size: inherit;
3460   --f7-list-item-title-font-weight: 400;
3461   --f7-list-item-title-text-color: inherit;
3462   --f7-list-item-title-line-height: inherit;
3463   --f7-list-item-title-white-space: nowrap;
3464   --f7-list-item-subtitle-font-weight: 400;
3465   --f7-list-item-subtitle-text-color: inherit;
3466   --f7-list-item-subtitle-line-height: inherit;
3467   --f7-list-item-text-font-weight: 400;
3468   --f7-list-item-after-font-weight: 400;
3469   --f7-list-item-header-text-color: inherit;
3470   --f7-list-item-header-font-size: 12px;
3471   --f7-list-item-header-font-weight: 400;
3472   --f7-list-item-header-line-height: 1.2;
3473   --f7-list-item-footer-font-size: 12px;
3474   --f7-list-item-footer-font-weight: 400;
3475   --f7-list-item-footer-line-height: 1.2;
3476   --f7-list-button-font-size: inherit;
3477   --f7-list-button-font-weight: 400;
3478   --f7-list-item-divider-line-height: inherit;
3479   --f7-list-group-title-line-height: inherit;
3480 }
3481 :root .theme-dark,
3482 :root.theme-dark {
3483   --f7-list-bg-color: #1c1c1d;
3484   --f7-list-border-color: #282829;
3485   --f7-list-item-border-color: #282829;
3486   --f7-list-item-divider-border-color: #282829;
3487   --f7-list-item-divider-bg-color: #232323;
3488   --f7-list-group-title-bg-color: #232323;
3489   --f7-list-chevron-icon-color: #434345;
3490 }
3491 .ios {
3492   --f7-list-in-list-padding-left: 30px;
3493   --f7-list-inset-side-margin: 15px;
3494   --f7-list-inset-border-radius: 7px;
3495   --f7-list-margin-vertical: 35px;
3496   --f7-list-font-size: 17px;
3497   --f7-list-chevron-icon-area: 20px;
3498   --f7-list-border-color: #c8c7cc;
3499   --f7-list-item-border-color: #c8c7cc;
3500   --f7-list-link-pressed-bg-color: #d9d9d9;
3501   --f7-list-item-subtitle-font-size: 15px;
3502   --f7-list-item-text-font-size: 15px;
3503   --f7-list-item-text-text-color: #8e8e93;
3504   --f7-list-item-text-line-height: 21px;
3505   --f7-list-item-after-font-size: inherit;
3506   --f7-list-item-after-text-color: #8e8e93;
3507   --f7-list-item-after-line-height: inherit;
3508   --f7-list-item-after-padding: 5px;
3509   --f7-list-item-footer-text-color: #8e8e93;
3510   --f7-list-item-min-height: 44px;
3511   --f7-list-item-media-margin: 15px;
3512   --f7-list-item-media-icons-margin: 5px;
3513   --f7-list-item-cell-margin: 15px;
3514   --f7-list-item-padding-vertical: 8px;
3515   --f7-list-item-padding-horizontal: 15px;
3516   --f7-list-media-item-padding-vertical: 10px;
3517   --f7-list-media-item-padding-horizontal: 15px;
3518   --f7-list-media-item-title-font-weight: 600;
3519   /*
3520   --f7-list-button-text-color: var(--f7-theme-color);
3521   */
3522   --f7-list-button-text-align: center;
3523   --f7-list-button-border-color: #c8c7cc;
3524   --f7-list-button-pressed-bg-color: #d9d9d9;
3525   --f7-list-item-divider-height: 31px;
3526   --f7-list-item-divider-text-color: #8e8e93;
3527   --f7-list-item-divider-font-size: inherit;
3528   --f7-list-item-divider-font-weight: 400;
3529   --f7-list-item-divider-bg-color: #f7f7f7;
3530   --f7-list-item-divider-border-color: #c8c7cc;
3531   --f7-list-group-title-height: 31px;
3532   --f7-list-group-title-text-color: #8e8e93;
3533   --f7-list-group-title-font-size: inherit;
3534   --f7-list-group-title-font-weight: 400;
3535   --f7-list-group-title-bg-color: #f7f7f7;
3536 }
3537 .ios .theme-dark,
3538 .ios.theme-dark {
3539   --f7-list-button-border-color: #282829;
3540   --f7-list-link-pressed-bg-color: #363636;
3541   --f7-list-button-pressed-bg-color: #363636;
3542 }
3543 .md {
3544   --f7-list-in-list-padding-left: 40px;
3545   --f7-list-inset-side-margin: 16px;
3546   --f7-list-inset-border-radius: 4px;
3547   --f7-list-margin-vertical: 32px;
3548   --f7-list-font-size: 16px;
3549   --f7-list-chevron-icon-area: 26px;
3550   --f7-list-border-color: rgba(0, 0, 0, 0.12);
3551   --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3552   --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3553   --f7-list-item-subtitle-font-size: 14px;
3554   --f7-list-item-text-font-size: 14px;
3555   --f7-list-item-text-text-color: #757575;
3556   --f7-list-item-text-line-height: 20px;
3557   --f7-list-item-after-font-size: 14px;
3558   --f7-list-item-after-text-color: #757575;
3559   --f7-list-item-after-line-height: inherit;
3560   --f7-list-item-after-padding: 8px;
3561   --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3562   --f7-list-item-min-height: 48px;
3563   --f7-list-item-media-margin: 16px;
3564   --f7-list-item-media-icons-margin: 8px;
3565   --f7-list-item-cell-margin: 16px;
3566   --f7-list-item-padding-vertical: 8px;
3567   --f7-list-item-padding-horizontal: 16px;
3568   --f7-list-media-item-padding-vertical: 14px;
3569   --f7-list-media-item-padding-horizontal: 16px;
3570   /*
3571   --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
3572   */
3573   --f7-list-button-text-color: #212121;
3574   --f7-list-button-text-align: left;
3575   --f7-list-button-border-color: transparent;
3576   --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3577   --f7-list-item-divider-height: 48px;
3578   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3579   --f7-list-item-divider-font-size: 14px;
3580   --f7-list-item-divider-font-weight: 400;
3581   --f7-list-item-divider-bg-color: #f4f4f4;
3582   --f7-list-item-divider-border-color: transparent;
3583   --f7-list-group-title-height: 48px;
3584   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3585   --f7-list-group-title-font-size: 14px;
3586   --f7-list-group-title-font-weight: 400;
3587   --f7-list-group-title-bg-color: #f4f4f4;
3588 }
3589 .md .theme-dark,
3590 .md.theme-dark {
3591   --f7-list-button-text-color: #fff;
3592   --f7-list-item-divider-text-color: #fff;
3593   --f7-list-group-title-text-color: #fff;
3594   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3595   --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3596   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3597   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3598   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3599 }
3600 .aurora {
3601   --f7-list-in-list-padding-left: 15px;
3602   --f7-list-inset-side-margin: 15px;
3603   --f7-list-inset-border-radius: 4px;
3604   --f7-list-margin-vertical: 15px;
3605   --f7-list-font-size: 14px;
3606   --f7-list-chevron-icon-area: 15px;
3607   --f7-list-chevron-icon-font-size: 16px;
3608   --f7-list-border-color: rgba(0, 0, 0, 0.12);
3609   --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3610   --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3611   --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
3612   --f7-list-item-title-line-height: 1.3;
3613   --f7-list-item-subtitle-font-size: 14px;
3614   --f7-list-item-subtitle-line-height: 1.3;
3615   --f7-list-item-text-font-size: 12px;
3616   --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
3617   --f7-list-item-text-line-height: 16px;
3618   --f7-list-item-after-font-size: 13px;
3619   --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
3620   --f7-list-item-after-line-height: 1.2;
3621   --f7-list-item-after-padding: 5px;
3622   --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
3623   --f7-list-item-min-height: 32px;
3624   --f7-list-item-media-margin: 10px;
3625   --f7-list-item-media-icons-margin: 5px;
3626   --f7-list-item-cell-margin: 15px;
3627   --f7-list-item-padding-vertical: 5px;
3628   --f7-list-item-padding-horizontal: 15px;
3629   --f7-list-media-item-padding-vertical: 5px;
3630   --f7-list-media-item-padding-horizontal: 15px;
3631   --f7-list-media-item-title-font-weight: 600;
3632   /*
3633   --f7-list-button-text-color: var(--f7-theme-color);
3634   */
3635   --f7-list-button-text-align: center;
3636   --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
3637   --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3638   --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
3639   --f7-list-item-divider-height: 19px;
3640   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
3641   --f7-list-item-divider-font-size: inherit;
3642   --f7-list-item-divider-font-weight: 500;
3643   --f7-list-item-divider-bg-color: #f7f7f7;
3644   --f7-list-item-divider-border-color: transparent;
3645   --f7-list-group-title-height: 19px;
3646   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
3647   --f7-list-group-title-font-size: inherit;
3648   --f7-list-group-title-font-weight: 500;
3649   --f7-list-group-title-bg-color: #f7f7f7;
3650 }
3651 .aurora .theme-dark,
3652 .aurora.theme-dark {
3653   --f7-list-button-border-color: #282829;
3654   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.52);
3655   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.52);
3656   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.52);
3657   --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
3658   --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
3659   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3660   --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
3661   --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3662   --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
3663 }
3664 .list {
3665   position: relative;
3666   z-index: 1;
3667   font-size: var(--f7-list-font-size);
3668   margin: var(--f7-list-margin-vertical) 0;
3669 }
3670 .list ul {
3671   list-style: none;
3672   margin: 0;
3673   padding: 0;
3674   position: relative;
3675   background: var(--f7-list-bg-color);
3676 }
3677 .list ul:before {
3678   content: '';
3679   position: absolute;
3680   background-color: var(--f7-list-border-color);
3681   display: block;
3682   z-index: 15;
3683   top: 0;
3684   right: auto;
3685   bottom: auto;
3686   left: 0;
3687   height: 1px;
3688   width: 100%;
3689   transform-origin: 50% 0%;
3690   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3691 }
3692 .list ul:after {
3693   content: '';
3694   position: absolute;
3695   background-color: var(--f7-list-border-color);
3696   display: block;
3697   z-index: 15;
3698   top: auto;
3699   right: auto;
3700   bottom: 0;
3701   left: 0;
3702   height: 1px;
3703   width: 100%;
3704   transform-origin: 50% 100%;
3705   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3706 }
3707 .list ul ul {
3708   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
3709 }
3710 .list ul ul:before {
3711   display: none !important;
3712 }
3713 .list ul ul:after {
3714   display: none !important;
3715 }
3716 .list li {
3717   position: relative;
3718   box-sizing: border-box;
3719 }
3720 .list .item-media {
3721   display: flex;
3722   flex-shrink: 0;
3723   flex-wrap: nowrap;
3724   align-items: center;
3725   box-sizing: border-box;
3726   padding-bottom: var(--f7-list-item-padding-vertical);
3727   padding-top: var(--f7-list-item-padding-vertical);
3728 }
3729 .list .item-media + .item-inner {
3730   margin-right: var(--f7-list-item-media-margin);
3731 }
3732 .list .item-media i + i,
3733 .list .item-media i + img {
3734   margin-right: var(--f7-list-item-media-icons-margin);
3735 }
3736 .list .item-after {
3737   padding-right: var(--f7-list-item-after-padding);
3738 }
3739 .list .item-inner {
3740   position: relative;
3741   width: 100%;
3742   min-width: 0;
3743   display: flex;
3744   justify-content: space-between;
3745   box-sizing: border-box;
3746   align-items: center;
3747   align-self: stretch;
3748   padding-top: var(--f7-list-item-padding-vertical);
3749   padding-bottom: var(--f7-list-item-padding-vertical);
3750   min-height: var(--f7-list-item-min-height);
3751   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3752 }
3753 .list .item-title {
3754   min-width: 0;
3755   flex-shrink: 1;
3756   white-space: var(--f7-list-item-title-white-space);
3757   position: relative;
3758   overflow: hidden;
3759   text-overflow: ellipsis;
3760   max-width: 100%;
3761   font-size: var(--f7-list-item-title-font-size);
3762   font-weight: var(--f7-list-item-title-font-weight);
3763   color: var(--f7-list-item-title-text-color);
3764   line-height: var(--f7-list-item-title-line-height);
3765 }
3766 .list .item-after {
3767   white-space: nowrap;
3768   flex-shrink: 0;
3769   display: flex;
3770   font-size: var(--f7-list-item-after-font-size);
3771   font-weight: var(--f7-list-item-after-font-weight);
3772   color: var(--f7-list-item-after-text-color);
3773   line-height: var(--f7-list-item-after-line-height);
3774   margin-right: auto;
3775 }
3776 .list .item-header,
3777 .list .item-footer {
3778   white-space: normal;
3779 }
3780 .list .item-header {
3781   color: var(--f7-list-item-header-text-color);
3782   font-size: var(--f7-list-item-header-font-size);
3783   font-weight: var(--f7-list-item-header-font-weight);
3784   line-height: var(--f7-list-item-header-line-height);
3785 }
3786 .list .item-footer {
3787   color: var(--f7-list-item-footer-text-color);
3788   font-size: var(--f7-list-item-footer-font-size);
3789   font-weight: var(--f7-list-item-footer-font-weight);
3790   line-height: var(--f7-list-item-footer-line-height);
3791 }
3792 .list .item-link,
3793 .list .list-button {
3794   transition-duration: 300ms;
3795   transition-property: background-color;
3796   display: block;
3797   position: relative;
3798   overflow: hidden;
3799   z-index: 0;
3800 }
3801 .list .item-link {
3802   color: inherit;
3803 }
3804 .list .item-link.active-state {
3805   background-color: var(--f7-list-link-pressed-bg-color);
3806 }
3807 .list .item-link .item-inner {
3808   padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3809 }
3810 .list .item-content {
3811   display: flex;
3812   justify-content: space-between;
3813   box-sizing: border-box;
3814   align-items: center;
3815   min-height: var(--f7-list-item-min-height);
3816   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3817 }
3818 .list .item-subtitle {
3819   position: relative;
3820   overflow: hidden;
3821   white-space: nowrap;
3822   max-width: 100%;
3823   text-overflow: ellipsis;
3824   font-size: var(--f7-list-item-subtitle-font-size);
3825   font-weight: var(--f7-list-item-subtitle-font-weight);
3826   color: var(--f7-list-item-subtitle-text-color);
3827   line-height: var(--f7-list-item-subtitle-line-height);
3828 }
3829 .list .item-text {
3830   position: relative;
3831   overflow: hidden;
3832   text-overflow: hidden;
3833   -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3834   display: -webkit-box;
3835   font-size: var(--f7-list-item-text-font-size);
3836   font-weight: var(--f7-list-item-text-font-weight);
3837   color: var(--f7-list-item-text-text-color);
3838   line-height: var(--f7-list-item-text-line-height);
3839   max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3840 }
3841 .list .item-title-row {
3842   position: relative;
3843   display: flex;
3844   justify-content: space-between;
3845   box-sizing: border-box;
3846 }
3847 .list .item-title-row .item-after {
3848   align-self: center;
3849 }
3850 .list .item-row {
3851   display: flex;
3852   justify-content: space-between;
3853   box-sizing: border-box;
3854 }
3855 .list .item-cell {
3856   display: block;
3857   align-self: center;
3858   box-sizing: border-box;
3859   width: 100%;
3860   min-width: 0;
3861   margin-right: var(--f7-list-item-cell-margin);
3862   flex-shrink: 1;
3863 }
3864 .list .item-cell:first-child {
3865   margin-right: 0;
3866 }
3867 .list li:last-child .list-button:after {
3868   display: none !important;
3869 }
3870 .list li:last-child > .item-inner:after,
3871 .list li:last-child li:last-child > .item-inner:after,
3872 .list li:last-child > .item-content > .item-inner:after,
3873 .list li:last-child li:last-child > .item-content > .item-inner:after,
3874 .list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3875 .list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3876 .list li:last-child > .item-link > .item-content > .item-inner:after,
3877 .list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3878   display: none !important;
3879 }
3880 .list li li:last-child .item-inner:after,
3881 .list li:last-child li .item-inner:after {
3882   content: '';
3883   position: absolute;
3884   background-color: var(--f7-list-item-border-color);
3885   display: block;
3886   z-index: 15;
3887   top: auto;
3888   right: auto;
3889   bottom: 0;
3890   left: 0;
3891   height: 1px;
3892   width: 100%;
3893   transform-origin: 50% 100%;
3894   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3895 }
3896 .list.no-hairlines:before,
3897 .list.no-hairlines ul:before,
3898 .md .list.no-hairlines-md:before,
3899 .md .list.no-hairlines-md ul:before,
3900 .ios .list.no-hairlines-ios:before,
3901 .ios .list.no-hairlines-ios ul:before,
3902 .aurora .list.no-hairlines-aurora:before,
3903 .aurora .list.no-hairlines-aurora ul:before {
3904   display: none !important;
3905 }
3906 .list.no-hairlines:after,
3907 .list.no-hairlines ul:after,
3908 .md .list.no-hairlines-md:after,
3909 .md .list.no-hairlines-md ul:after,
3910 .ios .list.no-hairlines-ios:after,
3911 .ios .list.no-hairlines-ios ul:after,
3912 .aurora .list.no-hairlines-aurora:after,
3913 .aurora .list.no-hairlines-aurora ul:after {
3914   display: none !important;
3915 }
3916 .list.no-hairline-top:before,
3917 .list.no-hairline-top ul:before,
3918 .md .list.no-hairline-top-md:before,
3919 .md .list.no-hairline-top-md ul:before,
3920 .ios .list.no-hairline-top-ios:before,
3921 .ios .list.no-hairline-top-ios ul:before,
3922 .aurora .list.no-hairline-top-aurora:before,
3923 .aurora .list.no-hairline-top-aurora ul:before {
3924   display: none !important;
3925 }
3926 .list.no-hairline-bottom:after,
3927 .list.no-hairline-bottom ul:after,
3928 .md .list.no-hairline-bottom-md:after,
3929 .md .list.no-hairline-bottom-md ul:after,
3930 .ios .list.no-hairline-bottom-ios:after,
3931 .ios .list.no-hairline-bottom-ios ul:after,
3932 .aurora .list.no-hairline-bottom-aurora:after,
3933 .aurora .list.no-hairline-bottom-aurora ul:after {
3934   display: none !important;
3935 }
3936 .list.no-hairlines-between .item-inner:after,
3937 .md .list.no-hairlines-between-md .item-inner:after,
3938 .ios .list.no-hairlines-between-ios .item-inner:after,
3939 .aurora .list.no-hairlines-between-aurora .item-inner:after,
3940 .list.no-hairlines-between .list-button:after,
3941 .md .list.no-hairlines-between-md .list-button:after,
3942 .ios .list.no-hairlines-between-ios .list-button:after,
3943 .aurora .list.no-hairlines-between-aurora .list-button:after,
3944 .list.no-hairlines-between .item-divider:after,
3945 .md .list.no-hairlines-between-md .item-divider:after,
3946 .ios .list.no-hairlines-between-ios .item-divider:after,
3947 .aurora .list.no-hairlines-between-aurora .item-divider:after,
3948 .list.no-hairlines-between .list-group-title:after,
3949 .md .list.no-hairlines-between-md .list-group-title:after,
3950 .ios .list.no-hairlines-between-ios .list-group-title:after,
3951 .aurora .list.no-hairlines-between-aurora .list-group-title:after,
3952 .list.no-hairlines-between .list-group-title:after,
3953 .md .list.no-hairlines-between-md .list-group-title:after,
3954 .ios .list.no-hairlines-between-ios .list-group-title:after,
3955 .aurora .list.no-hairlines-between-aurora .list-group-title:after {
3956   display: none !important;
3957 }
3958 .list.no-hairlines-between.simple-list li:after,
3959 .md .list.no-hairlines-between-md.simple-list li:after,
3960 .ios .list.no-hairlines-between-ios.simple-list li:after,
3961 .aurora .list.no-hairlines-between-aurora.simple-list li:after {
3962   display: none !important;
3963 }
3964 .list.no-hairlines-between.links-list a:after,
3965 .md .list.no-hairlines-between-md.links-list a:after,
3966 .ios .list.no-hairlines-between-ios.links-list a:after,
3967 .aurora .list.no-hairlines-between-aurora.links-list a:after {
3968   display: none !important;
3969 }
3970 .list-button {
3971   padding: 0 var(--f7-list-item-padding-horizontal);
3972   line-height: var(--f7-list-item-min-height);
3973   color: var(--f7-list-button-text-color, var(--f7-theme-color));
3974   font-size: var(--f7-list-button-font-size);
3975   font-weight: var(--f7-list-button-font-weight);
3976   text-align: var(--f7-list-button-text-align);
3977 }
3978 .list-button:after {
3979   content: '';
3980   position: absolute;
3981   background-color: var(--f7-list-button-border-color);
3982   display: block;
3983   z-index: 15;
3984   top: auto;
3985   right: auto;
3986   bottom: 0;
3987   left: 0;
3988   height: 1px;
3989   width: 100%;
3990   transform-origin: 50% 100%;
3991   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3992 }
3993 .list-button.active-state {
3994   background-color: var(--f7-list-button-pressed-bg-color);
3995 }
3996 .list-button[class*="color-"] {
3997   --f7-list-button-text-color: var(--f7-theme-color);
3998 }
3999 .simple-list li {
4000   position: relative;
4001   white-space: nowrap;
4002   text-overflow: ellipsis;
4003   max-width: 100%;
4004   box-sizing: border-box;
4005   display: flex;
4006   justify-content: space-between;
4007   align-items: center;
4008   align-content: center;
4009   line-height: var(--f7-list-item-min-height);
4010   height: var(--f7-list-item-min-height);
4011   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4012   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4013 }
4014 .simple-list li:after {
4015   left: var(--f7-list-item-padding-horizontal);
4016   right: 0;
4017   width: auto;
4018   right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4019   left: 0;
4020 }
4021 .simple-list li:last-child:after {
4022   display: none !important;
4023 }
4024 .links-list li {
4025   z-index: 1;
4026 }
4027 .links-list a {
4028   transition-duration: 300ms;
4029   transition-property: background-color;
4030   display: block;
4031   position: relative;
4032   overflow: hidden;
4033   display: flex;
4034   align-items: center;
4035   align-content: center;
4036   justify-content: space-between;
4037   box-sizing: border-box;
4038   white-space: nowrap;
4039   text-overflow: ellipsis;
4040   max-width: 100%;
4041   height: var(--f7-list-item-min-height);
4042   color: inherit;
4043 }
4044 .links-list a .ripple-wave {
4045   z-index: 0;
4046 }
4047 .links-list a:after {
4048   width: auto;
4049 }
4050 .links-list a.active-state {
4051   background-color: var(--f7-list-link-pressed-bg-color);
4052 }
4053 .links-list a {
4054   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4055   padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4056 }
4057 .links-list a:after {
4058   right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4059   left: 0;
4060 }
4061 .links-list li:last-child a:after {
4062   display: none !important;
4063 }
4064 .simple-list li:after,
4065 .links-list a:after,
4066 .list .item-inner:after {
4067   content: '';
4068   position: absolute;
4069   background-color: var(--f7-list-item-border-color);
4070   display: block;
4071   z-index: 15;
4072   top: auto;
4073   right: auto;
4074   bottom: 0;
4075   left: 0;
4076   height: 1px;
4077   width: 100%;
4078   transform-origin: 50% 100%;
4079   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4080 }
4081 .media-list,
4082 li.media-item {
4083   --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
4084   --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
4085 }
4086 .media-list .item-title,
4087 li.media-item .item-title {
4088   font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
4089 }
4090 .media-list .item-inner,
4091 li.media-item .item-inner {
4092   display: block;
4093   align-self: stretch;
4094 }
4095 .media-list .item-media,
4096 li.media-item .item-media {
4097   align-self: flex-start;
4098 }
4099 .media-list .item-media img,
4100 li.media-item .item-media img {
4101   display: block;
4102 }
4103 .media-list .item-link .item-inner,
4104 li.media-item .item-link .item-inner {
4105   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4106 }
4107 .media-list .item-link .item-title-row,
4108 li.media-item .item-link .item-title-row {
4109   padding-left: calc(var(--f7-list-chevron-icon-area));
4110 }
4111 .media-list.chevron-center .item-link .item-inner,
4112 .media-list .chevron-center .item-link .item-inner,
4113 .media-list .item-link.chevron-center .item-inner,
4114 li.media-item.chevron-center .item-link .item-inner,
4115 li.media-item .item-link.chevron-center .item-inner,
4116 li.media-item .chevron-center .item-link .item-inner {
4117   padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4118 }
4119 .media-list.chevron-center .item-title-row,
4120 .media-list .chevron-center .item-title-row,
4121 li.media-item.chevron-center .item-title-row,
4122 li.media-item .chevron-center .item-title-row {
4123   padding-left: 0;
4124 }
4125 .list .item-link .item-inner:before,
4126 .links-list a:before,
4127 .media-list .item-link .item-title-row:before,
4128 li.media-item .item-link .item-title-row:before,
4129 .media-list.chevron-center .item-link .item-inner:before,
4130 .media-list .chevron-center .item-link .item-inner:before,
4131 .media-list .item-link.chevron-center .item-inner:before,
4132 li.media-item.chevron-center .item-link .item-inner:before,
4133 li.media-item .chevron-center .item-link .item-inner:before,
4134 li.media-item .item-link.chevron-center .item-inner:before {
4135   font-family: 'framework7-core-icons';
4136   font-weight: normal;
4137   font-style: normal;
4138   line-height: 1;
4139   letter-spacing: normal;
4140   text-transform: none;
4141   white-space: nowrap;
4142   word-wrap: normal;
4143   direction: ltr;
4144   -webkit-font-smoothing: antialiased;
4145   text-rendering: optimizeLegibility;
4146   -moz-osx-font-smoothing: grayscale;
4147   -moz-font-feature-settings: "liga";
4148        font-feature-settings: "liga";
4149   text-align: center;
4150   display: block;
4151   width: 100%;
4152   height: 100%;
4153   font-size: 20px;
4154   position: absolute;
4155   top: 50%;
4156   width: 8px;
4157   height: 14px;
4158   margin-top: -7px;
4159   font-size: var(--f7-list-chevron-icon-font-size);
4160   line-height: 14px;
4161   color: var(--f7-list-chevron-icon-color);
4162   pointer-events: none;
4163   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4164   content: 'chevron_left';
4165 }
4166 .media-list.chevron-center .item-title-row:before,
4167 .media-list .chevron-center .item-title-row:before,
4168 li.media-item.chevron-center .item-title-row:before,
4169 li.media-item .chevron-center .item-title-row:before {
4170   display: none;
4171 }
4172 .media-list .item-link .item-inner:before,
4173 li.media-item .item-link .item-inner:before {
4174   display: none;
4175 }
4176 .media-list .item-link .item-title-row:before,
4177 li.media-item .item-link .item-title-row:before {
4178   left: 0;
4179 }
4180 .list-group ul:after,
4181 .list-group ul:before {
4182   z-index: 25 !important;
4183 }
4184 .list-group + .list-group ul:before {
4185   display: none !important;
4186 }
4187 li.item-divider,
4188 .item-divider,
4189 li.list-group-title {
4190   white-space: nowrap;
4191   position: relative;
4192   max-width: 100%;
4193   text-overflow: ellipsis;
4194   overflow: hidden;
4195   z-index: 15;
4196   padding-top: 0;
4197   padding-bottom: 0;
4198   padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4199   padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4200   box-sizing: border-box;
4201   display: flex;
4202   align-items: center;
4203   align-content: center;
4204 }
4205 li.item-divider:after,
4206 .item-divider:after,
4207 li.list-group-title:after {
4208   display: none !important;
4209 }
4210 li.item-divider,
4211 .item-divider {
4212   margin-top: -1px;
4213   height: var(--f7-list-item-divider-height);
4214   color: var(--f7-list-item-divider-text-color);
4215   font-size: var(--f7-list-item-divider-font-size);
4216   font-weight: var(--f7-list-item-divider-font-weight);
4217   background-color: var(--f7-list-item-divider-bg-color);
4218   line-height: var(--f7-list-item-divider-line-height);
4219 }
4220 li.item-divider:before,
4221 .item-divider:before {
4222   content: '';
4223   position: absolute;
4224   background-color: var(--f7-list-item-divider-border-color);
4225   display: block;
4226   z-index: 15;
4227   top: 0;
4228   right: auto;
4229   bottom: auto;
4230   left: 0;
4231   height: 1px;
4232   width: 100%;
4233   transform-origin: 50% 0%;
4234   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4235 }
4236 li.list-group-title,
4237 .list li.list-group-title {
4238   position: relative;
4239   position: -webkit-sticky;
4240   position: sticky;
4241   top: 0;
4242   margin-top: 0;
4243   z-index: 20;
4244   height: var(--f7-list-group-title-height);
4245   color: var(--f7-list-group-title-text-color);
4246   font-size: var(--f7-list-group-title-font-size);
4247   font-weight: var(--f7-list-group-title-font-weight);
4248   background-color: var(--f7-list-group-title-bg-color);
4249   line-height: var(--f7-list-group-title-line-height);
4250 }
4251 .page-with-navbar-large li.list-group-title,
4252 .page-with-navbar-large .list li.list-group-title {
4253   top: calc(-1 * var(--f7-navbar-large-title-height));
4254 }
4255 .list.inset {
4256   margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4257   margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4258   border-radius: var(--f7-list-inset-border-radius);
4259   --f7-safe-area-left: 0px;
4260   --f7-safe-area-right: 0px;
4261 }
4262 .list.inset .block-title {
4263   margin-left: 0;
4264   margin-right: 0;
4265 }
4266 .list.inset ul {
4267   border-radius: var(--f7-list-inset-border-radius);
4268 }
4269 .list.inset ul:before {
4270   display: none !important;
4271 }
4272 .list.inset ul:after {
4273   display: none !important;
4274 }
4275 .list.inset li.swipeout:first-child,
4276 .list.inset li:first-child > a {
4277   border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4278 }
4279 .list.inset li.swipeout:last-child,
4280 .list.inset li:last-child > a {
4281   border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4282 }
4283 .list.inset li.swipeout:first-child:last-child,
4284 .list.inset li:first-child:last-child > a {
4285   border-radius: var(--f7-list-inset-border-radius);
4286 }
4287 @media (min-width: 768px) {
4288   .list.tablet-inset {
4289     margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4290     margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4291     border-radius: var(--f7-list-inset-border-radius);
4292     --f7-safe-area-left: 0px;
4293     --f7-safe-area-right: 0px;
4294   }
4295   .list.tablet-inset .block-title {
4296     margin-left: 0;
4297     margin-right: 0;
4298   }
4299   .list.tablet-inset ul {
4300     border-radius: var(--f7-list-inset-border-radius);
4301   }
4302   .list.tablet-inset ul:before {
4303     display: none !important;
4304   }
4305   .list.tablet-inset ul:after {
4306     display: none !important;
4307   }
4308   .list.tablet-inset li:first-child > a {
4309     border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4310   }
4311   .list.tablet-inset li:last-child > a {
4312     border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4313   }
4314   .list.tablet-inset li:first-child:last-child > a {
4315     border-radius: var(--f7-list-inset-border-radius);
4316   }
4317 }
4318 .list.no-chevron,
4319 .list .no-chevron {
4320   --f7-list-chevron-icon-color: transparent;
4321   --f7-list-chevron-icon-area: 0px;
4322 }
4323 .ios .item-link.active-state .item-inner:after,
4324 .ios .list-button.active-state:after,
4325 .ios .links-list a.active-state:after {
4326   background-color: transparent;
4327 }
4328 .ios .links-list a.active-state,
4329 .ios .list .item-link.active-state,
4330 .ios .list .list-button.active-state {
4331   transition-duration: 0ms;
4332 }
4333 .md .list .item-media {
4334   min-width: 40px;
4335 }
4336 .aurora .list .item-media {
4337   min-width: 18px;
4338 }
4339 .aurora .list .item-link .item-inner:before,
4340 .aurora .links-list a:before,
4341 .aurora .media-list .item-link .item-title-row:before,
4342 .aurora li.media-item .item-link .item-title-row:before,
4343 .aurora .media-list.chevron-center .item-link .item-inner:before,
4344 .aurora .media-list .chevron-center .item-link .item-inner:before,
4345 .aurora .media-list .item-link.chevron-center .item-inner:before,
4346 .aurora li.media-item.chevron-center .item-link .item-inner:before,
4347 .aurora li.media-item .chevron-center .item-link .item-inner:before,
4348 .aurora li.media-item .item-link.chevron-center .item-inner:before {
4349   content: 'chevron_left_aurora';
4350 }
4351 .aurora .links-list a,
4352 .aurora .list .item-link,
4353 .aurora .list .list-button {
4354   transition-duration: 0ms;
4355 }
4356 .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
4357 .aurora.device-desktop .list .item-link:hover:not(.active-state):not(.no-hover) {
4358   background: var(--f7-list-link-hover-bg-color);
4359 }
4360 .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
4361   background: var(--f7-list-button-hover-bg-color);
4362 }
4363 /* === Badge === */
4364 :root {
4365   --f7-badge-text-color: #fff;
4366   --f7-badge-bg-color: #8e8e93;
4367   --f7-badge-padding: 0 4px;
4368   --f7-badge-in-icon-size: 16px;
4369   --f7-badge-in-icon-font-size: 10px;
4370   --f7-badge-font-weight: normal;
4371   --f7-badge-font-size: 12px;
4372 }
4373 .ios {
4374   --f7-badge-size: 20px;
4375 }
4376 .md {
4377   --f7-badge-size: 18px;
4378 }
4379 .aurora {
4380   --f7-badge-size: 18px;
4381   --f7-badge-font-weight: 600;
4382   --f7-badge-in-icon-size: 15px;
4383 }
4384 .badge {
4385   display: inline-flex;
4386   align-items: center;
4387   align-content: center;
4388   justify-content: center;
4389   color: var(--f7-badge-text-color);
4390   background: var(--f7-badge-bg-color);
4391   position: relative;
4392   box-sizing: border-box;
4393   text-align: center;
4394   vertical-align: middle;
4395   font-weight: var(--f7-badge-font-weight);
4396   font-size: var(--f7-badge-font-size);
4397   border-radius: var(--f7-badge-size);
4398   padding: var(--f7-badge-padding);
4399   height: var(--f7-badge-size);
4400   min-width: var(--f7-badge-size);
4401 }
4402 .icon .badge,
4403 .f7-icons .badge,
4404 .framework7-icons .badge,
4405 .material-icons .badge {
4406   position: absolute;
4407   left: 100%;
4408   margin-left: -10px;
4409   top: -2px;
4410   font-family: var(--f7-font-family);
4411   --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
4412   --f7-badge-size: var(--f7-badge-in-icon-size);
4413 }
4414 .badge[class*="color-"] {
4415   --f7-badge-bg-color: var(--f7-theme-color);
4416 }
4417 :root {
4418   --f7-button-font-size: 14px;
4419   --f7-button-min-width: 32px;
4420   --f7-button-bg-color: transparent;
4421   --f7-button-border-width: 0px;
4422   /*
4423   --f7-button-text-color: var(--f7-theme-color);
4424   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
4425   --f7-button-border-color: var(--f7-theme-color);
4426   --f7-button-fill-text-color: #fff;
4427   --f7-button-fill-bg-color: var(--f7-theme-color);
4428   --f7-button-outline-border-color: var(--f7-theme-color);
4429   */
4430   --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
4431   --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
4432   --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
4433 }
4434 .ios {
4435   --f7-button-height: 29px;
4436   --f7-button-padding-horizontal: 10px;
4437   --f7-button-border-radius: 5px;
4438   --f7-button-font-weight: 400;
4439   --f7-button-letter-spacing: 0;
4440   --f7-button-text-transform: none;
4441   /*
4442   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4443   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4444   */
4445   --f7-button-outline-border-width: 1px;
4446   --f7-button-large-height: 44px;
4447   --f7-button-large-font-size: 17px;
4448   --f7-button-large-font-weight: 400;
4449   --f7-button-small-height: 26px;
4450   --f7-button-small-font-size: 13px;
4451   --f7-button-small-font-weight: 600;
4452   --f7-button-small-text-transform: uppercase;
4453   --f7-button-small-outline-border-width: 2px;
4454 }
4455 .md {
4456   --f7-button-height: 36px;
4457   --f7-button-padding-horizontal: 8px;
4458   --f7-button-border-radius: 4px;
4459   --f7-button-font-weight: 500;
4460   --f7-button-letter-spacing: 0.03em;
4461   --f7-button-text-transform: uppercase;
4462   --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4463   /*
4464   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4465   */
4466   --f7-button-outline-border-width: 2px;
4467   --f7-button-large-height: 48px;
4468   --f7-button-large-font-size: 14px;
4469   --f7-button-large-font-weight: 500;
4470   --f7-button-small-height: 28px;
4471   --f7-button-small-font-size: 12px;
4472   --f7-button-small-font-weight: 500;
4473   --f7-button-small-text-transform: uppercase;
4474   --f7-button-small-outline-border-width: 2px;
4475 }
4476 .md .theme-dark,
4477 .md.theme-dark {
4478   --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4479 }
4480 .aurora {
4481   /*
4482   --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
4483   --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
4484   */
4485   --f7-button-font-size: 14px;
4486   --f7-button-height: 28px;
4487   --f7-button-min-width: 24px;
4488   --f7-button-padding-horizontal: 10px;
4489   --f7-button-border-radius: 4px;
4490   --f7-button-font-weight: 400;
4491   --f7-button-letter-spacing: 0.02;
4492   --f7-button-text-transform: none;
4493   /*
4494   --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4495   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4496   */
4497   --f7-button-outline-border-width: 2px;
4498   --f7-button-large-height: 34px;
4499   --f7-button-large-font-size: 14px;
4500   --f7-button-large-font-weight: 600;
4501   --f7-button-small-height: 22px;
4502   --f7-button-small-font-size: 12px;
4503   --f7-button-small-font-weight: 600;
4504   --f7-button-small-text-transform: none;
4505   --f7-button-small-outline-border-width: 1px;
4506 }
4507 button {
4508   -webkit-appearance: none;
4509      -moz-appearance: none;
4510           appearance: none;
4511   width: 100%;
4512 }
4513 .button {
4514   text-decoration: none;
4515   text-align: center;
4516   display: block;
4517   -webkit-appearance: none;
4518      -moz-appearance: none;
4519           appearance: none;
4520   background: none;
4521   margin: 0;
4522   white-space: nowrap;
4523   text-overflow: ellipsis;
4524   position: relative;
4525   overflow: hidden;
4526   font-family: inherit;
4527   cursor: pointer;
4528   outline: 0;
4529   box-sizing: border-box;
4530   vertical-align: middle;
4531   justify-content: center;
4532   align-items: center;
4533   border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4534   font-size: var(--f7-button-font-size);
4535   color: var(--f7-button-text-color, var(--f7-theme-color));
4536   height: var(--f7-button-height);
4537   line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
4538   padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
4539   border-radius: var(--f7-button-border-radius);
4540   min-width: var(--f7-button-min-width);
4541   font-weight: var(--f7-button-font-weight);
4542   letter-spacing: var(--f7-button-letter-spacing);
4543   text-transform: var(--f7-button-text-transform);
4544   background-color: var(--f7-button-bg-color);
4545   box-shadow: var(--f7-button-box-shadow);
4546 }
4547 .button.active-state {
4548   background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4549   color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4550 }
4551 input[type="submit"].button,
4552 input[type="button"].button {
4553   width: 100%;
4554 }
4555 .button > i + span,
4556 .button > span + span,
4557 .button > span + i,
4558 .button > i + i {
4559   margin-right: 4px;
4560 }
4561 .subnavbar .button,
4562 .navbar .button,
4563 .toolbar .button,
4564 .searchbar .button,
4565 .appbar .button {
4566   color: var(--f7-button-text-color, var(--f7-theme-color));
4567 }
4568 .button-round,
4569 .ios .button-round-ios,
4570 .md .button-round-md,
4571 .aurora .button-round-aurora {
4572   --f7-button-border-radius: var(--f7-button-height);
4573 }
4574 .button-fill,
4575 .ios .button-fill-ios,
4576 .md .button-fill-md,
4577 .aurora .button-fill-aurora,
4578 .button-active,
4579 .button.tab-link-active {
4580   --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4581   --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4582   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4583 }
4584 .button-fill,
4585 .ios .button-fill-ios,
4586 .md .button-fill-md,
4587 .aurora .button-fill-aurora {
4588   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4589 }
4590 .button-active,
4591 .button.tab-link-active {
4592   --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4593 }
4594 .button-outline,
4595 .ios .button-outline-ios,
4596 .md .button-outline-md,
4597 .aurora .button-outline-aurora {
4598   --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4599   --f7-button-border-width: var(--f7-button-outline-border-width);
4600 }
4601 .button-large,
4602 .ios .button-large-ios,
4603 .md .button-large-md,
4604 .aurora .button-large-aurora {
4605   --f7-button-height: var(--f7-button-large-height);
4606   --f7-button-font-size: var(--f7-button-large-font-size);
4607   --f7-button-font-weight: var(--f7-button-large-font-weight);
4608 }
4609 .button-small,
4610 .ios .button-small-ios,
4611 .md .button-small-md,
4612 .aurora .button-small-aurora {
4613   --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4614   --f7-button-height: var(--f7-button-small-height);
4615   --f7-button-font-size: var(--f7-button-small-font-size);
4616   --f7-button-font-weight: var(--f7-button-small-font-weight);
4617   --f7-button-text-transform: var(--f7-button-small-text-transform);
4618 }
4619 .ios .button-small.button-fill,
4620 .ios .button-small-ios.button-fill,
4621 .ios .button-small.button-fill-ios {
4622   --f7-button-border-width: var(--f7-button-small-outline-border-width);
4623   --f7-button-pressed-text-color: var(--f7-theme-color);
4624   --f7-button-pressed-bg-color: transparent;
4625 }
4626 .segmented {
4627   align-self: center;
4628   display: flex;
4629   flex-wrap: nowrap;
4630   border-radius: var(--f7-button-border-radius);
4631   box-shadow: var(--f7-button-box-shadow);
4632 }
4633 .segmented .button,
4634 .segmented button {
4635   width: 100%;
4636   flex-shrink: 1;
4637   min-width: 0;
4638   border-radius: 0;
4639 }
4640 .segmented .button:first-child {
4641   border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4642 }
4643 .segmented .button:not(.button-outline):first-child {
4644   border-right: none;
4645 }
4646 .segmented .button.button-outline:nth-child(n + 2) {
4647   border-right: none;
4648 }
4649 .segmented .button:last-child {
4650   border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4651 }
4652 .segmented .button-round:first-child {
4653   border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4654 }
4655 .segmented .button-round:last-child {
4656   border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4657 }
4658 .segmented .button:first-child:last-child {
4659   border-radius: var(--f7-button-border-radius);
4660 }
4661 .segmented-round,
4662 .ios .segmented-round-ios,
4663 .md .segmented-round-md,
4664 .aurora .segmented-round-aurora {
4665   border-radius: var(--f7-button-height);
4666 }
4667 .segmented-raised,
4668 .ios .segmented-raised-ios,
4669 .md .segmented-raised-md,
4670 .aurora .segmented-raised-aurora {
4671   box-shadow: var(--f7-button-raised-box-shadow);
4672 }
4673 .segmented-raised .button:not(.button-outline),
4674 .ios .segmented-raised-ios .button:not(.button-outline),
4675 .md .segmented-raised-md .button:not(.button-outline),
4676 .aurora .segmented-raised-aurora .button:not(.button-outline) {
4677   border-right: 1px solid var(--f7-segmented-raised-divider-color);
4678 }
4679 .button-raised,
4680 .ios .button-raised-ios,
4681 .md .button-raised-md,
4682 .aurora .button-raised-aurora {
4683   --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4684 }
4685 .button-raised.active-state,
4686 .ios .button-raised-ios.active-state,
4687 .md .button-raised-md.active-state,
4688 .aurora .button-raised-aurora.active-state {
4689   --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4690 }
4691 .subnavbar .segmented {
4692   width: 100%;
4693 }
4694 .ios .button {
4695   transition-duration: 100ms;
4696 }
4697 .ios .button-fill,
4698 .ios .button-fill-ios {
4699   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4700 }
4701 .ios .button-small,
4702 .ios .button-small-ios {
4703   transition-duration: 200ms;
4704 }
4705 .md .button {
4706   transition-duration: 300ms;
4707   transform: translate3d(0, 0, 0);
4708 }
4709 .md .button-fill,
4710 .md .button-fill-md {
4711   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4712 }
4713 .aurora .button {
4714   transition-duration: 100ms;
4715   transform: translate3d(0, 0, 0);
4716 }
4717 .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
4718   background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
4719 }
4720 .aurora .button-fill,
4721 .aurora .button-fill-aurora {
4722   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4723 }
4724 .aurora .button-fill,
4725 .aurora .button-active,
4726 .aurora .button.tab-link-active,
4727 .aurora .button-fill-aurora {
4728   --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
4729 }
4730 /* === Touch Ripple === */
4731 :root {
4732   --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4733   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4734   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4735 }
4736 .theme-dark {
4737   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4738 }
4739 .ripple,
4740 .fab a,
4741 .link,
4742 .item-link,
4743 .list-button,
4744 .button,
4745 .dialog-button,
4746 .tab-link,
4747 .radio,
4748 .checkbox,
4749 .actions-button,
4750 .speed-dial-buttons a {
4751   -webkit-user-select: none;
4752   -moz-user-select: none;
4753    -ms-user-select: none;
4754        user-select: none;
4755 }
4756 .ripple-wave {
4757   left: 0;
4758   top: 0;
4759   position: absolute !important;
4760   border-radius: 50%;
4761   pointer-events: none;
4762   z-index: -1;
4763   padding: 0;
4764   margin: 0;
4765   font-size: 0;
4766   transform: translate3d(0px, 0px, 0) scale(0);
4767   transition-duration: 1400ms;
4768   background-color: var(--f7-touch-ripple-color);
4769   will-change: transform, opacity;
4770 }
4771 .ripple-wave.ripple-wave-fill {
4772   transition-duration: 300ms;
4773   opacity: 0.35;
4774 }
4775 .ripple-wave.ripple-wave-out {
4776   transition-duration: 600ms;
4777   opacity: 0;
4778 }
4779 .button-fill .ripple-wave,
4780 .picker-calendar-day .ripple-wave,
4781 .menu .ripple-wave {
4782   z-index: 1;
4783 }
4784 .checkbox .ripple-wave,
4785 .radio .ripple-wave,
4786 .data-table .sortable-cell .ripple-wave {
4787   z-index: 0;
4788 }
4789 [class*="ripple-color-"] {
4790   --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4791 }
4792 /* === Icon === */
4793 i.icon {
4794   display: inline-block;
4795   vertical-align: middle;
4796   background-size: 100% auto;
4797   background-position: center;
4798   background-repeat: no-repeat;
4799   font-style: normal;
4800   position: relative;
4801 }
4802 .icon-back:after,
4803 .icon-prev:after,
4804 .icon-forward:after,
4805 .icon-next:after {
4806   font-family: 'framework7-core-icons';
4807   font-weight: normal;
4808   font-style: normal;
4809   line-height: 1;
4810   letter-spacing: normal;
4811   text-transform: none;
4812   white-space: nowrap;
4813   word-wrap: normal;
4814   direction: ltr;
4815   -webkit-font-smoothing: antialiased;
4816   text-rendering: optimizeLegibility;
4817   -moz-osx-font-smoothing: grayscale;
4818   -moz-font-feature-settings: "liga";
4819        font-feature-settings: "liga";
4820   text-align: center;
4821   display: block;
4822   width: 100%;
4823   height: 100%;
4824   font-size: 20px;
4825 }
4826 .icon[class*="color-"] {
4827   color: var(--f7-theme-color);
4828 }
4829 .ios .icon-back,
4830 .ios .icon-prev,
4831 .ios .icon-forward,
4832 .ios .icon-next {
4833   width: 12px;
4834   height: 20px;
4835   line-height: 20px;
4836 }
4837 .ios .icon-back:after,
4838 .ios .icon-prev:after,
4839 .ios .icon-forward:after,
4840 .ios .icon-next:after {
4841   line-height: inherit;
4842 }
4843 .ios .icon-prev:after,
4844 .ios .icon-next:after {
4845   font-size: 16px;
4846 }
4847 .ios .item-media .icon {
4848   color: #808080;
4849 }
4850 .ios .item-media .f7-icons {
4851   font-size: 28px;
4852   width: 28px;
4853   height: 28px;
4854 }
4855 .ios .icon-back:after,
4856 .ios .icon-prev:after {
4857   content: 'chevron_right_ios';
4858 }
4859 .ios .icon-forward:after,
4860 .ios .icon-next:after {
4861   content: 'chevron_left_ios';
4862 }
4863 .md .icon-back,
4864 .md .icon-forward,
4865 .md .icon-next,
4866 .md .icon-prev {
4867   width: 24px;
4868   height: 24px;
4869 }
4870 .md .icon-back:after,
4871 .md .icon-forward:after,
4872 .md .icon-next:after,
4873 .md .icon-prev:after {
4874   line-height: 1.2;
4875 }
4876 .md .item-media .icon {
4877   color: #737373;
4878 }
4879 .md .item-media .material-icons {
4880   font-size: 24px;
4881   width: 24px;
4882   height: 24px;
4883 }
4884 .md .icon-back:after {
4885   content: 'arrow_right_md';
4886 }
4887 .md .icon-forward:after {
4888   content: 'arrow_left_md';
4889 }
4890 .md .icon-next:after {
4891   content: 'chevron_left_md';
4892 }
4893 .md .icon-prev:after {
4894   content: 'chevron_right_md';
4895 }
4896 .aurora .f7-icons,
4897 .aurora .material-icons {
4898   font-size: 18px;
4899 }
4900 .aurora .icon-back,
4901 .aurora .icon-prev,
4902 .aurora .icon-forward,
4903 .aurora .icon-next {
4904   width: 9px;
4905   height: 14px;
4906   line-height: 14px;
4907 }
4908 .aurora .icon-back:after,
4909 .aurora .icon-prev:after,
4910 .aurora .icon-forward:after,
4911 .aurora .icon-next:after {
4912   line-height: inherit;
4913 }
4914 .aurora .item-media .icon {
4915   color: #808080;
4916 }
4917 .aurora .item-media .f7-icons {
4918   font-size: 18px;
4919   width: 18px;
4920   height: 18px;
4921 }
4922 .aurora .icon-back:after,
4923 .aurora .icon-prev:after {
4924   content: 'chevron_right_aurora';
4925 }
4926 .aurora .icon-forward:after,
4927 .aurora .icon-next:after {
4928   content: 'chevron_left_aurora';
4929 }
4930 .custom-modal-backdrop {
4931   z-index: 10500;
4932 }
4933 .custom-modal-backdrop,
4934 .actions-backdrop,
4935 .dialog-backdrop,
4936 .popover-backdrop,
4937 .popup-backdrop,
4938 .preloader-backdrop,
4939 .sheet-backdrop {
4940   position: absolute;
4941   left: 0;
4942   top: 0;
4943   width: 100%;
4944   height: 100%;
4945   background: rgba(0, 0, 0, 0.4);
4946   z-index: 13000;
4947   visibility: hidden;
4948   opacity: 0;
4949   transition-duration: 400ms;
4950 }
4951 .custom-modal-backdrop.not-animated,
4952 .actions-backdrop.not-animated,
4953 .dialog-backdrop.not-animated,
4954 .popover-backdrop.not-animated,
4955 .popup-backdrop.not-animated,
4956 .preloader-backdrop.not-animated,
4957 .sheet-backdrop.not-animated {
4958   transition-duration: 0ms;
4959 }
4960 .custom-modal-backdrop.backdrop-in,
4961 .actions-backdrop.backdrop-in,
4962 .dialog-backdrop.backdrop-in,
4963 .popover-backdrop.backdrop-in,
4964 .popup-backdrop.backdrop-in,
4965 .preloader-backdrop.backdrop-in,
4966 .sheet-backdrop.backdrop-in {
4967   visibility: visible;
4968   opacity: 1;
4969 }
4970 /* === Appbar === */
4971 :root {
4972   /*
4973   --f7-appbar-offset: var(--f7-appbar-height);
4974   --f7-appbar-extra-offset: 0px;
4975   --f7-appbar-bg-color: var(--f7-bars-bg-color);
4976   --f7-appbar-bg-image: var(--f7-bars-bg-image);
4977   --f7-appbar-border-color: var(--f7-bars-border-color);
4978   --f7-appbar-link-color: var(--f7-bars-link-color);
4979   --f7-appbar-text-color: var(--f7-bars-text-color);
4980   */
4981   --f7-appbar-shadow-image: none;
4982 }
4983 .ios {
4984   --f7-appbar-height: 44px;
4985   --f7-appbar-inner-padding-left: 8px;
4986   --f7-appbar-inner-padding-right: 8px;
4987 }
4988 .md {
4989   --f7-appbar-height: 48px;
4990   --f7-appbar-inner-padding-left: 16px;
4991   --f7-appbar-inner-padding-right: 16px;
4992 }
4993 .aurora {
4994   --f7-appbar-height: 38px;
4995   --f7-appbar-inner-padding-left: 15px;
4996   --f7-appbar-inner-padding-right: 15px;
4997 }
4998 .appbar {
4999   position: relative;
5000   left: 0;
5001   top: 0;
5002   width: 100%;
5003   z-index: 500;
5004   -webkit-backface-visibility: hidden;
5005           backface-visibility: hidden;
5006   box-sizing: border-box;
5007   margin: 0;
5008   transform: translate3d(0, 0, 0);
5009   height: var(--f7-appbar-height);
5010   background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
5011   background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
5012   color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
5013   font-size: var(--f7-appbar-font-size);
5014   z-index: 7000;
5015 }
5016 .appbar .panel ~ .appbar {
5017   z-index: 5500;
5018 }
5019 .appbar a {
5020   color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
5021 }
5022 .appbar a.link {
5023   display: flex;
5024   justify-content: flex-start;
5025   line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
5026   height: var(--f7-appbar-link-height, var(--f7-appbar-height));
5027 }
5028 .appbar .left,
5029 .appbar .center,
5030 .appbar .right {
5031   display: flex;
5032   align-items: center;
5033 }
5034 .appbar.no-hairline:after,
5035 .appbar.no-border:after {
5036   display: none !important;
5037 }
5038 .appbar.no-hairline .title-large:after,
5039 .appbar.no-border .title-large:after {
5040   display: none !important;
5041 }
5042 .appbar.no-shadow:before {
5043   display: none !important;
5044 }
5045 .appbar:after,
5046 .appbar:before {
5047   -webkit-backface-visibility: hidden;
5048           backface-visibility: hidden;
5049 }
5050 .appbar:after {
5051   content: '';
5052   position: absolute;
5053   background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
5054   display: block;
5055   z-index: 15;
5056   top: auto;
5057   right: auto;
5058   bottom: 0;
5059   left: 0;
5060   height: 1px;
5061   width: 100%;
5062   transform-origin: 50% 100%;
5063   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5064 }
5065 .appbar:before {
5066   content: '';
5067   position: absolute;
5068   right: 0;
5069   width: 100%;
5070   top: 100%;
5071   bottom: auto;
5072   height: 8px;
5073   pointer-events: none;
5074   background: var(--f7-appbar-shadow-image);
5075 }
5076 .appbar:after {
5077   z-index: 1;
5078 }
5079 .appbar ~ * {
5080   --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px));
5081 }
5082 .appbar-inner {
5083   position: absolute;
5084   left: 0;
5085   top: 0;
5086   width: 100%;
5087   height: var(--f7-appbar-height);
5088   display: flex;
5089   align-items: center;
5090   justify-content: space-between;
5091   box-sizing: border-box;
5092   padding: 0 calc(var(--f7-appbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-appbar-inner-padding-left) + var(--f7-safe-area-left));
5093 }
5094 .appbar-inner.stacked {
5095   display: none;
5096 }
5097 /* === Dialog === */
5098 :root {
5099   --f7-dialog-button-text-color: var(--f7-theme-color);
5100   --f7-dialog-button-text-align: center;
5101   --f7-dialog-input-bg-color: #fff;
5102 }
5103 .ios {
5104   --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
5105   --f7-dialog-box-shadow: none;
5106   --f7-dialog-width: 270px;
5107   --f7-dialog-inner-padding: 15px;
5108   --f7-dialog-border-radius: 13px;
5109   --f7-dialog-text-color: #000;
5110   --f7-dialog-text-align: center;
5111   --f7-dialog-font-size: 14px;
5112   --f7-dialog-title-text-color: inherit;
5113   --f7-dialog-title-font-size: 18px;
5114   --f7-dialog-title-font-weight: 600;
5115   --f7-dialog-title-line-height: inherit;
5116   --f7-dialog-button-font-size: 17px;
5117   --f7-dialog-button-height: 44px;
5118   --f7-dialog-button-letter-spacing: 0;
5119   --f7-dialog-button-font-weight: 400;
5120   --f7-dialog-button-text-transform: none;
5121   --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
5122   --f7-dialog-input-border-radius: 4px;
5123   --f7-dialog-input-font-size: 14px;
5124   --f7-dialog-input-height: 32px;
5125   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
5126   --f7-dialog-input-border-width: 1px;
5127   --f7-dialog-input-placeholder-color: #a9a9a9;
5128   --f7-dialog-preloader-size: 34px;
5129 }
5130 .md {
5131   --f7-dialog-bg-color: #fff;
5132   --f7-dialog-box-shadow: var(--f7-elevation-24);
5133   --f7-dialog-width: 280px;
5134   --f7-dialog-inner-padding: 24px;
5135   --f7-dialog-border-radius: 4px;
5136   --f7-dialog-text-color: #757575;
5137   --f7-dialog-text-align: right;
5138   --f7-dialog-font-size: 16px;
5139   --f7-dialog-title-text-color: #212121;
5140   --f7-dialog-title-font-size: 20px;
5141   --f7-dialog-title-font-weight: 500;
5142   --f7-dialog-title-line-height: 1.3;
5143   --f7-dialog-button-font-size: 14px;
5144   --f7-dialog-button-height: 36px;
5145   --f7-dialog-button-letter-spacing: 0.03em;
5146   --f7-dialog-button-font-weight: 500;
5147   --f7-dialog-button-text-transform: uppercase;
5148   --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
5149   --f7-dialog-input-border-radius: 0px;
5150   --f7-dialog-input-font-size: 16px;
5151   --f7-dialog-input-height: 36px;
5152   --f7-dialog-input-border-color: transparent;
5153   --f7-dialog-input-border-width: 0px;
5154   --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
5155   --f7-dialog-preloader-size: 32px;
5156 }
5157 .aurora {
5158   --f7-dialog-bg-color: #fff;
5159   --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
5160   --f7-dialog-width: 300px;
5161   --f7-dialog-inner-padding: 20px;
5162   --f7-dialog-border-radius: 4px;
5163   --f7-dialog-text-color: #000;
5164   --f7-dialog-text-align: right;
5165   --f7-dialog-font-size: 14px;
5166   --f7-dialog-title-text-color: inherit;
5167   --f7-dialog-title-font-size: 14px;
5168   --f7-dialog-title-font-weight: 700;
5169   --f7-dialog-title-line-height: inherit;
5170   --f7-dialog-button-text-color: #fff;
5171   --f7-dialog-button-font-size: 13px;
5172   --f7-dialog-button-height: 28px;
5173   --f7-dialog-button-letter-spacing: 0;
5174   --f7-dialog-button-font-weight: 500;
5175   --f7-dialog-button-text-transform: none;
5176   /*
5177   --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
5178   */
5179   --f7-dialog-input-border-radius: 4px;
5180   --f7-dialog-input-font-size: 13px;
5181   --f7-dialog-input-height: 24px;
5182   --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
5183   --f7-dialog-input-border-width: 1px;
5184   --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
5185   --f7-dialog-preloader-size: 24px;
5186 }
5187 .dialog {
5188   position: absolute;
5189   z-index: 13500;
5190   left: 50%;
5191   margin-top: 0;
5192   top: 50%;
5193   overflow: hidden;
5194   opacity: 0;
5195   transform: translate3d(0, -50%, 0) scale(1.185);
5196   transition-property: transform, opacity;
5197   display: none;
5198   transition-duration: 400ms;
5199   box-shadow: var(--f7-dialog-box-shadow);
5200   width: var(--f7-dialog-width);
5201   margin-left: calc(-1 * var(--f7-dialog-width) / 2);
5202   border-radius: var(--f7-dialog-border-radius);
5203   text-align: var(--f7-dialog-text-align);
5204   color: var(--f7-dialog-text-color);
5205   font-size: var(--f7-dialog-font-size);
5206   will-change: transform, opacity;
5207 }
5208 .dialog.modal-in {
5209   opacity: 1;
5210   transform: translate3d(0, -50%, 0) scale(1);
5211 }
5212 .dialog.modal-out {
5213   opacity: 0;
5214   z-index: 13499;
5215 }
5216 .dialog.not-animated {
5217   transition-duration: 0ms;
5218 }
5219 .dialog-inner {
5220   position: relative;
5221   padding: var(--f7-dialog-inner-padding);
5222 }
5223 .dialog-title {
5224   color: var(--f7-dialog-title-text-color);
5225   font-size: var(--f7-dialog-title-font-size);
5226   font-weight: var(--f7-dialog-title-font-weight);
5227   line-height: var(--f7-dialog-title-line-height);
5228 }
5229 .dialog-buttons {
5230   position: relative;
5231   display: flex;
5232   flex-direction: row-reverse;
5233 }
5234 .dialog-buttons-vertical .dialog-buttons {
5235   display: block;
5236   height: auto !important;
5237 }
5238 .dialog-button {
5239   box-sizing: border-box;
5240   overflow: hidden;
5241   position: relative;
5242   white-space: nowrap;
5243   text-overflow: ellipsis;
5244   color: var(--f7-dialog-button-text-color);
5245   font-size: var(--f7-dialog-button-font-size);
5246   height: var(--f7-dialog-button-height);
5247   line-height: var(--f7-dialog-button-height);
5248   letter-spacing: var(--f7-dialog-button-letter-spacing);
5249   text-align: var(--f7-dialog-button-text-align);
5250   font-weight: var(--f7-dialog-button-font-weight);
5251   text-transform: var(--f7-dialog-button-text-transform);
5252   display: block;
5253   cursor: pointer;
5254 }
5255 .dialog-no-buttons .dialog-buttons {
5256   display: none;
5257 }
5258 .dialog-input-field {
5259   position: relative;
5260 }
5261 input.dialog-input[type] {
5262   box-sizing: border-box;
5263   margin: 0;
5264   margin-top: 15px;
5265   border-radius: var(--f7-dialog-input-border-radius);
5266   -webkit-appearance: none;
5267      -moz-appearance: none;
5268           appearance: none;
5269   width: 100%;
5270   display: block;
5271   font-family: inherit;
5272   box-shadow: none;
5273   font-size: var(--f7-dialog-input-font-size);
5274   height: var(--f7-dialog-input-height);
5275   background-color: var(--f7-dialog-input-bg-color);
5276   border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
5277 }
5278 input.dialog-input[type]::-webkit-input-placeholder {
5279   color: var(--f7-dialog-input-placeholder-color);
5280 }
5281 input.dialog-input[type]::-moz-placeholder {
5282   color: var(--f7-dialog-input-placeholder-color);
5283 }
5284 input.dialog-input[type]::-ms-input-placeholder {
5285   color: var(--f7-dialog-input-placeholder-color);
5286 }
5287 input.dialog-input[type]::placeholder {
5288   color: var(--f7-dialog-input-placeholder-color);
5289 }
5290 .dialog-input-double input.dialog-input {
5291   border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
5292 }
5293 .dialog-input-double + .dialog-input-double input.dialog-input {
5294   border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
5295 }
5296 .dialog-preloader .preloader {
5297   --f7-preloader-size: var(--f7-dialog-preloader-size);
5298 }
5299 html.with-modal-dialog .page-content {
5300   overflow: hidden;
5301   -webkit-overflow-scrolling: auto;
5302 }
5303 .ios .dialog.modal-out {
5304   transform: translate3d(0, -50%, 0) scale(1);
5305 }
5306 .ios .dialog-inner {
5307   border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
5308   background: var(--f7-dialog-bg-color);
5309 }
5310 .ios .dialog-inner:after {
5311   content: '';
5312   position: absolute;
5313   background-color: rgba(0, 0, 0, 0.2);
5314   display: block;
5315   z-index: 15;
5316   top: auto;
5317   right: auto;
5318   bottom: 0;
5319   left: 0;
5320   height: 1px;
5321   width: 100%;
5322   transform-origin: 50% 100%;
5323   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5324 }
5325 .ios .dialog-title + .dialog-text {
5326   margin-top: 5px;
5327 }
5328 .ios .dialog-buttons {
5329   height: 44px;
5330   justify-content: center;
5331 }
5332 .ios .dialog-button {
5333   width: 100%;
5334   padding: 0 5px;
5335   -webkit-box-flex: 1;
5336   -ms-flex: 1;
5337   background: var(--f7-dialog-bg-color);
5338 }
5339 .ios .dialog-button:after {
5340   content: '';
5341   position: absolute;
5342   background-color: rgba(0, 0, 0, 0.2);
5343   display: block;
5344   z-index: 15;
5345   top: 0;
5346   right: 0;
5347   bottom: auto;
5348   left: auto;
5349   width: 1px;
5350   height: 100%;
5351   transform-origin: 100% 50%;
5352   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
5353 }
5354 .ios .dialog-button.active-state {
5355   background-color: var(--f7-dialog-button-pressed-bg-color);
5356 }
5357 .ios .dialog-button:first-child {
5358   border-radius: 0 0 0 var(--f7-dialog-border-radius);
5359 }
5360 .ios .dialog-button:last-child {
5361   border-radius: 0 0 var(--f7-dialog-border-radius) 0;
5362 }
5363 .ios .dialog-button:last-child:after {
5364   display: none !important;
5365 }
5366 .ios .dialog-button:first-child:last-child {
5367   border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
5368 }
5369 .ios .dialog-button.dialog-button-bold {
5370   font-weight: 500;
5371 }
5372 .ios .dialog-button[class*="color-"] {
5373   --f7-dialog-button-text-color: var(--f7-theme-color);
5374 }
5375 .ios .dialog-buttons-vertical .dialog-buttons {
5376   height: auto;
5377 }
5378 .ios .dialog-buttons-vertical .dialog-button {
5379   border-radius: 0;
5380 }
5381 .ios .dialog-buttons-vertical .dialog-button:after {
5382   content: '';
5383   position: absolute;
5384   background-color: rgba(0, 0, 0, 0.2);
5385   display: block;
5386   z-index: 15;
5387   top: auto;
5388   right: auto;
5389   bottom: 0;
5390   left: 0;
5391   height: 1px;
5392   width: 100%;
5393   transform-origin: 50% 100%;
5394   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5395 }
5396 .ios .dialog-buttons-vertical .dialog-button:last-child {
5397   border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
5398 }
5399 .ios .dialog-buttons-vertical .dialog-button:last-child:after {
5400   display: none !important;
5401 }
5402 .ios .dialog-no-buttons .dialog-inner {
5403   border-radius: var(--f7-dialog-border-radius);
5404 }
5405 .ios .dialog-no-buttons .dialog-inner:after {
5406   display: none !important;
5407 }
5408 .ios .dialog-input-field {
5409   margin-top: 15px;
5410 }
5411 .ios .dialog-input {
5412   padding: 0 5px;
5413 }
5414 .ios .dialog-input + .dialog-input {
5415   margin-top: 5px;
5416 }
5417 .ios .dialog-input-double + .dialog-input-double {
5418   margin-top: 0;
5419 }
5420 .ios .dialog-input-double + .dialog-input-double .dialog-input {
5421   border-top: 0;
5422   margin-top: 0;
5423 }
5424 .ios .dialog-preloader .dialog-title ~ .preloader,
5425 .ios .dialog-preloader .dialog-text ~ .preloader {
5426   margin-top: 15px;
5427 }
5428 .ios .dialog-progress .dialog-title ~ .progressbar,
5429 .ios .dialog-progress .dialog-text ~ .progressbar,
5430 .ios .dialog-progress .dialog-title ~ .progressbar-infinite,
5431 .ios .dialog-progress .dialog-text ~ .progressbar-infinite {
5432   margin-top: 15px;
5433 }
5434 .md .dialog {
5435   background: var(--f7-dialog-bg-color);
5436 }
5437 .md .dialog.modal-out {
5438   transform: translate3d(0, -50%, 0) scale(0.815);
5439 }
5440 .md .dialog-title + .dialog-text {
5441   margin-top: 20px;
5442 }
5443 .md .dialog-text {
5444   line-height: 1.5;
5445 }
5446 .md .dialog-buttons {
5447   height: 48px;
5448   padding: 6px 8px;
5449   overflow: hidden;
5450   box-sizing: border-box;
5451   justify-content: flex-end;
5452 }
5453 .md .dialog-button {
5454   border-radius: 4px;
5455   min-width: 64px;
5456   padding: 0 8px;
5457   border: none;
5458   transition-duration: 300ms;
5459   transform: translate3d(0, 0, 0);
5460 }
5461 .md .dialog-button.active-state {
5462   background-color: var(--f7-dialog-button-pressed-bg-color);
5463 }
5464 .md .dialog-button.dialog-button-bold {
5465   font-weight: 700;
5466 }
5467 .md .dialog-button + .dialog-button {
5468   margin-left: 4px;
5469 }
5470 .md .dialog-button[class*="color-"] {
5471   --f7-dialog-button-text-color: var(--f7-theme-color);
5472 }
5473 .md .dialog-buttons-vertical .dialog-buttons {
5474   padding: 0 0 8px 0;
5475 }
5476 .md .dialog-buttons-vertical .dialog-button {
5477   margin-left: 0;
5478   text-align: right;
5479   height: 48px;
5480   line-height: 48px;
5481   border-radius: 0;
5482   padding-left: 16px;
5483   padding-right: 16px;
5484 }
5485 .md .dialog-input {
5486   padding: 0;
5487   transition-duration: 200ms;
5488   position: relative;
5489 }
5490 .md .dialog-input + .dialog-input {
5491   margin-top: 16px;
5492 }
5493 .md .dialog-preloader .dialog-title,
5494 .md .dialog-progress .dialog-title,
5495 .md .dialog-preloader .dialog-inner,
5496 .md .dialog-progress .dialog-inner {
5497   text-align: center;
5498 }
5499 .md .dialog-preloader .dialog-title ~ .preloader,
5500 .md .dialog-preloader .dialog-text ~ .preloader {
5501   margin-top: 20px;
5502 }
5503 .md .dialog-progress .dialog-title ~ .progressbar,
5504 .md .dialog-progress .dialog-text ~ .progressbar,
5505 .md .dialog-progress .dialog-title ~ .progressbar-infinite,
5506 .md .dialog-progress .dialog-text ~ .progressbar-infinite {
5507   margin-top: 16px;
5508 }
5509 .aurora .dialog {
5510   background: var(--f7-dialog-bg-color);
5511 }
5512 .aurora .dialog.modal-out {
5513   transform: translate3d(0, -50%, 0) scale(0.815);
5514 }
5515 .aurora .dialog-title + .dialog-text {
5516   margin-top: 10px;
5517 }
5518 .aurora .dialog-text {
5519   line-height: 1.5;
5520 }
5521 .aurora .dialog-buttons {
5522   padding: var(--f7-dialog-inner-padding);
5523   padding-top: 0;
5524   overflow: hidden;
5525   box-sizing: border-box;
5526   justify-content: flex-end;
5527 }
5528 .aurora .dialog-button {
5529   border-radius: 4px;
5530   min-width: 64px;
5531   padding: 0 10px;
5532   border: none;
5533   transition-duration: 300ms;
5534   transform: translate3d(0, 0, 0);
5535   background: var(--f7-theme-color);
5536 }
5537 .aurora .dialog-button.active-state {
5538   background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
5539 }
5540 .aurora .dialog-button.dialog-button-bold {
5541   font-weight: 600;
5542 }
5543 .aurora .dialog-button + .dialog-button {
5544   margin-left: 15px;
5545 }
5546 .aurora .dialog-buttons-vertical .dialog-buttons {
5547   display: flex;
5548   flex-direction: column;
5549   align-items: flex-end;
5550 }
5551 .aurora .dialog-buttons-vertical .dialog-button {
5552   margin-left: 0;
5553   flex-shrink: 0;
5554 }
5555 .aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
5556   margin-top: 5px;
5557 }
5558 .aurora .dialog-input-field {
5559   margin-top: 10px;
5560 }
5561 .aurora .dialog-input-field input.dialog-input {
5562   margin-top: 0;
5563 }
5564 .aurora .dialog-input {
5565   padding: 0 4px;
5566   transition-duration: 200ms;
5567   position: relative;
5568 }
5569 .aurora .dialog-input + .dialog-input {
5570   margin-top: 10px;
5571 }
5572 .aurora .dialog-input-double + .dialog-input-double {
5573   margin-top: 0;
5574 }
5575 .aurora .dialog-input-double + .dialog-input-double .dialog-input {
5576   border-top: 0;
5577   margin-top: 0;
5578 }
5579 .aurora .dialog-preloader .dialog-title,
5580 .aurora .dialog-progress .dialog-title,
5581 .aurora .dialog-preloader .dialog-inner,
5582 .aurora .dialog-progress .dialog-inner {
5583   text-align: center;
5584 }
5585 .aurora .dialog-preloader .dialog-title ~ .preloader,
5586 .aurora .dialog-preloader .dialog-text ~ .preloader {
5587   margin-top: 10px;
5588 }
5589 .aurora .dialog-progress .dialog-title ~ .progressbar,
5590 .aurora .dialog-progress .dialog-text ~ .progressbar,
5591 .aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
5592 .aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
5593   margin-top: 15px;
5594 }
5595 /* === Popup === */
5596 :root {
5597   --f7-popup-border-radius: 0px;
5598   --f7-popup-tablet-width: 630px;
5599   --f7-popup-tablet-height: 630px;
5600   /*
5601   --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
5602   */
5603 }
5604 .ios {
5605   --f7-popup-box-shadow: none;
5606 }
5607 .md {
5608   --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
5609 }
5610 .aurora {
5611   --f7-popup-tablet-border-radius: 4px;
5612   --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
5613 }
5614 .popup-backdrop {
5615   z-index: 10500;
5616 }
5617 .popup {
5618   position: absolute;
5619   left: 0;
5620   top: var(--f7-statusbar-height);
5621   width: 100%;
5622   height: calc(100% - var(--f7-statusbar-height));
5623   display: none;
5624   box-sizing: border-box;
5625   transition-property: transform;
5626   transform: translate3d(0, 100%, 0);
5627   background: #fff;
5628   z-index: 11000;
5629   will-change: transform;
5630   overflow: hidden;
5631   border-radius: var(--f7-popup-border-radius);
5632 }
5633 .popup.modal-in,
5634 .popup.modal-out {
5635   transition-duration: 400ms;
5636 }
5637 .popup.not-animated {
5638   transition-duration: 0ms;
5639 }
5640 .popup.modal-in {
5641   display: block;
5642   transform: translate3d(0, 0, 0);
5643 }
5644 .popup.modal-out {
5645   transform: translate3d(0, 100%, 0);
5646 }
5647 .popup.swipe-close-to-top.modal-out {
5648   transform: translate3d(0, -100%, 0);
5649 }
5650 @media (min-width: 630px) and (min-height: 630px) {
5651   .popup:not(.popup-tablet-fullscreen) {
5652     width: var(--f7-popup-tablet-width);
5653     height: var(--f7-popup-tablet-height);
5654     left: 50%;
5655     top: 50%;
5656     margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
5657     margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
5658     transform: translate3d(0, 100vh, 0);
5659     box-shadow: var(--f7-popup-box-shadow);
5660     border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
5661   }
5662   .popup:not(.popup-tablet-fullscreen).modal-in {
5663     transform: translate3d(0, 0, 0);
5664   }
5665   .popup:not(.popup-tablet-fullscreen).modal-out {
5666     transform: translate3d(0, 100vh, 0);
5667   }
5668   .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
5669     transform: translate3d(0, -100vh, 0);
5670   }
5671 }
5672 @media (max-width: 629px), (max-height: 629px) {
5673   .popup-backdrop {
5674     z-index: 9500;
5675   }
5676 }
5677 html.with-modal-popup .framework7-root > .views .page-content,
5678 html.with-modal-popup .framework7-root > .view .page-content,
5679 html.with-modal-popup .framework7-root > .panel .page-content {
5680   overflow: hidden;
5681   -webkit-overflow-scrolling: auto;
5682 }
5683 /* === Login Screen === */
5684 :root {
5685   --f7-login-screen-bg-color: #fff;
5686   --f7-login-screen-content-bg-color: #fff;
5687   --f7-login-screen-blocks-max-width: 480px;
5688   /*
5689    --f7-login-screen-list-button-text-color: var(--f7-theme-color);
5690    */
5691   --f7-login-screen-title-text-align: center;
5692   --f7-login-screen-title-text-color: inherit;
5693   --f7-login-screen-title-letter-spacing: 0;
5694 }
5695 :root .theme-dark,
5696 :root.theme-dark {
5697   --f7-login-screen-bg-color: #171717;
5698   --f7-login-screen-content-bg-color: transparent;
5699 }
5700 .ios {
5701   --f7-login-screen-blocks-margin-vertical: 25px;
5702   --f7-login-screen-title-font-size: 30px;
5703   --f7-login-screen-title-font-weight: normal;
5704 }
5705 .md {
5706   --f7-login-screen-blocks-margin-vertical: 24px;
5707   --f7-login-screen-title-font-size: 34px;
5708   --f7-login-screen-title-font-weight: normal;
5709 }
5710 .aurora {
5711   --f7-login-screen-blocks-margin-vertical: 15px;
5712   --f7-login-screen-title-font-size: 28px;
5713   --f7-login-screen-title-font-weight: 500;
5714 }
5715 .login-screen {
5716   position: absolute;
5717   left: 0;
5718   top: var(--f7-statusbar-height);
5719   width: 100%;
5720   height: calc(100% - var(--f7-statusbar-height));
5721   display: none;
5722   box-sizing: border-box;
5723   transition-property: transform;
5724   transform: translate3d(0, 100%, 0);
5725   background: var(--f7-login-screen-bg-color);
5726   z-index: 11000;
5727   will-change: transform;
5728 }
5729 .login-screen.modal-in,
5730 .login-screen.modal-out {
5731   transition-duration: 400ms;
5732 }
5733 .login-screen.not-animated {
5734   transition-duration: 0ms;
5735 }
5736 .login-screen.modal-in {
5737   display: block;
5738   transform: translate3d(0, 0, 0);
5739 }
5740 .login-screen.modal-out {
5741   transform: translate3d(0, 100%, 0);
5742 }
5743 .login-screen-content {
5744   background: var(--f7-login-screen-content-bg-color);
5745 }
5746 .login-screen-content .list-button {
5747   text-align: center;
5748   color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
5749 }
5750 .login-screen-content .login-screen-title,
5751 .login-screen-content .list,
5752 .login-screen-content .block {
5753   margin: var(--f7-login-screen-blocks-margin-vertical) auto;
5754 }
5755 .login-screen-content .login-screen-title,
5756 .login-screen-content .list,
5757 .login-screen-content .block,
5758 .login-screen-content .block-footer,
5759 .login-screen-content .block-header {
5760   max-width: var(--f7-login-screen-blocks-max-width);
5761 }
5762 .login-screen-content .list ul {
5763   background: none;
5764 }
5765 .login-screen-content .list ul:before {
5766   display: none !important;
5767 }
5768 .login-screen-content .list ul:after {
5769   display: none !important;
5770 }
5771 .login-screen-content .block-footer,
5772 .login-screen-content .block-header {
5773   text-align: center;
5774   margin-left: auto;
5775   margin-right: auto;
5776 }
5777 .login-screen-title {
5778   text-align: var(--f7-login-screen-title-text-align);
5779   font-size: var(--f7-login-screen-title-font-size);
5780   font-weight: var(--f7-login-screen-title-font-weight);
5781   color: var(--f7-login-screen-title-text-color);
5782   letter-spacing: var(--f7-login-screen-title-letter-spacing);
5783 }
5784 .theme-dark .login-screen-content .list ul,
5785 .theme-dark .login-screen-content .block-strong {
5786   background-color: transparent;
5787 }
5788 /* === Popover === */
5789 :root {
5790   --f7-popover-width: 260px;
5791 }
5792 .ios {
5793   --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
5794   --f7-popover-border-radius: 13px;
5795   --f7-popover-box-shadow: none;
5796   --f7-popover-actions-icon-size: 28px;
5797   --f7-popover-actions-label-text-color: #8a8a8a;
5798 }
5799 .ios .theme-dark,
5800 .ios.theme-dark {
5801   --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
5802 }
5803 .md {
5804   --f7-popover-bg-color: #fff;
5805   --f7-popover-border-radius: 4px;
5806   --f7-popover-box-shadow: var(--f7-elevation-8);
5807   --f7-popover-actions-icon-size: 24px;
5808   --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
5809 }
5810 .md .theme-dark,
5811 .md.theme-dark {
5812   --f7-popover-bg-color: #202020;
5813   --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
5814 }
5815 .aurora {
5816   --f7-popover-width: 200px;
5817   --f7-popover-bg-color: #fff;
5818   --f7-popover-border-radius: 4px;
5819   --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
5820   --f7-popover-actions-icon-size: 24px;
5821   --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
5822 }
5823 .aurora .theme-dark,
5824 .aurora.theme-dark {
5825   --f7-popover-bg-color: #202020;
5826   --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
5827 }
5828 .popover {
5829   width: var(--f7-popover-width);
5830   z-index: 13500;
5831   margin: 0;
5832   top: 0;
5833   opacity: 0;
5834   left: 0;
5835   position: absolute;
5836   display: none;
5837   transition-duration: 300ms;
5838   background-color: var(--f7-popover-bg-color);
5839   border-radius: var(--f7-popover-border-radius);
5840   box-shadow: var(--f7-popover-box-shadow);
5841   will-change: transform, opacity;
5842 }
5843 .popover .list {
5844   margin: 0;
5845 }
5846 .popover .list ul {
5847   background: none;
5848 }
5849 .popover .list:first-child ul:before {
5850   display: none !important;
5851 }
5852 .popover .list:last-child ul:after {
5853   display: none !important;
5854 }
5855 .popover .list:first-child ul {
5856   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5857 }
5858 .popover .list:first-child li:first-child,
5859 .popover .list:first-child li:first-child a,
5860 .popover .list:first-child li:first-child > label {
5861   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5862 }
5863 .popover .list:last-child ul {
5864   border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5865 }
5866 .popover .list:last-child li:last-child,
5867 .popover .list:last-child li:last-child a,
5868 .popover .list:last-child li:last-child > label {
5869   border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5870 }
5871 .popover .list:first-child:last-child li:first-child:last-child,
5872 .popover .list:first-child:last-child li:first-child:last-child a,
5873 .popover .list:first-child:last-child li:first-child:last-child > label,
5874 .popover .list:first-child:last-child ul {
5875   border-radius: var(--f7-popover-border-radius);
5876 }
5877 .popover .list + .list {
5878   margin-top: var(--f7-list-margin-vertical);
5879 }
5880 .popover.modal-in {
5881   opacity: 1;
5882 }
5883 .popover.not-animated {
5884   transition-duration: 0ms;
5885 }
5886 .popover-inner {
5887   will-change: scroll-position;
5888   overflow: auto;
5889   -webkit-overflow-scrolling: touch;
5890 }
5891 .popover-from-actions .item-link i.icon {
5892   width: var(--f7-popover-actions-icon-size);
5893   height: var(--f7-popover-actions-icon-size);
5894   font-size: var(--f7-popover-actions-icon-size);
5895 }
5896 .popover-from-actions-bold {
5897   font-weight: 600;
5898 }
5899 .popover-from-actions-label {
5900   line-height: 1.3;
5901   position: relative;
5902   display: flex;
5903   align-items: center;
5904   padding: var(--f7-actions-label-padding);
5905   color: var(--f7-popover-actions-label-text-color);
5906   font-size: var(--f7-actions-label-font-size);
5907   justify-content: var(--f7-actions-label-justify-content);
5908 }
5909 .popover-from-actions-label:after {
5910   content: '';
5911   position: absolute;
5912   background-color: var(--f7-list-item-border-color);
5913   display: block;
5914   z-index: 15;
5915   top: auto;
5916   right: auto;
5917   bottom: 0;
5918   left: 0;
5919   height: 1px;
5920   width: 100%;
5921   transform-origin: 50% 100%;
5922   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5923 }
5924 .popover-from-actions-label:last-child:after {
5925   display: none !important;
5926 }
5927 .ios .popover {
5928   transform: none;
5929   transition-property: opacity;
5930 }
5931 .ios .popover-angle {
5932   width: 26px;
5933   height: 26px;
5934   position: absolute;
5935   left: -26px;
5936   top: 0;
5937   z-index: 100;
5938   overflow: hidden;
5939 }
5940 .ios .popover-angle:after {
5941   content: '';
5942   background: var(--f7-popover-bg-color);
5943   width: 26px;
5944   height: 26px;
5945   position: absolute;
5946   left: 0;
5947   top: 0;
5948   border-radius: 3px;
5949   transform: rotate(45deg);
5950 }
5951 .ios .popover-angle.on-left {
5952   left: -26px;
5953 }
5954 .ios .popover-angle.on-left:after {
5955   left: 19px;
5956   top: 0;
5957 }
5958 .ios .popover-angle.on-right {
5959   left: 100%;
5960 }
5961 .ios .popover-angle.on-right:after {
5962   left: -19px;
5963   top: 0;
5964 }
5965 .ios .popover-angle.on-top {
5966   left: 0;
5967   top: -26px;
5968 }
5969 .ios .popover-angle.on-top:after {
5970   left: 0;
5971   top: 19px;
5972 }
5973 .ios .popover-angle.on-bottom {
5974   left: 0;
5975   top: 100%;
5976 }
5977 .ios .popover-angle.on-bottom:after {
5978   left: 0;
5979   top: -19px;
5980 }
5981 .md .popover {
5982   transform: scale(0.85, 0.6);
5983   transition-property: opacity, transform;
5984 }
5985 .md .popover.modal-in {
5986   opacity: 1;
5987   transform: scale(1);
5988 }
5989 .md .popover.modal-out {
5990   opacity: 0;
5991   transform: scale(1);
5992 }
5993 .md .popover-on-top {
5994   transform-origin: center bottom;
5995 }
5996 .md .popover-on-top.popover-on-right {
5997   transform-origin: left bottom;
5998 }
5999 .md .popover-on-top.popover-on-left {
6000   transform-origin: right bottom;
6001 }
6002 .md .popover-on-middle {
6003   transform-origin: center center;
6004 }
6005 .md .popover-on-middle.popover-on-right {
6006   transform-origin: left center;
6007 }
6008 .md .popover-on-middle.popover-on-left {
6009   transform-origin: right center;
6010 }
6011 .md .popover-on-bottom {
6012   transform-origin: center top;
6013 }
6014 .md .popover-on-bottom.popover-on-right {
6015   transform-origin: left top;
6016 }
6017 .md .popover-on-bottom.popover-on-left {
6018   transform-origin: right top;
6019 }
6020 .aurora .popover {
6021   transform: none;
6022   transition-property: opacity;
6023 }
6024 .aurora .popover-angle {
6025   width: 18px;
6026   height: 18px;
6027   position: absolute;
6028   left: -18px;
6029   top: 0;
6030   z-index: 100;
6031   overflow: hidden;
6032 }
6033 .aurora .popover-angle:after {
6034   content: '';
6035   background: var(--f7-popover-bg-color);
6036   width: 18px;
6037   height: 18px;
6038   position: absolute;
6039   left: 0;
6040   top: 0;
6041   border-radius: 2px;
6042   transform: rotate(45deg);
6043 }
6044 .aurora .popover-angle.on-left {
6045   left: -18px;
6046 }
6047 .aurora .popover-angle.on-left:after {
6048   left: 13px;
6049   top: 0;
6050 }
6051 .aurora .popover-angle.on-right {
6052   left: 100%;
6053 }
6054 .aurora .popover-angle.on-right:after {
6055   left: -13px;
6056   top: 0;
6057 }
6058 .aurora .popover-angle.on-top {
6059   left: 0;
6060   top: -18px;
6061 }
6062 .aurora .popover-angle.on-top:after {
6063   left: 0;
6064   top: 13px;
6065 }
6066 .aurora .popover-angle.on-bottom {
6067   left: 0;
6068   top: 100%;
6069 }
6070 .aurora .popover-angle.on-bottom:after {
6071   left: 0;
6072   top: -13px;
6073 }
6074 /* === Actions === */
6075 :root {
6076   --f7-actions-grid-button-font-size: 12px;
6077   --f7-actions-grid-button-text-color: #757575;
6078 }
6079 .ios {
6080   --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
6081   --f7-actions-border-radius: 13px;
6082   --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
6083   /*
6084   --f7-actions-button-text-color: var(--f7-theme-color);
6085   */
6086   --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
6087   --f7-actions-button-padding: 0px;
6088   --f7-actions-button-text-align: center;
6089   --f7-actions-button-height: 57px;
6090   --f7-actions-button-height-landscape: 44px;
6091   --f7-actions-button-font-size: 20px;
6092   --f7-actions-button-icon-size: 28px;
6093   --f7-actions-button-justify-content: center;
6094   --f7-actions-label-padding: 8px 10px;
6095   --f7-actions-label-text-color: #8a8a8a;
6096   --f7-actions-label-font-size: 13px;
6097   --f7-actions-label-justify-content: center;
6098   --f7-actions-group-border-color: transparent;
6099   --f7-actions-group-margin: 8px;
6100   --f7-actions-grid-button-icon-size: 48px;
6101 }
6102 .md {
6103   --f7-actions-bg-color: #fff;
6104   --f7-actions-border-radius: 0px;
6105   --f7-actions-button-border-color: transparent;
6106   --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
6107   --f7-actions-button-pressed-bg-color: #e5e5e5;
6108   --f7-actions-button-padding: 0 16px;
6109   --f7-actions-button-text-align: left;
6110   --f7-actions-button-height: 48px;
6111   --f7-actions-button-height-landscape: 48px;
6112   --f7-actions-button-font-size: 16px;
6113   --f7-actions-button-icon-size: 24px;
6114   --f7-actions-button-justify-content: space-between;
6115   --f7-actions-label-padding: 12px 16px;
6116   --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
6117   --f7-actions-label-font-size: 16px;
6118   --f7-actions-label-justify-content: flex-start;
6119   --f7-actions-group-border-color: #d2d2d6;
6120   --f7-actions-group-margin: 0px;
6121   --f7-actions-grid-button-icon-size: 48px;
6122 }
6123 .aurora {
6124   --f7-actions-bg-color: #fff;
6125   --f7-actions-border-radius: 4px;
6126   --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
6127   /*
6128   --f7-actions-button-text-color: var(--f7-theme-color);
6129   */
6130   --f7-actions-button-pressed-bg-color: #e5e5e5;
6131   --f7-actions-button-padding: 0 15px;
6132   --f7-actions-button-text-align: center;
6133   --f7-actions-button-height: 32px;
6134   --f7-actions-button-height-landscape: 32px;
6135   --f7-actions-button-font-size: 14px;
6136   --f7-actions-button-icon-size: 18px;
6137   --f7-actions-button-justify-content: space-between;
6138   --f7-actions-label-padding: 10px 15px;
6139   --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
6140   --f7-actions-label-font-size: 12px;
6141   --f7-actions-label-justify-content: center;
6142   --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
6143   --f7-actions-group-margin: 15px;
6144   --f7-actions-grid-button-icon-size: 32px;
6145 }
6146 .actions-modal {
6147   position: absolute;
6148   left: 0;
6149   bottom: 0;
6150   z-index: 13500;
6151   width: 100%;
6152   transform: translate3d(0, 100%, 0);
6153   display: none;
6154   max-height: 100%;
6155   will-change: scroll-position;
6156   overflow: auto;
6157   -webkit-overflow-scrolling: touch;
6158   transition-property: transform;
6159   will-change: transform;
6160 }
6161 .actions-modal.modal-in,
6162 .actions-modal.modal-out {
6163   transition-duration: 300ms;
6164 }
6165 .actions-modal.not-animated {
6166   transition-duration: 0ms;
6167 }
6168 .actions-modal.modal-in {
6169   transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
6170 }
6171 .actions-modal.modal-out {
6172   z-index: 13499;
6173   transform: translate3d(0, 100%, 0);
6174 }
6175 @media (min-width: 496px) {
6176   .actions-modal {
6177     width: 480px;
6178     left: 50%;
6179     margin-left: -240px;
6180   }
6181 }
6182 @media (orientation: landscape) {
6183   .actions-modal {
6184     --f7-actions-button-height: var(--f7-actions-button-height-landscape);
6185   }
6186 }
6187 .actions-group {
6188   overflow: hidden;
6189   position: relative;
6190   margin: var(--f7-actions-group-margin);
6191   border-radius: var(--f7-actions-border-radius);
6192   transform: translate3d(0, 0, 0);
6193 }
6194 .actions-group:after {
6195   content: '';
6196   position: absolute;
6197   background-color: var(--f7-actions-group-border-color);
6198   display: block;
6199   z-index: 15;
6200   top: auto;
6201   right: auto;
6202   bottom: 0;
6203   left: 0;
6204   height: 1px;
6205   width: 100%;
6206   transform-origin: 50% 100%;
6207   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6208 }
6209 .actions-group:last-child:after {
6210   display: none !important;
6211 }
6212 .actions-button,
6213 .actions-label {
6214   width: 100%;
6215   font-weight: normal;
6216   margin: 0;
6217   box-sizing: border-box;
6218   display: block;
6219   position: relative;
6220   overflow: hidden;
6221   text-align: var(--f7-actions-button-text-align);
6222   background: var(--f7-actions-bg-color);
6223 }
6224 .actions-button:after,
6225 .actions-label:after {
6226   content: '';
6227   position: absolute;
6228   background-color: var(--f7-actions-button-border-color);
6229   display: block;
6230   z-index: 15;
6231   top: auto;
6232   right: auto;
6233   bottom: 0;
6234   left: 0;
6235   height: 1px;
6236   width: 100%;
6237   transform-origin: 50% 100%;
6238   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6239 }
6240 .actions-button:first-child,
6241 .actions-label:first-child {
6242   border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
6243 }
6244 .actions-button:last-child,
6245 .actions-label:last-child {
6246   border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
6247 }
6248 .actions-button:last-child:after,
6249 .actions-label:last-child:after {
6250   display: none !important;
6251 }
6252 .actions-button:first-child:last-child,
6253 .actions-label:first-child:last-child {
6254   border-radius: var(--f7-actions-border-radius);
6255 }
6256 .actions-button a,
6257 .actions-label a {
6258   text-decoration: none;
6259   color: inherit;
6260   display: block;
6261 }
6262 .actions-button b,
6263 .actions-label b,
6264 .actions-button.actions-button-bold,
6265 .actions-label.actions-button-bold {
6266   font-weight: 600;
6267 }
6268 .actions-button {
6269   cursor: pointer;
6270   display: flex;
6271   color: var(--f7-actions-button-text-color, var(--f7-theme-color));
6272   font-size: var(--f7-actions-button-font-size);
6273   height: var(--f7-actions-button-height);
6274   line-height: var(--f7-actions-button-height);
6275   padding: var(--f7-actions-button-padding);
6276   justify-content: var(--f7-actions-button-justify-content);
6277   z-index: 10;
6278 }
6279 .actions-button.active-state {
6280   background-color: var(--f7-actions-button-pressed-bg-color) !important;
6281 }
6282 .actions-button[class*="color-"] {
6283   color: var(--f7-theme-color);
6284 }
6285 .actions-button-media {
6286   flex-shrink: 0;
6287   display: flex;
6288   align-items: center;
6289 }
6290 .actions-button-media i.icon {
6291   width: var(--f7-actions-button-icon-size);
6292   height: var(--f7-actions-button-icon-size);
6293   font-size: var(--f7-actions-button-icon-size);
6294 }
6295 .actions-button a,
6296 .actions-button-text {
6297   position: relative;
6298   overflow: hidden;
6299   white-space: nowrap;
6300   text-overflow: ellipsis;
6301 }
6302 .actions-button-text {
6303   width: 100%;
6304   flex-shrink: 1;
6305   text-align: var(--f7-actions-button-text-align);
6306 }
6307 .actions-label {
6308   line-height: 1.3;
6309   display: flex;
6310   align-items: center;
6311   font-size: var(--f7-actions-label-font-size);
6312   color: var(--f7-actions-label-text-color);
6313   padding: var(--f7-actions-label-padding);
6314   justify-content: var(--f7-actions-label-justify-content);
6315   min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
6316 }
6317 .actions-label[class*=" color-"] {
6318   --f7-actions-label-text-color: var(--f7-theme-color);
6319 }
6320 .actions-grid .actions-group {
6321   display: flex;
6322   flex-wrap: wrap;
6323   justify-content: flex-start;
6324   border-radius: 0;
6325   background: var(--f7-actions-bg-color);
6326   margin-top: 0;
6327 }
6328 .actions-grid .actions-group:first-child {
6329   border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
6330 }
6331 .actions-grid .actions-group:last-child {
6332   border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
6333 }
6334 .actions-grid .actions-group:first-child:last-child {
6335   border-radius: var(--f7-actions-border-radius);
6336 }
6337 .actions-grid .actions-group:not(:last-child) {
6338   margin-bottom: 0;
6339 }
6340 .actions-grid .actions-button,
6341 .actions-grid .actions-label {
6342   border-radius: 0 !important;
6343   background: none;
6344 }
6345 .actions-grid .actions-button {
6346   width: 33.33333333%;
6347   display: block;
6348   color: var(--f7-actions-grid-button-text-color);
6349   height: auto;
6350   line-height: 1;
6351   padding: 16px;
6352 }
6353 .actions-grid .actions-button:after {
6354   display: none !important;
6355 }
6356 .actions-grid .actions-button-media {
6357   margin-left: auto !important;
6358   margin-right: auto !important;
6359   width: var(--f7-actions-grid-button-icon-size);
6360   height: var(--f7-actions-grid-button-icon-size);
6361 }
6362 .actions-grid .actions-button-media i.icon {
6363   width: var(--f7-actions-grid-button-icon-size);
6364   height: var(--f7-actions-grid-button-icon-size);
6365   font-size: var(--f7-actions-grid-button-icon-size);
6366 }
6367 .actions-grid .actions-button-text {
6368   margin-left: 0 !important;
6369   text-align: center !important;
6370   margin-top: 8px;
6371   line-height: 1.33em;
6372   height: 1.33em;
6373   font-size: var(--f7-actions-grid-button-font-size);
6374 }
6375 .ios .actions-button-media {
6376   margin-left: 15px;
6377 }
6378 .ios .actions-button-media + .actions-button-text {
6379   text-align: left;
6380   margin-left: 15px;
6381 }
6382 .md .actions-button {
6383   transition-duration: 300ms;
6384 }
6385 .md .actions-button-media {
6386   min-width: 40px;
6387 }
6388 .md .actions-button-media + .actions-button-text {
6389   margin-left: 16px;
6390 }
6391 .aurora .actions-button-media {
6392   margin-left: 15px;
6393 }
6394 .aurora .actions-button-media + .actions-button-text {
6395   text-align: left;
6396   margin-left: 15px;
6397 }
6398 /* === Sheet Modal === */
6399 :root {
6400   --f7-sheet-height: 260px;
6401 }
6402 .ios {
6403   --f7-sheet-bg-color: #cfd5da;
6404   --f7-sheet-border-color: #929499;
6405 }
6406 .ios .theme-dark,
6407 .ios.theme-dark {
6408   --f7-sheet-bg-color: #171717;
6409   --f7-sheet-border-color: var(--f7-bars-border-color);
6410 }
6411 .md {
6412   --f7-sheet-bg-color: #fff;
6413   --f7-sheet-border-color: transparent;
6414 }
6415 .md .theme-dark,
6416 .md.theme-dark {
6417   --f7-sheet-bg-color: #202020;
6418   --f7-sheet-border-color: transparent;
6419 }
6420 .aurora {
6421   --f7-sheet-bg-color: #fff;
6422   --f7-sheet-border-color: transparent;
6423 }
6424 .aurora .theme-dark,
6425 .aurora.theme-dark {
6426   --f7-sheet-bg-color: #202020;
6427   --f7-sheet-border-color: transparent;
6428 }
6429 .sheet-backdrop {
6430   z-index: 11000;
6431 }
6432 .sheet-modal {
6433   position: absolute;
6434   left: 0;
6435   bottom: 0;
6436   width: 100%;
6437   height: var(--f7-sheet-height);
6438   display: none;
6439   box-sizing: border-box;
6440   transition-property: transform;
6441   transform: translate3d(0, 100%, 0);
6442   background: var(--f7-sheet-bg-color);
6443   z-index: 12500;
6444   will-change: transform;
6445 }
6446 .sheet-modal.modal-in,
6447 .sheet-modal.modal-out {
6448   transition-duration: 300ms;
6449 }
6450 .sheet-modal.not-animated {
6451   transition-duration: 0ms;
6452 }
6453 .sheet-modal.modal-in {
6454   display: block;
6455   transform: translate3d(0, 0, 0);
6456 }
6457 .sheet-modal.modal-in-swipe-step {
6458   display: block;
6459   transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
6460 }
6461 .sheet-modal.modal-out {
6462   transform: translate3d(0, 100%, 0);
6463 }
6464 .sheet-modal .sheet-modal-inner {
6465   height: 100%;
6466   position: relative;
6467   overflow: hidden;
6468 }
6469 .sheet-modal .toolbar {
6470   position: relative;
6471   width: 100%;
6472 }
6473 .sheet-modal .toolbar:after,
6474 .sheet-modal .toolbar:before {
6475   display: none;
6476 }
6477 .sheet-modal .toolbar ~ * .page-content {
6478   padding-top: 0;
6479   padding-bottom: 0;
6480 }
6481 .sheet-modal .toolbar + .sheet-modal-inner {
6482   height: calc(100% - var(--f7-toolbar-height));
6483 }
6484 .sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
6485   padding-bottom: 0;
6486   padding-top: 0;
6487 }
6488 .sheet-modal-top:after {
6489   content: '';
6490   position: absolute;
6491   background-color: var(--f7-sheet-border-color);
6492   display: block;
6493   z-index: 15;
6494   top: auto;
6495   right: auto;
6496   bottom: 0;
6497   left: 0;
6498   height: 1px;
6499   width: 100%;
6500   transform-origin: 50% 100%;
6501   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6502 }
6503 .sheet-modal-top:after {
6504   z-index: 600;
6505   -webkit-backface-visibility: hidden;
6506           backface-visibility: hidden;
6507   transform-style: preserve-3d;
6508 }
6509 .sheet-modal-bottom:before,
6510 .sheet-modal:not(.sheet-modal-top):before {
6511   content: '';
6512   position: absolute;
6513   background-color: var(--f7-sheet-border-color);
6514   display: block;
6515   z-index: 15;
6516   top: 0;
6517   right: auto;
6518   bottom: auto;
6519   left: 0;
6520   height: 1px;
6521   width: 100%;
6522   transform-origin: 50% 0%;
6523   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6524 }
6525 .sheet-modal-bottom:before,
6526 .sheet-modal:not(.sheet-modal-top):before {
6527   z-index: 600;
6528   -webkit-backface-visibility: hidden;
6529           backface-visibility: hidden;
6530   transform-style: preserve-3d;
6531 }
6532 .sheet-modal-bottom .toolbar ~ .sheet-modal-inner .page-content,
6533 .sheet-modal:not(.sheet-modal-top) .toolbar ~ .sheet-modal-inner .page-content,
6534 .sheet-modal-bottom .sheet-modal-inner > .page-content,
6535 .sheet-modal:not(.sheet-modal-top) .sheet-modal-inner > .page-content {
6536   padding-bottom: var(--f7-safe-area-bottom);
6537 }
6538 .sheet-modal-top {
6539   bottom: auto;
6540   top: var(--f7-statusbar-height);
6541   transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
6542 }
6543 .sheet-modal-top.modal-out {
6544   transform: translate3d(0, calc(-100% - var(--f7-statusbar-height)), 0);
6545 }
6546 .sheet-modal-top .toolbar-bottom {
6547   position: absolute;
6548 }
6549 .sheet-modal-top .toolbar-top ~ .sheet-modal-inner .page-content {
6550   padding-top: 0;
6551 }
6552 .md .sheet-modal .toolbar a.link:not(.tab-link) {
6553   flex-shrink: 0;
6554 }
6555 /* === Toast === */
6556 :root {
6557   --f7-toast-text-color: #fff;
6558   --f7-toast-font-size: 14px;
6559   --f7-toast-icon-size: 48px;
6560 }
6561 .ios {
6562   --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
6563   --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
6564   --f7-toast-padding-horizontal: 15px;
6565   --f7-toast-padding-vertical: 12px;
6566   --f7-toast-border-radius: 8px;
6567   --f7-toast-button-min-width: 64px;
6568 }
6569 .md {
6570   --f7-toast-bg-color: #323232;
6571   --f7-toast-padding-horizontal: 24px;
6572   --f7-toast-padding-vertical: 14px;
6573   --f7-toast-border-radius: 4px;
6574   --f7-toast-button-min-width: 64px;
6575 }
6576 .aurora {
6577   --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
6578   --f7-toast-padding-horizontal: 10px;
6579   --f7-toast-padding-vertical: 10px;
6580   --f7-toast-border-radius: 4px;
6581   --f7-toast-button-min-width: 32px;
6582 }
6583 .toast {
6584   transition-property: transform, opacity;
6585   position: absolute;
6586   max-width: 568px;
6587   z-index: 20000;
6588   color: var(--f7-toast-text-color);
6589   font-size: var(--f7-toast-font-size);
6590   box-sizing: border-box;
6591   background-color: var(--f7-toast-bg-color);
6592   opacity: 0;
6593   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
6594 }
6595 .toast.modal-in {
6596   opacity: 1;
6597 }
6598 .toast .toast-content {
6599   display: flex;
6600   justify-content: space-between;
6601   align-items: center;
6602   box-sizing: border-box;
6603   padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
6604 }
6605 .toast .toast-text {
6606   line-height: 20px;
6607   flex-shrink: 1;
6608   min-width: 0;
6609 }
6610 .toast .toast-button {
6611   flex-shrink: 0;
6612   min-width: var(--f7-toast-button-min-width);
6613   margin-top: -8px;
6614   margin-bottom: -8px;
6615 }
6616 .toast.toast-with-icon .toast-content {
6617   display: block;
6618   text-align: center;
6619 }
6620 .toast.toast-with-icon .toast-text {
6621   text-align: center;
6622 }
6623 .toast.toast-with-icon .toast-icon .f7-icons,
6624 .toast.toast-with-icon .toast-icon .material-icons {
6625   font-size: var(--f7-toast-icon-size);
6626   width: var(--f7-toast-icon-size);
6627   height: var(--f7-toast-icon-size);
6628 }
6629 .toast.toast-center {
6630   top: 50%;
6631 }
6632 .toast.toast-top {
6633   margin-top: var(--f7-statusbar-height);
6634 }
6635 .ios .toast {
6636   transition-duration: 300ms;
6637   width: 100%;
6638   left: 0;
6639 }
6640 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
6641   .ios .toast {
6642     background: var(--f7-toast-translucent-bg-color-ios);
6643     -webkit-backdrop-filter: blur(10px);
6644             backdrop-filter: blur(10px);
6645   }
6646 }
6647 .ios .toast.toast-top {
6648   top: 0;
6649   transform: translate3d(0, -100%, 0);
6650 }
6651 .ios .toast.toast-top.modal-in {
6652   transform: translate3d(0, 0%, 0);
6653 }
6654 .ios .toast.toast-center {
6655   width: auto;
6656   left: 50%;
6657   border-radius: var(--f7-toast-border-radius);
6658   transform: translate3d(-50%, -50%, 0);
6659 }
6660 .ios .toast.toast-center.modal-in {
6661   transform: translate3d(-50%, -50%, 0);
6662 }
6663 .ios .toast.toast-bottom {
6664   bottom: 0;
6665   transform: translate3d(0, 100%, 0);
6666 }
6667 .ios .toast.toast-bottom.modal-in {
6668   transform: translate3d(0, 0%, 0);
6669 }
6670 @media (max-width: 568px) {
6671   .ios .toast.toast-bottom .toast-content {
6672     padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
6673   }
6674 }
6675 @media (min-width: 569px) {
6676   .ios .toast {
6677     left: 50%;
6678     margin-left: -284px;
6679     border-radius: var(--f7-toast-border-radius);
6680   }
6681   .ios .toast.toast-top {
6682     top: 15px;
6683   }
6684   .ios .toast.toast-center {
6685     margin-left: 0;
6686   }
6687   .ios .toast.toast-bottom {
6688     margin-bottom: calc(15px + var(--f7-safe-area-bottom));
6689   }
6690 }
6691 @media (min-width: 1024px) {
6692   .ios .toast {
6693     margin-left: 0;
6694     width: auto;
6695   }
6696   .ios .toast.toast-bottom,
6697   .ios .toast.toast-top {
6698     left: 15px;
6699   }
6700 }
6701 .ios .toast-button {
6702   margin-right: 15px;
6703   margin-left: calc(-1 * var(--f7-button-padding-horizontal));
6704 }
6705 .md .toast {
6706   transition-duration: 200ms;
6707   border-radius: var(--f7-toast-border-radius);
6708   left: 8px;
6709   width: calc(100% - 16px);
6710   transform: scale(0.9);
6711 }
6712 .md .toast.modal-in {
6713   transform: scale(1);
6714 }
6715 .md .toast.modal-out {
6716   transform: scale(1);
6717 }
6718 .md .toast.toast-top {
6719   top: 8px;
6720 }
6721 .md .toast.toast-center {
6722   left: 50%;
6723   width: auto;
6724   transform: scale(0.9) translate3d(-55%, -55%, 0);
6725 }
6726 .md .toast.toast-center.modal-in {
6727   transform: scale(1) translate3d(-50%, -50%, 0);
6728 }
6729 .md .toast.toast-center.modal-out {
6730   transform: scale(1) translate3d(-50%, -50%, 0);
6731 }
6732 .md .toast.toast-bottom {
6733   bottom: calc(8px + var(--f7-safe-area-bottom));
6734 }
6735 @media (min-width: 584px) {
6736   .md .toast {
6737     left: 50%;
6738     margin-left: -284px;
6739   }
6740   .md .toast.toast-center {
6741     margin-left: 0;
6742   }
6743 }
6744 @media (min-width: 1024px) {
6745   .md .toast {
6746     margin-left: 0;
6747     width: auto;
6748   }
6749   .md .toast.toast-bottom,
6750   .md .toast.toast-top {
6751     left: 24px;
6752   }
6753   .md .toast.toast-bottom {
6754     bottom: calc(24px + var(--f7-safe-area-bottom));
6755   }
6756   .md .toast.toast-top {
6757     top: 24px;
6758   }
6759 }
6760 .md .toast-button {
6761   margin-right: 16px;
6762   margin-left: -8px;
6763 }
6764 .aurora .toast {
6765   transition-duration: 200ms;
6766   border-radius: var(--f7-toast-border-radius);
6767   left: 10px;
6768   width: calc(100% - 20px);
6769   transform: scale(0.9);
6770 }
6771 .aurora .toast.modal-in {
6772   transform: scale(1);
6773 }
6774 .aurora .toast.modal-out {
6775   transform: scale(1);
6776 }
6777 .aurora .toast.toast-top {
6778   top: 10px;
6779 }
6780 .aurora .toast.toast-center {
6781   left: 50%;
6782   width: auto;
6783   transform: scale(0.9) translate3d(-55%, -55%, 0);
6784 }
6785 .aurora .toast.toast-center.modal-in {
6786   transform: scale(1) translate3d(-50%, -50%, 0);
6787 }
6788 .aurora .toast.toast-center.modal-out {
6789   transform: scale(1) translate3d(-50%, -50%, 0);
6790 }
6791 .aurora .toast.toast-bottom {
6792   bottom: calc(10px + var(--f7-safe-area-bottom));
6793 }
6794 @media (min-width: 584px) {
6795   .aurora .toast {
6796     left: 50%;
6797     margin-left: -284px;
6798   }
6799   .aurora .toast.toast-center {
6800     margin-left: 0;
6801   }
6802 }
6803 @media (min-width: 1024px) {
6804   .aurora .toast {
6805     margin-left: 0;
6806     width: auto;
6807   }
6808   .aurora .toast.toast-bottom,
6809   .aurora .toast.toast-top {
6810     left: 10px;
6811   }
6812 }
6813 .aurora .toast-button {
6814   margin-right: 10px;
6815 }
6816 /* === Preloader === */
6817 :root {
6818   --f7-preloader-modal-padding: 8px;
6819   --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
6820 }
6821 .ios {
6822   --f7-preloader-color: #6c6c6c;
6823   --f7-preloader-size: 20px;
6824   --f7-preloader-modal-preloader-size: 34px;
6825   --f7-preloader-modal-border-radius: 5px;
6826 }
6827 .md {
6828   --f7-preloader-color: #757575;
6829   --f7-preloader-size: 32px;
6830   --f7-preloader-modal-preloader-size: 32px;
6831   --f7-preloader-modal-border-radius: 4px;
6832 }
6833 .aurora {
6834   --f7-preloader-color: #757575;
6835   --f7-preloader-size: 24px;
6836   --f7-preloader-modal-preloader-size: 24px;
6837   --f7-preloader-modal-border-radius: 4px;
6838 }
6839 .preloader {
6840   display: inline-block;
6841   vertical-align: middle;
6842   width: var(--f7-preloader-size);
6843   height: var(--f7-preloader-size);
6844   font-size: 0;
6845   position: relative;
6846 }
6847 /* === Preloader Modal === */
6848 .preloader-backdrop {
6849   visibility: visible;
6850   opacity: 0;
6851   background: none;
6852   z-index: 14000;
6853 }
6854 .preloader-modal {
6855   position: absolute;
6856   left: 50%;
6857   top: 50%;
6858   padding: var(--f7-preloader-modal-padding);
6859   background: var(--f7-preloader-modal-bg-color);
6860   z-index: 14500;
6861   transform: translateX(-50%) translateY(-50%);
6862   border-radius: var(--f7-preloader-modal-border-radius);
6863 }
6864 .preloader-modal .preloader {
6865   --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
6866   display: block !important;
6867 }
6868 html.with-modal-preloader .page-content {
6869   overflow: hidden;
6870   -webkit-overflow-scrolling: auto;
6871 }
6872 .preloader[class*="color-"] {
6873   --f7-preloader-color: var(--f7-theme-color);
6874 }
6875 .ios .preloader {
6876   animation: ios-preloader-spin 1s steps(12, end) infinite;
6877 }
6878 .ios .preloader .preloader-inner-line {
6879   display: block;
6880   width: 10%;
6881   height: 25%;
6882   border-radius: 100px;
6883   background: var(--f7-preloader-color);
6884   position: absolute;
6885   left: 50%;
6886   top: 50%;
6887   transform-origin: center 200%;
6888 }
6889 .ios .preloader .preloader-inner-line:nth-child(1) {
6890   transform: translate(-50%, -200%) rotate(0deg);
6891   opacity: 0.27;
6892 }
6893 .ios .preloader .preloader-inner-line:nth-child(2) {
6894   transform: translate(-50%, -200%) rotate(30deg);
6895   opacity: 0.32272727;
6896 }
6897 .ios .preloader .preloader-inner-line:nth-child(3) {
6898   transform: translate(-50%, -200%) rotate(60deg);
6899   opacity: 0.37545455;
6900 }
6901 .ios .preloader .preloader-inner-line:nth-child(4) {
6902   transform: translate(-50%, -200%) rotate(90deg);
6903   opacity: 0.42818182;
6904 }
6905 .ios .preloader .preloader-inner-line:nth-child(5) {
6906   transform: translate(-50%, -200%) rotate(120deg);
6907   opacity: 0.48090909;
6908 }
6909 .ios .preloader .preloader-inner-line:nth-child(6) {
6910   transform: translate(-50%, -200%) rotate(150deg);
6911   opacity: 0.53363636;
6912 }
6913 .ios .preloader .preloader-inner-line:nth-child(7) {
6914   transform: translate(-50%, -200%) rotate(180deg);
6915   opacity: 0.58636364;
6916 }
6917 .ios .preloader .preloader-inner-line:nth-child(8) {
6918   transform: translate(-50%, -200%) rotate(210deg);
6919   opacity: 0.63909091;
6920 }
6921 .ios .preloader .preloader-inner-line:nth-child(9) {
6922   transform: translate(-50%, -200%) rotate(240deg);
6923   opacity: 0.69181818;
6924 }
6925 .ios .preloader .preloader-inner-line:nth-child(10) {
6926   transform: translate(-50%, -200%) rotate(270deg);
6927   opacity: 0.74454545;
6928 }
6929 .ios .preloader .preloader-inner-line:nth-child(11) {
6930   transform: translate(-50%, -200%) rotate(300deg);
6931   opacity: 0.79727273;
6932 }
6933 .ios .preloader .preloader-inner-line:nth-child(12) {
6934   transform: translate(-50%, -200%) rotate(330deg);
6935   opacity: 0.85;
6936 }
6937 @keyframes ios-preloader-spin {
6938   100% {
6939     transform: rotate(360deg);
6940   }
6941 }
6942 .md .preloader {
6943   animation: md-preloader-outer 3300ms linear infinite;
6944 }
6945 @keyframes md-preloader-outer {
6946   0% {
6947     transform: rotate(0);
6948   }
6949   100% {
6950     transform: rotate(360deg);
6951   }
6952 }
6953 .md .preloader-inner {
6954   position: relative;
6955   display: block;
6956   width: 100%;
6957   height: 100%;
6958   animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
6959 }
6960 .md .preloader-inner .preloader-inner-gap {
6961   position: absolute;
6962   width: 2px;
6963   left: 50%;
6964   margin-left: -1px;
6965   top: 0;
6966   bottom: 0;
6967   box-sizing: border-box;
6968   border-top: 4px solid var(--f7-preloader-color);
6969 }
6970 .md .preloader-inner .preloader-inner-left,
6971 .md .preloader-inner .preloader-inner-right {
6972   position: absolute;
6973   top: 0;
6974   height: 100%;
6975   width: 50%;
6976   overflow: hidden;
6977 }
6978 .md .preloader-inner .preloader-inner-half-circle {
6979   position: absolute;
6980   top: 0;
6981   height: 100%;
6982   width: 200%;
6983   box-sizing: border-box;
6984   border: 4px solid var(--f7-preloader-color);
6985   border-bottom-color: transparent !important;
6986   border-radius: 50%;
6987   animation-iteration-count: infinite;
6988   animation-duration: 1.3125s;
6989   animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
6990 }
6991 .md .preloader-inner .preloader-inner-left {
6992   left: 0;
6993 }
6994 .md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
6995   left: 0;
6996   border-right-color: transparent !important;
6997   animation-name: md-preloader-left-rotate;
6998 }
6999 .md .preloader-inner .preloader-inner-right {
7000   right: 0;
7001 }
7002 .md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
7003   right: 0;
7004   border-left-color: transparent !important;
7005   animation-name: md-preloader-right-rotate;
7006 }
7007 .md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
7008   animation-name: md-preloader-left-rotate-multicolor;
7009 }
7010 .md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
7011   animation-name: md-preloader-right-rotate-multicolor;
7012 }
7013 @keyframes md-preloader-left-rotate {
7014   0%,
7015   100% {
7016     transform: rotate(130deg);
7017   }
7018   50% {
7019     transform: rotate(-5deg);
7020   }
7021 }
7022 @keyframes md-preloader-right-rotate {
7023   0%,
7024   100% {
7025     transform: rotate(-130deg);
7026   }
7027   50% {
7028     transform: rotate(5deg);
7029   }
7030 }
7031 @keyframes md-preloader-inner-rotate {
7032   12.5% {
7033     transform: rotate(135deg);
7034   }
7035   25% {
7036     transform: rotate(270deg);
7037   }
7038   37.5% {
7039     transform: rotate(405deg);
7040   }
7041   50% {
7042     transform: rotate(540deg);
7043   }
7044   62.5% {
7045     transform: rotate(675deg);
7046   }
7047   75% {
7048     transform: rotate(810deg);
7049   }
7050   87.5% {
7051     transform: rotate(945deg);
7052   }
7053   100% {
7054     transform: rotate(1080deg);
7055   }
7056 }
7057 @keyframes md-preloader-left-rotate-multicolor {
7058   0%,
7059   100% {
7060     border-left-color: #4285F4;
7061     transform: rotate(130deg);
7062   }
7063   75% {
7064     border-left-color: #1B9A59;
7065     border-top-color: #1B9A59;
7066   }
7067   50% {
7068     border-left-color: #F7C223;
7069     border-top-color: #F7C223;
7070     transform: rotate(-5deg);
7071   }
7072   25% {
7073     border-left-color: #DE3E35;
7074     border-top-color: #DE3E35;
7075   }
7076 }
7077 @keyframes md-preloader-right-rotate-multicolor {
7078   0%,
7079   100% {
7080     border-right-color: #4285F4;
7081     transform: rotate(-130deg);
7082   }
7083   75% {
7084     border-right-color: #1B9A59;
7085     border-top-color: #1B9A59;
7086   }
7087   50% {
7088     border-right-color: #F7C223;
7089     border-top-color: #F7C223;
7090     transform: rotate(5deg);
7091   }
7092   25% {
7093     border-top-color: #DE3E35;
7094     border-right-color: #DE3E35;
7095   }
7096 }
7097 .aurora .preloader-inner {
7098   position: absolute;
7099   left: 0;
7100   top: 0;
7101   width: 100%;
7102   height: 100%;
7103 }
7104 .aurora .preloader-inner-circle {
7105   width: 100%;
7106   height: 100%;
7107   position: absolute;
7108   left: 0;
7109   top: 0;
7110   border-radius: 50%;
7111   border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
7112   border-top-color: transparent;
7113   box-sizing: border-box;
7114   animation: aurora-preloader-rotate 1s linear infinite;
7115 }
7116 .aurora .preloader.color-multi .preloader-inner-circle {
7117   animation: aurora-preloader-rotate 1s linear infinite, aurora-preloader-multicolor 2s linear infinite;
7118 }
7119 @keyframes aurora-preloader-rotate {
7120   0% {
7121     transform: rotate(0deg);
7122   }
7123   100% {
7124     transform: rotate(360deg);
7125   }
7126 }
7127 @keyframes aurora-preloader-multicolor {
7128   0%,
7129   100% {
7130     border-color: #2196f3;
7131     border-top-color: transparent;
7132   }
7133   25% {
7134     border-color: #ff3b30;
7135     border-top-color: transparent;
7136   }
7137   50% {
7138     border-color: #4cd964;
7139     border-top-color: transparent;
7140   }
7141   75% {
7142     border-color: #ff9500;
7143     border-top-color: transparent;
7144   }
7145 }
7146 /* === Progressbar === */
7147 :root {
7148   /*
7149   --f7-progressbar-progress-color: var(--f7-theme-color);
7150   */
7151 }
7152 .ios {
7153   --f7-progressbar-bg-color: #b6b6b6;
7154   --f7-progressbar-height: 2px;
7155   --f7-progressbar-border-radius: 2px;
7156 }
7157 .md {
7158   /*
7159   --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
7160   */
7161   --f7-progressbar-height: 4px;
7162   --f7-progressbar-border-radius: 0px;
7163 }
7164 .aurora {
7165   --f7-progressbar-bg-color: #dbdbdb;
7166   --f7-progressbar-height: 6px;
7167   --f7-progressbar-border-radius: 3px;
7168 }
7169 .aurora .theme-dark,
7170 .aurora.theme-dark {
7171   --f7-progressbar-bg-color: #444;
7172 }
7173 .progressbar,
7174 .progressbar-infinite {
7175   width: 100%;
7176   overflow: hidden;
7177   position: relative;
7178   display: block;
7179   transform-style: preserve-3d;
7180   background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
7181   transform-origin: center top;
7182   height: var(--f7-progressbar-height);
7183   border-radius: var(--f7-progressbar-border-radius);
7184 }
7185 .progressbar {
7186   vertical-align: middle;
7187 }
7188 .progressbar span {
7189   background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
7190   width: 100%;
7191   height: 100%;
7192   position: absolute;
7193   left: 0;
7194   top: 0;
7195   transform: translate3d(-100%, 0, 0);
7196   transition-duration: 150ms;
7197 }
7198 .progressbar-infinite {
7199   z-index: 15000;
7200 }
7201 .progressbar-infinite:before,
7202 .progressbar-infinite:after {
7203   content: '';
7204   position: absolute;
7205   left: 0;
7206   top: 0;
7207   width: 100%;
7208   height: 100%;
7209   transform-origin: left center;
7210   transform: translate3d(0, 0, 0);
7211   display: block;
7212   background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
7213 }
7214 .progressbar-infinite.color-multi {
7215   background: none !important;
7216 }
7217 .progressbar-in {
7218   animation: progressbar-in 150ms forwards;
7219 }
7220 .progressbar-out {
7221   animation: progressbar-out 150ms forwards;
7222 }
7223 body > .progressbar,
7224 .view > .progressbar,
7225 .views > .progressbar,
7226 .page > .progressbar,
7227 .panel > .progressbar,
7228 .popup > .progressbar,
7229 .framework7-root > .progressbar,
7230 body > .progressbar-infinite,
7231 .view > .progressbar-infinite,
7232 .views > .progressbar-infinite,
7233 .page > .progressbar-infinite,
7234 .panel > .progressbar-infinite,
7235 .popup > .progressbar-infinite,
7236 .framework7-root > .progressbar-infinite {
7237   position: absolute;
7238   left: 0;
7239   top: 0;
7240   z-index: 15000;
7241   border-radius: 0 !important;
7242   transform-origin: center top !important;
7243 }
7244 body > .progressbar,
7245 .framework7-root > .progressbar,
7246 body > .progressbar-infinite,
7247 .framework7-root > .progressbar-infinite {
7248   top: var(--f7-statusbar-height);
7249 }
7250 @keyframes progressbar-in {
7251   from {
7252     opacity: 0;
7253     transform: scaleY(0);
7254   }
7255   to {
7256     opacity: 1;
7257     transform: scaleY(1);
7258   }
7259 }
7260 @keyframes progressbar-out {
7261   from {
7262     opacity: 1;
7263     transform: scaleY(1);
7264   }
7265   to {
7266     opacity: 0;
7267     transform: scaleY(0);
7268   }
7269 }
7270 .ios .progressbar-infinite:before {
7271   animation: ios-progressbar-infinite 1s linear infinite;
7272 }
7273 .ios .progressbar-infinite:after {
7274   display: none;
7275 }
7276 .ios .progressbar-infinite.color-multi:before {
7277   width: 400%;
7278   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7279   background-size: 25% 100%;
7280   background-repeat: repeat-x;
7281   animation: ios-progressbar-infinite-multicolor 3s linear infinite;
7282 }
7283 @keyframes ios-progressbar-infinite {
7284   0% {
7285     transform: translate3d(-100%, 0, 0);
7286   }
7287   100% {
7288     transform: translate3d(100%, 0, 0);
7289   }
7290 }
7291 @keyframes ios-progressbar-infinite-multicolor {
7292   0% {
7293     transform: translate3d(0%, 0, 0);
7294   }
7295   100% {
7296     transform: translate3d(-50%, 0, 0);
7297   }
7298 }
7299 .md .progressbar-infinite:before {
7300   animation: md-progressbar-infinite-1 2s linear infinite;
7301 }
7302 .md .progressbar-infinite:after {
7303   animation: md-progressbar-infinite-2 2s linear infinite;
7304 }
7305 .md .progressbar-infinite.color-multi:before {
7306   background: none;
7307   animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
7308 }
7309 .md .progressbar-infinite.color-multi:after {
7310   background: none;
7311   animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
7312   transform-origin: center center;
7313 }
7314 @keyframes md-progressbar-infinite-1 {
7315   0% {
7316     transform: translateX(-10%) scaleX(0.1);
7317   }
7318   25% {
7319     transform: translateX(30%) scaleX(0.6);
7320   }
7321   50% {
7322     transform: translateX(100%) scaleX(1);
7323   }
7324   100% {
7325     transform: translateX(100%) scaleX(1);
7326   }
7327 }
7328 @keyframes md-progressbar-infinite-2 {
7329   0% {
7330     transform: translateX(-100%) scaleX(1);
7331   }
7332   40% {
7333     transform: translateX(-100%) scaleX(1);
7334   }
7335   75% {
7336     transform: translateX(60%) scaleX(0.35);
7337   }
7338   90% {
7339     transform: translateX(100%) scaleX(0.1);
7340   }
7341   100% {
7342     transform: translateX(100%) scaleX(0.1);
7343   }
7344 }
7345 @keyframes md-progressbar-infinite-multicolor-bg {
7346   0% {
7347     background-color: #4caf50;
7348   }
7349   25% {
7350     background-color: #f44336;
7351   }
7352   50% {
7353     background-color: #2196f3;
7354   }
7355   75% {
7356     background-color: #ffeb3b;
7357   }
7358 }
7359 @keyframes md-progressbar-infinite-multicolor-fill {
7360   0% {
7361     transform: scaleX(0);
7362     background-color: #f44336;
7363   }
7364   24.9% {
7365     transform: scaleX(1);
7366     background-color: #f44336;
7367   }
7368   25% {
7369     transform: scaleX(0);
7370     background-color: #2196f3;
7371   }
7372   49.9% {
7373     transform: scaleX(1);
7374     background-color: #2196f3;
7375   }
7376   50% {
7377     transform: scaleX(0);
7378     background-color: #ffeb3b;
7379   }
7380   74.9% {
7381     transform: scaleX(1);
7382     background-color: #ffeb3b;
7383   }
7384   75% {
7385     transform: scaleX(0);
7386     background-color: #4caf50;
7387   }
7388   100% {
7389     transform: scaleX(1);
7390     background-color: #4caf50;
7391   }
7392 }
7393 .aurora .progressbar,
7394 .aurora .progressbar-infinite,
7395 .aurora .progressbar span,
7396 .aurora .progressbar-infinite:before {
7397   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
7398 }
7399 .aurora .progressbar-infinite:before {
7400   animation: aurora-progressbar-infinite 1s linear infinite;
7401 }
7402 .aurora .progressbar-infinite:after {
7403   display: none;
7404 }
7405 .aurora .progressbar-infinite.color-multi:before {
7406   width: 400%;
7407   background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
7408   background-size: 25% 100%;
7409   background-repeat: repeat-x;
7410   animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
7411 }
7412 @keyframes aurora-progressbar-infinite {
7413   0% {
7414     transform: translate3d(-100%, 0, 0);
7415   }
7416   100% {
7417     transform: translate3d(100%, 0, 0);
7418   }
7419 }
7420 @keyframes aurora-progressbar-infinite-multicolor {
7421   0% {
7422     transform: translate3d(0%, 0, 0);
7423   }
7424   100% {
7425     transform: translate3d(-50%, 0, 0);
7426   }
7427 }
7428 /* === Sortable === */
7429 :root {
7430   --f7-sortable-handler-color: #c7c7cc;
7431   --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
7432 }
7433 :root .theme-dark,
7434 :root.theme-dark {
7435   --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
7436 }
7437 .ios {
7438   --f7-sortable-handler-width: 35px;
7439   --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
7440 }
7441 .md {
7442   --f7-sortable-handler-width: 42px;
7443   --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
7444 }
7445 .aurora {
7446   --f7-sortable-handler-width: 32px;
7447   --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
7448 }
7449 .sortable .sortable-handler {
7450   width: var(--f7-sortable-handler-width);
7451   height: 100%;
7452   position: absolute;
7453   top: 0;
7454   z-index: 10;
7455   opacity: 0;
7456   pointer-events: none;
7457   cursor: move;
7458   transition-duration: 300ms;
7459   display: flex;
7460   align-items: center;
7461   justify-content: center;
7462   overflow: hidden;
7463   left: var(--f7-safe-area-left);
7464 }
7465 .sortable .sortable-handler:after {
7466   font-family: 'framework7-core-icons';
7467   font-weight: normal;
7468   font-style: normal;
7469   line-height: 1;
7470   letter-spacing: normal;
7471   text-transform: none;
7472   white-space: nowrap;
7473   word-wrap: normal;
7474   direction: ltr;
7475   -webkit-font-smoothing: antialiased;
7476   text-rendering: optimizeLegibility;
7477   -moz-osx-font-smoothing: grayscale;
7478   -moz-font-feature-settings: "liga";
7479        font-feature-settings: "liga";
7480   text-align: center;
7481   display: block;
7482   width: 100%;
7483   height: 100%;
7484   font-size: 20px;
7485   transition-duration: 300ms;
7486   transform: translateX(10px);
7487   color: var(--f7-sortable-handler-color);
7488   overflow: hidden;
7489   height: 20px;
7490   width: 18px;
7491 }
7492 .sortable .item-inner {
7493   transition-duration: 300ms;
7494 }
7495 .sortable li.sorting {
7496   z-index: 50;
7497   background: var(--f7-sortable-sorting-item-bg-color);
7498   transition-duration: 0ms;
7499   box-shadow: var(--f7-sortable-sorting-item-box-shadow);
7500 }
7501 .sortable li.sorting .item-inner:after {
7502   display: none !important;
7503 }
7504 .sortable-sorting li {
7505   transition-duration: 300ms;
7506 }
7507 .sortable-enabled .sortable-handler {
7508   pointer-events: auto;
7509   opacity: 1;
7510 }
7511 .sortable-enabled .sortable-handler:after {
7512   transform: translateX(0px);
7513 }
7514 .sortable-enabled .item-link .item-inner,
7515 .sortable-enabled .item-link .item-title-row {
7516   background-image: none !important;
7517 }
7518 .list.sortable-enabled .item-inner,
7519 .list.sortable-enabled .item-link .item-inner,
7520 .list.sortable-enabled .item-link.no-chevron .item-inner,
7521 .list.sortable-enabled.no-chevron .item-link .item-inner,
7522 .list.sortable-enabled .no-chevron .item-link .item-inner,
7523 .no-chevron .list.sortable-enabled .item-link .item-inner {
7524   padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
7525 }
7526 .ios .sortable-handler:after {
7527   content: 'sort_ios';
7528 }
7529 .md .sortable-handler:after {
7530   content: 'sort_md';
7531 }
7532 .aurora .sortable-handler:after {
7533   content: 'sort_md';
7534   font-size: 16px;
7535   height: 16px;
7536 }
7537 /* === Swipeout === */
7538 :root {
7539   --f7-swipeout-button-text-color: #fff;
7540   --f7-swipeout-button-bg-color: #c7c7cc;
7541   --f7-swipeout-delete-button-bg-color: #ff3b30;
7542   --f7-swipeout-button-font-size: inherit;
7543   --f7-swipeout-button-font-weight: inherit;
7544 }
7545 .ios {
7546   --f7-swipeout-button-padding: 0 30px;
7547 }
7548 .md {
7549   --f7-swipeout-button-padding: 0 24px;
7550 }
7551 .aurora {
7552   --f7-swipeout-button-padding: 0 12px;
7553   --f7-swipeout-button-font-weight: 500;
7554 }
7555 .swipeout {
7556   overflow: hidden;
7557   transform-style: preserve-3d;
7558 }
7559 .swipeout-deleting {
7560   transition-duration: 300ms;
7561 }
7562 .swipeout-deleting .swipeout-content {
7563   transform: translateX(-100%);
7564 }
7565 .swipeout-transitioning .swipeout-content,
7566 .swipeout-transitioning .swipeout-actions-right a,
7567 .swipeout-transitioning .swipeout-actions-left a,
7568 .swipeout-transitioning .swipeout-overswipe {
7569   transition-duration: 300ms;
7570   transition-property: transform, left;
7571 }
7572 .swipeout-content {
7573   position: relative;
7574   z-index: 10;
7575 }
7576 .swipeout-overswipe {
7577   transition-duration: 200ms;
7578   transition-property: left;
7579 }
7580 .swipeout-actions-left,
7581 .swipeout-actions-right {
7582   position: absolute;
7583   top: 0;
7584   height: 100%;
7585   display: flex;
7586   direction: ltr;
7587 }
7588 .swipeout-actions-left > a,
7589 .swipeout-actions-right > a,
7590 .swipeout-actions-left > button,
7591 .swipeout-actions-right > button,
7592 .swipeout-actions-left > span,
7593 .swipeout-actions-right > span,
7594 .swipeout-actions-left > div,
7595 .swipeout-actions-right > div {
7596   color: var(--f7-swipeout-button-text-color);
7597   background: var(--f7-swipeout-button-bg-color);
7598   padding: var(--f7-swipeout-button-padding);
7599   display: flex;
7600   align-items: center;
7601   position: relative;
7602   left: 0;
7603   font-size: var(--f7-swipeout-button-font-size);
7604   font-weight: var(--f7-swipeout-button-font-weight);
7605 }
7606 .swipeout-actions-left > a:after,
7607 .swipeout-actions-right > a:after,
7608 .swipeout-actions-left > button:after,
7609 .swipeout-actions-right > button:after,
7610 .swipeout-actions-left > span:after,
7611 .swipeout-actions-right > span:after,
7612 .swipeout-actions-left > div:after,
7613 .swipeout-actions-right > div:after {
7614   content: '';
7615   position: absolute;
7616   top: 0;
7617   width: 600%;
7618   height: 100%;
7619   background: inherit;
7620   z-index: -1;
7621   transform: translate3d(0, 0, 0);
7622   pointer-events: none;
7623 }
7624 .swipeout-actions-left .swipeout-delete,
7625 .swipeout-actions-right .swipeout-delete {
7626   background: var(--f7-swipeout-delete-button-bg-color);
7627 }
7628 .swipeout-actions-right {
7629   right: 0%;
7630   transform: translateX(100%);
7631 }
7632 .swipeout-actions-right > a:after,
7633 .swipeout-actions-right > button:after,
7634 .swipeout-actions-right > span:after,
7635 .swipeout-actions-right > div:after {
7636   left: 100%;
7637   margin-left: -1px;
7638 }
7639 .swipeout-actions-left {
7640   left: 0%;
7641   transform: translateX(-100%);
7642 }
7643 .swipeout-actions-left > a:after,
7644 .swipeout-actions-left > button:after,
7645 .swipeout-actions-left > span:after,
7646 .swipeout-actions-left > div:after {
7647   right: 100%;
7648   margin-right: -1px;
7649 }
7650 .swipeout-actions-left [class*="color-"],
7651 .swipeout-actions-right [class*="color-"] {
7652   --f7-swipeout-button-bg-color: var(--f7-theme-color);
7653 }
7654 /* === Accordion === */
7655 .accordion-item-toggle {
7656   cursor: pointer;
7657   transition-duration: 300ms;
7658 }
7659 .accordion-item-toggle.active-state {
7660   transition-duration: 300ms;
7661 }
7662 .accordion-item-toggle.active-state > .item-inner:after {
7663   background-color: transparent;
7664 }
7665 .accordion-item-toggle .item-inner {
7666   transition-duration: 300ms;
7667   transition-property: background-color;
7668 }
7669 .accordion-item-toggle .item-inner:after {
7670   transition-duration: 300ms;
7671 }
7672 .accordion-item .item-link .item-inner:after {
7673   transition-duration: 300ms;
7674 }
7675 .accordion-item .list,
7676 .accordion-item .block {
7677   margin-top: 0;
7678   margin-bottom: 0;
7679 }
7680 .accordion-item .block > h1:first-child,
7681 .accordion-item .block > h2:first-child,
7682 .accordion-item .block > h3:first-child,
7683 .accordion-item .block > h4:first-child,
7684 .accordion-item .block > p:first-child {
7685   margin-top: 10px;
7686 }
7687 .accordion-item .block > h1:last-child,
7688 .accordion-item .block > h2:last-child,
7689 .accordion-item .block > h3:last-child,
7690 .accordion-item .block > h4:last-child,
7691 .accordion-item .block > p:last-child {
7692   margin-bottom: 10px;
7693 }
7694 .accordion-item-opened .accordion-item-toggle .item-inner:after,
7695 .accordion-item-opened > .item-link .item-inner:after {
7696   background-color: transparent;
7697 }
7698 .list li.accordion-item ul {
7699   padding-right: 0;
7700 }
7701 .accordion-item-content {
7702   position: relative;
7703   overflow: hidden;
7704   height: 0;
7705   font-size: 14px;
7706   transition-duration: 300ms;
7707 }
7708 .accordion-item-opened > .accordion-item-content {
7709   height: auto;
7710 }
7711 html.device-android-4 .accordion-item-content {
7712   transform: none;
7713 }
7714 .list .accordion-item-toggle .item-inner {
7715   padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-left));
7716 }
7717 .list .accordion-item-toggle .item-inner:before {
7718   font-family: 'framework7-core-icons';
7719   font-weight: normal;
7720   font-style: normal;
7721   line-height: 1;
7722   letter-spacing: normal;
7723   text-transform: none;
7724   white-space: nowrap;
7725   word-wrap: normal;
7726   direction: ltr;
7727   -webkit-font-smoothing: antialiased;
7728   text-rendering: optimizeLegibility;
7729   -moz-osx-font-smoothing: grayscale;
7730   -moz-font-feature-settings: "liga";
7731        font-feature-settings: "liga";
7732   text-align: center;
7733   display: block;
7734   width: 100%;
7735   height: 100%;
7736   position: absolute;
7737   top: 50%;
7738   width: 14px;
7739   height: 8px;
7740   margin-top: -4px;
7741   font-size: 20px;
7742   line-height: 14px;
7743   color: var(--f7-list-chevron-icon-color);
7744   pointer-events: none;
7745   left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
7746   content: 'chevron_left';
7747 }
7748 .list .accordion-item-toggle.active-state {
7749   background-color: var(--f7-list-link-pressed-bg-color);
7750 }
7751 .list .accordion-item-toggle .item-inner:before,
7752 .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
7753 .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
7754 .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
7755 .media-list .accordion-item > .item-link .item-title-row:before,
7756 .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
7757 .accordion-item.media-item > .item-link .item-title-row:before,
7758 .links-list .accordion-item > a:before {
7759   content: 'chevron_down';
7760   width: 14px;
7761   height: 8px;
7762   margin-top: -4px;
7763   line-height: 8px;
7764 }
7765 .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
7766 .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
7767 .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
7768 .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
7769 .media-list .accordion-item-opened > .item-link .item-title-row:before,
7770 .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
7771 .accordion-item-opened.media-item > .item-link .item-title-row:before,
7772 .links-list .accordion-item-opened > a:before {
7773   content: 'chevron_up';
7774   width: 14px;
7775   height: 8px;
7776   margin-top: -4px;
7777   line-height: 8px;
7778 }
7779 .aurora .list .accordion-item-toggle .item-inner:before,
7780 .aurora .list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
7781 .aurora .list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
7782 .aurora .media-list .accordion-item .accordion-item-toggle .item-title-row:before,
7783 .aurora .media-list .accordion-item > .item-link .item-title-row:before,
7784 .aurora .accordion-item.media-item .accordion-item-toggle .item-title-row:before,
7785 .aurora .accordion-item.media-item > .item-link .item-title-row:before,
7786 .aurora .links-list .accordion-item > a:before {
7787   content: 'chevron_down_aurora';
7788 }
7789 .aurora .list .accordion-item-toggle.accordion-item-opened .item-inner:before,
7790 .aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
7791 .aurora .list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
7792 .aurora .media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
7793 .aurora .media-list .accordion-item-opened > .item-link .item-title-row:before,
7794 .aurora .accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
7795 .aurora .accordion-item-opened.media-item > .item-link .item-title-row:before,
7796 .aurora .links-list .accordion-item-opened > a:before {
7797   content: 'chevron_up_aurora';
7798 }
7799 /* === Contacts === */
7800 :root .theme-dark,
7801 :root.theme-dark {
7802   --f7-contacts-list-title-text-color: #fff;
7803 }
7804 .ios {
7805   --f7-contacts-list-title-font-size: inherit;
7806   --f7-contacts-list-title-font-weight: 600;
7807   --f7-contacts-list-title-text-color: #000;
7808   --f7-contacts-list-title-height: 22px;
7809   --f7-contacts-list-title-bg-color: #f7f7f7;
7810 }
7811 .ios .theme-dark,
7812 .ios.theme-dark {
7813   --f7-contacts-list-title-bg-color: #232323;
7814 }
7815 .md {
7816   --f7-contacts-list-title-font-size: 20px;
7817   --f7-contacts-list-title-font-weight: 500;
7818   /*
7819   --f7-contacts-list-title-text-color: var(--f7-theme-color);
7820   */
7821   --f7-contacts-list-title-height: 48px;
7822   --f7-contacts-list-title-bg-color: transparent;
7823 }
7824 .aurora {
7825   --f7-contacts-list-title-font-weight: 600;
7826   --f7-contacts-list-title-text-color: #000;
7827   /*
7828   --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
7829   --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
7830   --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
7831   --f7-contacts-list-title-height: var(--f7-list-group-title-height);
7832   */
7833 }
7834 .contacts-list {
7835   --f7-list-margin-vertical: 0px;
7836 }
7837 .contacts-list .list-group-title,
7838 .contacts-list li.list-group-title {
7839   background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
7840   font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
7841   font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
7842   color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
7843   line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
7844   height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
7845 }
7846 .contacts-list .list-group:first-child ul:before {
7847   display: none !important;
7848 }
7849 .contacts-list .list-group:last-child ul:after {
7850   display: none !important;
7851 }
7852 .md .contacts-list .list-group-title {
7853   pointer-events: none;
7854   overflow: visible;
7855   width: 56px;
7856 }
7857 .md .contacts-list .list-group-title + li {
7858   margin-top: calc(var(--f7-contacts-list-title-height) * -1);
7859 }
7860 .md .contacts-list li:not(.list-group-title) {
7861   padding-right: 56px;
7862 }
7863 /* === Virtual List === */
7864 /* === Indexed List === */
7865 :root {
7866   --f7-list-index-width: 16px;
7867   --f7-list-index-font-size: 11px;
7868   --f7-list-index-font-weight: 600;
7869   /* --f7-list-index-text-color: var(--f7-theme-color); */
7870   --f7-list-index-item-height: 14px;
7871   --f7-list-index-label-text-color: #fff;
7872   /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
7873   --f7-list-index-label-font-weight: 500;
7874 }
7875 .ios {
7876   --f7-list-index-label-size: 44px;
7877   --f7-list-index-label-font-size: 17px;
7878   --f7-list-index-skip-dot-size: 6px;
7879 }
7880 .md {
7881   --f7-list-index-label-size: 56px;
7882   --f7-list-index-label-font-size: 20px;
7883   --f7-list-index-skip-dot-size: 4px;
7884 }
7885 .aurora {
7886   --f7-list-index-font-size: 12px;
7887   --f7-list-index-label-size: 32px;
7888   --f7-list-index-label-font-size: 12px;
7889   --f7-list-index-label-font-weight: 600;
7890   --f7-list-index-skip-dot-size: 4px;
7891 }
7892 .list-index {
7893   position: absolute;
7894   top: 0;
7895   bottom: 0;
7896   text-align: center;
7897   z-index: 10;
7898   width: var(--f7-list-index-width);
7899   cursor: pointer;
7900   -webkit-user-select: none;
7901      -moz-user-select: none;
7902       -ms-user-select: none;
7903           user-select: none;
7904   left: var(--f7-safe-area-left);
7905 }
7906 .list-index:before {
7907   content: '';
7908   position: absolute;
7909   width: 20px;
7910   top: 0;
7911   right: 100%;
7912   height: 100%;
7913 }
7914 .list-index ul {
7915   color: var(--f7-list-index-text-color, var(--f7-theme-color));
7916   font-size: var(--f7-list-index-font-size);
7917   font-weight: var(--f7-list-index-font-weight);
7918   list-style: none;
7919   margin: 0;
7920   padding: 0;
7921   display: flex;
7922   flex-direction: column;
7923   justify-content: center;
7924   align-items: center;
7925   flex-shrink: 0;
7926   height: 100%;
7927   width: 100%;
7928   position: relative;
7929 }
7930 .list-index li {
7931   margin: 0;
7932   padding: 0;
7933   list-style: none;
7934   position: relative;
7935   height: var(--f7-list-index-item-height);
7936   line-height: var(--f7-list-index-item-height);
7937   flex-shrink: 0;
7938   display: block;
7939   width: 100%;
7940 }
7941 .list-index .list-index-skip-placeholder:after {
7942   content: '';
7943   position: absolute;
7944   left: 50%;
7945   top: 50%;
7946   border-radius: 50%;
7947   width: var(--f7-list-index-skip-dot-size);
7948   height: var(--f7-list-index-skip-dot-size);
7949   margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
7950   margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
7951   background: var(--f7-list-index-text-color, var(--f7-theme-color));
7952 }
7953 .list-index .list-index-label {
7954   position: absolute;
7955   bottom: 0;
7956   right: 100%;
7957   text-align: center;
7958   background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
7959   color: var(--f7-list-index-label-text-color);
7960   width: var(--f7-list-index-label-size);
7961   height: var(--f7-list-index-label-size);
7962   line-height: var(--f7-list-index-label-size);
7963   font-size: var(--f7-list-index-label-font-size);
7964   font-weight: var(--f7-list-index-label-font-weight);
7965 }
7966 .navbar ~ .page > .list-index,
7967 .navbar ~ .list-index {
7968   top: var(--f7-navbar-height);
7969 }
7970 .navbar ~ .toolbar-top ~ .list-index,
7971 .ios .navbar ~ .toolbar-top-ios ~ .list-index,
7972 .md .navbar ~ .toolbar-top-md ~ .list-index {
7973   top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
7974 }
7975 .navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
7976 .ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
7977 .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
7978   top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
7979 }
7980 .navbar ~ .subnavbar ~ .list-index,
7981 .page-with-subnavbar .navbar ~ .list-index {
7982   top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
7983 }
7984 .toolbar-bottom ~ .page > .list-index,
7985 .ios .toolbar-bottom-ios ~ .page > .list-index,
7986 .md .toolbar-bottom-md ~ .page > .list-index,
7987 .toolbar-bottom ~ * .page > .list-index,
7988 .ios .toolbar-bottom-ios ~ * .page > .list-index,
7989 .md .toolbar-bottom-md ~ * .page > .list-index,
7990 .toolbar-bottom ~ .list-index,
7991 .ios .toolbar-bottom-ios ~ .list-index,
7992 .md .toolbar-bottom-md ~ .list-index {
7993   bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
7994 }
7995 .toolbar-bottom.tabbar-labels ~ .page > .list-index,
7996 .ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
7997 .md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
7998 .toolbar-bottom.tabbar-labels ~ * .page > .list-index,
7999 .ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
8000 .md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
8001 .toolbar-bottom.tabbar-labels ~ .list-index,
8002 .ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
8003 .md .toolbar-bottom-md.tabbar-labels ~ .list-index {
8004   bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
8005 }
8006 .ios .list-index .list-index-label {
8007   margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
8008   margin-right: calc(var(--f7-list-index-width) - 1px);
8009   border-radius: 50%;
8010 }
8011 .ios .list-index .list-index-label:before {
8012   position: absolute;
8013   width: 100%;
8014   height: 100%;
8015   border-radius: 50% 0% 50% 50%;
8016   content: '';
8017   background-color: inherit;
8018   left: 0;
8019   top: 0;
8020   transform: rotate(45deg);
8021   z-index: -1;
8022 }
8023 .md .list-index .list-index-label {
8024   border-radius: 50% 50% 0 50%;
8025 }
8026 .aurora .list-index .list-index-label {
8027   margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
8028   margin-right: calc(var(--f7-list-index-width) - 1px);
8029   border-radius: 50%;
8030 }
8031 .aurora .list-index .list-index-label:before {
8032   position: absolute;
8033   width: 100%;
8034   height: 100%;
8035   border-radius: 50% 1px 50% 50%;
8036   content: '';
8037   background-color: inherit;
8038   left: 0;
8039   top: 0;
8040   transform: rotate(45deg);
8041   z-index: -1;
8042 }
8043 /* === Timeline === */
8044 :root {
8045   --f7-timeline-horizontal-date-height: 34px;
8046   --f7-timeline-year-height: 24px;
8047   --f7-timeline-year-font-weight: inherit;
8048   --f7-timeline-month-height: 24px;
8049   --f7-timeline-month-font-size: inherit;
8050   --f7-timeline-month-font-weight: inherit;
8051   --f7-timeline-item-inner-bg-color: #fff;
8052   --f7-timeline-item-text-font-weight: inherit;
8053   --f7-timeline-item-subtitle-font-weight: inherit;
8054 }
8055 :root .theme-dark,
8056 :root.theme-dark {
8057   --f7-timeline-item-inner-bg-color: #1c1c1d;
8058   --f7-timeline-horizontal-item-border-color: #282829;
8059   --f7-timeline-horizontal-item-date-border-color: #282829;
8060 }
8061 .ios {
8062   --f7-timeline-padding-horizontal: 15px;
8063   --f7-timeline-margin-vertical: 35px;
8064   --f7-timeline-divider-margin-horizontal: 15px;
8065   --f7-timeline-inner-block-margin-vertical: 15px;
8066   --f7-timeline-item-inner-border-radius: 7px;
8067   --f7-timeline-item-inner-box-shadow: none;
8068   --f7-timeline-item-time-font-size: 13px;
8069   --f7-timeline-item-time-text-color: #6d6d72;
8070   --f7-timeline-item-title-font-size: 17px;
8071   --f7-timeline-item-title-line-height: inherit;
8072   --f7-timeline-item-title-font-weight: 600;
8073   --f7-timeline-item-subtitle-font-size: 15px;
8074   --f7-timeline-item-subtitle-line-height: inherit;
8075   --f7-timeline-item-text-font-size: inherit;
8076   --f7-timeline-item-text-color: inherit;
8077   --f7-timeline-item-text-line-height: inherit;
8078   --f7-timeline-year-font-size: 16px;
8079   --f7-timeline-horizontal-item-padding: 10px;
8080   --f7-timeline-horizontal-item-border-color: #c4c4c4;
8081   --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
8082   --f7-timeline-horizontal-item-date-shadow-image: none;
8083 }
8084 .ios .theme-dark,
8085 .ios.theme-dark {
8086   --f7-timeline-item-time-text-color: #8E8E93;
8087 }
8088 .md {
8089   --f7-timeline-padding-horizontal: 16px;
8090   --f7-timeline-margin-vertical: 32px;
8091   --f7-timeline-divider-margin-horizontal: 16px;
8092   --f7-timeline-inner-block-margin-vertical: 16px;
8093   --f7-timeline-item-inner-border-radius: 4px;
8094   --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
8095   --f7-timeline-item-time-font-size: 13px;
8096   --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
8097   --f7-timeline-item-title-font-size: 16px;
8098   --f7-timeline-item-title-line-height: inherit;
8099   --f7-timeline-item-title-font-weight: 400;
8100   --f7-timeline-item-subtitle-font-size: inherit;
8101   --f7-timeline-item-subtitle-line-height: inherit;
8102   --f7-timeline-item-text-font-size: inherit;
8103   --f7-timeline-item-text-line-height: inherit;
8104   --f7-timeline-item-text-color: inherit;
8105   --f7-timeline-year-font-size: 16px;
8106   --f7-timeline-horizontal-item-padding: 12px;
8107   --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
8108   --f7-timeline-horizontal-item-date-border-color: transparent;
8109   --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
8110 }
8111 .md .theme-dark,
8112 .md.theme-dark {
8113   --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
8114 }
8115 .aurora {
8116   --f7-timeline-padding-horizontal: 10px;
8117   --f7-timeline-margin-vertical: 15px;
8118   --f7-timeline-divider-margin-horizontal: 15px;
8119   --f7-timeline-inner-block-margin-vertical: 15px;
8120   --f7-timeline-item-inner-border-radius: 4px;
8121   --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
8122   --f7-timeline-item-time-font-size: 12px;
8123   --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
8124   --f7-timeline-item-title-font-size: 14px;
8125   --f7-timeline-item-title-line-height: 1.3;
8126   --f7-timeline-item-title-font-weight: 600;
8127   --f7-timeline-item-subtitle-font-size: 14px;
8128   --f7-timeline-item-subtitle-line-height: 1.3;
8129   --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
8130   --f7-timeline-item-text-font-size: 12px;
8131   --f7-timeline-item-text-line-height: 1.33;
8132   --f7-timeline-year-font-size: 14px;
8133   --f7-timeline-year-font-weight: 500;
8134   --f7-timeline-horizontal-item-padding: 10px;
8135   --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
8136   --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
8137   --f7-timeline-horizontal-item-date-shadow-image: none;
8138 }
8139 .aurora .theme-dark,
8140 .aurora.theme-dark {
8141   --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.52);
8142   --f7-timeline-item-text-color: rgba(255, 255, 255, 0.52);
8143 }
8144 .timeline {
8145   box-sizing: border-box;
8146   margin: var(--f7-timeline-margin-vertical) 0;
8147   padding: 0 var(--f7-timeline-padding-horizontal);
8148   padding-top: 0;
8149   padding-bottom: 0;
8150   padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
8151   padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
8152 }
8153 .block-strong .timeline {
8154   padding: 0;
8155   margin: 0;
8156 }
8157 .timeline-item {
8158   display: flex;
8159   justify-content: flex-start;
8160   overflow: hidden;
8161   box-sizing: border-box;
8162   position: relative;
8163   padding: 2px 0px var(--f7-timeline-padding-horizontal);
8164 }
8165 .timeline-item:last-child {
8166   padding-bottom: 2px;
8167 }
8168 .timeline-item-date {
8169   flex-shrink: 0;
8170   width: 50px;
8171   text-align: right;
8172   box-sizing: border-box;
8173 }
8174 .timeline-item-date small {
8175   font-size: 10px;
8176 }
8177 .timeline-item-content {
8178   margin: 2px;
8179   min-width: 0;
8180   position: relative;
8181   flex-shrink: 10;
8182 }
8183 .timeline-item-content .card,
8184 .timeline-item-content.card,
8185 .timeline-item-content .list,
8186 .timeline-item-content.list,
8187 .timeline-item-content .block,
8188 .timeline-item-content.block {
8189   margin: 0;
8190   width: 100%;
8191 }
8192 .timeline-item-content .card + .card,
8193 .timeline-item-content .list + .card,
8194 .timeline-item-content .block + .card,
8195 .timeline-item-content .card + .list,
8196 .timeline-item-content .list + .list,
8197 .timeline-item-content .block + .list,
8198 .timeline-item-content .card + .block,
8199 .timeline-item-content .list + .block,
8200 .timeline-item-content .block + .block {
8201   margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
8202 }
8203 .timeline-item-content p:first-child,
8204 .timeline-item-content ul:first-child,
8205 .timeline-item-content ol:first-child,
8206 .timeline-item-content h1:first-child,
8207 .timeline-item-content h2:first-child,
8208 .timeline-item-content h3:first-child,
8209 .timeline-item-content h4:first-child {
8210   margin-top: 0;
8211 }
8212 .timeline-item-content p:last-child,
8213 .timeline-item-content ul:last-child,
8214 .timeline-item-content ol:last-child,
8215 .timeline-item-content h1:last-child,
8216 .timeline-item-content h2:last-child,
8217 .timeline-item-content h3:last-child,
8218 .timeline-item-content h4:last-child {
8219   margin-bottom: 0;
8220 }
8221 .timeline-item-inner {
8222   background: var(--f7-timeline-item-inner-bg-color);
8223   box-sizing: border-box;
8224   border-radius: var(--f7-timeline-item-inner-border-radius);
8225   padding: 8px var(--f7-timeline-padding-horizontal);
8226   box-shadow: var(--f7-timeline-item-inner-box-shadow);
8227 }
8228 .timeline-item-inner + .timeline-item-inner {
8229   margin-top: var(--f7-timeline-inner-block-margin-vertical);
8230 }
8231 .timeline-item-inner .block {
8232   padding: 0;
8233   color: inherit;
8234 }
8235 .timeline-item-inner .block-strong {
8236   padding-left: 0;
8237   padding-right: 0;
8238   margin: 0;
8239 }
8240 .timeline-item-inner .block-strong:before {
8241   display: none !important;
8242 }
8243 .timeline-item-inner .block-strong:after {
8244   display: none !important;
8245 }
8246 .timeline-item-inner .list ul:before {
8247   display: none !important;
8248 }
8249 .timeline-item-inner .list ul:after {
8250   display: none !important;
8251 }
8252 .timeline-item-divider {
8253   width: 1px;
8254   position: relative;
8255   width: 10px;
8256   height: 10px;
8257   background: #bbb;
8258   border-radius: 50%;
8259   flex-shrink: 0;
8260   margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
8261 }
8262 .timeline-item-divider:after,
8263 .timeline-item-divider:before {
8264   content: ' ';
8265   width: 1px;
8266   height: 100vh;
8267   position: absolute;
8268   left: 50%;
8269   background: inherit;
8270   transform: translate3d(-50%, 0, 0);
8271 }
8272 .timeline-item-divider:after {
8273   top: 100%;
8274 }
8275 .timeline-item-divider:before {
8276   bottom: 100%;
8277 }
8278 .timeline-item:last-child .timeline-item-divider:after {
8279   display: none;
8280 }
8281 .timeline-item:first-child .timeline-item-divider:before {
8282   display: none;
8283 }
8284 .timeline-item-time {
8285   font-size: var(--f7-timeline-item-time-font-size);
8286   margin-top: var(--f7-timeline-inner-block-margin-vertical);
8287   color: var(--f7-timeline-item-time-text-color);
8288 }
8289 .timeline-item-time:first-child,
8290 .timeline-item-time:last-child {
8291   margin-top: 0;
8292 }
8293 .timeline-item-title + .timeline-item-time {
8294   margin-top: 0;
8295 }
8296 .timeline-item-title {
8297   font-size: var(--f7-timeline-item-title-font-size);
8298   font-weight: var(--f7-timeline-item-title-font-weight);
8299   line-height: var(--f7-timeline-item-title-line-height);
8300 }
8301 .timeline-item-subtitle {
8302   font-size: var(--f7-timeline-item-subtitle-font-size);
8303   font-weight: var(--f7-timeline-item-subtitle-font-weight);
8304   line-height: var(--f7-timeline-item-subtitle-line-height);
8305 }
8306 .timeline-item-text {
8307   color: var(--f7-timeline-item-text-color);
8308   font-size: var(--f7-timeline-item-text-font-size);
8309   font-weight: var(--f7-timeline-item-text-font-weight);
8310   line-height: var(--f7-timeline-item-text-line-height);
8311 }
8312 .timeline-sides .timeline-item-right,
8313 .timeline-sides .timeline-item {
8314   margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8315   margin-left: 0;
8316 }
8317 .timeline-sides .timeline-item-right .timeline-item-date,
8318 .timeline-sides .timeline-item .timeline-item-date {
8319   text-align: left;
8320 }
8321 .timeline-sides .timeline-item-left,
8322 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8323   flex-direction: row-reverse;
8324   margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8325   margin-right: 0;
8326 }
8327 .timeline-sides .timeline-item-left .timeline-item-date,
8328 .timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8329   text-align: right;
8330 }
8331 @media (min-width: 768px) {
8332   .tablet-sides .timeline-item-right,
8333   .tablet-sides .timeline-item {
8334     margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8335     margin-left: 0;
8336   }
8337   .tablet-sides .timeline-item-right .timeline-item-date,
8338   .tablet-sides .timeline-item .timeline-item-date {
8339     text-align: left;
8340   }
8341   .tablet-sides .timeline-item-left,
8342   .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
8343     flex-direction: row-reverse;
8344     margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
8345     margin-right: 0;
8346   }
8347   .tablet-sides .timeline-item-left .timeline-item-date,
8348   .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
8349     text-align: right;
8350   }
8351 }
8352 .timeline-horizontal {
8353   height: 100%;
8354   display: flex;
8355   padding: 0;
8356   margin: 0;
8357   position: relative;
8358   padding-left: var(--f7-safe-area-left);
8359   padding-right: 0;
8360 }
8361 .timeline-horizontal .timeline-item {
8362   display: block;
8363   width: 33.33333333vw;
8364   margin: 0;
8365   padding: 0;
8366   flex-shrink: 0;
8367   position: relative;
8368   height: 100%;
8369   padding-top: var(--f7-timeline-horizontal-date-height) !important;
8370   padding-bottom: var(--f7-timeline-horizontal-item-padding);
8371 }
8372 .timeline-horizontal .timeline-item:after {
8373   content: '';
8374   position: absolute;
8375   background-color: var(--f7-timeline-horizontal-item-border-color);
8376   display: block;
8377   z-index: 15;
8378   top: 0;
8379   right: 0;
8380   bottom: auto;
8381   left: auto;
8382   width: 1px;
8383   height: 100%;
8384   transform-origin: 100% 50%;
8385   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
8386 }
8387 .timeline-horizontal .timeline-item-date {
8388   padding: 0px var(--f7-timeline-horizontal-item-padding);
8389   width: auto;
8390   text-align: left;
8391   line-height: var(--f7-timeline-horizontal-date-height);
8392   position: absolute;
8393   left: 0;
8394   top: 0;
8395   width: 100%;
8396   height: var(--f7-timeline-horizontal-date-height);
8397   background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
8398   color: var(--f7-bars-text-color);
8399   text-align: right;
8400 }
8401 .timeline-horizontal .timeline-item-date:after {
8402   content: '';
8403   position: absolute;
8404   background-color: var(--f7-timeline-horizontal-item-date-border-color);
8405   display: block;
8406   z-index: 15;
8407   top: auto;
8408   right: auto;
8409   bottom: 0;
8410   left: 0;
8411   height: 1px;
8412   width: 100%;
8413   transform-origin: 50% 100%;
8414   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8415 }
8416 .timeline-horizontal .timeline-item-date:before {
8417   content: '';
8418   position: absolute;
8419   right: 0;
8420   width: 100%;
8421   top: 100%;
8422   bottom: auto;
8423   height: 8px;
8424   pointer-events: none;
8425   background: var(--f7-timeline-horizontal-item-date-shadow-image);
8426 }
8427 .timeline-horizontal.no-shadow .timeline-item-date:before {
8428   display: none;
8429 }
8430 .timeline-horizontal .timeline-item-content {
8431   padding: var(--f7-timeline-horizontal-item-padding);
8432   height: calc(100% - var(--f7-timeline-horizontal-item-padding));
8433   will-change: scroll-position;
8434   overflow: auto;
8435   -webkit-overflow-scrolling: touch;
8436   margin: 0;
8437 }
8438 .timeline-horizontal .timeline-item-divider {
8439   display: none;
8440 }
8441 .timeline-horizontal > .timeline-item:last-child:after,
8442 .timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
8443   display: none !important;
8444 }
8445 .timeline-horizontal.col-5 .timeline-item {
8446   width: 5vw;
8447 }
8448 .timeline-horizontal.col-10 .timeline-item {
8449   width: 10vw;
8450 }
8451 .timeline-horizontal.col-15 .timeline-item {
8452   width: 15vw;
8453 }
8454 .timeline-horizontal.col-20 .timeline-item {
8455   width: 20vw;
8456 }
8457 .timeline-horizontal.col-25 .timeline-item {
8458   width: 25vw;
8459 }
8460 .timeline-horizontal.col-30 .timeline-item {
8461   width: 30vw;
8462 }
8463 .timeline-horizontal.col-33 .timeline-item {
8464   width: 33.333333333333336vw;
8465 }
8466 .timeline-horizontal.col-35 .timeline-item {
8467   width: 35vw;
8468 }
8469 .timeline-horizontal.col-40 .timeline-item {
8470   width: 40vw;
8471 }
8472 .timeline-horizontal.col-45 .timeline-item {
8473   width: 45vw;
8474 }
8475 .timeline-horizontal.col-50 .timeline-item {
8476   width: 50vw;
8477 }
8478 .timeline-horizontal.col-55 .timeline-item {
8479   width: 55vw;
8480 }
8481 .timeline-horizontal.col-60 .timeline-item {
8482   width: 60vw;
8483 }
8484 .timeline-horizontal.col-65 .timeline-item {
8485   width: 65vw;
8486 }
8487 .timeline-horizontal.col-66 .timeline-item {
8488   width: 66.66666666666666vw;
8489 }
8490 .timeline-horizontal.col-70 .timeline-item {
8491   width: 70vw;
8492 }
8493 .timeline-horizontal.col-75 .timeline-item {
8494   width: 75vw;
8495 }
8496 .timeline-horizontal.col-80 .timeline-item {
8497   width: 80vw;
8498 }
8499 .timeline-horizontal.col-85 .timeline-item {
8500   width: 85vw;
8501 }
8502 .timeline-horizontal.col-90 .timeline-item {
8503   width: 90vw;
8504 }
8505 .timeline-horizontal.col-95 .timeline-item {
8506   width: 95vw;
8507 }
8508 .timeline-horizontal.col-100 .timeline-item {
8509   width: 100vw;
8510 }
8511 @media (min-width: 768px) {
8512   .timeline-horizontal.tablet-5 .timeline-item {
8513     width: 5vw;
8514   }
8515   .timeline-horizontal.tablet-10 .timeline-item {
8516     width: 10vw;
8517   }
8518   .timeline-horizontal.tablet-15 .timeline-item {
8519     width: 15vw;
8520   }
8521   .timeline-horizontal.tablet-20 .timeline-item {
8522     width: 20vw;
8523   }
8524   .timeline-horizontal.tablet-25 .timeline-item {
8525     width: 25vw;
8526   }
8527   .timeline-horizontal.tablet-30 .timeline-item {
8528     width: 30vw;
8529   }
8530   .timeline-horizontal.tablet-33 .timeline-item {
8531     width: 33.333333333333336vw;
8532   }
8533   .timeline-horizontal.tablet-35 .timeline-item {
8534     width: 35vw;
8535   }
8536   .timeline-horizontal.tablet-40 .timeline-item {
8537     width: 40vw;
8538   }
8539   .timeline-horizontal.tablet-45 .timeline-item {
8540     width: 45vw;
8541   }
8542   .timeline-horizontal.tablet-50 .timeline-item {
8543     width: 50vw;
8544   }
8545   .timeline-horizontal.tablet-55 .timeline-item {
8546     width: 55vw;
8547   }
8548   .timeline-horizontal.tablet-60 .timeline-item {
8549     width: 60vw;
8550   }
8551   .timeline-horizontal.tablet-65 .timeline-item {
8552     width: 65vw;
8553   }
8554   .timeline-horizontal.tablet-66 .timeline-item {
8555     width: 66.66666666666666vw;
8556   }
8557   .timeline-horizontal.tablet-70 .timeline-item {
8558     width: 70vw;
8559   }
8560   .timeline-horizontal.tablet-75 .timeline-item {
8561     width: 75vw;
8562   }
8563   .timeline-horizontal.tablet-80 .timeline-item {
8564     width: 80vw;
8565   }
8566   .timeline-horizontal.tablet-85 .timeline-item {
8567     width: 85vw;
8568   }
8569   .timeline-horizontal.tablet-90 .timeline-item {
8570     width: 90vw;
8571   }
8572   .timeline-horizontal.tablet-95 .timeline-item {
8573     width: 95vw;
8574   }
8575   .timeline-horizontal.tablet-100 .timeline-item {
8576     width: 100vw;
8577   }
8578 }
8579 .timeline-year {
8580   padding-top: var(--f7-timeline-year-height);
8581 }
8582 .timeline-year:after {
8583   content: '';
8584   position: absolute;
8585   background-color: var(--f7-timeline-horizontal-item-border-color);
8586   display: block;
8587   z-index: 15;
8588   top: 0;
8589   right: 0;
8590   bottom: auto;
8591   left: auto;
8592   width: 1px;
8593   height: 100%;
8594   transform-origin: 100% 50%;
8595   transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
8596 }
8597 .timeline-year:last-child:after {
8598   display: none !important;
8599 }
8600 .timeline-month {
8601   padding-top: var(--f7-timeline-month-height);
8602 }
8603 .timeline-month .timeline-item:before {
8604   content: '';
8605   position: absolute;
8606   background-color: var(--f7-timeline-horizontal-item-border-color);
8607   display: block;
8608   z-index: 15;
8609   top: 0;
8610   right: auto;
8611   bottom: auto;
8612   left: 0;
8613   height: 1px;
8614   width: 100%;
8615   transform-origin: 50% 0%;
8616   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8617 }
8618 .timeline-year,
8619 .timeline-month {
8620   display: flex;
8621   flex-shrink: 0;
8622   position: relative;
8623   box-sizing: border-box;
8624   height: 100%;
8625 }
8626 .timeline-year-title {
8627   line-height: var(--f7-timeline-year-height);
8628   height: var(--f7-timeline-year-height);
8629   font-size: var(--f7-timeline-year-font-size);
8630   font-weight: var(--f7-timeline-year-font-weight);
8631 }
8632 .timeline-month-title {
8633   line-height: var(--f7-timeline-month-height);
8634   height: var(--f7-timeline-month-height);
8635   font-size: var(--f7-timeline-month-font-size);
8636   font-weight: var(--f7-timeline-month-font-weight);
8637 }
8638 .timeline-year-title,
8639 .timeline-month-title {
8640   position: absolute;
8641   left: 0;
8642   top: 0;
8643   width: 100%;
8644   box-sizing: border-box;
8645   padding: 0 var(--f7-timeline-horizontal-item-padding);
8646   background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
8647   color: var(--f7-bars-text-color);
8648 }
8649 .timeline-year-title span,
8650 .timeline-month-title span {
8651   display: inline-block;
8652   position: -webkit-sticky;
8653   position: sticky;
8654   right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
8655 }
8656 .timeline-month-title span {
8657   margin-top: -2px;
8658 }
8659 .timeline-year:first-child .timeline-year-title,
8660 .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
8661 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
8662   left: calc(var(--f7-safe-area-left) * -1);
8663   right: 0;
8664   width: auto;
8665 }
8666 .timeline-horizontal .timeline-item:first-child,
8667 .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
8668 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
8669 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
8670   overflow: visible;
8671 }
8672 .timeline-horizontal .timeline-item:first-child .timeline-item-date,
8673 .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
8674 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
8675 .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
8676   width: auto;
8677   padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
8678   left: calc(0px - var(--f7-safe-area-left));
8679   right: 0;
8680 }
8681 .timeline-year:last-child .timeline-year-title,
8682 .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
8683   width: auto;
8684   right: calc(0px - var(--f7-safe-area-right));
8685 }
8686 .timeline-horizontal .timeline-item:last-child,
8687 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
8688   overflow: visible;
8689 }
8690 .timeline-horizontal .timeline-item:last-child .timeline-item-date,
8691 .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
8692   width: auto;
8693   right: calc(0px - var(--f7-safe-area-right));
8694   left: 0;
8695 }
8696 .ios .block-strong .timeline-item-inner {
8697   border-radius: 3px;
8698   border: 1px solid rgba(0, 0, 0, 0.1);
8699 }
8700 .ios .timeline-year-title span {
8701   margin-top: 3px;
8702 }
8703 .md .timeline-year-title span {
8704   margin-top: 2px;
8705 }
8706 .aurora .timeline-year-title span {
8707   margin-top: 2px;
8708 }
8709 /* === Tabs === */
8710 .tabs .tab {
8711   display: none;
8712 }
8713 .tabs .tab-active {
8714   display: block;
8715 }
8716 .tabs-animated-wrap {
8717   position: relative;
8718   width: 100%;
8719   overflow: hidden;
8720   height: 100%;
8721 }
8722 .tabs-animated-wrap > .tabs {
8723   display: flex;
8724   height: 100%;
8725   transition-duration: 300ms;
8726 }
8727 .tabs-animated-wrap > .tabs > .tab {
8728   width: 100%;
8729   display: block;
8730   flex-shrink: 0;
8731 }
8732 .tabs-animated-wrap.not-animated > .tabs {
8733   transition-duration: 0ms;
8734 }
8735 .tabs-swipeable-wrap {
8736   height: 100%;
8737 }
8738 .tabs-swipeable-wrap > .tabs {
8739   height: 100%;
8740 }
8741 .tabs-swipeable-wrap > .tabs > .tab {
8742   display: block;
8743 }
8744 .page > .tabs {
8745   height: 100%;
8746 }
8747 /* === Panels === */
8748 :root {
8749   --f7-panel-width: 260px;
8750   /*
8751   --f7-panel-left-width: var(--f7-panel-width);
8752   --f7-panel-right-width: var(--f7-panel-width);
8753   */
8754   --f7-panel-bg-color: #fff;
8755 }
8756 .ios {
8757   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
8758   --f7-panel-transition-duration: 400ms;
8759   --f7-panel-shadow: transparent;
8760 }
8761 .md {
8762   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
8763   --f7-panel-transition-duration: 300ms;
8764   --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
8765     rgba(0, 0, 0, 0.1) 30%,
8766     rgba(0, 0, 0, 0.05) 40%,
8767     rgba(0, 0, 0, 0) 60%,
8768     rgba(0, 0, 0, 0) 100%;
8769 }
8770 .aurora {
8771   --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
8772   --f7-panel-transition-duration: 400ms;
8773   --f7-panel-shadow: transparent;
8774 }
8775 .panel-backdrop {
8776   position: absolute;
8777   left: 0;
8778   top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
8779   width: 100%;
8780   height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
8781   opacity: 0;
8782   z-index: 5999;
8783   display: none;
8784   transform: translate3d(0, 0, 0);
8785   background-color: var(--f7-panel-backdrop-bg-color);
8786   transition-duration: var(--f7-panel-transition-duration);
8787   will-change: transform, opacity;
8788 }
8789 .panel-backdrop.not-animated {
8790   transition-duration: 0ms !important;
8791 }
8792 .panel {
8793   z-index: 1000;
8794   display: none;
8795   box-sizing: border-box;
8796   position: absolute;
8797   top: calc(var(--f7-statusbar-height) + var(--f7-appbar-app-offset, 0px));
8798   height: calc(100% - var(--f7-statusbar-height) - var(--f7-appbar-app-offset, 0px));
8799   transform: translate3d(0, 0, 0);
8800   width: var(--f7-panel-width);
8801   background-color: var(--f7-panel-bg-color);
8802   overflow: visible;
8803   will-change: transform;
8804   transition-property: transform;
8805 }
8806 .panel:after {
8807   pointer-events: none;
8808   opacity: 0;
8809   z-index: 5999;
8810   position: absolute;
8811   content: '';
8812   top: 0;
8813   width: 20px;
8814   height: 100%;
8815   transition-property: transform, opacity;
8816 }
8817 .panel,
8818 .panel:after {
8819   transition-duration: var(--f7-panel-transition-duration);
8820 }
8821 .panel.not-animated,
8822 .panel.not-animated:after {
8823   transition-duration: 0ms !important;
8824 }
8825 .panel.panel-reveal.not-animated ~ .views,
8826 .panel.panel-reveal.not-animated ~ .view {
8827   transition-duration: 0ms !important;
8828 }
8829 .panel.panel-resizing {
8830   -webkit-user-select: none;
8831      -moz-user-select: none;
8832       -ms-user-select: none;
8833           user-select: none;
8834 }
8835 .panel.panel-resizing,
8836 .panel.panel-resizing:after,
8837 .panel.panel-resizing ~ .views,
8838 .panel.panel-resizing ~ .view {
8839   transition-duration: 0ms !important;
8840 }
8841 .panel-cover {
8842   z-index: 6000;
8843 }
8844 .panel-left {
8845   left: 0;
8846   width: var(--f7-panel-left-width, var(--f7-panel-width));
8847 }
8848 .panel-left.panel-cover {
8849   transform: translate3d(-100%, 0, 0);
8850 }
8851 .panel-left.panel-cover:after {
8852   left: 100%;
8853   background: linear-gradient(to right, var(--f7-panel-shadow));
8854 }
8855 html.with-panel-left-cover .panel-left.panel-cover:after {
8856   opacity: 1;
8857 }
8858 .panel-left.panel-reveal:after {
8859   right: 0;
8860   transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
8861   background: linear-gradient(to left, var(--f7-panel-shadow));
8862 }
8863 html.with-panel-left-reveal .panel-left.panel-reveal:after {
8864   opacity: 1;
8865   transform: translate3d(0, 0, 0);
8866 }
8867 .panel-right {
8868   right: 0;
8869   width: var(--f7-panel-right-width, var(--f7-panel-width));
8870 }
8871 .panel-right.panel-cover {
8872   transform: translate3d(100%, 0, 0);
8873 }
8874 .panel-right.panel-cover:after {
8875   right: 100%;
8876   background: linear-gradient(to left, var(--f7-panel-shadow));
8877 }
8878 html.with-panel-right-cover .panel-right.panel-cover:after {
8879   opacity: 1;
8880 }
8881 .panel-right.panel-reveal:after {
8882   left: 0;
8883   background: linear-gradient(to right, var(--f7-panel-shadow));
8884   transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
8885 }
8886 html.with-panel-right-reveal .panel-right.panel-reveal:after {
8887   opacity: 1;
8888   transform: translate3d(0, 0, 0);
8889 }
8890 .panel-visible-by-breakpoint {
8891   display: block;
8892   transform: translate3d(0, 0, 0) !important;
8893 }
8894 .panel-visible-by-breakpoint:after {
8895   display: none;
8896 }
8897 .panel-visible-by-breakpoint.panel-cover {
8898   z-index: 5900;
8899 }
8900 html.with-panel-left-reveal .views,
8901 html.with-panel-right-reveal .views,
8902 html.with-panel-transitioning .views,
8903 html.with-panel-left-reveal .framework7-root > .view,
8904 html.with-panel-right-reveal .framework7-root > .view,
8905 html.with-panel-transitioning .framework7-root > .view {
8906   transition-duration: var(--f7-panel-transition-duration);
8907   transition-property: transform;
8908 }
8909 html.with-panel-left-reveal .panel-backdrop,
8910 html.with-panel-right-reveal .panel-backdrop,
8911 html.with-panel-transitioning .panel-backdrop {
8912   background: rgba(0, 0, 0, 0);
8913   display: block;
8914   opacity: 0;
8915 }
8916 html.with-panel .framework7-root > .views .page-content,
8917 html.with-panel .framework7-root > .view .page-content {
8918   overflow: hidden;
8919   -webkit-overflow-scrolling: auto;
8920 }
8921 html.with-panel-left-cover .panel-backdrop,
8922 html.with-panel-right-cover .panel-backdrop {
8923   display: block;
8924   opacity: 1;
8925 }
8926 html.with-panel-left-reveal .views,
8927 html.with-panel-left-reveal .framework7-root > .view,
8928 html.with-panel-left-reveal .panel-backdrop {
8929   transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
8930 }
8931 html.with-panel-right-reveal .views,
8932 html.with-panel-right-reveal .framework7-root > .view,
8933 html.with-panel-right-reveal .panel-backdrop {
8934   transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
8935 }
8936 html.with-panel-left-cover .panel-left {
8937   transform: translate3d(0px, 0, 0);
8938 }
8939 html.with-panel-right-cover .panel-right {
8940   transform: translate3d(0px, 0, 0);
8941 }
8942 .panel-resize-handler {
8943   position: absolute;
8944   top: 0;
8945   height: 100%;
8946   width: 6px;
8947   cursor: col-resize;
8948   z-index: 6000;
8949   display: none;
8950 }
8951 .panel-resizable .panel-resize-handler {
8952   display: block;
8953 }
8954 .panel-left.panel-cover .panel-resize-handler {
8955   right: -3px;
8956 }
8957 .panel-left.panel-reveal .panel-resize-handler {
8958   right: 0;
8959 }
8960 .panel-right.panel-cover .panel-resize-handler {
8961   left: -3px;
8962 }
8963 .panel-right.panel-reveal .panel-resize-handler {
8964   left: 0;
8965 }
8966 /* === Card === */
8967 :root {
8968   --f7-card-bg-color: #fff;
8969   --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
8970   --f7-card-border-radius: 4px;
8971   --f7-card-font-size: inherit;
8972   --f7-card-header-text-color: inherit;
8973   --f7-card-header-font-weight: 400;
8974   --f7-card-header-border-color: #e1e1e1;
8975   --f7-card-footer-border-color: #e1e1e1;
8976   --f7-card-footer-font-weight: 400;
8977   --f7-card-footer-font-size: inherit;
8978   --f7-card-expandable-bg-color: #fff;
8979   --f7-card-expandable-font-size: 16px;
8980   --f7-card-expandable-tablet-width: 670px;
8981   --f7-card-expandable-tablet-height: 670px;
8982 }
8983 :root .theme-dark,
8984 :root.theme-dark {
8985   --f7-card-bg-color: #1c1c1d;
8986   --f7-card-expandable-bg-color: #1c1c1d;
8987   --f7-card-outline-border-color: #282829;
8988   --f7-card-header-border-color: #282829;
8989   --f7-card-footer-border-color: #282829;
8990   --f7-card-footer-text-color: #8E8E93;
8991 }
8992 .ios {
8993   --f7-card-margin-horizontal: 10px;
8994   --f7-card-margin-vertical: 10px;
8995   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
8996   --f7-card-content-padding-horizontal: 15px;
8997   --f7-card-content-padding-vertical: 15px;
8998   --f7-card-header-font-size: 17px;
8999   --f7-card-header-padding-vertical: 10px;
9000   --f7-card-header-padding-horizontal: 15px;
9001   --f7-card-header-min-height: 44px;
9002   --f7-card-footer-text-color: #6d6d72;
9003   --f7-card-footer-padding-vertical: 10px;
9004   --f7-card-footer-padding-horizontal: 15px;
9005   --f7-card-footer-min-height: 44px;
9006   --f7-card-expandable-margin-horizontal: 20px;
9007   --f7-card-expandable-margin-vertical: 30px;
9008   --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
9009   --f7-card-expandable-border-radius: 15px;
9010   --f7-card-expandable-tablet-border-radius: 5px;
9011   --f7-card-expandable-header-font-size: 27px;
9012   --f7-card-expandable-header-font-weight: bold;
9013 }
9014 .md {
9015   --f7-card-margin-horizontal: 8px;
9016   --f7-card-margin-vertical: 8px;
9017   --f7-card-box-shadow: var(--f7-elevation-1);
9018   --f7-card-content-padding-horizontal: 16px;
9019   --f7-card-content-padding-vertical: 16px;
9020   --f7-card-header-font-size: 16px;
9021   --f7-card-header-padding-vertical: 4px;
9022   --f7-card-header-padding-horizontal: 16px;
9023   --f7-card-header-min-height: 48px;
9024   --f7-card-footer-text-color: #757575;
9025   --f7-card-footer-padding-vertical: 4px;
9026   --f7-card-footer-padding-horizontal: 16px;
9027   --f7-card-footer-min-height: 48px;
9028   --f7-card-expandable-margin-horizontal: 12px;
9029   --f7-card-expandable-margin-vertical: 24px;
9030   --f7-card-expandable-box-shadow: var(--f7-elevation-10);
9031   --f7-card-expandable-border-radius: 8px;
9032   --f7-card-expandable-tablet-border-radius: 4px;
9033   --f7-card-expandable-header-font-size: 24px;
9034   --f7-card-expandable-header-font-weight: 500;
9035 }
9036 .aurora {
9037   --f7-card-margin-horizontal: 10px;
9038   --f7-card-margin-vertical: 10px;
9039   --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
9040   --f7-card-content-padding-horizontal: 15px;
9041   --f7-card-content-padding-vertical: 15px;
9042   --f7-card-header-font-size: 14px;
9043   --f7-card-header-font-weight: bold;
9044   --f7-card-header-padding-vertical: 10px;
9045   --f7-card-header-padding-horizontal: 15px;
9046   --f7-card-header-min-height: 38px;
9047   --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
9048   --f7-card-footer-padding-vertical: 10px;
9049   --f7-card-footer-padding-horizontal: 15px;
9050   --f7-card-footer-min-height: 38px;
9051   --f7-card-expandable-margin-horizontal: 10px;
9052   --f7-card-expandable-margin-vertical: 20px;
9053   --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
9054   --f7-card-expandable-border-radius: 15px;
9055   --f7-card-expandable-tablet-border-radius: 5px;
9056   --f7-card-expandable-header-font-size: 27px;
9057   --f7-card-expandable-header-font-weight: bold;
9058 }
9059 .cards-list > ul:before,
9060 .card .list > ul:before {
9061   display: none !important;
9062 }
9063 .cards-list > ul:after,
9064 .card .list > ul:after {
9065   display: none !important;
9066 }
9067 .cards-list ul,
9068 .card .list ul {
9069   background: none;
9070 }
9071 .card {
9072   background: var(--f7-card-bg-color);
9073   position: relative;
9074   border-radius: var(--f7-card-border-radius);
9075   font-size: var(--f7-card-font-size);
9076   margin-top: var(--f7-card-margin-vertical);
9077   margin-bottom: var(--f7-card-margin-vertical);
9078   margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
9079   margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
9080   box-shadow: var(--f7-card-box-shadow);
9081 }
9082 .card .list,
9083 .card .block {
9084   margin: 0;
9085 }
9086 .row:not(.no-gap) .col > .card {
9087   margin-left: 0;
9088   margin-right: 0;
9089 }
9090 .card.no-shadow {
9091   box-shadow: none;
9092 }
9093 .card-outline,
9094 .ios .card-outline-ios,
9095 .md .card-outline-md,
9096 .aurora .card-outline-aurora {
9097   box-shadow: none;
9098   border: 1px solid var(--f7-card-outline-border-color);
9099 }
9100 .card-outline.no-border,
9101 .ios .card-outline-ios.no-border,
9102 .md .card-outline-md.no-border,
9103 .aurora .card-outline-aurora.no-border,
9104 .card-outline.no-hairlines,
9105 .ios .card-outline-ios.no-hairlines,
9106 .md .card-outline-md.no-hairlines,
9107 .aurora .card-outline-aurora.no-hairlines {
9108   border: none;
9109 }
9110 .card-content {
9111   position: relative;
9112 }
9113 .card-content-padding {
9114   position: relative;
9115   padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
9116 }
9117 .card-content-padding > .list,
9118 .card-content-padding > .block {
9119   margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
9120 }
9121 .card-content-padding > p:first-child {
9122   margin-top: 0;
9123 }
9124 .card-content-padding > p:last-child {
9125   margin-bottom: 0;
9126 }
9127 .card-header {
9128   min-height: var(--f7-card-header-min-height);
9129   color: var(--f7-card-header-text-color);
9130   font-size: var(--f7-card-header-font-size);
9131   font-weight: var(--f7-card-header-font-weight);
9132   padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
9133 }
9134 .card-footer {
9135   min-height: var(--f7-card-footer-min-height);
9136   color: var(--f7-card-footer-text-color);
9137   font-size: var(--f7-card-footer-font-size);
9138   font-weight: var(--f7-card-footer-font-weight);
9139   padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
9140 }
9141 .card-footer a.link {
9142   overflow: hidden;
9143 }
9144 .card-header,
9145 .card-footer {
9146   position: relative;
9147   box-sizing: border-box;
9148   display: flex;
9149   justify-content: space-between;
9150   align-items: center;
9151 }
9152 .card-header[valign="top"],
9153 .card-footer[valign="top"] {
9154   align-items: flex-start;
9155 }
9156 .card-header[valign="bottom"],
9157 .card-footer[valign="bottom"] {
9158   align-items: flex-end;
9159 }
9160 .card-header a.link,
9161 .card-footer a.link {
9162   position: relative;
9163 }
9164 .card-header a.link i.icon,
9165 .card-footer a.link i.icon {
9166   display: block;
9167 }
9168 .card-header a.icon-only,
9169 .card-footer a.icon-only {
9170   display: flex;
9171   justify-content: center;
9172   align-items: center;
9173   margin: 0;
9174 }
9175 .card-header {
9176   border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
9177 }
9178 .card-header:after {
9179   content: '';
9180   position: absolute;
9181   background-color: var(--f7-card-header-border-color);
9182   display: block;
9183   z-index: 15;
9184   top: auto;
9185   right: auto;
9186   bottom: 0;
9187   left: 0;
9188   height: 1px;
9189   width: 100%;
9190   transform-origin: 50% 100%;
9191   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9192 }
9193 .card-header.no-hairline:after {
9194   display: none !important;
9195 }
9196 .card-footer {
9197   border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
9198 }
9199 .card-footer:before {
9200   content: '';
9201   position: absolute;
9202   background-color: var(--f7-card-footer-border-color);
9203   display: block;
9204   z-index: 15;
9205   top: 0;
9206   right: auto;
9207   bottom: auto;
9208   left: 0;
9209   height: 1px;
9210   width: 100%;
9211   transform-origin: 50% 0%;
9212   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9213 }
9214 .card-footer.no-hairline:before {
9215   display: none !important;
9216 }
9217 .card-expandable {
9218   overflow: hidden;
9219   height: 300px;
9220   background: var(--f7-card-expandable-bg-color);
9221   position: relative;
9222   transform-origin: center center;
9223   transition-property: transform, border-radius;
9224   border-radius: var(--f7-card-expandable-border-radius);
9225   z-index: 2;
9226   transition-duration: 200ms;
9227   margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
9228   margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
9229   margin-top: var(--f7-card-expandable-margin-vertical);
9230   margin-bottom: var(--f7-card-expandable-margin-vertical);
9231   box-shadow: var(--f7-card-expandable-box-shadow);
9232   font-size: var(--f7-card-expandable-font-size);
9233 }
9234 .card-expandable.card-no-transition {
9235   transition-duration: 0ms;
9236 }
9237 .card-expandable.card-expandable-animate-width .card-content {
9238   transition-property: width, transform;
9239   width: 100%;
9240 }
9241 .card-expandable.active-state {
9242   transform: scale(0.97);
9243 }
9244 .card-expandable .card-opened-fade-in,
9245 .card-expandable .card-opened-fade-out {
9246   transition-duration: 400ms;
9247 }
9248 .card-expandable .card-opened-fade-in {
9249   opacity: 0;
9250   pointer-events: none;
9251 }
9252 .card-expandable .card-content {
9253   position: absolute;
9254   top: 0;
9255   width: 100vw;
9256   height: 100vh;
9257   transform-origin: center top;
9258   overflow: hidden;
9259   transition-property: transform;
9260   box-sizing: border-box;
9261   pointer-events: none;
9262   right: 0;
9263 }
9264 .card-expandable .card-content .card-content-padding {
9265   padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
9266   padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
9267 }
9268 .card-expandable.card-opened {
9269   transition-duration: 0ms;
9270 }
9271 .card-expandable.card-opening,
9272 .card-expandable.card-closing,
9273 .card-expandable.card-transitioning {
9274   transition-duration: 400ms;
9275 }
9276 .card-expandable.card-opening .card-content {
9277   transition-duration: 300ms;
9278 }
9279 .card-expandable.card-closing .card-content {
9280   transition-duration: 500ms;
9281 }
9282 .card-expandable.card-opening,
9283 .card-expandable.card-opened,
9284 .card-expandable.card-closing {
9285   z-index: 100;
9286 }
9287 .card-expandable.card-opening,
9288 .card-expandable.card-opened {
9289   border-radius: 0;
9290 }
9291 .card-expandable.card-opening .card-opened-fade-in,
9292 .card-expandable.card-opened .card-opened-fade-in {
9293   opacity: 1;
9294   pointer-events: auto;
9295 }
9296 .card-expandable.card-opening .card-opened-fade-out,
9297 .card-expandable.card-opened .card-opened-fade-out {
9298   opacity: 0;
9299   pointer-events: none;
9300 }
9301 .card-expandable.card-opened .card-content {
9302   overflow: auto;
9303   -webkit-overflow-scrolling: touch;
9304   pointer-events: auto;
9305 }
9306 .card-expandable .card-header {
9307   font-size: var(--f7-card-expandable-header-font-size);
9308   font-weight: var(--f7-card-expandable-header-font-weight);
9309 }
9310 .card-expandable .card-header:after {
9311   display: none !important;
9312 }
9313 .card-prevent-open {
9314   pointer-events: auto;
9315 }
9316 .card-expandable-size {
9317   width: 0;
9318   height: 0;
9319   position: absolute;
9320   left: 0;
9321   top: 0;
9322   opacity: 0;
9323   pointer-events: none;
9324   visibility: hidden;
9325 }
9326 @media (min-width: 768px) and (min-height: 670px) {
9327   .card-expandable:not(.card-tablet-fullscreen) {
9328     max-width: var(--f7-card-expandable-tablet-width);
9329   }
9330   .card-expandable:not(.card-tablet-fullscreen).card-opened,
9331   .card-expandable:not(.card-tablet-fullscreen).card-opening {
9332     border-radius: var(--f7-card-expandable-tablet-border-radius);
9333   }
9334   .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
9335     width: var(--f7-card-expandable-tablet-width);
9336   }
9337   .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
9338     width: var(--f7-card-expandable-tablet-width);
9339     height: var(--f7-card-expandable-tablet-height);
9340   }
9341 }
9342 .page.page-with-card-opened .page-content {
9343   overflow: hidden;
9344 }
9345 .card-backdrop {
9346   position: fixed;
9347   left: 0;
9348   top: 0;
9349   width: 100%;
9350   height: 100%;
9351   z-index: 99;
9352   pointer-events: none;
9353   background: rgba(0, 0, 0, 0.2);
9354   opacity: 0;
9355 }
9356 .card-backdrop-in {
9357   animation: card-backdrop-fade-in 400ms forwards;
9358   pointer-events: auto;
9359 }
9360 .card-backdrop-out {
9361   animation: card-backdrop-fade-out 400ms forwards;
9362 }
9363 @supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
9364   .card-backdrop {
9365     background: transparent;
9366     opacity: 1;
9367   }
9368   .card-backdrop-in {
9369     animation: card-backdrop-blur-in 400ms forwards;
9370   }
9371   .card-backdrop-out {
9372     animation: card-backdrop-blur-out 400ms forwards;
9373   }
9374 }
9375 @keyframes card-backdrop-fade-in {
9376   from {
9377     opacity: 0;
9378   }
9379   to {
9380     opacity: 1;
9381   }
9382 }
9383 @keyframes card-backdrop-fade-out {
9384   from {
9385     opacity: 1;
9386   }
9387   to {
9388     opacity: 0;
9389   }
9390 }
9391 @keyframes card-backdrop-blur-in {
9392   from {
9393     -webkit-backdrop-filter: blur(0px);
9394             backdrop-filter: blur(0px);
9395   }
9396   to {
9397     -webkit-backdrop-filter: blur(15px);
9398             backdrop-filter: blur(15px);
9399   }
9400 }
9401 @keyframes card-backdrop-blur-out {
9402   from {
9403     -webkit-backdrop-filter: blur(15px);
9404             backdrop-filter: blur(15px);
9405   }
9406   to {
9407     -webkit-backdrop-filter: blur(0px);
9408             backdrop-filter: blur(0px);
9409   }
9410 }
9411 /* === Chips === */
9412 :root {
9413   --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
9414   --f7-chip-font-size: 13px;
9415   --f7-chip-font-weight: normal;
9416   --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
9417   --f7-chip-media-font-size: 16px;
9418   --f7-chip-delete-button-color: #000;
9419 }
9420 :root .theme-dark,
9421 :root.theme-dark {
9422   --f7-chip-delete-button-color: #fff;
9423   --f7-chip-bg-color: #333;
9424   --f7-chip-outline-border-color: #333;
9425 }
9426 .ios {
9427   --f7-chip-text-color: #000;
9428   --f7-chip-height: 24px;
9429   --f7-chip-padding-horizontal: 10px;
9430 }
9431 .ios .theme-dark,
9432 .ios.theme-dark {
9433   --f7-chip-text-color: #fff;
9434 }
9435 .md {
9436   --f7-chip-text-color: rgba(0, 0, 0, 0.87);
9437   --f7-chip-height: 32px;
9438   --f7-chip-padding-horizontal: 12px;
9439 }
9440 .md .theme-dark,
9441 .md.theme-dark {
9442   --f7-chip-text-color: rgba(255, 255, 255, 0.87);
9443 }
9444 .aurora {
9445   --f7-chip-text-color: #000;
9446   --f7-chip-height: 20px;
9447   --f7-chip-padding-horizontal: 10px;
9448   --f7-chip-font-size: 12px;
9449   --f7-chip-media-font-size: 14px;
9450 }
9451 .aurora .theme-dark,
9452 .aurora.theme-dark {
9453   --f7-chip-text-color: #fff;
9454 }
9455 .chip {
9456   padding-left: var(--f7-chip-padding-horizontal);
9457   padding-right: var(--f7-chip-padding-horizontal);
9458   font-weight: var(--f7-chip-font-weight);
9459   display: inline-flex;
9460   box-sizing: border-box;
9461   vertical-align: middle;
9462   align-items: center;
9463   margin: 2px 0;
9464   background-color: var(--f7-chip-bg-color);
9465   font-size: var(--f7-chip-font-size);
9466   color: var(--f7-chip-text-color);
9467   height: var(--f7-chip-height);
9468   line-height: var(--f7-chip-height);
9469   border-radius: var(--f7-chip-height);
9470   position: relative;
9471 }
9472 .chip-media {
9473   border-radius: 50%;
9474   flex-shrink: 0;
9475   display: flex;
9476   align-items: center;
9477   justify-content: center;
9478   height: var(--f7-chip-height);
9479   width: var(--f7-chip-height);
9480   border-radius: var(--f7-chip-height);
9481   text-align: center;
9482   line-height: var(--f7-chip-height);
9483   box-sizing: border-box;
9484   color: #fff;
9485   font-size: var(--f7-chip-media-font-size);
9486   vertical-align: middle;
9487   margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
9488 }
9489 .chip-media i.icon {
9490   font-size: calc(var(--f7-chip-height) - 8px);
9491   height: calc(var(--f7-chip-height) - 8px);
9492 }
9493 .chip-media img {
9494   max-width: 100%;
9495   max-height: 100%;
9496   width: auto;
9497   height: auto;
9498   border-radius: 50%;
9499   display: block;
9500 }
9501 .chip-media + .chip-label {
9502   margin-right: 4px;
9503 }
9504 .chip-label {
9505   white-space: nowrap;
9506   overflow: hidden;
9507   text-overflow: ellipsis;
9508   position: relative;
9509   flex-shrink: 1;
9510   min-width: 0;
9511 }
9512 .chip-delete {
9513   text-align: center;
9514   cursor: pointer;
9515   flex-shrink: 0;
9516   background-repeat: no-repeat;
9517   width: 24px;
9518   height: 24px;
9519   color: var(--f7-chip-delete-button-color);
9520   opacity: 0.54;
9521   position: relative;
9522 }
9523 .chip-delete:after {
9524   font-family: 'framework7-core-icons';
9525   font-weight: normal;
9526   font-style: normal;
9527   line-height: 1;
9528   letter-spacing: normal;
9529   text-transform: none;
9530   white-space: nowrap;
9531   word-wrap: normal;
9532   direction: ltr;
9533   -webkit-font-smoothing: antialiased;
9534   text-rendering: optimizeLegibility;
9535   -moz-osx-font-smoothing: grayscale;
9536   -moz-font-feature-settings: "liga";
9537        font-feature-settings: "liga";
9538   text-align: center;
9539   display: block;
9540   width: 100%;
9541   height: 100%;
9542   font-size: 20px;
9543   content: 'delete_round_ios';
9544   line-height: 24px;
9545 }
9546 .chip .chip-delete.active-state {
9547   opacity: 1;
9548 }
9549 .chip-outline,
9550 .ios .chip-outline-ios,
9551 .md .chip-outline-md,
9552 .aurora .chip-outline-aurora {
9553   border: 1px solid var(--f7-chip-outline-border-color);
9554   background: none;
9555 }
9556 .chip[class*="color-"] {
9557   --f7-chip-bg-color: var(--f7-theme-color);
9558   --f7-chip-text-color: #fff;
9559 }
9560 .chip-outline[class*="color-"],
9561 .ios .chip-outline-ios[class*="color-"],
9562 .md .chip-outline-md[class*="color-"],
9563 .aurora .chip-outline-aurora[class*="color-"] {
9564   --f7-chip-outline-border-color: var(--f7-theme-color);
9565   --f7-chip-text-color: var(--f7-theme-color);
9566 }
9567 .ios .chip-delete {
9568   margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
9569 }
9570 .ios .chip-delete:after {
9571   font-size: 10px;
9572 }
9573 .md .chip-label + .chip-delete {
9574   margin-right: 4px;
9575 }
9576 .md .chip-delete {
9577   margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
9578 }
9579 .md .chip-delete:after {
9580   font-size: 12px;
9581 }
9582 .aurora .chip-delete {
9583   margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
9584 }
9585 .aurora .chip-delete:after {
9586   font-size: 10px;
9587 }
9588 /* === Form === */
9589 /* === Input === */
9590 :root {
9591   --f7-input-bg-color: transparent;
9592   --f7-label-font-weight: 400;
9593   --f7-label-line-height: 1.2;
9594   --f7-input-padding-left: 0px;
9595   --f7-input-padding-right: 0px;
9596   --f7-input-error-text-color: #ff3b30;
9597   --f7-input-error-font-size: 12px;
9598   --f7-input-error-line-height: 1.4;
9599   --f7-input-error-font-weight: 400;
9600   --f7-input-info-font-size: 12px;
9601   --f7-input-info-line-height: 1.4;
9602   --f7-input-outline-height: 40px;
9603   --f7-input-outline-border-color: #999;
9604   --f7-input-outline-border-radius: 4px;
9605   --f7-input-outline-padding-horizontal: 12px;
9606   --f7-textarea-height: 100px;
9607   /*
9608   --f7-input-outline-focused-border-color: var(--f7-theme-color);
9609   --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
9610   */
9611 }
9612 :root .theme-dark,
9613 :root.theme-dark {
9614   --f7-input-outline-border-color: #444;
9615 }
9616 .ios {
9617   --f7-input-height: 44px;
9618   --f7-input-text-color: #000000;
9619   --f7-input-font-size: 17px;
9620   --f7-input-placeholder-color: #a9a9a9;
9621   --f7-textarea-padding-vertical: 11px;
9622   /*
9623   --f7-input-focused-border-color: var(--f7-list-item-border-color);
9624   --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9625   --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9626   */
9627   --f7-label-font-size: 12px;
9628   --f7-label-text-color: inherit;
9629   /*
9630   --f7-label-focused-text-color: var(--f7-label-text-color);
9631   --f7-label-invalid-text-color: var(--f7-label-text-color);
9632   */
9633   --f7-floating-label-scale: calc(17 / 12);
9634   --f7-inline-label-font-size: 17px;
9635   --f7-inline-label-line-height: 1.4;
9636   --f7-inline-label-padding-top: 3px;
9637   --f7-input-info-text-color: #8e8e93;
9638   --f7-input-clear-button-size: 14px;
9639   --f7-input-clear-button-color: #8e8e93;
9640 }
9641 .ios .theme-dark,
9642 .ios.theme-dark {
9643   --f7-input-text-color: #fff;
9644 }
9645 .md {
9646   --f7-input-height: 36px;
9647   --f7-input-text-color: #212121;
9648   --f7-input-font-size: 16px;
9649   --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
9650   --f7-textarea-padding-vertical: 7px;
9651   /*
9652   --f7-input-focused-border-color: var(--f7-theme-color);
9653   --f7-input-invalid-border-color: var(--f7-input-error-text-color);
9654   --f7-input-invalid-text-color: var(--f7-input-text-color);
9655   */
9656   --f7-label-font-size: 12px;
9657   --f7-label-text-color: rgba(0, 0, 0, 0.65);
9658   /*
9659   --f7-label-focused-text-color: var(--f7-theme-color);
9660   --f7-label-invalid-text-color: var(--f7-input-error-text-color );
9661   */
9662   --f7-floating-label-scale: calc(16 / 12);
9663   --f7-inline-label-font-size: 16px;
9664   --f7-inline-label-line-height: 1.5;
9665   --f7-inline-label-padding-top: 7px;
9666   --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
9667   --f7-input-clear-button-size: 18px;
9668   --f7-input-clear-button-color: #aaa;
9669 }
9670 .md .theme-dark,
9671 .md.theme-dark {
9672   --f7-input-text-color: rgba(255, 255, 255, 0.87);
9673   --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
9674   --f7-label-text-color: rgba(255, 255, 255, 0.54);
9675   --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
9676 }
9677 .aurora {
9678   --f7-input-height: 24px;
9679   --f7-input-text-color: #000000;
9680   --f7-input-font-size: 13px;
9681   --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
9682   --f7-textarea-padding-vertical: 2px;
9683   /*
9684   --f7-input-focused-border-color: var(--f7-list-item-border-color);
9685   --f7-input-invalid-border-color: var(--f7-list-item-border-color);
9686   --f7-input-invalid-text-color: var(--f7-input-error-text-color);
9687   */
9688   --f7-label-font-size: 11px;
9689   --f7-label-text-color: inherit;
9690   /*
9691   --f7-label-focused-text-color: var(--f7-label-text-color);
9692   --f7-label-invalid-text-color: var(--f7-label-text-color);
9693   */
9694   --f7-floating-label-scale: calc(13 / 11);
9695   --f7-inline-label-font-size: 14px;
9696   --f7-inline-label-line-height: 1.4;
9697   --f7-inline-label-padding-top: 1px;
9698   --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
9699   --f7-input-clear-button-size: 14px;
9700   --f7-input-clear-button-color: #666;
9701   --f7-input-outline-height: 32px;
9702   --f7-input-outline-padding-horizontal: 8px;
9703 }
9704 .aurora .theme-dark,
9705 .aurora.theme-dark {
9706   --f7-input-text-color: #fff;
9707   --f7-input-clear-button-color: #aaa;
9708   --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
9709 }
9710 input[type="text"],
9711 input[type="password"],
9712 input[type="search"],
9713 input[type="email"],
9714 input[type="tel"],
9715 input[type="url"],
9716 input[type="date"],
9717 input[type="datetime-local"],
9718 input[type="time"],
9719 input[type="number"],
9720 select,
9721 textarea {
9722   box-sizing: border-box;
9723   -webkit-appearance: none;
9724      -moz-appearance: none;
9725           appearance: none;
9726   border: none;
9727   box-shadow: none;
9728   border-radius: 0;
9729   outline: 0;
9730   display: block;
9731   padding: 0;
9732   margin: 0;
9733   font-family: inherit;
9734   background: none;
9735   resize: none;
9736   font-size: inherit;
9737   color: inherit;
9738 }
9739 .textarea-resizable-shadow {
9740   opacity: 0;
9741   position: absolute;
9742   z-index: -1000;
9743   pointer-events: none;
9744   left: -1000px;
9745   top: -1000px;
9746   visibility: hidden;
9747 }
9748 .list input[type="text"],
9749 .list input[type="password"],
9750 .list input[type="search"],
9751 .list input[type="email"],
9752 .list input[type="tel"],
9753 .list input[type="url"],
9754 .list input[type="date"],
9755 .list input[type="datetime-local"],
9756 .list input[type="time"],
9757 .list input[type="number"],
9758 .list select {
9759   width: 100%;
9760   height: var(--f7-input-height);
9761   color: var(--f7-input-text-color);
9762   font-size: var(--f7-input-font-size);
9763   background-color: var(--f7-input-bg-color, transparent);
9764   padding-left: var(--f7-input-padding-left);
9765   padding-right: var(--f7-input-padding-right);
9766 }
9767 .list input[type="text"]::-webkit-input-placeholder,
9768 .list input[type="password"]::-webkit-input-placeholder,
9769 .list input[type="search"]::-webkit-input-placeholder,
9770 .list input[type="email"]::-webkit-input-placeholder,
9771 .list input[type="tel"]::-webkit-input-placeholder,
9772 .list input[type="url"]::-webkit-input-placeholder,
9773 .list input[type="date"]::-webkit-input-placeholder,
9774 .list input[type="datetime-local"]::-webkit-input-placeholder,
9775 .list input[type="time"]::-webkit-input-placeholder,
9776 .list input[type="number"]::-webkit-input-placeholder,
9777 .list select::-webkit-input-placeholder {
9778   color: var(--f7-input-placeholder-color);
9779 }
9780 .list input[type="text"]::-moz-placeholder,
9781 .list input[type="password"]::-moz-placeholder,
9782 .list input[type="search"]::-moz-placeholder,
9783 .list input[type="email"]::-moz-placeholder,
9784 .list input[type="tel"]::-moz-placeholder,
9785 .list input[type="url"]::-moz-placeholder,
9786 .list input[type="date"]::-moz-placeholder,
9787 .list input[type="datetime-local"]::-moz-placeholder,
9788 .list input[type="time"]::-moz-placeholder,
9789 .list input[type="number"]::-moz-placeholder,
9790 .list select::-moz-placeholder {
9791   color: var(--f7-input-placeholder-color);
9792 }
9793 .list input[type="text"]::-ms-input-placeholder,
9794 .list input[type="password"]::-ms-input-placeholder,
9795 .list input[type="search"]::-ms-input-placeholder,
9796 .list input[type="email"]::-ms-input-placeholder,
9797 .list input[type="tel"]::-ms-input-placeholder,
9798 .list input[type="url"]::-ms-input-placeholder,
9799 .list input[type="date"]::-ms-input-placeholder,
9800 .list input[type="datetime-local"]::-ms-input-placeholder,
9801 .list input[type="time"]::-ms-input-placeholder,
9802 .list input[type="number"]::-ms-input-placeholder,
9803 .list select::-ms-input-placeholder {
9804   color: var(--f7-input-placeholder-color);
9805 }
9806 .list input[type="text"]::placeholder,
9807 .list input[type="password"]::placeholder,
9808 .list input[type="search"]::placeholder,
9809 .list input[type="email"]::placeholder,
9810 .list input[type="tel"]::placeholder,
9811 .list input[type="url"]::placeholder,
9812 .list input[type="date"]::placeholder,
9813 .list input[type="datetime-local"]::placeholder,
9814 .list input[type="time"]::placeholder,
9815 .list input[type="number"]::placeholder,
9816 .list select::placeholder {
9817   color: var(--f7-input-placeholder-color);
9818 }
9819 .list textarea {
9820   width: 100%;
9821   color: var(--f7-input-text-color);
9822   font-size: var(--f7-input-font-size);
9823   resize: none;
9824   line-height: 1.4;
9825   height: var(--f7-textarea-height);
9826   background-color: var(--f7-input-bg-color, transparent);
9827   padding-top: var(--f7-textarea-padding-vertical);
9828   padding-bottom: var(--f7-textarea-padding-vertical);
9829   padding-left: var(--f7-input-padding-left);
9830   padding-right: var(--f7-input-padding-right);
9831 }
9832 .list textarea::-webkit-input-placeholder {
9833   color: var(--f7-input-placeholder-color);
9834 }
9835 .list textarea::-moz-placeholder {
9836   color: var(--f7-input-placeholder-color);
9837 }
9838 .list textarea::-ms-input-placeholder {
9839   color: var(--f7-input-placeholder-color);
9840 }
9841 .list textarea::placeholder {
9842   color: var(--f7-input-placeholder-color);
9843 }
9844 .list textarea.resizable {
9845   height: var(--f7-input-height);
9846 }
9847 .list input[type="datetime-local"] {
9848   max-width: 50vw;
9849 }
9850 .list input[type="time"],
9851 .list input[type="date"],
9852 .list input[type="datetime-local"] {
9853   line-height: var(--f7-input-height);
9854 }
9855 .list input[type="date"],
9856 .list input[type="datetime-local"] {
9857   text-align: right;
9858   flex-direction: row-reverse;
9859   width: auto;
9860 }
9861 .list .item-label,
9862 .list .item-floating-label {
9863   width: 100%;
9864   vertical-align: top;
9865   flex-shrink: 0;
9866   font-size: var(--f7-label-font-size);
9867   font-weight: var(--f7-label-font-weight);
9868   line-height: var(--f7-label-line-height);
9869   color: var(--f7-label-text-color);
9870   transition-duration: 200ms;
9871   transition-property: transform, color;
9872 }
9873 .list .item-floating-label {
9874   --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
9875   transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
9876   color: var(--f7-input-placeholder-color);
9877   width: auto;
9878   max-width: calc(100% / var(--f7-floating-label-scale));
9879   pointer-events: none;
9880   right: var(--f7-input-padding-right);
9881   transform-origin: right center;
9882 }
9883 .list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder,
9884 .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
9885   opacity: 0;
9886   transition-duration: 100ms;
9887 }
9888 .list .item-floating-label ~ .item-input-wrap input::-moz-placeholder,
9889 .list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
9890   opacity: 0;
9891   transition-duration: 100ms;
9892 }
9893 .list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder,
9894 .list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
9895   opacity: 0;
9896   transition-duration: 100ms;
9897 }
9898 .list .item-floating-label ~ .item-input-wrap input::placeholder,
9899 .list .item-floating-label ~ .item-input-wrap textarea::placeholder {
9900   opacity: 0;
9901   transition-duration: 100ms;
9902 }
9903 .list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder,
9904 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
9905   opacity: 1;
9906   transition-duration: 300ms;
9907 }
9908 .list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder,
9909 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
9910   opacity: 1;
9911   transition-duration: 300ms;
9912 }
9913 .list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder,
9914 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
9915   opacity: 1;
9916   transition-duration: 300ms;
9917 }
9918 .list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
9919 .list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
9920   opacity: 1;
9921   transition-duration: 300ms;
9922 }
9923 .list .item-input-with-value .item-floating-label {
9924   color: var(--f7-label-text-color);
9925 }
9926 .list .item-input-with-value .item-floating-label,
9927 .list .item-input-focused .item-floating-label {
9928   transform: scale(1) translateY(0);
9929 }
9930 .list .item-input-wrap {
9931   width: 100%;
9932   flex-shrink: 1;
9933   position: relative;
9934 }
9935 .item-input .item-inner {
9936   display: flex;
9937   flex-direction: column;
9938   align-items: flex-start;
9939 }
9940 .item-input-error-message,
9941 .input-error-message {
9942   font-size: var(--f7-input-error-font-size);
9943   line-height: var(--f7-input-error-line-height);
9944   color: var(--f7-input-error-text-color);
9945   font-weight: var(--f7-input-error-font-weight);
9946   display: none;
9947   box-sizing: border-box;
9948 }
9949 .item-input-info,
9950 .input-info {
9951   font-size: var(--f7-input-info-font-size);
9952   line-height: var(--f7-input-info-line-height);
9953   color: var(--f7-input-info-text-color);
9954 }
9955 .item-input-invalid .item-input-error-message,
9956 .input-invalid .item-input-error-message,
9957 .item-input-invalid .input-error-message,
9958 .input-invalid .input-error-message {
9959   display: block;
9960 }
9961 .item-input-invalid .item-input-info,
9962 .input-invalid .item-input-info,
9963 .item-input-invalid .input-info,
9964 .input-invalid .input-info {
9965   display: none;
9966 }
9967 .inline-labels .item-inner,
9968 .inline-label .item-inner {
9969   display: flex;
9970   align-items: center;
9971   flex-direction: row;
9972 }
9973 .inline-labels .item-label,
9974 .inline-label .item-label,
9975 .inline-labels .item-floating-label,
9976 .inline-label .item-floating-label {
9977   padding-top: var(--f7-inline-label-padding-top);
9978   align-self: flex-start;
9979   width: 35%;
9980   font-size: var(--f7-inline-label-font-size);
9981   line-height: var(--f7-inline-label-line-height);
9982 }
9983 .inline-labels .item-label + .item-input-wrap,
9984 .inline-label .item-label + .item-input-wrap,
9985 .inline-labels .item-floating-label + .item-input-wrap,
9986 .inline-label .item-floating-label + .item-input-wrap {
9987   margin-right: 8px;
9988 }
9989 .input {
9990   position: relative;
9991 }
9992 .input input,
9993 .input select,
9994 .input textarea {
9995   width: 100%;
9996 }
9997 .input-clear-button {
9998   opacity: 0;
9999   pointer-events: none;
10000   visibility: hidden;
10001   transition-duration: 100ms;
10002   position: absolute;
10003   top: 50%;
10004   border: none;
10005   padding: 0;
10006   margin: 0;
10007   outline: 0;
10008   z-index: 1;
10009   cursor: pointer;
10010   background: none;
10011   width: var(--f7-input-clear-button-size);
10012   height: var(--f7-input-clear-button-size);
10013   margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
10014   color: var(--f7-input-clear-button-color);
10015   left: 0;
10016 }
10017 .input-clear-button:after {
10018   font-family: 'framework7-core-icons';
10019   font-weight: normal;
10020   font-style: normal;
10021   line-height: 1;
10022   letter-spacing: normal;
10023   text-transform: none;
10024   white-space: nowrap;
10025   word-wrap: normal;
10026   direction: ltr;
10027   -webkit-font-smoothing: antialiased;
10028   text-rendering: optimizeLegibility;
10029   -moz-osx-font-smoothing: grayscale;
10030   -moz-font-feature-settings: "liga";
10031        font-feature-settings: "liga";
10032   text-align: center;
10033   display: block;
10034   width: 100%;
10035   height: 100%;
10036   font-size: 20px;
10037 }
10038 .input-clear-button:before {
10039   position: absolute;
10040   content: '';
10041   left: 50%;
10042   top: 50%;
10043 }
10044 .item-input-wrap .input-clear-button {
10045   top: calc(var(--f7-input-height) / 2);
10046 }
10047 .input-clear-button.active-state {
10048   opacity: 0.75 !important;
10049 }
10050 .input-with-value ~ .input-clear-button,
10051 .item-input-with-value .input-clear-button,
10052 .input-with-value .input-clear-button {
10053   opacity: 1;
10054   pointer-events: auto;
10055   visibility: visible;
10056 }
10057 .input-dropdown-wrap,
10058 .input-dropdown {
10059   position: relative;
10060 }
10061 .input-dropdown-wrap:before,
10062 .input-dropdown:before {
10063   content: '';
10064   pointer-events: none;
10065   position: absolute;
10066   top: 50%;
10067   margin-top: -2px;
10068   width: 0;
10069   height: 0;
10070   border-left: 4px solid transparent;
10071   border-right: 4px solid transparent;
10072   border-top: 5px solid #727272;
10073   left: 6px;
10074 }
10075 .input-dropdown-wrap select,
10076 .input-dropdown select,
10077 .input-dropdown-wrap input,
10078 .input-dropdown input,
10079 .input-dropdown-wrap textarea,
10080 .input-dropdown textarea {
10081   padding-left: calc(20px + var(--f7-input-padding-left));
10082 }
10083 .input-outline:after,
10084 .item-input-outline .item-input-wrap:after {
10085   content: '';
10086   position: absolute;
10087   left: 0;
10088   top: 0;
10089   width: 100%;
10090   height: 100%;
10091   box-sizing: border-box;
10092   border: 1px solid var(--f7-input-outline-border-color);
10093   border-radius: var(--f7-input-outline-border-radius);
10094   transition-duration: 200ms;
10095   pointer-events: none;
10096 }
10097 .input-outline.input-focused:after,
10098 .item-input-outline.item-input-focused .item-input-wrap:after {
10099   border-width: 2px;
10100   border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
10101 }
10102 .input-outline.input-invalid:after,
10103 .item-input-outline.item-input-invalid .item-input-wrap:after {
10104   border-width: 2px;
10105   border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
10106 }
10107 .input-outline input,
10108 .item-input-outline input,
10109 .list .item-input-outline input,
10110 .input-outline textarea,
10111 .item-input-outline textarea,
10112 .list .item-input-outline textarea,
10113 .input-outline select,
10114 .item-input-outline select,
10115 .list .item-input-outline select {
10116   border-radius: var(--f7-input-outline-border-radius);
10117   padding-left: var(--f7-input-outline-padding-horizontal);
10118   padding-right: var(--f7-input-outline-padding-horizontal);
10119 }
10120 .input-outline.input-dropdown:before,
10121 .item-input-outline .input-dropdown-wrap:before {
10122   left: 8px;
10123 }
10124 .input-outline.input-dropdown input,
10125 .item-input-outline .input-dropdown-wrap input,
10126 .input-outline.input-dropdown textarea,
10127 .item-input-outline .input-dropdown-wrap textarea,
10128 .input-outline.input-dropdown select,
10129 .item-input-outline .input-dropdown-wrap select {
10130   padding-left: 20px;
10131 }
10132 .input-outline .input-clear-button,
10133 .item-input-outline .input-clear-button {
10134   left: 8px;
10135 }
10136 .item-input-outline {
10137   --f7-input-height: var(--f7-input-outline-height);
10138 }
10139 .item-input-outline .item-inner:after {
10140   display: none !important;
10141 }
10142 .item-input-outline .item-label {
10143   right: var(--f7-input-outline-padding-horizontal);
10144 }
10145 .inline-labels .item-input-outline .item-label,
10146 .inline-label .item-input-outline .item-label,
10147 .item-input-outline .inline-label .item-label,
10148 .item-input-outline .inline-label.item-label {
10149   right: 0;
10150 }
10151 .item-input-outline .item-floating-label {
10152   right: calc(var(--f7-input-outline-padding-horizontal) - 4px);
10153   padding-left: 4px;
10154   padding-right: 4px;
10155   background: var(--f7-page-bg-color);
10156   z-index: 10;
10157   margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
10158 }
10159 .item-input-outline.item-input-with-value .item-floating-label,
10160 .item-input-outline.item-input-focused .item-floating-label {
10161   transform: scale(1) translateY(50%);
10162 }
10163 .item-input-outline .item-input-info,
10164 .item-input-outline .item-input-error-message {
10165   padding-right: var(--f7-input-outline-padding-horizontal);
10166 }
10167 .block-strong .item-input-outline .item-floating-label {
10168   background: var(--f7-block-strong-bg-color);
10169 }
10170 .list .item-input-outline .item-floating-label {
10171   background: var(--f7-list-bg-color);
10172 }
10173 .ios .item-label + .item-input-wrap,
10174 .ios .item-floating-label + .item-input-wrap {
10175   margin-top: 0;
10176 }
10177 .ios .item-input-focused .item-floating-label {
10178   color: var(--f7-label-text-color);
10179 }
10180 .ios .item-input .item-media {
10181   align-self: flex-start;
10182 }
10183 .ios .item-input-wrap {
10184   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10185   margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
10186 }
10187 .ios .inline-labels .item-label + .item-input-wrap,
10188 .ios .inline-label .item-label + .item-input-wrap,
10189 .ios .inline-labels .item-floating-label + .item-input-wrap,
10190 .ios .inline-label .item-floating-label + .item-input-wrap {
10191   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10192 }
10193 .ios .inline-labels .item-input-wrap,
10194 .ios .inline-label .item-input-wrap {
10195   margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
10196 }
10197 .ios .item-input-error-message,
10198 .ios .item-input-info,
10199 .ios .input-error-message,
10200 .ios .input-info {
10201   position: relative;
10202   margin-bottom: 6px;
10203   margin-top: -8px;
10204 }
10205 .ios .item-input-focused .item-label,
10206 .ios .item-input-focused .item-floating-label {
10207   color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
10208 }
10209 .ios .item-input-focused .item-inner:after {
10210   background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
10211 }
10212 .ios .item-input-invalid .item-label,
10213 .ios .item-input-invalid .item-floating-label {
10214   color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
10215 }
10216 .ios .item-input-invalid .item-inner:after {
10217   background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
10218 }
10219 .ios .item-input-invalid input,
10220 .ios .input-invalid input,
10221 .ios .item-input-invalid select,
10222 .ios .input-invalid select,
10223 .ios .item-input-invalid textarea,
10224 .ios .input-invalid textarea {
10225   color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
10226 }
10227 .ios .input-clear-button:after {
10228   content: 'delete_round_ios';
10229   font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
10230   line-height: 1.4;
10231 }
10232 .ios .input-clear-button:before {
10233   width: 44px;
10234   height: 44px;
10235   margin-left: -22px;
10236   margin-top: -22px;
10237 }
10238 .ios .item-input-outline .item-input-wrap,
10239 .ios .input-outline .item-input-wrap {
10240   margin-top: 0;
10241   margin-bottom: 0;
10242 }
10243 .ios .item-input-outline .item-input-error-message,
10244 .ios .input-outline .item-input-error-message,
10245 .ios .item-input-outline .item-input-info,
10246 .ios .input-outline .item-input-info,
10247 .ios .item-input-outline .input-error-message,
10248 .ios .input-outline .input-error-message,
10249 .ios .item-input-outline .input-info,
10250 .ios .input-outline .input-info {
10251   margin-top: 0;
10252   white-space: normal;
10253   overflow: hidden;
10254   text-overflow: ellipsis;
10255 }
10256 .ios .item-input-outline .item-input-info,
10257 .ios .input-outline .item-input-info,
10258 .ios .item-input-outline .input-info,
10259 .ios .input-outline .input-info {
10260   margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10261 }
10262 .ios .item-input-outline .item-input-error-message,
10263 .ios .input-outline .item-input-error-message,
10264 .ios .item-input-outline .input-error-message,
10265 .ios .input-outline .input-error-message {
10266   margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10267 }
10268 .ios .item-input-outline.item-input-with-info .item-input-wrap,
10269 .ios .input-outline.item-input-with-info .item-input-wrap,
10270 .ios .item-input-outline.input-with-info .item-input-wrap,
10271 .ios .input-outline.input-with-info .item-input-wrap {
10272   margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10273 }
10274 .ios .item-input-outline.item-input-with-error-message .item-input-wrap,
10275 .ios .input-outline.item-input-with-error-message .item-input-wrap,
10276 .ios .item-input-outline.input-with-error-message .item-input-wrap,
10277 .ios .input-outline.input-with-error-message .item-input-wrap {
10278   margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10279 }
10280 .md .item-input:not(.item-input-outline) .item-input-wrap:after,
10281 .md .input:not(.input-outline):after {
10282   content: '';
10283   position: absolute;
10284   background-color: var(--f7-list-item-border-color);
10285   display: block;
10286   z-index: 15;
10287   top: auto;
10288   right: auto;
10289   bottom: 0;
10290   left: 0;
10291   height: 1px;
10292   width: 100%;
10293   transform-origin: 50% 100%;
10294   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10295 }
10296 .md .item-input:not(.item-input-outline) .item-input-wrap:after,
10297 .md .input:not(.input-outline):after {
10298   transition-duration: 200ms;
10299 }
10300 .md .item-input-wrap {
10301   min-height: var(--f7-input-height);
10302 }
10303 .md .item-input .item-media {
10304   align-self: flex-end;
10305 }
10306 .md .item-input .item-inner:after {
10307   display: none !important;
10308 }
10309 .md .inline-labels .item-media,
10310 .md .inline-label .item-media {
10311   align-self: flex-start;
10312   padding-top: 14px;
10313 }
10314 .md .item-input-with-error-message,
10315 .md .item-input-with-info,
10316 .md .input-with-error-message,
10317 .md .input-with-info {
10318   padding-bottom: 20px;
10319 }
10320 .md .item-input-error-message,
10321 .md .item-input-info,
10322 .md .input-error-message,
10323 .md .input-info {
10324   position: absolute;
10325   top: 100%;
10326   margin-top: 4px;
10327   white-space: nowrap;
10328   overflow: hidden;
10329   text-overflow: ellipsis;
10330   width: 100%;
10331   right: 0;
10332 }
10333 .md .item-input-focused .item-label,
10334 .md .item-input-focused .item-floating-label {
10335   color: var(--f7-label-focused-text-color, var(--f7-theme-color));
10336 }
10337 .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
10338 .md .input-focused:not(.input-outline):after {
10339   background: var(--f7-input-focused-border-color, var(--f7-theme-color));
10340 }
10341 .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
10342 .md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
10343 .md .input-invalid:not(.input-outline):after,
10344 .md .input-focused:not(.input-outline):after {
10345   transform: scaleY(2) !important;
10346 }
10347 .md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
10348 .md .input-invalid:not(.input-outline):after {
10349   background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
10350 }
10351 .md .item-input-invalid .item-label,
10352 .md .item-input-invalid .item-floating-label {
10353   color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
10354 }
10355 .md .item-input-invalid input,
10356 .md .input-invalid input,
10357 .md .item-input-invalid select,
10358 .md .input-invalid select,
10359 .md .item-input-invalid textarea,
10360 .md .input-invalid textarea {
10361   color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
10362 }
10363 .md .input-clear-button:after {
10364   font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
10365   content: 'delete_round_md';
10366   line-height: 1.2;
10367 }
10368 .md .input-clear-button:before {
10369   width: 48px;
10370   height: 48px;
10371   margin-left: -24px;
10372   margin-top: -24px;
10373 }
10374 .aurora .item-label + .item-input-wrap,
10375 .aurora .item-floating-label + .item-input-wrap {
10376   margin-top: 0;
10377 }
10378 .aurora .item-input-focused .item-floating-label {
10379   color: var(--f7-label-text-color);
10380 }
10381 .aurora .item-input .item-media {
10382   align-self: flex-start;
10383 }
10384 .aurora .item-input-error-message,
10385 .aurora .item-input-info,
10386 .aurora .input-error-message,
10387 .aurora .input-info {
10388   position: relative;
10389 }
10390 .aurora .item-input-focused .item-label,
10391 .aurora .item-input-focused .item-floating-label {
10392   color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
10393 }
10394 .aurora .item-input-focused .item-inner:after {
10395   background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
10396 }
10397 .aurora .item-input-invalid .item-label,
10398 .aurora .item-input-invalid .item-floating-label {
10399   color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
10400 }
10401 .aurora .item-input-invalid .item-inner:after {
10402   background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
10403 }
10404 .aurora .item-input-invalid input,
10405 .aurora .input-invalid input,
10406 .aurora .item-input-invalid select,
10407 .aurora .input-invalid select,
10408 .aurora .item-input-invalid textarea,
10409 .aurora .input-invalid textarea {
10410   color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
10411 }
10412 .aurora .input-clear-button:after {
10413   content: 'delete_round_ios';
10414   font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
10415   line-height: 1.4;
10416 }
10417 .aurora .input-clear-button:before {
10418   width: 28px;
10419   height: 28px;
10420   margin-left: -14px;
10421   margin-top: -14px;
10422 }
10423 .aurora .item-input-outline .item-input-wrap,
10424 .aurora .input-outline .item-input-wrap {
10425   margin-top: 0;
10426   margin-bottom: 0;
10427 }
10428 .aurora .item-input-outline .item-input-error-message,
10429 .aurora .input-outline .item-input-error-message,
10430 .aurora .item-input-outline .item-input-info,
10431 .aurora .input-outline .item-input-info,
10432 .aurora .item-input-outline .input-error-message,
10433 .aurora .input-outline .input-error-message,
10434 .aurora .item-input-outline .input-info,
10435 .aurora .input-outline .input-info {
10436   margin-top: 0;
10437   white-space: normal;
10438   overflow: hidden;
10439   text-overflow: ellipsis;
10440 }
10441 .aurora .item-input-outline .item-input-info,
10442 .aurora .input-outline .item-input-info,
10443 .aurora .item-input-outline .input-info,
10444 .aurora .input-outline .input-info {
10445   margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10446 }
10447 .aurora .item-input-outline .item-input-error-message,
10448 .aurora .input-outline .item-input-error-message,
10449 .aurora .item-input-outline .input-error-message,
10450 .aurora .input-outline .input-error-message {
10451   margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10452 }
10453 .aurora .item-input-outline.item-input-with-info .item-input-wrap,
10454 .aurora .input-outline.item-input-with-info .item-input-wrap,
10455 .aurora .item-input-outline.input-with-info .item-input-wrap,
10456 .aurora .input-outline.input-with-info .item-input-wrap {
10457   margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
10458 }
10459 .aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
10460 .aurora .input-outline.item-input-with-error-message .item-input-wrap,
10461 .aurora .item-input-outline.input-with-error-message .item-input-wrap,
10462 .aurora .input-outline.input-with-error-message .item-input-wrap {
10463   margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
10464 }
10465 /* === Checkbox === */
10466 :root {
10467   /* --f7-checkbox-active-color: var(--f7-theme-color); */
10468   --f7-checkbox-icon-color: #fff;
10469 }
10470 :root .theme-dark,
10471 :root.theme-dark {
10472   --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
10473 }
10474 .ios {
10475   --f7-checkbox-size: 22px;
10476   --f7-checkbox-border-radius: 50%;
10477   --f7-checkbox-border-width: 1px;
10478   --f7-checkbox-inactive-color: #c7c7cc;
10479   --f7-checkbox-extra-margin: 0px;
10480 }
10481 .md {
10482   --f7-checkbox-size: 18px;
10483   --f7-checkbox-border-radius: 2px;
10484   --f7-checkbox-border-width: 2px;
10485   --f7-checkbox-inactive-color: #6d6d6d;
10486   --f7-checkbox-extra-margin: 22px;
10487 }
10488 .aurora {
10489   --f7-checkbox-size: 14px;
10490   --f7-checkbox-border-radius: 2px;
10491   --f7-checkbox-border-width: 1px;
10492   --f7-checkbox-inactive-color: #888;
10493   --f7-checkbox-extra-margin: 0px;
10494 }
10495 .checkbox {
10496   position: relative;
10497   display: inline-block;
10498   vertical-align: middle;
10499   z-index: 1;
10500   background-color: transparent;
10501   --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
10502 }
10503 .icon-checkbox,
10504 .checkbox i {
10505   flex-shrink: 0;
10506   border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
10507   width: var(--f7-checkbox-size);
10508   height: var(--f7-checkbox-size);
10509   border-radius: var(--f7-checkbox-border-radius);
10510   box-sizing: border-box;
10511   position: relative;
10512   display: block;
10513 }
10514 .icon-checkbox:after,
10515 .checkbox i:after {
10516   font-family: 'framework7-core-icons';
10517   font-weight: normal;
10518   font-style: normal;
10519   line-height: 1;
10520   letter-spacing: normal;
10521   text-transform: none;
10522   white-space: nowrap;
10523   word-wrap: normal;
10524   direction: ltr;
10525   -webkit-font-smoothing: antialiased;
10526   text-rendering: optimizeLegibility;
10527   -moz-osx-font-smoothing: grayscale;
10528   -moz-font-feature-settings: "liga";
10529        font-feature-settings: "liga";
10530   text-align: center;
10531   display: block;
10532   width: 100%;
10533   height: 100%;
10534   font-size: 20px;
10535   width: var(--f7-checkbox-size);
10536   height: var(--f7-checkbox-size);
10537   line-height: var(--f7-checkbox-size);
10538   left: calc(0px - var(--f7-checkbox-border-width));
10539   top: calc(0px - var(--f7-checkbox-border-width));
10540   opacity: 0;
10541   color: var(--f7-checkbox-icon-color);
10542   position: relative;
10543   transition-property: opacity;
10544 }
10545 label.item-checkbox input[type="checkbox"]:not(:checked) ~ .icon-checkbox:after,
10546 label.item-checkbox input[type="checkbox"]:not(:checked) ~ * .icon-checkbox:after,
10547 .checkbox input[type="checkbox"]:not(:checked) ~ i:after {
10548   font-size: 0;
10549 }
10550 label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
10551 label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
10552 .checkbox input[type="checkbox"]:checked ~ i,
10553 label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox,
10554 label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox,
10555 .checkbox input[type="checkbox"]:indeterminate ~ i {
10556   border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
10557   background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
10558 }
10559 label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
10560 label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
10561 .checkbox input[type="checkbox"]:checked ~ i:after,
10562 label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10563 label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10564 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10565   opacity: 1;
10566 }
10567 label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10568 label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10569 .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10570   font-size: 0;
10571   content: '';
10572   position: absolute;
10573   top: 50%;
10574   width: 70%;
10575   background: #fff;
10576   height: 2px;
10577   border-radius: 2px;
10578   margin-top: -1px;
10579   left: 15%;
10580   transition: 0ms;
10581 }
10582 label.item-checkbox,
10583 .checkbox {
10584   cursor: pointer;
10585 }
10586 label.item-checkbox input[type="checkbox"],
10587 .checkbox input[type="checkbox"],
10588 label.item-checkbox input[type="radio"],
10589 .checkbox input[type="radio"] {
10590   display: none;
10591 }
10592 label.item-checkbox {
10593   transition-duration: 300ms;
10594 }
10595 label.item-checkbox .item-content .item-media,
10596 label.item-checkbox.item-content .item-media {
10597   align-self: center;
10598 }
10599 label.item-checkbox > .icon-checkbox {
10600   margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
10601 }
10602 label.item-checkbox.active-state {
10603   background-color: var(--f7-list-link-pressed-bg-color);
10604 }
10605 label.item-checkbox.active-state:after {
10606   background-color: transparent;
10607 }
10608 label.item-checkbox.disabled,
10609 .disabled label.item-checkbox {
10610   opacity: 0.55;
10611   pointer-events: none;
10612   opacity: 0.55 !important;
10613   pointer-events: none !important;
10614 }
10615 .ios .icon-checkbox:after,
10616 .ios .checkbox i:after {
10617   content: 'checkbox_ios';
10618   font-size: 21px;
10619 }
10620 .ios label.item-checkbox.active-state {
10621   transition-duration: 0ms;
10622 }
10623 .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ .icon-checkbox:after,
10624 .ios label.item-checkbox input[type="checkbox"]:indeterminate ~ * .icon-checkbox:after,
10625 .ios .checkbox input[type="checkbox"]:indeterminate ~ i:after {
10626   height: 1px;
10627   margin-top: 0px;
10628 }
10629 .md .icon-checkbox,
10630 .md .checkbox i {
10631   transition-duration: 200ms;
10632 }
10633 .md .icon-checkbox:after,
10634 .md .checkbox i:after {
10635   content: 'checkbox_md';
10636   transition-duration: 200ms;
10637   font-size: 15px;
10638 }
10639 .md label.item-checkbox {
10640   position: relative;
10641   overflow: hidden;
10642   z-index: 0;
10643 }
10644 .aurora .icon-checkbox,
10645 .aurora .checkbox i {
10646   transition-duration: 150ms;
10647 }
10648 .aurora .icon-checkbox:after,
10649 .aurora .checkbox i:after {
10650   content: 'checkbox_aurora';
10651   transition-duration: 150ms;
10652   font-size: 19px;
10653 }
10654 .aurora .icon-checkbox:before,
10655 .aurora .checkbox i:before {
10656   content: '';
10657   position: absolute;
10658   left: 0;
10659   top: 0;
10660   width: 100%;
10661   height: 100%;
10662   background: rgba(0, 0, 0, 0.1);
10663   opacity: 0;
10664   transition-duration: 150ms;
10665 }
10666 .aurora .checkbox.active-state i:before {
10667   opacity: 1;
10668 }
10669 .aurora label.item-checkbox {
10670   position: relative;
10671   overflow: hidden;
10672   z-index: 0;
10673 }
10674 /* === Radio === */
10675 :root {
10676   /*
10677   --f7-radio-active-color: var(--f7-theme-color);
10678   */
10679   --f7-radio-border-radius: 50%;
10680 }
10681 :root .theme-dark,
10682 :root.theme-dark {
10683   --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
10684 }
10685 .ios {
10686   --f7-radio-size: 22px;
10687   --f7-radio-border-width: 1px;
10688   --f7-radio-inactive-color: #c7c7cc;
10689   --f7-radio-extra-margin: 0px;
10690 }
10691 .md {
10692   --f7-radio-size: 20px;
10693   --f7-radio-border-width: 2px;
10694   --f7-radio-inactive-color: #6d6d6d;
10695   --f7-radio-extra-margin: 22px;
10696 }
10697 .aurora {
10698   --f7-radio-size: 16px;
10699   --f7-radio-border-width: 1px;
10700   --f7-radio-inactive-color: #888;
10701   --f7-radio-extra-margin: 0px;
10702 }
10703 .radio {
10704   position: relative;
10705   display: inline-block;
10706   vertical-align: middle;
10707   z-index: 1;
10708   --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
10709 }
10710 .icon-radio {
10711   width: var(--f7-radio-size);
10712   height: var(--f7-radio-size);
10713   border-radius: var(--f7-radio-border-radius);
10714   position: relative;
10715   box-sizing: border-box;
10716   display: block;
10717   flex-shrink: 0;
10718 }
10719 .radio .icon-radio,
10720 .md .icon-radio,
10721 .aurora .icon-radio {
10722   border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
10723 }
10724 label.item-radio,
10725 .radio {
10726   cursor: pointer;
10727 }
10728 label.item-radio input[type="checkbox"],
10729 .radio input[type="checkbox"],
10730 label.item-radio input[type="radio"],
10731 .radio input[type="radio"] {
10732   display: none;
10733 }
10734 label.item-radio {
10735   transition-duration: 300ms;
10736 }
10737 label.item-radio .item-content .item-media,
10738 label.item-radio.item-content .item-media {
10739   align-self: center;
10740 }
10741 label.item-radio.active-state {
10742   background-color: var(--f7-list-link-pressed-bg-color);
10743 }
10744 label.item-radio.active-state:after {
10745   background-color: transparent;
10746 }
10747 label.item-radio.disabled,
10748 .disabled label.item-radio {
10749   opacity: 0.55;
10750   pointer-events: none;
10751   opacity: 0.55 !important;
10752   pointer-events: none !important;
10753 }
10754 .ios .icon-radio:after {
10755   font-family: 'framework7-core-icons';
10756   font-weight: normal;
10757   font-style: normal;
10758   line-height: 1;
10759   letter-spacing: normal;
10760   text-transform: none;
10761   white-space: nowrap;
10762   word-wrap: normal;
10763   direction: ltr;
10764   -webkit-font-smoothing: antialiased;
10765   text-rendering: optimizeLegibility;
10766   -moz-osx-font-smoothing: grayscale;
10767   -moz-font-feature-settings: "liga";
10768        font-feature-settings: "liga";
10769   text-align: center;
10770   display: block;
10771   width: 100%;
10772   height: 100%;
10773   width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
10774   height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
10775   line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
10776   font-size: 20px;
10777   content: 'radio_ios';
10778   color: var(--f7-radio-active-color, var(--f7-theme-color));
10779   opacity: 0;
10780 }
10781 .ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10782 .ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10783 .ios .radio input[type="radio"]:checked ~ .icon-radio:after {
10784   opacity: 1;
10785 }
10786 .ios .radio input[type="radio"]:checked ~ .icon-radio {
10787   border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10788 }
10789 .ios label.item-radio input[type="radio"] ~ .icon-radio {
10790   position: absolute;
10791   top: 50%;
10792   margin-top: -11px;
10793   left: calc(var(--f7-safe-area-left) + 10px);
10794 }
10795 .ios label.item-radio .item-inner {
10796   padding-left: calc(var(--f7-safe-area-left) + 35px);
10797 }
10798 .ios label.item-radio.active-state {
10799   transition-duration: 0ms;
10800 }
10801 .md .icon-radio {
10802   transition-duration: 200ms;
10803 }
10804 .md .icon-radio:after {
10805   content: '';
10806   position: absolute;
10807   width: 10px;
10808   height: 10px;
10809   left: 50%;
10810   top: 50%;
10811   margin-left: -5px;
10812   margin-top: -5px;
10813   background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10814   border-radius: 50%;
10815   transform: scale(0);
10816   transition-duration: 200ms;
10817 }
10818 .md label.item-radio input[type="radio"]:checked ~ .icon-radio,
10819 .md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
10820 .md .radio input[type="radio"]:checked ~ .icon-radio {
10821   border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10822 }
10823 .md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10824 .md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10825 .md .radio input[type="radio"]:checked ~ .icon-radio:after {
10826   background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10827   transform: scale(1);
10828 }
10829 .md label.item-radio {
10830   position: relative;
10831   overflow: hidden;
10832   z-index: 0;
10833 }
10834 .md label.item-radio > .icon-radio {
10835   margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
10836 }
10837 .aurora .icon-radio {
10838   transition-duration: 150ms;
10839   overflow: hidden;
10840 }
10841 .aurora .icon-radio:after {
10842   content: '';
10843   position: absolute;
10844   width: 6px;
10845   height: 6px;
10846   left: 50%;
10847   top: 50%;
10848   margin-left: -3px;
10849   margin-top: -3px;
10850   background-color: #fff;
10851   border-radius: 50%;
10852   transform: scale(0);
10853   transition-duration: 150ms;
10854 }
10855 .aurora .icon-radio:before {
10856   content: '';
10857   position: absolute;
10858   left: 0;
10859   top: 0;
10860   width: 100%;
10861   height: 100%;
10862   background: rgba(0, 0, 0, 0.1);
10863   opacity: 0;
10864   transition-duration: 150ms;
10865 }
10866 .aurora .radio.active-state i:before {
10867   opacity: 1;
10868 }
10869 .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio,
10870 .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio,
10871 .aurora .radio input[type="radio"]:checked ~ .icon-radio {
10872   border-color: var(--f7-radio-active-color, var(--f7-theme-color));
10873   background-color: var(--f7-radio-active-color, var(--f7-theme-color));
10874 }
10875 .aurora label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
10876 .aurora label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
10877 .aurora .radio input[type="radio"]:checked ~ .icon-radio:after {
10878   transform: scale(1);
10879 }
10880 .aurora label.item-radio {
10881   position: relative;
10882   overflow: hidden;
10883   z-index: 0;
10884 }
10885 .aurora label.item-radio > .icon-radio {
10886   margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
10887 }
10888 /* === Toggle === */
10889 :root {
10890   --f7-toggle-handle-color: #fff;
10891 }
10892 .ios {
10893   --f7-toggle-width: 52px;
10894   --f7-toggle-height: 32px;
10895   --f7-toggle-border-color: #e5e5e5;
10896   --f7-toggle-inactive-color: #fff;
10897 }
10898 .ios .theme-dark,
10899 .ios.theme-dark {
10900   --f7-toggle-border-color: #555;
10901   --f7-toggle-inactive-color: #222;
10902 }
10903 .md {
10904   --f7-toggle-width: 36px;
10905   --f7-toggle-height: 14px;
10906   --f7-toggle-inactive-color: #b0afaf;
10907 }
10908 .md .theme-dark,
10909 .md.theme-dark {
10910   --f7-toggle-inactive-color: #555;
10911 }
10912 .aurora {
10913   --f7-toggle-width: 40px;
10914   --f7-toggle-height: 20px;
10915   --f7-toggle-inactive-color: #aaa;
10916 }
10917 .aurora .theme-dark,
10918 .aurora.theme-dark {
10919   --f7-toggle-inactive-color: #555;
10920 }
10921 .toggle,
10922 .toggle-icon {
10923   width: var(--f7-toggle-width);
10924   height: var(--f7-toggle-height);
10925   border-radius: var(--f7-toggle-height);
10926 }
10927 .toggle {
10928   display: inline-block;
10929   vertical-align: middle;
10930   position: relative;
10931   box-sizing: border-box;
10932   align-self: center;
10933   -webkit-user-select: none;
10934      -moz-user-select: none;
10935       -ms-user-select: none;
10936           user-select: none;
10937 }
10938 .toggle input[type="checkbox"] {
10939   display: none;
10940 }
10941 .toggle input[disabled] ~ .toggle-icon {
10942   pointer-events: none;
10943 }
10944 .toggle-icon {
10945   z-index: 0;
10946   margin: 0;
10947   padding: 0;
10948   -webkit-appearance: none;
10949      -moz-appearance: none;
10950           appearance: none;
10951   border: none;
10952   position: relative;
10953   transition: 300ms;
10954   box-sizing: border-box;
10955   display: block;
10956   cursor: pointer;
10957 }
10958 .toggle-icon:before,
10959 .toggle-icon:after {
10960   content: '';
10961   will-change: transform;
10962 }
10963 .toggle-icon:after {
10964   background: var(--f7-toggle-handle-color);
10965   position: absolute;
10966   z-index: 2;
10967   transform: translateX(0px);
10968   transition-duration: 300ms;
10969 }
10970 .ios .toggle input[type="checkbox"]:checked + .toggle-icon {
10971   background: var(--f7-toggle-active-color, var(--f7-theme-color));
10972 }
10973 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
10974   transform: scale(0);
10975 }
10976 .ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
10977   transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
10978 }
10979 .ios .toggle-icon {
10980   background: var(--f7-toggle-border-color);
10981 }
10982 .ios .toggle-icon:before {
10983   position: absolute;
10984   right: 2px;
10985   top: 2px;
10986   width: calc(var(--f7-toggle-width) - 4px);
10987   height: calc(var(--f7-toggle-height) - 4px);
10988   border-radius: var(--f7-toggle-height);
10989   box-sizing: border-box;
10990   background: var(--f7-toggle-inactive-color);
10991   z-index: 1;
10992   transition-duration: 300ms;
10993   transform: scale(1);
10994 }
10995 .ios .toggle-icon:after {
10996   height: calc(var(--f7-toggle-height) - 4px);
10997   width: calc(var(--f7-toggle-height) - 4px);
10998   top: 2px;
10999   right: 2px;
11000   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
11001   border-radius: calc(var(--f7-toggle-height) - 4px);
11002 }
11003 .ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
11004   transform: scale(0);
11005 }
11006 .ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
11007   width: calc(var(--f7-toggle-height) + 4px);
11008 }
11009 .ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
11010   transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
11011 }
11012 .md .toggle input[type="checkbox"]:checked + .toggle-icon {
11013   background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
11014 }
11015 .md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11016   transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));
11017   background: var(--f7-toggle-active-color, var(--f7-theme-color));
11018 }
11019 .md .toggle-icon {
11020   background: var(--f7-toggle-inactive-color);
11021 }
11022 .md .toggle-icon:after {
11023   height: calc(var(--f7-toggle-height) + 6px);
11024   width: calc(var(--f7-toggle-height) + 6px);
11025   top: -3px;
11026   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
11027   border-radius: var(--f7-toggle-height);
11028   right: 0;
11029 }
11030 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon {
11031   background: var(--f7-toggle-active-color, var(--f7-theme-color));
11032 }
11033 .aurora .toggle input[type="checkbox"]:checked + .toggle-icon:after {
11034   transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
11035 }
11036 .aurora .toggle-icon {
11037   background: var(--f7-toggle-inactive-color);
11038 }
11039 .aurora .toggle-icon:after {
11040   height: calc(var(--f7-toggle-height) - 4px);
11041   width: calc(var(--f7-toggle-height) - 4px);
11042   top: 2px;
11043   right: 2px;
11044   border-radius: calc(var(--f7-toggle-height) - 4px);
11045 }
11046 /* === Range Slider === */
11047 :root {
11048   /*
11049   --f7-range-bar-active-bg-color: var(--f7-theme-color);
11050   */
11051   --f7-range-scale-step-height: 5px;
11052   --f7-range-scale-text-color: #666;
11053   --f7-range-scale-substep-width: 1px;
11054   --f7-range-scale-substep-height: 4px;
11055 }
11056 .ios {
11057   --f7-range-size: 28px;
11058   --f7-range-bar-bg-color: #b7b8b7;
11059   --f7-range-bar-size: 1px;
11060   --f7-range-bar-border-radius: 2px;
11061   --f7-range-knob-size: 28px;
11062   --f7-range-knob-color: #fff;
11063   --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
11064   --f7-range-label-size: 20px;
11065   --f7-range-label-text-color: #000;
11066   --f7-range-label-bg-color: #fff;
11067   --f7-range-label-font-size: 12px;
11068   --f7-range-label-font-weight: normal;
11069   --f7-range-label-border-radius: 5px;
11070   --f7-range-label-padding: 0px;
11071   /*
11072   --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11073   */
11074   --f7-range-scale-step-width: 1px;
11075   --f7-range-scale-font-size: 12px;
11076   --f7-range-scale-font-weight: 400;
11077   --f7-range-scale-label-offset: 4px;
11078   /*
11079   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11080   */
11081 }
11082 .md {
11083   --f7-range-size: 20px;
11084   --f7-range-bar-bg-color: #b9b9b9;
11085   --f7-range-bar-size: 2px;
11086   --f7-range-bar-border-radius: 0px;
11087   --f7-range-knob-size: 12px;
11088   /*
11089   --f7-range-knob-color: var(--f7-theme-color);
11090   */
11091   --f7-range-knob-box-shadow: none;
11092   --f7-range-label-size: 26px;
11093   --f7-range-label-font-weight: normal;
11094   --f7-range-label-text-color: #fff;
11095   /*
11096   --f7-range-label-bg-color: var(--f7-theme-color);
11097   */
11098   --f7-range-label-font-size: 10px;
11099   --f7-range-label-border-radius: 50%;
11100   --f7-range-label-padding: 0px;
11101   /*
11102   --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11103   */
11104   --f7-range-scale-step-width: 2px;
11105   --f7-range-scale-font-size: 12px;
11106   --f7-range-scale-font-weight: 400;
11107   --f7-range-scale-label-offset: 4px;
11108   /*
11109   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11110   */
11111 }
11112 .aurora {
11113   --f7-range-size: 20px;
11114   --f7-range-bar-bg-color: #c7c7c7;
11115   --f7-range-bar-size: 2px;
11116   --f7-range-bar-border-radius: 2px;
11117   --f7-range-knob-size: 16px;
11118   /*
11119   --f7-range-knob-color: var(--f7-theme-color);
11120   */
11121   --f7-range-knob-box-shadow: none;
11122   --f7-range-label-size: 20px;
11123   --f7-range-label-text-color: #fff;
11124   /*
11125   --f7-range-label-bg-color: var(--f7-theme-color);
11126   */
11127   --f7-range-label-font-size: 10px;
11128   --f7-range-label-font-weight: 600;
11129   --f7-range-label-border-radius: 4px;
11130   --f7-range-label-padding: 0px 4px;
11131   /*
11132   --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
11133   */
11134   --f7-range-scale-step-width: 2px;
11135   --f7-range-scale-font-size: 11px;
11136   --f7-range-scale-font-weight: 500;
11137   --f7-range-scale-label-offset: 2px;
11138   /*
11139   --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
11140   */
11141 }
11142 .range-slider {
11143   display: block;
11144   position: relative;
11145   align-self: center;
11146   cursor: pointer;
11147   -webkit-user-select: none;
11148      -moz-user-select: none;
11149       -ms-user-select: none;
11150           user-select: none;
11151 }
11152 .range-slider input[type="range"] {
11153   display: none;
11154 }
11155 .range-slider.range-slider-horizontal {
11156   width: 100%;
11157   height: var(--f7-range-size);
11158 }
11159 .range-slider.range-slider-vertical {
11160   height: 100%;
11161   width: var(--f7-range-size);
11162 }
11163 .range-bar {
11164   position: absolute;
11165   overflow: hidden;
11166   background: var(--f7-range-bar-bg-color);
11167   border-radius: var(--f7-range-bar-border-radius);
11168 }
11169 .range-slider-vertical .range-bar {
11170   left: 50%;
11171   top: 0;
11172   height: 100%;
11173   width: var(--f7-range-bar-size);
11174   margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
11175 }
11176 .range-slider-horizontal .range-bar {
11177   left: 0;
11178   top: 50%;
11179   width: 100%;
11180   height: var(--f7-range-bar-size);
11181   margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
11182 }
11183 .range-bar-active {
11184   position: absolute;
11185   background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
11186 }
11187 .range-slider-horizontal .range-bar-active {
11188   right: 0;
11189   top: 0;
11190   height: 100%;
11191 }
11192 .range-slider-vertical .range-bar-active {
11193   left: 0;
11194   bottom: 0;
11195   width: 100%;
11196 }
11197 .range-slider-vertical-reversed .range-bar-active {
11198   top: 0;
11199   bottom: auto;
11200 }
11201 .range-knob-wrap {
11202   z-index: 20;
11203   position: absolute;
11204   height: var(--f7-range-knob-size);
11205   width: var(--f7-range-knob-size);
11206 }
11207 .range-slider-horizontal .range-knob-wrap {
11208   top: 50%;
11209   margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
11210   margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
11211   right: 0;
11212 }
11213 .range-slider-vertical .range-knob-wrap {
11214   left: 50%;
11215   margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
11216   bottom: 0;
11217   margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
11218 }
11219 .range-slider-vertical-reversed .range-knob-wrap {
11220   bottom: auto;
11221   top: 0;
11222   margin-bottom: 0;
11223   margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
11224 }
11225 .range-knob {
11226   box-sizing: border-box;
11227   border-radius: 50%;
11228   position: absolute;
11229   left: 0;
11230   top: 0;
11231   width: 100%;
11232   height: 100%;
11233   z-index: 1;
11234   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
11235   box-shadow: var(--f7-range-knob-box-shadow);
11236 }
11237 .range-knob:after {
11238   content: '';
11239   position: absolute;
11240   left: 50%;
11241   top: 50%;
11242   width: 44px;
11243   height: 44px;
11244   margin-left: -22px;
11245   margin-top: -22px;
11246 }
11247 .range-knob-label {
11248   position: absolute;
11249   left: 50%;
11250   bottom: 100%;
11251   text-align: center;
11252   transition-duration: 120ms;
11253   transition-property: transform;
11254   box-sizing: border-box;
11255   transform: translateY(100%) scale(0);
11256   height: var(--f7-range-label-size);
11257   line-height: var(--f7-range-label-size);
11258   min-width: var(--f7-range-label-size);
11259   color: var(--f7-range-label-text-color);
11260   background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
11261   font-size: var(--f7-range-label-font-size);
11262   font-weight: var(--f7-range-label-font-weight);
11263   border-radius: var(--f7-range-label-border-radius);
11264   padding: var(--f7-range-label-padding);
11265 }
11266 .range-knob-active-state .range-knob-label {
11267   transform: translateY(0%) scale(1);
11268 }
11269 .range-scale {
11270   position: absolute;
11271 }
11272 .range-slider-horizontal .range-scale {
11273   top: 50%;
11274   left: 0;
11275   width: 100%;
11276   margin-top: calc(var(--f7-range-bar-size) / 2);
11277 }
11278 .range-slider-vertical .range-scale {
11279   right: 50%;
11280   top: 0;
11281   height: 100%;
11282   margin-right: calc(var(--f7-range-bar-size) / 2);
11283 }
11284 .range-scale-step {
11285   position: absolute;
11286   box-sizing: border-box;
11287   display: flex;
11288   font-size: var(--f7-range-scale-font-size);
11289   font-weight: var(--f7-range-scale-font-weight);
11290   color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
11291   line-height: 1;
11292 }
11293 .range-scale-step:before {
11294   content: '';
11295   position: absolute;
11296   background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
11297 }
11298 .range-slider-horizontal .range-scale-step {
11299   justify-content: center;
11300   align-items: flex-start;
11301   width: var(--f7-range-scale-step-width);
11302   height: var(--f7-range-scale-step-height);
11303   padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
11304   top: 0;
11305   margin-right: calc(-1 * var(--f7-range-scale-step-width) / 2);
11306 }
11307 .range-slider-horizontal .range-scale-step:before {
11308   left: 0;
11309   top: 0;
11310   width: 100%;
11311   height: var(--f7-range-scale-step-height);
11312 }
11313 .range-slider-horizontal .range-scale-step:first-child {
11314   margin-right: 0;
11315 }
11316 .range-slider-horizontal .range-scale-step:last-child {
11317   margin-right: calc(-1 * var(--f7-range-scale-step-width));
11318 }
11319 .range-slider-vertical .range-scale-step {
11320   line-height: 1;
11321   justify-content: flex-end;
11322   align-items: center;
11323   height: var(--f7-range-scale-step-width);
11324   width: var(--f7-range-scale-step-height);
11325   padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
11326   right: 0;
11327   margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
11328 }
11329 .range-slider-vertical .range-scale-step:first-child {
11330   margin-bottom: 0;
11331 }
11332 .range-slider-vertical .range-scale-step:last-child {
11333   margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
11334 }
11335 .range-slider-vertical .range-scale-step:before {
11336   right: 0;
11337   top: 0;
11338   height: 100%;
11339   width: var(--f7-range-scale-step-height);
11340 }
11341 .range-scale-substep {
11342   --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
11343   --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
11344   --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
11345 }
11346 .ios .range-knob-label {
11347   margin-bottom: 6px;
11348   transform: translateX(-50%) translateY(100%) scale(0);
11349 }
11350 .ios .range-knob-active-state .range-knob-label {
11351   transform: translateX(-50%) translateY(0%) scale(1);
11352 }
11353 .md .range-knob {
11354   transition-duration: 200ms;
11355   transition-property: transform, background-color;
11356 }
11357 .md .range-knob-active-state .range-knob {
11358   transform: scale(1.5);
11359 }
11360 .md .range-slider-min:not(.range-slider-dual) .range-knob {
11361   background: #fff !important;
11362   border: 2px solid var(--f7-range-bar-bg-color);
11363 }
11364 .md .range-knob-label {
11365   width: var(--f7-range-label-size);
11366   margin-left: calc(-1 * var(--f7-range-label-size) / 2);
11367   margin-bottom: 8px;
11368 }
11369 .md .range-knob-label:before {
11370   content: '';
11371   left: 50%;
11372   top: 0px;
11373   margin-left: calc(-1 * var(--f7-range-label-size) / 2);
11374   position: absolute;
11375   z-index: -1;
11376   width: var(--f7-range-label-size);
11377   height: var(--f7-range-label-size);
11378   background: var(--f7-range-label-bg-color, var(--f7-theme-color));
11379   transform: rotate(-45deg);
11380   border-radius: 50% 50% 50% 0;
11381 }
11382 .md .range-knob-active-state .range-knob-label {
11383   transform: translateY(0%) scale(1);
11384 }
11385 .md .range-slider-label .range-knob-active-state .range-knob {
11386   transform: scale(0);
11387 }
11388 .aurora .range-knob-label {
11389   margin-bottom: 6px;
11390   transform: translateX(-50%) translateY(100%) scale(0);
11391 }
11392 .aurora .range-knob-active-state .range-knob-label {
11393   transform: translateX(-50%) translateY(0%) scale(1);
11394 }
11395 /* === Stepper === */
11396 :root {
11397   /*
11398   --f7-stepper-button-text-color: var(--f7-theme-color);
11399   --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
11400   --f7-stepper-value-text-color: var(--f7-theme-color);
11401   */
11402   --f7-stepper-fill-button-text-color: #fff;
11403   /*
11404   --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
11405   */
11406   --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
11407 }
11408 .ios {
11409   --f7-stepper-height: 29px;
11410   --f7-stepper-border-radius: 5px;
11411   /*
11412   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11413   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
11414   */
11415   --f7-stepper-border-width: 1px;
11416   --f7-stepper-large-height: 44px;
11417   --f7-stepper-small-height: 26px;
11418   --f7-stepper-small-border-width: 2px;
11419   --f7-stepper-value-font-size: 17px;
11420   --f7-stepper-value-font-weight: 400;
11421 }
11422 .md {
11423   --f7-stepper-height: 36px;
11424   --f7-stepper-border-radius: 4px;
11425   --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
11426   /*
11427   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11428   */
11429   --f7-stepper-border-width: 2px;
11430   --f7-stepper-large-height: 48px;
11431   --f7-stepper-small-border-width: 2px;
11432   --f7-stepper-small-height: 28px;
11433   --f7-stepper-value-font-size: 14px;
11434   --f7-stepper-value-font-weight: 500;
11435 }
11436 .md .theme-dark,
11437 .md.theme-dark {
11438   --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
11439 }
11440 .aurora {
11441   /*
11442   --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
11443   --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
11444   */
11445   --f7-stepper-height: 28px;
11446   --f7-stepper-border-radius: 4px;
11447   /*
11448   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
11449   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
11450   */
11451   --f7-stepper-border-width: 2px;
11452   --f7-stepper-large-height: 34px;
11453   --f7-stepper-small-border-width: 1px;
11454   --f7-stepper-small-height: 22px;
11455   --f7-stepper-value-font-size: 14px;
11456   --f7-stepper-value-font-weight: 500;
11457 }
11458 .stepper {
11459   display: inline-flex;
11460   align-items: stretch;
11461   height: var(--f7-stepper-height);
11462   border-radius: var(--f7-stepper-border-radius);
11463   flex-direction: row-reverse;
11464 }
11465 .stepper-button,
11466 .stepper-button-minus,
11467 .stepper-button-plus {
11468   background-color: var(--f7-stepper-button-bg-color);
11469   width: 40px;
11470   border-radius: var(--f7-stepper-border-radius);
11471   border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11472   color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
11473   line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
11474   text-align: center;
11475   display: flex;
11476   justify-content: center;
11477   align-content: center;
11478   align-items: center;
11479   flex-shrink: 0;
11480   box-sizing: border-box;
11481   position: relative;
11482   cursor: pointer;
11483 }
11484 .stepper-button.active-state,
11485 .stepper-button-minus.active-state,
11486 .stepper-button-plus.active-state {
11487   background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
11488   color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
11489 }
11490 .stepper-button:first-child,
11491 .stepper-button-minus:first-child,
11492 .stepper-button-plus:first-child {
11493   border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
11494 }
11495 .stepper-button:last-child,
11496 .stepper-button-minus:last-child,
11497 .stepper-button-plus:last-child {
11498   border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
11499 }
11500 .stepper-button .icon,
11501 .stepper-button-minus .icon,
11502 .stepper-button-plus .icon {
11503   pointer-events: none;
11504 }
11505 .stepper-button + .stepper-button,
11506 .stepper-button-minus + .stepper-button,
11507 .stepper-button-plus + .stepper-button,
11508 .stepper-button + .stepper-button-minus,
11509 .stepper-button-minus + .stepper-button-minus,
11510 .stepper-button-plus + .stepper-button-minus,
11511 .stepper-button + .stepper-button-plus,
11512 .stepper-button-minus + .stepper-button-plus,
11513 .stepper-button-plus + .stepper-button-plus {
11514   border-left: none;
11515 }
11516 .stepper-button-plus,
11517 .stepper-button-minus {
11518   -webkit-user-select: none;
11519      -moz-user-select: none;
11520       -ms-user-select: none;
11521           user-select: none;
11522 }
11523 .stepper-button-plus:after,
11524 .stepper-button-minus:after,
11525 .stepper-button-plus:before,
11526 .stepper-button-minus:before {
11527   content: '';
11528   position: absolute;
11529   left: 50%;
11530   top: 50%;
11531   transform: translate(-50%, -50%);
11532   background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
11533 }
11534 .stepper-button-plus:after,
11535 .stepper-button-minus:after {
11536   width: 15px;
11537   height: 2px;
11538 }
11539 .stepper-button-plus:before {
11540   height: 15px;
11541   width: 2px;
11542 }
11543 .stepper-value {
11544   display: flex;
11545   align-content: center;
11546   align-items: center;
11547   justify-content: center;
11548 }
11549 .stepper-input-wrap,
11550 .stepper-value {
11551   flex-shrink: 1;
11552   text-align: center;
11553   border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11554   border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
11555 }
11556 .stepper .stepper-input-wrap input,
11557 .stepper-value {
11558   width: 45px;
11559   color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
11560   font-size: var(--f7-stepper-value-font-size);
11561   font-weight: var(--f7-stepper-value-font-weight);
11562   text-align: center;
11563 }
11564 .stepper .stepper-input-wrap input {
11565   height: 100%;
11566 }
11567 .stepper-round,
11568 .ios .stepper-round-ios,
11569 .md .stepper-round-md,
11570 .aurora .stepper-round-aurora {
11571   --f7-stepper-border-radius: var(--f7-stepper-height);
11572 }
11573 .stepper-fill,
11574 .ios .stepper-fill-ios,
11575 .md .stepper-fill-md,
11576 .aurora .stepper-fill-aurora {
11577   --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
11578   --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
11579   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
11580 }
11581 .stepper-fill .stepper-button + .stepper-button,
11582 .ios .stepper-fill-ios .stepper-button + .stepper-button,
11583 .md .stepper-fill-md .stepper-button + .stepper-button,
11584 .aurora .stepper-fill-aurora .stepper-button + .stepper-button,
11585 .stepper-raised .stepper-button + .stepper-button,
11586 .ios .stepper-raised-ios .stepper-button + .stepper-button,
11587 .md .stepper-raised-md .stepper-button + .stepper-button,
11588 .aurora .stepper-raised-aurora .stepper-button + .stepper-button,
11589 .stepper-fill .stepper-button-minus + .stepper-button-plus,
11590 .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
11591 .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
11592 .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
11593 .stepper-raised .stepper-button-minus + .stepper-button-plus,
11594 .ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
11595 .md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
11596 .aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
11597   border-left: 1px solid rgba(0, 0, 0, 0.1);
11598 }
11599 .stepper-fill .stepper-button + .stepper-button.active-state,
11600 .ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
11601 .md .stepper-fill-md .stepper-button + .stepper-button.active-state,
11602 .aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
11603 .stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
11604 .ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
11605 .md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
11606 .aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
11607   border-left-color: var(--f7-stepper-button-pressed-bg-color);
11608 }
11609 .stepper-raised:not(.stepper-fill) .stepper-input-wrap,
11610 .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
11611 .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
11612 .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
11613 .stepper-raised:not(.stepper-fill) .stepper-value,
11614 .ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
11615 .md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
11616 .aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
11617   border-left: 1px solid rgba(0, 0, 0, 0.1);
11618   border-right: 1px solid rgba(0, 0, 0, 0.1);
11619 }
11620 .stepper-large,
11621 .ios .stepper-large-ios,
11622 .md .stepper-large-md,
11623 .aurora .stepper-large-aurora {
11624   --f7-stepper-height: var(--f7-stepper-large-height);
11625 }
11626 .stepper-small,
11627 .ios .stepper-small-ios,
11628 .md .stepper-small-md,
11629 .aurora .stepper-small-aurora {
11630   --f7-stepper-border-width: var(--f7-stepper-small-border-width);
11631   --f7-stepper-height: var(--f7-stepper-small-height);
11632 }
11633 .ios .stepper-fill.stepper-small-ios,
11634 .ios .stepper-fill.stepper-small {
11635   --f7-stepper-button-pressed-bg-color: transparent;
11636   --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
11637 }
11638 .stepper-raised,
11639 .ios .stepper-raised-ios,
11640 .md .stepper-raised-md,
11641 .aurora .stepper-raised-aurora {
11642   --f7-stepper-border-width: 0;
11643   box-shadow: var(--f7-stepper-raised-box-shadow);
11644 }
11645 .ios .stepper-button .f7-icons,
11646 .ios .stepper-button-minus .f7-icons,
11647 .ios .stepper-button-plus .f7-icons {
11648   font-size: 22px;
11649 }
11650 .ios .stepper-fill,
11651 .ios .stepper-fill-ios {
11652   --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
11653 }
11654 .ios .stepper-small.stepper-raised,
11655 .ios .stepper-small-ios.stepper-raised,
11656 .ios .stepper-small.stepper-raised-ios,
11657 .ios .stepper-small-ios.stepper-raised-ios {
11658   --f7-stepper-border-width: 0px;
11659 }
11660 .ios .stepper-small .stepper-button,
11661 .ios .stepper-small-ios .stepper-button,
11662 .ios .stepper-small .stepper-button-minus,
11663 .ios .stepper-small-ios .stepper-button-minus,
11664 .ios .stepper-small .stepper-button-plus,
11665 .ios .stepper-small-ios .stepper-button-plus {
11666   transition-duration: 200ms;
11667 }
11668 .ios .stepper-small .stepper-button.active-state:after,
11669 .ios .stepper-small-ios .stepper-button.active-state:after,
11670 .ios .stepper-small .stepper-button-minus.active-state:after,
11671 .ios .stepper-small-ios .stepper-button-minus.active-state:after,
11672 .ios .stepper-small .stepper-button-plus.active-state:after,
11673 .ios .stepper-small-ios .stepper-button-plus.active-state:after,
11674 .ios .stepper-small .stepper-button.active-state:before,
11675 .ios .stepper-small-ios .stepper-button.active-state:before,
11676 .ios .stepper-small .stepper-button-minus.active-state:before,
11677 .ios .stepper-small-ios .stepper-button-minus.active-state:before,
11678 .ios .stepper-small .stepper-button-plus.active-state:before,
11679 .ios .stepper-small-ios .stepper-button-plus.active-state:before {
11680   transition-duration: 200ms;
11681   background-color: var(--f7-theme-color);
11682 }
11683 .md .stepper-button,
11684 .md .stepper-button-minus,
11685 .md .stepper-button-plus {
11686   transition-duration: 300ms;
11687   transform: translate3d(0, 0, 0);
11688   overflow: hidden;
11689 }
11690 .md .stepper-fill,
11691 .md .stepper-fill-md {
11692   --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
11693 }
11694 .aurora .stepper-button,
11695 .aurora .stepper-button-minus,
11696 .aurora .stepper-button-plus {
11697   transition-duration: 100ms;
11698   transform: translate3d(0, 0, 0);
11699   overflow: hidden;
11700 }
11701 .aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
11702 .aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
11703 .aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
11704   background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
11705 }
11706 .aurora .stepper-fill,
11707 .aurora .stepper-fill-aurora {
11708   --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
11709   --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
11710 }
11711 /* === Smart Select === */
11712 .smart-select :root {
11713   /*
11714   --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
11715   --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
11716   */
11717 }
11718 .smart-select select {
11719   display: none;
11720 }
11721 .smart-select .item-after {
11722   max-width: 70%;
11723   overflow: hidden;
11724   text-overflow: ellipsis;
11725   position: relative;
11726   display: block;
11727 }
11728 .smart-select-sheet .page,
11729 .smart-select-sheet .sheet-modal-inner,
11730 .smart-select-sheet .list ul {
11731   background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
11732 }
11733 .smart-select-sheet .toolbar:after {
11734   content: '';
11735   position: absolute;
11736   background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
11737   display: block;
11738   z-index: 15;
11739   top: auto;
11740   right: auto;
11741   bottom: 0;
11742   left: 0;
11743   height: 1px;
11744   width: 100%;
11745   transform-origin: 50% 100%;
11746   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11747 }
11748 .smart-select-sheet .toolbar:after {
11749   display: block;
11750 }
11751 .smart-select-sheet .list {
11752   margin: 0;
11753 }
11754 .smart-select-sheet .list ul:before {
11755   display: none !important;
11756 }
11757 .smart-select-sheet .list ul:after {
11758   display: none !important;
11759 }
11760 .smart-select-popover .popover-inner {
11761   max-height: 40vh;
11762 }
11763 /* === Grid === */
11764 .ios {
11765   --f7-grid-gap: 15px;
11766 }
11767 .md {
11768   --f7-grid-gap: 16px;
11769 }
11770 .aurora {
11771   --f7-grid-gap: 15px;
11772 }
11773 .row {
11774   display: flex;
11775   justify-content: space-between;
11776   flex-wrap: wrap;
11777   align-items: flex-start;
11778   --f7-cols-per-row: 1;
11779 }
11780 .row > [class*="col-"],
11781 .row > .col {
11782   box-sizing: border-box;
11783   width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
11784 }
11785 .row.no-gap {
11786   --f7-grid-gap: 0px;
11787 }
11788 .row .col-5 {
11789   --f7-cols-per-row: 20;
11790 }
11791 .row .col-10 {
11792   --f7-cols-per-row: 10;
11793 }
11794 .row .col-15 {
11795   --f7-cols-per-row: 6.66666667;
11796 }
11797 .row .col-20 {
11798   --f7-cols-per-row: 5;
11799 }
11800 .row .col-25 {
11801   --f7-cols-per-row: 4;
11802 }
11803 .row .col-30 {
11804   --f7-cols-per-row: 3.33333333;
11805 }
11806 .row .col-33 {
11807   --f7-cols-per-row: 3;
11808 }
11809 .row .col-35 {
11810   --f7-cols-per-row: 2.85714286;
11811 }
11812 .row .col-40 {
11813   --f7-cols-per-row: 2.5;
11814 }
11815 .row .col-45 {
11816   --f7-cols-per-row: 2.22222222;
11817 }
11818 .row .col-50 {
11819   --f7-cols-per-row: 2;
11820 }
11821 .row .col-55 {
11822   --f7-cols-per-row: 1.81818182;
11823 }
11824 .row .col-60 {
11825   --f7-cols-per-row: 1.66666667;
11826 }
11827 .row .col-65 {
11828   --f7-cols-per-row: 1.53846154;
11829 }
11830 .row .col-66 {
11831   --f7-cols-per-row: 1.5;
11832 }
11833 .row .col-70 {
11834   --f7-cols-per-row: 1.42857143;
11835 }
11836 .row .col-75 {
11837   --f7-cols-per-row: 1.33333333;
11838 }
11839 .row .col-80 {
11840   --f7-cols-per-row: 1.25;
11841 }
11842 .row .col-85 {
11843   --f7-cols-per-row: 1.17647059;
11844 }
11845 .row .col-90 {
11846   --f7-cols-per-row: 1.11111111;
11847 }
11848 .row .col-95 {
11849   --f7-cols-per-row: 1.05263158;
11850 }
11851 .row .col-100 {
11852   --f7-cols-per-row: 1;
11853 }
11854 .row .col:nth-last-child(1),
11855 .row .col:nth-last-child(1) ~ .col {
11856   --f7-cols-per-row: 1;
11857 }
11858 .row .col:nth-last-child(2),
11859 .row .col:nth-last-child(2) ~ .col {
11860   --f7-cols-per-row: 2;
11861 }
11862 .row .col:nth-last-child(3),
11863 .row .col:nth-last-child(3) ~ .col {
11864   --f7-cols-per-row: 3;
11865 }
11866 .row .col:nth-last-child(4),
11867 .row .col:nth-last-child(4) ~ .col {
11868   --f7-cols-per-row: 4;
11869 }
11870 .row .col:nth-last-child(5),
11871 .row .col:nth-last-child(5) ~ .col {
11872   --f7-cols-per-row: 5;
11873 }
11874 .row .col:nth-last-child(6),
11875 .row .col:nth-last-child(6) ~ .col {
11876   --f7-cols-per-row: 6;
11877 }
11878 .row .col:nth-last-child(7),
11879 .row .col:nth-last-child(7) ~ .col {
11880   --f7-cols-per-row: 7;
11881 }
11882 .row .col:nth-last-child(8),
11883 .row .col:nth-last-child(8) ~ .col {
11884   --f7-cols-per-row: 8;
11885 }
11886 .row .col:nth-last-child(9),
11887 .row .col:nth-last-child(9) ~ .col {
11888   --f7-cols-per-row: 9;
11889 }
11890 .row .col:nth-last-child(10),
11891 .row .col:nth-last-child(10) ~ .col {
11892   --f7-cols-per-row: 10;
11893 }
11894 .row .col:nth-last-child(11),
11895 .row .col:nth-last-child(11) ~ .col {
11896   --f7-cols-per-row: 11;
11897 }
11898 .row .col:nth-last-child(12),
11899 .row .col:nth-last-child(12) ~ .col {
11900   --f7-cols-per-row: 12;
11901 }
11902 .row .col:nth-last-child(13),
11903 .row .col:nth-last-child(13) ~ .col {
11904   --f7-cols-per-row: 13;
11905 }
11906 .row .col:nth-last-child(14),
11907 .row .col:nth-last-child(14) ~ .col {
11908   --f7-cols-per-row: 14;
11909 }
11910 .row .col:nth-last-child(15),
11911 .row .col:nth-last-child(15) ~ .col {
11912   --f7-cols-per-row: 15;
11913 }
11914 .row .col:nth-last-child(16),
11915 .row .col:nth-last-child(16) ~ .col {
11916   --f7-cols-per-row: 16;
11917 }
11918 .row .col:nth-last-child(17),
11919 .row .col:nth-last-child(17) ~ .col {
11920   --f7-cols-per-row: 17;
11921 }
11922 .row .col:nth-last-child(18),
11923 .row .col:nth-last-child(18) ~ .col {
11924   --f7-cols-per-row: 18;
11925 }
11926 .row .col:nth-last-child(19),
11927 .row .col:nth-last-child(19) ~ .col {
11928   --f7-cols-per-row: 19;
11929 }
11930 .row .col:nth-last-child(20),
11931 .row .col:nth-last-child(20) ~ .col {
11932   --f7-cols-per-row: 20;
11933 }
11934 .row .col:nth-last-child(21),
11935 .row .col:nth-last-child(21) ~ .col {
11936   --f7-cols-per-row: 21;
11937 }
11938 .row .col:nth-last-child(22),
11939 .row .col:nth-last-child(22) ~ .col {
11940   --f7-cols-per-row: 22;
11941 }
11942 @media (min-width: 768px) {
11943   .row .tablet-5 {
11944     --f7-cols-per-row: 20;
11945   }
11946   .row .tablet-10 {
11947     --f7-cols-per-row: 10;
11948   }
11949   .row .tablet-15 {
11950     --f7-cols-per-row: 6.66666667;
11951   }
11952   .row .tablet-20 {
11953     --f7-cols-per-row: 5;
11954   }
11955   .row .tablet-25 {
11956     --f7-cols-per-row: 4;
11957   }
11958   .row .tablet-30 {
11959     --f7-cols-per-row: 3.33333333;
11960   }
11961   .row .tablet-33 {
11962     --f7-cols-per-row: 3;
11963   }
11964   .row .tablet-35 {
11965     --f7-cols-per-row: 2.85714286;
11966   }
11967   .row .tablet-40 {
11968     --f7-cols-per-row: 2.5;
11969   }
11970   .row .tablet-45 {
11971     --f7-cols-per-row: 2.22222222;
11972   }
11973   .row .tablet-50 {
11974     --f7-cols-per-row: 2;
11975   }
11976   .row .tablet-55 {
11977     --f7-cols-per-row: 1.81818182;
11978   }
11979   .row .tablet-60 {
11980     --f7-cols-per-row: 1.66666667;
11981   }
11982   .row .tablet-65 {
11983     --f7-cols-per-row: 1.53846154;
11984   }
11985   .row .tablet-66 {
11986     --f7-cols-per-row: 1.5;
11987   }
11988   .row .tablet-70 {
11989     --f7-cols-per-row: 1.42857143;
11990   }
11991   .row .tablet-75 {
11992     --f7-cols-per-row: 1.33333333;
11993   }
11994   .row .tablet-80 {
11995     --f7-cols-per-row: 1.25;
11996   }
11997   .row .tablet-85 {
11998     --f7-cols-per-row: 1.17647059;
11999   }
12000   .row .tablet-90 {
12001     --f7-cols-per-row: 1.11111111;
12002   }
12003   .row .tablet-95 {
12004     --f7-cols-per-row: 1.05263158;
12005   }
12006   .row .tablet-100 {
12007     --f7-cols-per-row: 1;
12008   }
12009   .row .tablet-auto:nth-last-child(1),
12010   .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
12011     --f7-cols-per-row: 1;
12012   }
12013   .row .tablet-auto:nth-last-child(2),
12014   .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
12015     --f7-cols-per-row: 2;
12016   }
12017   .row .tablet-auto:nth-last-child(3),
12018   .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
12019     --f7-cols-per-row: 3;
12020   }
12021   .row .tablet-auto:nth-last-child(4),
12022   .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
12023     --f7-cols-per-row: 4;
12024   }
12025   .row .tablet-auto:nth-last-child(5),
12026   .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
12027     --f7-cols-per-row: 5;
12028   }
12029   .row .tablet-auto:nth-last-child(6),
12030   .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
12031     --f7-cols-per-row: 6;
12032   }
12033   .row .tablet-auto:nth-last-child(7),
12034   .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
12035     --f7-cols-per-row: 7;
12036   }
12037   .row .tablet-auto:nth-last-child(8),
12038   .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
12039     --f7-cols-per-row: 8;
12040   }
12041   .row .tablet-auto:nth-last-child(9),
12042   .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
12043     --f7-cols-per-row: 9;
12044   }
12045   .row .tablet-auto:nth-last-child(10),
12046   .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
12047     --f7-cols-per-row: 10;
12048   }
12049   .row .tablet-auto:nth-last-child(11),
12050   .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
12051     --f7-cols-per-row: 11;
12052   }
12053   .row .tablet-auto:nth-last-child(12),
12054   .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
12055     --f7-cols-per-row: 12;
12056   }
12057   .row .tablet-auto:nth-last-child(13),
12058   .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
12059     --f7-cols-per-row: 13;
12060   }
12061   .row .tablet-auto:nth-last-child(14),
12062   .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
12063     --f7-cols-per-row: 14;
12064   }
12065   .row .tablet-auto:nth-last-child(15),
12066   .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
12067     --f7-cols-per-row: 15;
12068   }
12069   .row .tablet-auto:nth-last-child(16),
12070   .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
12071     --f7-cols-per-row: 16;
12072   }
12073   .row .tablet-auto:nth-last-child(17),
12074   .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
12075     --f7-cols-per-row: 17;
12076   }
12077   .row .tablet-auto:nth-last-child(18),
12078   .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
12079     --f7-cols-per-row: 18;
12080   }
12081   .row .tablet-auto:nth-last-child(19),
12082   .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
12083     --f7-cols-per-row: 19;
12084   }
12085   .row .tablet-auto:nth-last-child(20),
12086   .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
12087     --f7-cols-per-row: 20;
12088   }
12089   .row .tablet-auto:nth-last-child(21),
12090   .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
12091     --f7-cols-per-row: 21;
12092   }
12093   .row .tablet-auto:nth-last-child(22),
12094   .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
12095     --f7-cols-per-row: 22;
12096   }
12097 }
12098 @media (min-width: 1025px) {
12099   .row .desktop-5 {
12100     --f7-cols-per-row: 20;
12101   }
12102   .row .desktop-10 {
12103     --f7-cols-per-row: 10;
12104   }
12105   .row .desktop-15 {
12106     --f7-cols-per-row: 6.66666667;
12107   }
12108   .row .desktop-20 {
12109     --f7-cols-per-row: 5;
12110   }
12111   .row .desktop-25 {
12112     --f7-cols-per-row: 4;
12113   }
12114   .row .desktop-30 {
12115     --f7-cols-per-row: 3.33333333;
12116   }
12117   .row .desktop-33 {
12118     --f7-cols-per-row: 3;
12119   }
12120   .row .desktop-35 {
12121     --f7-cols-per-row: 2.85714286;
12122   }
12123   .row .desktop-40 {
12124     --f7-cols-per-row: 2.5;
12125   }
12126   .row .desktop-45 {
12127     --f7-cols-per-row: 2.22222222;
12128   }
12129   .row .desktop-50 {
12130     --f7-cols-per-row: 2;
12131   }
12132   .row .desktop-55 {
12133     --f7-cols-per-row: 1.81818182;
12134   }
12135   .row .desktop-60 {
12136     --f7-cols-per-row: 1.66666667;
12137   }
12138   .row .desktop-65 {
12139     --f7-cols-per-row: 1.53846154;
12140   }
12141   .row .desktop-66 {
12142     --f7-cols-per-row: 1.5;
12143   }
12144   .row .desktop-70 {
12145     --f7-cols-per-row: 1.42857143;
12146   }
12147   .row .desktop-75 {
12148     --f7-cols-per-row: 1.33333333;
12149   }
12150   .row .desktop-80 {
12151     --f7-cols-per-row: 1.25;
12152   }
12153   .row .desktop-85 {
12154     --f7-cols-per-row: 1.17647059;
12155   }
12156   .row .desktop-90 {
12157     --f7-cols-per-row: 1.11111111;
12158   }
12159   .row .desktop-95 {
12160     --f7-cols-per-row: 1.05263158;
12161   }
12162   .row .desktop-100 {
12163     --f7-cols-per-row: 1;
12164   }
12165   .row .desktop-auto:nth-last-child(1),
12166   .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
12167     --f7-cols-per-row: 1;
12168   }
12169   .row .desktop-auto:nth-last-child(2),
12170   .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
12171     --f7-cols-per-row: 2;
12172   }
12173   .row .desktop-auto:nth-last-child(3),
12174   .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
12175     --f7-cols-per-row: 3;
12176   }
12177   .row .desktop-auto:nth-last-child(4),
12178   .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
12179     --f7-cols-per-row: 4;
12180   }
12181   .row .desktop-auto:nth-last-child(5),
12182   .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
12183     --f7-cols-per-row: 5;
12184   }
12185   .row .desktop-auto:nth-last-child(6),
12186   .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
12187     --f7-cols-per-row: 6;
12188   }
12189   .row .desktop-auto:nth-last-child(7),
12190   .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
12191     --f7-cols-per-row: 7;
12192   }
12193   .row .desktop-auto:nth-last-child(8),
12194   .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
12195     --f7-cols-per-row: 8;
12196   }
12197   .row .desktop-auto:nth-last-child(9),
12198   .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
12199     --f7-cols-per-row: 9;
12200   }
12201   .row .desktop-auto:nth-last-child(10),
12202   .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
12203     --f7-cols-per-row: 10;
12204   }
12205   .row .desktop-auto:nth-last-child(11),
12206   .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
12207     --f7-cols-per-row: 11;
12208   }
12209   .row .desktop-auto:nth-last-child(12),
12210   .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
12211     --f7-cols-per-row: 12;
12212   }
12213   .row .desktop-auto:nth-last-child(13),
12214   .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
12215     --f7-cols-per-row: 13;
12216   }
12217   .row .desktop-auto:nth-last-child(14),
12218   .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
12219     --f7-cols-per-row: 14;
12220   }
12221   .row .desktop-auto:nth-last-child(15),
12222   .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
12223     --f7-cols-per-row: 15;
12224   }
12225   .row .desktop-auto:nth-last-child(16),
12226   .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
12227     --f7-cols-per-row: 16;
12228   }
12229   .row .desktop-auto:nth-last-child(17),
12230   .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
12231     --f7-cols-per-row: 17;
12232   }
12233   .row .desktop-auto:nth-last-child(18),
12234   .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
12235     --f7-cols-per-row: 18;
12236   }
12237   .row .desktop-auto:nth-last-child(19),
12238   .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
12239     --f7-cols-per-row: 19;
12240   }
12241   .row .desktop-auto:nth-last-child(20),
12242   .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
12243     --f7-cols-per-row: 20;
12244   }
12245   .row .desktop-auto:nth-last-child(21),
12246   .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
12247     --f7-cols-per-row: 21;
12248   }
12249   .row .desktop-auto:nth-last-child(22),
12250   .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
12251     --f7-cols-per-row: 22;
12252   }
12253 }
12254 /* === Calendar/Datepicker === */
12255 :root {
12256   --f7-calendar-height: 320px;
12257   --f7-calendar-sheet-landscape-height: 220px;
12258   --f7-calendar-sheet-bg-color: #fff;
12259   --f7-calendar-popover-width: 320px;
12260   --f7-calendar-popover-height: 320px;
12261   --f7-calendar-modal-height: 420px;
12262   --f7-calendar-modal-max-width: 380px;
12263   --f7-calendar-modal-border-radius: 4px;
12264   --f7-calendar-modal-bg-color: #fff;
12265   /*
12266   --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
12267   --f7-calendar-header-link-color: var(--f7-bars-link-color);
12268   --f7-calendar-header-text-color: var(--f7-bars-text-color);
12269   --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
12270   --f7-calendar-footer-border-color: var(--f7-bars-border-color);
12271   --f7-calendar-footer-link-color: var(--f7-bars-link-color);
12272   --f7-calendar-footer-text-color: var(--f7-bars-text-color);
12273   --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
12274   --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
12275   */
12276   --f7-calendar-footer-padding: 0 8px;
12277   --f7-calendar-week-header-font-size: 11px;
12278   --f7-calendar-day-text-color: #000;
12279   --f7-calendar-selected-text-color: #fff;
12280   /*
12281   --f7-calendar-selected-bg-color:  var(--f7-theme-color);
12282   */
12283   --f7-calendar-prev-next-text-color: #b8b8b8;
12284   --f7-calendar-disabled-text-color: #d4d4d4;
12285   --f7-calendar-event-dot-size: 4px;
12286   /*
12287   --f7-calendar-event-bg-color: var(--f7-theme-color);
12288   */
12289 }
12290 :root .theme-dark,
12291 :root.theme-dark {
12292   --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
12293   --f7-calendar-modal-bg-color: #171717;
12294   --f7-calendar-sheet-bg-color: #171717;
12295 }
12296 .ios {
12297   --f7-calendar-sheet-border-color: #929499;
12298   --f7-calendar-header-height: 44px;
12299   --f7-calendar-header-font-size: 17px;
12300   --f7-calendar-header-font-weight: 600;
12301   --f7-calendar-header-padding: 0 8px;
12302   --f7-calendar-footer-height: 44px;
12303   --f7-calendar-footer-font-size: 17px;
12304   --f7-calendar-week-header-height: 18px;
12305   --f7-calendar-row-border-color: #c4c4c4;
12306   --f7-calendar-day-font-size: 15px;
12307   --f7-calendar-today-text-color: #000;
12308   --f7-calendar-today-bg-color: #e3e3e3;
12309   --f7-calendar-day-size: 30px;
12310 }
12311 .ios .theme-dark,
12312 .ios.theme-dark {
12313   --f7-calendar-row-border-color: var(--f7-bars-border-color);
12314   --f7-calendar-day-text-color: #fff;
12315   --f7-calendar-today-text-color: #fff;
12316   --f7-calendar-today-bg-color: #333;
12317 }
12318 .md {
12319   --f7-calendar-sheet-border-color: #ccc;
12320   --f7-calendar-header-height: 56px;
12321   --f7-calendar-header-font-size: 20px;
12322   --f7-calendar-header-font-weight: 400;
12323   --f7-calendar-header-padding: 0 24px;
12324   --f7-calendar-footer-height: 48px;
12325   --f7-calendar-footer-font-size: 14px;
12326   --f7-calendar-week-header-height: 24px;
12327   --f7-calendar-row-border-color: transparent;
12328   --f7-calendar-day-font-size: 14px;
12329   /*
12330   --f7-calendar-today-text-color: var(--f7-theme-color);
12331   */
12332   --f7-calendar-today-bg-color: none;
12333   --f7-calendar-day-size: 32px;
12334 }
12335 .md .theme-dark,
12336 .md.theme-dark {
12337   --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
12338 }
12339 .aurora {
12340   --f7-calendar-sheet-border-color: #ccc;
12341   --f7-calendar-header-height: 38px;
12342   --f7-calendar-header-font-size: 14px;
12343   --f7-calendar-header-font-weight: 600;
12344   --f7-calendar-header-padding: 0 8px;
12345   --f7-calendar-footer-height: 38px;
12346   --f7-calendar-footer-font-size: 14px;
12347   --f7-calendar-week-header-height: 18px;
12348   --f7-calendar-row-border-color: #e3e3e3;
12349   --f7-calendar-day-font-size: 13px;
12350   --f7-calendar-today-text-color: #000;
12351   --f7-calendar-today-bg-color: #e3e3e3;
12352   --f7-calendar-day-size: 30px;
12353 }
12354 .aurora .theme-dark,
12355 .aurora.theme-dark {
12356   --f7-calendar-row-border-color: var(--f7-bars-border-color);
12357   --f7-calendar-day-text-color: #fff;
12358   --f7-calendar-today-text-color: #fff;
12359   --f7-calendar-today-bg-color: #333;
12360 }
12361 .calendar {
12362   overflow: hidden;
12363   height: var(--f7-calendar-height);
12364   width: 100%;
12365   display: flex;
12366   flex-direction: column;
12367 }
12368 .calendar.modal-in {
12369   display: flex;
12370 }
12371 @media (orientation: landscape) and (max-height: 415px) {
12372   .calendar.calendar-sheet {
12373     height: var(--f7-calendar-sheet-landscape-height);
12374   }
12375   .calendar.calendar-modal {
12376     height: calc(100vh - var(--f7-navbar-height));
12377   }
12378 }
12379 .calendar.calendar-inline,
12380 .calendar.calendar-popover .calendar {
12381   position: relative;
12382 }
12383 .calendar-sheet {
12384   --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
12385   background: var(--f7-calendar-sheet-bg-color);
12386 }
12387 .calendar-sheet:before {
12388   z-index: 600;
12389 }
12390 .calendar-sheet .sheet-modal-inner {
12391   margin-bottom: var(--f7-safe-area-bottom);
12392 }
12393 .calendar-sheet .toolbar:before,
12394 .calendar-modal .toolbar:before,
12395 .calendar-popover .toolbar:before {
12396   display: none;
12397 }
12398 .calendar-popover {
12399   width: var(--f7-calendar-popover-width);
12400 }
12401 .calendar-popover .calendar {
12402   height: var(--f7-calendar-popover-height);
12403   border-radius: var(--f7-popover-border-radius);
12404 }
12405 .calendar-header {
12406   width: 100%;
12407   position: relative;
12408   overflow: hidden;
12409   flex-shrink: 0;
12410   white-space: nowrap;
12411   text-overflow: ellipsis;
12412   box-sizing: border-box;
12413   padding: var(--f7-calendar-header-padding);
12414   background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
12415   color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
12416   height: var(--f7-calendar-header-height);
12417   line-height: var(--f7-calendar-header-height);
12418   font-size: var(--f7-calendar-header-font-size);
12419   font-weight: var(--f7-calendar-header-font-weight);
12420 }
12421 .calendar-header a {
12422   color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12423 }
12424 .calendar-footer {
12425   width: 100%;
12426   flex-shrink: 0;
12427   padding: var(--f7-calendar-footer-padding);
12428   background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
12429   color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
12430   height: var(--f7-calendar-footer-height);
12431   font-size: var(--f7-calendar-header-font-size);
12432   display: flex;
12433   justify-content: flex-end;
12434   box-sizing: border-box;
12435   align-items: center;
12436   position: relative;
12437 }
12438 .calendar-footer a {
12439   color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12440 }
12441 .calendar-footer:before {
12442   content: '';
12443   position: absolute;
12444   background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
12445   display: block;
12446   z-index: 15;
12447   top: 0;
12448   right: auto;
12449   bottom: auto;
12450   left: 0;
12451   height: 1px;
12452   width: 100%;
12453   transform-origin: 50% 0%;
12454   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12455 }
12456 .calendar-modal {
12457   position: absolute;
12458   height: var(--f7-calendar-modal-height);
12459   overflow: hidden;
12460   top: 50%;
12461   left: 50%;
12462   min-width: 300px;
12463   max-width: var(--f7-calendar-modal-max-width);
12464   transform: translate3d(-50%, 100%, 0);
12465   transition-property: transform;
12466   display: flex;
12467   z-index: 12000;
12468   background: var(--f7-calendar-modal-bg-color);
12469   width: 90%;
12470   border-radius: var(--f7-calendar-modal-border-radius);
12471   box-shadow: var(--f7-elevation-24);
12472 }
12473 .calendar-modal.modal-in,
12474 .calendar-modal.modal-out {
12475   transition-duration: 400ms;
12476 }
12477 .calendar-modal.modal-in {
12478   transform: translate3d(-50%, -50%, 0);
12479 }
12480 .calendar-modal.modal-out {
12481   transform: translate3d(-50%, 100%, 0);
12482 }
12483 .calendar-week-header {
12484   display: flex;
12485   box-sizing: border-box;
12486   position: relative;
12487   font-size: var(--f7-calendar-week-header-font-size);
12488   background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
12489   color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
12490   height: var(--f7-calendar-week-header-height);
12491   padding-left: var(--f7-safe-area-left);
12492   padding-right: var(--f7-safe-area-right);
12493 }
12494 .calendar-week-header .calendar-week-day {
12495   flex-shrink: 1;
12496   width: calc(100% / 7);
12497   text-align: center;
12498   line-height: var(--f7-calendar-week-header-height);
12499 }
12500 .calendar-months {
12501   width: 100%;
12502   height: 100%;
12503   overflow: hidden;
12504   position: relative;
12505   flex-shrink: 10;
12506 }
12507 .calendar-months-wrapper {
12508   position: relative;
12509   width: 100%;
12510   height: 100%;
12511   transition: 300ms;
12512 }
12513 .calendar-month {
12514   display: flex;
12515   flex-direction: column;
12516   width: 100%;
12517   height: 100%;
12518   position: absolute;
12519   left: 0;
12520   top: 0;
12521 }
12522 .calendar-row {
12523   height: 16.66666667%;
12524   height: calc(100% / 6);
12525   display: flex;
12526   flex-shrink: 1;
12527   width: 100%;
12528   position: relative;
12529   box-sizing: border-box;
12530   padding-left: var(--f7-safe-area-left);
12531   padding-right: var(--f7-safe-area-right);
12532 }
12533 .calendar-row:before {
12534   content: '';
12535   position: absolute;
12536   background-color: var(--f7-calendar-row-border-color);
12537   display: block;
12538   z-index: 15;
12539   top: 0;
12540   right: auto;
12541   bottom: auto;
12542   left: 0;
12543   height: 1px;
12544   width: 100%;
12545   transform-origin: 50% 0%;
12546   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12547 }
12548 .calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
12549 .calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
12550   display: none !important;
12551 }
12552 .calendar-day {
12553   flex-shrink: 1;
12554   display: flex;
12555   justify-content: center;
12556   align-items: center;
12557   box-sizing: border-box;
12558   width: 14.28571429%;
12559   width: calc(100% / 7);
12560   text-align: center;
12561   cursor: pointer;
12562   z-index: 20;
12563   color: var(--f7-calendar-day-text-color);
12564   height: 100%;
12565   font-size: var(--f7-calendar-day-font-size);
12566 }
12567 .calendar-day.calendar-day-today .calendar-day-number {
12568   color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
12569   background-color: var(--f7-calendar-today-bg-color);
12570 }
12571 .calendar-day.calendar-day-prev,
12572 .calendar-day.calendar-day-next {
12573   color: var(--f7-calendar-prev-next-text-color);
12574 }
12575 .calendar-day.calendar-day-disabled {
12576   color: var(--f7-calendar-disabled-text-color);
12577   cursor: auto;
12578 }
12579 .calendar-day.calendar-day-selected .calendar-day-number {
12580   color: var(--f7-calendar-selected-text-color);
12581   background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
12582 }
12583 .calendar-day .calendar-day-number {
12584   display: inline-block;
12585   border-radius: 50%;
12586   position: relative;
12587   width: var(--f7-calendar-day-size);
12588   height: var(--f7-calendar-day-size);
12589   line-height: var(--f7-calendar-day-size);
12590 }
12591 .calendar-day .calendar-day-events {
12592   position: absolute;
12593   display: flex;
12594   left: 0;
12595   width: 100%;
12596   top: 100%;
12597   align-items: center;
12598   justify-content: center;
12599   margin-top: 1px;
12600 }
12601 .calendar-day .calendar-day-event {
12602   width: var(--f7-calendar-event-dot-size);
12603   height: var(--f7-calendar-event-dot-size);
12604   border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
12605   background-color: var(--f7-calendar-event-bg-color);
12606 }
12607 .calendar-day .calendar-day-event + .calendar-day-event {
12608   margin-left: 2px;
12609 }
12610 .calendar-range .calendar-day.calendar-day-selected {
12611   align-items: stretch;
12612   align-content: stretch;
12613 }
12614 .calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
12615   width: 100%;
12616   border-radius: 0;
12617   height: auto;
12618   text-align: center;
12619   display: flex;
12620   align-items: center;
12621   justify-content: center;
12622 }
12623 .calendar-month-selector,
12624 .calendar-year-selector {
12625   display: flex;
12626   justify-content: space-between;
12627   align-items: center;
12628   width: 50%;
12629   max-width: 200px;
12630   flex-shrink: 10;
12631   margin-left: auto;
12632   margin-right: auto;
12633 }
12634 .calendar-month-selector .calendar-day-number,
12635 .calendar-year-selector .calendar-day-number {
12636   flex-shrink: 1;
12637   position: relative;
12638   overflow: hidden;
12639   text-overflow: ellipsis;
12640 }
12641 .calendar-month-selector a.icon-only,
12642 .calendar-year-selector a.icon-only {
12643   min-width: 36px;
12644 }
12645 /* === Picker === */
12646 :root {
12647   --f7-picker-height: 260px;
12648   --f7-picker-inline-height: 200px;
12649   --f7-picker-popover-height: 200px;
12650   --f7-picker-popover-width: 280px;
12651   --f7-picker-landscape-height: 200px;
12652   --f7-picker-item-height: 36px;
12653 }
12654 .ios {
12655   --f7-picker-column-font-size: 24px;
12656   --f7-picker-divider-text-color: #000;
12657   --f7-picker-item-text-color: #707274;
12658   --f7-picker-item-selected-text-color: #000;
12659   --f7-picker-item-selected-border-color: #a8abb0;
12660 }
12661 .ios .theme-dark,
12662 .ios.theme-dark {
12663   --f7-picker-divider-text-color: #fff;
12664   --f7-picker-item-selected-text-color: #fff;
12665   --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
12666 }
12667 .md {
12668   --f7-picker-column-font-size: 20px;
12669   --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
12670   --f7-picker-item-text-color: inherit;
12671   --f7-picker-item-selected-text-color: inherit;
12672   --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
12673 }
12674 .md .theme-dark,
12675 .md.theme-dark {
12676   --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
12677   --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
12678 }
12679 .aurora {
12680   --f7-picker-column-font-size: 16px;
12681   --f7-picker-divider-text-color: #000;
12682   --f7-picker-item-height: 28px;
12683   --f7-picker-item-text-color: #888;
12684   --f7-picker-item-selected-text-color: #000;
12685   --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.12);
12686 }
12687 .aurora .theme-dark,
12688 .aurora.theme-dark {
12689   --f7-picker-divider-text-color: #fff;
12690   --f7-picker-item-selected-text-color: #fff;
12691   --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.06);
12692 }
12693 .picker {
12694   width: 100%;
12695   height: var(--f7-picker-height);
12696 }
12697 .picker.picker-inline {
12698   height: var(--f7-picker-inline-height);
12699 }
12700 .popover .picker {
12701   height: var(--f7-picker-popover-height);
12702 }
12703 @media (orientation: landscape) and (max-height: 415px) {
12704   .picker:not(.picker-inline) {
12705     height: var(--f7-picker-landscape-height);
12706   }
12707 }
12708 .picker-popover {
12709   width: var(--f7-picker-popover-width);
12710 }
12711 .picker-popover .toolbar {
12712   background: none;
12713   border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
12714 }
12715 .picker-popover .toolbar:before {
12716   display: none !important;
12717 }
12718 .picker-popover .toolbar + .picker-columns {
12719   height: calc(100% - var(--f7-toolbar-height));
12720 }
12721 .picker-columns {
12722   display: flex;
12723   overflow: hidden;
12724   justify-content: center;
12725   padding: 0;
12726   text-align: right;
12727   height: 100%;
12728   position: relative;
12729   -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
12730   font-size: var(--f7-picker-column-font-size);
12731 }
12732 .picker-column {
12733   position: relative;
12734   max-height: 100%;
12735 }
12736 .picker-column.picker-column-first:before,
12737 .picker-column.picker-column-last:after {
12738   height: 100%;
12739   width: 100vw;
12740   position: absolute;
12741   content: '';
12742   top: 0;
12743 }
12744 .picker-column.picker-column-first:before {
12745   left: 100%;
12746 }
12747 .picker-column.picker-column-last:after {
12748   right: 100%;
12749 }
12750 .picker-column.picker-column-left {
12751   text-align: left;
12752 }
12753 .picker-column.picker-column-center {
12754   text-align: center;
12755 }
12756 .picker-column.picker-column-right {
12757   text-align: right;
12758 }
12759 .picker-column.picker-column-divider {
12760   display: flex;
12761   align-items: center;
12762   color: var(--f7-picker-divider-text-color);
12763 }
12764 .picker-items {
12765   transition: 300ms;
12766   transition-timing-function: ease-out;
12767 }
12768 .picker-item {
12769   height: var(--f7-picker-item-height);
12770   line-height: var(--f7-picker-item-height);
12771   white-space: nowrap;
12772   position: relative;
12773   overflow: hidden;
12774   text-overflow: ellipsis;
12775   left: 0;
12776   top: 0;
12777   width: 100%;
12778   box-sizing: border-box;
12779   transition: 300ms;
12780   color: var(--f7-picker-item-text-color);
12781   cursor: pointer;
12782 }
12783 .picker-item span {
12784   padding: 0 10px;
12785 }
12786 .picker-column-absolute .picker-item {
12787   position: absolute;
12788 }
12789 .picker-item.picker-item-far {
12790   pointer-events: none;
12791 }
12792 .picker-item.picker-item-selected {
12793   color: var(--f7-picker-item-selected-text-color);
12794   transform: translate3d(0, 0, 0) rotateX(0deg);
12795 }
12796 .picker-center-highlight {
12797   height: var(--f7-picker-item-height);
12798   box-sizing: border-box;
12799   position: absolute;
12800   left: 0;
12801   width: 100%;
12802   top: 50%;
12803   margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
12804   pointer-events: none;
12805 }
12806 .picker-center-highlight:before {
12807   content: '';
12808   position: absolute;
12809   background-color: var(--f7-picker-item-selected-border-color);
12810   display: block;
12811   z-index: 15;
12812   top: 0;
12813   right: auto;
12814   bottom: auto;
12815   left: 0;
12816   height: 1px;
12817   width: 100%;
12818   transform-origin: 50% 0%;
12819   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12820 }
12821 .picker-center-highlight:after {
12822   content: '';
12823   position: absolute;
12824   background-color: var(--f7-picker-item-selected-border-color);
12825   display: block;
12826   z-index: 15;
12827   top: auto;
12828   right: auto;
12829   bottom: 0;
12830   left: 0;
12831   height: 1px;
12832   width: 100%;
12833   transform-origin: 50% 100%;
12834   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12835 }
12836 .picker-3d .picker-columns {
12837   overflow: hidden;
12838   perspective: 1200px;
12839 }
12840 .picker-3d .picker-column,
12841 .picker-3d .picker-items,
12842 .picker-3d .picker-item {
12843   transform-style: preserve-3d;
12844 }
12845 .picker-3d .picker-column {
12846   overflow: visible;
12847 }
12848 .picker-3d .picker-item {
12849   transform-origin: center center -110px;
12850   -webkit-backface-visibility: hidden;
12851           backface-visibility: hidden;
12852   transition-timing-function: ease-out;
12853 }
12854 /* === Infinite === */
12855 .infinite-scroll-preloader {
12856   margin-left: auto;
12857   margin-right: auto;
12858   text-align: center;
12859 }
12860 .infinite-scroll-preloader.preloader {
12861   display: block;
12862 }
12863 .ios .infinite-scroll-preloader {
12864   margin-top: 35px;
12865   margin-bottom: 35px;
12866 }
12867 .ios .infinite-scroll-preloader .preloader,
12868 .ios .infinite-scroll-preloader.preloader {
12869   width: 27px;
12870   height: 27px;
12871 }
12872 .md .infinite-scroll-preloader {
12873   margin-top: 32px;
12874   margin-bottom: 32px;
12875 }
12876 .aurora .infinite-scroll-preloader {
12877   margin-top: 15px;
12878   margin-bottom: 15px;
12879 }
12880 /* === PTR === */
12881 .ios {
12882   --f7-ptr-preloader-size: 20px;
12883   --f7-ptr-size: 44px;
12884 }
12885 .md {
12886   --f7-ptr-preloader-size: 22px;
12887   --f7-ptr-size: 40px;
12888 }
12889 .aurora {
12890   --f7-ptr-preloader-size: 20px;
12891   --f7-ptr-size: 38px;
12892 }
12893 .ptr-preloader {
12894   position: relative;
12895   top: var(--f7-ptr-top, 0);
12896   height: var(--f7-ptr-size);
12897 }
12898 .ptr-preloader .preloader {
12899   position: absolute;
12900   left: 50%;
12901   width: var(--f7-ptr-preloader-size);
12902   height: var(--f7-ptr-preloader-size);
12903   margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
12904   margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
12905   top: 50%;
12906   visibility: hidden;
12907 }
12908 .ptr-bottom .ptr-preloader {
12909   top: auto;
12910   bottom: 0;
12911   position: fixed;
12912 }
12913 .ios .ptr-preloader {
12914   margin-top: calc(-1 * var(--f7-ptr-size));
12915   width: 100%;
12916   left: 0;
12917 }
12918 .ios .ptr-arrow {
12919   position: absolute;
12920   left: 50%;
12921   top: 50%;
12922   background: no-repeat center;
12923   z-index: 10;
12924   transform: rotate(0deg) translate3d(0, 0, 0);
12925   transition-duration: 300ms;
12926   transition-property: transform;
12927   width: 12px;
12928   height: 20px;
12929   margin-left: -6px;
12930   margin-top: -10px;
12931   visibility: visible;
12932   color: var(--f7-preloader-color);
12933 }
12934 .ios .ptr-arrow:after {
12935   font-family: 'framework7-core-icons';
12936   font-weight: normal;
12937   font-style: normal;
12938   line-height: 1;
12939   letter-spacing: normal;
12940   text-transform: none;
12941   white-space: nowrap;
12942   word-wrap: normal;
12943   direction: ltr;
12944   -webkit-font-smoothing: antialiased;
12945   text-rendering: optimizeLegibility;
12946   -moz-osx-font-smoothing: grayscale;
12947   -moz-font-feature-settings: "liga";
12948        font-feature-settings: "liga";
12949   text-align: center;
12950   display: block;
12951   width: 100%;
12952   height: 100%;
12953   font-size: 20px;
12954   width: 12px;
12955   height: 20px;
12956   line-height: 20px;
12957   font-size: 10px;
12958   content: 'ptr_arrow_ios';
12959 }
12960 .ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
12961   animation: none;
12962 }
12963 .ios .ptr-transitioning,
12964 .ios .ptr-refreshing {
12965   transition-duration: 300ms;
12966   transition-property: transform;
12967 }
12968 .ios .ptr-refreshing {
12969   transform: translate3d(0, var(--f7-ptr-size), 0);
12970 }
12971 .ios .ptr-refreshing .ptr-arrow {
12972   visibility: hidden;
12973 }
12974 .ios .ptr-refreshing .ptr-preloader .preloader {
12975   visibility: visible;
12976 }
12977 .ios .ptr-pull-up .ptr-arrow {
12978   transform: rotate(180deg) translate3d(0, 0, 0);
12979 }
12980 .ios .ptr-no-navbar {
12981   margin-top: calc(-1 * var(--f7-ptr-size));
12982   height: calc(100% + var(--f7-ptr-size));
12983 }
12984 .ios .ptr-no-navbar .ptr-preloader {
12985   margin-top: 0;
12986 }
12987 .ios .ptr-bottom .ptr-preloader {
12988   margin-top: 0;
12989   margin-bottom: calc(-1 * var(--f7-ptr-size));
12990 }
12991 .ios .ptr-bottom.ptr-transitioning > *,
12992 .ios .ptr-bottom.ptr-refreshing > * {
12993   transition-duration: 300ms;
12994   transition-property: transform;
12995 }
12996 .ios .ptr-bottom.ptr-refreshing {
12997   transform: none;
12998 }
12999 .ios .ptr-bottom.ptr-refreshing > * {
13000   transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
13001 }
13002 .ios .ptr-bottom .ptr-arrow {
13003   transform: rotate(180deg) translate3d(0, 0, 0);
13004 }
13005 .ios .ptr-bottom.ptr-pull-up .ptr-arrow {
13006   transform: rotate(0deg) translate3d(0, 0, 0);
13007 }
13008 .md {
13009   --f7-ptr-top: -4px;
13010 }
13011 .md .ptr-preloader {
13012   width: var(--f7-ptr-size);
13013   border-radius: 50%;
13014   background: #fff;
13015   margin-top: calc(-1 * var(--f7-ptr-size));
13016   z-index: 100;
13017   box-shadow: var(--f7-elevation-1);
13018   right: 50%;
13019   margin-right: calc(-1 * var(--f7-ptr-size) / 2);
13020 }
13021 .md .ptr-preloader .preloader .preloader-inner-gap,
13022 .md .ptr-preloader .preloader .preloader-inner-half-circle {
13023   border-width: 3px;
13024 }
13025 .md .ptr-arrow {
13026   width: 22px;
13027   height: 22px;
13028   box-sizing: border-box;
13029   border: 3px solid var(--f7-preloader-color);
13030   position: absolute;
13031   left: 50%;
13032   top: 50%;
13033   margin-left: -11px;
13034   margin-top: -11px;
13035   border-left-color: transparent;
13036   border-radius: 50%;
13037   opacity: 1;
13038   transform: rotate(150deg);
13039 }
13040 .md .ptr-arrow:after {
13041   content: '';
13042   width: 0px;
13043   height: 0px;
13044   position: absolute;
13045   left: -5px;
13046   bottom: 0px;
13047   border-bottom-width: 6px;
13048   border-bottom-style: solid;
13049   border-bottom-color: inherit;
13050   border-left: 5px solid transparent;
13051   border-right: 5px solid transparent;
13052   transform: rotate(-40deg);
13053 }
13054 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
13055 .md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
13056   animation: none;
13057 }
13058 .md .ptr-refreshing .ptr-preloader .preloader,
13059 .md .ptr-pull-up .ptr-preloader .preloader {
13060   visibility: visible;
13061 }
13062 .md .ptr-refreshing .ptr-arrow,
13063 .md .ptr-pull-up .ptr-arrow {
13064   visibility: hidden;
13065 }
13066 .md .ptr-refreshing .ptr-preloader {
13067   transform: translate3d(0, 66px, 0);
13068 }
13069 .md .ptr-transitioning .ptr-arrow {
13070   transition: 300ms;
13071 }
13072 .md .ptr-pull-up .ptr-arrow {
13073   transition: 400ms;
13074   transform: rotate(620deg) !important;
13075   opacity: 0;
13076 }
13077 .md .ptr-transitioning .ptr-preloader,
13078 .md .ptr-refreshing .ptr-preloader {
13079   transition-duration: 300ms;
13080   transition-property: transform;
13081 }
13082 .md .ptr-bottom .ptr-preloader {
13083   margin-top: 0;
13084   margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
13085 }
13086 .md .ptr-bottom.ptr-refreshing .ptr-preloader {
13087   transform: translate3d(0, -66px, 0);
13088 }
13089 .aurora .ptr-preloader {
13090   margin-top: calc(-1 * var(--f7-ptr-size));
13091   width: 100%;
13092   left: 0;
13093 }
13094 .aurora .ptr-arrow {
13095   position: absolute;
13096   left: 50%;
13097   top: 50%;
13098   background: no-repeat center;
13099   z-index: 10;
13100   transform: rotate(0deg) translate3d(0, 0, 0);
13101   transition-duration: 300ms;
13102   transition-property: transform;
13103   width: 12px;
13104   height: 20px;
13105   margin-left: -6px;
13106   margin-top: -10px;
13107   visibility: visible;
13108   color: var(--f7-preloader-color);
13109 }
13110 .aurora .ptr-arrow:after {
13111   font-family: 'framework7-core-icons';
13112   font-weight: normal;
13113   font-style: normal;
13114   line-height: 1;
13115   letter-spacing: normal;
13116   text-transform: none;
13117   white-space: nowrap;
13118   word-wrap: normal;
13119   direction: ltr;
13120   -webkit-font-smoothing: antialiased;
13121   text-rendering: optimizeLegibility;
13122   -moz-osx-font-smoothing: grayscale;
13123   -moz-font-feature-settings: "liga";
13124        font-feature-settings: "liga";
13125   text-align: center;
13126   display: block;
13127   width: 100%;
13128   height: 100%;
13129   font-size: 20px;
13130   width: 12px;
13131   height: 20px;
13132   line-height: 20px;
13133   font-size: 8px;
13134   content: 'ptr_arrow_ios';
13135 }
13136 .aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
13137   animation: none;
13138 }
13139 .aurora .ptr-transitioning,
13140 .aurora .ptr-refreshing {
13141   transition-duration: 300ms;
13142   transition-property: transform;
13143 }
13144 .aurora .ptr-refreshing {
13145   transform: translate3d(0, var(--f7-ptr-size), 0);
13146 }
13147 .aurora .ptr-refreshing .ptr-arrow {
13148   visibility: hidden;
13149 }
13150 .aurora .ptr-refreshing .ptr-preloader .preloader {
13151   visibility: visible;
13152 }
13153 .aurora .ptr-pull-up .ptr-arrow {
13154   transform: rotate(180deg) translate3d(0, 0, 0);
13155 }
13156 .aurora .ptr-no-navbar {
13157   margin-top: calc(-1 * var(--f7-ptr-size));
13158   height: calc(100% + var(--f7-ptr-size));
13159 }
13160 .aurora .ptr-no-navbar .ptr-preloader {
13161   margin-top: 0;
13162 }
13163 .aurora .ptr-bottom .ptr-preloader {
13164   margin-top: 0;
13165   margin-bottom: calc(-1 * var(--f7-ptr-size));
13166 }
13167 .aurora .ptr-bottom.ptr-transitioning > *,
13168 .aurora .ptr-bottom.ptr-refreshing > * {
13169   transition-duration: 300ms;
13170   transition-property: transform;
13171 }
13172 .aurora .ptr-bottom.ptr-refreshing {
13173   transform: none;
13174 }
13175 .aurora .ptr-bottom.ptr-refreshing > * {
13176   transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
13177 }
13178 .aurora .ptr-bottom .ptr-arrow {
13179   transform: rotate(180deg) translate3d(0, 0, 0);
13180 }
13181 .aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
13182   transform: rotate(0deg) translate3d(0, 0, 0);
13183 }
13184 /* === Images Lazy Loading === */
13185 .lazy-loaded.lazy-fade-in {
13186   animation: lazyFadeIn 600ms;
13187 }
13188 @keyframes lazyFadeIn {
13189   from {
13190     opacity: 0;
13191   }
13192   to {
13193     opacity: 1;
13194   }
13195 }
13196 /* === Data Table === */
13197 :root {
13198   --f7-table-head-font-size: 12px;
13199   --f7-table-body-font-size: 14px;
13200   --f7-table-footer-font-size: 12px;
13201   --f7-table-input-height: 24px;
13202   --f7-table-input-font-size: 14px;
13203   --f7-table-collapsible-cell-padding: 15px;
13204   --f7-table-link-icon-only-icon-size: 20px;
13205   --f7-table-sortable-icon-color: #000;
13206 }
13207 :root .theme-dark,
13208 :root.theme-dark {
13209   --f7-table-cell-border-color: #282829;
13210   --f7-table-sortable-icon-color: #fff;
13211   --f7-table-input-text-color: #fff;
13212 }
13213 .ios {
13214   --f7-table-head-font-weight: 600;
13215   --f7-table-head-text-color: #8e8e93;
13216   --f7-table-head-cell-height: 44px;
13217   --f7-table-head-icon-size: 18px;
13218   --f7-table-body-cell-height: 44px;
13219   --f7-table-cell-border-color: #c8c7cc;
13220   --f7-table-cell-padding-vertical: 0px;
13221   --f7-table-cell-padding-horizontal: 15px;
13222   --f7-table-edge-cell-padding-horizontal: 15px;
13223   --f7-table-label-cell-padding-horizontal: 15px;
13224   --f7-table-checkbox-cell-width: 22px;
13225   /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13226   --f7-table-selected-row-bg-color: #f7f7f8;
13227   /* --f7-table-actions-link-color: var(--f7-theme-color); */
13228   --f7-table-title-font-size: 17px;
13229   --f7-table-title-font-weight: 600;
13230   --f7-table-card-header-height: 64px;
13231   --f7-table-footer-height: 44px;
13232   --f7-table-footer-text-color: #8e8e93;
13233   --f7-table-input-text-color: #000;
13234 }
13235 .ios .theme-dark,
13236 .ios.theme-dark {
13237   --f7-table-selected-row-bg-color: #363636;
13238 }
13239 .md {
13240   --f7-table-head-font-weight: 500;
13241   --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
13242   --f7-table-head-cell-height: 56px;
13243   --f7-table-head-icon-size: 16px;
13244   --f7-table-body-cell-height: 48px;
13245   --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
13246   --f7-table-cell-padding-vertical: 0px;
13247   --f7-table-cell-padding-horizontal: 28px;
13248   --f7-table-edge-cell-padding-horizontal: 24px;
13249   --f7-table-label-cell-padding-horizontal: 24px;
13250   --f7-table-checkbox-cell-width: 18px;
13251   --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
13252   --f7-table-selected-row-bg-color: #f5f5f5;
13253   --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
13254   --f7-table-title-font-size: 20px;
13255   --f7-table-title-font-weight: 400;
13256   --f7-table-card-header-height: 64px;
13257   --f7-table-footer-height: 56px;
13258   --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
13259   --f7-table-input-text-color: #212121;
13260 }
13261 .md .theme-dark,
13262 .md.theme-dark {
13263   --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
13264   --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
13265   --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
13266   --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
13267   --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
13268 }
13269 .aurora {
13270   --f7-table-link-icon-only-icon-size: 18px;
13271   --f7-table-head-font-weight: 400;
13272   --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
13273   --f7-table-head-cell-height: 32px;
13274   --f7-table-head-icon-size: 18px;
13275   --f7-table-body-cell-height: 32px;
13276   --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
13277   --f7-table-cell-padding-vertical: 5px;
13278   --f7-table-cell-padding-horizontal: 10px;
13279   --f7-table-edge-cell-padding-horizontal: 15px;
13280   --f7-table-label-cell-padding-horizontal: 15px;
13281   --f7-table-checkbox-cell-width: 22px;
13282   /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
13283   --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
13284   /* --f7-table-actions-link-color: var(--f7-theme-color); */
13285   --f7-table-title-font-size: 14px;
13286   --f7-table-title-font-weight: 600;
13287   --f7-table-card-header-height: 42px;
13288   --f7-table-footer-height: 32px;
13289   --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
13290   --f7-table-input-text-color: #000;
13291 }
13292 .aurora .theme-dark,
13293 .aurora.theme-dark {
13294   --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
13295   --f7-table-head-text-color: rgba(255, 255, 255, 0.52);
13296   --f7-table-footer-text-color: rgba(255, 255, 255, 0.52);
13297 }
13298 .data-table {
13299   overflow-x: auto;
13300 }
13301 .data-table table,
13302 table.data-table {
13303   width: 100%;
13304   border: none;
13305   padding: 0;
13306   margin: 0;
13307   border-collapse: collapse;
13308   text-align: right;
13309 }
13310 .data-table thead th,
13311 .data-table thead td {
13312   font-size: var(--f7-table-head-font-size);
13313   font-weight: var(--f7-table-head-font-weight);
13314   overflow: hidden;
13315   white-space: nowrap;
13316   text-overflow: ellipsis;
13317   line-height: 16px;
13318   height: var(--f7-table-head-cell-height);
13319 }
13320 .data-table thead th:not(.sortable-cell-active),
13321 .data-table thead td:not(.sortable-cell-active) {
13322   color: var(--f7-table-head-text-color);
13323 }
13324 .data-table thead i.icon,
13325 .data-table thead i.f7-icons,
13326 .data-table thead i.material-icons {
13327   vertical-align: top;
13328   font-size: var(--f7-table-head-icon-size);
13329   width: var(--f7-table-head-icon-size);
13330   height: var(--f7-table-head-icon-size);
13331 }
13332 .data-table tbody {
13333   font-size: var(--f7-table-body-font-size);
13334 }
13335 .data-table tbody th,
13336 .data-table tbody td {
13337   height: var(--f7-table-body-cell-height);
13338 }
13339 .data-table tbody tr.data-table-row-selected,
13340 .device-desktop .data-table tbody tr:hover {
13341   background: var(--f7-table-selected-row-bg-color);
13342 }
13343 .data-table tbody td:before,
13344 .data-table tbody th:before {
13345   content: '';
13346   position: absolute;
13347   background-color: var(--f7-table-cell-border-color);
13348   display: block;
13349   z-index: 15;
13350   top: 0;
13351   right: auto;
13352   bottom: auto;
13353   left: 0;
13354   height: 1px;
13355   width: 100%;
13356   transform-origin: 50% 0%;
13357   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13358 }
13359 .data-table th,
13360 .data-table td {
13361   --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
13362   --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
13363   padding-top: var(--f7-table-cell-padding-vertical);
13364   padding-bottom: var(--f7-table-cell-padding-vertical);
13365   padding-left: var(--f7-table-cell-padding-left);
13366   padding-right: var(--f7-table-cell-padding-right);
13367   position: relative;
13368   box-sizing: border-box;
13369 }
13370 .data-table th:first-child,
13371 .data-table td:first-child {
13372   --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
13373 }
13374 .data-table th:last-child,
13375 .data-table td:last-child {
13376   --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
13377 }
13378 .data-table th.label-cell,
13379 .data-table td.label-cell {
13380   --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
13381   --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
13382 }
13383 .data-table th.numeric-cell,
13384 .data-table td.numeric-cell {
13385   text-align: left;
13386 }
13387 .data-table th.checkbox-cell,
13388 .data-table td.checkbox-cell {
13389   overflow: visible;
13390   width: var(--f7-table-checkbox-cell-width);
13391 }
13392 .data-table th.checkbox-cell label + span,
13393 .data-table td.checkbox-cell label + span {
13394   margin-right: 8px;
13395 }
13396 .data-table th.checkbox-cell:first-child,
13397 .data-table td.checkbox-cell:first-child {
13398   padding-left: calc(var(--f7-table-cell-padding-left) / 2);
13399 }
13400 .data-table th.checkbox-cell:first-child + td,
13401 .data-table td.checkbox-cell:first-child + td,
13402 .data-table th.checkbox-cell:first-child + th,
13403 .data-table td.checkbox-cell:first-child + th {
13404   padding-right: calc(var(--f7-table-cell-padding-right) / 2);
13405 }
13406 .data-table th.checkbox-cell:last-child,
13407 .data-table td.checkbox-cell:last-child {
13408   padding-right: calc(var(--f7-table-cell-padding-right) / 2);
13409 }
13410 .data-table th.actions-cell,
13411 .data-table td.actions-cell {
13412   text-align: left;
13413   white-space: nowrap;
13414 }
13415 .data-table th.actions-cell a.link,
13416 .data-table td.actions-cell a.link {
13417   color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
13418 }
13419 .data-table th a.icon-only,
13420 .data-table td a.icon-only,
13421 .card .data-table th a.icon-only,
13422 .card .data-table td a.icon-only,
13423 .card.data-table th a.icon-only,
13424 .card.data-table td a.icon-only {
13425   display: inline-block;
13426   vertical-align: middle;
13427   text-align: center;
13428   font-size: 0;
13429   min-width: 0;
13430 }
13431 .data-table th a.icon-only i,
13432 .data-table td a.icon-only i,
13433 .card .data-table th a.icon-only i,
13434 .card .data-table td a.icon-only i,
13435 .card.data-table th a.icon-only i,
13436 .card.data-table td a.icon-only i {
13437   font-size: var(--f7-table-link-icon-only-icon-size);
13438   vertical-align: middle;
13439 }
13440 .data-table .sortable-cell:not(.input-cell) {
13441   cursor: pointer;
13442   position: relative;
13443 }
13444 .data-table .sortable-cell.input-cell .table-head-label {
13445   cursor: pointer;
13446   position: relative;
13447 }
13448 .data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
13449 .data-table .sortable-cell.numeric-cell:not(.input-cell):before,
13450 .data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
13451 .data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
13452   content: 'arrow_bottom_md';
13453   font-family: 'framework7-core-icons';
13454   font-weight: normal;
13455   font-style: normal;
13456   line-height: 1;
13457   letter-spacing: normal;
13458   text-transform: none;
13459   white-space: nowrap;
13460   word-wrap: normal;
13461   direction: ltr;
13462   -webkit-font-smoothing: antialiased;
13463   text-rendering: optimizeLegibility;
13464   -moz-osx-font-smoothing: grayscale;
13465   -moz-font-feature-settings: "liga";
13466        font-feature-settings: "liga";
13467   text-align: center;
13468   display: block;
13469   width: 100%;
13470   height: 100%;
13471   font-size: 20px;
13472   display: inline-block;
13473   vertical-align: top;
13474   width: 16px;
13475   height: 16px;
13476   color: var(--f7-table-sortable-icon-color);
13477   font-size: 13px;
13478   line-height: 16px;
13479   transition-duration: 300ms;
13480   transform: rotate(0);
13481   opacity: 0;
13482 }
13483 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
13484 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
13485 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
13486 .device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
13487   opacity: 0.54;
13488 }
13489 .data-table .sortable-cell.sortable-cell-active:after,
13490 .data-table .sortable-cell.sortable-cell-active .table-head-label:after,
13491 .data-table .sortable-cell.sortable-cell-active:before,
13492 .data-table .sortable-cell.sortable-cell-active .table-head-label:before {
13493   opacity: 0.87 !important;
13494 }
13495 .data-table .sortable-cell.sortable-desc:after,
13496 .data-table .sortable-cell.sortable-desc:after,
13497 .data-table .table-head-label:after,
13498 .data-table .sortable-cell.sortable-desc:before,
13499 .data-table .sortable-cell.sortable-desc:before,
13500 .data-table .table-head-label:before {
13501   transform: rotate(180deg) !important;
13502 }
13503 .data-table.card .card-header,
13504 .card .data-table .card-header,
13505 .data-table.card .card-footer,
13506 .card .data-table .card-footer {
13507   padding-left: var(--f7-table-edge-cell-padding-horizontal);
13508   padding-right: var(--f7-table-edge-cell-padding-horizontal);
13509 }
13510 .data-table.card .card-header,
13511 .card .data-table .card-header {
13512   min-height: var(--f7-table-card-header-height);
13513 }
13514 .data-table.card .card-content,
13515 .card .data-table .card-content {
13516   overflow-x: auto;
13517 }
13518 .data-table.card .card-footer,
13519 .card .data-table .card-footer {
13520   min-height: var(--f7-table-footer-height);
13521 }
13522 .data-table .data-table-title {
13523   font-size: var(--f7-table-title-font-size);
13524   font-weight: var(--f7-table-title-font-weight);
13525 }
13526 .data-table .data-table-links,
13527 .data-table .data-table-actions {
13528   display: flex;
13529 }
13530 .data-table .data-table-links .button {
13531   min-width: 64px;
13532 }
13533 .data-table .data-table-actions {
13534   margin-right: auto;
13535   align-items: center;
13536 }
13537 .data-table .data-table-actions a.link {
13538   color: var(--f7-table-actions-link-color, var(--f7-theme-color));
13539   min-width: 0;
13540 }
13541 .data-table .data-table-actions a.link.icon-only {
13542   line-height: 1;
13543   justify-content: center;
13544   padding: 0;
13545 }
13546 .data-table .data-table-header,
13547 .data-table .data-table-header-selected {
13548   display: flex;
13549   justify-content: space-between;
13550   align-items: center;
13551   width: 100%;
13552 }
13553 .data-table .card-header > .data-table-header,
13554 .data-table .card-header > .data-table-header-selected {
13555   padding-top: var(--f7-card-header-padding-vertical);
13556   padding-bottom: var(--f7-card-header-padding-vertical);
13557   height: 100%;
13558   padding-right: var(--f7-table-edge-cell-padding-horizontal);
13559   padding-left: var(--f7-table-edge-cell-padding-horizontal);
13560   margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
13561   margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
13562 }
13563 .data-table .data-table-header-selected {
13564   background: rgba(var(--f7-theme-color-rgb), 0.1);
13565   display: none;
13566 }
13567 .data-table.data-table-has-checked .data-table-header {
13568   display: none;
13569 }
13570 .data-table.data-table-has-checked .data-table-header-selected {
13571   display: flex;
13572 }
13573 .data-table .data-table-title-selected {
13574   font-size: 14px;
13575   color: var(--f7-theme-color);
13576 }
13577 .data-table .data-table-footer {
13578   display: flex;
13579   align-items: center;
13580   box-sizing: border-box;
13581   position: relative;
13582   font-size: var(--f7-table-footer-font-size);
13583   overflow: hidden;
13584   min-height: var(--f7-table-footer-height);
13585   color: var(--f7-table-footer-text-color);
13586   justify-content: flex-start;
13587 }
13588 .data-table .data-table-footer:before {
13589   content: '';
13590   position: absolute;
13591   background-color: var(--f7-table-cell-border-color);
13592   display: block;
13593   z-index: 15;
13594   top: 0;
13595   right: auto;
13596   bottom: auto;
13597   left: 0;
13598   height: 1px;
13599   width: 100%;
13600   transform-origin: 50% 0%;
13601   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13602 }
13603 .data-table .data-table-rows-select,
13604 .data-table .data-table-pagination {
13605   display: flex;
13606   align-items: center;
13607 }
13608 .data-table .input-cell {
13609   padding-top: 8px;
13610   padding-bottom: 8px;
13611   height: auto;
13612   vertical-align: top;
13613 }
13614 .data-table .input-cell .table-head-label + .input {
13615   margin-top: 4px;
13616 }
13617 .data-table .input-cell .input {
13618   height: var(--f7-table-input-height);
13619 }
13620 .data-table .input-cell .input input,
13621 .data-table .input-cell .input textarea,
13622 .data-table .input-cell .input select {
13623   height: var(--f7-table-input-height);
13624   color: var(--f7-table-input-text-color);
13625   font-size: var(--f7-table-input-font-size);
13626 }
13627 @media (max-width: 480px) and (orientation: portrait) {
13628   .data-table.data-table-collapsible thead {
13629     display: none;
13630   }
13631   .data-table.data-table-collapsible tbody,
13632   .data-table.data-table-collapsible tr,
13633   .data-table.data-table-collapsible td {
13634     display: block;
13635   }
13636   .data-table.data-table-collapsible tr {
13637     position: relative;
13638   }
13639   .data-table.data-table-collapsible tr:before {
13640     content: '';
13641     position: absolute;
13642     background-color: var(--f7-table-cell-border-color);
13643     display: block;
13644     z-index: 15;
13645     top: 0;
13646     right: auto;
13647     bottom: auto;
13648     left: 0;
13649     height: 1px;
13650     width: 100%;
13651     transform-origin: 50% 0%;
13652     transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13653   }
13654   .data-table.data-table-collapsible tr:hover {
13655     background-color: inherit;
13656   }
13657   .data-table.data-table-collapsible td {
13658     --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
13659     --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
13660     height: auto;
13661     min-height: var(--f7-table-body-cell-height);
13662     display: flex;
13663     align-content: center;
13664     align-items: center;
13665     justify-content: flex-start;
13666     text-align: right;
13667   }
13668   .data-table.data-table-collapsible td:before {
13669     display: none !important;
13670   }
13671   .data-table.data-table-collapsible td:not(.checkbox-cell):before {
13672     width: 40%;
13673     display: block !important;
13674     content: attr(data-collapsible-title);
13675     position: relative;
13676     height: auto;
13677     background: none !important;
13678     transform: none !important;
13679     font-size: var(--f7-table-head-font-size);
13680     font-weight: var(--f7-table-head-font-weight);
13681     color: var(--f7-table-head-text-color);
13682     margin-left: 16px;
13683     flex-shrink: 0;
13684   }
13685   .data-table.data-table-collapsible td.checkbox-cell {
13686     position: absolute;
13687     top: 0;
13688     right: 0;
13689   }
13690   .data-table.data-table-collapsible td.checkbox-cell + td {
13691     padding-right: 16px;
13692   }
13693   .data-table.data-table-collapsible td.checkbox-cell ~ td {
13694     margin-right: 32px;
13695   }
13696 }
13697 .data-table .tablet-only,
13698 .data-table .tablet-landscape-only {
13699   display: none;
13700 }
13701 @media (min-width: 768px) {
13702   .data-table .tablet-only {
13703     display: table-cell;
13704   }
13705 }
13706 @media (min-width: 768px) and (orientation: landscape) {
13707   .data-table .tablet-landscape-only {
13708     display: table-cell;
13709   }
13710 }
13711 .ios .data-table th.actions-cell a.link + a.link,
13712 .ios .data-table td.actions-cell a.link + a.link {
13713   margin-right: 15px;
13714 }
13715 .ios .sortable-cell:not(.numeric-cell):after {
13716   margin-right: 5px;
13717 }
13718 .ios .sortable-cell.numeric-cell:before {
13719   margin-left: 5px;
13720 }
13721 .ios .data-table-links a.link + a.link,
13722 .ios .data-table-actions a.link + a.link,
13723 .ios .data-table-links .button + .button,
13724 .ios .data-table-actions .button + .button {
13725   margin-right: 15px;
13726 }
13727 .ios .data-table-actions a.link.icon-only {
13728   width: 44px;
13729   height: 44px;
13730 }
13731 .ios .data-table-rows-select a.link,
13732 .ios .data-table-pagination a.link {
13733   width: 44px;
13734   height: 44px;
13735 }
13736 .ios .data-table-rows-select + .data-table-pagination {
13737   margin-right: 30px;
13738 }
13739 .ios .data-table-rows-select .input {
13740   margin-right: 20px;
13741 }
13742 .ios .data-table-pagination-label {
13743   margin-left: 15px;
13744 }
13745 .md .data-table th.actions-cell a.link + a.link,
13746 .md .data-table td.actions-cell a.link + a.link {
13747   margin-right: 24px;
13748 }
13749 .md .data-table th.actions-cell a.icon-only,
13750 .md .data-table td.actions-cell a.icon-only {
13751   width: 24px;
13752   height: 24px;
13753   line-height: 24px;
13754 }
13755 .md .sortable-cell:not(.numeric-cell):after {
13756   margin-right: 8px;
13757 }
13758 .md .sortable-cell.numeric-cell:before {
13759   margin-left: 8px;
13760 }
13761 .md .data-table-links a.link + a.link,
13762 .md .data-table-actions a.link + a.link,
13763 .md .data-table-links .button + .button,
13764 .md .data-table-actions .button + .button {
13765   margin-right: 24px;
13766 }
13767 .md .data-table-actions a.link.icon-only {
13768   width: 24px;
13769   height: 24px;
13770   overflow: visible;
13771 }
13772 .md .data-table-actions a.link.icon-only.active-state {
13773   background: none;
13774 }
13775 .md .data-table-rows-select a.link,
13776 .md .data-table-pagination a.link {
13777   width: 48px;
13778   height: 48px;
13779 }
13780 .md .data-table-rows-select a.link:before,
13781 .md .data-table-pagination a.link:before {
13782   content: '';
13783   width: 152%;
13784   height: 152%;
13785   position: absolute;
13786   left: -26%;
13787   top: -26%;
13788   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
13789   background-repeat: no-repeat;
13790   background-position: center;
13791   background-size: 100% 100%;
13792   opacity: 0;
13793   pointer-events: none;
13794   transition-duration: 600ms;
13795 }
13796 .md .data-table-rows-select a.link.active-state:before,
13797 .md .data-table-pagination a.link.active-state:before {
13798   opacity: 1;
13799   transition-duration: 150ms;
13800 }
13801 .md .data-table-rows-select + .data-table-pagination {
13802   margin-right: 32px;
13803 }
13804 .md .data-table-rows-select .input {
13805   margin-right: 24px;
13806 }
13807 .md .data-table-pagination-label {
13808   margin-left: 20px;
13809 }
13810 .md .input-cell .input-clear-button {
13811   transform: scale(0.8);
13812 }
13813 .aurora .data-table th.actions-cell a.link + a.link,
13814 .aurora .data-table td.actions-cell a.link + a.link {
13815   margin-right: 10px;
13816 }
13817 .aurora .sortable-cell:not(.numeric-cell):after {
13818   margin-right: 5px;
13819 }
13820 .aurora .sortable-cell.numeric-cell:before {
13821   margin-left: 5px;
13822 }
13823 .aurora .data-table-links a.link + a.link,
13824 .aurora .data-table-actions a.link + a.link,
13825 .aurora .data-table-links .button + .button,
13826 .aurora .data-table-actions .button + .button {
13827   margin-right: 10px;
13828 }
13829 .aurora .data-table-rows-select a.link,
13830 .aurora .data-table-pagination a.link {
13831   width: 32px;
13832   height: 32px;
13833 }
13834 .aurora .data-table-rows-select + .data-table-pagination {
13835   margin-right: 15px;
13836 }
13837 .aurora .data-table-rows-select .input {
13838   margin-right: 10px;
13839 }
13840 .aurora .data-table-pagination-label {
13841   margin-left: 10px;
13842 }
13843 /* === FAB === */
13844 :root {
13845   --f7-fab-text-color: #fff;
13846   --f7-fab-extended-text-font-size: 14px;
13847   --f7-fab-extended-text-padding: 0 20px;
13848   --f7-fab-label-bg-color: #fff;
13849   --f7-fab-label-text-color: #333;
13850   --f7-fab-label-border-radius: 4px;
13851   --f7-fab-label-padding: 4px 12px;
13852   --f7-fab-button-size: 40px;
13853   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
13854 }
13855 .ios {
13856   --f7-fab-size: 50px;
13857   --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
13858   --f7-fab-margin: 15px;
13859   --f7-fab-extended-size: 50px;
13860   --f7-fab-extended-text-font-weight: 400;
13861   --f7-fab-extended-text-letter-spacing: 0;
13862   --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
13863   --f7-fab-label-font-size: inherit;
13864 }
13865 .md {
13866   --f7-fab-size: 56px;
13867   --f7-fab-box-shadow: var(--f7-elevation-6);
13868   --f7-fab-margin: 16px;
13869   --f7-fab-extended-size: 48px;
13870   --f7-fab-extended-text-font-weight: 500;
13871   --f7-fab-extended-text-letter-spacing: 0.03em;
13872   --f7-fab-label-box-shadow: var(--f7-elevation-3);
13873   --f7-fab-label-font-size: inherit;
13874 }
13875 .aurora {
13876   --f7-fab-size: 40px;
13877   --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
13878   --f7-fab-margin: 15px;
13879   --f7-fab-extended-size: 38px;
13880   --f7-fab-extended-text-font-weight: 500;
13881   --f7-fab-extended-text-letter-spacing: 0;
13882   --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
13883   --f7-fab-label-font-size: 12px;
13884 }
13885 .fab {
13886   position: absolute;
13887   z-index: 1500;
13888 }
13889 .fab a {
13890   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
13891 }
13892 .fab[class*="fab-left"] {
13893   left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
13894 }
13895 .fab[class*="fab-right"] {
13896   right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
13897 }
13898 .fab[class*="-top"] {
13899   top: var(--f7-fab-margin);
13900 }
13901 .fab[class*="-bottom"] {
13902   bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
13903 }
13904 .fab[class*="fab-center"] {
13905   left: 50%;
13906   transform: translateX(-50%);
13907 }
13908 .fab[class*="left-center"],
13909 .fab[class*="right-center"] {
13910   top: 50%;
13911   transform: translateY(-50%);
13912 }
13913 .fab[class*="center-center"] {
13914   top: 50%;
13915   left: 50%;
13916   transform: translateX(-50%) translateY(-50%);
13917 }
13918 .fab > a,
13919 .fab-buttons a {
13920   background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
13921   width: var(--f7-fab-size);
13922   height: var(--f7-fab-size);
13923   box-shadow: var(--f7-fab-box-shadow);
13924   border-radius: calc(var(--f7-fab-size) / 2);
13925   position: relative;
13926   transition-duration: 300ms;
13927   display: flex;
13928   align-items: center;
13929   justify-content: center;
13930   overflow: hidden;
13931   z-index: 1;
13932   color: var(--f7-fab-text-color);
13933 }
13934 .fab > a.active-state,
13935 .fab-buttons a.active-state {
13936   background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
13937 }
13938 .fab > a i {
13939   position: absolute;
13940   left: 50%;
13941   top: 50%;
13942   transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
13943   transition: 300ms;
13944 }
13945 .fab > a i + i {
13946   transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
13947   opacity: 0;
13948 }
13949 .fab-buttons a {
13950   border-radius: calc(var(--f7-fab-button-size) / 2);
13951   width: var(--f7-fab-button-size);
13952   height: var(--f7-fab-button-size);
13953 }
13954 .fab-buttons {
13955   display: flex;
13956   visibility: hidden;
13957   pointer-events: none;
13958   position: absolute;
13959 }
13960 .fab-buttons a {
13961   opacity: 0;
13962 }
13963 .fab-opened:not(.fab-morph) > a i {
13964   transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
13965   opacity: 0;
13966 }
13967 .fab-opened:not(.fab-morph) > a i + i {
13968   transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
13969   opacity: 1;
13970 }
13971 .fab-opened .fab-buttons {
13972   visibility: visible;
13973   pointer-events: auto;
13974 }
13975 .fab-opened .fab-buttons a {
13976   opacity: 1;
13977   transform: translate3d(0, 0px, 0) scale(1) !important;
13978 }
13979 .fab-opened .fab-buttons a:nth-child(2) {
13980   transition-delay: 50ms;
13981 }
13982 .fab-opened .fab-buttons a:nth-child(3) {
13983   transition-delay: 100ms;
13984 }
13985 .fab-opened .fab-buttons a:nth-child(4) {
13986   transition-delay: 150ms;
13987 }
13988 .fab-opened .fab-buttons a:nth-child(5) {
13989   transition-delay: 200ms;
13990 }
13991 .fab-opened .fab-buttons a:nth-child(6) {
13992   transition-delay: 250ms;
13993 }
13994 .fab-buttons-top,
13995 .fab-buttons-bottom {
13996   left: 50%;
13997   width: var(--f7-fab-button-size);
13998   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
13999 }
14000 .fab-buttons-top {
14001   bottom: 100%;
14002   margin-bottom: 16px;
14003   flex-direction: column-reverse;
14004 }
14005 .fab-buttons-top a {
14006   transform: translate3d(0, 8px, 0) scale(0.3);
14007   transform-origin: center bottom;
14008 }
14009 .fab-buttons-top a + a {
14010   margin-bottom: 16px;
14011 }
14012 .fab-buttons-bottom {
14013   top: 100%;
14014   margin-top: 16px;
14015   flex-direction: column;
14016 }
14017 .fab-buttons-bottom a {
14018   transform: translate3d(0, -8px, 0) scale(0.3);
14019   transform-origin: center top;
14020 }
14021 .fab-buttons-bottom a + a {
14022   margin-top: 16px;
14023 }
14024 .fab-buttons-left,
14025 .fab-buttons-right {
14026   top: 50%;
14027   height: var(--f7-fab-button-size);
14028   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14029 }
14030 .fab-buttons-left {
14031   right: 100%;
14032   margin-right: 16px;
14033 }
14034 .fab-buttons-left a {
14035   transform: translate3d(8px, 0px, 0) scale(0.3);
14036   transform-origin: right center;
14037 }
14038 .fab-buttons-left a + a {
14039   margin-right: 16px;
14040 }
14041 .fab-buttons-right {
14042   left: 100%;
14043   margin-left: 16px;
14044   flex-direction: row-reverse;
14045 }
14046 .fab-buttons-right a {
14047   transform: translate3d(-8px, 0, 0) scale(0.3);
14048   transform-origin: left center;
14049 }
14050 .fab-buttons-right a + a {
14051   margin-left: 16px;
14052 }
14053 .fab-buttons-center {
14054   left: 0%;
14055   top: 0%;
14056   width: 100%;
14057   height: 100%;
14058 }
14059 .fab-buttons-center a {
14060   position: absolute;
14061 }
14062 .fab-buttons-center a:nth-child(1) {
14063   left: 50%;
14064   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
14065   bottom: 100%;
14066   margin-bottom: 16px;
14067   transform: translateY(-8px) scale(0.3);
14068   transform-origin: center bottom;
14069 }
14070 .fab-buttons-center a:nth-child(2) {
14071   left: 100%;
14072   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14073   top: 50%;
14074   margin-left: 16px;
14075   transform: translateX(-8px) scale(0.3);
14076   transform-origin: left center;
14077 }
14078 .fab-buttons-center a:nth-child(3) {
14079   left: 50%;
14080   margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
14081   top: 100%;
14082   margin-top: 16px;
14083   transform: translateY(8px) scale(0.3);
14084   transform-origin: center top;
14085 }
14086 .fab-buttons-center a:nth-child(4) {
14087   right: 100%;
14088   margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
14089   top: 50%;
14090   margin-right: 16px;
14091   transform: translateX(8px) scale(0.3);
14092   transform-origin: right center;
14093 }
14094 .fab-morph {
14095   border-radius: calc(var(--f7-fab-size) / 2);
14096   background: var(--f7-fab-bg-color, var(--f7-theme-color));
14097   box-shadow: var(--f7-fab-box-shadow);
14098 }
14099 .fab-morph > a {
14100   box-shadow: none;
14101   background: none !important;
14102 }
14103 .fab-opened.fab-morph > a i {
14104   opacity: 0;
14105 }
14106 .fab-morph,
14107 .fab-morph > a,
14108 .fab-morph-target {
14109   transition-duration: 250ms;
14110 }
14111 .fab-morph-target:not(.fab-morph-target-visible) {
14112   display: none;
14113 }
14114 .fab-extended {
14115   width: auto;
14116   min-width: var(--f7-fab-extended-size);
14117 }
14118 .fab-extended > a {
14119   width: 100%;
14120   height: var(--f7-fab-extended-size);
14121 }
14122 .fab-extended > a i {
14123   left: calc(var(--f7-fab-extended-size) / 2);
14124 }
14125 .fab-extended i ~ .fab-text {
14126   padding-left: var(--f7-fab-extended-size);
14127 }
14128 .fab-extended > a {
14129   width: 100% !important;
14130 }
14131 .fab-text {
14132   box-sizing: border-box;
14133   font-size: var(--f7-fab-extended-text-font-size);
14134   padding: var(--f7-fab-extended-text-padding);
14135   font-weight: var(--f7-fab-extended-text-font-weight);
14136   letter-spacing: var(--f7-fab-extended-text-letter-spacing);
14137   text-transform: uppercase;
14138 }
14139 .fab-label-button {
14140   overflow: visible !important;
14141 }
14142 .fab-label {
14143   position: absolute;
14144   top: 50%;
14145   padding: var(--f7-fab-label-padding);
14146   border-radius: var(--f7-fab-label-border-radius);
14147   background: var(--f7-fab-label-bg-color);
14148   color: var(--f7-fab-label-text-color);
14149   box-shadow: var(--f7-fab-label-box-shadow);
14150   white-space: nowrap;
14151   transform: translateY(-50%);
14152   pointer-events: none;
14153   font-size: var(--f7-fab-label-font-size);
14154 }
14155 .fab[class*="fab-right-"] .fab-label {
14156   right: 100%;
14157   margin-right: 8px;
14158 }
14159 .fab[class*="fab-left-"] .fab-label {
14160   left: 100%;
14161   margin-left: 8px;
14162 }
14163 .navbar ~ * .fab[class*="-top"],
14164 .navbar ~ .fab[class*="-top"] {
14165   margin-top: var(--f7-navbar-height);
14166 }
14167 .toolbar-top ~ * .fab[class*="-top"],
14168 .toolbar-top ~ .fab[class*="-top"],
14169 .ios .toolbar-top-ios ~ * .fab[class*="-top"],
14170 .ios .toolbar-top-ios ~ .fab[class*="-top"],
14171 .md .toolbar-top-md ~ * .fab[class*="-top"],
14172 .md .toolbar-top-md ~ .fab[class*="-top"] {
14173   margin-top: var(--f7-toolbar-height);
14174 }
14175 .toolbar-bottom ~ * .fab[class*="-bottom"],
14176 .toolbar-bottom ~ .fab[class*="-bottom"],
14177 .ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
14178 .ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
14179 .md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
14180 .md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
14181   margin-bottom: var(--f7-toolbar-height);
14182 }
14183 .tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
14184 .tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
14185 .ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
14186 .ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
14187 .md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
14188 .md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
14189   margin-bottom: var(--f7-tabbar-labels-height);
14190 }
14191 .tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
14192 .tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
14193 .ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
14194 .ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
14195 .md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
14196 .md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
14197   margin-top: var(--f7-tabbar-labels-height);
14198 }
14199 .messagebar ~ * .fab[class*="-bottom"],
14200 .messagebar ~ .fab[class*="-bottom"] {
14201   margin-bottom: var(--f7-messagebar-height);
14202 }
14203 .navbar + .toolbar-top ~ * .fab[class*="-top"],
14204 .ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
14205 .md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
14206 .navbar + .toolbar-top ~ .fab[class*="-top"],
14207 .ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"],
14208 .md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
14209   margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height));
14210 }
14211 .navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"],
14212 .ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
14213 .md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
14214 .navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"],
14215 .ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"],
14216 .md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
14217   margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height));
14218 }
14219 .ios .fab > a.active-state,
14220 .ios .fab-buttons a.active-state {
14221   transition-duration: 0ms;
14222 }
14223 /* === Searchbar === */
14224 :root {
14225   /*
14226   --f7-searchbar-link-color: var(--f7-bars-link-color);
14227   */
14228   --f7-searchbar-input-border-width: 0px;
14229   --f7-searchbar-input-border-color: transparent;
14230   --f7-searchbar-input-text-color: #000;
14231   --f7-searchbar-placeholder-color: #939398;
14232 }
14233 :root .theme-dark,
14234 :root.theme-dark {
14235   --f7-searchbar-input-text-color: #fff;
14236 }
14237 .ios {
14238   /*
14239   --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14240   --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14241   --f7-searchbar-border-color: var(--f7-bars-border-color);
14242   */
14243   --f7-searchbar-height: 44px;
14244   --f7-searchbar-inner-padding-left: 8px;
14245   --f7-searchbar-inner-padding-right: 8px;
14246   /*
14247   --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14248   */
14249   --f7-searchbar-search-icon-color: #939398;
14250   --f7-searchbar-input-font-size: 17px;
14251   --f7-searchbar-input-bg-color: #e8e8ea;
14252   --f7-searchbar-input-border-radius: 8px;
14253   --f7-searchbar-input-height: 32px;
14254   --f7-searchbar-input-padding-horizontal: 28px;
14255   /*
14256   --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14257   --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14258   --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
14259   --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14260   */
14261   --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
14262   --f7-searchbar-shadow-image: none;
14263   --f7-searchbar-in-page-content-margin: 0px;
14264   --f7-searchbar-in-page-content-box-shadow: none;
14265   --f7-searchbar-in-page-content-border-radius: 0;
14266   --f7-searchbar-in-page-content-input-border-radius: 0;
14267 }
14268 .ios .theme-dark,
14269 .ios.theme-dark {
14270   --f7-searchbar-bg-color: #303030;
14271   --f7-searchbar-input-bg-color: #171717;
14272 }
14273 .md {
14274   --f7-searchbar-bg-color: #fff;
14275   --f7-searchbar-border-color: transparent;
14276   --f7-searchbar-height: 48px;
14277   --f7-searchbar-inner-padding-left: 0px;
14278   --f7-searchbar-inner-padding-right: 0px;
14279   --f7-searchbar-link-color: #737373;
14280   --f7-searchbar-search-icon-color: #737373;
14281   --f7-searchbar-input-font-size: 20px;
14282   --f7-searchbar-input-bg-color: #fff;
14283   --f7-searchbar-input-border-radius: 0px;
14284   --f7-searchbar-input-height: 100%;
14285   --f7-searchbar-input-padding-horizontal: 48px;
14286   /*
14287   --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14288   --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14289   */
14290   --f7-searchbar-inline-input-padding-horizontal: 24px;
14291   --f7-searchbar-input-clear-button-color: #737373;
14292   --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
14293   --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
14294   --f7-searchbar-in-page-content-margin: 8px;
14295   --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
14296   --f7-searchbar-in-page-content-border-radius: 4px;
14297   --f7-searchbar-in-page-content-input-border-radius: 4px;
14298 }
14299 .md .theme-dark,
14300 .md.theme-dark {
14301   --f7-searchbar-bg-color: #222222;
14302   --f7-searchbar-input-bg-color: #222222;
14303 }
14304 .aurora {
14305   /*
14306   --f7-searchbar-bg-image: var(--f7-bars-bg-image);
14307   --f7-searchbar-bg-color: var(--f7-bars-bg-color);
14308   --f7-searchbar-border-color: var(--f7-bars-border-color);
14309   */
14310   --f7-searchbar-height: 38px;
14311   --f7-searchbar-inner-padding-left: 8px;
14312   --f7-searchbar-inner-padding-right: 8px;
14313   /*
14314   --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
14315   */
14316   --f7-searchbar-search-icon-color: #939398;
14317   --f7-searchbar-input-font-size: 13px;
14318   --f7-searchbar-input-bg-color: #fff;
14319   --f7-searchbar-input-border-radius: 4px;
14320   --f7-searchbar-input-height: 24px;
14321   --f7-searchbar-input-padding-horizontal: 24px;
14322   /*
14323   --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
14324   --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
14325   --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
14326   --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
14327   */
14328   --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
14329   --f7-searchbar-shadow-image: none;
14330   --f7-searchbar-in-page-content-margin: 0px;
14331   --f7-searchbar-in-page-content-box-shadow: none;
14332   --f7-searchbar-in-page-content-border-radius: 0;
14333   /*
14334   --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
14335   */
14336 }
14337 .aurora .theme-dark,
14338 .aurora.theme-dark {
14339   --f7-searchbar-input-bg-color: #333;
14340 }
14341 .searchbar {
14342   width: 100%;
14343   position: relative;
14344   z-index: 200;
14345   height: var(--f7-searchbar-height);
14346   background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
14347   background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
14348 }
14349 .searchbar.no-hairline:after,
14350 .searchbar.no-border:after {
14351   display: none !important;
14352 }
14353 .searchbar.no-shadow:before {
14354   display: none !important;
14355 }
14356 .searchbar:after {
14357   content: '';
14358   position: absolute;
14359   background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
14360   display: block;
14361   z-index: 15;
14362   top: auto;
14363   right: auto;
14364   bottom: 0;
14365   left: 0;
14366   height: 1px;
14367   width: 100%;
14368   transform-origin: 50% 100%;
14369   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14370 }
14371 .page > .searchbar:not(.searchbar-inline) {
14372   z-index: 510;
14373 }
14374 .page > .searchbar:not(.searchbar-inline):before {
14375   content: '';
14376   position: absolute;
14377   right: 0;
14378   width: 100%;
14379   top: 100%;
14380   bottom: auto;
14381   height: 8px;
14382   pointer-events: none;
14383   background: var(--f7-searchbar-shadow-image);
14384 }
14385 .searchbar input[type="text"],
14386 .searchbar input[type="search"] {
14387   box-sizing: border-box;
14388   width: 100%;
14389   height: 100%;
14390   display: block;
14391   border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
14392   -webkit-appearance: none;
14393      -moz-appearance: none;
14394           appearance: none;
14395   font-family: inherit;
14396   font-weight: normal;
14397   color: var(--f7-searchbar-input-text-color);
14398   font-size: var(--f7-searchbar-input-font-size);
14399   background-color: var(--f7-searchbar-input-bg-color);
14400   border-radius: var(--f7-searchbar-input-border-radius);
14401   position: relative;
14402   padding: 0;
14403   padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
14404   padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
14405 }
14406 .searchbar input[type="text"]::-webkit-input-placeholder,
14407 .searchbar input[type="search"]::-webkit-input-placeholder {
14408   color: var(--f7-searchbar-placeholder-color);
14409   opacity: 1;
14410 }
14411 .searchbar input[type="text"]::-moz-placeholder,
14412 .searchbar input[type="search"]::-moz-placeholder {
14413   color: var(--f7-searchbar-placeholder-color);
14414   opacity: 1;
14415 }
14416 .searchbar input[type="text"]::-ms-input-placeholder,
14417 .searchbar input[type="search"]::-ms-input-placeholder {
14418   color: var(--f7-searchbar-placeholder-color);
14419   opacity: 1;
14420 }
14421 .searchbar input[type="text"]::placeholder,
14422 .searchbar input[type="search"]::placeholder {
14423   color: var(--f7-searchbar-placeholder-color);
14424   opacity: 1;
14425 }
14426 .searchbar input::-webkit-search-cancel-button {
14427   -webkit-appearance: none;
14428           appearance: none;
14429 }
14430 .searchbar .searchbar-input-wrap {
14431   flex-shrink: 1;
14432   width: 100%;
14433   height: var(--f7-searchbar-input-height);
14434   position: relative;
14435 }
14436 .searchbar a {
14437   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14438 }
14439 .page > .searchbar:not(.searchbar-inline) {
14440   position: absolute;
14441   left: 0;
14442   top: 0;
14443 }
14444 .page-content .searchbar:not(.searchbar-inline) {
14445   border-radius: var(--f7-searchbar-in-page-content-border-radius);
14446   margin: var(--f7-searchbar-in-page-content-margin);
14447   width: auto;
14448   box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
14449 }
14450 .page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
14451 .page-content .searchbar:not(.searchbar-inline) input[type="text"],
14452 .page-content .searchbar:not(.searchbar-inline) input[type="search"] {
14453   border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
14454 }
14455 .searchbar .input-clear-button {
14456   color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
14457 }
14458 .searchbar-expandable {
14459   position: absolute;
14460   transition-duration: 300ms;
14461   pointer-events: none;
14462 }
14463 .navbar-inner-large .searchbar-expandable:after {
14464   display: none !important;
14465 }
14466 .navbar .searchbar.searchbar-expandable {
14467   --f7-searchbar-expandable-size: var(--f7-navbar-height);
14468 }
14469 .toolbar .searchbar.searchbar-expandable {
14470   --f7-searchbar-expandable-size: var(--f7-toolbar-height);
14471 }
14472 .subnavbar .searchbar.searchbar-expandable {
14473   --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
14474 }
14475 .tabbar-labels .searchbar.searchbar-expandable {
14476   --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
14477 }
14478 .searchbar-inner {
14479   position: absolute;
14480   left: 0;
14481   top: 0;
14482   width: 100%;
14483   height: 100%;
14484   display: flex;
14485   align-items: center;
14486   box-sizing: border-box;
14487   padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
14488 }
14489 .searchbar-disable-button {
14490   cursor: pointer;
14491   pointer-events: none;
14492   -webkit-appearance: none;
14493      -moz-appearance: none;
14494           appearance: none;
14495   background: none;
14496   border: none;
14497   outline: 0;
14498   padding: 0;
14499   margin: 0;
14500   width: auto;
14501   opacity: 0;
14502 }
14503 .searchbar-icon {
14504   pointer-events: none;
14505   background-position: center;
14506   background-repeat: no-repeat;
14507 }
14508 .searchbar-icon:after {
14509   color: var(--f7-searchbar-search-icon-color);
14510   font-family: 'framework7-core-icons';
14511   font-weight: normal;
14512   font-style: normal;
14513   line-height: 1;
14514   letter-spacing: normal;
14515   text-transform: none;
14516   white-space: nowrap;
14517   word-wrap: normal;
14518   direction: ltr;
14519   -webkit-font-smoothing: antialiased;
14520   text-rendering: optimizeLegibility;
14521   -moz-osx-font-smoothing: grayscale;
14522   -moz-font-feature-settings: "liga";
14523        font-feature-settings: "liga";
14524   text-align: center;
14525   display: block;
14526   width: 100%;
14527   height: 100%;
14528   font-size: 20px;
14529 }
14530 .searchbar-backdrop {
14531   position: absolute;
14532   left: 0;
14533   top: 0;
14534   width: 100%;
14535   height: 100%;
14536   z-index: 100;
14537   opacity: 0;
14538   pointer-events: none;
14539   transition-duration: 300ms;
14540   transform: translate3d(0, 0, 0);
14541   background: var(--f7-searchbar-backdrop-bg-color);
14542 }
14543 .searchbar-backdrop.searchbar-backdrop-in {
14544   opacity: 1;
14545   pointer-events: auto;
14546 }
14547 .page-content > .searchbar-backdrop {
14548   position: fixed;
14549 }
14550 .searchbar-not-found {
14551   display: none;
14552 }
14553 .hidden-by-searchbar,
14554 .list .hidden-by-searchbar,
14555 .list.li.hidden-by-searchbar,
14556 .list li.hidden-by-searchbar {
14557   display: none !important;
14558 }
14559 .navbar.with-searchbar-expandable-enabled,
14560 .navbar-inner.with-searchbar-expandable-enabled {
14561   --f7-navbar-large-collapse-progress: 1;
14562 }
14563 .navbar.with-searchbar-expandable-enabled .title-large,
14564 .navbar-inner.with-searchbar-expandable-enabled .title-large,
14565 .navbar.with-searchbar-expandable-enabled .title-large-text,
14566 .navbar-inner.with-searchbar-expandable-enabled .title-large-text,
14567 .navbar.with-searchbar-expandable-enabled .title-large-inner,
14568 .navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
14569   transition-duration: 300ms;
14570 }
14571 .page-content.with-searchbar-expandable-enabled {
14572   height: calc(100% + var(--f7-navbar-large-title-height));
14573   transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
14574   transition-duration: 300ms;
14575   transition-property: transform;
14576 }
14577 .navbar ~ .page:not(.no-navbar) > .searchbar,
14578 .page > .navbar ~ .searchbar {
14579   top: var(--f7-navbar-height);
14580 }
14581 .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
14582 .page-with-navbar-large .navbar ~ .searchbar,
14583 .page-with-navbar-large .navbar ~ * .searchbar {
14584   top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
14585   transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
14586 }
14587 .searchbar ~ * {
14588   --f7-page-searchbar-offset: var(--f7-searchbar-height);
14589 }
14590 .page > .toolbar-top ~ .searchbar,
14591 .ios .page > .toolbar-top-ios ~ .searchbar,
14592 .md .page > .toolbar-top-md ~ .searchbar,
14593 .aurora .page > .toolbar-top-aurora ~ .searchbar {
14594   top: var(--f7-toolbar-height);
14595 }
14596 .page > .tabbar-labels.toolbar-top ~ .searchbar,
14597 .ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
14598 .md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
14599 .aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14600   top: var(--f7-tabbar-labels-height);
14601 }
14602 .page > .navbar ~ .toolbar-top ~ .searchbar,
14603 .ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
14604 .md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
14605 .aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
14606   top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
14607 }
14608 .page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
14609 .ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
14610 .md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
14611 .aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
14612   top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
14613 }
14614 .searchbar.searchbar-inline {
14615   width: auto;
14616   height: auto;
14617   background-color: transparent;
14618   background-image: none;
14619 }
14620 .searchbar.searchbar-inline:after,
14621 .searchbar.searchbar-inline:before {
14622   display: none !important;
14623 }
14624 .searchbar.searchbar-inline .searchbar-input-wrap {
14625   height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
14626 }
14627 .searchbar.searchbar-inline .searchbar-inner {
14628   padding: 0;
14629   position: static;
14630   width: auto;
14631   height: auto;
14632 }
14633 .searchbar.searchbar-inline input[type="text"],
14634 .searchbar.searchbar-inline input[type="search"] {
14635   font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
14636   padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
14637   padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
14638 }
14639 .ios .searchbar input[type="search"],
14640 .ios .searchbar input[type="text"] {
14641   z-index: 30;
14642 }
14643 .ios .searchbar .input-clear-button {
14644   z-index: 40;
14645   left: 7px;
14646 }
14647 .ios .searchbar-icon {
14648   width: 13px;
14649   height: 13px;
14650   position: absolute;
14651   top: 50%;
14652   margin-top: -6px;
14653   z-index: 40;
14654   right: 8px;
14655 }
14656 .ios .searchbar-icon:after {
14657   content: 'search_ios';
14658   line-height: 13px;
14659 }
14660 .ios .searchbar-disable-button {
14661   font-size: 17px;
14662   flex-shrink: 0;
14663   transform: translate3d(0, 0, 0);
14664   transition-duration: 300ms;
14665   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14666   display: none;
14667 }
14668 .ios .searchbar-disable-button.active-state {
14669   transition-duration: 0ms;
14670   opacity: 0.3 !important;
14671 }
14672 .ios .searchbar-enabled .searchbar-disable-button {
14673   pointer-events: auto;
14674   opacity: 1;
14675   margin-right: 8px;
14676 }
14677 .ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14678   transition-duration: 300ms !important;
14679 }
14680 .ios .searchbar-expandable {
14681   --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14682   right: 0;
14683   bottom: 0;
14684   opacity: 1;
14685   width: 100%;
14686   height: 0%;
14687   transform: translate3d(0, 0, 0);
14688   overflow: hidden;
14689 }
14690 .ios .searchbar-expandable .searchbar-disable-button {
14691   margin-right: 8px;
14692   opacity: 1;
14693   display: block;
14694 }
14695 .ios .searchbar-expandable .searchbar-inner {
14696   height: var(--f7-searchbar-expandable-size);
14697 }
14698 .ios .navbar-inner.with-searchbar-expandable-enabled .left,
14699 .ios .navbar-inner.with-searchbar-expandable-enabled .title,
14700 .ios .navbar-inner.with-searchbar-expandable-enabled .right {
14701   transform: translateY(calc(-1 * var(--f7-navbar-height)));
14702   transition: 300ms;
14703   opacity: 0;
14704 }
14705 .ios .searchbar-expandable.searchbar-enabled {
14706   opacity: 1;
14707   height: var(--f7-searchbar-expandable-size);
14708   pointer-events: auto;
14709 }
14710 .md .searchbar-icon,
14711 .md .searchbar-disable-button {
14712   position: absolute;
14713   right: calc(-4px + var(--f7-safe-area-right));
14714   top: 50%;
14715   transition-duration: 300ms;
14716 }
14717 .md .searchbar-icon {
14718   width: 24px;
14719   height: 24px;
14720   margin-left: 12px;
14721   margin-top: -12px;
14722 }
14723 .md .searchbar-icon:after {
14724   content: 'search_md';
14725   line-height: 1.2;
14726 }
14727 .md .searchbar-disable-button {
14728   width: 48px;
14729   height: 48px;
14730   transform: rotate(-90deg) scale(0.5);
14731   font-size: 0 !important;
14732   display: block;
14733   margin-top: -24px;
14734   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14735 }
14736 .md .searchbar-disable-button:before {
14737   content: '';
14738   width: 152%;
14739   height: 152%;
14740   position: absolute;
14741   left: -26%;
14742   top: -26%;
14743   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14744   background-repeat: no-repeat;
14745   background-position: center;
14746   background-size: 100% 100%;
14747   opacity: 0;
14748   pointer-events: none;
14749   transition-duration: 600ms;
14750 }
14751 .md .searchbar-disable-button.active-state:before {
14752   opacity: 1;
14753   transition-duration: 150ms;
14754 }
14755 .md .searchbar-disable-button:after {
14756   font-family: 'framework7-core-icons';
14757   font-weight: normal;
14758   font-style: normal;
14759   line-height: 1;
14760   letter-spacing: normal;
14761   text-transform: none;
14762   white-space: nowrap;
14763   word-wrap: normal;
14764   direction: ltr;
14765   -webkit-font-smoothing: antialiased;
14766   text-rendering: optimizeLegibility;
14767   -moz-osx-font-smoothing: grayscale;
14768   -moz-font-feature-settings: "liga";
14769        font-feature-settings: "liga";
14770   text-align: center;
14771   display: block;
14772   width: 100%;
14773   height: 100%;
14774   font-size: 20px;
14775   line-height: 48px;
14776   content: "arrow_right_md";
14777 }
14778 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
14779   transform: rotate(0deg) scale(1);
14780   pointer-events: auto;
14781   opacity: 1;
14782 }
14783 .md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
14784   opacity: 0;
14785   transform: rotate(90deg) scale(0.5);
14786 }
14787 .md .searchbar {
14788   --f7-searchbar-input-extra-padding-left: 17px;
14789 }
14790 .md .searchbar .input-clear-button {
14791   width: 48px;
14792   height: 48px;
14793   margin-top: -24px;
14794   left: 0;
14795 }
14796 .md .searchbar .input-clear-button:before {
14797   content: '';
14798   width: 152%;
14799   height: 152%;
14800   position: absolute;
14801   left: -26%;
14802   top: -26%;
14803   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14804   background-repeat: no-repeat;
14805   background-position: center;
14806   background-size: 100% 100%;
14807   opacity: 0;
14808   pointer-events: none;
14809   transition-duration: 600ms;
14810 }
14811 .md .searchbar .input-clear-button.active-state:before {
14812   opacity: 1;
14813   transition-duration: 150ms;
14814 }
14815 .md .searchbar .input-clear-button:after {
14816   line-height: 48px;
14817   content: 'delete_md';
14818   opacity: 1;
14819 }
14820 .md .searchbar .input-clear-button:before {
14821   margin-left: 0;
14822   margin-top: 0;
14823 }
14824 .md .page > .searchbar,
14825 .md .subnavbar .searchbar,
14826 .md .searchbar-expandable {
14827   --f7-searchbar-input-extra-padding-left: calc(17px + 8px);
14828 }
14829 .md .page > .searchbar .searchbar-icon,
14830 .md .subnavbar .searchbar .searchbar-icon,
14831 .md .searchbar-expandable .searchbar-icon,
14832 .md .page > .searchbar .searchbar-disable-button,
14833 .md .subnavbar .searchbar .searchbar-disable-button,
14834 .md .searchbar-expandable .searchbar-disable-button {
14835   right: calc(-4px + 8px + var(--f7-safe-area-right));
14836 }
14837 .md .searchbar-expandable {
14838   --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14839   height: 100%;
14840   opacity: 0;
14841   top: 50%;
14842   border-radius: calc(var(--f7-searchbar-expandable-size));
14843   width: calc(var(--f7-searchbar-expandable-size));
14844   margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
14845   transform: translate3d(0px, 0px, 0px);
14846   right: 100%;
14847   margin-right: calc(var(--f7-searchbar-expandable-size) * -1);
14848 }
14849 .md .searchbar-expandable.searchbar-enabled {
14850   width: 100%;
14851   border-radius: 0;
14852   opacity: 1;
14853   pointer-events: auto;
14854   top: 0;
14855   margin-top: 0;
14856   right: 0;
14857   margin-right: 0;
14858 }
14859 .aurora .searchbar input[type="search"],
14860 .aurora .searchbar input[type="text"] {
14861   z-index: 30;
14862 }
14863 .aurora .searchbar .input-clear-button {
14864   z-index: 40;
14865   left: 4px;
14866 }
14867 .aurora .searchbar-icon {
14868   width: 13px;
14869   height: 13px;
14870   position: absolute;
14871   top: 50%;
14872   margin-top: -6px;
14873   z-index: 40;
14874   right: 6px;
14875 }
14876 .aurora .searchbar-icon:after {
14877   content: 'search_aurora';
14878   line-height: 13px;
14879 }
14880 .aurora .searchbar-disable-button {
14881   font-size: 14px;
14882   flex-shrink: 0;
14883   transform: translate3d(0, 0, 0);
14884   transition-duration: 300ms;
14885   color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14886   display: none;
14887 }
14888 .aurora .searchbar-disable-button.active-state {
14889   transition-duration: 0ms;
14890   opacity: 0.3 !important;
14891 }
14892 .aurora .searchbar-enabled .searchbar-disable-button {
14893   pointer-events: auto;
14894   opacity: 1;
14895   margin-right: 8px;
14896 }
14897 .aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
14898   transition-duration: 300ms !important;
14899 }
14900 .aurora .searchbar-expandable {
14901   --f7-searchbar-expandable-size: var(--f7-searchbar-height);
14902   right: 0;
14903   top: 0;
14904   opacity: 0;
14905   width: 100%;
14906   transform: translate3d(0, 0%, 0);
14907   overflow: hidden;
14908 }
14909 .aurora .searchbar-expandable .searchbar-disable-button {
14910   margin-right: 8px;
14911   opacity: 1;
14912   display: block;
14913 }
14914 .aurora .searchbar-expandable .searchbar-inner {
14915   height: var(--f7-searchbar-expandable-size);
14916 }
14917 .aurora .searchbar-expandable.searchbar-enabled {
14918   opacity: 1;
14919   pointer-events: auto;
14920 }
14921 /* === Messages === */
14922 :root {
14923   --f7-messages-content-bg-color: #fff;
14924   --f7-message-text-header-text-color: inherit;
14925   --f7-message-text-header-opacity: 0.65;
14926   --f7-message-text-header-font-size: 12px;
14927   --f7-message-text-footer-text-color: inherit;
14928   --f7-message-text-footer-opacity: 0.65;
14929   --f7-message-text-footer-font-size: 12px;
14930   --f7-message-bubble-line-height: 1.2;
14931   --f7-message-header-font-size: 12px;
14932   --f7-message-footer-font-size: 11px;
14933   --f7-message-name-font-size: 12px;
14934   --f7-message-name-font-weight: inherit;
14935   --f7-message-typing-indicator-bg-color: #000;
14936   --f7-message-avatar-border-radius: 50%;
14937   --f7-messages-title-font-weight: inherit;
14938   /*
14939   --f7-message-sent-bg-color: var(--f7-theme-color);
14940   */
14941   --f7-message-sent-text-color: #fff;
14942   --f7-message-received-bg-color: #e5e5ea;
14943   --f7-message-received-text-color: #000;
14944 }
14945 :root .theme-dark,
14946 :root.theme-dark {
14947   --f7-messages-content-bg-color: transparent;
14948   --f7-message-received-bg-color: #333;
14949   --f7-message-received-text-color: #fff;
14950   --f7-message-typing-indicator-bg-color: #fff;
14951 }
14952 .ios {
14953   --f7-messages-title-text-color: #8e8e93;
14954   --f7-messages-title-font-size: 11px;
14955   --f7-message-header-text-color: #8e8e93;
14956   --f7-message-footer-text-color: #8e8e93;
14957   --f7-message-name-text-color: #8e8e93;
14958   --f7-message-avatar-size: 29px;
14959   --f7-message-margin: 10px;
14960   --f7-message-bubble-min-height: 32px;
14961   --f7-message-bubble-font-size: 17px;
14962   --f7-message-bubble-border-radius: 16px;
14963   --f7-message-bubble-padding-vertical: 6px;
14964   --f7-message-bubble-padding-horizontal: 16px;
14965   --f7-message-typing-indicator-opacity: 0.35;
14966 }
14967 .md {
14968   --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
14969   --f7-messages-title-font-size: 12px;
14970   --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
14971   --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
14972   --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
14973   --f7-message-avatar-size: 32px;
14974   --f7-message-margin: 16px;
14975   --f7-message-bubble-min-height: 32px;
14976   --f7-message-bubble-font-size: 16px;
14977   --f7-message-bubble-border-radius: 4px;
14978   --f7-message-bubble-padding-vertical: 6px;
14979   --f7-message-bubble-padding-horizontal: 8px;
14980   --f7-message-typing-indicator-opacity: 0.6;
14981 }
14982 .md .theme-dark,
14983 .md.theme-dark {
14984   --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
14985   --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
14986   --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
14987   --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
14988 }
14989 .aurora {
14990   --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
14991   --f7-messages-title-font-size: 12px;
14992   --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
14993   --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
14994   --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
14995   --f7-message-avatar-size: 24px;
14996   --f7-message-margin: 10px;
14997   --f7-message-bubble-min-height: 28px;
14998   --f7-message-bubble-font-size: 13px;
14999   --f7-message-bubble-line-height: 1.4;
15000   --f7-message-bubble-border-radius: 14px;
15001   --f7-message-bubble-padding-vertical: 5px;
15002   --f7-message-bubble-padding-horizontal: 10px;
15003   --f7-message-typing-indicator-opacity: 0.5;
15004 }
15005 .aurora .theme-dark,
15006 .aurora.theme-dark {
15007   --f7-messages-title-text-color: rgba(255, 255, 255, 0.52);
15008   --f7-message-header-text-color: rgba(255, 255, 255, 0.52);
15009   --f7-message-name-text-color: rgba(255, 255, 255, 0.52);
15010   --f7-message-footer-text-color: rgba(255, 255, 255, 0.52);
15011 }
15012 .messages-content,
15013 .messages {
15014   background: var(--f7-messages-content-bg-color);
15015 }
15016 .messages {
15017   display: flex;
15018   flex-direction: column;
15019   min-height: 100%;
15020   position: relative;
15021   z-index: 1;
15022 }
15023 .messages-title,
15024 .message {
15025   margin-top: var(--f7-message-margin);
15026 }
15027 .messages-title:last-child,
15028 .message:last-child {
15029   margin-bottom: var(--f7-message-margin);
15030 }
15031 .messages-title {
15032   text-align: center;
15033   width: 100%;
15034   line-height: 1;
15035   color: var(--f7-messages-title-text-color);
15036   font-size: var(--f7-messages-title-font-size);
15037   font-weight: var(--f7-messages-title-font-weight);
15038 }
15039 .message {
15040   max-width: 70%;
15041   box-sizing: border-box;
15042   display: flex;
15043   align-items: flex-end;
15044   position: relative;
15045   z-index: 1;
15046   transform: translate3d(0, 0, 0);
15047 }
15048 .message-avatar {
15049   border-radius: var(--f7-message-avatar-border-radius);
15050   position: relative;
15051   background-size: cover;
15052   align-self: flex-end;
15053   flex-shrink: 0;
15054   width: var(--f7-message-avatar-size);
15055   height: var(--f7-message-avatar-size);
15056 }
15057 .message-content {
15058   position: relative;
15059   display: flex;
15060   flex-direction: column;
15061 }
15062 .message-header,
15063 .message-footer,
15064 .message-name {
15065   line-height: 1;
15066 }
15067 .message-header {
15068   color: var(--f7-message-header-text-color);
15069   font-size: var(--f7-message-header-font-size);
15070 }
15071 .message-footer {
15072   color: var(--f7-message-footer-text-color);
15073   font-size: var(--f7-message-footer-font-size);
15074   margin-bottom: -1em;
15075 }
15076 .message-name {
15077   color: var(--f7-message-name-text-color);
15078   font-size: var(--f7-message-name-font-size);
15079   font-weight: var(--f7-message-name-font-weight);
15080 }
15081 .message-bubble {
15082   box-sizing: border-box;
15083   word-break: break-word;
15084   display: flex;
15085   flex-direction: column;
15086   position: relative;
15087   line-height: var(--f7-message-bubble-line-height);
15088   font-size: var(--f7-message-bubble-font-size);
15089   border-radius: var(--f7-message-bubble-border-radius);
15090   padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
15091   min-height: var(--f7-message-bubble-min-height);
15092 }
15093 .message-image img {
15094   display: block;
15095   max-width: 100%;
15096   height: auto;
15097   width: auto;
15098 }
15099 .message-text-header,
15100 .message-text-footer {
15101   line-height: 1;
15102 }
15103 .message-text-header {
15104   color: var(--f7-message-text-header-text-color);
15105   opacity: var(--f7-message-text-header-opacity);
15106   font-size: var(--f7-message-text-header-font-size);
15107 }
15108 .message-text-footer {
15109   color: var(--f7-message-text-footer-text-color);
15110   opacity: var(--f7-message-text-footer-opacity);
15111   font-size: var(--f7-message-text-footer-font-size);
15112 }
15113 .message-text {
15114   text-align: left;
15115 }
15116 .message-sent {
15117   text-align: right;
15118   flex-direction: row;
15119   align-self: flex-start;
15120 }
15121 .message-sent .message-bubble {
15122   color: var(--f7-message-sent-text-color);
15123   background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
15124 }
15125 .message-sent .message-content {
15126   align-items: flex-start;
15127 }
15128 .message-sent.message-tail .message-bubble {
15129   border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
15130 }
15131 .message-received {
15132   flex-direction: row-reverse;
15133   align-self: flex-end;
15134 }
15135 .message-received .message-bubble {
15136   color: var(--f7-message-received-text-color);
15137   background: var(--f7-message-received-bg-color);
15138 }
15139 .message-received .message-content {
15140   align-items: flex-end;
15141 }
15142 .message-received.message-tail .message-bubble {
15143   border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
15144 }
15145 .message:not(.message-last) .message-avatar {
15146   opacity: 0;
15147 }
15148 .message:not(.message-first) .message-name {
15149   display: none;
15150 }
15151 .message.message-same-name .message-name {
15152   display: none;
15153 }
15154 .message.message-same-header .message-header {
15155   display: none;
15156 }
15157 .message.message-same-footer .message-footer {
15158   display: none;
15159 }
15160 .message-appear-from-bottom {
15161   animation: message-appear-from-bottom 300ms;
15162 }
15163 .message-appear-from-top {
15164   animation: message-appear-from-top 300ms;
15165 }
15166 .message-typing-indicator {
15167   display: inline-block;
15168   font-size: 0;
15169   vertical-align: middle;
15170 }
15171 .message-typing-indicator > div {
15172   display: inline-block;
15173   position: relative;
15174   background: var(--f7-message-typing-indicator-bg-color);
15175   opacity: var(--f7-message-typing-indicator-opacity);
15176   vertical-align: middle;
15177   border-radius: 50%;
15178 }
15179 @keyframes message-appear-from-bottom {
15180   from {
15181     transform: translate3d(0, 100%, 0);
15182   }
15183   to {
15184     transform: translate3d(0, 0, 0);
15185   }
15186 }
15187 @keyframes message-appear-from-top {
15188   from {
15189     transform: translate3d(0, -100%, 0);
15190   }
15191   to {
15192     transform: translate3d(0, 0, 0);
15193   }
15194 }
15195 .ios .messages-title b,
15196 .ios .message-header b,
15197 .ios .message-footer b,
15198 .ios .message-name b {
15199   font-weight: 600;
15200 }
15201 .ios .message-header,
15202 .ios .message-name {
15203   margin-bottom: 3px;
15204 }
15205 .ios .message-footer {
15206   margin-top: 3px;
15207 }
15208 .ios .message-bubble {
15209   min-width: 48px;
15210 }
15211 .ios .message-image {
15212   margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
15213 }
15214 .ios .message-image:first-child {
15215   margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
15216 }
15217 .ios .message-image:first-child img {
15218   border-top-left-radius: var(--f7-message-bubble-border-radius);
15219   border-top-right-radius: var(--f7-message-bubble-border-radius);
15220 }
15221 .ios .message-image:last-child {
15222   margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
15223 }
15224 .ios .message-image:last-child img {
15225   border-bottom-left-radius: var(--f7-message-bubble-border-radius);
15226   border-bottom-right-radius: var(--f7-message-bubble-border-radius);
15227 }
15228 .ios .message-text-header {
15229   margin-bottom: 3px;
15230 }
15231 .ios .message-text-footer {
15232   margin-top: 3px;
15233 }
15234 .ios .message-received {
15235   margin-left: calc(10px + var(--f7-safe-area-left));
15236 }
15237 .ios .message-received .message-header,
15238 .ios .message-received .message-footer,
15239 .ios .message-received .message-name {
15240   margin-left: var(--f7-message-bubble-padding-horizontal);
15241 }
15242 .ios .message-received .message-bubble {
15243   padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
15244   -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%;
15245 }
15246 .ios .message-received .message-image {
15247   margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
15248 }
15249 .ios .message-received.message-tail:not(.message-typing) .message-bubble {
15250   -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%;
15251 }
15252 .ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
15253   border-bottom-left-radius: 0px;
15254 }
15255 .ios .message-sent {
15256   margin-right: calc(10px + var(--f7-safe-area-right));
15257 }
15258 .ios .message-sent .message-header,
15259 .ios .message-sent .message-footer,
15260 .ios .message-sent .message-name {
15261   margin-right: var(--f7-message-bubble-padding-horizontal);
15262 }
15263 .ios .message-sent .message-bubble {
15264   padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
15265   -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%;
15266 }
15267 .ios .message-sent .message-image {
15268   margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
15269 }
15270 .ios .message-sent.message-tail .message-bubble {
15271   -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%;
15272 }
15273 .ios .message-sent.message-tail .message-bubble .message-image:last-child img {
15274   border-bottom-right-radius: 0px;
15275 }
15276 .ios .message + .message:not(.message-first) {
15277   margin-top: 1px;
15278 }
15279 .ios .message-received.message-typing .message-content:after,
15280 .ios .message-received.message-typing .message-content:before {
15281   content: '';
15282   position: absolute;
15283   background: var(--f7-message-received-bg-color);
15284   border-radius: 50%;
15285 }
15286 .ios .message-received.message-typing .message-content:after {
15287   width: 11px;
15288   height: 11px;
15289   left: 4px;
15290   bottom: 0px;
15291 }
15292 .ios .message-received.message-typing .message-content:before {
15293   width: 6px;
15294   height: 6px;
15295   left: -1px;
15296   bottom: -4px;
15297 }
15298 .ios .message-typing-indicator > div {
15299   width: 9px;
15300   height: 9px;
15301 }
15302 .ios .message-typing-indicator > div + div {
15303   margin-right: 4px;
15304 }
15305 .ios .message-typing-indicator > div:nth-child(1) {
15306   animation: ios-message-typing-indicator 900ms infinite;
15307 }
15308 .ios .message-typing-indicator > div:nth-child(2) {
15309   animation: ios-message-typing-indicator 900ms 150ms infinite;
15310 }
15311 .ios .message-typing-indicator > div:nth-child(3) {
15312   animation: ios-message-typing-indicator 900ms 300ms infinite;
15313 }
15314 @keyframes ios-message-typing-indicator {
15315   0% {
15316     opacity: 0.35;
15317   }
15318   25% {
15319     opacity: 0.2;
15320   }
15321   50% {
15322     opacity: 0.2;
15323   }
15324 }
15325 .md .messages-title b,
15326 .md .message-header b,
15327 .md .message-footer b,
15328 .md .message-name b {
15329   font-weight: 500;
15330 }
15331 .md .message-header,
15332 .md .message-name {
15333   margin-bottom: 2px;
15334 }
15335 .md .message-footer {
15336   margin-top: 2px;
15337 }
15338 .md .message-text-header {
15339   margin-bottom: 4px;
15340 }
15341 .md .message-text-footer {
15342   margin-top: 4px;
15343 }
15344 .md .message-received.message-tail .message-bubble:before,
15345 .md .message-sent.message-tail .message-bubble:before {
15346   position: absolute;
15347   content: '';
15348   bottom: 0;
15349   width: 0;
15350   height: 0;
15351 }
15352 .md .message-received {
15353   margin-left: calc(8px + var(--f7-safe-area-left));
15354 }
15355 .md .message-received .message-avatar + .message-content {
15356   margin-left: var(--f7-message-bubble-padding-horizontal);
15357 }
15358 .md .message-received.message-tail .message-bubble:before {
15359   border-left: 8px solid transparent;
15360   border-right: 0 solid transparent;
15361   border-bottom: 8px solid var(--f7-message-received-bg-color);
15362   right: 100%;
15363 }
15364 .md .message-sent {
15365   margin-right: calc(8px + var(--f7-safe-area-right));
15366 }
15367 .md .message-sent .message-avatar + .message-content {
15368   margin-right: var(--f7-message-bubble-padding-horizontal);
15369 }
15370 .md .message-sent.message-tail .message-bubble:before {
15371   border-left: 0 solid transparent;
15372   border-right: 8px solid transparent;
15373   border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
15374   left: 100%;
15375 }
15376 .md .message + .message:not(.message-first) {
15377   margin-top: 8px;
15378 }
15379 .md .message-typing-indicator > div {
15380   width: 6px;
15381   height: 6px;
15382 }
15383 .md .message-typing-indicator > div + div {
15384   margin-right: 6px;
15385 }
15386 .md .message-typing-indicator > div:nth-child(1) {
15387   animation: md-message-typing-indicator 900ms infinite;
15388 }
15389 .md .message-typing-indicator > div:nth-child(2) {
15390   animation: md-message-typing-indicator 900ms 150ms infinite;
15391 }
15392 .md .message-typing-indicator > div:nth-child(3) {
15393   animation: md-message-typing-indicator 900ms 300ms infinite;
15394 }
15395 @keyframes md-message-typing-indicator {
15396   0% {
15397     transform: translateY(0%);
15398   }
15399   25% {
15400     transform: translateY(-5px);
15401   }
15402   50% {
15403     transform: translateY(0%);
15404   }
15405 }
15406 .aurora .messages-title b,
15407 .aurora .message-header b,
15408 .aurora .message-footer b,
15409 .aurora .message-name b {
15410   font-weight: 500;
15411 }
15412 .aurora .message-header,
15413 .aurora .message-name {
15414   margin-bottom: 2px;
15415 }
15416 .aurora .message-footer {
15417   margin-top: 2px;
15418 }
15419 .aurora .message-text-header {
15420   margin-bottom: 2px;
15421 }
15422 .aurora .message-text-footer {
15423   margin-top: 2px;
15424 }
15425 .aurora .message-received.message-tail .message-bubble:before,
15426 .aurora .message-sent.message-tail .message-bubble:before {
15427   position: absolute;
15428   content: '';
15429   bottom: 0;
15430   width: 0;
15431   height: 0;
15432 }
15433 .aurora .message-image {
15434   margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
15435 }
15436 .aurora .message-image:first-child {
15437   margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
15438 }
15439 .aurora .message-image:first-child img {
15440   border-top-left-radius: var(--f7-message-bubble-border-radius);
15441   border-top-right-radius: var(--f7-message-bubble-border-radius);
15442 }
15443 .aurora .message-image:last-child {
15444   margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
15445 }
15446 .aurora .message-image:last-child img {
15447   border-bottom-left-radius: var(--f7-message-bubble-border-radius);
15448   border-bottom-right-radius: var(--f7-message-bubble-border-radius);
15449 }
15450 .aurora .message-received {
15451   margin-left: calc(15px + var(--f7-safe-area-left));
15452 }
15453 .aurora .message-received .message-avatar + .message-content {
15454   margin-left: 5px;
15455 }
15456 .aurora .message-received .message-header,
15457 .aurora .message-received .message-footer,
15458 .aurora .message-received .message-name {
15459   margin-left: var(--f7-message-bubble-padding-horizontal);
15460 }
15461 .aurora .message-received.message-tail .message-bubble:before {
15462   border-left: 6px solid transparent;
15463   border-right: 0 solid transparent;
15464   border-bottom: 6px solid var(--f7-message-received-bg-color);
15465   right: 100%;
15466   transform: translate(2px, 0px) rotate(-15deg);
15467   transform-origin: right bottom;
15468 }
15469 .aurora .message-sent {
15470   margin-right: calc(15px + var(--f7-safe-area-right));
15471 }
15472 .aurora .message-sent .message-avatar + .message-content {
15473   margin-right: 5px;
15474 }
15475 .aurora .message-sent .message-header,
15476 .aurora .message-sent .message-footer,
15477 .aurora .message-sent .message-name {
15478   margin-right: var(--f7-message-bubble-padding-horizontal);
15479 }
15480 .aurora .message-sent.message-tail .message-bubble:before {
15481   border-left: 0 solid transparent;
15482   border-right: 6px solid transparent;
15483   border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
15484   left: 100%;
15485   transform: translate(-2px, 0px) rotate(15deg);
15486   transform-origin: left bottom;
15487 }
15488 .aurora .message + .message:not(.message-first) {
15489   margin-top: 5px;
15490 }
15491 .aurora .message-typing-indicator > div {
15492   width: 6px;
15493   height: 6px;
15494 }
15495 .aurora .message-typing-indicator > div + div {
15496   margin-right: 4px;
15497 }
15498 .aurora .message-typing-indicator > div:nth-child(1) {
15499   animation: aurora-message-typing-indicator 900ms infinite;
15500 }
15501 .aurora .message-typing-indicator > div:nth-child(2) {
15502   animation: aurora-message-typing-indicator 900ms 150ms infinite;
15503 }
15504 .aurora .message-typing-indicator > div:nth-child(3) {
15505   animation: aurora-message-typing-indicator 900ms 300ms infinite;
15506 }
15507 @keyframes aurora-message-typing-indicator {
15508   0% {
15509     transform: translateY(0%);
15510   }
15511   50% {
15512     transform: translateY(-5px);
15513   }
15514   100% {
15515     transform: translateY(0%);
15516   }
15517 }
15518 /* === Messagebar === */
15519 :root {
15520   --f7-messagebar-bg-color: #fff;
15521   --f7-messagebar-shadow-image: none;
15522   --f7-messagebar-textarea-bg-color: transparent;
15523   --f7-messagebar-attachments-height: 155px;
15524   --f7-messagebar-attachment-height: 155px;
15525   --f7-messagebar-attachment-landscape-height: 120px;
15526   --f7-messagebar-sheet-height: 252px;
15527   --f7-messagebar-sheet-landscape-height: 192px;
15528   /*
15529   --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
15530   --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
15531   */
15532 }
15533 :root .theme-dark,
15534 :root.theme-dark {
15535   --f7-messagebar-bg-color: var(--f7-bars-bg-color);
15536 }
15537 .ios {
15538   --f7-messagebar-height: 44px;
15539   --f7-messagebar-font-size: 17px;
15540   /*
15541   --f7-messagebar-link-color: var(--f7-theme-color);
15542   */
15543   --f7-messagebar-border-color: transparent;
15544   --f7-messagebar-textarea-border-radius: 17px;
15545   --f7-messagebar-textarea-padding: 6px 15px;
15546   --f7-messagebar-textarea-height: 34px;
15547   --f7-messagebar-textarea-text-color: #000;
15548   --f7-messagebar-textarea-font-size: 17px;
15549   --f7-messagebar-textarea-line-height: 20px;
15550   --f7-messagebar-textarea-border: 1px solid #c8c8cd;
15551   --f7-messagebar-sheet-bg-color: #d1d5da;
15552   --f7-messagebar-attachments-border-color: #c8c8cd;
15553   --f7-messagebar-attachment-border-radius: 12px;
15554 }
15555 .ios .theme-dark,
15556 .ios.theme-dark {
15557   --f7-messagebar-textarea-text-color: #fff;
15558   --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
15559   --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
15560 }
15561 .md {
15562   --f7-messagebar-height: 48px;
15563   --f7-messagebar-font-size: 16px;
15564   --f7-messagebar-link-color: #333;
15565   --f7-messagebar-border-color: #d1d1d1;
15566   --f7-messagebar-textarea-border-radius: 0px;
15567   --f7-messagebar-textarea-padding: 5px 8px;
15568   --f7-messagebar-textarea-height: 32px;
15569   --f7-messagebar-textarea-text-color: #333;
15570   --f7-messagebar-textarea-font-size: 16px;
15571   --f7-messagebar-textarea-line-height: 22px;
15572   --f7-messagebar-textarea-border: 1px solid transparent;
15573   --f7-messagebar-sheet-bg-color: #fff;
15574   --f7-messagebar-attachments-border-color: #ddd;
15575   --f7-messagebar-attachment-border-radius: 4px;
15576 }
15577 .md .theme-dark,
15578 .md.theme-dark {
15579   --f7-messagebar-border-color: #282829;
15580   --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
15581   --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
15582   --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
15583 }
15584 .aurora {
15585   --f7-messagebar-height: 38px;
15586   --f7-messagebar-font-size: 14px;
15587   /*
15588   --f7-messagebar-link-color: var(--f7-theme-color);
15589   */
15590   --f7-messagebar-border-color: transparent;
15591   --f7-messagebar-textarea-border-radius: 12px;
15592   --f7-messagebar-textarea-padding: 3px 10px;
15593   --f7-messagebar-textarea-height: 24px;
15594   --f7-messagebar-textarea-text-color: #000;
15595   --f7-messagebar-textarea-font-size: 13px;
15596   --f7-messagebar-textarea-line-height: 16px;
15597   --f7-messagebar-textarea-border: 1px solid #c8c8cd;
15598   --f7-messagebar-sheet-bg-color: #fff;
15599   --f7-messagebar-attachments-border-color: #c8c8cd;
15600   --f7-messagebar-attachment-border-radius: 12px;
15601 }
15602 .aurora .theme-dark,
15603 .aurora.theme-dark {
15604   --f7-messagebar-textarea-text-color: #fff;
15605   --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
15606   --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
15607 }
15608 .messagebar {
15609   transform: translate3d(0, 0, 0);
15610   background: var(--f7-messagebar-bg-color);
15611   height: auto;
15612   min-height: var(--f7-messagebar-height);
15613   font-size: var(--f7-messagebar-font-size);
15614   padding-bottom: var(--f7-safe-area-bottom);
15615   bottom: 0;
15616 }
15617 .messagebar:before {
15618   content: '';
15619   position: absolute;
15620   background-color: var(--f7-messagebar-border-color);
15621   display: block;
15622   z-index: 15;
15623   top: 0;
15624   right: auto;
15625   bottom: auto;
15626   left: 0;
15627   height: 1px;
15628   width: 100%;
15629   transform-origin: 50% 0%;
15630   transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
15631 }
15632 .messagebar:after {
15633   content: '';
15634   position: absolute;
15635   right: 0;
15636   width: 100%;
15637   bottom: 100%;
15638   height: 8px;
15639   top: auto;
15640   pointer-events: none;
15641   background: var(--f7-messagebar-shadow-image);
15642 }
15643 .messagebar.no-hairline:before,
15644 .messagebar.no-border:before {
15645   display: none !important;
15646 }
15647 .messagebar.no-shadow:after,
15648 .messagebar.toolbar-hidden:after {
15649   display: none !important;
15650 }
15651 .messagebar .toolbar-inner {
15652   top: auto;
15653   position: relative;
15654   height: auto;
15655   bottom: auto;
15656   padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
15657   padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
15658   flex-direction: row-reverse;
15659 }
15660 .messagebar.messagebar-sheet-visible > .toolbar-inner {
15661   bottom: 0;
15662 }
15663 .messagebar .messagebar-area {
15664   width: 100%;
15665   flex-shrink: 1;
15666   overflow: hidden;
15667   position: relative;
15668 }
15669 .messagebar textarea {
15670   width: 100%;
15671   flex-shrink: 1;
15672   background-color: var(--f7-messagebar-textarea-bg-color);
15673   border-radius: var(--f7-messagebar-textarea-border-radius);
15674   padding: var(--f7-messagebar-textarea-padding);
15675   height: var(--f7-messagebar-textarea-height);
15676   color: var(--f7-messagebar-textarea-text-color);
15677   font-size: var(--f7-messagebar-textarea-font-size);
15678   line-height: var(--f7-messagebar-textarea-line-height);
15679   border: var(--f7-messagebar-textarea-border);
15680 }
15681 .messagebar a.link {
15682   align-self: flex-end;
15683   flex-shrink: 0;
15684   color: var(--f7-messagebar-link-color, var(--f7-theme-color));
15685 }
15686 .messagebar-attachments {
15687   width: 100%;
15688   will-change: scroll-position;
15689   overflow: auto;
15690   -webkit-overflow-scrolling: touch;
15691   font-size: 0;
15692   white-space: nowrap;
15693   box-sizing: border-box;
15694   position: relative;
15695 }
15696 .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
15697   display: none;
15698 }
15699 .messagebar-attachment {
15700   background-size: cover;
15701   background-position: center;
15702   background-repeat: no-repeat;
15703   display: inline-block;
15704   vertical-align: middle;
15705   white-space: normal;
15706   height: var(--f7-messagebar-attachment-height);
15707   position: relative;
15708   border-radius: var(--f7-messagebar-attachment-border-radius);
15709 }
15710 @media (orientation: landscape) {
15711   .messagebar-attachment {
15712     height: var(--f7-messagebar-attachment-landscape-height);
15713   }
15714 }
15715 .messagebar-attachment img {
15716   display: block;
15717   width: auto;
15718   height: 100%;
15719   border-radius: var(--f7-messagebar-attachment-border-radius);
15720 }
15721 .messagebar-attachment + .messagebar-attachment {
15722   margin-right: 8px;
15723 }
15724 .messagebar-sheet {
15725   will-change: scroll-position;
15726   overflow: auto;
15727   -webkit-overflow-scrolling: touch;
15728   display: flex;
15729   flex-wrap: wrap;
15730   flex-direction: column;
15731   align-content: flex-start;
15732   height: var(--f7-messagebar-sheet-height);
15733   background-color: var(--f7-messagebar-sheet-bg-color);
15734   padding-left: var(--f7-safe-area-left);
15735   padding-right: var(--f7-safe-area-right);
15736 }
15737 @media (orientation: landscape) {
15738   .messagebar-sheet {
15739     height: var(--f7-messagebar-sheet-landscape-height);
15740   }
15741 }
15742 .messagebar-sheet-image,
15743 .messagebar-sheet-item {
15744   box-sizing: border-box;
15745   flex-shrink: 0;
15746   margin-top: 1px;
15747   position: relative;
15748   overflow: hidden;
15749   height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
15750   width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
15751   margin-right: 1px;
15752 }
15753 @media (orientation: landscape) {
15754   .messagebar-sheet-image,
15755   .messagebar-sheet-item {
15756     width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
15757     height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
15758   }
15759 }
15760 .messagebar-sheet-image .icon-checkbox,
15761 .messagebar-sheet-item .icon-checkbox,
15762 .messagebar-sheet-image .icon-radio,
15763 .messagebar-sheet-item .icon-radio {
15764   position: absolute;
15765   right: 8px;
15766   bottom: 8px;
15767 }
15768 .messagebar-sheet-image {
15769   background-size: cover;
15770   background-position: center;
15771   background-repeat: no-repeat;
15772 }
15773 .messagebar-attachment-delete {
15774   display: block;
15775   position: absolute;
15776   border-radius: 50%;
15777   box-sizing: border-box;
15778   cursor: pointer;
15779   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
15780 }
15781 .messagebar-attachment-delete:after,
15782 .messagebar-attachment-delete:before {
15783   position: absolute;
15784   content: '';
15785   left: 50%;
15786   top: 50%;
15787 }
15788 .messagebar-attachment-delete:after {
15789   transform: rotate(45deg);
15790 }
15791 .messagebar-attachment-delete:before {
15792   transform: rotate(-45deg);
15793 }
15794 .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
15795   display: none;
15796 }
15797 .messagebar ~ * {
15798   --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
15799 }
15800 .ios .messagebar a.link.icon-only:first-child {
15801   margin-left: -8px;
15802 }
15803 .ios .messagebar a.link.icon-only:last-child {
15804   margin-right: -8px;
15805 }
15806 .ios .messagebar a.link:not(.icon-only) + .messagebar-area {
15807   margin-left: 8px;
15808 }
15809 .ios .messagebar .messagebar-area + a.link:not(.icon-only) {
15810   margin-left: 8px;
15811 }
15812 .ios .messagebar-area {
15813   margin-top: 5px;
15814   margin-bottom: 5px;
15815 }
15816 .ios .messagebar-attachments {
15817   padding: 5px;
15818   border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
15819   border: 1px solid var(--f7-messagebar-attachments-border-color);
15820   border-bottom: none;
15821 }
15822 .ios .messagebar-attachments-visible .messagebar-attachments + textarea {
15823   border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
15824 }
15825 .ios .messagebar-attachment {
15826   font-size: 14px;
15827 }
15828 .ios .messagebar-attachment-delete {
15829   right: 5px;
15830   top: 5px;
15831   width: 20px;
15832   height: 20px;
15833   background: #7d7e80;
15834   border: 2px solid #fff;
15835 }
15836 .ios .messagebar-attachment-delete:after,
15837 .ios .messagebar-attachment-delete:before {
15838   width: 10px;
15839   height: 2px;
15840   background: #fff;
15841   margin-left: -5px;
15842   margin-top: -1px;
15843 }
15844 .md .messagebar-attachments {
15845   padding: 8px;
15846   border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
15847 }
15848 .md .messagebar-area {
15849   margin-top: 8px;
15850   margin-bottom: 8px;
15851 }
15852 .md .messagebar-sheet-image .icon-checkbox,
15853 .md .messagebar-sheet-item .icon-checkbox {
15854   border-color: #fff;
15855   background: rgba(255, 255, 255, 0.25);
15856   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
15857 }
15858 .md .messagebar-attachment-delete {
15859   right: 8px;
15860   top: 8px;
15861   width: 24px;
15862   height: 24px;
15863   background-color: var(--f7-theme-color);
15864   border-radius: 4px;
15865 }
15866 .md .messagebar-attachment-delete:after,
15867 .md .messagebar-attachment-delete:before {
15868   width: 14px;
15869   height: 2px;
15870   background: #fff;
15871   margin-left: -7px;
15872   margin-top: -1px;
15873 }
15874 .aurora .messagebar a.link + .messagebar-area {
15875   margin-left: 5px;
15876 }
15877 .aurora .messagebar .messagebar-area + a.link {
15878   margin-left: 5px;
15879 }
15880 .aurora .messagebar-area {
15881   margin-top: 5px;
15882   margin-bottom: 5px;
15883 }
15884 .aurora .messagebar-sheet-image .icon-checkbox,
15885 .aurora .messagebar-sheet-item .icon-checkbox {
15886   background: rgba(255, 255, 255, 0.25);
15887 }
15888 .aurora .messagebar-attachments {
15889   padding: 5px;
15890   border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
15891   border: 1px solid var(--f7-messagebar-attachments-border-color);
15892   border-bottom: none;
15893 }
15894 .aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
15895   border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
15896 }
15897 .aurora .messagebar-attachment {
15898   font-size: 14px;
15899 }
15900 .aurora .messagebar-attachment-delete {
15901   right: 5px;
15902   top: 5px;
15903   width: 14px;
15904   height: 14px;
15905   background: #808080;
15906 }
15907 .aurora .messagebar-attachment-delete:after,
15908 .aurora .messagebar-attachment-delete:before {
15909   width: 8px;
15910   height: 1px;
15911   background: #fff;
15912   margin-left: -4px;
15913   margin-top: -1px;
15914 }
15915 /* === Swiper === */
15916 .swiper-container {
15917   margin: 0 auto;
15918   position: relative;
15919   overflow: hidden;
15920   list-style: none;
15921   padding: 0;
15922   /* Fix of Webkit flickering */
15923   z-index: 1;
15924 }
15925 .swiper-container-no-flexbox .swiper-slide {
15926   float: left;
15927 }
15928 .swiper-container-vertical > .swiper-wrapper {
15929   flex-direction: column;
15930 }
15931 .swiper-wrapper {
15932   position: relative;
15933   width: 100%;
15934   height: 100%;
15935   z-index: 1;
15936   display: flex;
15937   transition-property: transform;
15938   box-sizing: content-box;
15939 }
15940 .swiper-container-android .swiper-slide,
15941 .swiper-wrapper {
15942   transform: translate3d(0px, 0, 0);
15943 }
15944 .swiper-container-multirow > .swiper-wrapper {
15945   flex-wrap: wrap;
15946 }
15947 .swiper-container-free-mode > .swiper-wrapper {
15948   transition-timing-function: ease-out;
15949   margin: 0 auto;
15950 }
15951 .swiper-slide {
15952   flex-shrink: 0;
15953   width: 100%;
15954   height: 100%;
15955   position: relative;
15956   transition-property: transform;
15957 }
15958 .swiper-slide-invisible-blank {
15959   visibility: hidden;
15960 }
15961 /* Auto Height */
15962 .swiper-container-autoheight,
15963 .swiper-container-autoheight .swiper-slide {
15964   height: auto;
15965 }
15966 .swiper-container-autoheight .swiper-wrapper {
15967   align-items: flex-start;
15968   transition-property: transform, height;
15969 }
15970 /* 3D Effects */
15971 .swiper-container-3d {
15972   perspective: 1200px;
15973 }
15974 .swiper-container-3d .swiper-wrapper,
15975 .swiper-container-3d .swiper-slide,
15976 .swiper-container-3d .swiper-slide-shadow-left,
15977 .swiper-container-3d .swiper-slide-shadow-right,
15978 .swiper-container-3d .swiper-slide-shadow-top,
15979 .swiper-container-3d .swiper-slide-shadow-bottom,
15980 .swiper-container-3d .swiper-cube-shadow {
15981   transform-style: preserve-3d;
15982 }
15983 .swiper-container-3d .swiper-slide-shadow-left,
15984 .swiper-container-3d .swiper-slide-shadow-right,
15985 .swiper-container-3d .swiper-slide-shadow-top,
15986 .swiper-container-3d .swiper-slide-shadow-bottom {
15987   position: absolute;
15988   left: 0;
15989   top: 0;
15990   width: 100%;
15991   height: 100%;
15992   pointer-events: none;
15993   z-index: 10;
15994 }
15995 .swiper-container-3d .swiper-slide-shadow-left {
15996   background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
15997 }
15998 .swiper-container-3d .swiper-slide-shadow-right {
15999   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16000 }
16001 .swiper-container-3d .swiper-slide-shadow-top {
16002   background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16003 }
16004 .swiper-container-3d .swiper-slide-shadow-bottom {
16005   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16006 }
16007 /* IE10 Windows Phone 8 Fixes */
16008 .swiper-container-wp8-horizontal,
16009 .swiper-container-wp8-horizontal > .swiper-wrapper {
16010   touch-action: pan-y;
16011 }
16012 .swiper-container-wp8-vertical,
16013 .swiper-container-wp8-vertical > .swiper-wrapper {
16014   touch-action: pan-x;
16015 }
16016 /* a11y */
16017 .swiper-container .swiper-notification {
16018   position: absolute;
16019   left: 0;
16020   top: 0;
16021   pointer-events: none;
16022   opacity: 0;
16023   z-index: -1000;
16024 }
16025 .swiper-container-coverflow .swiper-wrapper {
16026   /* Windows 8 IE 10 fix */
16027   -ms-perspective: 1200px;
16028 }
16029 .swiper-container-cube {
16030   overflow: visible;
16031 }
16032 .swiper-container-cube .swiper-slide {
16033   pointer-events: none;
16034   -webkit-backface-visibility: hidden;
16035           backface-visibility: hidden;
16036   z-index: 1;
16037   visibility: hidden;
16038   transform-origin: 0 0;
16039   width: 100%;
16040   height: 100%;
16041 }
16042 .swiper-container-cube .swiper-slide .swiper-slide {
16043   pointer-events: none;
16044 }
16045 .swiper-container-cube.swiper-container-rtl .swiper-slide {
16046   transform-origin: 100% 0;
16047 }
16048 .swiper-container-cube .swiper-slide-active,
16049 .swiper-container-cube .swiper-slide-active .swiper-slide-active {
16050   pointer-events: auto;
16051 }
16052 .swiper-container-cube .swiper-slide-active,
16053 .swiper-container-cube .swiper-slide-next,
16054 .swiper-container-cube .swiper-slide-prev,
16055 .swiper-container-cube .swiper-slide-next + .swiper-slide {
16056   pointer-events: auto;
16057   visibility: visible;
16058 }
16059 .swiper-container-cube .swiper-slide-shadow-top,
16060 .swiper-container-cube .swiper-slide-shadow-bottom,
16061 .swiper-container-cube .swiper-slide-shadow-left,
16062 .swiper-container-cube .swiper-slide-shadow-right {
16063   z-index: 0;
16064   -webkit-backface-visibility: hidden;
16065           backface-visibility: hidden;
16066 }
16067 .swiper-container-cube .swiper-cube-shadow {
16068   position: absolute;
16069   left: 0;
16070   bottom: 0px;
16071   width: 100%;
16072   height: 100%;
16073   background: #000;
16074   opacity: 0.6;
16075   -webkit-filter: blur(50px);
16076   filter: blur(50px);
16077   z-index: 0;
16078 }
16079 .swiper-container-fade.swiper-container-free-mode .swiper-slide {
16080   transition-timing-function: ease-out;
16081 }
16082 .swiper-container-fade .swiper-slide {
16083   pointer-events: none;
16084   transition-property: opacity;
16085 }
16086 .swiper-container-fade .swiper-slide .swiper-slide {
16087   pointer-events: none;
16088 }
16089 .swiper-container-fade .swiper-slide-active,
16090 .swiper-container-fade .swiper-slide-active .swiper-slide-active {
16091   pointer-events: auto;
16092 }
16093 .swiper-container-flip {
16094   overflow: visible;
16095 }
16096 .swiper-container-flip .swiper-slide {
16097   pointer-events: none;
16098   -webkit-backface-visibility: hidden;
16099           backface-visibility: hidden;
16100   z-index: 1;
16101 }
16102 .swiper-container-flip .swiper-slide .swiper-slide {
16103   pointer-events: none;
16104 }
16105 .swiper-container-flip .swiper-slide-active,
16106 .swiper-container-flip .swiper-slide-active .swiper-slide-active {
16107   pointer-events: auto;
16108 }
16109 .swiper-container-flip .swiper-slide-shadow-top,
16110 .swiper-container-flip .swiper-slide-shadow-bottom,
16111 .swiper-container-flip .swiper-slide-shadow-left,
16112 .swiper-container-flip .swiper-slide-shadow-right {
16113   z-index: 0;
16114   -webkit-backface-visibility: hidden;
16115           backface-visibility: hidden;
16116 }
16117 /* Scrollbar */
16118 .swiper-scrollbar {
16119   border-radius: 10px;
16120   position: relative;
16121   -ms-touch-action: none;
16122   background: rgba(0, 0, 0, 0.1);
16123 }
16124 .swiper-container-horizontal > .swiper-scrollbar {
16125   position: absolute;
16126   left: 1%;
16127   bottom: 3px;
16128   z-index: 50;
16129   height: 5px;
16130   width: 98%;
16131 }
16132 .swiper-container-vertical > .swiper-scrollbar {
16133   position: absolute;
16134   right: 3px;
16135   top: 1%;
16136   z-index: 50;
16137   width: 5px;
16138   height: 98%;
16139 }
16140 .swiper-scrollbar-drag {
16141   height: 100%;
16142   width: 100%;
16143   position: relative;
16144   background: rgba(0, 0, 0, 0.5);
16145   border-radius: 10px;
16146   left: 0;
16147   top: 0;
16148 }
16149 .swiper-scrollbar-cursor-drag {
16150   cursor: move;
16151 }
16152 .swiper-scrollbar-lock {
16153   display: none;
16154 }
16155 .swiper-zoom-container {
16156   width: 100%;
16157   height: 100%;
16158   display: flex;
16159   justify-content: center;
16160   align-items: center;
16161   text-align: center;
16162 }
16163 .swiper-zoom-container > img,
16164 .swiper-zoom-container > svg,
16165 .swiper-zoom-container > canvas {
16166   max-width: 100%;
16167   max-height: 100%;
16168   object-fit: contain;
16169 }
16170 .swiper-slide-zoomed {
16171   cursor: move;
16172 }
16173 .swiper-button-prev,
16174 .swiper-button-next {
16175   position: absolute;
16176   top: 50%;
16177   width: 27px;
16178   height: 44px;
16179   line-height: 44px;
16180   text-align: center;
16181   margin-top: -22px;
16182   z-index: 10;
16183   cursor: pointer;
16184   color: var(--f7-theme-color);
16185 }
16186 .swiper-button-prev:after,
16187 .swiper-button-next:after {
16188   font-family: 'framework7-core-icons';
16189   font-weight: normal;
16190   font-style: normal;
16191   line-height: 1;
16192   letter-spacing: normal;
16193   text-transform: none;
16194   white-space: nowrap;
16195   word-wrap: normal;
16196   direction: ltr;
16197   -webkit-font-smoothing: antialiased;
16198   text-rendering: optimizeLegibility;
16199   -moz-osx-font-smoothing: grayscale;
16200   -moz-font-feature-settings: "liga";
16201        font-feature-settings: "liga";
16202   text-align: center;
16203   display: block;
16204   width: 100%;
16205   height: 100%;
16206   font-size: 20px;
16207   font-size: 44px;
16208 }
16209 .swiper-button-prev.swiper-button-disabled,
16210 .swiper-button-next.swiper-button-disabled {
16211   opacity: 0.35;
16212   cursor: auto;
16213   pointer-events: none;
16214 }
16215 .swiper-button-prev,
16216 .swiper-container-rtl .swiper-button-next {
16217   left: 10px;
16218   right: auto;
16219 }
16220 .swiper-button-prev:after,
16221 .swiper-container-rtl .swiper-button-next:after {
16222   content: 'swiper_prev';
16223 }
16224 .swiper-button-next,
16225 .swiper-container-rtl .swiper-button-prev {
16226   right: 10px;
16227   left: auto;
16228 }
16229 .swiper-button-next:after,
16230 .swiper-container-rtl .swiper-button-prev:after {
16231   content: 'swiper_next';
16232 }
16233 .swiper-button-lock {
16234   display: none;
16235 }
16236 .swiper-pagination {
16237   position: absolute;
16238   text-align: center;
16239   transition: 300ms opacity;
16240   transform: translate3d(0, 0, 0);
16241   z-index: 10;
16242 }
16243 .swiper-pagination.swiper-pagination-hidden {
16244   opacity: 0;
16245 }
16246 .swiper-pagination-fraction,
16247 .swiper-pagination-custom,
16248 .swiper-container-horizontal > .swiper-pagination-bullets {
16249   bottom: 10px;
16250   left: 0;
16251   width: 100%;
16252 }
16253 .swiper-pagination-bullets-dynamic {
16254   overflow: hidden;
16255   font-size: 0;
16256 }
16257 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16258   transform: scale(0.33);
16259   position: relative;
16260 }
16261 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
16262   transform: scale(1);
16263 }
16264 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
16265   transform: scale(0.66);
16266 }
16267 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
16268   transform: scale(0.33);
16269 }
16270 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
16271   transform: scale(0.66);
16272 }
16273 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
16274   transform: scale(0.33);
16275 }
16276 .swiper-pagination-bullet {
16277   width: 8px;
16278   height: 8px;
16279   display: inline-block;
16280   border-radius: 100%;
16281   background: #000;
16282   opacity: 0.2;
16283 }
16284 button.swiper-pagination-bullet {
16285   border: none;
16286   margin: 0;
16287   padding: 0;
16288   box-shadow: none;
16289   -webkit-appearance: none;
16290      -moz-appearance: none;
16291           appearance: none;
16292 }
16293 .swiper-pagination-clickable .swiper-pagination-bullet {
16294   cursor: pointer;
16295 }
16296 .swiper-pagination-bullet-active {
16297   opacity: 1;
16298   background: var(--f7-theme-color);
16299 }
16300 .swiper-container-vertical > .swiper-pagination-bullets {
16301   right: 10px;
16302   top: 50%;
16303   transform: translate3d(0px, -50%, 0);
16304 }
16305 .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
16306   margin: 6px 0;
16307   display: block;
16308 }
16309 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16310   top: 50%;
16311   transform: translateY(-50%);
16312   width: 8px;
16313 }
16314 .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16315   display: inline-block;
16316   transition: 200ms transform, 200ms top;
16317 }
16318 .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
16319   margin: 0 4px;
16320 }
16321 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
16322   left: 50%;
16323   transform: translateX(-50%);
16324   white-space: nowrap;
16325 }
16326 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16327   transition: 200ms transform, 200ms left;
16328 }
16329 .swiper-pagination-progressbar {
16330   background: rgba(0, 0, 0, 0.25);
16331   position: absolute;
16332 }
16333 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16334   background: var(--f7-theme-color);
16335   position: absolute;
16336   left: 0;
16337   top: 0;
16338   width: 100%;
16339   height: 100%;
16340   transform: scale(0);
16341   transform-origin: left top;
16342 }
16343 .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16344   transform-origin: right top;
16345 }
16346 .swiper-container-horizontal > .swiper-pagination-progressbar,
16347 .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16348   width: 100%;
16349   height: 4px;
16350   left: 0;
16351   top: 0;
16352 }
16353 .swiper-container-vertical > .swiper-pagination-progressbar,
16354 .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
16355   width: 4px;
16356   height: 100%;
16357   left: 0;
16358   top: 0;
16359 }
16360 .swiper-pagination-lock {
16361   display: none;
16362 }
16363 .preloader.swiper-lazy-preloader {
16364   position: absolute;
16365   left: 50%;
16366   top: 50%;
16367   z-index: 10;
16368   width: 32px;
16369   height: 32px;
16370   margin-left: -16px;
16371   margin-top: -16px;
16372 }
16373 /* === Photo Browser === */
16374 :root {
16375   --f7-photobrowser-bg-color: #fff;
16376   --f7-photobrowser-bars-bg-image: none;
16377   /*
16378   --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
16379   --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
16380   --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
16381   */
16382   --f7-photobrowser-caption-font-size: 14px;
16383   --f7-photobrowser-caption-light-text-color: #000;
16384   --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
16385   --f7-photobrowser-caption-dark-text-color: #fff;
16386   --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
16387   --f7-photobrowser-exposed-bg-color: #000;
16388   --f7-photobrowser-dark-bg-color: #000;
16389   --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
16390   --f7-photobrowser-dark-bars-text-color: #fff;
16391   --f7-photobrowser-dark-bars-link-color: #fff;
16392 }
16393 .photo-browser {
16394   position: absolute;
16395   left: 0;
16396   top: 0;
16397   width: 100%;
16398   height: 100%;
16399   z-index: 400;
16400 }
16401 .photo-browser-standalone.modal-in {
16402   transition-duration: 0ms;
16403   animation: photo-browser-in 400ms;
16404 }
16405 .photo-browser-standalone.modal-out {
16406   transition-duration: 0ms;
16407   animation: photo-browser-out 400ms;
16408 }
16409 .photo-browser-standalone.modal-out.swipe-close-to-bottom,
16410 .photo-browser-standalone.modal-out.swipe-close-to-top {
16411   animation: none;
16412 }
16413 .photo-browser-popup.modal-out.swipe-close-to-bottom,
16414 .photo-browser-popup.modal-out.swipe-close-to-top {
16415   transition-duration: 300ms;
16416 }
16417 .photo-browser-popup.modal-out.swipe-close-to-bottom {
16418   transform: translate3d(0, 100%, 0);
16419 }
16420 .photo-browser-popup.modal-out.swipe-close-to-top {
16421   transform: translate3d(0, -100vh, 0);
16422 }
16423 .photo-browser-page {
16424   background: none;
16425 }
16426 .photo-browser-page .toolbar {
16427   transform: none;
16428 }
16429 .photo-browser-popup {
16430   background: none;
16431 }
16432 .photo-browser-of {
16433   margin: 0 5px;
16434 }
16435 .photo-browser-captions {
16436   pointer-events: none;
16437   position: absolute;
16438   left: 0;
16439   width: 100%;
16440   bottom: var(--f7-safe-area-bottom);
16441   z-index: 10;
16442   opacity: 1;
16443   transition: 400ms;
16444 }
16445 .photo-browser-captions.photo-browser-captions-exposed {
16446   opacity: 0;
16447 }
16448 .toolbar ~ .photo-browser-captions {
16449   bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
16450   transform: translate3d(0, 0px, 0);
16451 }
16452 .toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
16453   transform: translate3d(0, 0px, 0);
16454 }
16455 .photo-browser-caption {
16456   box-sizing: border-box;
16457   transition: 300ms;
16458   position: absolute;
16459   bottom: 0;
16460   left: 0;
16461   opacity: 0;
16462   padding: 4px 5px;
16463   width: 100%;
16464   text-align: center;
16465   font-size: var(--f7-photobrowser-caption-font-size);
16466 }
16467 .photo-browser-caption:empty {
16468   display: none;
16469 }
16470 .photo-browser-caption.photo-browser-caption-active {
16471   opacity: 1;
16472 }
16473 .photo-browser-captions-light .photo-browser-caption {
16474   color: var(--f7-photobrowser-caption-light-text-color);
16475   background: var(--f7-photobrowser-caption-light-bg-color);
16476 }
16477 .photo-browser-captions-dark .photo-browser-caption {
16478   color: var(--f7-photobrowser-caption-dark-text-color);
16479   background: var(--f7-photobrowser-caption-dark-bg-color);
16480 }
16481 .photo-browser-swiper-container {
16482   position: absolute;
16483   left: 0;
16484   top: 0;
16485   width: 100%;
16486   height: 100%;
16487   overflow: hidden;
16488   background: var(--f7-photobrowser-bg-color);
16489   transition: 400ms;
16490   transition-property: background-color;
16491 }
16492 .photo-browser-prev.swiper-button-disabled,
16493 .photo-browser-next.swiper-button-disabled {
16494   opacity: 0.3;
16495   pointer-events: none;
16496 }
16497 .photo-browser-slide {
16498   width: 100%;
16499   height: 100%;
16500   position: relative;
16501   overflow: hidden;
16502   display: flex;
16503   justify-content: center;
16504   align-items: center;
16505   flex-shrink: 0;
16506   box-sizing: border-box;
16507 }
16508 .photo-browser-slide.photo-browser-transitioning {
16509   transition: 400ms;
16510   transition-property: transform;
16511 }
16512 .photo-browser-slide span.swiper-zoom-container {
16513   display: none;
16514 }
16515 .photo-browser-slide img {
16516   width: auto;
16517   height: auto;
16518   max-width: 100%;
16519   max-height: 100%;
16520   display: none;
16521 }
16522 .photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
16523 .photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
16524 .photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
16525   display: flex;
16526 }
16527 .photo-browser-slide.swiper-slide-active img,
16528 .photo-browser-slide.swiper-slide-next img,
16529 .photo-browser-slide.swiper-slide-prev img {
16530   display: inline;
16531 }
16532 .photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
16533 .photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
16534 .photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
16535   display: block;
16536 }
16537 .photo-browser-slide iframe {
16538   width: 100%;
16539   height: 100%;
16540 }
16541 .photo-browser-slide .preloader {
16542   display: none;
16543   position: absolute;
16544   width: 42px;
16545   height: 42px;
16546   margin-left: -21px;
16547   margin-top: -21px;
16548   left: 50%;
16549   top: 50%;
16550 }
16551 .photo-browser-page .navbar,
16552 .view.with-photo-browser-page .navbar,
16553 .photo-browser-page .toolbar,
16554 .view.with-photo-browser-page .toolbar {
16555   background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
16556   background-image: var(--f7-photobrowser-bars-bg-image);
16557   transition: 400ms;
16558   color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
16559 }
16560 .photo-browser-page .navbar a,
16561 .view.with-photo-browser-page .navbar a,
16562 .photo-browser-page .toolbar a,
16563 .view.with-photo-browser-page .toolbar a {
16564   color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
16565 }
16566 .photo-browser-exposed .navbar,
16567 .photo-browser-exposed .toolbar {
16568   opacity: 0;
16569   visibility: hidden;
16570   pointer-events: none;
16571 }
16572 .photo-browser-exposed .toolbar ~ .photo-browser-captions {
16573   transform: translate3d(0, var(--f7-toolbar-height), 0);
16574 }
16575 .photo-browser-exposed .photo-browser-swiper-container {
16576   background: var(--f7-photobrowser-exposed-bg-color);
16577 }
16578 .photo-browser-exposed .photo-browser-caption {
16579   color: var(--f7-photobrowser-caption-dark-text-color);
16580   background: var(--f7-photobrowser-caption-dark-bg-color);
16581 }
16582 .view.with-photo-browser-page-exposed .navbar {
16583   opacity: 0;
16584 }
16585 .photo-browser-dark .photo-browser-swiper-container,
16586 .photo-browser-page-dark .photo-browser-swiper-container,
16587 .view.with-photo-browser-page-dark .photo-browser-swiper-container {
16588   background: var(--f7-photobrowser-dark-bg-color);
16589 }
16590 .photo-browser-dark .navbar,
16591 .photo-browser-page-dark .navbar,
16592 .view.with-photo-browser-page-dark .navbar,
16593 .photo-browser-dark .toolbar,
16594 .photo-browser-page-dark .toolbar,
16595 .view.with-photo-browser-page-dark .toolbar {
16596   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
16597   --f7-link-highlight-color: var(--f7-link-highlight-white);
16598   background: var(--f7-photobrowser-dark-bars-bg-color);
16599   color: var(--f7-photobrowser-dark-bars-text-color);
16600 }
16601 .photo-browser-dark .navbar:before,
16602 .photo-browser-page-dark .navbar:before,
16603 .view.with-photo-browser-page-dark .navbar:before,
16604 .photo-browser-dark .toolbar:before,
16605 .photo-browser-page-dark .toolbar:before,
16606 .view.with-photo-browser-page-dark .toolbar:before {
16607   display: none !important;
16608 }
16609 .photo-browser-dark .navbar:after,
16610 .photo-browser-page-dark .navbar:after,
16611 .view.with-photo-browser-page-dark .navbar:after,
16612 .photo-browser-dark .toolbar:after,
16613 .photo-browser-page-dark .toolbar:after,
16614 .view.with-photo-browser-page-dark .toolbar:after {
16615   display: none !important;
16616 }
16617 .photo-browser-dark .navbar a,
16618 .photo-browser-page-dark .navbar a,
16619 .view.with-photo-browser-page-dark .navbar a,
16620 .photo-browser-dark .toolbar a,
16621 .photo-browser-page-dark .toolbar a,
16622 .view.with-photo-browser-page-dark .toolbar a {
16623   color: var(--f7-photobrowser-dark-bars-link-color);
16624 }
16625 @keyframes photo-browser-in {
16626   0% {
16627     transform: translate3d(0, 0, 0) scale(0.5);
16628     opacity: 0;
16629   }
16630   50% {
16631     transform: translate3d(0, 0, 0) scale(1.05);
16632     opacity: 1;
16633   }
16634   100% {
16635     transform: translate3d(0, 0, 0) scale(1);
16636     opacity: 1;
16637   }
16638 }
16639 @keyframes photo-browser-out {
16640   0% {
16641     transform: translate3d(0, 0, 0) scale(1);
16642     opacity: 1;
16643   }
16644   50% {
16645     transform: translate3d(0, 0, 0) scale(1.05);
16646     opacity: 1;
16647   }
16648   100% {
16649     transform: translate3d(0, 0, 0) scale(0.5);
16650     opacity: 0;
16651   }
16652 }
16653 /* === Notifications === */
16654 :root {
16655   --f7-notification-max-width: 568px;
16656   --f7-notification-subtitle-text-transform: none;
16657   --f7-notification-subtitle-line-height: 1.35;
16658   --f7-notification-text-text-transform: none;
16659   --f7-notification-text-font-weight: 400;
16660 }
16661 .ios {
16662   --f7-notification-margin: 8px;
16663   --f7-notification-padding: 10px;
16664   --f7-notification-border-radius: 12px;
16665   --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
16666   --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
16667   --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
16668   --f7-notification-icon-size: 20px;
16669   --f7-notification-title-color: #000;
16670   --f7-notification-title-font-size: 13px;
16671   --f7-notification-title-text-transform: uppercase;
16672   --f7-notification-title-line-height: 1.4;
16673   --f7-notification-title-font-weight: 400;
16674   --f7-notification-title-letter-spacing: 0.02em;
16675   --f7-notification-title-right-color: #444a51;
16676   --f7-notification-title-right-font-size: 13px;
16677   --f7-notification-subtitle-color: #000;
16678   --f7-notification-subtitle-font-size: 15px;
16679   --f7-notification-subtitle-font-weight: 600;
16680   --f7-notification-text-color: #000;
16681   --f7-notification-text-font-size: 15px;
16682   --f7-notification-text-line-height: 1.2;
16683 }
16684 .md {
16685   --f7-notification-margin: 0px;
16686   --f7-notification-padding: 16px;
16687   --f7-notification-border-radius: 0px;
16688   --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
16689   --f7-notification-bg-color: #fff;
16690   --f7-notification-icon-size: 16px;
16691   --f7-notification-title-color: var(--f7-theme-color);
16692   --f7-notification-title-font-size: 12px;
16693   --f7-notification-title-text-transform: none;
16694   --f7-notification-title-line-height: 1;
16695   --f7-notification-title-font-weight: 400;
16696   --f7-notification-title-right-color: #757575;
16697   --f7-notification-title-right-font-size: 12px;
16698   --f7-notification-subtitle-color: #212121;
16699   --f7-notification-subtitle-font-size: 14px;
16700   --f7-notification-subtitle-font-weight: 400;
16701   --f7-notification-text-color: #757575;
16702   --f7-notification-text-font-size: 14px;
16703   --f7-notification-text-line-height: 1.35;
16704 }
16705 .aurora {
16706   --f7-notification-margin: 10px;
16707   --f7-notification-padding: 10px;
16708   --f7-notification-border-radius: 4px;
16709   --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
16710   --f7-notification-bg-color: #fff;
16711   --f7-notification-icon-size: 18px;
16712   --f7-notification-title-color: #000;
16713   --f7-notification-title-font-size: 13px;
16714   --f7-notification-title-text-transform: uppercase;
16715   --f7-notification-title-line-height: 1.4;
16716   --f7-notification-title-font-weight: 500;
16717   --f7-notification-title-letter-spacing: 0.02em;
16718   --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
16719   --f7-notification-title-right-font-size: 13px;
16720   --f7-notification-subtitle-color: #000;
16721   --f7-notification-subtitle-font-size: 12px;
16722   --f7-notification-subtitle-font-weight: 600;
16723   --f7-notification-text-color: #000;
16724   --f7-notification-text-font-size: 12px;
16725   --f7-notification-text-line-height: 1.2;
16726 }
16727 .notification {
16728   position: absolute;
16729   left: var(--f7-notification-margin);
16730   top: var(--f7-notification-margin);
16731   width: calc(100% - var(--f7-notification-margin) * 2);
16732   z-index: 20000;
16733   font-size: 14px;
16734   margin: 0;
16735   border: none;
16736   display: none;
16737   box-sizing: border-box;
16738   transition-property: transform;
16739   direction: ltr;
16740   max-width: var(--f7-notification-max-width);
16741   padding: var(--f7-notification-padding);
16742   border-radius: var(--f7-notification-border-radius);
16743   box-shadow: var(--f7-notification-box-shadow);
16744   background: var(--f7-notification-bg-color);
16745   margin-top: var(--f7-statusbar-height);
16746   --f7-link-highlight-color: var(--f7-link-highlight-black);
16747   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
16748 }
16749 @media (min-width: 568px) {
16750   .notification {
16751     left: 50%;
16752     width: var(--f7-notification-max-width);
16753     margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
16754   }
16755 }
16756 .notification-title {
16757   color: var(--f7-notification-title-color, var(--f7-theme-color));
16758   font-size: var(--f7-notification-title-font-size);
16759   text-transform: var(--f7-notification-title-text-transform);
16760   line-height: var(--f7-notification-title-line-height);
16761   font-weight: var(--f7-notification-title-font-weight);
16762   letter-spacing: var(--f7-notification-title-letter-spacing);
16763 }
16764 .notification-subtitle {
16765   color: var(--f7-notification-subtitle-color);
16766   font-size: var(--f7-notification-subtitle-font-size);
16767   text-transform: var(--f7-notification-subtitle-text-transform);
16768   line-height: var(--f7-notification-subtitle-line-height);
16769   font-weight: var(--f7-notification-subtitle-font-weight);
16770 }
16771 .notification-text {
16772   color: var(--f7-notification-text-color);
16773   font-size: var(--f7-notification-text-font-size);
16774   text-transform: var(--f7-notification-text-text-transform);
16775   line-height: var(--f7-notification-text-line-height);
16776   font-weight: var(--f7-notification-text-font-weight);
16777 }
16778 .notification-title-right-text {
16779   color: var(--f7-notification-title-right-color);
16780   font-size: var(--f7-notification-title-right-font-size);
16781 }
16782 .notification-icon {
16783   font-size: 0;
16784   line-height: var(--f7-notification-icon-size);
16785 }
16786 .notification-icon i,
16787 .notification-icon {
16788   width: var(--f7-notification-icon-size) !important;
16789   height: var(--f7-notification-icon-size) !important;
16790 }
16791 .notification-icon i {
16792   font-size: var(--f7-notification-icon-size);
16793 }
16794 .notification-header {
16795   display: flex;
16796   justify-content: flex-start;
16797   align-items: center;
16798 }
16799 .notification-close-button {
16800   margin-left: auto;
16801   cursor: pointer;
16802   position: relative;
16803 }
16804 .notification-close-button:after {
16805   font-family: 'framework7-core-icons';
16806   font-weight: normal;
16807   font-style: normal;
16808   line-height: 1;
16809   letter-spacing: normal;
16810   text-transform: none;
16811   white-space: nowrap;
16812   word-wrap: normal;
16813   direction: ltr;
16814   -webkit-font-smoothing: antialiased;
16815   text-rendering: optimizeLegibility;
16816   -moz-osx-font-smoothing: grayscale;
16817   -moz-font-feature-settings: "liga";
16818        font-feature-settings: "liga";
16819   display: block;
16820   width: 100%;
16821   height: 100%;
16822   font-size: 20px;
16823   position: absolute;
16824   left: 50%;
16825   top: 50%;
16826   text-align: center;
16827 }
16828 .ios .notification {
16829   transition-duration: 450ms;
16830   transform: translate3d(0%, -200%, 0);
16831 }
16832 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
16833   .ios .notification {
16834     background: var(--f7-notification-translucent-bg-color-ios);
16835     -webkit-backdrop-filter: blur(10px);
16836             backdrop-filter: blur(10px);
16837   }
16838 }
16839 .ios .notification.modal-in {
16840   transform: translate3d(0%, 0%, 0);
16841   opacity: 1;
16842 }
16843 .ios .notification.modal-out {
16844   transform: translate3d(0%, -200%, 0);
16845 }
16846 .ios .notification-icon {
16847   margin-right: 8px;
16848 }
16849 .ios .notification-header + .notification-content {
16850   margin-top: 10px;
16851 }
16852 .ios .notification-title-right-text {
16853   margin-right: 6px;
16854   margin-left: auto;
16855 }
16856 .ios .notification-title-right-text + .notification-close-button {
16857   margin-left: 10px;
16858 }
16859 .ios .notification-close-button {
16860   font-size: 14px;
16861   width: 20px;
16862   height: 20px;
16863   opacity: 0.3;
16864   transition-duration: 300ms;
16865 }
16866 .ios .notification-close-button.active-state {
16867   transition-duration: 0ms;
16868   opacity: 0.1;
16869 }
16870 .ios .notification-close-button:after {
16871   color: #000;
16872   content: 'notification_close_ios';
16873   font-size: 0.65em;
16874   line-height: 44px;
16875   width: 44px;
16876   height: 44px;
16877   margin-left: -22px;
16878   margin-top: -22px;
16879 }
16880 .md .notification {
16881   transform: translate3d(0, -150%, 0);
16882 }
16883 .md .notification.modal-in {
16884   transition-duration: 0ms;
16885   animation: notification-md-in 400ms ease-out;
16886   transform: translate3d(0, 0%, 0);
16887 }
16888 .md .notification.modal-in.notification-transitioning {
16889   transition-duration: 200ms;
16890 }
16891 .md .notification.modal-out {
16892   animation: none;
16893   transition-duration: 200ms;
16894   transition-timing-function: ease-in;
16895   transform: translate3d(0, -150%, 0);
16896 }
16897 .md .notification-icon {
16898   margin-right: 8px;
16899 }
16900 .md .notification-subtitle + .notification-text {
16901   margin-top: 2px;
16902 }
16903 .md .notification-header + .notification-content {
16904   margin-top: 6px;
16905 }
16906 .md .notification-title-right-text {
16907   margin-left: 4px;
16908 }
16909 .md .notification-title-right-text:before {
16910   content: '';
16911   width: 3px;
16912   height: 3px;
16913   border-radius: 50%;
16914   display: inline-block;
16915   vertical-align: middle;
16916   margin-right: 4px;
16917   background: var(--f7-notification-title-right-color);
16918 }
16919 .md .notification-close-button {
16920   width: 16px;
16921   height: 16px;
16922   transition-duration: 300ms;
16923 }
16924 .md .notification-close-button:before {
16925   content: '';
16926   width: 152%;
16927   height: 152%;
16928   position: absolute;
16929   left: -26%;
16930   top: -26%;
16931   background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
16932   background-repeat: no-repeat;
16933   background-position: center;
16934   background-size: 100% 100%;
16935   opacity: 0;
16936   pointer-events: none;
16937   transition-duration: 600ms;
16938 }
16939 .md .notification-close-button.active-state:before {
16940   opacity: 1;
16941   transition-duration: 150ms;
16942 }
16943 .md .notification-close-button:before,
16944 .md .notification-close-button:after {
16945   width: 48px;
16946   height: 48px;
16947   left: 50%;
16948   top: 50%;
16949   margin-left: -24px;
16950   margin-top: -24px;
16951 }
16952 .md .notification-close-button:after {
16953   color: #737373;
16954   content: 'delete_md';
16955   line-height: 48px;
16956   font-size: 14px;
16957 }
16958 @keyframes notification-md-in {
16959   0% {
16960     transform: translate3d(0, -150%, 0);
16961   }
16962   50% {
16963     transform: translate3d(0, 10%, 0);
16964   }
16965   100% {
16966     transform: translate3d(0, 0%, 0);
16967   }
16968 }
16969 .aurora .notification {
16970   transition-duration: 450ms;
16971   transform: translate3d(0%, -200%, 0);
16972 }
16973 .aurora .notification.modal-in {
16974   transform: translate3d(0%, 0%, 0);
16975   opacity: 1;
16976 }
16977 .aurora .notification.modal-out {
16978   transform: translate3d(0%, -200%, 0);
16979 }
16980 .aurora .notification-icon {
16981   margin-right: 10px;
16982 }
16983 .aurora .notification-header + .notification-content {
16984   margin-top: 10px;
16985 }
16986 .aurora .notification-title-right-text {
16987   margin-right: 0px;
16988   margin-left: auto;
16989 }
16990 .aurora .notification-title-right-text + .notification-close-button {
16991   margin-left: 10px;
16992 }
16993 .aurora .notification-close-button {
16994   font-size: 14px;
16995   width: 16px;
16996   height: 16px;
16997   opacity: 0.4;
16998   transition-duration: 300ms;
16999 }
17000 .aurora .notification-close-button.active-state {
17001   transition-duration: 0ms;
17002   opacity: 0.6;
17003 }
17004 .aurora .notification-close-button:after {
17005   color: #000;
17006   content: 'notification_close_ios';
17007   font-size: 0.5em;
17008   line-height: 38px;
17009   width: 38px;
17010   height: 38px;
17011   margin-left: -19px;
17012   margin-top: -19px;
17013 }
17014 /* === Autocomplete === */
17015 :root {
17016   --f7-autocomplete-dropdown-bg-color: #fff;
17017   --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
17018   --f7-autocomplete-dropdown-preloader-size: 20px;
17019   /*
17020   --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
17021   */
17022 }
17023 .ios {
17024   --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
17025   --f7-autocomplete-dropdown-text-color: #000;
17026   --f7-autocomplete-dropdown-text-matching-color: #000;
17027   --f7-autocomplete-dropdown-text-matching-font-weight: 600;
17028   --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
17029 }
17030 .ios .theme-dark,
17031 .ios.theme-dark {
17032   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17033   --f7-autocomplete-dropdown-text-color: #fff;
17034   --f7-autocomplete-dropdown-text-matching-color: #fff;
17035 }
17036 .md {
17037   --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
17038   --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
17039   --f7-autocomplete-dropdown-text-matching-color: #212121;
17040   --f7-autocomplete-dropdown-text-matching-font-weight: 400;
17041   --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
17042 }
17043 .md .theme-dark,
17044 .md.theme-dark {
17045   --f7-autocomplete-dropdown-bg-color: #1c1c1d;
17046   --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
17047   --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
17048 }
17049 .aurora {
17050   --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
17051   --f7-autocomplete-dropdown-text-color: #000;
17052   --f7-autocomplete-dropdown-text-matching-color: #000;
17053   --f7-autocomplete-dropdown-text-matching-font-weight: 700;
17054   --f7-autocomplete-dropdown-font-size: 13px;
17055 }
17056 .aurora .theme-dark,
17057 .aurora.theme-dark {
17058   --f7-autocomplete-dropdown-bg-color: #1c1c1c;
17059   --f7-autocomplete-dropdown-text-color: #fff;
17060   --f7-autocomplete-dropdown-text-matching-color: #fff;
17061 }
17062 .autocomplete-page .autocomplete-found {
17063   display: block;
17064 }
17065 .autocomplete-page .autocomplete-not-found {
17066   display: none;
17067 }
17068 .autocomplete-page .autocomplete-values {
17069   display: block;
17070 }
17071 .autocomplete-page .list ul:empty {
17072   display: none;
17073 }
17074 .autocomplete-preloader:not(.autocomplete-preloader-visible) {
17075   visibility: hidden;
17076 }
17077 .autocomplete-preloader:not(.autocomplete-preloader-visible),
17078 .autocomplete-preloader:not(.autocomplete-preloader-visible) * {
17079   animation: none;
17080 }
17081 .autocomplete-dropdown {
17082   background: var(--f7-autocomplete-dropdown-bg-color);
17083   box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
17084   box-sizing: border-box;
17085   position: absolute;
17086   z-index: 500;
17087   width: 100%;
17088   right: 0;
17089 }
17090 .autocomplete-dropdown .autocomplete-dropdown-inner {
17091   position: relative;
17092   will-change: scroll-position;
17093   overflow: auto;
17094   -webkit-overflow-scrolling: touch;
17095   height: 100%;
17096   z-index: 1;
17097 }
17098 .autocomplete-dropdown .autocomplete-preloader {
17099   display: none;
17100   position: absolute;
17101   bottom: 100%;
17102   width: var(--f7-autocomplete-dropdown-preloader-size);
17103   height: var(--f7-autocomplete-dropdown-preloader-size);
17104 }
17105 .autocomplete-dropdown .autocomplete-preloader-visible {
17106   display: block;
17107 }
17108 .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17109   color: var(--f7-autocomplete-dropdown-placeholder-color);
17110 }
17111 .autocomplete-dropdown .list {
17112   margin: 0;
17113   color: var(--f7-autocomplete-dropdown-text-color);
17114   font-size: var(--f7-autocomplete-dropdown-font-size);
17115 }
17116 .autocomplete-dropdown .list b {
17117   color: var(--f7-autocomplete-dropdown-text-matching-color);
17118   font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
17119 }
17120 .autocomplete-dropdown .list ul {
17121   background: none !important;
17122 }
17123 .autocomplete-dropdown .list ul:before {
17124   display: none !important;
17125 }
17126 .autocomplete-dropdown .list ul:after {
17127   display: none !important;
17128 }
17129 .autocomplete-dropdown .autocomplete-dropdown-selected {
17130   background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
17131 }
17132 .searchbar-input-wrap .autocomplete-dropdown {
17133   background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
17134   border-radius: var(--f7-searchbar-input-border-radius);
17135 }
17136 .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
17137   color: var(--f7-searchbar-placeholder-color);
17138 }
17139 .searchbar-input-wrap .autocomplete-dropdown li:last-child {
17140   border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
17141   position: relative;
17142   overflow: hidden;
17143 }
17144 .searchbar-input-wrap .autocomplete-dropdown .item-content {
17145   padding-right: var(--f7-searchbar-input-padding-horizontal);
17146 }
17147 .list .item-content-dropdown-expanded .item-title.item-label {
17148   width: 0;
17149   flex-shrink: 10;
17150   overflow: hidden;
17151 }
17152 .list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
17153   margin-right: 0;
17154 }
17155 .list .item-content-dropdown-expanded .item-input-wrap {
17156   width: 100%;
17157 }
17158 .ios .autocomplete-dropdown .autocomplete-preloader {
17159   left: 15px;
17160   margin-bottom: 12px;
17161 }
17162 .ios .searchbar-input-wrap .autocomplete-dropdown {
17163   margin-top: calc(-1 * var(--f7-searchbar-input-height));
17164   top: 100%;
17165   z-index: 20;
17166 }
17167 .ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17168   padding-top: var(--f7-searchbar-input-height);
17169 }
17170 .md .autocomplete-page .navbar .autocomplete-preloader {
17171   margin-left: 8px;
17172 }
17173 .md .autocomplete-popup .navbar .autocomplete-preloader {
17174   margin-right: 8px;
17175   margin-left: 16px;
17176 }
17177 .md .autocomplete-dropdown .autocomplete-preloader {
17178   left: 16px;
17179   margin-bottom: 8px;
17180 }
17181 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
17182 .md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
17183   border-width: 3px;
17184 }
17185 .aurora .autocomplete-dropdown .autocomplete-preloader {
17186   left: 15px;
17187   margin-bottom: 2px;
17188 }
17189 .aurora .searchbar-input-wrap .autocomplete-dropdown {
17190   margin-top: calc(-1 * var(--f7-searchbar-input-height));
17191   top: 100%;
17192   z-index: 20;
17193 }
17194 .aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
17195   padding-top: var(--f7-searchbar-input-height);
17196 }
17197 /* === Tooltip === */
17198 :root {
17199   --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
17200   --f7-tooltip-text-color: #fff;
17201   --f7-tooltip-border-radius: 4px;
17202   --f7-tooltip-padding: 8px 16px;
17203   --f7-tooltip-font-size: 14px;
17204   --f7-tooltip-font-weight: 500;
17205   --f7-tooltip-desktop-padding: 6px 8px;
17206   --f7-tooltip-desktop-font-size: 12px;
17207 }
17208 .tooltip {
17209   position: absolute;
17210   z-index: 20000;
17211   background: var(--f7-tooltip-bg-color);
17212   border-radius: var(--f7-tooltip-border-radius);
17213   padding: var(--f7-tooltip-padding);
17214   color: var(--f7-tooltip-text-color);
17215   font-size: var(--f7-tooltip-font-size);
17216   font-weight: var(--f7-tooltip-font-weight);
17217   box-sizing: border-box;
17218   line-height: 1.2;
17219   opacity: 0;
17220   transform: scale(0.9);
17221   transition-duration: 150ms;
17222   transition-property: opacity, transform;
17223   z-index: 99000;
17224 }
17225 .tooltip.tooltip-in {
17226   transform: scale(1);
17227   opacity: 1;
17228 }
17229 .tooltip.tooltip-out {
17230   opacity: 0;
17231   transform: scale(1);
17232 }
17233 .device-desktop .tooltip {
17234   font-size: var(--f7-tooltip-desktop-font-size);
17235   padding: var(--f7-tooltip-desktop-padding);
17236 }
17237 /* === Gauge === */
17238 .gauge {
17239   position: relative;
17240   text-align: center;
17241   margin-left: auto;
17242   margin-right: auto;
17243   display: inline-block;
17244 }
17245 .gauge-svg,
17246 .gauge svg {
17247   max-width: 100%;
17248   height: auto;
17249 }
17250 .gauge-svg circle,
17251 .gauge svg circle,
17252 .gauge-svg path,
17253 .gauge svg path {
17254   transition-duration: 400ms;
17255 }
17256 /* === Skeleton === */
17257 :root {
17258   --f7-skeleton-color: #ccc;
17259 }
17260 .theme-dark {
17261   --f7-skeleton-color: #515151;
17262 }
17263 .skeleton-text {
17264   font-family: 'framework7-skeleton' !important;
17265 }
17266 .skeleton-text,
17267 .skeleton-text * {
17268   color: var(--f7-skeleton-color) !important;
17269   font-weight: normal !important;
17270   font-style: normal !important;
17271   letter-spacing: -0.015em !important;
17272 }
17273 .skeleton-block {
17274   height: 1em;
17275   background: var(--f7-skeleton-color) !important;
17276   width: 100%;
17277 }
17278 .skeleton-effect-fade {
17279   animation: skeleton-effect-fade 1s infinite;
17280 }
17281 .skeleton-effect-blink {
17282   -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
17283   mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
17284   -webkit-mask-size: 200% 100%;
17285   mask-size: 200% 100%;
17286   -webkit-mask-repeat: repeat;
17287   mask-repeat: repeat;
17288   -webkit-mask-position: 50% top;
17289   mask-position: 50% top;
17290   animation: skeleton-effect-blink 1s infinite;
17291 }
17292 .skeleton-effect-pulse {
17293   animation: skeleton-effect-pulse 1s infinite;
17294 }
17295 @keyframes skeleton-effect-fade {
17296   0% {
17297     opacity: 1;
17298   }
17299   50% {
17300     opacity: 0.2;
17301   }
17302   100% {
17303     opacity: 1;
17304   }
17305 }
17306 @keyframes skeleton-effect-blink {
17307   0% {
17308     -webkit-mask-position: 50% top;
17309     mask-position: 50% top;
17310   }
17311   100% {
17312     -webkit-mask-position: -150% top;
17313     mask-position: -150% top;
17314   }
17315 }
17316 @keyframes skeleton-effect-pulse {
17317   0% {
17318     transform: scale(1);
17319   }
17320   40% {
17321     transform: scale(1);
17322   }
17323   50% {
17324     transform: scale(0.975);
17325   }
17326   100% {
17327     transform: scale(1);
17328   }
17329 }
17330 /* === Menu === */
17331 :root {
17332   --f7-menu-text-color: #fff;
17333   --f7-menu-font-size: 16px;
17334   --f7-menu-font-weight: 500;
17335   --f7-menu-line-height: 1.2;
17336   --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
17337   --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
17338   --f7-menu-item-padding-horizontal: 12px;
17339   --f7-menu-item-spacing: 6px;
17340   --f7-menu-item-height: 40px;
17341   --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
17342   --f7-menu-item-border-radius: 8px;
17343   /*
17344   --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
17345   */
17346   --f7-menu-dropdown-item-height: 28px;
17347   --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
17348   --f7-menu-dropdown-padding-vertical: 6px;
17349   /*
17350   --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
17351   */
17352 }
17353 .aurora {
17354   --f7-menu-font-size: 13px;
17355   --f7-menu-item-height: 28px;
17356   --f7-menu-dropdown-item-height: 24px;
17357   --f7-menu-item-border-radius: 5px;
17358   --f7-menu-item-padding-horizontal: 10px;
17359 }
17360 .menu {
17361   z-index: 1000;
17362   position: relative;
17363   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
17364 }
17365 .menu-inner {
17366   display: flex;
17367   justify-content: flex-start;
17368   align-items: flex-start;
17369   padding-left: var(--f7-menu-item-spacing);
17370   padding-right: var(--f7-menu-item-spacing);
17371 }
17372 .menu-inner:after {
17373   content: '';
17374   width: var(--f7-menu-item-spacing);
17375   height: 100%;
17376   flex-shrink: 0;
17377 }
17378 .menu-item {
17379   height: var(--f7-menu-item-height);
17380   min-width: var(--f7-menu-item-height);
17381   flex-shrink: 0;
17382   background: var(--f7-menu-bg-color);
17383   color: var(--f7-menu-text-color);
17384   border-radius: var(--f7-menu-item-border-radius);
17385   position: relative;
17386   box-sizing: border-box;
17387   font-size: var(--f7-menu-font-size);
17388   font-weight: var(--f7-menu-font-weight);
17389   cursor: pointer;
17390   margin-right: var(--f7-menu-item-spacing);
17391 }
17392 .menu-item:first-child {
17393   margin-right: 0;
17394 }
17395 .menu-item.active-state:not(.menu-item-dropdown-opened) {
17396   background-color: rgba(0, 0, 0, 0.7);
17397 }
17398 .menu-item.icon-only {
17399   padding-left: 0;
17400   padding-right: 0;
17401 }
17402 .menu-item-content {
17403   display: flex;
17404   justify-content: center;
17405   align-items: center;
17406   padding: 0 var(--f7-menu-item-padding-horizontal);
17407   height: 100%;
17408   box-sizing: border-box;
17409   width: 100%;
17410   overflow: hidden;
17411   border-radius: var(--f7-menu-item-border-radius);
17412   position: relative;
17413 }
17414 .menu-item-content.icon-only,
17415 .icon-only .menu-item-content {
17416   padding-left: 0;
17417   padding-right: 0;
17418 }
17419 .menu-item-dropdown .menu-item-content:after {
17420   content: '';
17421   position: absolute;
17422   width: 20px;
17423   height: 2px;
17424   left: 50%;
17425   transform: translateX(-50%);
17426   bottom: 4px;
17427   background: var(--f7-menu-item-dropdown-icon-color);
17428   border-radius: 4px;
17429 }
17430 .menu-dropdown {
17431   opacity: 0;
17432   visibility: hidden;
17433   pointer-events: none;
17434   cursor: auto;
17435   height: 10px;
17436   background: var(--f7-menu-bg-color);
17437   position: relative;
17438 }
17439 .menu-dropdown-content {
17440   position: absolute;
17441   top: 100%;
17442   border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
17443   padding-top: var(--f7-menu-dropdown-padding-vertical);
17444   padding-bottom: var(--f7-menu-dropdown-padding-vertical);
17445   box-sizing: border-box;
17446   background: var(--f7-menu-bg-color);
17447   will-change: scroll-position;
17448   overflow: auto;
17449   -webkit-overflow-scrolling: touch;
17450   min-width: calc(100% + 24px);
17451 }
17452 .menu-dropdown-link,
17453 .menu-dropdown-item {
17454   display: flex;
17455   justify-content: space-between;
17456   align-items: center;
17457   padding-left: var(--f7-menu-item-padding-horizontal);
17458   padding-right: var(--f7-menu-item-padding-horizontal);
17459   min-height: var(--f7-menu-dropdown-item-height);
17460   line-height: var(--f7-menu-line-height);
17461   font-size: var(--f7-menu-font-size);
17462   color: var(--f7-menu-text-color);
17463   font-weight: var(--f7-menu-font-weight);
17464   white-space: nowrap;
17465   min-width: 100px;
17466 }
17467 .menu-dropdown-link i,
17468 .menu-dropdown-item i,
17469 .menu-dropdown-link i.icon,
17470 .menu-dropdown-item i.icon,
17471 .menu-dropdown-link i.f7-icons,
17472 .menu-dropdown-item i.f7-icons,
17473 .menu-dropdown-link i.material-icons,
17474 .menu-dropdown-item i.material-icons {
17475   font-size: 20px;
17476 }
17477 .menu-dropdown-link.active-state {
17478   background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
17479   color: var(--f7-menu-text-color);
17480 }
17481 .menu-dropdown-divider {
17482   height: 1px;
17483   margin-top: 2px;
17484   margin-bottom: 2px;
17485   background: var(--f7-menu-dropdown-divider-color);
17486 }
17487 .menu-item-dropdown-opened {
17488   border-bottom-left-radius: 0px;
17489   border-bottom-right-radius: 0px;
17490 }
17491 .menu-item-dropdown-opened .menu-item-content:after {
17492   opacity: 0;
17493 }
17494 .menu-item-dropdown-opened .menu-dropdown {
17495   opacity: 1;
17496   visibility: visible;
17497   pointer-events: auto;
17498 }
17499 .menu-item-dropdown-left .menu-dropdown:after,
17500 .menu-item-dropdown-center .menu-dropdown:after,
17501 .menu-dropdown-left:after,
17502 .menu-dropdown-center:after {
17503   content: '';
17504   position: absolute;
17505   left: 100%;
17506   bottom: 0;
17507   width: var(--f7-menu-item-border-radius);
17508   height: var(--f7-menu-item-border-radius);
17509   background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
17510 }
17511 .menu-item-dropdown-right .menu-dropdown:before,
17512 .menu-item-dropdown-center .menu-dropdown:before,
17513 .menu-dropdown-right:before,
17514 .menu-dropdown-center:before {
17515   content: '';
17516   position: absolute;
17517   right: 100%;
17518   bottom: 0;
17519   width: var(--f7-menu-item-border-radius);
17520   height: var(--f7-menu-item-border-radius);
17521   background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
17522 }
17523 .menu-item-dropdown-left .menu-dropdown-content,
17524 .menu-dropdown-left .menu-dropdown-content {
17525   left: 0;
17526   border-top-left-radius: 0px;
17527 }
17528 .menu-item-dropdown-right .menu-dropdown-content,
17529 .menu-dropdown-right .menu-dropdown-content {
17530   right: 0;
17531   border-top-right-radius: 0px;
17532 }
17533 .menu-item-dropdown-center .menu-dropdown-content,
17534 .menu-dropdown-center .menu-dropdown-content {
17535   left: 50%;
17536   min-width: calc(100% + 24px + 24px);
17537   transform: translateX(-50%);
17538 }
17539 /* === Color Picker === */
17540 :root {
17541   --f7-color-picker-sheet-bg-color: #fff;
17542   --f7-color-picker-popup-bg-color: #fff;
17543   --f7-color-picker-popover-width: 350px;
17544   --f7-color-picker-slider-size: 6px;
17545   --f7-color-picker-slider-knob-size: 16px;
17546   --f7-color-picker-bar-size: 50px;
17547   --f7-color-picker-bar-min-height: 260px;
17548   --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
17549   --f7-color-picker-value-width: 64px;
17550   --f7-color-picker-value-height: 32px;
17551   --f7-color-picker-value-font-size: 16px;
17552   --f7-color-picker-value-border-radius: 4px;
17553   --f7-color-picker-hex-value-width: 84px;
17554   --f7-color-picker-label-font-size: 14px;
17555   --f7-color-picker-label-width: 10px;
17556   --f7-color-picker-label-height: 14px;
17557   --f7-color-picker-sb-spectrum-height: 260px;
17558   --f7-color-picker-sb-spectrum-handle-size: 16px;
17559   --f7-color-picker-wheel-width: 330px;
17560   --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
17561   --f7-color-picker-group-value-bg-color: #fff;
17562   --f7-color-picker-palette-value-width: 36px;
17563   --f7-color-picker-palette-value-height: 36px;
17564   --f7-color-picker-initial-current-color-height: 40px;
17565   --f7-color-picker-initial-current-color-border-radius: 4px;
17566 }
17567 :root .theme-dark,
17568 :root.theme-dark {
17569   --f7-color-picker-sheet-bg-color: #171717;
17570   --f7-color-picker-popup-bg-color: #171717;
17571   --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
17572   --f7-color-picker-group-bg-color: #000;
17573   --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
17574 }
17575 .color-picker {
17576   overflow: hidden;
17577   width: 100%;
17578   display: flex;
17579   flex-direction: column;
17580 }
17581 .color-picker.color-picker-inline,
17582 .color-picker-popover .color-picker,
17583 .color-picker-popup .color-picker {
17584   position: relative;
17585 }
17586 .color-picker-sheet-modal {
17587   background: var(--f7-color-picker-sheet-bg-color);
17588 }
17589 .color-picker-sheet-modal:before {
17590   z-index: 600;
17591 }
17592 .color-picker-sheet-modal .sheet-modal-inner {
17593   margin-bottom: var(--f7-safe-area-bottom);
17594 }
17595 .color-picker-popup .page {
17596   background: var(--f7-color-picker-popup-bg-color);
17597 }
17598 .color-picker-popup .page-content {
17599   padding-bottom: var(--f7-safe-area-bottom);
17600 }
17601 .color-picker-popover .color-picker,
17602 .color-picker-popup .color-picker,
17603 .color-picker-page .color-picker {
17604   height: 100%;
17605 }
17606 .color-picker-popover .color-picker .toolbar,
17607 .color-picker-popup .color-picker .toolbar,
17608 .color-picker-page .color-picker .toolbar {
17609   position: absolute;
17610 }
17611 .color-picker-popover {
17612   width: var(--f7-color-picker-popover-width);
17613   max-width: 90vw;
17614   max-height: 80vh;
17615 }
17616 .color-picker-popover .color-picker {
17617   max-height: 80vh;
17618 }
17619 .color-picker-popover .toolbar-top {
17620   border-top-left-radius: var(--f7-popover-border-radius);
17621   border-top-right-radius: var(--f7-popover-border-radius);
17622 }
17623 .color-picker-popover .color-picker-module-palette {
17624   overflow: hidden;
17625   flex-shrink: 0;
17626 }
17627 .color-picker-popover .color-picker-module-palette:first-child {
17628   border-top-left-radius: var(--f7-popover-border-radius);
17629   border-top-right-radius: var(--f7-popover-border-radius);
17630 }
17631 .color-picker-popover .color-picker-module-palette:last-child {
17632   border-bottom-left-radius: var(--f7-popover-border-radius);
17633   border-bottom-right-radius: var(--f7-popover-border-radius);
17634 }
17635 .color-picker-popover .color-picker-module-palette:first-child:last-child {
17636   border-radius: var(--f7-popover-border-radius);
17637 }
17638 .color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
17639   border-top-left-radius: 0;
17640   border-top-right-radius: 0;
17641 }
17642 .color-picker-popup .page-content,
17643 .color-picker-popover .page-content,
17644 .color-picker-sheet-modal .page-content,
17645 .color-picker-page .page-content {
17646   display: flex;
17647   justify-content: flex-start;
17648   align-items: stretch;
17649   flex-direction: column;
17650   overflow-x: hidden;
17651 }
17652 .color-picker-module {
17653   margin-top: 5px;
17654 }
17655 .color-picker-module:last-child {
17656   margin-bottom: 5px;
17657 }
17658 .color-picker-module-sb-spectrum,
17659 .color-picker-module-hs-spectrum {
17660   margin-left: 10px;
17661   margin-right: 10px;
17662 }
17663 .color-picker-module-sb-spectrum:first-child,
17664 .color-picker-module-hs-spectrum:first-child {
17665   margin-top: 10px;
17666 }
17667 .color-picker-module-sb-spectrum .color-picker-sb-spectrum,
17668 .color-picker-module-hs-spectrum .color-picker-sb-spectrum,
17669 .color-picker-module-sb-spectrum .color-picker-hs-spectrum,
17670 .color-picker-module-hs-spectrum .color-picker-hs-spectrum {
17671   border-radius: 4px;
17672   height: var(--f7-color-picker-sb-spectrum-height);
17673 }
17674 .color-picker-sb-spectrum {
17675   background-color: #000;
17676   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
17677   position: relative;
17678 }
17679 .color-picker-hs-spectrum {
17680   position: relative;
17681   background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
17682 }
17683 .color-picker-hs-spectrum:after {
17684   content: '';
17685   position: absolute;
17686   left: 0;
17687   top: 0;
17688   width: 100%;
17689   height: 100%;
17690   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
17691 }
17692 .color-picker-sb-spectrum-handle,
17693 .color-picker-hs-spectrum-handle {
17694   width: 4px;
17695   height: 4px;
17696   position: absolute;
17697   left: -2px;
17698   top: -2px;
17699   z-index: 1;
17700 }
17701 .color-picker-sb-spectrum-handle:after,
17702 .color-picker-hs-spectrum-handle:after {
17703   background-color: inherit;
17704   content: '';
17705   position: absolute;
17706   width: var(--f7-color-picker-sb-spectrum-handle-size);
17707   height: var(--f7-color-picker-sb-spectrum-handle-size);
17708   border: 1px solid #fff;
17709   border-radius: 50%;
17710   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
17711   box-sizing: border-box;
17712   left: 50%;
17713   top: 50%;
17714   transform: translate(-50%, -50%);
17715   transition: 150ms;
17716   transition-property: transform;
17717   transform-origin: center;
17718 }
17719 .color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
17720 .color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
17721 .color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
17722 .color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
17723   transform: scale(1.5) translate(-33.333%, -33.333%);
17724 }
17725 .color-picker-module-wheel {
17726   margin-left: 10px;
17727   margin-right: 10px;
17728 }
17729 .color-picker-wheel {
17730   position: relative;
17731   width: var(--f7-color-picker-wheel-width);
17732   max-width: 100%;
17733   height: auto;
17734   font-size: 0;
17735   margin-left: auto;
17736   margin-right: auto;
17737 }
17738 .color-picker-wheel svg {
17739   width: 100%;
17740   height: auto;
17741 }
17742 .color-picker-wheel .color-picker-wheel-handle {
17743   width: calc(100% / 6);
17744   height: calc(100% / 6);
17745   position: absolute;
17746   box-sizing: border-box;
17747   border: 2px solid #fff;
17748   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
17749   background: red;
17750   border-radius: 50%;
17751   left: 0;
17752   top: 0;
17753 }
17754 .color-picker-wheel .color-picker-sb-spectrum {
17755   width: 45%;
17756   height: 45%;
17757   left: 50%;
17758   top: 50%;
17759   transform: translate3d(-50%, -50%, 0);
17760   position: absolute;
17761 }
17762 .color-picker-slider-wrap {
17763   display: flex;
17764   align-items: center;
17765   margin-bottom: 2px;
17766 }
17767 .color-picker-slider-wrap + .color-picker-slider-wrap {
17768   margin-top: 5px;
17769 }
17770 .color-picker-hex-wrap {
17771   justify-content: space-between;
17772   display: flex;
17773   align-items: center;
17774 }
17775 .color-picker-slider-label,
17776 .color-picker-hex-label {
17777   font-size: var(--f7-color-picker-label-font-size);
17778   width: var(--f7-color-picker-label-size);
17779   flex-shrink: 0;
17780   margin-left: 12px;
17781 }
17782 .color-picker-hex-label {
17783   width: auto;
17784 }
17785 .color-picker-bar-value,
17786 .color-picker-slider-value,
17787 .color-picker-hex-value {
17788   width: var(--f7-color-picker-value-width);
17789   height: var(--f7-color-picker-value-height);
17790   background: var(--f7-color-picker-value-bg-color);
17791   border-radius: var(--f7-color-picker-value-border-radius);
17792   text-align: center;
17793   font-size: var(--f7-color-picker-value-font-size);
17794   display: flex;
17795   justify-content: center;
17796   align-items: center;
17797   flex-shrink: 0;
17798   margin-right: 10px;
17799 }
17800 .color-picker-bar-value input,
17801 .color-picker-slider-value input,
17802 .color-picker-hex-value input {
17803   width: 100%;
17804   height: 100%;
17805   -webkit-appearance: none;
17806      -moz-appearance: none;
17807           appearance: none;
17808   border: none;
17809   outline: 0;
17810   background: transparent;
17811   color: inherit;
17812   font-family: inherit;
17813   font-size: inherit;
17814   text-align: center;
17815   display: block;
17816   border-radius: 4px;
17817 }
17818 .color-picker-bar-value input::-webkit-inner-spin-button,
17819 .color-picker-slider-value input::-webkit-inner-spin-button,
17820 .color-picker-hex-value input::-webkit-inner-spin-button,
17821 .color-picker-bar-value input::-webkit-outer-spin-button,
17822 .color-picker-slider-value input::-webkit-outer-spin-button,
17823 .color-picker-hex-value input::-webkit-outer-spin-button {
17824   -webkit-appearance: none;
17825   -moz-appearance: none;
17826   appearance: none;
17827   margin: 0;
17828   display: none;
17829 }
17830 .color-picker-hex-value {
17831   width: var(--f7-color-picker-hex-value-width);
17832 }
17833 .color-picker-hex-value:first-child {
17834   margin-right: auto;
17835 }
17836 .color-picker-slider {
17837   --f7-range-bar-active-bg-color: transparent;
17838   --f7-range-bar-size: var(--f7-color-picker-slider-size);
17839   --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
17840   --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
17841   --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
17842 }
17843 .color-picker-slider .range-knob {
17844   transition-duration: 200ms;
17845   transition-property: transform;
17846 }
17847 .color-picker-slider .range-knob:after {
17848   width: 30px;
17849   height: 30px;
17850   margin-left: -15px;
17851   margin-top: -15px;
17852 }
17853 .color-picker-slider .range-knob-active-state .range-knob {
17854   transform: scale(1.5);
17855 }
17856 .md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
17857   background: var(--f7-range-knob-color) !important;
17858   border: none;
17859 }
17860 .color-picker-module-rgb-bars {
17861   display: flex;
17862   justify-content: space-around;
17863   justify-content: space-evenly;
17864   align-items: stretch;
17865   height: 100%;
17866   min-height: var(--f7-color-picker-bar-min-height);
17867   padding-bottom: 10px;
17868   padding-top: 10px;
17869   box-sizing: border-box;
17870 }
17871 .color-picker-bar-wrap {
17872   display: flex;
17873   align-items: center;
17874   flex-direction: column-reverse;
17875 }
17876 .color-picker-bar {
17877   --f7-range-bar-active-bg-color: transparent;
17878   --f7-range-bar-size: var(--f7-color-picker-bar-size);
17879   --f7-range-bar-border-radius: 2px;
17880   --f7-range-knob-size: 6px;
17881   --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
17882   --f7-range-knob-color: #fff;
17883 }
17884 .color-picker-bar .range-knob {
17885   transition-duration: 0ms;
17886   transition-property: transform;
17887   border-radius: 3px;
17888 }
17889 .color-picker-bar .range-knob-wrap {
17890   height: 6px;
17891   width: calc(var(--f7-color-picker-bar-size) - 4px);
17892   margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
17893 }
17894 .color-picker-bar .range-knob-active-state .range-knob {
17895   transform: scale(1);
17896 }
17897 .md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
17898   background: var(--f7-range-knob-color) !important;
17899   border: none;
17900 }
17901 .color-picker-bar-label {
17902   font-size: var(--f7-color-picker-label-size);
17903   margin-top: 12px;
17904   line-height: 1;
17905   height: var(--f7-color-picker-label-height);
17906   flex-shrink: 0;
17907 }
17908 .color-picker-bar-value {
17909   margin-left: 0;
17910   margin-bottom: 10px;
17911 }
17912 .color-picker-slider-alpha {
17913   --f7-range-knob-color: #fff;
17914 }
17915 .color-picker-slider-alpha .range-bar {
17916   background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
17917   background-size: 100% 100%, 6px 3px, 6px 3px;
17918   background-position: 0 0, 0px 3px, 0 0;
17919   background-repeat: repeat-y, repeat-x, repeat-x;
17920 }
17921 .color-picker-slider-hue .range-bar {
17922   background-image: linear-gradient(to left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
17923 }
17924 .color-picker-slider-brightness .range-bar {
17925   background-image: linear-gradient(to left, #000, #fff);
17926 }
17927 .color-picker-module-palette {
17928   margin-top: 15px;
17929 }
17930 .color-picker-module-palette:first-child {
17931   margin-top: 0;
17932 }
17933 .color-picker-module-palette:last-child {
17934   margin-bottom: 0;
17935 }
17936 .color-picker-module-palette:first-child:last-child {
17937   margin: 0;
17938 }
17939 .color-picker-palette {
17940   display: flex;
17941   flex-wrap: wrap;
17942 }
17943 .color-picker-palette-row {
17944   width: 100%;
17945   display: flex;
17946   flex-wrap: nowrap;
17947 }
17948 .color-picker-palette-row .color-picker-palette-value {
17949   width: 100%;
17950 }
17951 .color-picker-palette-value {
17952   width: var(--f7-color-picker-palette-value-width);
17953   height: var(--f7-color-picker-palette-value-height);
17954   cursor: pointer;
17955 }
17956 .color-picker-module-initial-current-colors,
17957 .color-picker-module-current-color {
17958   margin-left: 10px;
17959   margin-right: 10px;
17960   border-radius: var(--f7-color-picker-initial-current-color-border-radius);
17961   overflow: hidden;
17962   flex-shrink: 0;
17963 }
17964 .color-picker-initial-color,
17965 .color-picker-current-color {
17966   height: var(--f7-color-picker-initial-current-color-height);
17967 }
17968 .color-picker-initial-current-colors {
17969   display: flex;
17970 }
17971 .color-picker-initial-current-colors .color-picker-initial-color,
17972 .color-picker-initial-current-colors .color-picker-current-color {
17973   width: 50%;
17974 }
17975 .color-picker-module-rgb-sliders,
17976 .color-picker-module-hsb-sliders,
17977 .color-picker-module-alpha-slider,
17978 .color-picker-module-hue-slider,
17979 .color-picker-module-brightness-slider,
17980 .color-picker-module-hex {
17981   margin-left: 10px;
17982   margin-right: 10px;
17983 }
17984 .color-picker-grouped-modules .color-picker-module-rgb-sliders,
17985 .color-picker-grouped-modules .color-picker-module-hsb-sliders,
17986 .color-picker-grouped-modules .color-picker-module-alpha-slider,
17987 .color-picker-grouped-modules .color-picker-module-hue-slider,
17988 .color-picker-grouped-modules .color-picker-module-brightness-slider,
17989 .color-picker-grouped-modules .color-picker-module-hex {
17990   background: var(--f7-color-picker-group-bg-color);
17991   padding: 5px;
17992   border-radius: 4px;
17993   margin-top: 15px;
17994   margin-left: 5px;
17995   margin-right: 5px;
17996 }
17997 .color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
17998 .color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
17999 .color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
18000 .color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
18001 .color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
18002 .color-picker-grouped-modules .color-picker-module-hex:last-child {
18003   margin-bottom: 15px;
18004 }
18005 .color-picker-grouped-modules .color-picker-slider-value,
18006 .color-picker-grouped-modules .color-picker-hex-value {
18007   background: var(--f7-color-picker-group-value-bg-color);
18008 }
18009 .color-picker-grouped-modules .color-picker-slider-label,
18010 .color-picker-grouped-modules .color-picker-hex-label {
18011   margin-right: 5px;
18012 }
18013 .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
18014 .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
18015 .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
18016 .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
18017 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
18018   margin-right: 5px;
18019 }
18020 .color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
18021 .color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
18022 .color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
18023 .color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
18024 .color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
18025   margin-left: 5px;
18026 }
18027 /* === Treeview === */
18028 :root {
18029   --f7-treeview-toggle-size: 24px;
18030   --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
18031   --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
18032   --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
18033   --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
18034   --f7-treeview-children-offset: 29px;
18035   --f7-treeview-label-font-weight: 400;
18036   --f7-treeview-label-text-color: inherit;
18037   --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
18038   /*
18039   --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
18040   */
18041   --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
18042   --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
18043 }
18044 :root .theme-dark,
18045 :root.theme-dark {
18046   --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
18047   --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
18048   --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
18049   --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
18050   --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
18051   --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
18052   --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
18053 }
18054 .ios {
18055   --f7-treeview-item-height: 34px;
18056   --f7-treeview-item-padding-left: 15px;
18057   --f7-treeview-item-padding-right: 15px;
18058   --f7-treeview-label-font-size: 17px;
18059   --f7-treeview-icon-size: 24px;
18060 }
18061 .md {
18062   --f7-treeview-item-height: 34px;
18063   --f7-treeview-item-padding-left: 16px;
18064   --f7-treeview-item-padding-right: 16px;
18065   --f7-treeview-label-font-size: 16px;
18066   --f7-treeview-icon-size: 24px;
18067 }
18068 .aurora {
18069   --f7-treeview-item-height: 28px;
18070   --f7-treeview-item-padding-left: 15px;
18071   --f7-treeview-item-padding-right: 15px;
18072   --f7-treeview-label-font-size: 14px;
18073   --f7-treeview-icon-size: 20px;
18074 }
18075 .treeview-item-root {
18076   padding-right: var(--f7-treeview-item-padding-left);
18077   padding-left: var(--f7-treeview-item-padding-right);
18078   height: var(--f7-treeview-item-height);
18079   display: flex;
18080   align-items: center;
18081   justify-content: flex-start;
18082 }
18083 .treeview-item-content {
18084   display: flex;
18085   justify-content: flex-start;
18086   align-items: center;
18087 }
18088 .treeview-item-content > i,
18089 .treeview-item-content > .f7-icons,
18090 .treeview-item-content > .material-icons {
18091   width: var(--f7-treeview-icon-size);
18092   height: var(--f7-treeview-icon-size);
18093   font-size: var(--f7-treeview-icon-size);
18094   color: var(--f7-treeview-icon-color);
18095 }
18096 .treeview-item-content:first-child {
18097   margin-right: calc(var(--f7-treeview-toggle-size) + 5px);
18098 }
18099 .treeview-item-content > * + * {
18100   margin-right: 5px;
18101 }
18102 .treeview-item-label {
18103   font-size: var(--f7-treeview-label-font-size);
18104   font-weight: var(--f7-treeview-label-font-weight);
18105   color: var(--f7-treeview-label-text-color);
18106 }
18107 .treeview-toggle {
18108   width: var(--f7-treeview-toggle-size);
18109   height: var(--f7-treeview-toggle-size);
18110   cursor: pointer;
18111   border-radius: 4px;
18112   background-color: rgba(0, 0, 0, 0);
18113   transition-duration: 200ms;
18114   position: relative;
18115   margin-left: 5px;
18116 }
18117 .treeview-toggle.active-state {
18118   background-color: var(--f7-treeview-toggle-pressed-bg-color);
18119 }
18120 .treeview-toggle:after {
18121   transition-duration: 200ms;
18122   content: '';
18123   position: absolute;
18124   left: 50%;
18125   top: 50%;
18126   width: 0;
18127   height: 0;
18128   border-top: 5px solid transparent;
18129   border-bottom: 5px solid transparent;
18130   transform: translate(-50%, -50%);
18131   border-right: 6px solid var(--f7-treeview-toggle-color);
18132 }
18133 .treeview-toggle-hidden {
18134   opacity: 0;
18135   pointer-events: none;
18136   visibility: hidden;
18137 }
18138 .treeview-preloader {
18139   --f7-preloader-size: var(--f7-treeview-toggle-size);
18140   margin-left: calc(-1 * var(--f7-treeview-toggle-size));
18141 }
18142 .treeview-item-children {
18143   display: none;
18144 }
18145 .treeview-item-opened > .treeview-item-children {
18146   display: block;
18147 }
18148 .treeview-item-opened > .treeview-item-root .treeview-toggle:after {
18149   transform: translate(-50%, -50%) rotate(-90deg);
18150 }
18151 a.treeview-item-root {
18152   color: var(--f7-treeview-label-text-color);
18153 }
18154 .treeview-item-selectable > .treeview-item-root,
18155 .treeview-item-selectable.treeview-item-root {
18156   cursor: pointer;
18157   transition-duration: 150ms;
18158 }
18159 a.treeview-item-root {
18160   transition-duration: 150ms;
18161 }
18162 a.treeview-item-root.active-state {
18163   background: var(--f7-treeview-link-pressed-bg-color);
18164 }
18165 .treeview-item-toggle > .treeview-item-root,
18166 .treeview-item-toggle.treeview-item-root {
18167   cursor: pointer;
18168 }
18169 .treeview-item-selected > .treeview-item-root,
18170 .treeview-item-selected.treeview-item-root {
18171   background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
18172 }
18173 .treeview-item .treeview-item .treeview-item-root {
18174   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
18175 }
18176 .treeview-item .treeview-item .treeview-item .treeview-item-root {
18177   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
18178 }
18179 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18180   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
18181 }
18182 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18183   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
18184 }
18185 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18186   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
18187 }
18188 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18189   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
18190 }
18191 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18192   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
18193 }
18194 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18195   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
18196 }
18197 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18198   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
18199 }
18200 .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
18201   padding-right: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
18202 }
18203 .aurora .treeview-toggle:hover {
18204   background-color: var(--f7-treeview-toggle-hover-bg-color);
18205 }
18206 .aurora .treeview-toggle.active-state {
18207   background-color: var(--f7-treeview-toggle-pressed-bg-color);
18208 }
18209 .aurora .treeview-item-selectable > .treeview-item-root:hover,
18210 .aurora .treeview-item-selectable.treeview-item-root:hover {
18211   background: var(--f7-treeview-selectable-hover-bg-color);
18212 }
18213 .aurora a.treeview-item-root:hover {
18214   background: var(--f7-treeview-link-hover-bg-color);
18215 }
18216 .aurora a.treeview-item-root.active-state {
18217   background: var(--f7-treeview-link-pressed-bg-color);
18218 }
18219 .aurora .treeview-item-selected > .treeview-item-root:hover,
18220 .aurora .treeview-item-selected.treeview-item-root:hover {
18221   background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
18222 }
18223 iframe#viAd {
18224   z-index: 12900 !important;
18225   background: #000 !important;
18226 }
18227 .vi-overlay {
18228   background: rgba(0, 0, 0, 0.85);
18229   z-index: 13100;
18230   position: absolute;
18231   left: 0%;
18232   top: 0%;
18233   width: 100%;
18234   height: 100%;
18235   border-radius: 3px;
18236   display: flex;
18237   justify-content: center;
18238   flex-direction: column;
18239   align-items: center;
18240   align-content: center;
18241   text-align: center;
18242   -webkit-user-select: none;
18243      -moz-user-select: none;
18244       -ms-user-select: none;
18245           user-select: none;
18246 }
18247 @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
18248   .vi-overlay {
18249     background: rgba(0, 0, 0, 0.65);
18250     -webkit-backdrop-filter: blur(10px);
18251             backdrop-filter: blur(10px);
18252   }
18253 }
18254 .vi-overlay .vi-overlay-text {
18255   text-align: center;
18256   color: #fff;
18257   max-width: 80%;
18258 }
18259 .vi-overlay .vi-overlay-text + .vi-overlay-play-button {
18260   margin-top: 15px;
18261 }
18262 .vi-overlay .vi-overlay-play-button {
18263   width: 44px;
18264   height: 44px;
18265   border-radius: 50%;
18266   border: 2px solid #fff;
18267   position: relative;
18268 }
18269 .vi-overlay .vi-overlay-play-button.active-state {
18270   opacity: 0.55;
18271 }
18272 .vi-overlay .vi-overlay-play-button:before {
18273   content: '';
18274   width: 0;
18275   height: 0;
18276   border-top: 8px solid transparent;
18277   border-bottom: 8px solid transparent;
18278   border-left: 14px solid #fff;
18279   position: absolute;
18280   left: 50%;
18281   top: 50%;
18282   margin-left: 2px;
18283   transform: translate(-50%, -50%);
18284 }
18285 /* === Elevation === */
18286 :root {
18287   --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
18288   --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
18289     0px 1px 1px 0px rgba(0, 0, 0, 0.14),
18290     0px 1px 3px 0px rgba(0, 0, 0, 0.12);
18291   --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
18292     0px 2px 2px 0px rgba(0, 0, 0, 0.14),
18293     0px 1px 5px 0px rgba(0, 0, 0, 0.12);
18294   --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
18295     0px 3px 4px 0px rgba(0, 0, 0, 0.14),
18296     0px 1px 8px 0px rgba(0, 0, 0, 0.12);
18297   --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
18298     0px 4px 5px 0px rgba(0, 0, 0, 0.14),
18299     0px 1px 10px 0px rgba(0, 0, 0, 0.12);
18300   --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
18301     0px 5px 8px 0px rgba(0, 0, 0, 0.14),
18302     0px 1px 14px 0px rgba(0, 0, 0, 0.12);
18303   --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
18304     0px 6px 10px 0px rgba(0, 0, 0, 0.14),
18305     0px 1px 18px 0px rgba(0, 0, 0, 0.12);
18306   --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
18307     0px 7px 10px 1px rgba(0, 0, 0, 0.14),
18308     0px 2px 16px 1px rgba(0, 0, 0, 0.12);
18309   --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
18310     0px 8px 10px 1px rgba(0, 0, 0, 0.14),
18311     0px 3px 14px 2px rgba(0, 0, 0, 0.12);
18312   --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
18313     0px 9px 12px 1px rgba(0, 0, 0, 0.14),
18314     0px 3px 16px 2px rgba(0, 0, 0, 0.12);
18315   --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
18316     0px 10px 14px 1px rgba(0, 0, 0, 0.14),
18317     0px 4px 18px 3px rgba(0, 0, 0, 0.12);
18318   --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
18319     0px 11px 15px 1px rgba(0, 0, 0, 0.14),
18320     0px 4px 20px 3px rgba(0, 0, 0, 0.12);
18321   --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
18322     0px 12px 17px 2px rgba(0, 0, 0, 0.14),
18323     0px 5px 22px 4px rgba(0, 0, 0, 0.12);
18324   --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
18325     0px 13px 19px 2px rgba(0, 0, 0, 0.14),
18326     0px 5px 24px 4px rgba(0, 0, 0, 0.12);
18327   --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
18328     0px 14px 21px 2px rgba(0, 0, 0, 0.14),
18329     0px 5px 26px 4px rgba(0, 0, 0, 0.12);
18330   --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
18331     0px 15px 22px 2px rgba(0, 0, 0, 0.14),
18332     0px 6px 28px 5px rgba(0, 0, 0, 0.12);
18333   --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
18334     0px 16px 24px 2px rgba(0, 0, 0, 0.14),
18335     0px 6px 30px 5px rgba(0, 0, 0, 0.12);
18336   --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
18337     0px 17px 26px 2px rgba(0, 0, 0, 0.14),
18338     0px 6px 32px 5px rgba(0, 0, 0, 0.12);
18339   --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
18340     0px 18px 28px 2px rgba(0, 0, 0, 0.14),
18341     0px 7px 34px 6px rgba(0, 0, 0, 0.12);
18342   --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
18343     0px 19px 29px 2px rgba(0, 0, 0, 0.14),
18344     0px 7px 36px 6px rgba(0, 0, 0, 0.12);
18345   --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
18346     0px 20px 31px 3px rgba(0, 0, 0, 0.14),
18347     0px 8px 38px 7px rgba(0, 0, 0, 0.12);
18348   --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
18349     0px 21px 33px 3px rgba(0, 0, 0, 0.14),
18350     0px 8px 40px 7px rgba(0, 0, 0, 0.12);
18351   --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
18352     0px 22px 35px 3px rgba(0, 0, 0, 0.14),
18353     0px 8px 42px 7px rgba(0, 0, 0, 0.12);
18354   --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
18355     0px 23px 36px 3px rgba(0, 0, 0, 0.14),
18356     0px 9px 44px 8px rgba(0, 0, 0, 0.12);
18357   --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
18358     0px 24px 38px 3px rgba(0, 0, 0, 0.14),
18359     0px 9px 46px 8px rgba(0, 0, 0, 0.12);
18360 }
18361 .elevation-0 {
18362   box-shadow: var(--f7-elevation-0) !important;
18363 }
18364 .elevation-1 {
18365   box-shadow: var(--f7-elevation-1) !important;
18366 }
18367 .elevation-2 {
18368   box-shadow: var(--f7-elevation-2) !important;
18369 }
18370 .elevation-3 {
18371   box-shadow: var(--f7-elevation-3) !important;
18372 }
18373 .elevation-4 {
18374   box-shadow: var(--f7-elevation-4) !important;
18375 }
18376 .elevation-5 {
18377   box-shadow: var(--f7-elevation-5) !important;
18378 }
18379 .elevation-6 {
18380   box-shadow: var(--f7-elevation-6) !important;
18381 }
18382 .elevation-7 {
18383   box-shadow: var(--f7-elevation-7) !important;
18384 }
18385 .elevation-8 {
18386   box-shadow: var(--f7-elevation-8) !important;
18387 }
18388 .elevation-9 {
18389   box-shadow: var(--f7-elevation-9) !important;
18390 }
18391 .elevation-10 {
18392   box-shadow: var(--f7-elevation-10) !important;
18393 }
18394 .elevation-11 {
18395   box-shadow: var(--f7-elevation-11) !important;
18396 }
18397 .elevation-12 {
18398   box-shadow: var(--f7-elevation-12) !important;
18399 }
18400 .elevation-13 {
18401   box-shadow: var(--f7-elevation-13) !important;
18402 }
18403 .elevation-14 {
18404   box-shadow: var(--f7-elevation-14) !important;
18405 }
18406 .elevation-15 {
18407   box-shadow: var(--f7-elevation-15) !important;
18408 }
18409 .elevation-16 {
18410   box-shadow: var(--f7-elevation-16) !important;
18411 }
18412 .elevation-17 {
18413   box-shadow: var(--f7-elevation-17) !important;
18414 }
18415 .elevation-18 {
18416   box-shadow: var(--f7-elevation-18) !important;
18417 }
18418 .elevation-19 {
18419   box-shadow: var(--f7-elevation-19) !important;
18420 }
18421 .elevation-20 {
18422   box-shadow: var(--f7-elevation-20) !important;
18423 }
18424 .elevation-21 {
18425   box-shadow: var(--f7-elevation-21) !important;
18426 }
18427 .elevation-22 {
18428   box-shadow: var(--f7-elevation-22) !important;
18429 }
18430 .elevation-23 {
18431   box-shadow: var(--f7-elevation-23) !important;
18432 }
18433 .elevation-24 {
18434   box-shadow: var(--f7-elevation-24) !important;
18435 }
18436 .device-desktop .elevation-hover-0:hover {
18437   box-shadow: var(--f7-elevation-0) !important;
18438 }
18439 .device-desktop .elevation-hover-1:hover {
18440   box-shadow: var(--f7-elevation-1) !important;
18441 }
18442 .device-desktop .elevation-hover-2:hover {
18443   box-shadow: var(--f7-elevation-2) !important;
18444 }
18445 .device-desktop .elevation-hover-3:hover {
18446   box-shadow: var(--f7-elevation-3) !important;
18447 }
18448 .device-desktop .elevation-hover-4:hover {
18449   box-shadow: var(--f7-elevation-4) !important;
18450 }
18451 .device-desktop .elevation-hover-5:hover {
18452   box-shadow: var(--f7-elevation-5) !important;
18453 }
18454 .device-desktop .elevation-hover-6:hover {
18455   box-shadow: var(--f7-elevation-6) !important;
18456 }
18457 .device-desktop .elevation-hover-7:hover {
18458   box-shadow: var(--f7-elevation-7) !important;
18459 }
18460 .device-desktop .elevation-hover-8:hover {
18461   box-shadow: var(--f7-elevation-8) !important;
18462 }
18463 .device-desktop .elevation-hover-9:hover {
18464   box-shadow: var(--f7-elevation-9) !important;
18465 }
18466 .device-desktop .elevation-hover-10:hover {
18467   box-shadow: var(--f7-elevation-10) !important;
18468 }
18469 .device-desktop .elevation-hover-11:hover {
18470   box-shadow: var(--f7-elevation-11) !important;
18471 }
18472 .device-desktop .elevation-hover-12:hover {
18473   box-shadow: var(--f7-elevation-12) !important;
18474 }
18475 .device-desktop .elevation-hover-13:hover {
18476   box-shadow: var(--f7-elevation-13) !important;
18477 }
18478 .device-desktop .elevation-hover-14:hover {
18479   box-shadow: var(--f7-elevation-14) !important;
18480 }
18481 .device-desktop .elevation-hover-15:hover {
18482   box-shadow: var(--f7-elevation-15) !important;
18483 }
18484 .device-desktop .elevation-hover-16:hover {
18485   box-shadow: var(--f7-elevation-16) !important;
18486 }
18487 .device-desktop .elevation-hover-17:hover {
18488   box-shadow: var(--f7-elevation-17) !important;
18489 }
18490 .device-desktop .elevation-hover-18:hover {
18491   box-shadow: var(--f7-elevation-18) !important;
18492 }
18493 .device-desktop .elevation-hover-19:hover {
18494   box-shadow: var(--f7-elevation-19) !important;
18495 }
18496 .device-desktop .elevation-hover-20:hover {
18497   box-shadow: var(--f7-elevation-20) !important;
18498 }
18499 .device-desktop .elevation-hover-21:hover {
18500   box-shadow: var(--f7-elevation-21) !important;
18501 }
18502 .device-desktop .elevation-hover-22:hover {
18503   box-shadow: var(--f7-elevation-22) !important;
18504 }
18505 .device-desktop .elevation-hover-23:hover {
18506   box-shadow: var(--f7-elevation-23) !important;
18507 }
18508 .device-desktop .elevation-hover-24:hover {
18509   box-shadow: var(--f7-elevation-24) !important;
18510 }
18511 .active-state.elevation-pressed-0,
18512 .device-desktop .active-state.elevation-pressed-0 {
18513   box-shadow: var(--f7-elevation-0) !important;
18514 }
18515 .active-state.elevation-pressed-1,
18516 .device-desktop .active-state.elevation-pressed-1 {
18517   box-shadow: var(--f7-elevation-1) !important;
18518 }
18519 .active-state.elevation-pressed-2,
18520 .device-desktop .active-state.elevation-pressed-2 {
18521   box-shadow: var(--f7-elevation-2) !important;
18522 }
18523 .active-state.elevation-pressed-3,
18524 .device-desktop .active-state.elevation-pressed-3 {
18525   box-shadow: var(--f7-elevation-3) !important;
18526 }
18527 .active-state.elevation-pressed-4,
18528 .device-desktop .active-state.elevation-pressed-4 {
18529   box-shadow: var(--f7-elevation-4) !important;
18530 }
18531 .active-state.elevation-pressed-5,
18532 .device-desktop .active-state.elevation-pressed-5 {
18533   box-shadow: var(--f7-elevation-5) !important;
18534 }
18535 .active-state.elevation-pressed-6,
18536 .device-desktop .active-state.elevation-pressed-6 {
18537   box-shadow: var(--f7-elevation-6) !important;
18538 }
18539 .active-state.elevation-pressed-7,
18540 .device-desktop .active-state.elevation-pressed-7 {
18541   box-shadow: var(--f7-elevation-7) !important;
18542 }
18543 .active-state.elevation-pressed-8,
18544 .device-desktop .active-state.elevation-pressed-8 {
18545   box-shadow: var(--f7-elevation-8) !important;
18546 }
18547 .active-state.elevation-pressed-9,
18548 .device-desktop .active-state.elevation-pressed-9 {
18549   box-shadow: var(--f7-elevation-9) !important;
18550 }
18551 .active-state.elevation-pressed-10,
18552 .device-desktop .active-state.elevation-pressed-10 {
18553   box-shadow: var(--f7-elevation-10) !important;
18554 }
18555 .active-state.elevation-pressed-11,
18556 .device-desktop .active-state.elevation-pressed-11 {
18557   box-shadow: var(--f7-elevation-11) !important;
18558 }
18559 .active-state.elevation-pressed-12,
18560 .device-desktop .active-state.elevation-pressed-12 {
18561   box-shadow: var(--f7-elevation-12) !important;
18562 }
18563 .active-state.elevation-pressed-13,
18564 .device-desktop .active-state.elevation-pressed-13 {
18565   box-shadow: var(--f7-elevation-13) !important;
18566 }
18567 .active-state.elevation-pressed-14,
18568 .device-desktop .active-state.elevation-pressed-14 {
18569   box-shadow: var(--f7-elevation-14) !important;
18570 }
18571 .active-state.elevation-pressed-15,
18572 .device-desktop .active-state.elevation-pressed-15 {
18573   box-shadow: var(--f7-elevation-15) !important;
18574 }
18575 .active-state.elevation-pressed-16,
18576 .device-desktop .active-state.elevation-pressed-16 {
18577   box-shadow: var(--f7-elevation-16) !important;
18578 }
18579 .active-state.elevation-pressed-17,
18580 .device-desktop .active-state.elevation-pressed-17 {
18581   box-shadow: var(--f7-elevation-17) !important;
18582 }
18583 .active-state.elevation-pressed-18,
18584 .device-desktop .active-state.elevation-pressed-18 {
18585   box-shadow: var(--f7-elevation-18) !important;
18586 }
18587 .active-state.elevation-pressed-19,
18588 .device-desktop .active-state.elevation-pressed-19 {
18589   box-shadow: var(--f7-elevation-19) !important;
18590 }
18591 .active-state.elevation-pressed-20,
18592 .device-desktop .active-state.elevation-pressed-20 {
18593   box-shadow: var(--f7-elevation-20) !important;
18594 }
18595 .active-state.elevation-pressed-21,
18596 .device-desktop .active-state.elevation-pressed-21 {
18597   box-shadow: var(--f7-elevation-21) !important;
18598 }
18599 .active-state.elevation-pressed-22,
18600 .device-desktop .active-state.elevation-pressed-22 {
18601   box-shadow: var(--f7-elevation-22) !important;
18602 }
18603 .active-state.elevation-pressed-23,
18604 .device-desktop .active-state.elevation-pressed-23 {
18605   box-shadow: var(--f7-elevation-23) !important;
18606 }
18607 .active-state.elevation-pressed-24,
18608 .device-desktop .active-state.elevation-pressed-24 {
18609   box-shadow: var(--f7-elevation-24) !important;
18610 }
18611 .elevation-transition-100 {
18612   transition-duration: 100ms;
18613   transition-property: box-shadow;
18614 }
18615 .elevation-transition,
18616 .elevation-transition-200 {
18617   transition-duration: 200ms;
18618   transition-property: box-shadow;
18619 }
18620 .elevation-transition-300 {
18621   transition-duration: 300ms;
18622   transition-property: box-shadow;
18623 }
18624 .elevation-transition-400 {
18625   transition-duration: 400ms;
18626   transition-property: box-shadow;
18627 }
18628 .elevation-transition-500 {
18629   transition-duration: 500ms;
18630   transition-property: box-shadow;
18631 }
18632 /* === Typography === */
18633 .ios {
18634   --f7-typography-padding: 15px;
18635   --f7-typography-margin: 15px;
18636 }
18637 .md {
18638   --f7-typography-padding: 16px;
18639   --f7-typography-margin: 16px;
18640 }
18641 .aurora {
18642   --f7-typography-padding: 15px;
18643   --f7-typography-margin: 15px;
18644 }
18645 .display-flex {
18646   display: flex !important;
18647 }
18648 .display-block {
18649   display: block !important;
18650 }
18651 .display-inline-flex {
18652   display: inline-flex !important;
18653 }
18654 .display-inline-block {
18655   display: inline-block !important;
18656 }
18657 .display-inline {
18658   display: inline !important;
18659 }
18660 .display-none {
18661   display: none !important;
18662 }
18663 .flex-shrink-0 {
18664   flex-shrink: 0 !important;
18665 }
18666 .flex-shrink-1 {
18667   flex-shrink: 1 !important;
18668 }
18669 .flex-shrink-2 {
18670   flex-shrink: 2 !important;
18671 }
18672 .flex-shrink-3 {
18673   flex-shrink: 3 !important;
18674 }
18675 .flex-shrink-4 {
18676   flex-shrink: 4 !important;
18677 }
18678 .flex-shrink-5 {
18679   flex-shrink: 5 !important;
18680 }
18681 .flex-shrink-6 {
18682   flex-shrink: 6 !important;
18683 }
18684 .flex-shrink-7 {
18685   flex-shrink: 7 !important;
18686 }
18687 .flex-shrink-8 {
18688   flex-shrink: 8 !important;
18689 }
18690 .flex-shrink-9 {
18691   flex-shrink: 9 !important;
18692 }
18693 .flex-shrink-10 {
18694   flex-shrink: 10 !important;
18695 }
18696 .flex-direction-row {
18697   flex-direction: row !important;
18698 }
18699 .flex-direction-row-reverse {
18700   flex-direction: row-reverse !important;
18701 }
18702 .flex-direction-column {
18703   flex-direction: column !important;
18704 }
18705 .flex-direction-column-reverse {
18706   flex-direction: column-reverse !important;
18707 }
18708 .justify-content-flex-start {
18709   justify-content: flex-start !important;
18710 }
18711 .justify-content-center {
18712   justify-content: center !important;
18713 }
18714 .justify-content-flex-end {
18715   justify-content: flex-end !important;
18716 }
18717 .justify-content-space-between {
18718   justify-content: space-between !important;
18719 }
18720 .justify-content-space-around {
18721   justify-content: space-around !important;
18722 }
18723 .justify-content-space-evenly {
18724   justify-content: space-evenly !important;
18725 }
18726 .justify-content-stretch {
18727   justify-content: stretch !important;
18728 }
18729 .justify-content-start {
18730   justify-content: start !important;
18731 }
18732 .justify-content-end {
18733   justify-content: end !important;
18734 }
18735 .justify-content-left {
18736   justify-content: left !important;
18737 }
18738 .justify-content-right {
18739   justify-content: right !important;
18740 }
18741 .align-content-flex-start {
18742   align-content: flex-start !important;
18743 }
18744 .align-content-flex-end {
18745   align-content: flex-end !important;
18746 }
18747 .align-content-center {
18748   align-content: center !important;
18749 }
18750 .align-content-space-between {
18751   align-content: space-between !important;
18752 }
18753 .align-content-space-around {
18754   align-content: space-around !important;
18755 }
18756 .align-content-stretch {
18757   align-content: stretch !important;
18758 }
18759 .align-items-baseline {
18760   align-items: baseline !important;
18761 }
18762 .align-items-flex-start {
18763   align-items: flex-start !important;
18764 }
18765 .align-items-flex-end {
18766   align-items: flex-end !important;
18767 }
18768 .align-items-center {
18769   align-items: center !important;
18770 }
18771 .align-items-stretch {
18772   align-items: stretch !important;
18773 }
18774 .align-self-flex-start {
18775   align-self: flex-start !important;
18776 }
18777 .align-self-flex-end {
18778   align-self: flex-end !important;
18779 }
18780 .align-self-center {
18781   align-self: center !important;
18782 }
18783 .align-self-stretch {
18784   align-self: stretch !important;
18785 }
18786 .text-align-left {
18787   text-align: left !important;
18788 }
18789 .text-align-center {
18790   text-align: center !important;
18791 }
18792 .text-align-right {
18793   text-align: right !important;
18794 }
18795 .text-align-justify {
18796   text-align: justify !important;
18797 }
18798 .float-left {
18799   float: left !important;
18800 }
18801 .float-right {
18802   float: right !important;
18803 }
18804 .float-none {
18805   float: none !important;
18806 }
18807 .vertical-align-bottom {
18808   vertical-align: bottom !important;
18809 }
18810 .vertical-align-middle {
18811   vertical-align: middle !important;
18812 }
18813 .vertical-align-top {
18814   vertical-align: top !important;
18815 }
18816 .no-padding {
18817   padding: 0 !important;
18818 }
18819 .no-padding-left {
18820   padding-left: 0 !important;
18821 }
18822 .no-padding-right {
18823   padding-right: 0 !important;
18824 }
18825 .no-padding-horizontal {
18826   padding-left: 0 !important;
18827   padding-right: 0 !important;
18828 }
18829 .no-padding-top {
18830   padding-top: 0 !important;
18831 }
18832 .no-padding-bottom {
18833   padding-bottom: 0 !important;
18834 }
18835 .no-padding-vertical {
18836   padding-top: 0 !important;
18837   padding-bottom: 0 !important;
18838 }
18839 .no-margin {
18840   margin: 0 !important;
18841 }
18842 .no-margin-left {
18843   margin-left: 0 !important;
18844 }
18845 .no-margin-right {
18846   margin-right: 0 !important;
18847 }
18848 .no-margin-horizontal {
18849   margin-left: 0 !important;
18850   margin-right: 0 !important;
18851 }
18852 .no-margin-top {
18853   margin-top: 0 !important;
18854 }
18855 .no-margin-bottom {
18856   margin-bottom: 0 !important;
18857 }
18858 .no-margin-vertical {
18859   margin-top: 0 !important;
18860   margin-bottom: 0 !important;
18861 }
18862 .width-auto {
18863   width: auto !important;
18864 }
18865 .width-100 {
18866   width: 100% !important;
18867 }
18868 .padding {
18869   padding: var(--f7-typography-padding) !important;
18870 }
18871 .padding-half {
18872   padding: calc(var(--f7-typography-padding) / 2) !important;
18873 }
18874 .padding-top {
18875   padding-top: var(--f7-typography-padding) !important;
18876 }
18877 .padding-top-half {
18878   padding-top: calc(var(--f7-typography-padding) / 2) !important;
18879 }
18880 .padding-bottom {
18881   padding-bottom: var(--f7-typography-padding) !important;
18882 }
18883 .padding-bottom-half {
18884   padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
18885 }
18886 .padding-left {
18887   padding-left: var(--f7-typography-padding) !important;
18888 }
18889 .padding-left-half {
18890   padding-left: calc(var(--f7-typography-padding) / 2) !important;
18891 }
18892 .padding-right {
18893   padding-right: var(--f7-typography-padding) !important;
18894 }
18895 .padding-right-half {
18896   padding-right: calc(var(--f7-typography-padding) / 2) !important;
18897 }
18898 .padding-vertical {
18899   padding-top: var(--f7-typography-padding) !important;
18900   padding-bottom: var(--f7-typography-padding) !important;
18901 }
18902 .padding-vertical-half {
18903   padding-top: calc(var(--f7-typography-padding) / 2) !important;
18904   padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
18905 }
18906 .padding-horizontal {
18907   padding-left: var(--f7-typography-padding) !important;
18908   padding-right: var(--f7-typography-padding) !important;
18909 }
18910 .padding-horizontal-half {
18911   padding-left: calc(var(--f7-typography-padding) / 2) !important;
18912   padding-right: calc(var(--f7-typography-padding) / 2) !important;
18913 }
18914 .margin {
18915   margin: var(--f7-typography-margin) !important;
18916 }
18917 .margin-half {
18918   margin: calc(var(--f7-typography-margin) / 2) !important;
18919 }
18920 .margin-top {
18921   margin-top: var(--f7-typography-margin) !important;
18922 }
18923 .margin-top-half {
18924   margin-top: calc(var(--f7-typography-margin) / 2) !important;
18925 }
18926 .margin-bottom {
18927   margin-bottom: var(--f7-typography-margin) !important;
18928 }
18929 .margin-bottom-half {
18930   margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
18931 }
18932 .margin-left {
18933   margin-left: var(--f7-typography-margin) !important;
18934 }
18935 .margin-left-half {
18936   margin-left: calc(var(--f7-typography-margin) / 2) !important;
18937 }
18938 .margin-right {
18939   margin-right: var(--f7-typography-margin) !important;
18940 }
18941 .margin-right-half {
18942   margin-right: calc(var(--f7-typography-margin) / 2) !important;
18943 }
18944 .margin-vertical {
18945   margin-top: var(--f7-typography-margin) !important;
18946   margin-bottom: var(--f7-typography-margin) !important;
18947 }
18948 .margin-vertical-half {
18949   margin-top: calc(var(--f7-typography-margin) / 2) !important;
18950   margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
18951 }
18952 .margin-horizontal {
18953   margin-left: var(--f7-typography-margin) !important;
18954   margin-right: var(--f7-typography-margin) !important;
18955 }
18956 .margin-horizontal-half {
18957   margin-left: calc(var(--f7-typography-margin) / 2) !important;
18958   margin-right: calc(var(--f7-typography-margin) / 2) !important;
18959 }
18960 [class*="text-color-"] {
18961   color: var(--f7-theme-color-text-color) !important;
18962 }
18963 [class*="bg-color-"] {
18964   background-color: var(--f7-theme-color-bg-color) !important;
18965 }
18966 [class*="border-color-"] {
18967   border-color: var(--f7-theme-color-border-color) !important;
18968 }