]> git.proxmox.com Git - framework7.git/blob - framework7/css/framework7.rtl.css
bump version to 4.4.7-2
[framework7.git] / framework7 / css / framework7.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 }