UNPKG

669 kBCSSView Raw
1/**
2 * Framework7 6.0.0-beta.2
3 * Full featured mobile HTML framework for building iOS & Android apps
4 * https://framework7.io/
5 *
6 * Copyright 2014-2020 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: November 16, 2020
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 & Bars
81 ==================== */
82:root {
83 --f7-font-size: 14px;
84 /*
85 --f7-bars-link-color: var(--f7-theme-color);
86 */
87 --f7-bars-bg-image: none;
88 --f7-bars-translucent-opacity: 0.8;
89 --f7-bars-translucent-blur: 20px;
90 --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%);
91 --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%);
92 --f7-bars-text-color: #000;
93 --f7-bars-bg-color: #f7f7f8;
94 --f7-bars-bg-color-rgb: 247, 247, 248;
95}
96:root .theme-dark,
97:root.theme-dark {
98 --f7-bars-text-color: #fff;
99}
100.ios {
101 --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
102 --f7-line-height: 1.4;
103 --f7-text-color: #000;
104 --f7-bars-border-color: rgba(0, 0, 0, 0.25);
105}
106.ios .theme-dark,
107.ios.theme-dark {
108 --f7-text-color: #fff;
109 --f7-bars-bg-color: #121212;
110 --f7-bars-bg-color-rgb: 22, 22, 22;
111 --f7-bars-border-color: rgba(255, 255, 255, 0.16);
112}
113.md {
114 --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
115 --f7-line-height: 1.5;
116 --f7-bars-border-color: transparent;
117 --f7-text-color: #212121;
118}
119.md .theme-dark,
120.md.theme-dark {
121 --f7-text-color: rgba(255, 255, 255, 0.87);
122 --f7-bars-bg-color: #202020;
123}
124.aurora {
125 --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
126 --f7-line-height: 1.5;
127 --f7-text-color: #000;
128 --f7-bars-border-color: rgba(0, 0, 0, 0.2);
129}
130.aurora .theme-dark,
131.aurora.theme-dark {
132 --f7-text-color: #fff;
133 --f7-bars-bg-color: #202020;
134 --f7-bars-border-color: rgba(255, 255, 255, 0.1);
135}
136/*====================
137 Color Themes
138 ==================== */
139.text-color-primary {
140 --f7-theme-color-text-color: var(--f7-theme-color);
141}
142.bg-color-primary {
143 --f7-theme-color-bg-color: var(--f7-theme-color);
144}
145.border-color-primary {
146 --f7-theme-color-border-color: var(--f7-theme-color);
147}
148.ripple-color-primary {
149 --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
150}
151:root {
152 --f7-color-red: #ff3b30;
153 --f7-color-red-rgb: 255, 59, 48;
154 --f7-color-red-shade: #ff1407;
155 --f7-color-red-tint: #ff6259;
156 --f7-color-green: #4cd964;
157 --f7-color-green-rgb: 76, 217, 100;
158 --f7-color-green-shade: #2cd048;
159 --f7-color-green-tint: #6ee081;
160 --f7-color-blue: #2196f3;
161 --f7-color-blue-rgb: 33, 150, 243;
162 --f7-color-blue-shade: #0c82df;
163 --f7-color-blue-tint: #48a8f5;
164 --f7-color-pink: #ff2d55;
165 --f7-color-pink-rgb: 255, 45, 85;
166 --f7-color-pink-shade: #ff0434;
167 --f7-color-pink-tint: #ff5676;
168 --f7-color-yellow: #ffcc00;
169 --f7-color-yellow-rgb: 255, 204, 0;
170 --f7-color-yellow-shade: #d6ab00;
171 --f7-color-yellow-tint: #ffd429;
172 --f7-color-orange: #ff9500;
173 --f7-color-orange-rgb: 255, 149, 0;
174 --f7-color-orange-shade: #d67d00;
175 --f7-color-orange-tint: #ffa629;
176 --f7-color-purple: #9c27b0;
177 --f7-color-purple-rgb: 156, 39, 176;
178 --f7-color-purple-shade: #7e208f;
179 --f7-color-purple-tint: #b92fd1;
180 --f7-color-deeppurple: #673ab7;
181 --f7-color-deeppurple-rgb: 103, 58, 183;
182 --f7-color-deeppurple-shade: #563098;
183 --f7-color-deeppurple-tint: #7c52c8;
184 --f7-color-lightblue: #5ac8fa;
185 --f7-color-lightblue-rgb: 90, 200, 250;
186 --f7-color-lightblue-shade: #32bbf9;
187 --f7-color-lightblue-tint: #82d5fb;
188 --f7-color-teal: #009688;
189 --f7-color-teal-rgb: 0, 150, 136;
190 --f7-color-teal-shade: #006d63;
191 --f7-color-teal-tint: #00bfad;
192 --f7-color-lime: #cddc39;
193 --f7-color-lime-rgb: 205, 220, 57;
194 --f7-color-lime-shade: #bac923;
195 --f7-color-lime-tint: #d6e25c;
196 --f7-color-deeporange: #ff6b22;
197 --f7-color-deeporange-rgb: 255, 107, 34;
198 --f7-color-deeporange-shade: #f85200;
199 --f7-color-deeporange-tint: #ff864b;
200 --f7-color-gray: #8e8e93;
201 --f7-color-gray-rgb: 142, 142, 147;
202 --f7-color-gray-shade: #79797f;
203 --f7-color-gray-tint: #a3a3a7;
204 --f7-color-white: #ffffff;
205 --f7-color-white-rgb: 255, 255, 255;
206 --f7-color-white-shade: #ebebeb;
207 --f7-color-white-tint: #ffffff;
208 --f7-color-black: #000000;
209 --f7-color-black-rgb: 0, 0, 0;
210 --f7-color-black-shade: #000000;
211 --f7-color-black-tint: #141414;
212}
213.color-theme-red {
214 --f7-theme-color: #ff3b30;
215 --f7-theme-color-rgb: 255, 59, 48;
216 --f7-theme-color-shade: #ff1407;
217 --f7-theme-color-tint: #ff6259;
218}
219.color-theme-green {
220 --f7-theme-color: #4cd964;
221 --f7-theme-color-rgb: 76, 217, 100;
222 --f7-theme-color-shade: #2cd048;
223 --f7-theme-color-tint: #6ee081;
224}
225.color-theme-blue {
226 --f7-theme-color: #2196f3;
227 --f7-theme-color-rgb: 33, 150, 243;
228 --f7-theme-color-shade: #0c82df;
229 --f7-theme-color-tint: #48a8f5;
230}
231.color-theme-pink {
232 --f7-theme-color: #ff2d55;
233 --f7-theme-color-rgb: 255, 45, 85;
234 --f7-theme-color-shade: #ff0434;
235 --f7-theme-color-tint: #ff5676;
236}
237.color-theme-yellow {
238 --f7-theme-color: #ffcc00;
239 --f7-theme-color-rgb: 255, 204, 0;
240 --f7-theme-color-shade: #d6ab00;
241 --f7-theme-color-tint: #ffd429;
242}
243.color-theme-orange {
244 --f7-theme-color: #ff9500;
245 --f7-theme-color-rgb: 255, 149, 0;
246 --f7-theme-color-shade: #d67d00;
247 --f7-theme-color-tint: #ffa629;
248}
249.color-theme-purple {
250 --f7-theme-color: #9c27b0;
251 --f7-theme-color-rgb: 156, 39, 176;
252 --f7-theme-color-shade: #7e208f;
253 --f7-theme-color-tint: #b92fd1;
254}
255.color-theme-deeppurple {
256 --f7-theme-color: #673ab7;
257 --f7-theme-color-rgb: 103, 58, 183;
258 --f7-theme-color-shade: #563098;
259 --f7-theme-color-tint: #7c52c8;
260}
261.color-theme-lightblue {
262 --f7-theme-color: #5ac8fa;
263 --f7-theme-color-rgb: 90, 200, 250;
264 --f7-theme-color-shade: #32bbf9;
265 --f7-theme-color-tint: #82d5fb;
266}
267.color-theme-teal {
268 --f7-theme-color: #009688;
269 --f7-theme-color-rgb: 0, 150, 136;
270 --f7-theme-color-shade: #006d63;
271 --f7-theme-color-tint: #00bfad;
272}
273.color-theme-lime {
274 --f7-theme-color: #cddc39;
275 --f7-theme-color-rgb: 205, 220, 57;
276 --f7-theme-color-shade: #bac923;
277 --f7-theme-color-tint: #d6e25c;
278}
279.color-theme-deeporange {
280 --f7-theme-color: #ff6b22;
281 --f7-theme-color-rgb: 255, 107, 34;
282 --f7-theme-color-shade: #f85200;
283 --f7-theme-color-tint: #ff864b;
284}
285.color-theme-gray {
286 --f7-theme-color: #8e8e93;
287 --f7-theme-color-rgb: 142, 142, 147;
288 --f7-theme-color-shade: #79797f;
289 --f7-theme-color-tint: #a3a3a7;
290}
291.color-theme-white {
292 --f7-theme-color: #ffffff;
293 --f7-theme-color-rgb: 255, 255, 255;
294 --f7-theme-color-shade: #ebebeb;
295 --f7-theme-color-tint: #ffffff;
296}
297.color-theme-black {
298 --f7-theme-color: #000000;
299 --f7-theme-color-rgb: 0, 0, 0;
300 --f7-theme-color-shade: #000000;
301 --f7-theme-color-tint: #141414;
302}
303.color-red {
304 --f7-theme-color: #ff3b30;
305 --f7-theme-color-rgb: 255, 59, 48;
306 --f7-theme-color-shade: #ff1407;
307 --f7-theme-color-tint: #ff6259;
308}
309.text-color-red {
310 --f7-theme-color-text-color: #ff3b30;
311}
312.bg-color-red {
313 --f7-theme-color-bg-color: #ff3b30;
314}
315.border-color-red {
316 --f7-theme-color-border-color: #ff3b30;
317}
318.ripple-color-red,
319.ripple-red {
320 --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
321}
322.color-green {
323 --f7-theme-color: #4cd964;
324 --f7-theme-color-rgb: 76, 217, 100;
325 --f7-theme-color-shade: #2cd048;
326 --f7-theme-color-tint: #6ee081;
327}
328.text-color-green {
329 --f7-theme-color-text-color: #4cd964;
330}
331.bg-color-green {
332 --f7-theme-color-bg-color: #4cd964;
333}
334.border-color-green {
335 --f7-theme-color-border-color: #4cd964;
336}
337.ripple-color-green,
338.ripple-green {
339 --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
340}
341.color-blue {
342 --f7-theme-color: #2196f3;
343 --f7-theme-color-rgb: 33, 150, 243;
344 --f7-theme-color-shade: #0c82df;
345 --f7-theme-color-tint: #48a8f5;
346}
347.text-color-blue {
348 --f7-theme-color-text-color: #2196f3;
349}
350.bg-color-blue {
351 --f7-theme-color-bg-color: #2196f3;
352}
353.border-color-blue {
354 --f7-theme-color-border-color: #2196f3;
355}
356.ripple-color-blue,
357.ripple-blue {
358 --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
359}
360.color-pink {
361 --f7-theme-color: #ff2d55;
362 --f7-theme-color-rgb: 255, 45, 85;
363 --f7-theme-color-shade: #ff0434;
364 --f7-theme-color-tint: #ff5676;
365}
366.text-color-pink {
367 --f7-theme-color-text-color: #ff2d55;
368}
369.bg-color-pink {
370 --f7-theme-color-bg-color: #ff2d55;
371}
372.border-color-pink {
373 --f7-theme-color-border-color: #ff2d55;
374}
375.ripple-color-pink,
376.ripple-pink {
377 --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
378}
379.color-yellow {
380 --f7-theme-color: #ffcc00;
381 --f7-theme-color-rgb: 255, 204, 0;
382 --f7-theme-color-shade: #d6ab00;
383 --f7-theme-color-tint: #ffd429;
384}
385.text-color-yellow {
386 --f7-theme-color-text-color: #ffcc00;
387}
388.bg-color-yellow {
389 --f7-theme-color-bg-color: #ffcc00;
390}
391.border-color-yellow {
392 --f7-theme-color-border-color: #ffcc00;
393}
394.ripple-color-yellow,
395.ripple-yellow {
396 --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
397}
398.color-orange {
399 --f7-theme-color: #ff9500;
400 --f7-theme-color-rgb: 255, 149, 0;
401 --f7-theme-color-shade: #d67d00;
402 --f7-theme-color-tint: #ffa629;
403}
404.text-color-orange {
405 --f7-theme-color-text-color: #ff9500;
406}
407.bg-color-orange {
408 --f7-theme-color-bg-color: #ff9500;
409}
410.border-color-orange {
411 --f7-theme-color-border-color: #ff9500;
412}
413.ripple-color-orange,
414.ripple-orange {
415 --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
416}
417.color-purple {
418 --f7-theme-color: #9c27b0;
419 --f7-theme-color-rgb: 156, 39, 176;
420 --f7-theme-color-shade: #7e208f;
421 --f7-theme-color-tint: #b92fd1;
422}
423.text-color-purple {
424 --f7-theme-color-text-color: #9c27b0;
425}
426.bg-color-purple {
427 --f7-theme-color-bg-color: #9c27b0;
428}
429.border-color-purple {
430 --f7-theme-color-border-color: #9c27b0;
431}
432.ripple-color-purple,
433.ripple-purple {
434 --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
435}
436.color-deeppurple {
437 --f7-theme-color: #673ab7;
438 --f7-theme-color-rgb: 103, 58, 183;
439 --f7-theme-color-shade: #563098;
440 --f7-theme-color-tint: #7c52c8;
441}
442.text-color-deeppurple {
443 --f7-theme-color-text-color: #673ab7;
444}
445.bg-color-deeppurple {
446 --f7-theme-color-bg-color: #673ab7;
447}
448.border-color-deeppurple {
449 --f7-theme-color-border-color: #673ab7;
450}
451.ripple-color-deeppurple,
452.ripple-deeppurple {
453 --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
454}
455.color-lightblue {
456 --f7-theme-color: #5ac8fa;
457 --f7-theme-color-rgb: 90, 200, 250;
458 --f7-theme-color-shade: #32bbf9;
459 --f7-theme-color-tint: #82d5fb;
460}
461.text-color-lightblue {
462 --f7-theme-color-text-color: #5ac8fa;
463}
464.bg-color-lightblue {
465 --f7-theme-color-bg-color: #5ac8fa;
466}
467.border-color-lightblue {
468 --f7-theme-color-border-color: #5ac8fa;
469}
470.ripple-color-lightblue,
471.ripple-lightblue {
472 --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
473}
474.color-teal {
475 --f7-theme-color: #009688;
476 --f7-theme-color-rgb: 0, 150, 136;
477 --f7-theme-color-shade: #006d63;
478 --f7-theme-color-tint: #00bfad;
479}
480.text-color-teal {
481 --f7-theme-color-text-color: #009688;
482}
483.bg-color-teal {
484 --f7-theme-color-bg-color: #009688;
485}
486.border-color-teal {
487 --f7-theme-color-border-color: #009688;
488}
489.ripple-color-teal,
490.ripple-teal {
491 --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
492}
493.color-lime {
494 --f7-theme-color: #cddc39;
495 --f7-theme-color-rgb: 205, 220, 57;
496 --f7-theme-color-shade: #bac923;
497 --f7-theme-color-tint: #d6e25c;
498}
499.text-color-lime {
500 --f7-theme-color-text-color: #cddc39;
501}
502.bg-color-lime {
503 --f7-theme-color-bg-color: #cddc39;
504}
505.border-color-lime {
506 --f7-theme-color-border-color: #cddc39;
507}
508.ripple-color-lime,
509.ripple-lime {
510 --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
511}
512.color-deeporange {
513 --f7-theme-color: #ff6b22;
514 --f7-theme-color-rgb: 255, 107, 34;
515 --f7-theme-color-shade: #f85200;
516 --f7-theme-color-tint: #ff864b;
517}
518.text-color-deeporange {
519 --f7-theme-color-text-color: #ff6b22;
520}
521.bg-color-deeporange {
522 --f7-theme-color-bg-color: #ff6b22;
523}
524.border-color-deeporange {
525 --f7-theme-color-border-color: #ff6b22;
526}
527.ripple-color-deeporange,
528.ripple-deeporange {
529 --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
530}
531.color-gray {
532 --f7-theme-color: #8e8e93;
533 --f7-theme-color-rgb: 142, 142, 147;
534 --f7-theme-color-shade: #79797f;
535 --f7-theme-color-tint: #a3a3a7;
536}
537.text-color-gray {
538 --f7-theme-color-text-color: #8e8e93;
539}
540.bg-color-gray {
541 --f7-theme-color-bg-color: #8e8e93;
542}
543.border-color-gray {
544 --f7-theme-color-border-color: #8e8e93;
545}
546.ripple-color-gray,
547.ripple-gray {
548 --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
549}
550.color-white {
551 --f7-theme-color: #ffffff;
552 --f7-theme-color-rgb: 255, 255, 255;
553 --f7-theme-color-shade: #ebebeb;
554 --f7-theme-color-tint: #ffffff;
555}
556.text-color-white {
557 --f7-theme-color-text-color: #ffffff;
558}
559.bg-color-white {
560 --f7-theme-color-bg-color: #ffffff;
561}
562.border-color-white {
563 --f7-theme-color-border-color: #ffffff;
564}
565.ripple-color-white,
566.ripple-white {
567 --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
568}
569.color-black {
570 --f7-theme-color: #000000;
571 --f7-theme-color-rgb: 0, 0, 0;
572 --f7-theme-color-shade: #000000;
573 --f7-theme-color-tint: #141414;
574}
575.text-color-black {
576 --f7-theme-color-text-color: #000000;
577}
578.bg-color-black {
579 --f7-theme-color-bg-color: #000000;
580}
581.border-color-black {
582 --f7-theme-color-border-color: #000000;
583}
584.ripple-color-black,
585.ripple-black {
586 --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
587}
588@font-face {
589 font-family: 'framework7-core-icons';
590 src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAzQABAAAAAAGGwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcjtboWUdERUYAAAGIAAAAIwAAACQAewBXR1BPUwAAAawAAAAuAAAANuAY7+xHU1VCAAAB3AAAAZ4AAAP6ALYH7k9TLzIAAAN8AAAASgAAAGBRKF+WY21hcAAAA8gAAACJAAABYt6F0cBjdnQgAAAEVAAAAAQAAAAEABEBRGdhc3AAAARYAAAACAAAAAj//wADZ2x5ZgAABGAAAASAAAAJvIVgCq9oZWFkAAAI4AAAADAAAAA2GfP/aWhoZWEAAAkQAAAAIAAAACQHgQM7aG10eAAACTAAAABcAAABHC1sAAFsb2NhAAAJjAAAAJAAAACQQehEdm1heHAAAAocAAAAHwAAACAAjQBMbmFtZQAACjwAAAFPAAAC2VmaSiNwb3N0AAALjAAAAUMAAAJaVPYZiHicY2BgYGQAghsJmjkg+rZ1fBmMBgA8PQWlAAB4nGNgZGBg4AFiGSBmAkJmBk0GRgYtBjcgmwUsxgAADWAA0wB4nGNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB4nHVTW07CQBQ9Q2vAJwhVGwW0UJEgvt+Kb+XDT3dAYjQmxA9DXIDLMC7CLz9dg3EJfrkLPDMF+pg0TTPTe84998ydWwgAIyiiDtFudZ6QgskIul1IRLQfH1qMwfsiZqo1BWF8IAkLL4lO4scwDddowGC8iia2kYbDp4gKd5Ncy3yKyPMrjxyuMBHAHdiYxgwZHrqK8QA6xxpTAyyNBdzgGW/4wq8wRUU0xb14Fe/iU3yLP9a2qGRhUeUXIuoZuCrucHdGtTDTrxTk7Wq8nHJWiPCOeM4wz8V8hLOscYLubMZKWCcvzpfHuNAY0Q6ucI3TkPh+D89iVt3OUsTnBm8grsI5xrRcz9dmD9GrNjSk38M1jGpq0uEBZ1LvppyvGu//kh4tpV7mm1Ycl6zcwMsxd3EMqX+C4RAuY3K6t3hKOa02fdt0lVF7z0GWfKltDarIjFP2qkx92UF/an18h5UyVJeRfnyI/ajSwy3ucMh8S+VmeeLwPdTYhSDmZdeVdz8qvV+zMzLHn5I9/p39iHe6JHOy3BXYSQelf3GmQG8AAHicY2Bh/MI4gYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgZWaAAUYGJBCQ5prC0MCgwFDFeOD/AQY9ps+MxTA1jAfAShQYxABDtQxkAAB4nGNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkKzDoMlgyxDNU/f8PFAXxDIC8xP///z/+f/3/1f8b/q+HmgAHjGwMcCFGJiDBxICmAGI1HLAwMLCysXNwcnHz8PIxEAP4GQQEhYRFRMXEJSSlpGVk5eQVFJWUVVTV1DU0iTKA1gAAxH4T6AAAAAARAUQAAAAB//8AAnic7VXPbxtFFH5vHXvcuN611/au8KHEzno3CEiJ1/aG4iQWSThEEFCVQMilSVX5QkCNkM3Nzq1RRWSEUkWJeosEEpzyQyBVIkm5pKowlaweKpRTOCChcMqFSs2aN7s2JOl/gCrN7Jv5Zjzz5nvfewYBwgCwipPgAQa9GwiX85usA/5Kb/i8B/lNj0BD2PBw2MvhTebDZ/lN5LgZNsOGGe4OL35RLOKk/X0YTToNqe05nUbhPj5+gb3A/veYcArzEPqm4MDQQf0CfoDTlGESxEAFkJO+qJLOZfS0EvUl9YzXMiRULeO7iXx+In93bmxsbgyHgzdFcV6cx0J+YmBg4sMxDj8VbwY56PrQvI8mXSIDpJKSwE8aQkPP5NIvo4IGIv4e6FICu7sBJRE4lDYF4TCgdAV2djl6KLk+N//APfyG6sBLdIrKjKzh607yM5RYlKlJ7iV5i4UFfYH1Do3Ozt6+3sN+mBkZmRleWtCrMdYze3t2dnSwlw3PDA/POH6BDjv0Xi9AhNGR1k65rK2tYc4x0PL9GNdwCfx0ayzBN6kM1+wHNa1e12q/ZVzb2gtB/Blv8PMsVNGwaihpdr2mTbYsYPMpcfEqcUH1zMoNIbkfJUo5vZdR9yK9nN68s8Pffyg9Qs8h54TmLhP8jijsuz5b5Ixh7a9r1ar2I30rqbPrWXJVZa3lVKWqOTzaSx1F4RgCPL4pgzaoFkXUMoQuTQjJWleHHBKEwn5uv93esn+1T1ZW0INp9Kys/LlvtZesZwf/wvYJ3/Y8Z5wwqr8WrnGezK/2uMF+IrDNWQHfwwL4aKKyPtqNr2gH8xphZLrfdffM4duoQ4hGnC6HK0c9Vg4zIltkCnVR8ZdKftRFPuGYyEol5rwZprFOv+f/HTCAiZg3m4hh3Taxfmyaq6ZJcfkbPobH+DqIABQVVZFQRLrFyqljM52hUOen3ojvSlCULn75tdQZkL71IytIF4Oi6981fIfO5zoihTBj3SEddceAq19QcITiEqTMAgrMKfX6Wto9mopMaW9Y4+OfjW9MDQ5ODS58FJm6RLNxq+/KEEfOcsHVQwnkSIfxpDpDhCKutGkolwk76ydFnOLu+nltXatUNCfHloQiHhNLEYBMiJwL+ZJI72mrZNve3rahGS8W262AsLXVhC1cPQW2c6GIn5POAJlDinMlFms1rd3w/VMTikHT3hWOhD2IA3jDDjdha5AnB0OfkTSwl+KdVrFfy6R+kTMRWbYfxuLxiP1QxoiclT8RjuKpVPwkWufzDF8VIpiTTdrZ0toluIfXOXc5V0P/JeC9s7LpDfkX/VHqIcVVkfv7UapjuqNVR6oWmo9uyFd/wqhjztcUXi0MqiRaqYTTZMrllhaa00Jd0OEC1wLxbHKiu5ORU9nYWL7TaNxZXq7kKtSq/Psa9jQa9pMG3q1alYpVdb7n8825M5FNGHWeZ/YD7K/hEh9mnHzzcP8Ek/zjuUCxCWfdbOBdME/qbidmMgtOO89byJUcz0G3iJPYbjF2y+/KDK8+x9s/0/HZNXicY2BkYGAA4i/2pjLx/DZfGbiZGEDgtnV8GYz+/+NfL0sa02cgl4MBLA0AMbUL9HicY2BkYGD6/K+XQY8l7f8PBgaWNAagCApwBwCRUwXDeJxj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBYqf/f+D0Q3IdoGKAdlMIHVAzPTm/3+G3UC2McRMprMQ/UwgPlAcAGckFoUAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADTgNgA4QDogOyA9gD8gQiBEIEVARmBI4EpAS+BN54nGNgZGBgcGeQZmBhAAEmIGZkAIk5MOiBBAANmwDaAHicrZA/b8IwEMWf+Se1Q9Wh2W8ERJDJgsRYJBaWqkP2NLhgQWJ0REKoX6Zbt47d+im6dOreb9GLcaUODB2IdPIvz+/sewZwhVcoHL8u7gMrRHgJ3MAlPgI3MVK3gVuI1HPgNq7VZ+AOokYkTtW6kL8731WzQh9PgRu4wXvgJh7wFbiFvqoCt0HqLXBH9G9M4bDFAQyLJVaoQDJzjp6sCbSvgXCKDTIsxFVIsShzcWdCtV7IGdbvYuq2B7bLVUXdvEeJTvSA0k22sIVlmq8y3mTF1i7E+SjNdavBXoZgrDFGLFfXbISs5xI7sXJWmL3j9TjOHZvY5q4U+aT3r2HmxcqvLPmMTzWUTISJ1P9HOPrr14i95/dtMHNlNXO8NJQMNU3o5KiiJzoex/VznCN4Kj6Wfet9JHNojHwu7bMhNbyzriStR0OtNZ3h0h8bQoX1AHicbVCJTsJAFJwBlVuK3Id+jPG+79s0pS3SCF2yXcSfN7rQNtDETTbZNzNvdt5DCovz+wPiv3OoL5FCGgaqqKGOBppooY0OuuhhF3vYx4HWHeEYJzjFGc5xgUtc4Ro3uMUd7vGARzzhGS94xRvemWKaa1znBjPMMsc8CyyyxE2WabDCLVZZY50NNtlimx122eM2d/KBa0l7aHoiqNhD90sK35Tex1DNkVxEjp1yzI3cgdJ1yZJSzOKqoFn7sy++9dtIKLVJKWFbXKUbvlDewLMt5WnEHonAnXeUQ/O+UEqMtWVOWo4n5kw17nbEzDetqRTSygRCqihiGCLE87F2OilFc4REZUlESHHVtuy4I1e5phRT35n/HtV66ImSZphtNcti0KVRmEELjOQ+9WoSzlqxGZrFfHYxicZryc7Q+w/2brRkAA==') format('woff');
591 font-weight: 400;
592 font-style: normal;
593}
594html,
595body,
596.framework7-root {
597 position: relative;
598 height: 100%;
599 width: 100%;
600 overflow-x: hidden;
601}
602body {
603 margin: 0;
604 padding: 0;
605 width: 100%;
606 background: #fff;
607 overflow: hidden;
608 -webkit-text-size-adjust: 100%;
609 -webkit-font-smoothing: antialiased;
610 font-family: var(--f7-font-family);
611 font-size: var(--f7-font-size);
612 line-height: var(--f7-line-height);
613 color: var(--f7-text-color);
614}
615.theme-dark body,
616body.theme-dark {
617 background: #000;
618}
619.theme-dark {
620 color: var(--f7-text-color);
621}
622.framework7-root {
623 overflow: hidden;
624 box-sizing: border-box;
625}
626.framework7-initializing *,
627.framework7-initializing *:before,
628.framework7-initializing *:after {
629 transition-duration: 0ms !important;
630}
631.device-ios,
632.device-android {
633 cursor: pointer;
634}
635.device-ios {
636 touch-action: manipulation;
637}
638@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
639 html,
640 body,
641 .framework7-root {
642 height: 671px;
643 }
644}
645@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
646 html,
647 body,
648 .framework7-root {
649 height: 672px;
650 }
651}
652* {
653 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
654 -webkit-touch-callout: none;
655}
656a,
657input,
658textarea,
659select {
660 outline: 0;
661}
662a {
663 cursor: pointer;
664 text-decoration: none;
665 color: var(--f7-theme-color);
666}
667.link,
668.item-link {
669 cursor: pointer;
670}
671p {
672 margin: 1em 0;
673}
674.disabled {
675 opacity: 0.55 !important;
676 pointer-events: none !important;
677}
678html.device-full-viewport,
679html.device-full-viewport body {
680 height: 100vh;
681}
682.ios .md-only,
683.ios .if-md,
684.ios .aurora-only,
685.ios .if-aurora,
686.ios .if-not-ios,
687.ios .not-ios {
688 display: none !important;
689}
690@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
691 .ios,
692 .ios body,
693 .ios .framework7-root {
694 height: 671px;
695 }
696}
697@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
698 .ios,
699 .ios body,
700 .ios .framework7-root {
701 height: 672px;
702 }
703}
704.md .ios-only,
705.md .if-ios,
706.md .aurora-only,
707.md .if-aurora,
708.md .if-not-md,
709.md .not-md {
710 display: none !important;
711}
712.aurora .ios-only,
713.aurora .if-ios,
714.aurora .md-only,
715.aurora .if-md,
716.aurora .if-not-aurora,
717.aurora .not-aurora {
718 display: none !important;
719}
720/* === Statusbar === */
721/* === Views === */
722.views,
723.view {
724 position: relative;
725 height: 100%;
726 z-index: 5000;
727 overflow: hidden;
728 box-sizing: border-box;
729}
730.framework7-root > .view,
731.framework7-root > .views {
732 height: calc(100% - var(--f7-appbar-app-offset, 0px));
733}
734.view-resize-handler {
735 width: 6px;
736 height: 100%;
737 position: absolute;
738 left: var(--f7-page-master-width);
739 margin-left: -3px;
740 top: 0;
741 cursor: col-resize;
742 z-index: 1000;
743 display: none;
744}
745.view-master-detail .view-resize-handler {
746 display: block;
747}
748/* === Pages === */
749:root {
750 --f7-page-master-width: 320px;
751 --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
752 --f7-page-master-border-width: 1px;
753 --f7-page-swipeback-transition-duration: 300ms;
754 --f7-page-parallax-transition-duration: 500ms;
755 --f7-page-cover-transition-duration: 450ms;
756 --f7-page-dive-transition-duration: 500ms;
757 --f7-page-fade-transition-duration: 500ms;
758 --f7-page-flip-transition-duration: 700ms;
759 --f7-page-push-transition-duration: 500ms;
760 /*
761 --f7-page-content-extra-padding-top: 0px;
762 --f7-page-content-extra-padding-bottom: 0px;
763 */
764 --f7-page-title-line-height: 1.2;
765 --f7-page-title-text-color: inherit;
766 --f7-page-title-padding-left: 16px;
767 --f7-page-title-padding-right: 16px;
768}
769.ios {
770 --f7-page-transition-duration: 400ms;
771 --f7-page-title-font-size: 34px;
772 --f7-page-title-font-weight: 700;
773 --f7-page-title-letter-spacing: -0.03em;
774 --f7-page-title-padding-vertical: 6px;
775 --f7-page-bg-color: #efeff4;
776}
777.ios .theme-dark,
778.ios.theme-dark {
779 --f7-page-bg-color: #000;
780}
781.md {
782 --f7-page-transition-duration: 250ms;
783 --f7-page-title-font-size: 34px;
784 --f7-page-title-font-weight: 500;
785 --f7-page-title-letter-spacing: 0;
786 --f7-page-title-padding-vertical: 8px;
787 --f7-page-bg-color: #fff;
788}
789.md .theme-dark,
790.md.theme-dark {
791 --f7-page-bg-color: #121212;
792}
793.aurora {
794 --f7-page-transition-duration: 400ms;
795 --f7-page-title-font-size: 26px;
796 --f7-page-title-font-weight: bold;
797 --f7-page-title-letter-spacing: -0.03em;
798 --f7-page-title-padding-vertical: 4px;
799 --f7-page-bg-color: #f4f5f7;
800}
801.aurora .theme-dark,
802.aurora.theme-dark {
803 --f7-page-bg-color: #121212;
804}
805.theme-dark {
806 --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
807}
808.pages {
809 position: relative;
810 width: 100%;
811 height: 100%;
812 overflow: hidden;
813}
814.page {
815 box-sizing: border-box;
816 position: absolute;
817 left: 0;
818 top: 0;
819 width: 100%;
820 height: 100%;
821 transform: none;
822 background-color: var(--f7-page-bg-color);
823 z-index: 1;
824}
825.page.stacked {
826 display: none;
827}
828.page-with-navbar-large-collapsed {
829 --f7-navbar-large-collapse-progress: 1;
830}
831.page-previous {
832 pointer-events: none;
833}
834.page-content {
835 overflow: auto;
836 -webkit-overflow-scrolling: touch;
837 box-sizing: border-box;
838 height: 100%;
839 position: relative;
840 z-index: 1;
841 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));
842 padding-bottom: calc(var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-safe-area-bottom) + var(--f7-page-content-extra-padding-bottom, 0px));
843}
844.page-transitioning,
845.page-transitioning .page-shadow-effect,
846.page-transitioning .page-opacity-effect {
847 transition-duration: var(--f7-page-transition-duration);
848}
849.page-transitioning-swipeback,
850.page-transitioning-swipeback .page-shadow-effect,
851.page-transitioning-swipeback .page-opacity-effect {
852 transition-duration: var(--f7-page-swipeback-transition-duration);
853}
854.router-transition-forward .page-next,
855.router-transition-backward .page-next,
856.router-transition-forward .page-current,
857.router-transition-backward .page-current,
858.router-transition-forward .page-previous:not(.stacked),
859.router-transition-backward .page-previous:not(.stacked) {
860 pointer-events: none;
861}
862.page-shadow-effect {
863 position: absolute;
864 top: 0;
865 width: 16px;
866 bottom: 0;
867 z-index: -1;
868 content: '';
869 opacity: 0;
870 right: 100%;
871 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
872}
873.page-opacity-effect {
874 position: absolute;
875 left: 0;
876 top: 0;
877 background: rgba(0, 0, 0, 0.1);
878 width: 100%;
879 bottom: 0;
880 content: '';
881 opacity: 0;
882 z-index: 10000;
883}
884.ios .page-previous {
885 transform: translate3d(-20%, 0, 0);
886}
887.ios .page-next {
888 transform: translate3d(100%, 0, 0);
889}
890.ios .page-previous .page-opacity-effect {
891 opacity: 1;
892}
893.ios .page-previous:after {
894 opacity: 1;
895}
896.ios .page-current .page-shadow-effect {
897 opacity: 1;
898}
899.ios .router-transition-forward .page-next {
900 animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
901}
902.ios .router-transition-forward .page-next:before {
903 position: absolute;
904 top: 0;
905 width: 16px;
906 bottom: 0;
907 z-index: -1;
908 content: '';
909 opacity: 0;
910 right: 100%;
911 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
912 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
913}
914.ios .router-transition-forward .page-current {
915 animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
916}
917.ios .router-transition-forward .page-current:after {
918 position: absolute;
919 left: 0;
920 top: 0;
921 background: rgba(0, 0, 0, 0.1);
922 width: 100%;
923 bottom: 0;
924 content: '';
925 opacity: 0;
926 z-index: 10000;
927 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
928}
929.ios .router-transition-backward .page-previous {
930 animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
931}
932.ios .router-transition-backward .page-previous:after {
933 position: absolute;
934 left: 0;
935 top: 0;
936 background: rgba(0, 0, 0, 0.1);
937 width: 100%;
938 bottom: 0;
939 content: '';
940 opacity: 0;
941 z-index: 10000;
942 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
943}
944.ios .router-transition-backward .page-current {
945 animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
946}
947.ios .router-transition-backward .page-current:before {
948 position: absolute;
949 top: 0;
950 width: 16px;
951 bottom: 0;
952 z-index: -1;
953 content: '';
954 opacity: 0;
955 right: 100%;
956 background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
957 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
958}
959@keyframes ios-page-next-to-current {
960 from {
961 transform: translate3d(100%, 0, 0);
962 }
963 to {
964 transform: translate3d(0%, 0, 0);
965 }
966}
967@keyframes ios-page-previous-to-current {
968 from {
969 transform: translate3d(-20%, 0, 0);
970 }
971 to {
972 transform: translate3d(0%, 0, 0);
973 }
974}
975@keyframes ios-page-current-to-previous {
976 from {
977 transform: translate3d(0, 0, 0);
978 }
979 to {
980 transform: translate3d(-20%, 0, 0);
981 }
982}
983@keyframes ios-page-current-to-next {
984 from {
985 transform: translate3d(0, 0, 0);
986 }
987 to {
988 transform: translate3d(100%, 0, 0);
989 }
990}
991@keyframes ios-page-element-fade-in {
992 from {
993 opacity: 0;
994 }
995 to {
996 opacity: 1;
997 }
998}
999@keyframes ios-page-element-fade-out {
1000 from {
1001 opacity: 1;
1002 }
1003 to {
1004 opacity: 0;
1005 }
1006}
1007.md .page-next {
1008 transform: translate3d(0, 56px, 0);
1009 opacity: 0;
1010 pointer-events: none;
1011}
1012.md .page-next.page-next-on-right {
1013 transform: translate3d(100%, 0, 0);
1014}
1015.md .router-transition-forward .page-next {
1016 animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1017}
1018.md .router-transition-forward .page-current {
1019 animation: none;
1020}
1021.md .router-transition-backward .page-current {
1022 animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1023}
1024.md .router-transition-backward .page-previous {
1025 animation: none;
1026}
1027@keyframes md-page-next-to-current {
1028 from {
1029 transform: translate3d(0, 56px, 0);
1030 opacity: 0;
1031 }
1032 to {
1033 transform: translate3d(0, 0px, 0);
1034 opacity: 1;
1035 }
1036}
1037@keyframes md-page-current-to-next {
1038 from {
1039 transform: translate3d(0, 0, 0);
1040 opacity: 1;
1041 }
1042 to {
1043 transform: translate3d(0, 56px, 0);
1044 opacity: 0;
1045 }
1046}
1047.aurora .page-next {
1048 pointer-events: none;
1049 transform: translate3d(100%, 0px, 0);
1050}
1051.aurora .page-next.page-next-on-right {
1052 transform: translate3d(100%, 0, 0);
1053}
1054.aurora .page-previous .page-opacity-effect {
1055 opacity: 1;
1056}
1057.aurora .page-previous:after {
1058 opacity: 1;
1059}
1060.aurora .router-transition-forward .page-next {
1061 animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1062}
1063.aurora .router-transition-forward .page-current {
1064 animation: none;
1065}
1066.aurora .router-transition-forward .page-current:after {
1067 position: absolute;
1068 left: 0;
1069 top: 0;
1070 background: rgba(0, 0, 0, 0.1);
1071 width: 100%;
1072 bottom: 0;
1073 content: '';
1074 opacity: 0;
1075 z-index: 10000;
1076 animation: aurora-page-element-fade-in var(--f7-page-transition-duration) forwards;
1077}
1078.aurora .router-transition-backward .page-current {
1079 animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1080}
1081.aurora .router-transition-backward .page-previous {
1082 animation: none;
1083}
1084.aurora .router-transition-backward .page-previous:after {
1085 position: absolute;
1086 left: 0;
1087 top: 0;
1088 background: rgba(0, 0, 0, 0.1);
1089 width: 100%;
1090 bottom: 0;
1091 content: '';
1092 opacity: 0;
1093 z-index: 10000;
1094 animation: aurora-page-element-fade-out var(--f7-page-transition-duration) forwards;
1095}
1096@keyframes aurora-page-next-to-current {
1097 from {
1098 transform: translate3d(100%, 0, 0);
1099 }
1100 to {
1101 transform: translate3d(0, 0px, 0);
1102 }
1103}
1104@keyframes aurora-page-current-to-next {
1105 from {
1106 transform: translate3d(0, 0, 0);
1107 }
1108 to {
1109 transform: translate3d(100%, 0, 0);
1110 }
1111}
1112@keyframes aurora-page-element-fade-in {
1113 from {
1114 opacity: 0;
1115 }
1116 to {
1117 opacity: 1;
1118 }
1119}
1120@keyframes aurora-page-element-fade-out {
1121 from {
1122 opacity: 1;
1123 }
1124 to {
1125 opacity: 0;
1126 }
1127}
1128.view:not(.view-master-detail) .page-master-stacked {
1129 display: none;
1130}
1131.view:not(.view-master-detail) .navbar-master-stacked {
1132 display: none;
1133}
1134.view-master-detail .page-master,
1135.view-master-detail .navbar-master {
1136 width: var(--f7-page-master-width);
1137 --f7-safe-area-right: 0px;
1138 --f7-safe-area-outer-right: 0px;
1139 border-right: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1140}
1141.view-master-detail .page-master-detail,
1142.view-master-detail .navbar-master-detail {
1143 width: calc(100% - var(--f7-page-master-width));
1144 --f7-safe-area-left: 0px;
1145 --f7-safe-area-outer-left: 0px;
1146 left: var(--f7-page-master-width);
1147}
1148.view-master-detail .page-master-detail > .navbar-master-detail {
1149 left: 0;
1150 right: 0;
1151 width: 100%;
1152}
1153.view-master-detail .page-master {
1154 z-index: 2;
1155 transform: none;
1156 pointer-events: auto;
1157}
1158.view-master-detail .page-master:before,
1159.view-master-detail .page-master:after {
1160 display: none;
1161}
1162.view-master-detail.router-transition .page-master {
1163 animation: none;
1164}
1165.md .router-transition-custom .page-previous,
1166.ios .router-transition-custom .page-previous,
1167.aurora .router-transition-custom .page-previous,
1168.md .router-transition-custom .page-next,
1169.ios .router-transition-custom .page-next,
1170.aurora .router-transition-custom .page-next {
1171 opacity: 1;
1172 transform: none;
1173}
1174.md .router-transition-custom.view-master-detail .page-master,
1175.ios .router-transition-custom.view-master-detail .page-master,
1176.aurora .router-transition-custom.view-master-detail .page-master {
1177 animation: none;
1178}
1179.page-title {
1180 position: relative;
1181 z-index: 10;
1182 text-overflow: ellipsis;
1183 white-space: nowrap;
1184 color: var(--f7-page-title-text-color);
1185 letter-spacing: var(--f7-page-title-letter-spacing);
1186 font-size: var(--f7-page-title-font-size);
1187 font-weight: var(--f7-page-title-font-weight);
1188 line-height: var(--f7-page-title-line-height);
1189 padding-left: calc(var(--f7-page-title-padding-left) + var(--f7-safe-area-left));
1190 padding-right: calc(var(--f7-page-title-padding-right) + var(--f7-safe-area-right));
1191 padding-top: var(--f7-page-title-padding-vertical);
1192 padding-bottom: var(--f7-page-title-padding-vertical);
1193 box-sizing: border-box;
1194 overflow: hidden;
1195 width: 100%;
1196}
1197.router-transition-f7-circle-forward:after,
1198.router-transition-f7-circle-backward:after {
1199 content: '';
1200 position: absolute;
1201 left: 50%;
1202 top: 50%;
1203 width: 100vmax;
1204 height: 100vmax;
1205 margin-left: -50vmax;
1206 margin-top: -50vmax;
1207 background: var(--f7-page-bg-color);
1208 z-index: 100;
1209}
1210.router-transition-f7-circle-forward:after {
1211 transform: scale(0);
1212 border-radius: 50%;
1213 animation: f7-circle-circle-in 400ms forwards;
1214}
1215.router-transition-f7-circle-forward .page-next {
1216 opacity: 0 !important;
1217 transform: scale(0.9) !important;
1218 animation: f7-circle-next-to-current 300ms forwards;
1219 animation-delay: 300ms;
1220 z-index: 150;
1221}
1222.router-transition-f7-circle-backward:after {
1223 animation: f7-circle-circle-out 300ms forwards;
1224 animation-delay: 350ms;
1225}
1226.router-transition-f7-circle-backward .page-current {
1227 animation: f7-circle-current-to-next 700ms forwards;
1228 z-index: 150;
1229}
1230@keyframes f7-circle-circle-in {
1231 from {
1232 transform: scale(0);
1233 border-radius: 50%;
1234 }
1235 50% {
1236 border-radius: 50%;
1237 }
1238 to {
1239 transform: scale(1);
1240 border-radius: 0%;
1241 }
1242}
1243@keyframes f7-circle-circle-out {
1244 from {
1245 transform: scale(1);
1246 border-radius: 0%;
1247 }
1248 50% {
1249 border-radius: 50%;
1250 }
1251 to {
1252 transform: scale(0);
1253 border-radius: 50%;
1254 }
1255}
1256@keyframes f7-circle-next-to-current {
1257 from {
1258 transform: scale(0.9);
1259 opacity: 0;
1260 }
1261 40% {
1262 transform: scale(1.035);
1263 opacity: 1;
1264 }
1265 to {
1266 transform: scale(1);
1267 opacity: 1;
1268 }
1269}
1270@keyframes f7-circle-current-to-next {
1271 from {
1272 transform: scale(1);
1273 opacity: 1;
1274 }
1275 34% {
1276 transform: scale(1.035);
1277 opacity: 1;
1278 }
1279 57% {
1280 transform: scale(0.9);
1281 opacity: 0;
1282 }
1283 to {
1284 transform: scale(0.9);
1285 opacity: 0;
1286 }
1287}
1288.router-transition-f7-cover-v-forward,
1289.router-transition-f7-cover-v-backward {
1290 background: #000;
1291 perspective: 1200px;
1292}
1293.router-transition-f7-cover-v-forward .page-next {
1294 animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
1295}
1296.router-transition-f7-cover-v-forward .page-current {
1297 animation: f7-cover-v-current-to-prev var(--f7-page-cover-transition-duration) forwards;
1298}
1299.router-transition-f7-cover-v-backward .page-current {
1300 animation: f7-cover-v-current-to-next var(--f7-page-cover-transition-duration) forwards;
1301}
1302.router-transition-f7-cover-v-backward .page-previous {
1303 animation: f7-cover-v-prev-to-current var(--f7-page-cover-transition-duration) forwards;
1304}
1305@keyframes f7-cover-v-next-to-current {
1306 from {
1307 transform: translateY(100%);
1308 }
1309 to {
1310 transform: translateY(0%);
1311 }
1312}
1313@keyframes f7-cover-v-current-to-next {
1314 from {
1315 transform: translateY(0%);
1316 }
1317 to {
1318 transform: translateY(100%);
1319 }
1320}
1321@keyframes f7-cover-v-current-to-prev {
1322 from {
1323 transform: translateZ(0);
1324 opacity: 1;
1325 }
1326 to {
1327 transform: translateZ(-300px);
1328 opacity: 0.5;
1329 }
1330}
1331@keyframes f7-cover-v-prev-to-current {
1332 from {
1333 transform: translateZ(-300px);
1334 opacity: 0.5;
1335 }
1336 to {
1337 transform: translateZ(0);
1338 opacity: 1;
1339 }
1340}
1341.router-transition-f7-cover-forward,
1342.router-transition-f7-cover-backward {
1343 background: #000;
1344 perspective: 1200px;
1345}
1346.router-transition-f7-cover-forward .page-next {
1347 animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
1348}
1349.router-transition-f7-cover-forward .page-current {
1350 animation: f7-cover-current-to-prev var(--f7-page-cover-transition-duration) forwards;
1351}
1352.router-transition-f7-cover-backward .page-current {
1353 animation: f7-cover-current-to-next var(--f7-page-cover-transition-duration) forwards;
1354}
1355.router-transition-f7-cover-backward .page-previous {
1356 animation: f7-cover-prev-to-current var(--f7-page-cover-transition-duration) forwards;
1357}
1358@keyframes f7-cover-next-to-current {
1359 from {
1360 transform: translateX(100%);
1361 }
1362 to {
1363 transform: translateX(0%);
1364 }
1365}
1366@keyframes f7-cover-current-to-next {
1367 from {
1368 transform: translateX(0%);
1369 }
1370 to {
1371 transform: translateX(100%);
1372 }
1373}
1374@keyframes f7-cover-current-to-prev {
1375 from {
1376 transform: translateZ(0);
1377 opacity: 1;
1378 }
1379 to {
1380 transform: translateZ(-300px);
1381 opacity: 0.5;
1382 }
1383}
1384@keyframes f7-cover-prev-to-current {
1385 from {
1386 transform: translateZ(-300px);
1387 opacity: 0.5;
1388 }
1389 to {
1390 transform: translateZ(0);
1391 opacity: 1;
1392 }
1393}
1394.router-transition-f7-dive-forward,
1395.router-transition-f7-dive-backward {
1396 background: var(--f7-page-bg-color);
1397 perspective: 1200px;
1398}
1399.router-transition-f7-dive-forward .page-next {
1400 animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
1401}
1402.router-transition-f7-dive-forward .page-current {
1403 animation: f7-dive-current-to-prev var(--f7-page-dive-transition-duration) forwards;
1404}
1405.router-transition-f7-dive-backward .page-current {
1406 animation: f7-dive-current-to-next var(--f7-page-dive-transition-duration) forwards;
1407}
1408.router-transition-f7-dive-backward .page-previous {
1409 animation: f7-dive-prev-to-current var(--f7-page-dive-transition-duration) forwards;
1410}
1411@keyframes f7-dive-next-to-current {
1412 from {
1413 opacity: 0;
1414 transform: translateZ(-150px);
1415 }
1416 50% {
1417 opacity: 0;
1418 }
1419 to {
1420 opacity: 1;
1421 transform: translateZ(0px);
1422 }
1423}
1424@keyframes f7-dive-current-to-next {
1425 from {
1426 opacity: 1;
1427 transform: translateZ(0px);
1428 }
1429 50% {
1430 opacity: 0;
1431 }
1432 to {
1433 opacity: 0;
1434 transform: translateZ(-150px);
1435 }
1436}
1437@keyframes f7-dive-current-to-prev {
1438 from {
1439 transform: translateZ(0px);
1440 opacity: 1;
1441 }
1442 50% {
1443 opacity: 0;
1444 }
1445 to {
1446 opacity: 0;
1447 transform: translateZ(150px);
1448 }
1449}
1450@keyframes f7-dive-prev-to-current {
1451 from {
1452 opacity: 0;
1453 transform: translateZ(150px);
1454 }
1455 50% {
1456 opacity: 0;
1457 }
1458 to {
1459 opacity: 1;
1460 transform: translateZ(0px);
1461 }
1462}
1463.router-transition-f7-fade-forward,
1464.router-transition-f7-fade-backward {
1465 background: var(--f7-page-bg-color);
1466}
1467.router-transition-f7-fade-forward .page-next {
1468 opacity: 0 !important;
1469 animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1470}
1471.router-transition-f7-fade-forward .page-current {
1472 animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1473}
1474.router-transition-f7-fade-backward .page-current {
1475 animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1476}
1477.router-transition-f7-fade-backward .page-previous {
1478 animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1479}
1480@keyframes f7-fade-in {
1481 from {
1482 opacity: 0;
1483 }
1484 50% {
1485 opacity: 0;
1486 }
1487 to {
1488 opacity: 1;
1489 }
1490}
1491@keyframes f7-fade-out {
1492 from {
1493 opacity: 1;
1494 }
1495 50% {
1496 opacity: 0;
1497 }
1498 to {
1499 opacity: 0;
1500 }
1501}
1502.router-transition-f7-flip-forward,
1503.router-transition-f7-flip-backward {
1504 background: #000;
1505 perspective: 1200px;
1506}
1507.router-transition-f7-flip-forward .page,
1508.router-transition-f7-flip-backward .page {
1509 -webkit-backface-visibility: hidden;
1510 backface-visibility: hidden;
1511}
1512.router-transition-f7-flip-forward .page-next {
1513 animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
1514}
1515.router-transition-f7-flip-forward .page-current {
1516 animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
1517}
1518.router-transition-f7-flip-backward .page-current {
1519 animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
1520}
1521.router-transition-f7-flip-backward .page-previous {
1522 animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
1523}
1524@keyframes f7-flip-next-to-current {
1525 from {
1526 border-radius: 30px;
1527 transform: translateZ(-100vmax) rotateY(180deg);
1528 }
1529 to {
1530 border-radius: 0;
1531 transform: translateZ(0px) rotateY(0deg);
1532 }
1533}
1534@keyframes f7-flip-current-to-next {
1535 from {
1536 border-radius: 0px;
1537 transform: translateZ(0px) rotateY(0deg);
1538 }
1539 to {
1540 border-radius: 30px;
1541 transform: translateZ(-100vmax) rotateY(180deg);
1542 }
1543}
1544@keyframes f7-flip-current-to-prev {
1545 from {
1546 border-radius: 0px;
1547 transform: translateZ(0px) rotateY(0deg);
1548 }
1549 to {
1550 border-radius: 30px;
1551 transform: translateZ(-100vmax) rotateY(-180deg);
1552 }
1553}
1554@keyframes f7-flip-prev-to-current {
1555 from {
1556 border-radius: 30px;
1557 transform: translateZ(-100vmax) rotateY(-180deg);
1558 }
1559 to {
1560 border-radius: 0px;
1561 transform: translateZ(0px) rotateY(0deg);
1562 }
1563}
1564.router-transition-f7-parallax-forward .page-next {
1565 animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
1566}
1567.router-transition-f7-parallax-forward .page-current {
1568 animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
1569}
1570.router-transition-f7-parallax-backward .page-current {
1571 animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
1572}
1573.router-transition-f7-parallax-backward .page-previous {
1574 animation: f7-parallax-prev-to-current var(--f7-page-parallax-transition-duration) forwards;
1575}
1576@keyframes f7-parallax-next-to-current {
1577 from {
1578 transform: translateX(100%);
1579 }
1580 to {
1581 transform: translateX(0%);
1582 }
1583}
1584@keyframes f7-parallax-current-to-next {
1585 from {
1586 transform: translateX(0%);
1587 }
1588 to {
1589 transform: translateX(100%);
1590 }
1591}
1592@keyframes f7-parallax-current-to-prev {
1593 from {
1594 transform: translateX(0%);
1595 }
1596 to {
1597 transform: translateX(-20%);
1598 }
1599}
1600@keyframes f7-parallax-prev-to-current {
1601 from {
1602 transform: translateX(-20%);
1603 }
1604 to {
1605 transform: translateX(0%);
1606 }
1607}
1608.router-transition-f7-push-forward .page-next {
1609 animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
1610}
1611.router-transition-f7-push-forward .page-current {
1612 animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
1613}
1614.router-transition-f7-push-backward .page-current {
1615 animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
1616}
1617.router-transition-f7-push-backward .page-previous {
1618 animation: f7-push-prev-to-current var(--f7-page-push-transition-duration) forwards;
1619}
1620@keyframes f7-push-next-to-current {
1621 from {
1622 transform: translateX(100%);
1623 }
1624 to {
1625 transform: translateX(0%);
1626 }
1627}
1628@keyframes f7-push-current-to-next {
1629 from {
1630 transform: translateX(0%);
1631 }
1632 to {
1633 transform: translateX(100%);
1634 }
1635}
1636@keyframes f7-push-current-to-prev {
1637 from {
1638 transform: translateX(0%);
1639 }
1640 to {
1641 transform: translateX(-100%);
1642 }
1643}
1644@keyframes f7-push-prev-to-current {
1645 from {
1646 transform: translateX(-100%);
1647 }
1648 to {
1649 transform: translateX(0%);
1650 }
1651}
1652/* === Link === */
1653:root {
1654 --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1655 --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1656 --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
1657}
1658.link,
1659.tab-link {
1660 display: inline-flex;
1661 align-items: center;
1662 align-content: center;
1663 justify-content: center;
1664 position: relative;
1665 box-sizing: border-box;
1666 z-index: 1;
1667 --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
1668}
1669.link i + span,
1670.link i + i,
1671.link span + i,
1672.link span + span {
1673 margin-left: 4px;
1674}
1675.ios .link {
1676 transition: opacity 300ms;
1677}
1678.ios .link.active-state {
1679 opacity: 0.3;
1680 transition-duration: 0ms;
1681}
1682.aurora .link {
1683 transition: opacity 300ms;
1684}
1685.aurora .link.active-state {
1686 opacity: 0.3;
1687 transition-duration: 0ms;
1688}
1689/* === Navbar === */
1690:root {
1691 /*
1692 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1693 --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
1694 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1695 --f7-navbar-border-color: var(--f7-bars-border-color);
1696 --f7-navbar-link-color: var(--f7-bars-link-color);
1697 --f7-navbar-text-color: var(--f7-bars-text-color);
1698 */
1699 --f7-navbar-hide-show-transition-duration: 400ms;
1700 --f7-navbar-title-line-height: 1.2;
1701 --f7-navbar-title-font-size: inherit;
1702 --f7-navbar-subtitle-text-align: inherit;
1703 --f7-navbar-large-title-line-height: 1.2;
1704 --f7-navbar-large-title-text-color: inherit;
1705 --f7-navbar-large-title-padding-left: 16px;
1706 --f7-navbar-large-title-padding-right: 16px;
1707}
1708.ios {
1709 --f7-navbar-height: 44px;
1710 --f7-navbar-tablet-height: 44px;
1711 --f7-navbar-font-size: 17px;
1712 --f7-navbar-inner-padding-left: 8px;
1713 --f7-navbar-inner-padding-right: 8px;
1714 --f7-navbar-title-font-weight: 600;
1715 --f7-navbar-title-margin-left: 0;
1716 --f7-navbar-title-margin-right: 0;
1717 --f7-navbar-title-text-align: center;
1718 --f7-navbar-subtitle-font-size: 10px;
1719 --f7-navbar-subtitle-line-height: 1;
1720 --f7-navbar-shadow-image: none;
1721 --f7-navbar-large-title-height: 52px;
1722 --f7-navbar-large-title-font-size: 34px;
1723 --f7-navbar-large-title-font-weight: 700;
1724 --f7-navbar-large-title-letter-spacing: -0.03em;
1725 --f7-navbar-large-title-padding-vertical: 6px;
1726 /*
1727 --f7-navbar-link-height: var(--f7-navbar-height);
1728 --f7-navbar-link-line-height: var(--f7-navbar-height);
1729 */
1730 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
1731}
1732.ios .theme-dark,
1733.ios.theme-dark {
1734 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
1735}
1736.md {
1737 --f7-navbar-height: 56px;
1738 --f7-navbar-tablet-height: 64px;
1739 --f7-navbar-font-size: 20px;
1740 --f7-navbar-inner-padding-left: 4px;
1741 --f7-navbar-inner-padding-right: 4px;
1742 --f7-navbar-title-font-weight: 500;
1743 --f7-navbar-title-margin-left: 20px;
1744 --f7-navbar-title-margin-right: 16px;
1745 --f7-navbar-title-text-align: left;
1746 --f7-navbar-subtitle-font-size: 14px;
1747 --f7-navbar-subtitle-line-height: 1.2;
1748 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1749 --f7-navbar-large-title-font-size: 34px;
1750 --f7-navbar-large-title-height: 56px;
1751 --f7-navbar-large-title-font-weight: 500;
1752 --f7-navbar-large-title-letter-spacing: 0;
1753 --f7-navbar-large-title-padding-vertical: 8px;
1754 --f7-navbar-link-height: 48px;
1755 --f7-navbar-link-line-height: 48px;
1756 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1757}
1758.md .theme-dark,
1759.md.theme-dark {
1760 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1761}
1762.aurora {
1763 --f7-navbar-height: 56px;
1764 --f7-navbar-tablet-height: 56px;
1765 --f7-navbar-font-size: 18px;
1766 --f7-navbar-inner-padding-left: 16px;
1767 --f7-navbar-inner-padding-right: 16px;
1768 --f7-navbar-title-font-weight: 600;
1769 --f7-navbar-title-margin-left: 0;
1770 --f7-navbar-title-margin-right: 0;
1771 --f7-navbar-title-text-align: center;
1772 --f7-navbar-subtitle-font-size: 14px;
1773 --f7-navbar-subtitle-line-height: 1;
1774 --f7-navbar-shadow-image: none;
1775 --f7-navbar-large-title-height: 48px;
1776 --f7-navbar-large-title-font-size: 28px;
1777 --f7-navbar-large-title-font-weight: bold;
1778 --f7-navbar-large-title-letter-spacing: 0;
1779 --f7-navbar-large-title-padding-vertical: 7px;
1780 --f7-navbar-link-height: auto;
1781 --f7-navbar-link-line-height: inherit;
1782 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1783}
1784.aurora .theme-dark,
1785.aurora.theme-dark {
1786 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1787}
1788.navbars,
1789.navbar {
1790 z-index: 500;
1791 left: 0;
1792 top: 0;
1793 width: 100%;
1794}
1795.navbars {
1796 position: absolute;
1797}
1798.navbars .navbar {
1799 z-index: auto;
1800}
1801.navbars .navbar-transitioning {
1802 z-index: 500;
1803}
1804.navbar {
1805 --f7-navbar-large-collapse-progress: 0;
1806 position: relative;
1807 -webkit-backface-visibility: hidden;
1808 backface-visibility: hidden;
1809 box-sizing: border-box;
1810 margin: 0;
1811 height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
1812 color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1813 font-size: var(--f7-navbar-font-size);
1814}
1815.navbar.stacked {
1816 display: none;
1817}
1818.navbar b {
1819 font-weight: 500;
1820}
1821.navbar a {
1822 color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1823}
1824.navbar a.link {
1825 display: flex;
1826 justify-content: flex-start;
1827 line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
1828 height: var(--f7-navbar-link-height, var(--f7-navbar-height));
1829}
1830.navbar .title,
1831.navbar .left,
1832.navbar .right {
1833 position: relative;
1834 z-index: 10;
1835}
1836.navbar .title {
1837 position: relative;
1838 overflow: hidden;
1839 text-overflow: ellipsis;
1840 white-space: nowrap;
1841 flex-shrink: 10;
1842 font-weight: var(--f7-navbar-title-font-weight);
1843 display: inline-block;
1844 line-height: var(--f7-navbar-title-line-height);
1845 text-align: var(--f7-navbar-title-text-align);
1846 font-size: var(--f7-navbar-title-font-size);
1847 margin-left: var(--f7-navbar-title-margin-left);
1848 margin-right: var(--f7-navbar-title-margin-left);
1849}
1850.navbar .subtitle {
1851 display: block;
1852 color: var(--f7-navbar-subtitle-text-color);
1853 font-weight: normal;
1854 font-size: var(--f7-navbar-subtitle-font-size);
1855 line-height: var(--f7-navbar-subtitle-line-height);
1856 text-align: var(--f7-navbar-subtitle-text-align);
1857}
1858.navbar .left,
1859.navbar .right {
1860 flex-shrink: 0;
1861 display: flex;
1862 justify-content: flex-start;
1863 align-items: center;
1864}
1865.navbar .right:first-child {
1866 position: absolute;
1867 height: 100%;
1868}
1869.navbar.no-hairline .navbar-bg:after,
1870.navbar.no-border .navbar-bg:after,
1871.navbar .no-hairline .navbar-bg:after,
1872.navbar .no-border .navbar-bg:after {
1873 display: none !important;
1874}
1875.navbar.no-hairline .title-large:after,
1876.navbar.no-border .title-large:after,
1877.navbar .no-hairline .title-large:after,
1878.navbar .no-border .title-large:after {
1879 display: none !important;
1880}
1881.navbar.no-shadow .navbar-bg:before,
1882.navbar .no-shadow .navbar-bg:before {
1883 display: none !important;
1884}
1885.navbar.navbar-hidden .navbar-bg:before,
1886.navbar-hidden .navbar .navbar-bg:before {
1887 opacity: 0 !important;
1888}
1889.navbar-bg {
1890 position: absolute;
1891 left: 0;
1892 top: 0;
1893 width: 100%;
1894 height: 100%;
1895 pointer-events: none;
1896 z-index: 0;
1897 background: var(--f7-navbar-bg-color);
1898 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1899 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
1900 transition-property: transform;
1901}
1902@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
1903 .ios-translucent-bars .navbar-bg {
1904 background-color: rgba(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
1905 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
1906 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
1907 }
1908}
1909.navbar-bg:after,
1910.navbar-bg:before {
1911 -webkit-backface-visibility: hidden;
1912 backface-visibility: hidden;
1913}
1914.navbar-bg:after {
1915 content: '';
1916 position: absolute;
1917 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1918 display: block;
1919 z-index: 15;
1920 top: auto;
1921 right: auto;
1922 bottom: 0;
1923 left: 0;
1924 height: 1px;
1925 width: 100%;
1926 transform-origin: 50% 100%;
1927 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1928}
1929.navbar-bg:before {
1930 content: '';
1931 position: absolute;
1932 right: 0;
1933 width: 100%;
1934 top: 100%;
1935 bottom: auto;
1936 height: 8px;
1937 pointer-events: none;
1938 background: var(--f7-navbar-shadow-image);
1939}
1940.navbar-bg:after {
1941 z-index: 1;
1942}
1943@media (min-width: 768px) and (min-height: 600px) {
1944 :root {
1945 --f7-navbar-height: var(--f7-navbar-tablet-height);
1946 }
1947}
1948.navbar-transitioning,
1949.navbar-transitioning .left,
1950.navbar-transitioning .title,
1951.navbar-transitioning .right,
1952.navbar-transitioning .title-large-text,
1953.navbar-transitioning .navbar-bg,
1954.navbar-transitioning .subnavbar,
1955.navbar-transitioning .navbar-bg:before {
1956 transition-duration: var(--f7-navbar-hide-show-transition-duration);
1957}
1958.navbar-page-transitioning {
1959 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1960}
1961.navbar-page-transitioning .title-large-text,
1962.navbar-page-transitioning .navbar-bg {
1963 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1964}
1965.navbar-hidden {
1966 transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
1967}
1968.navbar-hidden .navbar-inner {
1969 pointer-events: none;
1970}
1971.navbar-hidden .navbar-inner > .left,
1972.navbar-hidden .navbar-inner > .title,
1973.navbar-hidden .navbar-inner > .right {
1974 opacity: 0 !important;
1975}
1976.navbar-hidden .subnavbar {
1977 pointer-events: auto;
1978}
1979.navbar-hidden-statusbar {
1980 transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
1981}
1982.navbar-large-hidden .navbar-large {
1983 --f7-navbar-large-collapse-progress: 1;
1984}
1985.navbar-inner {
1986 position: absolute;
1987 left: 0;
1988 bottom: 0;
1989 width: 100%;
1990 height: 100%;
1991 display: flex;
1992 align-items: center;
1993 box-sizing: border-box;
1994 padding: var(--f7-safe-area-top) 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));
1995 transform: translate3d(0, 0, 0);
1996 z-index: 10;
1997}
1998.views > .navbar,
1999.view > .navbar,
2000.page > .navbar,
2001.navbars > .navbar {
2002 position: absolute;
2003}
2004.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
2005.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
2006 opacity: 0;
2007}
2008.navbar-large .navbar-bg {
2009 height: calc(100% + var(--f7-navbar-large-title-height));
2010 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2011}
2012.navbar-large-transparent .navbar-bg,
2013.navbar-large.navbar-transparent .navbar-bg {
2014 opacity: var(--f7-navbar-large-collapse-progress);
2015 height: 100%;
2016 transform: none;
2017}
2018.ios .router-navbar-transition-to-large .navbar-bg,
2019.ios .router-navbar-transition-from-large .navbar-bg,
2020.navbar-bg.ios-swipeback-navbar-bg-large,
2021.navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
2022.navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
2023 height: calc(100% + var(--f7-navbar-large-title-height));
2024 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2025}
2026.ios .navbar:not(.navbar-large) .navbar-bg {
2027 --f7-navbar-large-collapse-progress: 1;
2028}
2029.navbar-large .title {
2030 opacity: var(--f7-navbar-large-collapse-progress);
2031}
2032.navbar-large-collapsed {
2033 --f7-navbar-large-collapse-progress: 1;
2034}
2035.navbar-large-collapsed .title-large {
2036 pointer-events: none;
2037}
2038.navbar .title-large {
2039 box-sizing: border-box;
2040 position: absolute;
2041 left: 0;
2042 right: 0;
2043 top: 100%;
2044 display: flex;
2045 align-items: flex-end;
2046 white-space: nowrap;
2047 overflow: hidden;
2048 height: var(--f7-navbar-large-title-height);
2049 z-index: 5;
2050}
2051.navbar .title-large-text {
2052 text-overflow: ellipsis;
2053 white-space: nowrap;
2054 color: var(--f7-navbar-large-title-text-color);
2055 letter-spacing: var(--f7-navbar-large-title-letter-spacing);
2056 font-size: var(--f7-navbar-large-title-font-size);
2057 font-weight: var(--f7-navbar-large-title-font-weight);
2058 line-height: var(--f7-navbar-large-title-line-height);
2059 padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
2060 padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
2061 padding-top: var(--f7-navbar-large-title-padding-vertical);
2062 padding-bottom: var(--f7-navbar-large-title-padding-vertical);
2063 box-sizing: border-box;
2064 overflow: hidden;
2065 width: 100%;
2066 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2067 transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
2068}
2069.navbar-no-title-large-transition .title-large-text {
2070 transition-duration: 0ms;
2071}
2072.navbar ~ *,
2073.navbars ~ * {
2074 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
2075}
2076.navbar ~ * .page-with-navbar-large,
2077.navbar ~ .page-with-navbar-large,
2078.navbars ~ * .page-with-navbar-large,
2079.navbars ~ .page-with-navbar-large,
2080.page-with-navbar-large .navbar ~ * {
2081 --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
2082}
2083.page.no-navbar,
2084.page.no-navbar .navbar ~ * {
2085 --f7-page-navbar-offset: var(--f7-safe-area-top);
2086}
2087.ios {
2088 --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
2089 --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
2090 --f7-navbar-large-transparent-bg-center: translateX(0);
2091 --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2092 --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
2093 --f7-navbar-large-transparent-bg-left: translateX(-100%);
2094 --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2095 --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
2096 --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2097 --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
2098}
2099.ios .navbar a.icon-only {
2100 width: 44px;
2101 margin: 0;
2102 justify-content: center;
2103}
2104.ios .navbar .left a + a,
2105.ios .navbar .right a + a {
2106 margin-left: 16px;
2107}
2108.ios .navbar b {
2109 font-weight: 600;
2110}
2111.ios .navbar .left {
2112 margin-right: 10px;
2113}
2114.ios .navbar .right {
2115 margin-left: 10px;
2116}
2117.ios .navbar .right:first-child {
2118 right: calc(8px + var(--f7-safe-area-right));
2119}
2120.ios .navbar-inner {
2121 justify-content: space-between;
2122}
2123.ios .navbar-inner-left-title {
2124 justify-content: flex-start;
2125}
2126.ios .navbar-inner-left-title .right {
2127 margin-left: auto;
2128}
2129.ios .navbar-inner-left-title .title {
2130 text-align: left;
2131 margin-right: 10px;
2132}
2133.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
2134.ios .view:not(.view-master-detail) .navbar-previous .left,
2135.ios .navbar-next .left,
2136.ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
2137.ios .view:not(.view-master-detail) .navbar-previous .title,
2138.ios .navbar-next .title,
2139.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
2140.ios .view:not(.view-master-detail) .navbar-previous .right,
2141.ios .navbar-next .right,
2142.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
2143.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
2144.ios .navbar-next .subnavbar,
2145.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
2146.ios .view:not(.view-master-detail) .navbar-previous .fading,
2147.ios .navbar-next .fading {
2148 opacity: 0;
2149}
2150.ios .view-master-detail .navbar-previous:not(.navbar-master),
2151.ios .view:not(.view-master-detail) .navbar-previous {
2152 pointer-events: none;
2153}
2154.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
2155.ios .view:not(.view-master-detail) .navbar-previous .title-large {
2156 opacity: 0;
2157 transition-duration: 0ms;
2158}
2159.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
2160.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
2161 transform: scale(0.5);
2162 transition-duration: 0ms;
2163}
2164.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
2165.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
2166.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
2167.ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
2168 opacity: 1;
2169 transform: translate3d(-100%, 0, 0);
2170}
2171.ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
2172.ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
2173 transform: translateX(-100%);
2174}
2175.ios .navbar-next {
2176 pointer-events: none;
2177}
2178.ios .navbar-next .navbar-bg {
2179 transform: translateX(100%);
2180}
2181.ios .navbar-next .title-large .title-large-text {
2182 transition-duration: 0ms;
2183 transform: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2184}
2185.ios .navbar-next .subnavbar.sliding,
2186.ios .navbar-next .sliding .subnavbar {
2187 opacity: 1;
2188 transform: translate3d(100%, 0, 0);
2189}
2190.ios .router-transition .navbar,
2191.ios .router-transition .navbar-bg {
2192 transition-duration: var(--f7-page-transition-duration);
2193}
2194.ios .router-transition .navbar-bg {
2195 animation-duration: var(--f7-page-transition-duration);
2196 animation-fill-mode: forwards;
2197}
2198.ios .router-transition .title-large,
2199.ios .router-transition .title-large-text {
2200 transition-duration: 0ms;
2201}
2202.ios .router-transition .navbar-current .left,
2203.ios .router-transition .navbar-current .title,
2204.ios .router-transition .navbar-current .right,
2205.ios .router-transition .navbar-current .subnavbar {
2206 animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
2207}
2208.ios .router-transition .navbar-current .sliding.left,
2209.ios .router-transition .navbar-current .sliding.left .icon + span,
2210.ios .router-transition .navbar-current .sliding.title,
2211.ios .router-transition .navbar-current .sliding.right,
2212.ios .router-transition .navbar-current .sliding .left,
2213.ios .router-transition .navbar-current .sliding .left .icon + span,
2214.ios .router-transition .navbar-current .sliding .title,
2215.ios .router-transition .navbar-current .sliding .right {
2216 transition-duration: var(--f7-page-transition-duration);
2217 opacity: 0 !important;
2218 animation: none;
2219}
2220.ios .router-transition .navbar-current .sliding .subnavbar,
2221.ios .router-transition .navbar-current .sliding.subnavbar {
2222 transition-duration: var(--f7-page-transition-duration);
2223 animation: none;
2224 opacity: 1;
2225}
2226.ios .router-transition-forward .navbar-next .left,
2227.ios .router-transition-backward .navbar-previous .left,
2228.ios .router-transition-forward .navbar-next .title,
2229.ios .router-transition-backward .navbar-previous .title,
2230.ios .router-transition-forward .navbar-next .right,
2231.ios .router-transition-backward .navbar-previous .right,
2232.ios .router-transition-forward .navbar-next .subnavbar,
2233.ios .router-transition-backward .navbar-previous .subnavbar {
2234 animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
2235}
2236.ios .router-transition-forward .navbar-next .sliding.left,
2237.ios .router-transition-backward .navbar-previous .sliding.left,
2238.ios .router-transition-forward .navbar-next .sliding.left .icon + span,
2239.ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
2240.ios .router-transition-forward .navbar-next .sliding.title,
2241.ios .router-transition-backward .navbar-previous .sliding.title,
2242.ios .router-transition-forward .navbar-next .sliding.right,
2243.ios .router-transition-backward .navbar-previous .sliding.right,
2244.ios .router-transition-forward .navbar-next .sliding .left,
2245.ios .router-transition-backward .navbar-previous .sliding .left,
2246.ios .router-transition-forward .navbar-next .sliding .left .icon + span,
2247.ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
2248.ios .router-transition-forward .navbar-next .sliding .title,
2249.ios .router-transition-backward .navbar-previous .sliding .title,
2250.ios .router-transition-forward .navbar-next .sliding .right,
2251.ios .router-transition-backward .navbar-previous .sliding .right,
2252.ios .router-transition-forward .navbar-next .sliding .subnavbar,
2253.ios .router-transition-backward .navbar-previous .sliding .subnavbar {
2254 transition-duration: var(--f7-page-transition-duration);
2255 animation: none;
2256 transform: translate3d(0, 0, 0) !important;
2257 opacity: 1 !important;
2258}
2259.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
2260.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
2261 animation: none;
2262}
2263.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
2264.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
2265.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
2266.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
2267 opacity: 0 !important;
2268}
2269.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
2270.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
2271.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
2272.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
2273.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
2274.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
2275.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
2276.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
2277 animation: none;
2278}
2279.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
2280.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
2281 overflow: visible;
2282}
2283.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
2284.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
2285 animation: ios-navbar-large-title-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--f7-page-transition-duration) forwards;
2286}
2287.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
2288 animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
2289 transition: none;
2290 transform-origin: left center;
2291}
2292.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
2293 overflow: visible;
2294}
2295.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
2296 animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
2297}
2298.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
2299 animation: ios-navbar-large-title-text-slide-left var(--f7-page-transition-duration) forwards;
2300}
2301.ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
2302.ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
2303 animation: none;
2304 opacity: 0 !important;
2305 transition-duration: 0;
2306}
2307.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
2308 animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
2309 transition: none;
2310 transform-origin: left center;
2311}
2312.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
2313 overflow: visible;
2314}
2315.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
2316 animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
2317}
2318.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
2319 animation: ios-navbar-large-title-text-slide-right var(--f7-page-transition-duration) forwards;
2320}
2321.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
2322 opacity: 0;
2323}
2324.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
2325.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
2326 overflow: visible;
2327 opacity: 1;
2328}
2329.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
2330.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
2331 animation: ios-navbar-large-title-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--f7-page-transition-duration) forwards;
2332}
2333.ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
2334.ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
2335 animation: none;
2336 opacity: 0 !important;
2337 transition-duration: 0;
2338}
2339.ios .router-transition-forward .navbar-current .navbar-bg {
2340 animation-name: ios-navbar-bg-from-cb-to-lb;
2341}
2342.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
2343 animation-name: ios-navbar-bg-from-cb-to-lb;
2344}
2345.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2346 animation-name: ios-navbar-bg-from-cb-to-lt;
2347}
2348.ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2349 animation-name: ios-navbar-bg-from-ct-to-lb;
2350}
2351.ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
2352 animation-name: ios-navbar-bg-from-ct-to-lt;
2353}
2354.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
2355.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
2356 animation-name: ios-navbar-transparent-bg-from-c-to-l;
2357}
2358.ios .router-transition-forward .navbar-next .navbar-bg {
2359 animation-name: ios-navbar-bg-from-rb-to-cb;
2360}
2361.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
2362 animation-name: ios-navbar-bg-from-rb-to-cb;
2363}
2364.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2365 animation-name: ios-navbar-bg-from-rb-to-ct;
2366}
2367.ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2368 animation-name: ios-navbar-bg-from-rt-to-cb;
2369}
2370.ios .router-transition-backward .navbar-current .navbar-bg {
2371 animation-name: ios-navbar-bg-from-cb-to-rb;
2372}
2373.ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2374 animation-name: ios-navbar-bg-from-ct-to-rb;
2375}
2376.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2377 animation-name: ios-navbar-bg-from-cb-to-rt;
2378}
2379.ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
2380 animation-name: ios-navbar-bg-from-ct-to-rt;
2381}
2382.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2383.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2384 animation-name: ios-navbar-bg-from-cb-to-rb;
2385}
2386.ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
2387 animation-name: ios-navbar-bg-from-ct-to-rb;
2388}
2389.ios .router-transition-backward .navbar-previous .navbar-bg {
2390 animation-name: ios-navbar-bg-from-lb-to-cb;
2391}
2392.ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
2393 animation-name: ios-navbar-bg-from-lt-to-cb;
2394}
2395.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
2396 animation-name: ios-navbar-bg-from-lb-to-ct;
2397}
2398.ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
2399 animation-name: ios-navbar-bg-from-lt-to-ct;
2400}
2401.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2402.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2403 animation-name: ios-navbar-transparent-bg-from-l-to-c;
2404}
2405.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
2406.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
2407 animation-name: ios-navbar-bg-from-lb-to-ct;
2408}
2409.view-master-detail .navbars {
2410 z-index: auto;
2411}
2412.view-master-detail .page-master {
2413 z-index: 525;
2414}
2415.view-master-detail .navbar-master .navbar-inner,
2416.view-master-detail .navbar-master .navbar-bg {
2417 z-index: 550;
2418}
2419.view-master-detail .navbar-master-detail .navbar-inner,
2420.view-master-detail .navbar-master-detail .navbar-bg {
2421 z-index: 500;
2422}
2423.view-master-detail .navbar-master.navbar-previous {
2424 pointer-events: auto;
2425}
2426.view-master-detail .navbar-master.navbar-previous .left,
2427.view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
2428.view-master-detail .navbar-master.navbar-previous .right,
2429.view-master-detail .navbar-master.navbar-previous .subnavbar {
2430 opacity: 1;
2431}
2432.view-master-detail.router-transition .navbar-master .left,
2433.view-master-detail.router-transition .navbar-master .left .icon + span,
2434.view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
2435.view-master-detail.router-transition .navbar-master .right,
2436.view-master-detail.router-transition .navbar-master .subnavbar,
2437.view-master-detail.router-transition .navbar-master .fading {
2438 opacity: 1 !important;
2439 transition-duration: 0ms;
2440 transform: none !important;
2441 animation: none !important;
2442}
2443.view-master-detail.router-transition .navbar-master .navbar-bg {
2444 transition-duration: 0ms;
2445 animation: none !important;
2446}
2447.view-master-detail.router-transition .navbar-master.navbar-large .title {
2448 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
2449 transition-duration: 0ms;
2450 transform: none !important;
2451 animation: none !important;
2452}
2453.view-master-detail.router-transition .navbar-master.navbar-large .title-large,
2454.view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
2455 transition-duration: 0ms;
2456 animation: none !important;
2457}
2458.view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
2459.view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
2460 height: 100% !important;
2461 opacity: var(--f7-navbar-large-collapse-progress) !important;
2462}
2463@keyframes ios-navbar-element-fade-in {
2464 0% {
2465 opacity: 0;
2466 }
2467 25% {
2468 opacity: 0;
2469 }
2470 to {
2471 opacity: 1;
2472 }
2473}
2474@keyframes ios-navbar-element-fade-out {
2475 from {
2476 opacity: 1;
2477 }
2478 75% {
2479 opacity: 0;
2480 }
2481 to {
2482 opacity: 0;
2483 }
2484}
2485@keyframes ios-navbar-large-title-text-slide-up {
2486 0% {
2487 transform: translateX(0px) translateY(0%) scale(1);
2488 }
2489 100% {
2490 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical))) scale(0.5);
2491 }
2492}
2493@keyframes ios-navbar-large-title-text-slide-down {
2494 0% {
2495 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(0.5);
2496 }
2497 100% {
2498 transform: translateX(0px) translateY(0%) scale(1);
2499 }
2500}
2501@keyframes ios-navbar-large-title-text-slide-left {
2502 0% {
2503 transform: translateX(100%);
2504 }
2505 100% {
2506 transform: translateX(0%);
2507 }
2508}
2509@keyframes ios-navbar-large-title-text-slide-right {
2510 0% {
2511 transform: translateX(0%);
2512 }
2513 100% {
2514 transform: translateX(100%);
2515 }
2516}
2517@keyframes ios-navbar-large-title-text-fade-out {
2518 0% {
2519 opacity: 1;
2520 }
2521 80% {
2522 opacity: 0;
2523 }
2524 100% {
2525 opacity: 0;
2526 }
2527}
2528@keyframes ios-navbar-large-title-text-fade-in {
2529 0% {
2530 opacity: 0;
2531 }
2532 20% {
2533 opacity: 0;
2534 }
2535 100% {
2536 opacity: 1;
2537 }
2538}
2539@keyframes ios-navbar-back-text-current-to-previous {
2540 0% {
2541 opacity: 1;
2542 transform: translateY(0px) translateX(0px) scale(1);
2543 }
2544 80% {
2545 opacity: 0;
2546 }
2547 100% {
2548 opacity: 0;
2549 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) - var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
2550 }
2551}
2552@keyframes ios-navbar-back-text-next-to-current {
2553 0% {
2554 opacity: 0;
2555 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc(1 * var(--f7-navbar-large-title-height) + var(--f7-navbar-large-title-padding-vertical) / 2)) scale(2);
2556 }
2557 20% {
2558 opacity: 0;
2559 }
2560 100% {
2561 opacity: 1;
2562 transform: translateX(0px) translateY(0px) scale(1);
2563 }
2564}
2565@keyframes ios-navbar-bg-from-cb-to-lb {
2566 from {
2567 transform: var(--f7-navbar-large-bg-center-bottom);
2568 }
2569 to {
2570 transform: var(--f7-navbar-large-bg-left-bottom);
2571 }
2572}
2573@keyframes ios-navbar-bg-from-cb-to-lt {
2574 from {
2575 transform: var(--f7-navbar-large-bg-center-bottom);
2576 }
2577 to {
2578 transform: var(--f7-navbar-large-bg-left-top);
2579 }
2580}
2581@keyframes ios-navbar-bg-from-ct-to-lb {
2582 from {
2583 transform: var(--f7-navbar-large-bg-center-top);
2584 }
2585 to {
2586 transform: var(--f7-navbar-large-bg-left-bottom);
2587 }
2588}
2589@keyframes ios-navbar-bg-from-ct-to-lt {
2590 from {
2591 transform: var(--f7-navbar-large-bg-center-top);
2592 }
2593 to {
2594 transform: var(--f7-navbar-large-bg-left-top);
2595 }
2596}
2597@keyframes ios-navbar-bg-from-rb-to-cb {
2598 from {
2599 transform: var(--f7-navbar-large-bg-right-bottom);
2600 }
2601 to {
2602 transform: var(--f7-navbar-large-bg-center-bottom);
2603 }
2604}
2605@keyframes ios-navbar-bg-from-rb-to-ct {
2606 from {
2607 transform: var(--f7-navbar-large-bg-right-bottom);
2608 }
2609 to {
2610 transform: var(--f7-navbar-large-bg-center-top);
2611 }
2612}
2613@keyframes ios-navbar-bg-from-rt-to-cb {
2614 from {
2615 transform: var(--f7-navbar-large-bg-right-top);
2616 }
2617 to {
2618 transform: var(--f7-navbar-large-bg-center-bottom);
2619 }
2620}
2621@keyframes ios-navbar-bg-from-cb-to-rb {
2622 from {
2623 transform: var(--f7-navbar-large-bg-center-bottom);
2624 }
2625 to {
2626 transform: var(--f7-navbar-large-bg-right-bottom);
2627 }
2628}
2629@keyframes ios-navbar-bg-from-ct-to-rb {
2630 from {
2631 transform: var(--f7-navbar-large-bg-center-top);
2632 }
2633 to {
2634 transform: var(--f7-navbar-large-bg-right-bottom);
2635 }
2636}
2637@keyframes ios-navbar-bg-from-cb-to-rt {
2638 from {
2639 transform: var(--f7-navbar-large-bg-center-bottom);
2640 }
2641 to {
2642 transform: var(--f7-navbar-large-bg-right-top);
2643 }
2644}
2645@keyframes ios-navbar-bg-from-ct-to-rt {
2646 from {
2647 transform: var(--f7-navbar-large-bg-center-top);
2648 }
2649 to {
2650 transform: var(--f7-navbar-large-bg-right-top);
2651 }
2652}
2653@keyframes ios-navbar-bg-from-lb-to-cb {
2654 from {
2655 transform: var(--f7-navbar-large-bg-left-bottom);
2656 }
2657 to {
2658 transform: var(--f7-navbar-large-bg-center-bottom);
2659 }
2660}
2661@keyframes ios-navbar-bg-from-lt-to-cb {
2662 from {
2663 transform: var(--f7-navbar-large-bg-left-top);
2664 }
2665 to {
2666 transform: var(--f7-navbar-large-bg-center-bottom);
2667 }
2668}
2669@keyframes ios-navbar-bg-from-lb-to-ct {
2670 from {
2671 transform: var(--f7-navbar-large-bg-left-bottom);
2672 }
2673 to {
2674 transform: var(--f7-navbar-large-bg-center-top);
2675 }
2676}
2677@keyframes ios-navbar-bg-from-lt-to-ct {
2678 from {
2679 transform: var(--f7-navbar-large-bg-left-top);
2680 }
2681 to {
2682 transform: var(--f7-navbar-large-bg-center-top);
2683 }
2684}
2685@keyframes ios-navbar-transparent-bg-from-l-to-c {
2686 from {
2687 transform: var(--f7-navbar-large-transparent-bg-left);
2688 }
2689 to {
2690 transform: var(--f7-navbar-large-transparent-bg-center);
2691 }
2692}
2693@keyframes ios-navbar-transparent-bg-from-c-to-l {
2694 from {
2695 transform: var(--f7-navbar-large-transparent-bg-center);
2696 }
2697 to {
2698 transform: var(--f7-navbar-large-transparent-bg-left);
2699 }
2700}
2701.md .navbar a.link {
2702 padding: 0 12px;
2703 min-width: 48px;
2704}
2705.md .navbar a.link:before {
2706 content: '';
2707 width: 152%;
2708 height: 152%;
2709 left: -26%;
2710 top: -26%;
2711 position: absolute;
2712 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2713 background-repeat: no-repeat;
2714 background-position: center;
2715 background-size: 100% 100%;
2716 opacity: 0;
2717 pointer-events: none;
2718 transition-duration: 300ms;
2719 transition-property: opacity;
2720}
2721.md .navbar a.link.icon-only:before,
2722.md .navbar a.link.ripple-inset:before,
2723.md .navbar a.link.searchbar-disable-button:before,
2724.md .navbar a.link.input-clear-button:before,
2725.md .navbar a.link.notification-close-button:before {
2726 width: 100%;
2727 height: 100%;
2728 left: 0;
2729 top: 0;
2730 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
2731}
2732.md .navbar a.link.active-state:before {
2733 opacity: 1;
2734 transition-duration: 150ms;
2735}
2736.md .navbar a.icon-only {
2737 min-width: 0;
2738 flex-shrink: 0;
2739 width: 48px;
2740}
2741.md .navbar .right {
2742 margin-left: auto;
2743}
2744.md .navbar .right:first-child {
2745 right: var(--f7-safe-area-right);
2746}
2747.md .navbar-inner {
2748 justify-content: flex-start;
2749 overflow: hidden;
2750}
2751.md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
2752 overflow: visible;
2753}
2754.md .page.page-with-subnavbar .navbar-inner {
2755 overflow: visible;
2756}
2757.md .navbar-inner-centered-title {
2758 justify-content: space-between;
2759}
2760.md .navbar-inner-centered-title .right {
2761 margin-left: 0;
2762}
2763.md .navbar-inner-centered-title .title {
2764 text-align: center;
2765}
2766.aurora .navbar a.icon-only {
2767 margin: 0;
2768 justify-content: center;
2769}
2770.aurora .navbar .left a + a,
2771.aurora .navbar .right a + a {
2772 margin-left: 10px;
2773}
2774.aurora .navbar b {
2775 font-weight: bold;
2776}
2777.aurora .navbar .left {
2778 margin-right: 16px;
2779}
2780.aurora .navbar .right {
2781 margin-left: 16px;
2782}
2783.aurora .navbar .right:first-child {
2784 right: calc(16px + var(--f7-safe-area-right));
2785}
2786.aurora .navbar-inner {
2787 justify-content: space-between;
2788}
2789.aurora .navbar-inner-left-title {
2790 justify-content: flex-start;
2791}
2792.aurora .navbar-inner-left-title .right {
2793 margin-left: auto;
2794}
2795.aurora .navbar-inner-left-title .title {
2796 text-align: left;
2797 margin-right: 16px;
2798}
2799/* === Toolbar === */
2800:root {
2801 /*
2802 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2803 --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
2804 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2805 --f7-toolbar-border-color: var(--f7-bars-border-color);
2806 --f7-toolbar-link-color: var(--f7-bars-link-color);
2807 --f7-toolbar-text-color: var(--f7-bars-text-color);
2808 --f7-tabbar-link-active-color: var(--f7-theme-color);
2809 */
2810 --f7-tabbar-link-active-bg-color: transparent;
2811 --f7-tabbar-label-text-transform: none;
2812 --f7-toolbar-hide-show-transition-duration: 400ms;
2813}
2814.ios {
2815 --f7-toolbar-height: 44px;
2816 --f7-toolbar-font-size: 17px;
2817 --f7-toolbar-inner-padding-left: 8px;
2818 --f7-toolbar-inner-padding-right: 8px;
2819 /*
2820 --f7-toolbar-link-height: var(--f7-toolbar-height);
2821 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2822 */
2823 --f7-tabbar-labels-height: 50px;
2824 --f7-tabbar-labels-tablet-height: 50px;
2825 --f7-toolbar-top-shadow-image: none;
2826 --f7-toolbar-bottom-shadow-image: none;
2827 --f7-tabbar-icon-size: 28px;
2828 --f7-tabbar-link-text-transform: none;
2829 --f7-tabbar-link-font-weight: 400;
2830 --f7-tabbar-link-letter-spacing: 0;
2831 --f7-tabbar-label-font-size: 12px;
2832 --f7-tabbar-label-tablet-font-size: 14px;
2833 --f7-tabbar-label-font-weight: 500;
2834 --f7-tabbar-label-letter-spacing: 0.01;
2835 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
2836}
2837.ios .theme-dark,
2838.ios.theme-dark {
2839 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2840}
2841.md {
2842 --f7-toolbar-height: 48px;
2843 --f7-toolbar-font-size: 14px;
2844 --f7-toolbar-inner-padding-left: 0px;
2845 --f7-toolbar-inner-padding-right: 0px;
2846 /*
2847 --f7-toolbar-link-height: var(--f7-toolbar-height);
2848 --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2849 */
2850 --f7-tabbar-labels-height: 56px;
2851 --f7-tabbar-labels-tablet-height: 56px;
2852 /*
2853 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2854 */
2855 --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2856 --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2857 --f7-tabbar-icon-size: 24px;
2858 --f7-tabbar-link-text-transform: uppercase;
2859 --f7-tabbar-link-font-weight: 500;
2860 --f7-tabbar-link-letter-spacing: 0.05em;
2861 --f7-tabbar-label-font-size: 14px;
2862 --f7-tabbar-label-tablet-font-size: 14px;
2863 --f7-tabbar-label-font-weight: 400;
2864 --f7-tabbar-label-letter-spacing: 0;
2865 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2866}
2867.md .theme-dark,
2868.md.theme-dark {
2869 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2870}
2871.aurora {
2872 --f7-toolbar-height: 38px;
2873 --f7-toolbar-font-size: 14px;
2874 --f7-toolbar-inner-padding-left: 16px;
2875 --f7-toolbar-inner-padding-right: 16px;
2876 --f7-toolbar-link-height: auto;
2877 --f7-toolbar-link-line-height: inherit;
2878 --f7-tabbar-labels-height: 44px;
2879 --f7-tabbar-labels-tablet-height: 44px;
2880 --f7-tabbar-link-inactive-bg-color: rgba(0, 0, 0, 0.2);
2881 --f7-toolbar-top-shadow-image: none;
2882 --f7-toolbar-bottom-shadow-image: none;
2883 --f7-tabbar-icon-size: 18px;
2884 --f7-tabbar-link-text-transform: none;
2885 --f7-tabbar-link-font-weight: 400;
2886 --f7-tabbar-link-letter-spacing: 0;
2887 --f7-tabbar-label-font-size: 12px;
2888 --f7-tabbar-label-tablet-font-size: 12px;
2889 --f7-tabbar-label-font-weight: 500;
2890 --f7-tabbar-label-letter-spacing: 0.01;
2891 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2892}
2893.aurora .theme-dark,
2894.aurora.theme-dark {
2895 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2896}
2897.toolbar {
2898 width: 100%;
2899 position: relative;
2900 margin: 0;
2901 transform: translate3d(0, 0, 0);
2902 -webkit-backface-visibility: hidden;
2903 backface-visibility: hidden;
2904 z-index: 600;
2905 box-sizing: border-box;
2906 left: 0;
2907 height: var(--f7-toolbar-height);
2908 background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2909 background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
2910 color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2911 font-size: var(--f7-toolbar-font-size);
2912}
2913@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
2914 .ios-translucent-bars .toolbar {
2915 background-color: rgba(var(--f7-toolbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
2916 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
2917 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
2918 }
2919}
2920.toolbar b {
2921 font-weight: 600;
2922}
2923.toolbar a {
2924 color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2925 box-sizing: border-box;
2926 flex-shrink: 1;
2927 position: relative;
2928 white-space: nowrap;
2929 text-overflow: ellipsis;
2930}
2931.toolbar .link {
2932 display: flex;
2933 line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2934 height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
2935}
2936.toolbar i.icon {
2937 display: block;
2938}
2939.toolbar:after,
2940.toolbar:before {
2941 -webkit-backface-visibility: hidden;
2942 backface-visibility: hidden;
2943}
2944.views > .toolbar,
2945.view > .toolbar,
2946.page > .toolbar {
2947 position: absolute;
2948}
2949.toolbar-top,
2950.ios .toolbar-top-ios,
2951.md .toolbar-top-md,
2952.aurora .toolbar-top-aurora {
2953 top: 0;
2954}
2955.toolbar-top .tab-link-highlight,
2956.ios .toolbar-top-ios .tab-link-highlight,
2957.md .toolbar-top-md .tab-link-highlight,
2958.aurora .toolbar-top-aurora .tab-link-highlight {
2959 bottom: 0;
2960}
2961.toolbar-top.no-hairline:after,
2962.ios .toolbar-top-ios.no-hairline:after,
2963.md .toolbar-top-md.no-hairline:after,
2964.aurora .toolbar-top-aurora.no-hairline:after,
2965.toolbar-top.no-border:after,
2966.ios .toolbar-top-ios.no-border:after,
2967.md .toolbar-top-md.no-border:after,
2968.aurora .toolbar-top-aurora.no-border:after {
2969 display: none !important;
2970}
2971.toolbar-top.no-shadow:before,
2972.ios .toolbar-top-ios.no-shadow:before,
2973.md .toolbar-top-md.no-shadow:before,
2974.aurora .toolbar-top-aurora.no-shadow:before,
2975.toolbar-top.toolbar-hidden:before,
2976.ios .toolbar-top-ios.toolbar-hidden:before,
2977.md .toolbar-top-md.toolbar-hidden:before,
2978.aurora .toolbar-top-aurora.toolbar-hidden:before {
2979 display: none !important;
2980}
2981.toolbar-top:after,
2982.ios .toolbar-top-ios:after,
2983.md .toolbar-top-md:after,
2984.aurora .toolbar-top-aurora:after,
2985.toolbar-top:before,
2986.ios .toolbar-top-ios:before,
2987.md .toolbar-top-md:before,
2988.aurora .toolbar-top-aurora:before {
2989 -webkit-backface-visibility: hidden;
2990 backface-visibility: hidden;
2991}
2992.toolbar-top:after,
2993.ios .toolbar-top-ios:after,
2994.md .toolbar-top-md:after,
2995.aurora .toolbar-top-aurora:after {
2996 content: '';
2997 position: absolute;
2998 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2999 display: block;
3000 z-index: 15;
3001 top: auto;
3002 right: auto;
3003 bottom: 0;
3004 left: 0;
3005 height: 1px;
3006 width: 100%;
3007 transform-origin: 50% 100%;
3008 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3009}
3010.toolbar-top:before,
3011.ios .toolbar-top-ios:before,
3012.md .toolbar-top-md:before,
3013.aurora .toolbar-top-aurora:before {
3014 content: '';
3015 position: absolute;
3016 right: 0;
3017 width: 100%;
3018 top: 100%;
3019 bottom: auto;
3020 height: 8px;
3021 pointer-events: none;
3022 background: var(--f7-toolbar-top-shadow-image);
3023}
3024.toolbar-bottom,
3025.ios .toolbar-bottom-ios,
3026.md .toolbar-bottom-md,
3027.aurora .toolbar-bottom-aurora {
3028 bottom: 0;
3029 height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
3030}
3031.toolbar-bottom .tab-link-highlight,
3032.ios .toolbar-bottom-ios .tab-link-highlight,
3033.md .toolbar-bottom-md .tab-link-highlight,
3034.aurora .toolbar-bottom-aurora .tab-link-highlight {
3035 top: 0;
3036}
3037.toolbar-bottom .toolbar-inner,
3038.ios .toolbar-bottom-ios .toolbar-inner,
3039.md .toolbar-bottom-md .toolbar-inner,
3040.aurora .toolbar-bottom-aurora .toolbar-inner {
3041 height: auto;
3042 top: 0;
3043 bottom: var(--f7-safe-area-bottom);
3044}
3045.toolbar-bottom.no-hairline:before,
3046.ios .toolbar-bottom-ios.no-hairline:before,
3047.md .toolbar-bottom-md.no-hairline:before,
3048.aurora .toolbar-bottom-aurora.no-hairline:before,
3049.toolbar-bottom.no-border:before,
3050.ios .toolbar-bottom-ios.no-border:before,
3051.md .toolbar-bottom-md.no-border:before,
3052.aurora .toolbar-bottom-aurora.no-border:before {
3053 display: none !important;
3054}
3055.toolbar-bottom.no-shadow:after,
3056.ios .toolbar-bottom-ios.no-shadow:after,
3057.md .toolbar-bottom-md.no-shadow:after,
3058.aurora .toolbar-bottom-aurora.no-shadow:after,
3059.toolbar-bottom.toolbar-hidden:after,
3060.ios .toolbar-bottom-ios.toolbar-hidden:after,
3061.md .toolbar-bottom-md.toolbar-hidden:after,
3062.aurora .toolbar-bottom-aurora.toolbar-hidden:after {
3063 display: none !important;
3064}
3065.toolbar-bottom:before,
3066.ios .toolbar-bottom-ios:before,
3067.md .toolbar-bottom-md:before,
3068.aurora .toolbar-bottom-aurora:before {
3069 content: '';
3070 position: absolute;
3071 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
3072 display: block;
3073 z-index: 15;
3074 top: 0;
3075 right: auto;
3076 bottom: auto;
3077 left: 0;
3078 height: 1px;
3079 width: 100%;
3080 transform-origin: 50% 0%;
3081 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3082}
3083.toolbar-bottom:after,
3084.ios .toolbar-bottom-ios:after,
3085.md .toolbar-bottom-md:after,
3086.aurora .toolbar-bottom-aurora:after {
3087 content: '';
3088 position: absolute;
3089 right: 0;
3090 width: 100%;
3091 bottom: 100%;
3092 height: 8px;
3093 top: auto;
3094 pointer-events: none;
3095 background: var(--f7-toolbar-bottom-shadow-image);
3096 transform: translate3d(0, 0, 0);
3097}
3098.toolbar-inner {
3099 position: absolute;
3100 left: 0;
3101 top: 0;
3102 width: 100%;
3103 height: 100%;
3104 display: flex;
3105 justify-content: space-between;
3106 box-sizing: border-box;
3107 align-items: center;
3108 align-content: center;
3109 overflow: hidden;
3110 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));
3111}
3112.views > .tabbar,
3113.views > .tabbar-labels {
3114 z-index: 5001;
3115}
3116.tabbar a,
3117.tabbar-labels a {
3118 color: var(--f7-tabbar-link-inactive-color);
3119}
3120.tabbar .tab-link:not(.tab-link-active),
3121.tabbar-labels .tab-link:not(.tab-link-active) {
3122 background-color: var(--f7-tabbar-link-inactive-bg-color, transparent);
3123}
3124.tabbar .link,
3125.tabbar-labels .link {
3126 line-height: 1.4;
3127}
3128.tabbar .tab-link,
3129.tabbar-labels .tab-link,
3130.tabbar .link,
3131.tabbar-labels .link {
3132 height: 100%;
3133 width: 100%;
3134 box-sizing: border-box;
3135 display: flex;
3136 justify-content: center;
3137 align-items: center;
3138 flex-direction: column;
3139 text-transform: var(--f7-tabbar-link-text-transform);
3140 font-weight: var(--f7-tabbar-link-font-weight);
3141 letter-spacing: var(--f7-tabbar-link-letter-spacing);
3142 overflow: hidden;
3143}
3144.tabbar .tab-link-active,
3145.tabbar-labels .tab-link-active {
3146 color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
3147 background-color: var(--f7-tabbar-link-active-bg-color, transparent);
3148}
3149.tabbar i.icon,
3150.tabbar-labels i.icon {
3151 font-size: var(--f7-tabbar-icon-size);
3152 height: var(--f7-tabbar-icon-size);
3153 line-height: var(--f7-tabbar-icon-size);
3154}
3155.tabbar-labels {
3156 --f7-toolbar-height: var(--f7-tabbar-labels-height);
3157}
3158.tabbar-labels .tab-link,
3159.tabbar-labels .link {
3160 height: 100%;
3161 justify-content: space-between;
3162 align-items: center;
3163}
3164.tabbar-labels .tabbar-label {
3165 display: block;
3166 line-height: 1;
3167 margin: 0;
3168 position: relative;
3169 text-overflow: ellipsis;
3170 white-space: nowrap;
3171 font-size: var(--f7-tabbar-label-font-size);
3172 text-transform: var(--f7-tabbar-label-text-transform);
3173 font-weight: var(--f7-tabbar-label-font-weight);
3174 letter-spacing: var(--f7-tabbar-label-letter-spacing);
3175}
3176@media (min-width: 768px) and (min-height: 600px) {
3177 :root {
3178 --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
3179 --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
3180 }
3181}
3182.tabbar-scrollable .toolbar-inner {
3183 justify-content: flex-start;
3184 overflow: auto;
3185 -webkit-overflow-scrolling: touch;
3186}
3187.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
3188 display: none !important;
3189 width: 0 !important;
3190 height: 0 !important;
3191 -webkit-appearance: none;
3192 opacity: 0 !important;
3193}
3194.tabbar-scrollable .tab-link,
3195.tabbar-scrollable .link {
3196 width: auto;
3197 flex-shrink: 0;
3198}
3199.toolbar-transitioning,
3200.navbar-transitioning + .toolbar,
3201.navbar-transitioning ~ * .toolbar {
3202 transition-duration: var(--f7-toolbar-hide-show-transition-duration);
3203}
3204.toolbar-bottom ~ *,
3205.ios .toolbar-bottom-ios ~ *,
3206.md .toolbar-bottom-md ~ *,
3207.aurora .toolbar-bottom-aurora ~ * {
3208 --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
3209}
3210.toolbar-bottom.tabbar-labels ~ *,
3211.ios .toolbar-bottom-ios.tabbar-labels ~ *,
3212.md .toolbar-bottom-md.tabbar-labels ~ *,
3213.aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
3214 --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
3215}
3216.toolbar-bottom.toolbar-hidden,
3217.ios .toolbar-bottom-ios.toolbar-hidden,
3218.md .toolbar-bottom-md.toolbar-hidden,
3219.aurora .toolbar-bottom-aurora.toolbar-hidden {
3220 transform: translate3d(0, 100%, 0);
3221}
3222.toolbar-top ~ *,
3223.ios .toolbar-top-ios ~ *,
3224.md .toolbar-top-md ~ *,
3225.aurora .toolbar-top-aurora ~ * {
3226 --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
3227}
3228.toolbar-top.tabbar-labels ~ *,
3229.ios .toolbar-top-ios.tabbar-labels ~ *,
3230.md .toolbar-top-md.tabbar-labels ~ *,
3231.aurora .toolbar-top-aurora.tabbar-labels ~ * {
3232 --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
3233}
3234.toolbar-top.toolbar-hidden,
3235.ios .toolbar-top-ios.toolbar-hidden,
3236.md .toolbar-top-md.toolbar-hidden,
3237.aurora .toolbar-top-aurora.toolbar-hidden {
3238 transform: translate3d(0, -100%, 0);
3239}
3240.navbar ~ .toolbar-top,
3241.navbars ~ .toolbar-top,
3242.ios .navbar ~ .toolbar-top-ios,
3243.ios .navbars ~ .toolbar-top-ios,
3244.md .navbar ~ .toolbar-top-md,
3245.aurora .navbar ~ .toolbar-top-aurora,
3246.navbar ~ * .toolbar-top,
3247.navbars ~ * .toolbar-top,
3248.ios .navbar ~ * .toolbar-top-ios,
3249.ios .navbars ~ * .toolbar-top-ios,
3250.md .navbar ~ * .toolbar-top-md,
3251.aurora .navbar ~ * .toolbar-top-aurora,
3252.navbar ~ .page:not(.no-navbar) .toolbar-top,
3253.navbars ~ .page:not(.no-navbar) .toolbar-top,
3254.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
3255.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
3256.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
3257.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
3258 top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3259}
3260.navbar ~ .toolbar-top.toolbar-hidden,
3261.navbars ~ .toolbar-top.toolbar-hidden,
3262.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
3263.ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
3264.md .navbar ~ .toolbar-top-md.toolbar-hidden,
3265.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
3266.navbar ~ * .toolbar-top.toolbar-hidden,
3267.navbars ~ * .toolbar-top.toolbar-hidden,
3268.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
3269.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
3270.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
3271.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
3272.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3273.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3274.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3275.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3276.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
3277.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
3278 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
3279}
3280.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3281.navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3282.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3283.ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3284.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
3285.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3286.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3287.navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3288.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3289.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3290.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
3291.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3292.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3293.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3294.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3295.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3296.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
3297.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
3298 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
3299}
3300.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
3301.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3302.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
3303.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
3304.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3305.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3306.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3307.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
3308 transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
3309}
3310.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
3311.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3312.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
3313.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3314.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3315.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3316.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
3317 transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
3318}
3319.ios .toolbar a.icon-only {
3320 min-height: var(--f7-toolbar-height);
3321 display: flex;
3322 justify-content: center;
3323 align-items: center;
3324 margin: 0;
3325 min-width: 44px;
3326}
3327.ios .tabbar-labels .tab-link,
3328.ios .tabbar-labels .link {
3329 padding-top: 4px;
3330 padding-bottom: 4px;
3331}
3332.ios .tabbar-labels .tab-link i + span,
3333.ios .tabbar-labels .link i + span {
3334 margin: 0;
3335}
3336@media (min-width: 768px) and (min-height: 600px) {
3337 .ios .tabbar .tab-link,
3338 .ios .tabbar-labels .tab-link,
3339 .ios .tabbar .link,
3340 .ios .tabbar-labels .link {
3341 justify-content: center;
3342 flex-direction: row;
3343 }
3344 .ios .tabbar .tab-link i + span,
3345 .ios .tabbar-labels .tab-link i + span,
3346 .ios .tabbar .link i + span,
3347 .ios .tabbar-labels .link i + span {
3348 margin-left: 5px;
3349 }
3350}
3351.ios .tabbar-scrollable .toolbar-inner {
3352 justify-content: flex-start;
3353}
3354.ios .tabbar-scrollable .tab-link,
3355.ios .tabbar-scrollable .link {
3356 padding: 0 8px;
3357}
3358.md .toolbar .link {
3359 justify-content: center;
3360 padding: 0 12px;
3361 min-width: 48px;
3362}
3363.md .toolbar .link:before {
3364 content: '';
3365 width: 152%;
3366 height: 152%;
3367 left: -26%;
3368 top: -26%;
3369 position: absolute;
3370 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3371 background-repeat: no-repeat;
3372 background-position: center;
3373 background-size: 100% 100%;
3374 opacity: 0;
3375 pointer-events: none;
3376 transition-duration: 300ms;
3377 transition-property: opacity;
3378}
3379.md .toolbar .link.icon-only:before,
3380.md .toolbar .link.ripple-inset:before,
3381.md .toolbar .link.searchbar-disable-button:before,
3382.md .toolbar .link.input-clear-button:before,
3383.md .toolbar .link.notification-close-button:before {
3384 width: 100%;
3385 height: 100%;
3386 left: 0;
3387 top: 0;
3388 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
3389}
3390.md .toolbar .link.active-state:before {
3391 opacity: 1;
3392 transition-duration: 150ms;
3393}
3394.md .toolbar a.icon-only {
3395 min-width: 0;
3396 flex-shrink: 0;
3397}
3398.md .tabbar .tab-link,
3399.md .tabbar-labels .tab-link,
3400.md .tabbar .link,
3401.md .tabbar-labels .link {
3402 padding-left: 0;
3403 padding-right: 0;
3404}
3405.md .tabbar a.icon-only,
3406.md .tabbar-labels a.icon-only {
3407 flex-shrink: initial;
3408}
3409.md .tabbar .tab-link,
3410.md .tabbar-labels .tab-link {
3411 transition-duration: 300ms;
3412 overflow: hidden;
3413 position: relative;
3414}
3415.md .tabbar .tab-link-highlight,
3416.md .tabbar-labels .tab-link-highlight {
3417 position: absolute;
3418 height: 2px;
3419 background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
3420 transition-duration: 300ms;
3421 left: 0;
3422}
3423.md .tabbar-labels .tab-link,
3424.md .tabbar-labels .link {
3425 padding-top: 7px;
3426 padding-bottom: 7px;
3427}
3428.md .tabbar-label {
3429 max-width: 100%;
3430 overflow: hidden;
3431 line-height: 1.2;
3432}
3433.md .tabbar-scrollable .toolbar-inner {
3434 overflow: auto;
3435}
3436.md .tabbar-scrollable .tab-link,
3437.md .tabbar-scrollable .link {
3438 padding: 0 12px;
3439}
3440.aurora .toolbar a.icon-only {
3441 min-height: var(--f7-toolbar-height);
3442 display: flex;
3443 justify-content: center;
3444 align-items: center;
3445 margin: 0;
3446}
3447.aurora .tabbar .toolbar-inner,
3448.aurora .tabbar-labels .toolbar-inner {
3449 padding-left: 0;
3450 padding-right: 0;
3451}
3452.aurora .tabbar .tab-link,
3453.aurora .tabbar-labels .tab-link,
3454.aurora .tabbar .link,
3455.aurora .tabbar-labels .link {
3456 transition-duration: 200ms;
3457}
3458.aurora .tabbar-labels .tab-link,
3459.aurora .tabbar-labels .link {
3460 padding-top: 5px;
3461 padding-bottom: 5px;
3462}
3463.aurora .tabbar-labels .tab-link i + span,
3464.aurora .tabbar-labels .link i + span {
3465 margin: 0;
3466}
3467.aurora .tabbar-scrollable .toolbar-inner {
3468 justify-content: flex-start;
3469}
3470.aurora .tabbar-scrollable .tab-link,
3471.aurora .tabbar-scrollable .link {
3472 padding: 0 16px;
3473}
3474/* === Subnavbar === */
3475:root {
3476 /*
3477 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
3478 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
3479 --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
3480 --f7-subnavbar-border-color: var(--f7-bars-border-color);
3481 --f7-subnavbar-link-color: var(--f7-bars-link-color);
3482 --f7-subnavbar-text-color: var(--f7-bars-text-color);
3483 */
3484 --f7-subnavbar-title-line-height: 1.2;
3485}
3486.ios {
3487 --f7-subnavbar-height: 44px;
3488 --f7-subnavbar-inner-padding-left: 8px;
3489 --f7-subnavbar-inner-padding-right: 8px;
3490 --f7-subnavbar-title-font-size: 34px;
3491 --f7-subnavbar-title-font-weight: 700;
3492 --f7-subnavbar-title-letter-spacing: -0.03em;
3493 --f7-subnavbar-title-margin-left: 8px;
3494 --f7-subnavbar-shadow-image: none;
3495 /*
3496 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3497 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3498 */
3499}
3500.md {
3501 --f7-subnavbar-height: 48px;
3502 --f7-subnavbar-inner-padding-left: 16px;
3503 --f7-subnavbar-inner-padding-right: 16px;
3504 --f7-subnavbar-title-font-size: 20px;
3505 --f7-subnavbar-title-font-weight: 500;
3506 --f7-subnavbar-title-letter-spacing: 0;
3507 --f7-subnavbar-title-margin-left: 0px;
3508 --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
3509 /*
3510 --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3511 --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3512 */
3513}
3514.aurora {
3515 --f7-subnavbar-height: 48px;
3516 --f7-subnavbar-inner-padding-left: 16px;
3517 --f7-subnavbar-inner-padding-right: 16px;
3518 --f7-subnavbar-title-font-size: 28px;
3519 --f7-subnavbar-title-font-weight: bold;
3520 --f7-subnavbar-title-letter-spacing: 0em;
3521 --f7-subnavbar-title-margin-left: 0px;
3522 --f7-subnavbar-shadow-image: none;
3523 --f7-subnavbar-link-height: auto;
3524 --f7-subnavbar-link-line-height: inherit;
3525}
3526.subnavbar {
3527 width: 100%;
3528 position: absolute;
3529 left: 0;
3530 top: 0;
3531 z-index: 600;
3532 box-sizing: border-box;
3533 display: flex;
3534 justify-content: space-between;
3535 align-items: center;
3536 background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
3537 background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
3538 color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
3539}
3540@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
3541 .ios-translucent-bars .subnavbar {
3542 background-color: rgba(var(--f7-subnavbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
3543 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
3544 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
3545 }
3546}
3547.subnavbar .subnavbar-title {
3548 position: relative;
3549 overflow: hidden;
3550 text-overflow: ellpsis;
3551 white-space: nowrap;
3552 font-size: var(--f7-subnavbar-title-font-size);
3553 font-weight: var(--f7-subnavbar-title-font-weight);
3554 text-align: left;
3555 display: inline-block;
3556 line-height: var(--f7-subnavbar-title-line-height);
3557 letter-spacing: var(--f7-subnavbar-title-letter-spacing);
3558 margin-left: var(--f7-subnavbar-title-margin-left);
3559}
3560.subnavbar .left,
3561.subnavbar .right {
3562 flex-shrink: 0;
3563 display: flex;
3564 justify-content: flex-start;
3565 align-items: center;
3566}
3567.subnavbar .right:first-child {
3568 position: absolute;
3569 height: 100%;
3570}
3571.subnavbar a {
3572 color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
3573}
3574.subnavbar a.link {
3575 line-height: var(--f7-subnavbar-link-line-height, var(--f7-subnavbar-height));
3576 height: var(--f7-subnavbar-link-height, var(--f7-subnavbar-height));
3577}
3578.subnavbar a.icon-only {
3579 min-width: var(--f7-subnavbar-height);
3580}
3581.subnavbar.no-hairline:after,
3582.subnavbar.no-border:after {
3583 display: none !important;
3584}
3585.subnavbar.no-shadow:before,
3586.subnavbar.navbar-hidden:before {
3587 display: none !important;
3588}
3589.subnavbar:after,
3590.subnavbar:before {
3591 -webkit-backface-visibility: hidden;
3592 backface-visibility: hidden;
3593}
3594.subnavbar:after {
3595 content: '';
3596 position: absolute;
3597 background-color: var(--f7-subnavbar-border-color, var(--f7-bars-border-color));
3598 display: block;
3599 z-index: 15;
3600 top: auto;
3601 right: auto;
3602 bottom: 0;
3603 left: 0;
3604 height: 1px;
3605 width: 100%;
3606 transform-origin: 50% 100%;
3607 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3608}
3609.subnavbar:before {
3610 content: '';
3611 position: absolute;
3612 right: 0;
3613 width: 100%;
3614 top: 100%;
3615 bottom: auto;
3616 height: 8px;
3617 pointer-events: none;
3618 background: var(--f7-subnavbar-shadow-image);
3619}
3620.subnavbar-inner {
3621 width: 100%;
3622 height: 100%;
3623 display: flex;
3624 align-items: center;
3625 box-sizing: border-box;
3626 justify-content: space-between;
3627 overflow: hidden;
3628 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));
3629}
3630.subnavbar-inner.stacked {
3631 display: none;
3632}
3633.navbar .subnavbar {
3634 top: 100%;
3635}
3636.views > .subnavbar,
3637.view > .subnavbar,
3638.page > .subnavbar {
3639 position: absolute;
3640}
3641.navbar ~ * .subnavbar,
3642.navbars ~ * .subnavbar,
3643.page-with-subnavbar .navbar ~ .subnavbar,
3644.page-with-subnavbar .navbar ~ * .subnavbar,
3645.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
3646.navbar ~ .subnavbar,
3647.navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
3648.navbars ~ .subnavbar {
3649 top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3650}
3651.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
3652.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
3653.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
3654.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
3655.navbar .title-large ~ .subnavbar {
3656 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
3657 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
3658}
3659.page-with-subnavbar,
3660.subnavbar ~ * {
3661 --f7-page-subnavbar-offset: var(--f7-subnavbar-height);
3662}
3663.ios .subnavbar {
3664 height: calc(var(--f7-subnavbar-height) + 1px);
3665 margin-top: -1px;
3666 padding-top: 1px;
3667}
3668.ios .subnavbar .title {
3669 align-self: flex-start;
3670 flex-shrink: 10;
3671}
3672.ios .subnavbar .left a + a,
3673.ios .subnavbar .right a + a {
3674 margin-left: 16px;
3675}
3676.ios .subnavbar .left {
3677 margin-right: 10px;
3678}
3679.ios .subnavbar .right {
3680 margin-left: 10px;
3681}
3682.ios .subnavbar .right:first-child {
3683 right: 8px;
3684}
3685.ios .subnavbar a.link {
3686 justify-content: flex-start;
3687}
3688.ios .subnavbar a.icon-only {
3689 justify-content: center;
3690 margin: 0;
3691}
3692.md .subnavbar {
3693 height: var(--f7-subnavbar-height);
3694}
3695.md .subnavbar .right {
3696 margin-left: auto;
3697}
3698.md .subnavbar .right:first-child {
3699 right: 16px;
3700}
3701.md .subnavbar a.link {
3702 justify-content: center;
3703 padding: 0 12px;
3704}
3705.md .subnavbar a.link:before {
3706 content: '';
3707 width: 152%;
3708 height: 152%;
3709 left: -26%;
3710 top: -26%;
3711 position: absolute;
3712 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
3713 background-repeat: no-repeat;
3714 background-position: center;
3715 background-size: 100% 100%;
3716 opacity: 0;
3717 pointer-events: none;
3718 transition-duration: 300ms;
3719 transition-property: opacity;
3720}
3721.md .subnavbar a.link.icon-only:before,
3722.md .subnavbar a.link.ripple-inset:before,
3723.md .subnavbar a.link.searchbar-disable-button:before,
3724.md .subnavbar a.link.input-clear-button:before,
3725.md .subnavbar a.link.notification-close-button:before {
3726 width: 100%;
3727 height: 100%;
3728 left: 0;
3729 top: 0;
3730 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
3731}
3732.md .subnavbar a.link.active-state:before {
3733 opacity: 1;
3734 transition-duration: 150ms;
3735}
3736.md .subnavbar a.icon-only {
3737 flex-shrink: 0;
3738 padding: 0 12px;
3739}
3740.md .subnavbar-inner > a.link:first-child {
3741 margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3742}
3743.md .subnavbar-inner > a.link:last-child {
3744 margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3745}
3746.aurora .subnavbar {
3747 height: calc(var(--f7-subnavbar-height) + 1px);
3748 margin-top: -1px;
3749 padding-top: 1px;
3750}
3751.aurora .subnavbar .title {
3752 align-self: flex-start;
3753 flex-shrink: 10;
3754}
3755.aurora .subnavbar .left a + a,
3756.aurora .subnavbar .right a + a {
3757 margin-left: 10px;
3758}
3759.aurora .subnavbar .left {
3760 margin-right: 10px;
3761}
3762.aurora .subnavbar .right {
3763 margin-left: 10px;
3764}
3765.aurora .subnavbar .right:first-child {
3766 right: 16px;
3767}
3768.aurora .subnavbar a.link {
3769 justify-content: flex-start;
3770}
3771.aurora .subnavbar a.icon-only {
3772 justify-content: center;
3773 margin: 0;
3774}
3775/* === Content Block === */
3776:root {
3777 --f7-block-padding-horizontal: 16px;
3778 --f7-block-padding-vertical: 16px;
3779 --f7-block-font-size: inherit;
3780 --f7-block-text-color: inherit;
3781 --f7-block-header-margin: 10px;
3782 --f7-block-footer-margin: 10px;
3783 --f7-block-header-font-size: 14px;
3784 --f7-block-footer-font-size: 14px;
3785 --f7-block-title-text-transform: none;
3786 --f7-block-title-white-space: nowrap;
3787 --f7-block-title-medium-text-transform: none;
3788 --f7-block-title-large-text-transform: none;
3789 --f7-block-inset-side-margin: 16px;
3790 --f7-block-title-medium-text-color: #000;
3791 --f7-block-title-large-text-color: #000;
3792 --f7-block-strong-bg-color: #fff;
3793}
3794:root .theme-dark,
3795:root.theme-dark {
3796 --f7-block-title-text-color: #fff;
3797 --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
3798 --f7-block-title-medium-text-color: #fff;
3799 --f7-block-title-large-text-color: #fff;
3800 --f7-block-strong-bg-color: #1c1c1d;
3801}
3802.ios {
3803 --f7-block-margin-vertical: 35px;
3804 --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
3805 --f7-block-title-text-color: #000;
3806 --f7-block-title-font-size: 16px;
3807 --f7-block-title-font-weight: 600;
3808 --f7-block-title-line-height: 20px;
3809 --f7-block-title-margin-bottom: 10px;
3810 --f7-block-title-medium-font-size: 22px;
3811 --f7-block-title-medium-font-weight: bold;
3812 --f7-block-title-medium-line-height: 1.4;
3813 --f7-block-title-large-font-size: 30px;
3814 --f7-block-title-large-font-weight: bold;
3815 --f7-block-title-large-line-height: 1.3;
3816 --f7-block-inset-border-radius: 8px;
3817 --f7-block-strong-text-color: #000;
3818 --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
3819 --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
3820}
3821.ios .theme-dark,
3822.ios.theme-dark {
3823 --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
3824 --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
3825 --f7-block-strong-text-color: #fff;
3826}
3827.md {
3828 --f7-block-margin-vertical: 32px;
3829 --f7-block-strong-text-color: inherit;
3830 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3831 --f7-block-title-font-size: inherit;
3832 --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3833 --f7-block-title-font-weight: 500;
3834 --f7-block-title-line-height: 16px;
3835 --f7-block-title-margin-bottom: 16px;
3836 --f7-block-title-medium-font-size: 24px;
3837 --f7-block-title-medium-font-weight: 500;
3838 --f7-block-title-medium-line-height: 1.3;
3839 --f7-block-title-large-font-size: 34px;
3840 --f7-block-title-large-font-weight: 500;
3841 --f7-block-title-large-line-height: 1.2;
3842 --f7-block-inset-border-radius: 4px;
3843 --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3844 --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3845}
3846.md .theme-dark,
3847.md.theme-dark {
3848 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3849 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3850}
3851.aurora {
3852 --f7-block-margin-vertical: 32px;
3853 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3854 --f7-block-title-font-size: 16px;
3855 --f7-block-title-text-color: #000;
3856 --f7-block-title-font-weight: 600;
3857 --f7-block-title-line-height: 1.5;
3858 --f7-block-title-margin-bottom: 10px;
3859 --f7-block-title-medium-font-size: 24px;
3860 --f7-block-title-medium-font-weight: bold;
3861 --f7-block-title-medium-line-height: 1.4;
3862 --f7-block-title-large-font-size: 28px;
3863 --f7-block-title-large-font-weight: bold;
3864 --f7-block-title-large-line-height: 1.3;
3865 --f7-block-inset-border-radius: 8px;
3866 --f7-block-strong-text-color: inherit;
3867 --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3868 --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3869}
3870.aurora .theme-dark,
3871.aurora.theme-dark {
3872 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3873 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3874 --f7-block-strong-text-color: #fff;
3875}
3876.block {
3877 box-sizing: border-box;
3878 position: relative;
3879 z-index: 1;
3880 color: var(--f7-block-text-color);
3881 margin: var(--f7-block-margin-vertical) 0;
3882 padding-top: 0;
3883 padding-bottom: 0;
3884 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3885 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3886 font-size: var(--f7-block-font-size);
3887}
3888.block.no-hairlines:before,
3889.block.no-hairlines ul:before,
3890.md .block.no-hairlines-md:before,
3891.md .block.no-hairlines-md ul:before,
3892.ios .block.no-hairlines-ios:before,
3893.ios .block.no-hairlines-ios ul:before,
3894.aurora .block.no-hairlines-aurora:before,
3895.aurora .block.no-hairlines-aurora ul:before,
3896.block.no-hairlines:after,
3897.block.no-hairlines ul:after,
3898.md .block.no-hairlines-md:after,
3899.md .block.no-hairlines-md ul:after,
3900.ios .block.no-hairlines-ios:after,
3901.ios .block.no-hairlines-ios ul:after,
3902.aurora .block.no-hairlines-aurora:after,
3903.aurora .block.no-hairlines-aurora ul:after {
3904 display: none !important;
3905}
3906.block.no-hairline-top:before,
3907.block.no-hairline-top ul:before,
3908.md .block.no-hairline-top-md:before,
3909.md .block.no-hairline-top-md ul:before,
3910.ios .block.no-hairline-top-ios:before,
3911.ios .block.no-hairline-top-ios ul:before,
3912.aurora .block.no-hairline-top-aurora:before,
3913.aurora .block.no-hairline-top-aurora ul:before {
3914 display: none !important;
3915}
3916.block.no-hairline-bottom:after,
3917.block.no-hairline-bottom ul:after,
3918.md .block.no-hairline-bottom-md:after,
3919.md .block.no-hairline-bottom-md ul:after,
3920.ios .block.no-hairline-bottom-ios:after,
3921.ios .block.no-hairline-bottom-ios ul:after,
3922.aurora .block.no-hairline-bottom-aurora:after,
3923.aurora .block.no-hairline-bottom-aurora ul:after {
3924 display: none !important;
3925}
3926.block > h1:first-child,
3927.block > h2:first-child,
3928.block > h3:first-child,
3929.block > h4:first-child,
3930.block > p:first-child {
3931 margin-top: 0;
3932}
3933.block > h1:last-child,
3934.block > h2:last-child,
3935.block > h3:last-child,
3936.block > h4:last-child,
3937.block > p:last-child {
3938 margin-bottom: 0;
3939}
3940.block-strong {
3941 color: var(--f7-block-strong-text-color);
3942 padding-top: var(--f7-block-padding-vertical);
3943 padding-bottom: var(--f7-block-padding-vertical);
3944 background-color: var(--f7-block-strong-bg-color);
3945}
3946.block-strong:before {
3947 content: '';
3948 position: absolute;
3949 background-color: var(--f7-block-strong-border-color);
3950 display: block;
3951 z-index: 15;
3952 top: 0;
3953 right: auto;
3954 bottom: auto;
3955 left: 0;
3956 height: 1px;
3957 width: 100%;
3958 transform-origin: 50% 0%;
3959 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3960}
3961.block-strong:after {
3962 content: '';
3963 position: absolute;
3964 background-color: var(--f7-block-strong-border-color);
3965 display: block;
3966 z-index: 15;
3967 top: auto;
3968 right: auto;
3969 bottom: 0;
3970 left: 0;
3971 height: 1px;
3972 width: 100%;
3973 transform-origin: 50% 100%;
3974 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3975}
3976.block-title {
3977 position: relative;
3978 overflow: hidden;
3979 margin: 0;
3980 white-space: var(--f7-block-title-white-space);
3981 text-overflow: ellipsis;
3982 text-transform: var(--f7-block-title-text-transform);
3983 color: var(--f7-block-title-text-color);
3984 font-size: var(--f7-block-title-font-size, inherit);
3985 font-weight: var(--f7-block-title-font-weight);
3986 line-height: var(--f7-block-title-line-height);
3987 margin-top: var(--f7-block-margin-vertical);
3988 margin-bottom: var(--f7-block-title-margin-bottom);
3989 margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3990 margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3991}
3992.block-title + .list,
3993.block-title + .block,
3994.block-title + .card,
3995.block-title + .timeline,
3996.block-title + .block-header {
3997 margin-top: 0px;
3998}
3999.block-title-medium {
4000 font-size: var(--f7-block-title-medium-font-size);
4001 text-transform: var(--f7-block-title-medium-text-transform);
4002 color: var(--f7-block-title-medium-text-color);
4003 font-weight: var(--f7-block-title-medium-font-weight);
4004 line-height: var(--f7-block-title-medium-line-height);
4005}
4006.block-title-large {
4007 font-size: var(--f7-block-title-large-font-size);
4008 text-transform: var(--f7-block-title-large-text-transform);
4009 color: var(--f7-block-title-large-text-color);
4010 font-weight: var(--f7-block-title-large-font-weight);
4011 line-height: var(--f7-block-title-large-line-height);
4012}
4013.block > .block-title:first-child,
4014.list > .block-title:first-child {
4015 margin-top: 0;
4016 margin-left: 0;
4017 margin-right: 0;
4018}
4019.block-header {
4020 color: var(--f7-block-header-text-color);
4021 font-size: var(--f7-block-header-font-size);
4022 margin-bottom: var(--f7-block-header-margin);
4023 margin-top: var(--f7-block-margin-vertical);
4024}
4025.block-header + .list,
4026.block-header + .block,
4027.block-header + .card,
4028.block-header + .timeline {
4029 margin-top: var(--f7-block-header-margin);
4030}
4031.block-footer {
4032 color: var(--f7-block-footer-text-color);
4033 font-size: var(--f7-block-footer-font-size);
4034 margin-top: var(--f7-block-footer-margin);
4035 margin-bottom: var(--f7-block-margin-vertical);
4036}
4037.block-footer,
4038.block-header {
4039 padding-top: 0;
4040 padding-bottom: 0;
4041 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
4042 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
4043}
4044.block-footer ul:first-child,
4045.block-header ul:first-child,
4046.block-footer p:first-child,
4047.block-header p:first-child,
4048.block-footer h1:first-child,
4049.block-header h1:first-child,
4050.block-footer h2:first-child,
4051.block-header h2:first-child,
4052.block-footer h3:first-child,
4053.block-header h3:first-child,
4054.block-footer h4:first-child,
4055.block-header h4:first-child {
4056 margin-top: 0;
4057}
4058.block-footer ul:last-child,
4059.block-header ul:last-child,
4060.block-footer p:last-child,
4061.block-header p:last-child,
4062.block-footer h1:last-child,
4063.block-header h1:last-child,
4064.block-footer h2:last-child,
4065.block-header h2:last-child,
4066.block-footer h3:last-child,
4067.block-header h3:last-child,
4068.block-footer h4:last-child,
4069.block-header h4:last-child {
4070 margin-bottom: 0;
4071}
4072.block-footer ul:first-child:last-child,
4073.block-header ul:first-child:last-child,
4074.block-footer p:first-child:last-child,
4075.block-header p:first-child:last-child,
4076.block-footer h1:first-child:last-child,
4077.block-header h1:first-child:last-child,
4078.block-footer h2:first-child:last-child,
4079.block-header h2:first-child:last-child,
4080.block-footer h3:first-child:last-child,
4081.block-header h3:first-child:last-child,
4082.block-footer h4:first-child:last-child,
4083.block-header h4:first-child:last-child {
4084 margin-top: 0;
4085 margin-bottom: 0;
4086}
4087.list .block-header,
4088.block .block-header,
4089.card .block-header,
4090.timeline .block-header {
4091 margin-top: 0;
4092}
4093.list .block-footer,
4094.block .block-footer,
4095.card .block-footer,
4096.timeline .block-footer {
4097 margin-bottom: 0;
4098}
4099.list + .block-footer,
4100.block + .block-footer,
4101.card + .block-footer,
4102.timeline + .block-footer {
4103 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
4104}
4105.block + .block-footer {
4106 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
4107 margin-bottom: var(--f7-block-margin-vertical);
4108}
4109.block .block-header,
4110.block .block-footer {
4111 padding: 0;
4112}
4113.block.inset {
4114 border-radius: var(--f7-block-inset-border-radius);
4115 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4116 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4117 --f7-safe-area-left: 0px;
4118 --f7-safe-area-right: 0px;
4119}
4120.block-strong.inset:before,
4121.block-strong.inset:after {
4122 display: none !important;
4123}
4124@media (min-width: 480px) {
4125 .block.xsmall-inset {
4126 border-radius: var(--f7-block-inset-border-radius);
4127 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4128 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4129 --f7-safe-area-left: 0px;
4130 --f7-safe-area-right: 0px;
4131 }
4132 .block-strong.xsmall-inset:before,
4133 .block-strong.xsmall-inset:after {
4134 display: none !important;
4135 }
4136}
4137@media (min-width: 568px) {
4138 .block.small-inset {
4139 border-radius: var(--f7-block-inset-border-radius);
4140 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4141 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4142 --f7-safe-area-left: 0px;
4143 --f7-safe-area-right: 0px;
4144 }
4145 .block-strong.small-inset:before,
4146 .block-strong.small-inset:after {
4147 display: none !important;
4148 }
4149}
4150@media (min-width: 768px) {
4151 .block.medium-inset {
4152 border-radius: var(--f7-block-inset-border-radius);
4153 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4154 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4155 --f7-safe-area-left: 0px;
4156 --f7-safe-area-right: 0px;
4157 }
4158 .block-strong.medium-inset:before,
4159 .block-strong.medium-inset:after {
4160 display: none !important;
4161 }
4162}
4163@media (min-width: 1024px) {
4164 .block.large-inset {
4165 border-radius: var(--f7-block-inset-border-radius);
4166 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4167 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4168 --f7-safe-area-left: 0px;
4169 --f7-safe-area-right: 0px;
4170 }
4171 .block-strong.large-inset:before,
4172 .block-strong.large-inset:after {
4173 display: none !important;
4174 }
4175}
4176@media (min-width: 1200px) {
4177 .block.xlarge-inset {
4178 border-radius: var(--f7-block-inset-border-radius);
4179 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4180 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4181 --f7-safe-area-left: 0px;
4182 --f7-safe-area-right: 0px;
4183 }
4184 .block-strong.xlarge-inset:before,
4185 .block-strong.xlarge-inset:after {
4186 display: none !important;
4187 }
4188}
4189/* === List View === */
4190:root {
4191 --f7-list-inset-side-margin: 16px;
4192 --f7-list-item-cell-margin: 16px;
4193 --f7-list-item-padding-horizontal: 16px;
4194 --f7-list-media-item-padding-horizontal: 16px;
4195 --f7-list-item-text-max-lines: 2;
4196 --f7-list-chevron-icon-font-size: 20px;
4197 --f7-list-item-title-font-size: inherit;
4198 --f7-list-item-title-font-weight: 400;
4199 --f7-list-item-title-text-color: inherit;
4200 --f7-list-item-title-line-height: inherit;
4201 --f7-list-item-title-white-space: nowrap;
4202 --f7-list-item-subtitle-font-weight: 400;
4203 --f7-list-item-subtitle-text-color: inherit;
4204 --f7-list-item-subtitle-line-height: inherit;
4205 --f7-list-item-text-font-weight: 400;
4206 --f7-list-item-after-font-weight: 400;
4207 --f7-list-item-header-text-color: inherit;
4208 --f7-list-item-header-font-size: 12px;
4209 --f7-list-item-header-font-weight: 400;
4210 --f7-list-item-header-line-height: 1.2;
4211 --f7-list-item-footer-font-size: 12px;
4212 --f7-list-item-footer-font-weight: 400;
4213 --f7-list-item-footer-line-height: 1.2;
4214 /*
4215 --f7-list-button-text-color: var(--f7-theme-color);
4216 --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
4217 */
4218 --f7-list-button-font-size: inherit;
4219 --f7-list-button-font-weight: 400;
4220 --f7-list-button-text-align: center;
4221 --f7-list-item-divider-line-height: inherit;
4222 --f7-list-group-title-line-height: inherit;
4223 --f7-menu-list-offset: 8px;
4224 --f7-menu-list-border-radius: 8px;
4225 --f7-menu-list-font-size: 14px;
4226 --f7-menu-list-item-title-font-size: 14px;
4227 --f7-menu-list-item-title-font-weight: 500;
4228 --f7-menu-list-item-subtitle-font-size: 14px;
4229 --f7-menu-list-item-text-font-size: 14px;
4230 --f7-menu-list-item-after-font-size: 14px;
4231 --f7-list-bg-color: #fff;
4232 --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
4233 --f7-menu-list-selected-text-color: var(--f7-theme-color);
4234 --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4235}
4236:root .theme-dark,
4237:root.theme-dark {
4238 --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
4239 --f7-list-bg-color: #1c1c1d;
4240 --f7-list-border-color: rgba(255, 255, 255, 0.15);
4241 --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
4242 --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
4243 --f7-list-item-divider-bg-color: #232323;
4244 --f7-list-group-title-bg-color: #232323;
4245 --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
4246 --f7-menu-list-selected-text-color: inherit;
4247 --f7-menu-list-selected-bg-color: var(--f7-theme-color);
4248}
4249.ios {
4250 --f7-list-in-list-padding-left: 30px;
4251 --f7-list-inset-border-radius: 8px;
4252 --f7-list-margin-vertical: 35px;
4253 --f7-list-font-size: 17px;
4254 --f7-list-chevron-icon-area: 20px;
4255 --f7-list-border-color: rgba(0, 0, 0, 0.22);
4256 --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
4257 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
4258 --f7-list-item-subtitle-font-size: 15px;
4259 --f7-list-item-text-font-size: 15px;
4260 --f7-list-item-text-line-height: 21px;
4261 --f7-list-item-after-font-size: inherit;
4262 --f7-list-item-after-line-height: inherit;
4263 --f7-list-item-after-padding: 5px;
4264 --f7-list-item-min-height: 44px;
4265 --f7-list-item-media-margin: 16px;
4266 --f7-list-item-media-icons-margin: 5px;
4267 --f7-list-item-padding-vertical: 8px;
4268 --f7-list-media-item-padding-vertical: 10px;
4269 --f7-list-media-item-title-font-weight: 600;
4270 --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
4271 --f7-list-item-divider-height: 31px;
4272 --f7-list-item-divider-font-size: inherit;
4273 --f7-list-item-divider-font-weight: 400;
4274 --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4275 --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
4276 --f7-list-group-title-height: 31px;
4277 --f7-list-group-title-font-size: inherit;
4278 --f7-list-group-title-font-weight: 400;
4279 --f7-list-group-title-bg-color: #f7f7f7;
4280 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
4281 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
4282 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
4283 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
4284 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
4285}
4286.ios .theme-dark,
4287.ios.theme-dark {
4288 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
4289 --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
4290 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
4291 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
4292 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
4293 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
4294 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
4295}
4296.md {
4297 --f7-list-in-list-padding-left: 40px;
4298 --f7-list-inset-border-radius: 4px;
4299 --f7-list-margin-vertical: 32px;
4300 --f7-list-font-size: 16px;
4301 --f7-list-chevron-icon-area: 26px;
4302 --f7-list-border-color: rgba(0, 0, 0, 0.12);
4303 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4304 --f7-list-item-subtitle-font-size: 14px;
4305 --f7-list-item-text-font-size: 14px;
4306 --f7-list-item-text-line-height: 20px;
4307 --f7-list-item-after-font-size: 14px;
4308 --f7-list-item-after-line-height: inherit;
4309 --f7-list-item-after-padding: 8px;
4310 --f7-list-item-min-height: 48px;
4311 --f7-list-item-media-margin: 16px;
4312 --f7-list-item-media-icons-margin: 8px;
4313 --f7-list-item-padding-vertical: 8px;
4314 --f7-list-media-item-padding-vertical: 14px;
4315 /*
4316 --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
4317 */
4318 --f7-list-button-border-color: transparent;
4319 --f7-list-item-divider-height: 48px;
4320 --f7-list-item-divider-font-size: 14px;
4321 --f7-list-item-divider-font-weight: 400;
4322 --f7-list-item-divider-bg-color: #f4f4f4;
4323 --f7-list-item-divider-border-color: transparent;
4324 --f7-list-group-title-height: 48px;
4325 --f7-list-group-title-font-size: 14px;
4326 --f7-list-group-title-font-weight: 400;
4327 --f7-list-group-title-bg-color: #f4f4f4;
4328 --f7-menu-list-border-radius: 4px;
4329 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4330 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
4331 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
4332 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
4333 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
4334 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
4335}
4336.md .theme-dark,
4337.md.theme-dark {
4338 --f7-list-item-divider-text-color: #fff;
4339 --f7-list-group-title-text-color: #fff;
4340 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4341 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4342 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4343 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4344}
4345.aurora {
4346 --f7-list-in-list-padding-left: 16px;
4347 --f7-list-inset-border-radius: 8px;
4348 --f7-list-margin-vertical: 32px;
4349 --f7-list-font-size: 16px;
4350 --f7-list-chevron-icon-area: 20px;
4351 --f7-list-border-color: rgba(0, 0, 0, 0.12);
4352 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4353 --f7-list-item-subtitle-font-size: 14px;
4354 --f7-list-item-text-font-size: 14px;
4355 --f7-list-item-text-line-height: 20px;
4356 --f7-list-item-after-font-size: 14px;
4357 --f7-list-item-after-line-height: inherit;
4358 --f7-list-item-after-padding: 8px;
4359 --f7-list-item-min-height: 48px;
4360 --f7-list-item-media-margin: 16px;
4361 --f7-list-item-media-icons-margin: 8px;
4362 --f7-list-item-padding-vertical: 8px;
4363 --f7-list-media-item-padding-vertical: 16px;
4364 --f7-list-media-item-title-font-weight: 600;
4365 --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
4366 --f7-list-button-font-weight: 500;
4367 --f7-list-item-divider-height: 32px;
4368 --f7-list-item-divider-font-size: 14px;
4369 --f7-list-item-divider-font-weight: 400;
4370 --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4371 --f7-list-item-divider-border-color: transparent;
4372 --f7-list-group-title-height: 32px;
4373 --f7-list-group-title-font-size: 14px;
4374 --f7-list-group-title-font-weight: 500;
4375 --f7-list-group-title-bg-color: #f7f7f7;
4376 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4377 --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
4378 --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
4379 --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
4380 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
4381 --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
4382 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
4383 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
4384}
4385.aurora .theme-dark,
4386.aurora.theme-dark {
4387 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4388 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4389 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4390 --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
4391 --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
4392 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4393 --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
4394 --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
4395}
4396:root {
4397 --f7-list-chevron-icon-left: 'chevron_left';
4398 --f7-list-chevron-icon-right: 'chevron_right';
4399}
4400.list {
4401 --menu-list-offset: 0px;
4402 position: relative;
4403 z-index: 1;
4404 font-size: var(--f7-list-font-size);
4405 margin: var(--f7-list-margin-vertical) 0;
4406}
4407.list ul {
4408 list-style: none;
4409 margin: 0;
4410 padding: 0;
4411 position: relative;
4412 background: var(--f7-list-bg-color);
4413}
4414.list ul:before {
4415 content: '';
4416 position: absolute;
4417 background-color: var(--f7-list-border-color);
4418 display: block;
4419 z-index: 15;
4420 top: 0;
4421 right: auto;
4422 bottom: auto;
4423 left: 0;
4424 height: 1px;
4425 width: 100%;
4426 transform-origin: 50% 0%;
4427 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4428}
4429.list ul:after {
4430 content: '';
4431 position: absolute;
4432 background-color: var(--f7-list-border-color);
4433 display: block;
4434 z-index: 15;
4435 top: auto;
4436 right: auto;
4437 bottom: 0;
4438 left: 0;
4439 height: 1px;
4440 width: 100%;
4441 transform-origin: 50% 100%;
4442 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4443}
4444.list ul ul {
4445 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
4446}
4447.list ul ul:before,
4448.list ul ul:after {
4449 display: none !important;
4450}
4451.list li {
4452 position: relative;
4453 box-sizing: border-box;
4454}
4455.list .item-media {
4456 display: flex;
4457 flex-shrink: 0;
4458 flex-wrap: nowrap;
4459 align-items: center;
4460 box-sizing: border-box;
4461 padding-bottom: var(--f7-list-item-padding-vertical);
4462 padding-top: var(--f7-list-item-padding-vertical);
4463}
4464.list .item-media + .item-inner {
4465 margin-left: var(--f7-list-item-media-margin);
4466}
4467.list .item-media i + i,
4468.list .item-media i + img {
4469 margin-left: var(--f7-list-item-media-icons-margin);
4470}
4471.list .item-after {
4472 padding-left: var(--f7-list-item-after-padding);
4473}
4474.list .item-inner {
4475 position: relative;
4476 width: 100%;
4477 min-width: 0;
4478 display: flex;
4479 justify-content: space-between;
4480 box-sizing: border-box;
4481 align-items: center;
4482 align-self: stretch;
4483 padding-top: var(--f7-list-item-padding-vertical);
4484 padding-bottom: var(--f7-list-item-padding-vertical);
4485 min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4486 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4487}
4488.list .item-title {
4489 min-width: 0;
4490 flex-shrink: 1;
4491 white-space: var(--f7-list-item-title-white-space);
4492 position: relative;
4493 overflow: hidden;
4494 text-overflow: ellipsis;
4495 max-width: 100%;
4496 font-size: var(--f7-list-item-title-font-size);
4497 font-weight: var(--f7-list-item-title-font-weight);
4498 color: var(--f7-list-item-title-text-color);
4499 line-height: var(--f7-list-item-title-line-height);
4500}
4501.list .item-after {
4502 white-space: nowrap;
4503 flex-shrink: 0;
4504 display: flex;
4505 font-size: var(--f7-list-item-after-font-size);
4506 font-weight: var(--f7-list-item-after-font-weight);
4507 color: var(--f7-list-item-after-text-color);
4508 line-height: var(--f7-list-item-after-line-height);
4509 margin-left: auto;
4510}
4511.list .item-header,
4512.list .item-footer {
4513 white-space: normal;
4514}
4515.list .item-header {
4516 color: var(--f7-list-item-header-text-color);
4517 font-size: var(--f7-list-item-header-font-size);
4518 font-weight: var(--f7-list-item-header-font-weight);
4519 line-height: var(--f7-list-item-header-line-height);
4520}
4521.list .item-footer {
4522 color: var(--f7-list-item-footer-text-color);
4523 font-size: var(--f7-list-item-footer-font-size);
4524 font-weight: var(--f7-list-item-footer-font-weight);
4525 line-height: var(--f7-list-item-footer-line-height);
4526}
4527.list .item-link,
4528.list .list-button {
4529 transition-duration: 300ms;
4530 transition-property: background-color, color;
4531 display: block;
4532 position: relative;
4533 overflow: hidden;
4534 z-index: 0;
4535}
4536.list .item-link {
4537 color: inherit;
4538}
4539.list .item-link.active-state {
4540 background-color: var(--f7-list-link-pressed-bg-color);
4541}
4542.list .item-link .item-inner {
4543 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4544}
4545.list .item-content {
4546 display: flex;
4547 justify-content: space-between;
4548 box-sizing: border-box;
4549 align-items: center;
4550 min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4551 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
4552}
4553.list .item-subtitle {
4554 position: relative;
4555 overflow: hidden;
4556 white-space: nowrap;
4557 max-width: 100%;
4558 text-overflow: ellipsis;
4559 font-size: var(--f7-list-item-subtitle-font-size);
4560 font-weight: var(--f7-list-item-subtitle-font-weight);
4561 color: var(--f7-list-item-subtitle-text-color);
4562 line-height: var(--f7-list-item-subtitle-line-height);
4563}
4564.list .item-text {
4565 position: relative;
4566 overflow: hidden;
4567 text-overflow: ellipsis;
4568 /* autoprefixer: ignore next */
4569 -webkit-line-clamp: var(--f7-list-item-text-max-lines);
4570 /* autoprefixer: ignore next */
4571 -webkit-box-orient: vertical;
4572 display: -webkit-box;
4573 font-size: var(--f7-list-item-text-font-size);
4574 font-weight: var(--f7-list-item-text-font-weight);
4575 color: var(--f7-list-item-text-text-color);
4576 line-height: var(--f7-list-item-text-line-height);
4577 max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
4578}
4579.list .item-title-row {
4580 position: relative;
4581 display: flex;
4582 justify-content: space-between;
4583 box-sizing: border-box;
4584}
4585.list .item-title-row .item-after {
4586 align-self: center;
4587}
4588.list .item-row {
4589 display: flex;
4590 justify-content: space-between;
4591 box-sizing: border-box;
4592}
4593.list .item-cell {
4594 display: block;
4595 align-self: center;
4596 box-sizing: border-box;
4597 width: 100%;
4598 min-width: 0;
4599 margin-left: var(--f7-list-item-cell-margin);
4600 flex-shrink: 1;
4601}
4602.list .item-cell:first-child {
4603 margin-left: 0;
4604}
4605.list .ripple-wave + .item-cell {
4606 margin-left: 0;
4607}
4608.list li:last-child .list-button:after {
4609 display: none !important;
4610}
4611.list li:last-child > .item-inner:after,
4612.list li:last-child li:last-child > .item-inner:after,
4613.list li:last-child > .item-content > .item-inner:after,
4614.list li:last-child li:last-child > .item-content > .item-inner:after,
4615.list li:last-child > .swipeout-content > .item-content > .item-inner:after,
4616.list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
4617.list li:last-child > .item-link > .item-content > .item-inner:after,
4618.list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
4619 display: none !important;
4620}
4621.list li li:last-child .item-inner:after,
4622.list li:last-child li .item-inner:after {
4623 content: '';
4624 position: absolute;
4625 background-color: var(--f7-list-item-border-color);
4626 display: block;
4627 z-index: 15;
4628 top: auto;
4629 right: auto;
4630 bottom: 0;
4631 left: 0;
4632 height: 1px;
4633 width: 100%;
4634 transform-origin: 50% 100%;
4635 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4636}
4637.list.no-hairlines:before,
4638.list.no-hairlines ul:before,
4639.md .list.no-hairlines-md:before,
4640.md .list.no-hairlines-md ul:before,
4641.ios .list.no-hairlines-ios:before,
4642.ios .list.no-hairlines-ios ul:before,
4643.aurora .list.no-hairlines-aurora:before,
4644.aurora .list.no-hairlines-aurora ul:before,
4645.list.no-hairlines:after,
4646.list.no-hairlines ul:after,
4647.md .list.no-hairlines-md:after,
4648.md .list.no-hairlines-md ul:after,
4649.ios .list.no-hairlines-ios:after,
4650.ios .list.no-hairlines-ios ul:after,
4651.aurora .list.no-hairlines-aurora:after,
4652.aurora .list.no-hairlines-aurora ul:after {
4653 display: none !important;
4654}
4655.list.no-hairline-top:before,
4656.list.no-hairline-top ul:before,
4657.md .list.no-hairline-top-md:before,
4658.md .list.no-hairline-top-md ul:before,
4659.ios .list.no-hairline-top-ios:before,
4660.ios .list.no-hairline-top-ios ul:before,
4661.aurora .list.no-hairline-top-aurora:before,
4662.aurora .list.no-hairline-top-aurora ul:before {
4663 display: none !important;
4664}
4665.list.no-hairline-bottom:after,
4666.list.no-hairline-bottom ul:after,
4667.md .list.no-hairline-bottom-md:after,
4668.md .list.no-hairline-bottom-md ul:after,
4669.ios .list.no-hairline-bottom-ios:after,
4670.ios .list.no-hairline-bottom-ios ul:after,
4671.aurora .list.no-hairline-bottom-aurora:after,
4672.aurora .list.no-hairline-bottom-aurora ul:after {
4673 display: none !important;
4674}
4675.list.no-hairlines-between .item-inner:after,
4676.md .list.no-hairlines-between-md .item-inner:after,
4677.ios .list.no-hairlines-between-ios .item-inner:after,
4678.aurora .list.no-hairlines-between-aurora .item-inner:after,
4679.list.no-hairlines-between .list-button:after,
4680.md .list.no-hairlines-between-md .list-button:after,
4681.ios .list.no-hairlines-between-ios .list-button:after,
4682.aurora .list.no-hairlines-between-aurora .list-button:after,
4683.list.no-hairlines-between .item-divider:after,
4684.md .list.no-hairlines-between-md .item-divider:after,
4685.ios .list.no-hairlines-between-ios .item-divider:after,
4686.aurora .list.no-hairlines-between-aurora .item-divider:after,
4687.list.no-hairlines-between .list-group-title:after,
4688.md .list.no-hairlines-between-md .list-group-title:after,
4689.ios .list.no-hairlines-between-ios .list-group-title:after,
4690.aurora .list.no-hairlines-between-aurora .list-group-title:after,
4691.list.no-hairlines-between .list-group-title:after,
4692.md .list.no-hairlines-between-md .list-group-title:after,
4693.ios .list.no-hairlines-between-ios .list-group-title:after,
4694.aurora .list.no-hairlines-between-aurora .list-group-title:after {
4695 display: none !important;
4696}
4697.list.no-hairlines-between.simple-list li:after,
4698.md .list.no-hairlines-between-md.simple-list li:after,
4699.ios .list.no-hairlines-between-ios.simple-list li:after,
4700.aurora .list.no-hairlines-between-aurora.simple-list li:after {
4701 display: none !important;
4702}
4703.list.no-hairlines-between.links-list a:after,
4704.md .list.no-hairlines-between-md.links-list a:after,
4705.ios .list.no-hairlines-between-ios.links-list a:after,
4706.aurora .list.no-hairlines-between-aurora.links-list a:after {
4707 display: none !important;
4708}
4709.list-button {
4710 --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
4711 padding: 0 var(--f7-list-item-padding-horizontal);
4712 line-height: var(--f7-list-item-min-height);
4713 color: var(--f7-list-button-text-color, var(--f7-theme-color));
4714 font-size: var(--f7-list-button-font-size);
4715 font-weight: var(--f7-list-button-font-weight);
4716 text-align: var(--f7-list-button-text-align);
4717}
4718.list-button:after {
4719 content: '';
4720 position: absolute;
4721 background-color: var(--f7-list-button-border-color);
4722 display: block;
4723 z-index: 15;
4724 top: auto;
4725 right: auto;
4726 bottom: 0;
4727 left: 0;
4728 height: 1px;
4729 width: 100%;
4730 transform-origin: 50% 100%;
4731 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4732}
4733.list-button.active-state {
4734 background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4735}
4736.list-button[class*='color-'] {
4737 --f7-list-button-text-color: var(--f7-theme-color);
4738}
4739.simple-list li {
4740 position: relative;
4741 white-space: nowrap;
4742 text-overflow: ellipsis;
4743 max-width: 100%;
4744 box-sizing: border-box;
4745 display: flex;
4746 justify-content: space-between;
4747 align-items: center;
4748 align-content: center;
4749 line-height: var(--f7-list-item-min-height);
4750 height: var(--f7-list-item-min-height);
4751 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4752 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4753}
4754.simple-list li:after {
4755 left: var(--f7-list-item-padding-horizontal);
4756 width: auto;
4757 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4758 right: 0;
4759}
4760.simple-list li:last-child:after {
4761 display: none !important;
4762}
4763.links-list li {
4764 z-index: 1;
4765}
4766.links-list a {
4767 transition-duration: 300ms;
4768 transition-property: background-color;
4769 display: block;
4770 position: relative;
4771 overflow: hidden;
4772 display: flex;
4773 align-items: center;
4774 align-content: center;
4775 justify-content: space-between;
4776 box-sizing: border-box;
4777 white-space: nowrap;
4778 text-overflow: ellipsis;
4779 max-width: 100%;
4780 height: var(--f7-list-item-min-height);
4781 color: inherit;
4782}
4783.links-list a .ripple-wave {
4784 z-index: 0;
4785}
4786.links-list a:after {
4787 width: auto;
4788}
4789.links-list a.active-state {
4790 background-color: var(--f7-list-link-pressed-bg-color);
4791}
4792.links-list a {
4793 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4794 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4795}
4796.links-list a:after {
4797 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4798 right: 0;
4799}
4800.links-list li:last-child a:after {
4801 display: none !important;
4802}
4803.simple-list li:after,
4804.links-list a:after,
4805.list .item-inner:after {
4806 content: '';
4807 position: absolute;
4808 background-color: var(--f7-list-item-border-color);
4809 display: block;
4810 z-index: 15;
4811 top: auto;
4812 right: auto;
4813 bottom: 0;
4814 left: 0;
4815 height: 1px;
4816 width: 100%;
4817 transform-origin: 50% 100%;
4818 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4819}
4820.media-list,
4821li.media-item {
4822 --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
4823 --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
4824}
4825.media-list .item-title,
4826li.media-item .item-title {
4827 font-weight: var(--f7-list-media-item-title-font-weight, var(--f7-list-item-title-font-weight, inherit));
4828}
4829.media-list .item-inner,
4830li.media-item .item-inner {
4831 display: block;
4832 align-self: stretch;
4833}
4834.media-list .item-media,
4835li.media-item .item-media {
4836 align-self: flex-start;
4837}
4838.media-list .item-media img,
4839li.media-item .item-media img {
4840 display: block;
4841}
4842.media-list .item-link .item-inner,
4843li.media-item .item-link .item-inner {
4844 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4845}
4846.media-list .item-link .item-title-row,
4847li.media-item .item-link .item-title-row {
4848 padding-right: calc(var(--f7-list-chevron-icon-area));
4849}
4850.media-list.chevron-center .item-link .item-inner,
4851.media-list .chevron-center .item-link .item-inner,
4852.media-list .item-link.chevron-center .item-inner,
4853li.media-item.chevron-center .item-link .item-inner,
4854li.media-item .item-link.chevron-center .item-inner,
4855li.media-item .chevron-center .item-link .item-inner {
4856 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
4857}
4858.media-list.chevron-center .item-title-row,
4859.media-list .chevron-center .item-title-row,
4860li.media-item.chevron-center .item-title-row,
4861li.media-item .chevron-center .item-title-row {
4862 padding-right: 0;
4863}
4864.list .item-link .item-inner:before,
4865.links-list a:before,
4866.media-list .item-link .item-title-row:before,
4867li.media-item .item-link .item-title-row:before,
4868.media-list.chevron-center .item-link .item-inner:before,
4869.media-list .chevron-center .item-link .item-inner:before,
4870.media-list .item-link.chevron-center .item-inner:before,
4871li.media-item.chevron-center .item-link .item-inner:before,
4872li.media-item .chevron-center .item-link .item-inner:before,
4873li.media-item .item-link.chevron-center .item-inner:before {
4874 font-family: 'framework7-core-icons';
4875 font-weight: normal;
4876 font-style: normal;
4877 line-height: 1;
4878 letter-spacing: normal;
4879 text-transform: none;
4880 white-space: nowrap;
4881 word-wrap: normal;
4882 direction: ltr;
4883 -webkit-font-smoothing: antialiased;
4884 text-rendering: optimizeLegibility;
4885 -moz-osx-font-smoothing: grayscale;
4886 font-feature-settings: 'liga';
4887 text-align: center;
4888 display: block;
4889 width: 100%;
4890 height: 100%;
4891 font-size: 20px;
4892 position: absolute;
4893 top: 50%;
4894 width: 8px;
4895 height: 14px;
4896 margin-top: -7px;
4897 font-size: var(--f7-list-chevron-icon-font-size);
4898 line-height: 14px;
4899 color: var(--f7-list-chevron-icon-color);
4900 pointer-events: none;
4901 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4902 content: var(--f7-list-chevron-icon-right);
4903}
4904.media-list.chevron-center .item-title-row:before,
4905.media-list .chevron-center .item-title-row:before,
4906li.media-item.chevron-center .item-title-row:before,
4907li.media-item .chevron-center .item-title-row:before {
4908 display: none;
4909}
4910.media-list .item-link .item-inner:before,
4911li.media-item .item-link .item-inner:before {
4912 display: none;
4913}
4914.media-list .item-link .item-title-row:before,
4915li.media-item .item-link .item-title-row:before {
4916 right: 0;
4917}
4918.list-group ul:after,
4919.list-group ul:before {
4920 z-index: 25 !important;
4921}
4922.list-group + .list-group ul:before {
4923 display: none !important;
4924}
4925li.item-divider,
4926.item-divider,
4927li.list-group-title {
4928 white-space: nowrap;
4929 position: relative;
4930 max-width: 100%;
4931 text-overflow: ellipsis;
4932 overflow: hidden;
4933 z-index: 15;
4934 padding-top: 0;
4935 padding-bottom: 0;
4936 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4937 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4938 box-sizing: border-box;
4939 display: flex;
4940 align-items: center;
4941 align-content: center;
4942}
4943li.item-divider:after,
4944.item-divider:after,
4945li.list-group-title:after {
4946 display: none !important;
4947}
4948li.item-divider,
4949.item-divider {
4950 margin-top: -1px;
4951 height: var(--f7-list-item-divider-height);
4952 color: var(--f7-list-item-divider-text-color);
4953 font-size: var(--f7-list-item-divider-font-size);
4954 font-weight: var(--f7-list-item-divider-font-weight);
4955 background-color: var(--f7-list-item-divider-bg-color);
4956 line-height: var(--f7-list-item-divider-line-height);
4957}
4958li.item-divider:before,
4959.item-divider:before {
4960 content: '';
4961 position: absolute;
4962 background-color: var(--f7-list-item-divider-border-color);
4963 display: block;
4964 z-index: 15;
4965 top: 0;
4966 right: auto;
4967 bottom: auto;
4968 left: 0;
4969 height: 1px;
4970 width: 100%;
4971 transform-origin: 50% 0%;
4972 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4973}
4974li.list-group-title,
4975.list li.list-group-title {
4976 position: relative;
4977 position: -webkit-sticky;
4978 position: sticky;
4979 top: 0;
4980 margin-top: 0;
4981 z-index: 20;
4982 height: var(--f7-list-group-title-height);
4983 color: var(--f7-list-group-title-text-color);
4984 font-size: var(--f7-list-group-title-font-size);
4985 font-weight: var(--f7-list-group-title-font-weight);
4986 background-color: var(--f7-list-group-title-bg-color);
4987 line-height: var(--f7-list-group-title-line-height);
4988}
4989.page-with-navbar-large li.list-group-title,
4990.page-with-navbar-large .list li.list-group-title {
4991 top: calc(-1 * var(--f7-navbar-large-title-height));
4992}
4993.list.inset {
4994 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4995 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4996 border-radius: var(--f7-list-inset-border-radius);
4997 --f7-safe-area-left: 0px;
4998 --f7-safe-area-right: 0px;
4999}
5000.list.inset .block-title {
5001 margin-left: 0;
5002 margin-right: 0;
5003}
5004.list.inset ul {
5005 border-radius: var(--f7-list-inset-border-radius);
5006}
5007.list.inset ul:before,
5008.list.inset ul:after {
5009 display: none !important;
5010}
5011.list.inset li.swipeout:first-child,
5012.list.inset li:first-child > a {
5013 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5014}
5015.list.inset li.swipeout:last-child,
5016.list.inset li:last-child > a {
5017 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5018}
5019.list.inset li.swipeout:first-child:last-child,
5020.list.inset li:first-child:last-child > a {
5021 border-radius: var(--f7-list-inset-border-radius);
5022}
5023@media (min-width: 480px) {
5024 .list.xsmall-inset {
5025 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5026 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5027 border-radius: var(--f7-list-inset-border-radius);
5028 --f7-safe-area-left: 0px;
5029 --f7-safe-area-right: 0px;
5030 }
5031 .list.xsmall-inset .block-title {
5032 margin-left: 0;
5033 margin-right: 0;
5034 }
5035 .list.xsmall-inset ul {
5036 border-radius: var(--f7-list-inset-border-radius);
5037 }
5038 .list.xsmall-inset ul:before,
5039 .list.xsmall-inset ul:after {
5040 display: none !important;
5041 }
5042 .list.xsmall-inset li:first-child > a {
5043 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5044 }
5045 .list.xsmall-inset li:last-child > a {
5046 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5047 }
5048 .list.xsmall-inset li:first-child:last-child > a {
5049 border-radius: var(--f7-list-inset-border-radius);
5050 }
5051}
5052@media (min-width: 568px) {
5053 .list.small-inset {
5054 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5055 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5056 border-radius: var(--f7-list-inset-border-radius);
5057 --f7-safe-area-left: 0px;
5058 --f7-safe-area-right: 0px;
5059 }
5060 .list.small-inset .block-title {
5061 margin-left: 0;
5062 margin-right: 0;
5063 }
5064 .list.small-inset ul {
5065 border-radius: var(--f7-list-inset-border-radius);
5066 }
5067 .list.small-inset ul:before,
5068 .list.small-inset ul:after {
5069 display: none !important;
5070 }
5071 .list.small-inset li:first-child > a {
5072 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5073 }
5074 .list.small-inset li:last-child > a {
5075 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5076 }
5077 .list.small-inset li:first-child:last-child > a {
5078 border-radius: var(--f7-list-inset-border-radius);
5079 }
5080}
5081@media (min-width: 768px) {
5082 .list.medium-inset {
5083 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5084 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5085 border-radius: var(--f7-list-inset-border-radius);
5086 --f7-safe-area-left: 0px;
5087 --f7-safe-area-right: 0px;
5088 }
5089 .list.medium-inset .block-title {
5090 margin-left: 0;
5091 margin-right: 0;
5092 }
5093 .list.medium-inset ul {
5094 border-radius: var(--f7-list-inset-border-radius);
5095 }
5096 .list.medium-inset ul:before,
5097 .list.medium-inset ul:after {
5098 display: none !important;
5099 }
5100 .list.medium-inset li:first-child > a {
5101 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5102 }
5103 .list.medium-inset li:last-child > a {
5104 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5105 }
5106 .list.medium-inset li:first-child:last-child > a {
5107 border-radius: var(--f7-list-inset-border-radius);
5108 }
5109}
5110@media (min-width: 1024px) {
5111 .list.large-inset {
5112 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5113 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5114 border-radius: var(--f7-list-inset-border-radius);
5115 --f7-safe-area-left: 0px;
5116 --f7-safe-area-right: 0px;
5117 }
5118 .list.large-inset .block-title {
5119 margin-left: 0;
5120 margin-right: 0;
5121 }
5122 .list.large-inset ul {
5123 border-radius: var(--f7-list-inset-border-radius);
5124 }
5125 .list.large-inset ul:before,
5126 .list.large-inset ul:after {
5127 display: none !important;
5128 }
5129 .list.large-inset li:first-child > a {
5130 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5131 }
5132 .list.large-inset li:last-child > a {
5133 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5134 }
5135 .list.large-inset li:first-child:last-child > a {
5136 border-radius: var(--f7-list-inset-border-radius);
5137 }
5138}
5139@media (min-width: 1200px) {
5140 .list.xlarge-inset {
5141 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5142 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5143 border-radius: var(--f7-list-inset-border-radius);
5144 --f7-safe-area-left: 0px;
5145 --f7-safe-area-right: 0px;
5146 }
5147 .list.xlarge-inset .block-title {
5148 margin-left: 0;
5149 margin-right: 0;
5150 }
5151 .list.xlarge-inset ul {
5152 border-radius: var(--f7-list-inset-border-radius);
5153 }
5154 .list.xlarge-inset ul:before,
5155 .list.xlarge-inset ul:after {
5156 display: none !important;
5157 }
5158 .list.xlarge-inset li:first-child > a {
5159 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5160 }
5161 .list.xlarge-inset li:last-child > a {
5162 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5163 }
5164 .list.xlarge-inset li:first-child:last-child > a {
5165 border-radius: var(--f7-list-inset-border-radius);
5166 }
5167}
5168.list.no-chevron,
5169.list .no-chevron,
5170.menu-list {
5171 --f7-list-chevron-icon-color: transparent;
5172 --f7-list-chevron-icon-area: 0px;
5173}
5174.menu-list {
5175 --menu-list-offset: var(--f7-menu-list-offset);
5176 --f7-list-font-size: var(--f7-menu-list-font-size);
5177 --f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
5178 --f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
5179 --f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
5180 --f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
5181 --f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
5182}
5183.menu-list .item-header,
5184.menu-list .item-footer,
5185.menu-list .item-title,
5186.menu-list .item-after,
5187.menu-list .item-text,
5188.menu-list .item-subtitle {
5189 transition-duration: 300ms;
5190}
5191.menu-list li:not(.item-divider):not(.list-group-title) {
5192 padding-top: calc(var(--f7-menu-list-offset) / 2);
5193 padding-bottom: calc(var(--f7-menu-list-offset) / 2);
5194}
5195.menu-list li:not(.item-divider):not(.list-group-title):first-child {
5196 padding-top: var(--f7-menu-list-offset);
5197}
5198.menu-list li:not(.item-divider):not(.list-group-title):last-child {
5199 padding-bottom: var(--f7-menu-list-offset);
5200}
5201.menu-list .item-link {
5202 margin-left: var(--f7-menu-list-offset);
5203 margin-right: var(--f7-menu-list-offset);
5204 border-radius: var(--f7-menu-list-border-radius) !important;
5205}
5206.menu-list .item-inner:after {
5207 display: none;
5208}
5209.menu-list .item-selected .item-link,
5210.menu-list .item-selected.item-link,
5211.menu-list .tab-link-active .item-link,
5212.menu-list .tab-link-active.item-link {
5213 color: var(--f7-menu-list-selected-text-color);
5214 background-color: var(--f7-menu-list-selected-bg-color);
5215}
5216.menu-list .item-selected .item-header,
5217.menu-list .item-selected .item-footer,
5218.menu-list .item-selected .item-title,
5219.menu-list .item-selected .item-after,
5220.menu-list .item-selected .item-text,
5221.menu-list .item-selected .item-subtitle {
5222 color: var(--f7-menu-list-selected-text-color);
5223}
5224.ios .item-link.active-state .item-inner:after,
5225.ios .list-button.active-state:after,
5226.ios .links-list a.active-state:after {
5227 background-color: transparent;
5228}
5229.ios .links-list a.active-state,
5230.ios .list .item-link.active-state,
5231.ios .list .list-button.active-state {
5232 transition-duration: 0ms;
5233}
5234.md .list .item-media {
5235 min-width: 40px;
5236}
5237.aurora .list .item-media {
5238 min-width: 24px;
5239}
5240.aurora .links-list a,
5241.aurora .list .item-link:not(.item-selected),
5242.aurora .list .list-button {
5243 transition-duration: 0ms;
5244}
5245.aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
5246.aurora.device-desktop .list .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
5247 background: var(--f7-list-link-hover-bg-color);
5248}
5249.aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
5250 background: var(--f7-list-button-hover-bg-color);
5251}
5252/* === Badge === */
5253:root {
5254 --f7-badge-text-color: #fff;
5255 --f7-badge-bg-color: #8e8e93;
5256 --f7-badge-padding: 0 4px;
5257 --f7-badge-in-icon-size: 16px;
5258 --f7-badge-in-icon-font-size: 10px;
5259 --f7-badge-font-weight: normal;
5260 --f7-badge-font-size: 12px;
5261}
5262.ios {
5263 --f7-badge-size: 20px;
5264 --f7-badge-font-weight: 600;
5265}
5266.md {
5267 --f7-badge-size: 18px;
5268 --f7-badge-font-weight: 500;
5269}
5270.aurora {
5271 --f7-badge-size: 18px;
5272 --f7-badge-font-weight: 600;
5273 --f7-badge-in-icon-size: 15px;
5274}
5275.badge {
5276 display: inline-flex;
5277 align-items: center;
5278 align-content: center;
5279 justify-content: center;
5280 color: var(--f7-badge-text-color);
5281 background: var(--f7-badge-bg-color);
5282 position: relative;
5283 box-sizing: border-box;
5284 text-align: center;
5285 vertical-align: middle;
5286 font-weight: var(--f7-badge-font-weight);
5287 font-size: var(--f7-badge-font-size);
5288 border-radius: var(--f7-badge-size);
5289 padding: var(--f7-badge-padding);
5290 height: var(--f7-badge-size);
5291 min-width: var(--f7-badge-size);
5292}
5293.icon .badge,
5294.f7-icons .badge,
5295.framework7-icons .badge,
5296.material-icons .badge {
5297 position: absolute;
5298 left: 100%;
5299 margin-left: -10px;
5300 top: -2px;
5301 font-family: var(--f7-font-family);
5302 --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
5303 --f7-badge-size: var(--f7-badge-in-icon-size);
5304}
5305.badge[class*='color-'] {
5306 --f7-badge-bg-color: var(--f7-theme-color);
5307}
5308:root {
5309 --f7-button-min-width: 32px;
5310 --f7-button-bg-color: transparent;
5311 --f7-button-border-width: 0px;
5312 /*
5313 --f7-button-text-color: var(--f7-theme-color);
5314 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
5315 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
5316 --f7-button-border-color: var(--f7-theme-color);
5317 --f7-button-fill-text-color: #fff;
5318 --f7-button-fill-bg-color: var(--f7-theme-color);
5319 --f7-button-outline-border-color: var(--f7-theme-color);
5320 */
5321 --f7-button-outline-border-width: 2px;
5322 --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
5323 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
5324 0 3px 6px rgba(0, 0, 0, 0.23);
5325 --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
5326 --f7-segmented-strong-padding: 2px;
5327 --f7-segmented-strong-between-buttons: 4px;
5328 --f7-segmented-strong-button-font-weight: 500;
5329 --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
5330 --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
5331 --f7-segmented-strong-button-text-color: #000;
5332 --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
5333 --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
5334 --f7-segmented-strong-button-active-text-color: #000;
5335 --f7-segmented-strong-button-active-bg-color: #fff;
5336}
5337:root .theme-dark,
5338:root.theme-dark {
5339 --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5340 --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
5341 --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
5342 --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
5343 --f7-segmented-strong-button-text-color: #fff;
5344 --f7-segmented-strong-button-active-text-color: #fff;
5345}
5346.ios {
5347 --f7-button-font-size: 13px;
5348 --f7-button-height: 28px;
5349 --f7-button-padding-horizontal: 10px;
5350 --f7-button-border-radius: 5px;
5351 --f7-button-font-weight: 600;
5352 --f7-button-letter-spacing: 0;
5353 --f7-button-text-transform: uppercase;
5354 /*
5355 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
5356 */
5357 --f7-button-large-height: 44px;
5358 --f7-button-large-font-size: 17px;
5359 --f7-button-large-font-weight: 500;
5360 --f7-button-large-text-transform: none;
5361 --f7-button-small-height: 26px;
5362 --f7-button-small-font-size: 13px;
5363 --f7-button-small-font-weight: 600;
5364 --f7-button-small-text-transform: uppercase;
5365 --f7-button-small-outline-border-width: 2px;
5366 --f7-segmented-strong-button-text-transform: none;
5367 --f7-segmented-strong-button-active-font-weight: 600;
5368}
5369.md {
5370 --f7-button-font-size: 14px;
5371 --f7-button-height: 36px;
5372 --f7-button-padding-horizontal: 8px;
5373 --f7-button-border-radius: 4px;
5374 --f7-button-font-weight: 500;
5375 --f7-button-letter-spacing: 0.05em;
5376 --f7-button-text-transform: uppercase;
5377 /*
5378 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5379 */
5380 --f7-button-large-height: 48px;
5381 --f7-button-large-font-size: 14px;
5382 --f7-button-large-font-weight: 500;
5383 --f7-button-large-text-transform: uppercase;
5384 --f7-button-small-height: 28px;
5385 --f7-button-small-font-size: 14px;
5386 --f7-button-small-font-weight: 500;
5387 --f7-button-small-text-transform: uppercase;
5388 --f7-button-small-outline-border-width: 2px;
5389 --f7-segmented-strong-button-text-transform: uppercase;
5390 --f7-segmented-strong-button-active-font-weight: 500;
5391}
5392.aurora {
5393 /*
5394 --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
5395 --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
5396 */
5397 --f7-button-font-size: 14px;
5398 --f7-button-height: 36px;
5399 --f7-button-min-width: 24px;
5400 --f7-button-padding-horizontal: 10px;
5401 --f7-button-border-radius: 8px;
5402 --f7-button-font-weight: 500;
5403 --f7-button-letter-spacing: 0em;
5404 --f7-button-text-transform: none;
5405 /*
5406 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5407 */
5408 --f7-button-large-height: 48px;
5409 --f7-button-large-font-size: 16px;
5410 --f7-button-large-font-weight: 600;
5411 --f7-button-large-text-transform: none;
5412 --f7-button-small-height: 28px;
5413 --f7-button-small-font-size: 14px;
5414 --f7-button-small-font-weight: 500;
5415 --f7-button-small-text-transform: none;
5416 --f7-button-small-outline-border-width: 1px;
5417 --f7-segmented-strong-button-text-transform: none;
5418 --f7-segmented-strong-button-active-font-weight: 600;
5419}
5420button {
5421 -webkit-appearance: none;
5422 -moz-appearance: none;
5423 appearance: none;
5424 width: 100%;
5425}
5426.button {
5427 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
5428 text-decoration: none;
5429 text-align: center;
5430 display: flex;
5431 -webkit-appearance: none;
5432 -moz-appearance: none;
5433 appearance: none;
5434 background: none;
5435 margin: 0;
5436 white-space: nowrap;
5437 text-overflow: ellipsis;
5438 position: relative;
5439 overflow: hidden;
5440 font-family: inherit;
5441 cursor: pointer;
5442 outline: 0;
5443 box-sizing: border-box;
5444 vertical-align: middle;
5445 justify-content: center;
5446 align-items: center;
5447 border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
5448 font-size: var(--f7-button-font-size);
5449 color: var(--f7-button-text-color, var(--f7-theme-color));
5450 height: var(--f7-button-height);
5451 line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
5452 padding: var(--f7-button-padding-vertical, 0px) var(--f7-button-padding-horizontal);
5453 border-radius: var(--f7-button-border-radius);
5454 min-width: var(--f7-button-min-width);
5455 font-weight: var(--f7-button-font-weight);
5456 letter-spacing: var(--f7-button-letter-spacing);
5457 text-transform: var(--f7-button-text-transform);
5458 background-color: var(--f7-button-bg-color);
5459 box-shadow: var(--f7-button-box-shadow);
5460}
5461.button.active-state {
5462 background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
5463 color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
5464}
5465input[type='submit'].button,
5466input[type='button'].button {
5467 width: 100%;
5468}
5469.button > i + span,
5470.button > span + span,
5471.button > span + i,
5472.button > i + i {
5473 margin-left: 4px;
5474}
5475.subnavbar .button,
5476.navbar .button,
5477.toolbar .button,
5478.searchbar .button,
5479.appbar .button {
5480 color: var(--f7-button-text-color, var(--f7-theme-color));
5481}
5482.button-round,
5483.ios .button-round-ios,
5484.md .button-round-md,
5485.aurora .button-round-aurora {
5486 --f7-button-border-radius: var(--f7-button-height);
5487}
5488.button-fill,
5489.ios .button-fill-ios,
5490.md .button-fill-md,
5491.aurora .button-fill-aurora,
5492.button-active,
5493.button.tab-link-active {
5494 --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
5495 --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
5496 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5497}
5498.button-fill,
5499.ios .button-fill-ios,
5500.md .button-fill-md,
5501.aurora .button-fill-aurora {
5502 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
5503}
5504.button-active,
5505.button.tab-link-active {
5506 --f7-button-pressed-bg-color: var(--f7-button-bg-color);
5507}
5508.button-outline,
5509.ios .button-outline-ios,
5510.md .button-outline-md,
5511.aurora .button-outline-aurora {
5512 --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
5513 --f7-button-border-width: var(--f7-button-outline-border-width);
5514}
5515.button-large,
5516.ios .button-large-ios,
5517.md .button-large-md,
5518.aurora .button-large-aurora {
5519 --f7-button-height: var(--f7-button-large-height);
5520 --f7-button-font-size: var(--f7-button-large-font-size);
5521 --f7-button-font-weight: var(--f7-button-large-font-weight);
5522 --f7-button-text-transform: var(--f7-button-large-text-transform);
5523}
5524.button-small,
5525.ios .button-small-ios,
5526.md .button-small-md,
5527.aurora .button-small-aurora {
5528 --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
5529 --f7-button-height: var(--f7-button-small-height);
5530 --f7-button-font-size: var(--f7-button-small-font-size);
5531 --f7-button-font-weight: var(--f7-button-small-font-weight);
5532 --f7-button-text-transform: var(--f7-button-small-text-transform);
5533}
5534.ios .button-small.button-fill,
5535.ios .button-small-ios.button-fill,
5536.ios .button-small.button-fill-ios {
5537 --f7-button-border-width: var(--f7-button-small-outline-border-width);
5538 --f7-button-pressed-text-color: var(--f7-theme-color);
5539 --f7-button-pressed-bg-color: transparent;
5540}
5541.segmented {
5542 align-self: center;
5543 display: flex;
5544 flex-wrap: nowrap;
5545 border-radius: var(--f7-button-border-radius);
5546 box-shadow: var(--f7-button-box-shadow);
5547 box-sizing: border-box;
5548}
5549.segmented .button,
5550.segmented button {
5551 width: 100%;
5552 flex-shrink: 1;
5553 min-width: 0;
5554 border-radius: 0;
5555}
5556.segmented .button:first-child {
5557 border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
5558}
5559.segmented .button:not(.button-outline):first-child {
5560 border-left: none;
5561}
5562.segmented .button.button-outline:nth-child(n + 2) {
5563 border-left: none;
5564}
5565.segmented .button:last-child {
5566 border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
5567}
5568.segmented .button-round:first-child {
5569 border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
5570}
5571.segmented .button-round:last-child {
5572 border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
5573}
5574.segmented .button:first-child:last-child {
5575 border-radius: var(--f7-button-border-radius);
5576}
5577.segmented-raised,
5578.ios .segmented-raised-ios,
5579.md .segmented-raised-md,
5580.aurora .segmented-raised-aurora {
5581 box-shadow: var(--f7-button-raised-box-shadow);
5582}
5583.segmented-raised .button:not(.button-outline),
5584.ios .segmented-raised-ios .button:not(.button-outline),
5585.md .segmented-raised-md .button:not(.button-outline),
5586.aurora .segmented-raised-aurora .button:not(.button-outline) {
5587 border-left: 1px solid var(--f7-segmented-raised-divider-color);
5588}
5589.button-raised,
5590.ios .button-raised-ios,
5591.md .button-raised-md,
5592.aurora .button-raised-aurora {
5593 --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
5594}
5595.button-raised.active-state,
5596.ios .button-raised-ios.active-state,
5597.md .button-raised-md.active-state,
5598.aurora .button-raised-aurora.active-state {
5599 --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
5600}
5601.segmented-strong,
5602.ios .segmented-strong-ios,
5603.md .segmented-strong-md,
5604.aurora .segmented-strong-aurora {
5605 --f7-button-bg-color: transparent;
5606 --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
5607 --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
5608 --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
5609 --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
5610 --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
5611 position: relative;
5612 background: var(--f7-segmented-strong-bg-color);
5613 border-radius: calc(var(--f7-button-border-radius) + 2px);
5614 box-shadow: none;
5615 padding: var(--f7-segmented-strong-padding);
5616 overflow: hidden;
5617}
5618.segmented-strong .button,
5619.ios .segmented-strong-ios .button,
5620.md .segmented-strong-md .button,
5621.aurora .segmented-strong-aurora .button {
5622 z-index: 1;
5623 transform: translate3d(0, 0, 0);
5624}
5625.segmented-strong .button,
5626.ios .segmented-strong-ios .button,
5627.md .segmented-strong-md .button,
5628.aurora .segmented-strong-aurora .button,
5629.segmented-strong .button:first-child,
5630.ios .segmented-strong-ios .button:first-child,
5631.md .segmented-strong-md .button:first-child,
5632.aurora .segmented-strong-aurora .button:first-child,
5633.segmented-strong .button:last-child,
5634.ios .segmented-strong-ios .button:last-child,
5635.md .segmented-strong-md .button:last-child,
5636.aurora .segmented-strong-aurora .button:last-child {
5637 border-radius: var(--f7-button-border-radius);
5638}
5639.segmented-strong .button + .button,
5640.ios .segmented-strong-ios .button + .button,
5641.md .segmented-strong-md .button + .button,
5642.aurora .segmented-strong-aurora .button + .button {
5643 margin-left: var(--f7-segmented-strong-between-buttons);
5644}
5645.segmented-strong .button.button-active,
5646.ios .segmented-strong-ios .button.button-active,
5647.md .segmented-strong-md .button.button-active,
5648.aurora .segmented-strong-aurora .button.button-active,
5649.segmented-strong .button.tab-link-active,
5650.ios .segmented-strong-ios .button.tab-link-active,
5651.md .segmented-strong-md .button.tab-link-active,
5652.aurora .segmented-strong-aurora .button.tab-link-active {
5653 --f7-button-hover-bg-color: transparent;
5654 --f7-button-bg-color: transparent;
5655 --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
5656 --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
5657}
5658.segmented-strong .segmented-highlight,
5659.ios .segmented-strong-ios .segmented-highlight,
5660.md .segmented-strong-md .segmented-highlight,
5661.aurora .segmented-strong-aurora .segmented-highlight {
5662 --f7-segmented-highlight-num: 1;
5663 --f7-segmented-highlight-active: 0;
5664 --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
5665 --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
5666 --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
5667 position: absolute;
5668 background-color: var(--f7-segmented-strong-button-active-bg-color);
5669 border-radius: var(--f7-button-border-radius);
5670 box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
5671 left: var(--f7-segmented-strong-padding);
5672 top: var(--f7-segmented-strong-padding);
5673 height: calc(100% - var(--f7-segmented-strong-padding) * 2);
5674 width: var(--f7-segmented-highlight-width);
5675 z-index: 0;
5676 transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
5677 transition: 200ms;
5678}
5679.button:nth-child(2) ~ .segmented-highlight {
5680 --f7-segmented-highlight-num: 2;
5681}
5682.button:nth-child(3) ~ .segmented-highlight {
5683 --f7-segmented-highlight-num: 3;
5684}
5685.button:nth-child(4) ~ .segmented-highlight {
5686 --f7-segmented-highlight-num: 4;
5687}
5688.button:nth-child(5) ~ .segmented-highlight {
5689 --f7-segmented-highlight-num: 5;
5690}
5691.button:nth-child(6) ~ .segmented-highlight {
5692 --f7-segmented-highlight-num: 6;
5693}
5694.button:nth-child(7) ~ .segmented-highlight {
5695 --f7-segmented-highlight-num: 7;
5696}
5697.button:nth-child(8) ~ .segmented-highlight {
5698 --f7-segmented-highlight-num: 8;
5699}
5700.button:nth-child(9) ~ .segmented-highlight {
5701 --f7-segmented-highlight-num: 9;
5702}
5703.button:nth-child(10) ~ .segmented-highlight {
5704 --f7-segmented-highlight-num: 10;
5705}
5706.button-active:nth-child(2) ~ .segmented-highlight,
5707.tab-link-active:nth-child(2) ~ .segmented-highlight {
5708 --f7-segmented-highlight-active: 1;
5709}
5710.button-active:nth-child(3) ~ .segmented-highlight,
5711.tab-link-active:nth-child(3) ~ .segmented-highlight {
5712 --f7-segmented-highlight-active: 2;
5713}
5714.button-active:nth-child(4) ~ .segmented-highlight,
5715.tab-link-active:nth-child(4) ~ .segmented-highlight {
5716 --f7-segmented-highlight-active: 3;
5717}
5718.button-active:nth-child(5) ~ .segmented-highlight,
5719.tab-link-active:nth-child(5) ~ .segmented-highlight {
5720 --f7-segmented-highlight-active: 4;
5721}
5722.button-active:nth-child(6) ~ .segmented-highlight,
5723.tab-link-active:nth-child(6) ~ .segmented-highlight {
5724 --f7-segmented-highlight-active: 5;
5725}
5726.button-active:nth-child(7) ~ .segmented-highlight,
5727.tab-link-active:nth-child(7) ~ .segmented-highlight {
5728 --f7-segmented-highlight-active: 6;
5729}
5730.button-active:nth-child(8) ~ .segmented-highlight,
5731.tab-link-active:nth-child(8) ~ .segmented-highlight {
5732 --f7-segmented-highlight-active: 7;
5733}
5734.button-active:nth-child(9) ~ .segmented-highlight,
5735.tab-link-active:nth-child(9) ~ .segmented-highlight {
5736 --f7-segmented-highlight-active: 8;
5737}
5738.button-active:nth-child(10) ~ .segmented-highlight,
5739.tab-link-active:nth-child(10) ~ .segmented-highlight {
5740 --f7-segmented-highlight-active: 9;
5741}
5742.segmented-round,
5743.ios .segmented-round-ios,
5744.md .segmented-round-md,
5745.aurora .segmented-round-aurora {
5746 border-radius: var(--f7-button-height);
5747}
5748.segmented-round .segmented-highlight,
5749.ios .segmented-round-ios .segmented-highlight,
5750.md .segmented-round-md .segmented-highlight,
5751.aurora .segmented-round-aurora .segmented-highlight {
5752 border-radius: var(--f7-button-height);
5753}
5754.subnavbar .segmented {
5755 width: 100%;
5756}
5757.button-preloader {
5758 position: relative;
5759 --f7-preloader-color: var(--f7-button-text-color, var(--f7-theme-color));
5760}
5761.button-preloader:not(.button-large) {
5762 --f7-preloader-size: calc(var(--f7-button-height) - 6px);
5763}
5764.button-preloader.button-fill {
5765 --f7-preloader-color: #fff;
5766}
5767.button-preloader > span:not(.preloader) {
5768 transition: 0.2s;
5769 display: inline-flex;
5770 align-items: center;
5771 align-content: center;
5772 justify-content: center;
5773 transform: scale(1);
5774}
5775.button-preloader > .preloader {
5776 position: absolute;
5777 left: 50%;
5778 top: 50%;
5779 transition: 0.2s;
5780 transition-property: opacity;
5781 opacity: 0;
5782 visibility: hidden;
5783 margin-left: calc(-1 * var(--f7-preloader-size) / 2);
5784 margin-top: calc(-1 * var(--f7-preloader-size) / 2);
5785}
5786.button-preloader.button-loading > span:not(.preloader) {
5787 opacity: 0;
5788 transform: scale(0);
5789}
5790.button-preloader.button-loading > .preloader {
5791 opacity: 1;
5792 visibility: visible;
5793}
5794.ios .button {
5795 transition-duration: 100ms;
5796}
5797.ios .button-fill,
5798.ios .button-fill-ios {
5799 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
5800}
5801.ios .button-small,
5802.ios .button-small-ios {
5803 transition-duration: 200ms;
5804}
5805.md .button {
5806 transition-duration: 300ms;
5807 transform: translate3d(0, 0, 0);
5808}
5809.md .button-fill,
5810.md .button-fill-md {
5811 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5812}
5813.aurora .button {
5814 transition-duration: 100ms;
5815 transform: translate3d(0, 0, 0);
5816}
5817.aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
5818 background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
5819}
5820.aurora .button-fill,
5821.aurora .button-fill-aurora {
5822 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5823}
5824.aurora .button-fill,
5825.aurora .button-active,
5826.aurora .button.tab-link-active,
5827.aurora .button-fill-aurora {
5828 --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
5829}
5830/* === Touch Ripple === */
5831:root {
5832 --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
5833 --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
5834 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
5835}
5836.theme-dark {
5837 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5838}
5839.ripple,
5840.fab a,
5841.link,
5842.item-link,
5843.list-button,
5844.button,
5845.dialog-button,
5846.tab-link,
5847.radio,
5848.checkbox,
5849.actions-button,
5850.speed-dial-buttons a {
5851 -webkit-user-select: none;
5852 -moz-user-select: none;
5853 user-select: none;
5854}
5855.ripple-wave {
5856 left: 0;
5857 top: 0;
5858 position: absolute !important;
5859 border-radius: 50%;
5860 pointer-events: none;
5861 z-index: -1;
5862 padding: 0;
5863 margin: 0;
5864 font-size: 0;
5865 transform: translate3d(0px, 0px, 0) scale(0);
5866 background-color: var(--f7-touch-ripple-color);
5867 animation: touch-ripple-in 200ms forwards;
5868}
5869.ripple-wave.ripple-wave-out {
5870 transform: var(--f7-ripple-transform);
5871 animation: touch-ripple-out 300ms forwards;
5872}
5873.button-fill .ripple-wave,
5874.picker-calendar-day .ripple-wave,
5875.menu .ripple-wave {
5876 z-index: 1;
5877}
5878.checkbox .ripple-wave,
5879.radio .ripple-wave,
5880.data-table .sortable-cell .ripple-wave {
5881 z-index: 0;
5882}
5883[class*='ripple-color-'] {
5884 --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
5885}
5886@keyframes touch-ripple-in {
5887 from {
5888 transform: translate3d(0px, 0px, 0) scale(0);
5889 }
5890 to {
5891 transform: var(--f7-ripple-transform);
5892 }
5893}
5894@keyframes touch-ripple-out {
5895 from {
5896 opacity: 1;
5897 }
5898 to {
5899 opacity: 0;
5900 }
5901}
5902/* === Icon === */
5903.f7-icons,
5904.material-icons {
5905 width: 1em;
5906 height: 1em;
5907}
5908i.icon {
5909 display: inline-block;
5910 vertical-align: middle;
5911 background-size: 100% auto;
5912 background-position: center;
5913 background-repeat: no-repeat;
5914 font-style: normal;
5915 position: relative;
5916}
5917.icon-back:after,
5918.icon-prev:after,
5919.icon-forward:after,
5920.icon-next:after {
5921 font-family: 'framework7-core-icons';
5922 font-weight: normal;
5923 font-style: normal;
5924 line-height: 1;
5925 letter-spacing: normal;
5926 text-transform: none;
5927 white-space: nowrap;
5928 word-wrap: normal;
5929 direction: ltr;
5930 -webkit-font-smoothing: antialiased;
5931 text-rendering: optimizeLegibility;
5932 -moz-osx-font-smoothing: grayscale;
5933 font-feature-settings: 'liga';
5934 text-align: center;
5935 display: block;
5936 width: 100%;
5937 height: 100%;
5938 font-size: 20px;
5939}
5940.icon[class*='color-'] {
5941 color: var(--f7-theme-color);
5942}
5943.ios .icon-back,
5944.ios .icon-prev,
5945.ios .icon-forward,
5946.ios .icon-next {
5947 width: 12px;
5948 height: 20px;
5949 line-height: 20px;
5950}
5951.ios .icon-back:after,
5952.ios .icon-prev:after,
5953.ios .icon-forward:after,
5954.ios .icon-next:after {
5955 line-height: inherit;
5956}
5957.ios .icon-prev:after,
5958.ios .icon-next:after {
5959 font-size: 16px;
5960}
5961.ios .icon-back:after,
5962.ios .icon-prev:after {
5963 content: 'chevron_left_ios';
5964}
5965.ios .icon-forward:after,
5966.ios .icon-next:after {
5967 content: 'chevron_right_ios';
5968}
5969.md .icon-back,
5970.md .icon-forward,
5971.md .icon-next,
5972.md .icon-prev {
5973 width: 24px;
5974 height: 24px;
5975}
5976.md .icon-back:after,
5977.md .icon-forward:after,
5978.md .icon-next:after,
5979.md .icon-prev:after {
5980 line-height: 1.2;
5981}
5982.md .icon-back:after {
5983 content: 'arrow_left_md';
5984}
5985.md .icon-forward:after {
5986 content: 'arrow_right_md';
5987}
5988.md .icon-next:after {
5989 content: 'chevron_right_md';
5990}
5991.md .icon-prev:after {
5992 content: 'chevron_left_md';
5993}
5994.aurora .f7-icons,
5995.aurora .material-icons {
5996 font-size: 24px;
5997}
5998.aurora .icon-back,
5999.aurora .icon-prev,
6000.aurora .icon-forward,
6001.aurora .icon-next {
6002 width: 12px;
6003 height: 20px;
6004 line-height: 20px;
6005}
6006.aurora .icon-back:after,
6007.aurora .icon-prev:after,
6008.aurora .icon-forward:after,
6009.aurora .icon-next:after {
6010 line-height: inherit;
6011}
6012.aurora .icon-prev:after,
6013.aurora .icon-next:after {
6014 font-size: 16px;
6015}
6016.aurora .icon-back:after,
6017.aurora .icon-prev:after {
6018 content: 'chevron_left_ios';
6019}
6020.aurora .icon-forward:after,
6021.aurora .icon-next:after {
6022 content: 'chevron_right_ios';
6023}
6024.custom-modal-backdrop {
6025 z-index: 10500;
6026}
6027.custom-modal-backdrop,
6028.actions-backdrop,
6029.dialog-backdrop,
6030.popover-backdrop,
6031.popup-backdrop,
6032.preloader-backdrop,
6033.sheet-backdrop,
6034.fab-backdrop {
6035 position: absolute;
6036 left: 0;
6037 top: 0;
6038 width: 100%;
6039 height: 100%;
6040 background: rgba(0, 0, 0, 0.4);
6041 z-index: 13000;
6042 visibility: hidden;
6043 opacity: 0;
6044 transition-duration: 400ms;
6045}
6046.custom-modal-backdrop.not-animated,
6047.actions-backdrop.not-animated,
6048.dialog-backdrop.not-animated,
6049.popover-backdrop.not-animated,
6050.popup-backdrop.not-animated,
6051.preloader-backdrop.not-animated,
6052.sheet-backdrop.not-animated,
6053.fab-backdrop.not-animated {
6054 transition-duration: 0ms;
6055}
6056.custom-modal-backdrop.backdrop-in,
6057.actions-backdrop.backdrop-in,
6058.dialog-backdrop.backdrop-in,
6059.popover-backdrop.backdrop-in,
6060.popup-backdrop.backdrop-in,
6061.preloader-backdrop.backdrop-in,
6062.sheet-backdrop.backdrop-in,
6063.fab-backdrop.backdrop-in {
6064 visibility: visible;
6065 opacity: 1;
6066}
6067/* === Appbar === */
6068:root {
6069 /*
6070 --f7-appbar-offset: var(--f7-appbar-height);
6071 --f7-appbar-extra-offset: 0px;
6072 --f7-appbar-bg-color: var(--f7-bars-bg-color);
6073 --f7-appbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
6074 --f7-appbar-bg-image: var(--f7-bars-bg-image);
6075 --f7-appbar-border-color: var(--f7-bars-border-color);
6076 --f7-appbar-link-color: var(--f7-bars-link-color);
6077 --f7-appbar-text-color: var(--f7-bars-text-color);
6078 */
6079 --f7-appbar-shadow-image: none;
6080}
6081.ios {
6082 --f7-appbar-height: 44px;
6083 --f7-appbar-inner-padding-left: 8px;
6084 --f7-appbar-inner-padding-right: 8px;
6085}
6086.md {
6087 --f7-appbar-height: 48px;
6088 --f7-appbar-inner-padding-left: 16px;
6089 --f7-appbar-inner-padding-right: 16px;
6090}
6091.aurora {
6092 --f7-appbar-height: 64px;
6093 --f7-appbar-inner-padding-left: 16px;
6094 --f7-appbar-inner-padding-right: 16px;
6095}
6096.appbar {
6097 position: relative;
6098 left: 0;
6099 top: 0;
6100 width: 100%;
6101 z-index: 500;
6102 -webkit-backface-visibility: hidden;
6103 backface-visibility: hidden;
6104 box-sizing: border-box;
6105 margin: 0;
6106 transform: translate3d(0, 0, 0);
6107 height: calc(var(--f7-appbar-height) + var(--f7-safe-area-top));
6108 background-image: var(--f7-appbar-bg-image, var(--f7-bars-bg-image));
6109 background-color: var(--f7-appbar-bg-color, var(--f7-bars-bg-color));
6110 color: var(--f7-appbar-text-color, var(--f7-bars-text-color));
6111 font-size: var(--f7-appbar-font-size);
6112 z-index: 7000;
6113}
6114@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
6115 .ios-translucent-bars .appbar {
6116 background-color: rgba(var(--f7-appbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
6117 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
6118 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
6119 }
6120}
6121.appbar .panel ~ .appbar {
6122 z-index: 5500;
6123}
6124.appbar a {
6125 color: var(--f7-appbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
6126}
6127.appbar a.link {
6128 display: flex;
6129 justify-content: flex-start;
6130 line-height: var(--f7-appbar-link-line-height, var(--f7-appbar-height));
6131 height: var(--f7-appbar-link-height, var(--f7-appbar-height));
6132}
6133.appbar .left,
6134.appbar .center,
6135.appbar .right {
6136 display: flex;
6137 align-items: center;
6138}
6139.appbar.no-hairline:after,
6140.appbar.no-border:after {
6141 display: none !important;
6142}
6143.appbar.no-hairline .title-large:after,
6144.appbar.no-border .title-large:after {
6145 display: none !important;
6146}
6147.appbar.no-shadow:before {
6148 display: none !important;
6149}
6150.appbar:after,
6151.appbar:before {
6152 -webkit-backface-visibility: hidden;
6153 backface-visibility: hidden;
6154}
6155.appbar:after {
6156 content: '';
6157 position: absolute;
6158 background-color: var(--f7-appbar-border-color, var(--f7-bars-border-color));
6159 display: block;
6160 z-index: 15;
6161 top: auto;
6162 right: auto;
6163 bottom: 0;
6164 left: 0;
6165 height: 1px;
6166 width: 100%;
6167 transform-origin: 50% 100%;
6168 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6169}
6170.appbar:before {
6171 content: '';
6172 position: absolute;
6173 right: 0;
6174 width: 100%;
6175 top: 100%;
6176 bottom: auto;
6177 height: 8px;
6178 pointer-events: none;
6179 background: var(--f7-appbar-shadow-image);
6180}
6181.appbar:after {
6182 z-index: 1;
6183}
6184.appbar ~ * {
6185 --f7-appbar-app-offset: calc(var(--f7-appbar-height) + var(--f7-appbar-extra-offset, 0px) + var(--f7-safe-area-top));
6186}
6187.appbar ~ .views,
6188.appbar ~ .view,
6189.appbar ~ .appbar {
6190 --f7-safe-area-top: 0px;
6191}
6192.appbar ~ .panel .view,
6193.appbar ~ .panel .page,
6194.appbar ~ .panel .page-content {
6195 --f7-safe-area-top: 0px;
6196}
6197.appbar-inner {
6198 position: absolute;
6199 left: 0;
6200 top: var(--f7-safe-area-top);
6201 width: 100%;
6202 height: var(--f7-appbar-height);
6203 display: flex;
6204 align-items: center;
6205 justify-content: space-between;
6206 box-sizing: border-box;
6207 padding: 0 calc(var(--f7-appbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-appbar-inner-padding-left) + var(--f7-safe-area-left));
6208}
6209.appbar-inner.stacked {
6210 display: none;
6211}
6212/* === Dialog === */
6213:root {
6214 --f7-dialog-button-text-color: var(--f7-theme-color);
6215 --f7-dialog-button-text-align: center;
6216 --f7-dialog-input-bg-color: #fff;
6217}
6218:root .theme-dark,
6219:root.theme-dark {
6220 --f7-dialog-text-color: #fff;
6221}
6222.ios {
6223 --f7-dialog-box-shadow: none;
6224 --f7-dialog-width: 270px;
6225 --f7-dialog-inner-padding: 16px;
6226 --f7-dialog-border-radius: 13px;
6227 --f7-dialog-text-align: center;
6228 --f7-dialog-font-size: 14px;
6229 --f7-dialog-title-text-color: inherit;
6230 --f7-dialog-title-font-size: 18px;
6231 --f7-dialog-title-font-weight: 600;
6232 --f7-dialog-title-line-height: inherit;
6233 --f7-dialog-button-font-size: 17px;
6234 --f7-dialog-button-height: 44px;
6235 --f7-dialog-button-letter-spacing: 0;
6236 --f7-dialog-button-font-weight: 400;
6237 --f7-dialog-button-text-transform: none;
6238 --f7-dialog-input-border-radius: 4px;
6239 --f7-dialog-input-font-size: 14px;
6240 --f7-dialog-input-height: 32px;
6241 --f7-dialog-input-border-width: 1px;
6242 --f7-dialog-input-placeholder-color: #a9a9a9;
6243 --f7-dialog-preloader-size: 34px;
6244 --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
6245 --f7-dialog-bg-color-rgb: 255, 255, 255;
6246 --f7-dialog-text-color: #000;
6247 --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
6248 --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
6249 --f7-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
6250}
6251.ios .theme-dark,
6252.ios.theme-dark {
6253 --f7-dialog-bg-color: rgba(45, 45, 45, 0.95);
6254 --f7-dialog-bg-color-rgb: 45, 45, 45;
6255 --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
6256 --f7-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
6257 --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
6258 --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
6259}
6260.md {
6261 --f7-dialog-box-shadow: var(--f7-elevation-24);
6262 --f7-dialog-width: 280px;
6263 --f7-dialog-inner-padding: 24px;
6264 --f7-dialog-border-radius: 4px;
6265 --f7-dialog-text-align: left;
6266 --f7-dialog-font-size: 16px;
6267 --f7-dialog-title-font-size: 20px;
6268 --f7-dialog-title-font-weight: 500;
6269 --f7-dialog-title-line-height: 1.3;
6270 --f7-dialog-button-font-size: 14px;
6271 --f7-dialog-button-height: 36px;
6272 --f7-dialog-button-letter-spacing: 0.05em;
6273 --f7-dialog-button-font-weight: 500;
6274 --f7-dialog-button-text-transform: uppercase;
6275 --f7-dialog-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
6276 --f7-dialog-input-border-radius: 0px;
6277 --f7-dialog-input-font-size: 16px;
6278 --f7-dialog-input-height: 36px;
6279 --f7-dialog-input-border-color: transparent;
6280 --f7-dialog-input-border-width: 0px;
6281 --f7-dialog-preloader-size: 32px;
6282 --f7-dialog-bg-color: #fff;
6283 --f7-dialog-text-color: rgba(0, 0, 0, 0.54);
6284 --f7-dialog-title-text-color: #212121;
6285 --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
6286}
6287.md .theme-dark,
6288.md.theme-dark {
6289 --f7-dialog-bg-color: #1c1c1d;
6290 --f7-dialog-title-text-color: #fff;
6291 --f7-dialog-input-bg-color: transparent;
6292 --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
6293}
6294.aurora {
6295 --f7-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
6296 --f7-dialog-width: 300px;
6297 --f7-dialog-inner-padding: 20px;
6298 --f7-dialog-border-radius: 4px;
6299 --f7-dialog-text-align: left;
6300 --f7-dialog-font-size: 14px;
6301 --f7-dialog-title-font-size: 14px;
6302 --f7-dialog-title-font-weight: 700;
6303 --f7-dialog-title-line-height: inherit;
6304 --f7-dialog-button-font-size: 13px;
6305 --f7-dialog-button-height: 28px;
6306 --f7-dialog-button-letter-spacing: 0;
6307 --f7-dialog-button-font-weight: 500;
6308 --f7-dialog-button-text-transform: none;
6309 /*
6310 --f7-dialog-button-pressed-bg-color: var(--f7-theme-color-shade);
6311 --f7-dialog-button-hover-bg-color: var(--f7-theme-color-tint);
6312 */
6313 --f7-dialog-input-border-radius: 4px;
6314 --f7-dialog-input-font-size: 13px;
6315 --f7-dialog-input-height: 24px;
6316 --f7-dialog-input-border-width: 1px;
6317 --f7-dialog-preloader-size: 24px;
6318 --f7-dialog-bg-color: #fff;
6319 --f7-dialog-title-text-color: inherit;
6320 --f7-dialog-text-color: #000;
6321 --f7-dialog-button-text-color: #fff;
6322 --f7-dialog-input-border-color: rgba(0, 0, 0, 0.12);
6323 --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
6324}
6325.aurora .theme-dark,
6326.aurora.theme-dark {
6327 --f7-dialog-bg-color: #1c1c1d;
6328 --f7-dialog-title-text-color: #fff;
6329 --f7-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
6330 --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
6331 --f7-dialog-input-border-color: rgba(255, 255, 255, 0.15);
6332}
6333.dialog {
6334 position: absolute;
6335 z-index: 13500;
6336 left: 50%;
6337 margin-top: 0;
6338 top: 50%;
6339 overflow: hidden;
6340 opacity: 0;
6341 transform: translate3d(0, -50%, 0) scale(1.185);
6342 transition-property: transform, opacity;
6343 display: none;
6344 transition-duration: 400ms;
6345 box-shadow: var(--f7-dialog-box-shadow);
6346 width: var(--f7-dialog-width);
6347 margin-left: calc(-1 * var(--f7-dialog-width) / 2);
6348 border-radius: var(--f7-dialog-border-radius);
6349 text-align: var(--f7-dialog-text-align);
6350 color: var(--f7-dialog-text-color);
6351 font-size: var(--f7-dialog-font-size);
6352 background: var(--f7-dialog-bg-color);
6353 will-change: transform, opacity;
6354}
6355@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
6356 .ios-translucent-modals .dialog {
6357 background-color: rgba(var(--f7-dialog-bg-color-rgb), 0.8);
6358 -webkit-backdrop-filter: saturate(180%) blur(20px);
6359 backdrop-filter: saturate(180%) blur(20px);
6360 }
6361}
6362.dialog.modal-in {
6363 opacity: 1;
6364 transform: translate3d(0, -50%, 0) scale(1);
6365}
6366.dialog.modal-out {
6367 opacity: 0;
6368 z-index: 13499;
6369}
6370.dialog.not-animated {
6371 transition-duration: 0ms;
6372}
6373.dialog-inner {
6374 position: relative;
6375 padding: var(--f7-dialog-inner-padding);
6376}
6377.dialog-title {
6378 color: var(--f7-dialog-title-text-color);
6379 font-size: var(--f7-dialog-title-font-size);
6380 font-weight: var(--f7-dialog-title-font-weight);
6381 line-height: var(--f7-dialog-title-line-height);
6382}
6383.dialog-buttons {
6384 position: relative;
6385 display: flex;
6386}
6387.dialog-buttons-vertical .dialog-buttons {
6388 display: block;
6389 height: auto !important;
6390}
6391.dialog-button {
6392 box-sizing: border-box;
6393 overflow: hidden;
6394 position: relative;
6395 white-space: nowrap;
6396 text-overflow: ellipsis;
6397 color: var(--f7-dialog-button-text-color);
6398 font-size: var(--f7-dialog-button-font-size);
6399 height: var(--f7-dialog-button-height);
6400 line-height: var(--f7-dialog-button-height);
6401 letter-spacing: var(--f7-dialog-button-letter-spacing);
6402 text-align: var(--f7-dialog-button-text-align);
6403 font-weight: var(--f7-dialog-button-font-weight);
6404 text-transform: var(--f7-dialog-button-text-transform);
6405 display: block;
6406 cursor: pointer;
6407}
6408.dialog-button.active-state {
6409 background-color: var(--f7-dialog-button-pressed-bg-color);
6410}
6411.dialog-no-buttons .dialog-buttons {
6412 display: none;
6413}
6414.dialog-input-field {
6415 position: relative;
6416}
6417input.dialog-input[type] {
6418 box-sizing: border-box;
6419 margin: 0;
6420 margin-top: 15px;
6421 border-radius: var(--f7-dialog-input-border-radius);
6422 -webkit-appearance: none;
6423 -moz-appearance: none;
6424 appearance: none;
6425 width: 100%;
6426 display: block;
6427 font-family: inherit;
6428 box-shadow: none;
6429 font-size: var(--f7-dialog-input-font-size);
6430 height: var(--f7-dialog-input-height);
6431 background-color: var(--f7-dialog-input-bg-color);
6432 border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
6433}
6434input.dialog-input[type]::-webkit-input-placeholder {
6435 color: var(--f7-dialog-input-placeholder-color);
6436}
6437input.dialog-input[type]::placeholder {
6438 color: var(--f7-dialog-input-placeholder-color);
6439}
6440.dialog-input-double input.dialog-input {
6441 border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
6442}
6443.dialog-input-double + .dialog-input-double input.dialog-input {
6444 border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
6445}
6446.dialog-preloader .preloader {
6447 --f7-preloader-size: var(--f7-dialog-preloader-size);
6448}
6449html.with-modal-dialog .page-content {
6450 overflow: hidden;
6451 -webkit-overflow-scrolling: auto;
6452}
6453.ios .dialog.modal-out {
6454 transform: translate3d(0, -50%, 0) scale(1);
6455}
6456.ios .dialog-inner {
6457 border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
6458}
6459.ios .dialog-inner:after {
6460 content: '';
6461 position: absolute;
6462 background-color: var(--f7-dialog-border-divider-color);
6463 display: block;
6464 z-index: 15;
6465 top: auto;
6466 right: auto;
6467 bottom: 0;
6468 left: 0;
6469 height: 1px;
6470 width: 100%;
6471 transform-origin: 50% 100%;
6472 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6473}
6474.ios .dialog-title + .dialog-text {
6475 margin-top: 5px;
6476}
6477.ios .dialog-buttons {
6478 height: 44px;
6479 justify-content: center;
6480}
6481.ios .dialog-button {
6482 width: 100%;
6483 padding: 0 5px;
6484 -webkit-box-flex: 1;
6485 -ms-flex: 1;
6486}
6487.ios .dialog-button:after {
6488 content: '';
6489 position: absolute;
6490 background-color: var(--f7-dialog-border-divider-color);
6491 display: block;
6492 z-index: 15;
6493 top: 0;
6494 right: 0;
6495 bottom: auto;
6496 left: auto;
6497 width: 1px;
6498 height: 100%;
6499 transform-origin: 100% 50%;
6500 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
6501}
6502.ios .dialog-button:first-child {
6503 border-radius: 0 0 0 var(--f7-dialog-border-radius);
6504}
6505.ios .dialog-button:last-child {
6506 border-radius: 0 0 var(--f7-dialog-border-radius) 0;
6507}
6508.ios .dialog-button:last-child:after {
6509 display: none !important;
6510}
6511.ios .dialog-button:first-child:last-child {
6512 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
6513}
6514.ios .dialog-button.dialog-button-bold {
6515 font-weight: 500;
6516}
6517.ios .dialog-button[class*='color-'] {
6518 --f7-dialog-button-text-color: var(--f7-theme-color);
6519}
6520.ios .dialog-buttons-vertical .dialog-buttons {
6521 height: auto;
6522}
6523.ios .dialog-buttons-vertical .dialog-button {
6524 border-radius: 0;
6525}
6526.ios .dialog-buttons-vertical .dialog-button:after {
6527 content: '';
6528 position: absolute;
6529 background-color: var(--f7-dialog-border-divider-color);
6530 display: block;
6531 z-index: 15;
6532 top: auto;
6533 right: auto;
6534 bottom: 0;
6535 left: 0;
6536 height: 1px;
6537 width: 100%;
6538 transform-origin: 50% 100%;
6539 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
6540}
6541.ios .dialog-buttons-vertical .dialog-button:last-child {
6542 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
6543}
6544.ios .dialog-buttons-vertical .dialog-button:last-child:after {
6545 display: none !important;
6546}
6547.ios .dialog-no-buttons .dialog-inner {
6548 border-radius: var(--f7-dialog-border-radius);
6549}
6550.ios .dialog-no-buttons .dialog-inner:after {
6551 display: none !important;
6552}
6553.ios .dialog-input-field {
6554 margin-top: 15px;
6555}
6556.ios .dialog-input {
6557 padding: 0 5px;
6558}
6559.ios .dialog-input + .dialog-input {
6560 margin-top: 5px;
6561}
6562.ios .dialog-input-double + .dialog-input-double {
6563 margin-top: 0;
6564}
6565.ios .dialog-input-double + .dialog-input-double .dialog-input {
6566 border-top: 0;
6567 margin-top: 0;
6568}
6569.ios .dialog-preloader .dialog-title ~ .preloader,
6570.ios .dialog-preloader .dialog-text ~ .preloader {
6571 margin-top: 15px;
6572}
6573.ios .dialog-progress .dialog-title ~ .progressbar,
6574.ios .dialog-progress .dialog-text ~ .progressbar,
6575.ios .dialog-progress .dialog-title ~ .progressbar-infinite,
6576.ios .dialog-progress .dialog-text ~ .progressbar-infinite {
6577 margin-top: 15px;
6578}
6579.md .dialog.modal-out {
6580 transform: translate3d(0, -50%, 0) scale(0.815);
6581}
6582.md .dialog-title + .dialog-text {
6583 margin-top: 20px;
6584}
6585.md .dialog-text {
6586 line-height: 1.5;
6587}
6588.md .dialog-buttons {
6589 height: 48px;
6590 padding: 6px 8px;
6591 overflow: hidden;
6592 box-sizing: border-box;
6593 justify-content: flex-end;
6594}
6595.md .dialog-button {
6596 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
6597 border-radius: 4px;
6598 min-width: 64px;
6599 padding: 0 8px;
6600 border: none;
6601 transition-duration: 300ms;
6602 transform: translate3d(0, 0, 0);
6603}
6604.md .dialog-button.dialog-button-bold {
6605 font-weight: 700;
6606}
6607.md .dialog-button + .dialog-button {
6608 margin-left: 4px;
6609}
6610.md .dialog-button[class*='color-'] {
6611 --f7-dialog-button-text-color: var(--f7-theme-color);
6612}
6613.md .dialog-buttons-vertical .dialog-buttons {
6614 display: flex;
6615 flex-direction: column;
6616 align-items: flex-end;
6617}
6618.md .dialog-buttons-vertical .dialog-button + .dialog-button {
6619 margin-top: 12px;
6620}
6621.md .dialog-input {
6622 padding: 0;
6623 transition-duration: 200ms;
6624 position: relative;
6625}
6626.md .dialog-input + .dialog-input {
6627 margin-top: 16px;
6628}
6629.md .dialog-preloader .dialog-title,
6630.md .dialog-progress .dialog-title,
6631.md .dialog-preloader .dialog-inner,
6632.md .dialog-progress .dialog-inner {
6633 text-align: center;
6634}
6635.md .dialog-preloader .dialog-title ~ .preloader,
6636.md .dialog-preloader .dialog-text ~ .preloader {
6637 margin-top: 20px;
6638}
6639.md .dialog-progress .dialog-title ~ .progressbar,
6640.md .dialog-progress .dialog-text ~ .progressbar,
6641.md .dialog-progress .dialog-title ~ .progressbar-infinite,
6642.md .dialog-progress .dialog-text ~ .progressbar-infinite {
6643 margin-top: 16px;
6644}
6645.aurora .dialog.modal-out {
6646 transform: translate3d(0, -50%, 0) scale(0.815);
6647}
6648.aurora .dialog-title + .dialog-text {
6649 margin-top: 10px;
6650}
6651.aurora .dialog-text {
6652 line-height: 1.5;
6653}
6654.aurora .dialog-buttons {
6655 padding: var(--f7-dialog-inner-padding);
6656 padding-top: 0;
6657 overflow: hidden;
6658 box-sizing: border-box;
6659 justify-content: flex-end;
6660}
6661.aurora .dialog-button {
6662 border-radius: 4px;
6663 min-width: 64px;
6664 padding: 0 10px;
6665 border: none;
6666 transition-duration: 300ms;
6667 transform: translate3d(0, 0, 0);
6668 background: var(--f7-theme-color);
6669}
6670.aurora .dialog-button.dialog-button-bold {
6671 font-weight: 600;
6672}
6673.aurora .dialog-button + .dialog-button {
6674 margin-left: 16px;
6675}
6676.aurora .dialog-button.active-state {
6677 background-color: var(--f7-dialog-button-pressed-bg-color, var(--f7-theme-color-shade));
6678}
6679.aurora.device-desktop .dialog-button:not(.active-state):not(.no-hover):hover {
6680 background-color: var(--f7-dialog-button-hover-bg-color, var(--f7-theme-color-tint));
6681}
6682.aurora .dialog-buttons-vertical .dialog-buttons {
6683 display: flex;
6684 flex-direction: column;
6685 align-items: flex-end;
6686}
6687.aurora .dialog-buttons-vertical .dialog-button {
6688 margin-left: 0;
6689 flex-shrink: 0;
6690}
6691.aurora .dialog-buttons-vertical .dialog-button + .dialog-button {
6692 margin-top: 5px;
6693}
6694.aurora .dialog-input-field {
6695 margin-top: 10px;
6696}
6697.aurora .dialog-input-field input.dialog-input {
6698 margin-top: 0;
6699}
6700.aurora .dialog-input {
6701 padding: 0 4px;
6702 transition-duration: 200ms;
6703 position: relative;
6704}
6705.aurora .dialog-input + .dialog-input {
6706 margin-top: 10px;
6707}
6708.aurora .dialog-input-double + .dialog-input-double {
6709 margin-top: 0;
6710}
6711.aurora .dialog-input-double + .dialog-input-double .dialog-input {
6712 border-top: 0;
6713 margin-top: 0;
6714}
6715.aurora .dialog-preloader .dialog-title,
6716.aurora .dialog-progress .dialog-title,
6717.aurora .dialog-preloader .dialog-inner,
6718.aurora .dialog-progress .dialog-inner {
6719 text-align: center;
6720}
6721.aurora .dialog-preloader .dialog-title ~ .preloader,
6722.aurora .dialog-preloader .dialog-text ~ .preloader {
6723 margin-top: 10px;
6724}
6725.aurora .dialog-progress .dialog-title ~ .progressbar,
6726.aurora .dialog-progress .dialog-text ~ .progressbar,
6727.aurora .dialog-progress .dialog-title ~ .progressbar-infinite,
6728.aurora .dialog-progress .dialog-text ~ .progressbar-infinite {
6729 margin-top: 15px;
6730}
6731/* === Popup === */
6732:root {
6733 --f7-popup-border-radius: 0px;
6734 --f7-popup-tablet-width: 630px;
6735 --f7-popup-tablet-height: 630px;
6736 --f7-popup-transition-duration: 400ms;
6737 --f7-popup-push-border-radius: 10px;
6738 --f7-popup-push-offset: var(--f7-safe-area-top);
6739 /*
6740 --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
6741 */
6742}
6743.ios {
6744 --f7-popup-tablet-border-radius: 5px;
6745 --f7-popup-box-shadow: none;
6746}
6747.md {
6748 --f7-popup-tablet-border-radius: 4px;
6749 --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
6750}
6751.aurora {
6752 --f7-popup-tablet-border-radius: 4px;
6753 --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
6754}
6755.popup-backdrop {
6756 z-index: 10500;
6757}
6758.popup {
6759 position: absolute;
6760 left: 0;
6761 top: 0px;
6762 width: 100%;
6763 height: 100%;
6764 display: none;
6765 box-sizing: border-box;
6766 transition-property: transform;
6767 transform: translate3d(0, 100vh, 0);
6768 background: #fff;
6769 z-index: 11000;
6770 overflow: hidden;
6771 border-radius: var(--f7-popup-border-radius);
6772}
6773.theme-dark .popup,
6774.popup.theme-dark {
6775 background: #000;
6776}
6777.popup.modal-in,
6778.popup.modal-out {
6779 transition-duration: var(--f7-popup-transition-duration);
6780}
6781.popup.not-animated {
6782 transition-duration: 0ms;
6783}
6784.popup.modal-in {
6785 display: block;
6786 transform: translate3d(0, 0, 0);
6787}
6788.popup.modal-out {
6789 transform: translate3d(0, 100vh, 0);
6790}
6791.popup.swipe-close-to-top.modal-out {
6792 transform: translate3d(0, -100vh, 0);
6793}
6794@media (min-width: 630px) and (min-height: 630px) {
6795 .popup:not(.popup-tablet-fullscreen) {
6796 --f7-safe-area-top: 0px;
6797 --f7-safe-area-bottom: 0px;
6798 width: var(--f7-popup-tablet-width);
6799 height: var(--f7-popup-tablet-height);
6800 left: 50%;
6801 top: 50%;
6802 margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
6803 margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
6804 transform: translate3d(0, 100vh, 0);
6805 box-shadow: var(--f7-popup-box-shadow);
6806 border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
6807 }
6808 .popup:not(.popup-tablet-fullscreen).modal-in {
6809 transform: translate3d(0, 0, 0);
6810 }
6811 .popup:not(.popup-tablet-fullscreen).modal-out {
6812 transform: translate3d(0, 100vh, 0);
6813 }
6814 .popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out {
6815 transform: translate3d(0, -100vh, 0);
6816 }
6817 .popup:not(.popup-tablet-fullscreen).popup-behind {
6818 transform: translate3d(0, 0, 0) scale(0.9);
6819 }
6820 .popup:not(.popup-tablet-fullscreen).popup-behind.modal-out {
6821 transform: translate3d(0, 100vh, 0) scale(0.9);
6822 }
6823}
6824html.with-modal-popup .framework7-root > .views .page-content,
6825html.with-modal-popup .framework7-root > .view .page-content,
6826html.with-modal-popup .framework7-root > .panel .page-content {
6827 overflow: hidden;
6828 -webkit-overflow-scrolling: auto;
6829}
6830html.with-modal-popup-push .popup-push,
6831html.with-modal-popup-push-closing .popup-push {
6832 top: calc(var(--f7-popup-push-offset) + 10px);
6833 height: calc(100% - var(--f7-popup-push-offset) - 10px);
6834 border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
6835 --f7-safe-area-top: 0px;
6836}
6837html.with-modal-popup-push .popup-push .view,
6838html.with-modal-popup-push-closing .popup-push .view,
6839html.with-modal-popup-push .popup-push .page,
6840html.with-modal-popup-push-closing .popup-push .page {
6841 --f7-safe-area-top: 0px;
6842}
6843html.with-modal-popup-push .framework7-root,
6844html.with-modal-popup-push-closing .framework7-root {
6845 background: #000;
6846}
6847html.with-modal-popup-push .framework7-root > .views,
6848html.with-modal-popup-push-closing .framework7-root > .views,
6849html.with-modal-popup-push .framework7-root > .view,
6850html.with-modal-popup-push-closing .framework7-root > .view {
6851 transition-duration: var(--f7-popup-transition-duration);
6852}
6853html.with-modal-popup-push.theme-dark .framework7-root > .views:after,
6854html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
6855html.with-modal-popup-push.theme-dark .framework7-root > .view:after,
6856html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
6857html.with-modal-popup-push .theme-dark .framework7-root > .views:after,
6858html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
6859html.with-modal-popup-push .theme-dark .framework7-root > .view:after,
6860html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
6861html.with-modal-popup-push .theme-dark.framework7-root > .views:after,
6862html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
6863html.with-modal-popup-push .theme-dark.framework7-root > .view:after,
6864html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
6865html.with-modal-popup-push .framework7-root > .views.theme-dark:after,
6866html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
6867html.with-modal-popup-push .framework7-root > .view.theme-dark:after,
6868html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
6869 content: '';
6870 position: absolute;
6871 pointer-events: none;
6872 left: 0;
6873 top: 0;
6874 width: 100%;
6875 height: 100%;
6876 background: rgba(255, 255, 255, 0.1);
6877 z-index: 13000;
6878 border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
6879 opacity: 1;
6880 animation: popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards;
6881}
6882html.with-modal-popup-push .framework7-root > .views,
6883html.with-modal-popup-push .framework7-root > .view {
6884 border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
6885 transform: translate3d(0, 0, 0px) scale(var(--f7-popup-push-scale, 1)) !important;
6886}
6887html.with-modal-popup-push .popup:after {
6888 content: '';
6889 pointer-events: none;
6890 position: absolute;
6891 left: 0;
6892 top: 0;
6893 width: 100%;
6894 height: 100%;
6895 background: rgba(0, 0, 0, 0.4);
6896 z-index: 13000;
6897 transition-duration: var(--f7-popup-transition-duration);
6898 border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
6899 opacity: 0;
6900}
6901html.with-modal-popup-push.theme-dark .popup:after,
6902html.with-modal-popup-push .theme-dark .popup:after,
6903html.with-modal-popup-push .theme-dark.popup:after {
6904 background: rgba(255, 255, 255, 0.05);
6905}
6906html.with-modal-popup-push .popup-behind {
6907 transform: translate3d(0, 0px, 0px) scale(var(--f7-popup-push-scale, 1));
6908}
6909html.with-modal-popup-push .popup-behind.modal-out {
6910 transform: translate3d(0, 100vh, 0) scale(var(--f7-popup-push-scale, 1));
6911}
6912html.with-modal-popup-push .popup-behind:not(.popup-push) {
6913 border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
6914}
6915html.with-modal-popup-push .popup-behind.popup-push {
6916 transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px), 0px) scale(var(--f7-popup-push-scale, 1));
6917}
6918html.with-modal-popup-push .popup-behind.popup-push.modal-out {
6919 transform: translate3d(0, calc(0px - var(--f7-popup-push-offset) - 10px + 100vh), 0px) scale(var(--f7-popup-push-scale, 1));
6920}
6921html.with-modal-popup-push .popup-behind:after {
6922 opacity: 1;
6923 pointer-events: auto;
6924}
6925html.with-modal-popup-push-closing.theme-dark .framework7-root > .views:after,
6926html.with-modal-popup-push-closing.theme-dark .framework7-root > .view:after,
6927html.with-modal-popup-push-closing .theme-dark .framework7-root > .views:after,
6928html.with-modal-popup-push-closing .theme-dark .framework7-root > .view:after,
6929html.with-modal-popup-push-closing .theme-dark.framework7-root > .views:after,
6930html.with-modal-popup-push-closing .theme-dark.framework7-root > .view:after,
6931html.with-modal-popup-push-closing .framework7-root > .views.theme-dark:after,
6932html.with-modal-popup-push-closing .framework7-root > .view.theme-dark:after {
6933 animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
6934}
6935@keyframes popup-dark-push-overlay-fade-in {
6936 from {
6937 opacity: 0;
6938 }
6939 to {
6940 opacity: 1;
6941 }
6942}
6943@keyframes popup-dark-push-overlay-fade-out {
6944 from {
6945 opacity: 1;
6946 }
6947 to {
6948 opacity: 0;
6949 }
6950}
6951/* === Login Screen === */
6952:root {
6953 --f7-login-screen-blocks-max-width: 480px;
6954 /*
6955 --f7-login-screen-list-button-text-color: var(--f7-theme-color);
6956 */
6957 --f7-login-screen-title-text-align: center;
6958 --f7-login-screen-title-text-color: inherit;
6959 --f7-login-screen-title-letter-spacing: 0;
6960 --f7-login-screen-title-font-weight: 600;
6961 --f7-login-screen-title-font-size: 28px;
6962 --f7-login-screen-content-bg-color: #fff;
6963 --f7-login-screen-bg-color: #fff;
6964}
6965:root .theme-dark,
6966:root.theme-dark {
6967 --f7-login-screen-bg-color: #121212;
6968 --f7-login-screen-content-bg-color: #121212;
6969}
6970.ios {
6971 --f7-login-screen-blocks-margin-vertical: 25px;
6972}
6973.ios .theme-dark,
6974.ios.theme-dark {
6975 --f7-login-screen-bg-color: #000;
6976 --f7-login-screen-content-bg-color: #000;
6977}
6978.md {
6979 --f7-login-screen-blocks-margin-vertical: 24px;
6980}
6981.aurora {
6982 --f7-login-screen-blocks-margin-vertical: 15px;
6983}
6984.login-screen {
6985 position: absolute;
6986 left: 0;
6987 top: 0;
6988 width: 100%;
6989 height: 100%;
6990 display: none;
6991 box-sizing: border-box;
6992 transition-property: transform;
6993 transform: translate3d(0, 100vh, 0);
6994 background: var(--f7-login-screen-bg-color);
6995 z-index: 11000;
6996}
6997.login-screen.modal-in,
6998.login-screen.modal-out {
6999 transition-duration: 400ms;
7000}
7001.login-screen.not-animated {
7002 transition-duration: 0ms;
7003}
7004.login-screen.modal-in {
7005 display: block;
7006 transform: translate3d(0, 0, 0);
7007}
7008.login-screen.modal-out {
7009 transform: translate3d(0, 100%, 0);
7010}
7011.login-screen-content,
7012.login-screen-page,
7013.login-screen .page {
7014 background: var(--f7-login-screen-content-bg-color);
7015}
7016.login-screen-content .list-button,
7017.login-screen-page .list-button {
7018 text-align: center;
7019 color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
7020}
7021.login-screen-content .login-screen-title,
7022.login-screen-page .login-screen-title,
7023.login-screen-content .list,
7024.login-screen-page .list,
7025.login-screen-content .block,
7026.login-screen-page .block {
7027 margin: var(--f7-login-screen-blocks-margin-vertical) auto;
7028}
7029.login-screen-content .login-screen-title,
7030.login-screen-page .login-screen-title,
7031.login-screen-content .list,
7032.login-screen-page .list,
7033.login-screen-content .block,
7034.login-screen-page .block,
7035.login-screen-content .block-footer,
7036.login-screen-page .block-footer,
7037.login-screen-content .block-header,
7038.login-screen-page .block-header {
7039 max-width: var(--f7-login-screen-blocks-max-width);
7040}
7041.login-screen-content .list ul,
7042.login-screen-page .list ul {
7043 background: none;
7044}
7045.login-screen-content .list ul:before,
7046.login-screen-page .list ul:before,
7047.login-screen-content .list ul:after,
7048.login-screen-page .list ul:after {
7049 display: none !important;
7050}
7051.login-screen-content .block-footer,
7052.login-screen-page .block-footer,
7053.login-screen-content .block-header,
7054.login-screen-page .block-header {
7055 text-align: center;
7056 margin-left: auto;
7057 margin-right: auto;
7058}
7059.login-screen-title {
7060 text-align: var(--f7-login-screen-title-text-align);
7061 font-size: var(--f7-login-screen-title-font-size);
7062 font-weight: var(--f7-login-screen-title-font-weight);
7063 color: var(--f7-login-screen-title-text-color);
7064 letter-spacing: var(--f7-login-screen-title-letter-spacing);
7065}
7066.login-screen-page,
7067.login-screen > .view > .page,
7068.login-screen > .page {
7069 display: flex;
7070 flex-direction: column;
7071}
7072.login-screen-page .page-content,
7073.login-screen > .view > .page .page-content,
7074.login-screen > .page .page-content,
7075.login-screen-page .login-screen-content,
7076.login-screen > .view > .page .login-screen-content,
7077.login-screen > .page .login-screen-content {
7078 margin-top: auto;
7079 margin-bottom: auto;
7080 height: auto;
7081 max-height: 100%;
7082 width: 100%;
7083}
7084.theme-dark .login-screen-content .list ul,
7085.theme-dark .login-screen-content .block-strong,
7086.theme-dark .login-screen-page .list ul,
7087.theme-dark .login-screen-page .block-strong,
7088.theme-dark.login-screen-page .list ul,
7089.theme-dark.login-screen-page .block-strong {
7090 background-color: transparent;
7091}
7092/* === Popover === */
7093:root {
7094 --f7-popover-width: 260px;
7095}
7096.ios {
7097 --f7-popover-border-radius: 13px;
7098 --f7-popover-box-shadow: none;
7099 --f7-popover-actions-icon-size: 28px;
7100 --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
7101 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.45);
7102}
7103.ios .theme-dark,
7104.ios.theme-dark {
7105 --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
7106 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.55);
7107}
7108.md {
7109 --f7-popover-border-radius: 4px;
7110 --f7-popover-box-shadow: var(--f7-elevation-8);
7111 --f7-popover-actions-icon-size: 24px;
7112 --f7-popover-bg-color: #fff;
7113 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
7114}
7115.md .theme-dark,
7116.md.theme-dark {
7117 --f7-popover-bg-color: #1c1c1d;
7118 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
7119}
7120.aurora {
7121 --f7-popover-width: 200px;
7122 --f7-popover-border-radius: 4px;
7123 --f7-popover-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 5px 11px 0 rgba(0,0,0,0.28);
7124 --f7-popover-actions-icon-size: 24px;
7125 --f7-popover-bg-color: #fff;
7126 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.6);
7127}
7128.aurora .theme-dark,
7129.aurora.theme-dark {
7130 --f7-popover-bg-color: #1c1c1d;
7131 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.6);
7132}
7133.popover {
7134 width: var(--f7-popover-width);
7135 z-index: 13500;
7136 margin: 0;
7137 top: 0;
7138 opacity: 0;
7139 left: 0;
7140 position: absolute;
7141 display: none;
7142 transition-duration: 300ms;
7143 background-color: var(--f7-popover-bg-color);
7144 border-radius: var(--f7-popover-border-radius);
7145 box-shadow: var(--f7-popover-box-shadow);
7146 will-change: transform, opacity;
7147}
7148.popover .list {
7149 margin: 0;
7150}
7151.popover .list ul {
7152 background: none;
7153}
7154.popover .list:first-child ul:before {
7155 display: none !important;
7156}
7157.popover .list:last-child ul:after {
7158 display: none !important;
7159}
7160.popover .list:first-child ul {
7161 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
7162}
7163.popover .list:first-child li:first-child,
7164.popover .list:first-child li:first-child a,
7165.popover .list:first-child li:first-child > label {
7166 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
7167}
7168.popover .list:last-child ul {
7169 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
7170}
7171.popover .list:last-child li:last-child,
7172.popover .list:last-child li:last-child a,
7173.popover .list:last-child li:last-child > label {
7174 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
7175}
7176.popover .list:first-child:last-child li:first-child:last-child,
7177.popover .list:first-child:last-child li:first-child:last-child a,
7178.popover .list:first-child:last-child li:first-child:last-child > label,
7179.popover .list:first-child:last-child ul {
7180 border-radius: var(--f7-popover-border-radius);
7181}
7182.popover .list + .list {
7183 margin-top: var(--f7-list-margin-vertical);
7184}
7185.popover.modal-in {
7186 opacity: 1;
7187}
7188.popover.not-animated {
7189 transition-duration: 0ms;
7190}
7191.popover-inner {
7192 overflow: auto;
7193 -webkit-overflow-scrolling: touch;
7194}
7195.popover-from-actions .item-link i.icon {
7196 width: var(--f7-popover-actions-icon-size);
7197 height: var(--f7-popover-actions-icon-size);
7198 font-size: var(--f7-popover-actions-icon-size);
7199}
7200.popover-from-actions-bold {
7201 font-weight: 600;
7202}
7203.popover-from-actions-label {
7204 line-height: 1.3;
7205 position: relative;
7206 display: flex;
7207 align-items: center;
7208 padding: var(--f7-actions-label-padding);
7209 color: var(--f7-popover-actions-label-text-color);
7210 font-size: var(--f7-actions-label-font-size);
7211 justify-content: var(--f7-actions-label-justify-content);
7212}
7213.popover-from-actions-label:after {
7214 content: '';
7215 position: absolute;
7216 background-color: var(--f7-list-item-border-color);
7217 display: block;
7218 z-index: 15;
7219 top: auto;
7220 right: auto;
7221 bottom: 0;
7222 left: 0;
7223 height: 1px;
7224 width: 100%;
7225 transform-origin: 50% 100%;
7226 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7227}
7228.popover-from-actions-label:last-child:after {
7229 display: none !important;
7230}
7231.ios .popover {
7232 transform: none;
7233 transition-property: opacity;
7234}
7235.ios .popover-angle {
7236 width: 26px;
7237 height: 26px;
7238 position: absolute;
7239 left: -26px;
7240 top: 0;
7241 z-index: 100;
7242 overflow: hidden;
7243}
7244.ios .popover-angle:after {
7245 content: '';
7246 background: var(--f7-popover-bg-color);
7247 width: 26px;
7248 height: 26px;
7249 position: absolute;
7250 left: 0;
7251 top: 0;
7252 border-radius: 3px;
7253 transform: rotate(45deg);
7254}
7255.ios .popover-angle.on-left {
7256 left: -26px;
7257}
7258.ios .popover-angle.on-left:after {
7259 left: 19px;
7260 top: 0;
7261}
7262.ios .popover-angle.on-right {
7263 left: 100%;
7264}
7265.ios .popover-angle.on-right:after {
7266 left: -19px;
7267 top: 0;
7268}
7269.ios .popover-angle.on-top {
7270 left: 0;
7271 top: -26px;
7272}
7273.ios .popover-angle.on-top:after {
7274 left: 0;
7275 top: 19px;
7276}
7277.ios .popover-angle.on-bottom {
7278 left: 0;
7279 top: 100%;
7280}
7281.ios .popover-angle.on-bottom:after {
7282 left: 0;
7283 top: -19px;
7284}
7285.md .popover {
7286 transform: scale(0.85, 0.6);
7287 transition-property: opacity, transform;
7288}
7289.md .popover.modal-in {
7290 opacity: 1;
7291 transform: scale(1);
7292}
7293.md .popover.modal-out {
7294 opacity: 0;
7295 transform: scale(1);
7296}
7297.md .popover-on-top {
7298 transform-origin: center bottom;
7299}
7300.md .popover-on-top.popover-on-right {
7301 transform-origin: left bottom;
7302}
7303.md .popover-on-top.popover-on-left {
7304 transform-origin: right bottom;
7305}
7306.md .popover-on-middle {
7307 transform-origin: center center;
7308}
7309.md .popover-on-middle.popover-on-right {
7310 transform-origin: left center;
7311}
7312.md .popover-on-middle.popover-on-left {
7313 transform-origin: right center;
7314}
7315.md .popover-on-bottom {
7316 transform-origin: center top;
7317}
7318.md .popover-on-bottom.popover-on-right {
7319 transform-origin: left top;
7320}
7321.md .popover-on-bottom.popover-on-left {
7322 transform-origin: right top;
7323}
7324.aurora .popover {
7325 transform: none;
7326 transition-property: opacity;
7327}
7328.aurora .popover-angle {
7329 width: 18px;
7330 height: 18px;
7331 position: absolute;
7332 left: -18px;
7333 top: 0;
7334 z-index: 100;
7335 overflow: hidden;
7336}
7337.aurora .popover-angle:after {
7338 content: '';
7339 background: var(--f7-popover-bg-color);
7340 width: 18px;
7341 height: 18px;
7342 position: absolute;
7343 left: 0;
7344 top: 0;
7345 border-radius: 2px;
7346 transform: rotate(45deg);
7347}
7348.aurora .popover-angle.on-left {
7349 left: -18px;
7350}
7351.aurora .popover-angle.on-left:after {
7352 left: 13px;
7353 top: 0;
7354}
7355.aurora .popover-angle.on-right {
7356 left: 100%;
7357}
7358.aurora .popover-angle.on-right:after {
7359 left: -13px;
7360 top: 0;
7361}
7362.aurora .popover-angle.on-top {
7363 left: 0;
7364 top: -18px;
7365}
7366.aurora .popover-angle.on-top:after {
7367 left: 0;
7368 top: 13px;
7369}
7370.aurora .popover-angle.on-bottom {
7371 left: 0;
7372 top: 100%;
7373}
7374.aurora .popover-angle.on-bottom:after {
7375 left: 0;
7376 top: -13px;
7377}
7378/* === Actions === */
7379:root {
7380 /*
7381 --f7-actions-button-text-color: var(--f7-theme-color);
7382 */
7383 --f7-actions-grid-button-font-size: 12px;
7384 --f7-actions-grid-button-text-color: #757575;
7385}
7386:root .theme-dark,
7387:root.theme-dark {
7388 --f7-actions-label-text-color: rgba(255, 255, 255, 0.55);
7389}
7390.ios {
7391 --f7-actions-border-radius: 13px;
7392 --f7-actions-button-padding: 0px;
7393 --f7-actions-button-text-align: center;
7394 --f7-actions-button-height: 57px;
7395 --f7-actions-button-height-landscape: 44px;
7396 --f7-actions-button-font-size: 20px;
7397 --f7-actions-button-icon-size: 28px;
7398 --f7-actions-button-justify-content: center;
7399 --f7-actions-label-padding: 8px 10px;
7400 --f7-actions-label-font-size: 13px;
7401 --f7-actions-label-justify-content: center;
7402 --f7-actions-group-border-color: transparent;
7403 --f7-actions-group-margin: 8px;
7404 --f7-actions-grid-button-icon-size: 48px;
7405 --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
7406 --f7-actions-bg-color-rgb: 255, 255, 255;
7407 --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
7408 --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
7409 --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
7410 --f7-actions-label-text-color: #8a8a8a;
7411}
7412.ios .theme-dark,
7413.ios.theme-dark {
7414 --f7-actions-bg-color: rgba(45, 45, 45, 0.95);
7415 --f7-actions-bg-color-rgb: 45, 45, 45;
7416 --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
7417 --f7-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
7418 --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;
7419}
7420.md {
7421 --f7-actions-border-radius: 0px;
7422 --f7-actions-button-border-color: transparent;
7423 --f7-actions-button-padding: 0 16px;
7424 --f7-actions-button-text-align: left;
7425 --f7-actions-button-height: 48px;
7426 --f7-actions-button-height-landscape: 48px;
7427 --f7-actions-button-font-size: 16px;
7428 --f7-actions-button-icon-size: 24px;
7429 --f7-actions-button-justify-content: space-between;
7430 --f7-actions-label-padding: 12px 16px;
7431 --f7-actions-label-font-size: 16px;
7432 --f7-actions-label-justify-content: flex-start;
7433 --f7-actions-group-margin: 0px;
7434 --f7-actions-grid-button-icon-size: 48px;
7435 --f7-actions-bg-color: #fff;
7436 --f7-actions-button-pressed-bg-color: #e5e5e5;
7437 --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
7438 --f7-actions-group-border-color: rgba(0, 0, 0, 0.12);
7439}
7440.md .theme-dark,
7441.md.theme-dark {
7442 --f7-actions-bg-color: #202020;
7443 --f7-actions-button-pressed-bg-color: #2e2e2e;
7444 --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
7445}
7446.aurora {
7447 --f7-actions-border-radius: 8px;
7448 --f7-actions-button-padding: 0 16px;
7449 --f7-actions-button-text-align: center;
7450 --f7-actions-button-height: 48px;
7451 --f7-actions-button-height-landscape: 48px;
7452 --f7-actions-button-font-size: 16px;
7453 --f7-actions-button-icon-size: 24px;
7454 --f7-actions-button-justify-content: space-between;
7455 --f7-actions-label-padding: 10px 16px;
7456 --f7-actions-label-font-size: 14px;
7457 --f7-actions-label-justify-content: center;
7458 --f7-actions-group-margin: 16px;
7459 --f7-actions-grid-button-icon-size: 48px;
7460 --f7-actions-bg-color: #fff;
7461 --f7-actions-button-border-color: rgba(0, 0, 0, 0.12);
7462 --f7-actions-button-pressed-bg-color: #e5e5e5;
7463 --f7-actions-label-text-color: rgba(0, 0, 0, 0.5);
7464 --f7-actions-group-border-color: rgba(0, 0, 0, 0.1);
7465}
7466.aurora .theme-dark,
7467.aurora.theme-dark {
7468 --f7-actions-bg-color: #202020;
7469 --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
7470 --f7-actions-button-pressed-bg-color: #2e2e2e;
7471 --f7-actions-group-border-color: rgba(255, 255, 255, 0.15);
7472}
7473.actions-modal {
7474 position: absolute;
7475 left: 0;
7476 bottom: 0;
7477 z-index: 13500;
7478 width: 100%;
7479 transform: translate3d(0, 100%, 0);
7480 display: none;
7481 max-height: 100%;
7482 overflow: auto;
7483 -webkit-overflow-scrolling: touch;
7484 transition-property: transform;
7485 will-change: transform;
7486}
7487.actions-modal.modal-in,
7488.actions-modal.modal-out {
7489 transition-duration: 300ms;
7490}
7491.actions-modal.not-animated {
7492 transition-duration: 0ms;
7493}
7494.actions-modal.modal-in {
7495 transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
7496}
7497.actions-modal.modal-out {
7498 z-index: 13499;
7499 transform: translate3d(0, 100%, 0);
7500}
7501@media (min-width: 496px) {
7502 .actions-modal {
7503 width: 480px;
7504 left: 50%;
7505 margin-left: -240px;
7506 }
7507}
7508@media (orientation: landscape) {
7509 .actions-modal {
7510 --f7-actions-button-height: var(--f7-actions-button-height-landscape);
7511 }
7512}
7513.actions-group {
7514 overflow: hidden;
7515 position: relative;
7516 margin: var(--f7-actions-group-margin);
7517 border-radius: var(--f7-actions-border-radius);
7518 transform: translate3d(0, 0, 0);
7519}
7520.actions-group:after {
7521 content: '';
7522 position: absolute;
7523 background-color: var(--f7-actions-group-border-color);
7524 display: block;
7525 z-index: 15;
7526 top: auto;
7527 right: auto;
7528 bottom: 0;
7529 left: 0;
7530 height: 1px;
7531 width: 100%;
7532 transform-origin: 50% 100%;
7533 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7534}
7535.actions-group:last-child:after {
7536 display: none !important;
7537}
7538.actions-button,
7539.actions-label {
7540 width: 100%;
7541 font-weight: normal;
7542 margin: 0;
7543 box-sizing: border-box;
7544 display: block;
7545 position: relative;
7546 overflow: hidden;
7547 text-align: var(--f7-actions-button-text-align);
7548 background: var(--f7-actions-bg-color);
7549}
7550@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
7551 .ios-translucent-modals .actions-button,
7552 .ios-translucent-modals .actions-label {
7553 background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
7554 -webkit-backdrop-filter: saturate(180%) blur(20px);
7555 backdrop-filter: saturate(180%) blur(20px);
7556 }
7557}
7558.actions-button:after,
7559.actions-label:after {
7560 content: '';
7561 position: absolute;
7562 background-color: var(--f7-actions-button-border-color);
7563 display: block;
7564 z-index: 15;
7565 top: auto;
7566 right: auto;
7567 bottom: 0;
7568 left: 0;
7569 height: 1px;
7570 width: 100%;
7571 transform-origin: 50% 100%;
7572 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7573}
7574.actions-button:first-child,
7575.actions-label:first-child {
7576 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
7577}
7578.actions-button:last-child,
7579.actions-label:last-child {
7580 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
7581}
7582.actions-button:last-child:after,
7583.actions-label:last-child:after {
7584 display: none !important;
7585}
7586.actions-button:first-child:last-child,
7587.actions-label:first-child:last-child {
7588 border-radius: var(--f7-actions-border-radius);
7589}
7590.actions-button a,
7591.actions-label a {
7592 text-decoration: none;
7593 color: inherit;
7594 display: block;
7595}
7596.actions-button b,
7597.actions-label b,
7598.actions-button.actions-button-bold,
7599.actions-label.actions-button-bold {
7600 font-weight: 600;
7601}
7602.actions-button {
7603 cursor: pointer;
7604 display: flex;
7605 color: var(--f7-actions-button-text-color, var(--f7-theme-color));
7606 font-size: var(--f7-actions-button-font-size);
7607 height: var(--f7-actions-button-height);
7608 line-height: var(--f7-actions-button-height);
7609 padding: var(--f7-actions-button-padding);
7610 justify-content: var(--f7-actions-button-justify-content);
7611 z-index: 10;
7612}
7613.actions-button.active-state {
7614 background-color: var(--f7-actions-button-pressed-bg-color) !important;
7615}
7616.actions-button[class*='color-'] {
7617 color: var(--f7-theme-color);
7618}
7619@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
7620 .ios-translucent-modals .actions-button.active-state {
7621 background-color: rgba(var(--f7-actions-button-pressed-bg-color-rgb), 0.8);
7622 -webkit-backdrop-filter: saturate(180%) blur(20px);
7623 backdrop-filter: saturate(180%) blur(20px);
7624 }
7625}
7626.actions-button-media {
7627 flex-shrink: 0;
7628 display: flex;
7629 align-items: center;
7630}
7631.actions-button-media i.icon {
7632 width: var(--f7-actions-button-icon-size);
7633 height: var(--f7-actions-button-icon-size);
7634 font-size: var(--f7-actions-button-icon-size);
7635}
7636.actions-button a,
7637.actions-button-text {
7638 position: relative;
7639 overflow: hidden;
7640 white-space: nowrap;
7641 text-overflow: ellipsis;
7642}
7643.actions-button-text {
7644 width: 100%;
7645 flex-shrink: 1;
7646 text-align: var(--f7-actions-button-text-align);
7647}
7648.actions-label {
7649 line-height: 1.3;
7650 display: flex;
7651 align-items: center;
7652 font-size: var(--f7-actions-label-font-size);
7653 color: var(--f7-actions-label-text-color);
7654 padding: var(--f7-actions-label-padding);
7655 justify-content: var(--f7-actions-label-justify-content);
7656 min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
7657}
7658.actions-label[class*=' color-'] {
7659 --f7-actions-label-text-color: var(--f7-theme-color);
7660}
7661.actions-grid .actions-group {
7662 display: flex;
7663 flex-wrap: wrap;
7664 justify-content: flex-start;
7665 border-radius: 0;
7666 background: var(--f7-actions-bg-color);
7667 margin-top: 0;
7668}
7669.actions-grid .actions-group:first-child {
7670 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
7671}
7672.actions-grid .actions-group:last-child {
7673 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
7674}
7675.actions-grid .actions-group:first-child:last-child {
7676 border-radius: var(--f7-actions-border-radius);
7677}
7678.actions-grid .actions-group:not(:last-child) {
7679 margin-bottom: 0;
7680}
7681.actions-grid .actions-button,
7682.actions-grid .actions-label {
7683 border-radius: 0 !important;
7684 background: none;
7685}
7686.actions-grid .actions-button {
7687 width: 33.33333333%;
7688 display: block;
7689 color: var(--f7-actions-grid-button-text-color);
7690 height: auto;
7691 line-height: 1;
7692 padding: 16px;
7693}
7694.actions-grid .actions-button:after {
7695 display: none !important;
7696}
7697.actions-grid .actions-button-media {
7698 margin-left: auto !important;
7699 margin-right: auto !important;
7700 width: var(--f7-actions-grid-button-icon-size);
7701 height: var(--f7-actions-grid-button-icon-size);
7702}
7703.actions-grid .actions-button-media i.icon {
7704 width: var(--f7-actions-grid-button-icon-size);
7705 height: var(--f7-actions-grid-button-icon-size);
7706 font-size: var(--f7-actions-grid-button-icon-size);
7707}
7708.actions-grid .actions-button-text {
7709 margin-left: 0 !important;
7710 text-align: center !important;
7711 margin-top: 8px;
7712 line-height: 1.33em;
7713 height: 1.33em;
7714 font-size: var(--f7-actions-grid-button-font-size);
7715}
7716@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
7717 .ios-translucent-modals .actions-grid .actions-group {
7718 background-color: rgba(var(--f7-actions-bg-color-rgb), 0.8);
7719 -webkit-backdrop-filter: saturate(180%) blur(20px);
7720 backdrop-filter: saturate(180%) blur(20px);
7721 }
7722}
7723.ios .actions-button-media {
7724 margin-left: 16px;
7725}
7726.ios .actions-button-media + .actions-button-text {
7727 text-align: left;
7728 margin-left: 16px;
7729}
7730.md .actions-button {
7731 transition-duration: 300ms;
7732}
7733.md .actions-button-media {
7734 min-width: 40px;
7735}
7736.md .actions-button-media + .actions-button-text {
7737 margin-left: 16px;
7738}
7739.aurora .actions-button-media {
7740 margin-left: 16px;
7741}
7742.aurora .actions-button-media + .actions-button-text {
7743 text-align: left;
7744 margin-left: 16px;
7745}
7746/* === Sheet Modal === */
7747:root {
7748 --f7-sheet-height: 260px;
7749 --f7-sheet-border-color: transparent;
7750 --f7-sheet-transition-duration: 300ms;
7751 --f7-sheet-push-border-radius: 10px;
7752 --f7-sheet-push-offset: var(--f7-safe-area-top);
7753 --f7-sheet-bg-color: #fff;
7754}
7755:root .theme-dark,
7756:root.theme-dark {
7757 --f7-sheet-bg-color: #202020;
7758}
7759.ios {
7760 --f7-sheet-border-color: var(--f7-bars-border-color);
7761}
7762.sheet-backdrop {
7763 z-index: 11000;
7764}
7765.sheet-modal {
7766 position: absolute;
7767 left: 0;
7768 bottom: 0;
7769 width: 100%;
7770 height: var(--f7-sheet-height);
7771 display: none;
7772 box-sizing: border-box;
7773 transition-property: transform;
7774 transform: translate3d(0, 100%, 0);
7775 background: var(--f7-sheet-bg-color);
7776 z-index: 12500;
7777 will-change: transform, opacity;
7778}
7779.sheet-modal.modal-in,
7780.sheet-modal.modal-out {
7781 transition-duration: var(--f7-sheet-transition-duration);
7782}
7783.sheet-modal.not-animated {
7784 transition-duration: 0ms;
7785}
7786.sheet-modal.modal-in {
7787 display: block;
7788 transform: translate3d(0, 0, 0);
7789}
7790.sheet-modal.modal-in-swipe-step {
7791 display: block;
7792 transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
7793}
7794.sheet-modal.modal-out {
7795 transform: translate3d(0, 100%, 0);
7796}
7797.sheet-modal .sheet-modal-inner {
7798 height: 100%;
7799 position: relative;
7800 overflow: hidden;
7801}
7802.sheet-modal .toolbar {
7803 --f7-safe-area-bottom: 0px;
7804 position: relative;
7805 width: 100%;
7806}
7807.sheet-modal .toolbar:after,
7808.sheet-modal .toolbar:before {
7809 display: none;
7810}
7811.sheet-modal .toolbar + .sheet-modal-inner {
7812 height: calc(100% - var(--f7-toolbar-height));
7813}
7814.sheet-modal .toolbar + .sheet-modal-inner .page-content {
7815 --f7-page-toolbar-top-offset: 0px;
7816 --f7-page-toolbar-bottom-offset: 0px;
7817}
7818.sheet-modal-top:after {
7819 content: '';
7820 position: absolute;
7821 background-color: var(--f7-sheet-border-color);
7822 display: block;
7823 z-index: 15;
7824 top: auto;
7825 right: auto;
7826 bottom: 0;
7827 left: 0;
7828 height: 1px;
7829 width: 100%;
7830 transform-origin: 50% 100%;
7831 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7832}
7833.sheet-modal-top:after {
7834 z-index: 700;
7835 -webkit-backface-visibility: hidden;
7836 backface-visibility: hidden;
7837 transform-style: preserve-3d;
7838}
7839.sheet-modal-bottom,
7840.sheet-modal:not(.sheet-modal-top) {
7841 --f7-safe-area-top: 0px;
7842}
7843.sheet-modal-bottom:before,
7844.sheet-modal:not(.sheet-modal-top):before {
7845 content: '';
7846 position: absolute;
7847 background-color: var(--f7-sheet-border-color);
7848 display: block;
7849 z-index: 15;
7850 top: 0;
7851 right: auto;
7852 bottom: auto;
7853 left: 0;
7854 height: 1px;
7855 width: 100%;
7856 transform-origin: 50% 0%;
7857 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7858}
7859.sheet-modal-bottom:before,
7860.sheet-modal:not(.sheet-modal-top):before {
7861 z-index: 700;
7862 -webkit-backface-visibility: hidden;
7863 backface-visibility: hidden;
7864 transform-style: preserve-3d;
7865}
7866.sheet-modal-top {
7867 --f7-safe-area-bottom: 0px;
7868 bottom: auto;
7869 top: 0;
7870 transform: translate3d(0, -100%, 0);
7871}
7872.sheet-modal-top.modal-out {
7873 transform: translate3d(0, -100%, 0);
7874}
7875.sheet-modal-top .toolbar-bottom {
7876 position: absolute;
7877}
7878.sheet-modal-top .page-content {
7879 padding-top: var(--f7-safe-area-top);
7880}
7881html.with-modal-sheet-push .sheet-modal-push,
7882html.with-modal-sheet-push-closing .sheet-modal-push {
7883 --f7-sheet-border-color: transparent;
7884 border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
7885 overflow: hidden;
7886}
7887html.with-modal-sheet-push .sheet-modal-push .view,
7888html.with-modal-sheet-push-closing .sheet-modal-push .view,
7889html.with-modal-sheet-push .sheet-modal-push .page,
7890html.with-modal-sheet-push-closing .sheet-modal-push .page {
7891 --f7-safe-area-top: 0px;
7892}
7893html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,
7894html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top {
7895 border-radius: 0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius);
7896}
7897html.with-modal-sheet-push .framework7-root,
7898html.with-modal-sheet-push-closing .framework7-root {
7899 background: #000;
7900}
7901html.with-modal-sheet-push .framework7-root > .views,
7902html.with-modal-sheet-push-closing .framework7-root > .views,
7903html.with-modal-sheet-push .framework7-root > .view,
7904html.with-modal-sheet-push-closing .framework7-root > .view {
7905 transition-duration: var(--f7-sheet-transition-duration);
7906}
7907html.with-modal-sheet-push.theme-dark .framework7-root > .views:after,
7908html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
7909html.with-modal-sheet-push.theme-dark .framework7-root > .view:after,
7910html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
7911html.with-modal-sheet-push .theme-dark .framework7-root > .views:after,
7912html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
7913html.with-modal-sheet-push .theme-dark .framework7-root > .view:after,
7914html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
7915html.with-modal-sheet-push .theme-dark.framework7-root > .views:after,
7916html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
7917html.with-modal-sheet-push .theme-dark.framework7-root > .view:after,
7918html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
7919html.with-modal-sheet-push .framework7-root > .views.theme-dark:after,
7920html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
7921html.with-modal-sheet-push .framework7-root > .view.theme-dark:after,
7922html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
7923 content: '';
7924 position: absolute;
7925 pointer-events: none;
7926 left: 0;
7927 top: 0;
7928 width: 100%;
7929 height: 100%;
7930 background: rgba(255, 255, 255, 0.1);
7931 z-index: 13000;
7932 border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
7933 opacity: 1;
7934 animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
7935}
7936html.with-modal-sheet-push .framework7-root > .views,
7937html.with-modal-sheet-push .framework7-root > .view {
7938 border-radius: var(--f7-sheet-push-border-radius);
7939 transform: translate3d(0, 0, 0px) scale(var(--f7-sheet-push-scale, 1)) !important;
7940}
7941html.with-modal-sheet-push-closing.theme-dark .framework7-root > .views:after,
7942html.with-modal-sheet-push-closing.theme-dark .framework7-root > .view:after,
7943html.with-modal-sheet-push-closing .theme-dark .framework7-root > .views:after,
7944html.with-modal-sheet-push-closing .theme-dark .framework7-root > .view:after,
7945html.with-modal-sheet-push-closing .theme-dark.framework7-root > .views:after,
7946html.with-modal-sheet-push-closing .theme-dark.framework7-root > .view:after,
7947html.with-modal-sheet-push-closing .framework7-root > .views.theme-dark:after,
7948html.with-modal-sheet-push-closing .framework7-root > .view.theme-dark:after {
7949 animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
7950}
7951@keyframes sheet-dark-push-overlay-fade-in {
7952 from {
7953 opacity: 0;
7954 }
7955 to {
7956 opacity: 1;
7957 }
7958}
7959@keyframes sheet-dark-push-overlay-fade-out {
7960 from {
7961 opacity: 1;
7962 }
7963 to {
7964 opacity: 0;
7965 }
7966}
7967.md .sheet-modal .toolbar a.link:not(.tab-link) {
7968 flex-shrink: 0;
7969}
7970/* === Toast === */
7971:root {
7972 --f7-toast-text-color: #fff;
7973 --f7-toast-font-size: 14px;
7974 --f7-toast-icon-size: 48px;
7975 --f7-toast-max-width: 568px;
7976}
7977.ios {
7978 --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
7979 --f7-toast-bg-color-rgb: 0, 0, 0;
7980 --f7-toast-padding-horizontal: 16px;
7981 --f7-toast-padding-vertical: 12px;
7982 --f7-toast-border-radius: 8px;
7983 --f7-toast-button-min-width: 64px;
7984}
7985.md {
7986 --f7-toast-bg-color: #323232;
7987 --f7-toast-padding-horizontal: 24px;
7988 --f7-toast-padding-vertical: 14px;
7989 --f7-toast-border-radius: 4px;
7990 --f7-toast-button-min-width: 64px;
7991}
7992.aurora {
7993 --f7-toast-bg-color: rgba(0, 0, 0, 0.85);
7994 --f7-toast-padding-horizontal: 10px;
7995 --f7-toast-padding-vertical: 10px;
7996 --f7-toast-border-radius: 4px;
7997 --f7-toast-button-min-width: 32px;
7998}
7999.toast {
8000 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
8001 transition-property: transform, opacity;
8002 position: absolute;
8003 max-width: var(--f7-toast-max-width);
8004 z-index: 20000;
8005 color: var(--f7-toast-text-color);
8006 font-size: var(--f7-toast-font-size);
8007 box-sizing: border-box;
8008 background-color: var(--f7-toast-bg-color);
8009 opacity: 0;
8010}
8011@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
8012 .ios-translucent-modals .toast {
8013 background-color: rgba(var(--f7-toast-bg-color-rgb), 0.8);
8014 -webkit-backdrop-filter: saturate(180%) blur(20px);
8015 backdrop-filter: saturate(180%) blur(20px);
8016 }
8017}
8018.toast.modal-in {
8019 opacity: 1;
8020}
8021.toast .toast-content {
8022 display: flex;
8023 justify-content: space-between;
8024 align-items: center;
8025 box-sizing: border-box;
8026 padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
8027}
8028.toast .toast-text {
8029 line-height: 20px;
8030 flex-shrink: 1;
8031 min-width: 0;
8032}
8033.toast .toast-button {
8034 flex-shrink: 0;
8035 min-width: var(--f7-toast-button-min-width);
8036 margin-top: -8px;
8037 margin-bottom: -8px;
8038}
8039.toast.toast-with-icon .toast-content {
8040 display: block;
8041 text-align: center;
8042}
8043.toast.toast-with-icon .toast-text {
8044 text-align: center;
8045}
8046.toast.toast-with-icon .toast-icon .f7-icons,
8047.toast.toast-with-icon .toast-icon .material-icons {
8048 font-size: var(--f7-toast-icon-size);
8049}
8050.toast.toast-center {
8051 top: 50%;
8052}
8053.toast.toast-top {
8054 margin-top: var(--f7-safe-area-top);
8055}
8056.ios .toast {
8057 transition-duration: 300ms;
8058 width: 100%;
8059 left: 0;
8060}
8061.ios .toast.toast-top {
8062 top: 0;
8063 transform: translate3d(0, -100%, 0);
8064}
8065.ios .toast.toast-top.modal-in {
8066 transform: translate3d(0, 0%, 0);
8067}
8068.ios .toast.toast-center {
8069 width: auto;
8070 left: 50%;
8071 border-radius: var(--f7-toast-border-radius);
8072 transform: translate3d(-50%, -50%, 0);
8073}
8074.ios .toast.toast-center.modal-in {
8075 transform: translate3d(-50%, -50%, 0);
8076}
8077.ios .toast.toast-bottom {
8078 bottom: 0;
8079 transform: translate3d(0, 100%, 0);
8080}
8081.ios .toast.toast-bottom.modal-in {
8082 transform: translate3d(0, 0%, 0);
8083}
8084@media (max-width: 568px) {
8085 .ios .toast.toast-top {
8086 margin-top: 0;
8087 }
8088 .ios .toast.toast-top .toast-content {
8089 padding-top: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top));
8090 }
8091 .ios .toast.toast-bottom .toast-content {
8092 padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
8093 }
8094}
8095@media (min-width: 569px) {
8096 .ios .toast {
8097 left: 50%;
8098 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8099 border-radius: var(--f7-toast-border-radius);
8100 }
8101 .ios .toast.toast-top {
8102 top: 16px;
8103 }
8104 .ios .toast.toast-center {
8105 margin-left: 0;
8106 }
8107 .ios .toast.toast-bottom {
8108 margin-bottom: calc(16px + var(--f7-safe-area-bottom));
8109 }
8110}
8111@media (min-width: 1024px) {
8112 .ios .toast {
8113 margin-left: 0;
8114 width: auto;
8115 }
8116 .ios .toast.toast-horizontal-left {
8117 left: 16px;
8118 }
8119 .ios .toast.toast-horizontal-right {
8120 left: auto;
8121 right: 16px;
8122 }
8123 .ios .toast.toast-horizontal-center {
8124 left: 50%;
8125 width: var(--f7-toast-max-width);
8126 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8127 }
8128}
8129.ios .toast-button {
8130 margin-left: 16px;
8131 margin-right: calc(-1 * var(--f7-button-padding-horizontal));
8132}
8133.md .toast {
8134 transition-duration: 200ms;
8135 border-radius: var(--f7-toast-border-radius);
8136 width: calc(100% - 16px);
8137 transform: scale(0.9);
8138 left: 8px;
8139}
8140.md .toast.modal-in {
8141 transform: scale(1);
8142}
8143.md .toast.modal-out {
8144 transform: scale(1);
8145}
8146.md .toast.toast-top {
8147 top: 8px;
8148}
8149.md .toast.toast-center {
8150 left: 50%;
8151 width: auto;
8152 transform: scale(0.9) translate3d(-55%, -55%, 0);
8153}
8154.md .toast.toast-center.modal-in {
8155 transform: scale(1) translate3d(-50%, -50%, 0);
8156}
8157.md .toast.toast-center.modal-out {
8158 transform: scale(1) translate3d(-50%, -50%, 0);
8159}
8160.md .toast.toast-bottom {
8161 bottom: calc(8px + var(--f7-safe-area-bottom));
8162}
8163@media (min-width: 584px) {
8164 .md .toast {
8165 left: 50%;
8166 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8167 }
8168 .md .toast.toast-center {
8169 margin-left: 0;
8170 }
8171}
8172@media (min-width: 1024px) {
8173 .md .toast {
8174 margin-left: 0;
8175 width: auto;
8176 }
8177 .md .toast.toast-horizontal-left {
8178 left: 24px;
8179 }
8180 .md .toast.toast-horizontal-right {
8181 left: auto;
8182 right: 24px;
8183 }
8184 .md .toast.toast-horizontal-center {
8185 left: 50%;
8186 width: var(--f7-toast-max-width);
8187 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8188 }
8189 .md .toast.toast-bottom {
8190 bottom: calc(24px + var(--f7-safe-area-bottom));
8191 }
8192 .md .toast.toast-top {
8193 top: 24px;
8194 }
8195}
8196.md .toast-button {
8197 margin-left: 16px;
8198 margin-right: -8px;
8199}
8200.aurora .toast {
8201 transition-duration: 200ms;
8202 border-radius: var(--f7-toast-border-radius);
8203 left: 10px;
8204 width: calc(100% - 20px);
8205 transform: scale(0.9);
8206}
8207.aurora .toast.modal-in {
8208 transform: scale(1);
8209}
8210.aurora .toast.modal-out {
8211 transform: scale(1);
8212}
8213.aurora .toast.toast-top {
8214 top: 10px;
8215}
8216.aurora .toast.toast-center {
8217 left: 50%;
8218 width: auto;
8219 transform: scale(0.9) translate3d(-55%, -55%, 0);
8220}
8221.aurora .toast.toast-center.modal-in {
8222 transform: scale(1) translate3d(-50%, -50%, 0);
8223}
8224.aurora .toast.toast-center.modal-out {
8225 transform: scale(1) translate3d(-50%, -50%, 0);
8226}
8227.aurora .toast.toast-bottom {
8228 bottom: calc(10px + var(--f7-safe-area-bottom));
8229}
8230@media (min-width: 584px) {
8231 .aurora .toast {
8232 left: 50%;
8233 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8234 }
8235 .aurora .toast.toast-center {
8236 margin-left: 0;
8237 }
8238}
8239@media (min-width: 1024px) {
8240 .aurora .toast {
8241 margin-left: 0;
8242 width: auto;
8243 }
8244 .aurora .toast.toast-horizontal-left {
8245 left: 10px;
8246 }
8247 .aurora .toast.toast-horizontal-right {
8248 left: auto;
8249 right: 10px;
8250 }
8251 .aurora .toast.toast-horizontal-center {
8252 left: 50%;
8253 width: var(--f7-toast-max-width);
8254 margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
8255 }
8256}
8257.aurora .toast-button {
8258 margin-left: 10px;
8259}
8260/* === Preloader === */
8261:root {
8262 --f7-preloader-modal-padding: 8px;
8263 --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
8264}
8265.ios {
8266 --f7-preloader-color: #6c6c6c;
8267 --f7-preloader-size: 20px;
8268 --f7-preloader-modal-preloader-size: 34px;
8269 --f7-preloader-modal-border-radius: 5px;
8270}
8271.md {
8272 --f7-preloader-color: #757575;
8273 --f7-preloader-size: 32px;
8274 --f7-preloader-modal-preloader-size: 32px;
8275 --f7-preloader-modal-border-radius: 4px;
8276}
8277.aurora {
8278 --f7-preloader-color: #757575;
8279 --f7-preloader-size: 24px;
8280 --f7-preloader-modal-preloader-size: 24px;
8281 --f7-preloader-modal-border-radius: 4px;
8282}
8283.preloader {
8284 display: inline-block;
8285 vertical-align: middle;
8286 width: var(--f7-preloader-size);
8287 height: var(--f7-preloader-size);
8288 font-size: 0;
8289 position: relative;
8290}
8291.preloader .preloader-inner {
8292 width: 100%;
8293 height: 100%;
8294 display: block;
8295 position: relative;
8296}
8297/* === Preloader Modal === */
8298.preloader-backdrop {
8299 visibility: visible;
8300 opacity: 0;
8301 background: none;
8302 z-index: 14000;
8303}
8304.preloader-modal {
8305 position: absolute;
8306 left: 50%;
8307 top: 50%;
8308 padding: var(--f7-preloader-modal-padding);
8309 background: var(--f7-preloader-modal-bg-color);
8310 z-index: 14500;
8311 transform: translateX(-50%) translateY(-50%);
8312 border-radius: var(--f7-preloader-modal-border-radius);
8313}
8314.preloader-modal .preloader {
8315 --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
8316 display: block !important;
8317}
8318html.with-modal-preloader .page-content,
8319.with-modal-preloader .page-content,
8320.with-modal-preloader.page-content {
8321 overflow: hidden;
8322 -webkit-overflow-scrolling: auto;
8323}
8324.preloader[class*='color-'] {
8325 --f7-preloader-color: var(--f7-theme-color);
8326}
8327.ios .preloader-inner {
8328 animation: ios-preloader-spin 1s steps(8, end) infinite;
8329}
8330.ios .preloader-inner-line {
8331 display: block;
8332 width: 11.6%;
8333 height: 33.33%;
8334 border-radius: 100px;
8335 background: var(--f7-preloader-color);
8336 position: absolute;
8337 left: 50%;
8338 top: 50%;
8339 transform-origin: center 150%;
8340}
8341.ios .preloader-inner-line:nth-child(1) {
8342 transform: translate(-50%, -150%) rotate(0deg);
8343 opacity: 0.27;
8344}
8345.ios .preloader-inner-line:nth-child(2) {
8346 transform: translate(-50%, -150%) rotate(45deg);
8347 opacity: 0.35285714;
8348}
8349.ios .preloader-inner-line:nth-child(3) {
8350 transform: translate(-50%, -150%) rotate(90deg);
8351 opacity: 0.43571429;
8352}
8353.ios .preloader-inner-line:nth-child(4) {
8354 transform: translate(-50%, -150%) rotate(135deg);
8355 opacity: 0.51857143;
8356}
8357.ios .preloader-inner-line:nth-child(5) {
8358 transform: translate(-50%, -150%) rotate(180deg);
8359 opacity: 0.60142857;
8360}
8361.ios .preloader-inner-line:nth-child(6) {
8362 transform: translate(-50%, -150%) rotate(225deg);
8363 opacity: 0.68428571;
8364}
8365.ios .preloader-inner-line:nth-child(7) {
8366 transform: translate(-50%, -150%) rotate(270deg);
8367 opacity: 0.76714286;
8368}
8369.ios .preloader-inner-line:nth-child(8) {
8370 transform: translate(-50%, -150%) rotate(315deg);
8371 opacity: 0.85;
8372}
8373@keyframes ios-preloader-spin {
8374 100% {
8375 transform: rotate(360deg);
8376 }
8377}
8378.md .preloader-inner {
8379 animation: md-preloader-rotate 1.4s linear infinite;
8380}
8381.md .preloader-inner circle {
8382 fill: none;
8383 stroke: var(--f7-preloader-color);
8384 animation: md-preloader-circle-rotate 5.6s ease-in-out infinite;
8385 stroke-dasharray: 100px;
8386 stroke-dashoffset: 80px;
8387 stroke-width: 4;
8388 transform: rotate(-90deg);
8389 transform-origin: 18px 18px;
8390}
8391.md .preloader.color-multi circle {
8392 animation: md-preloader-circle-rotate 5.6s ease-in-out infinite, md-preloader-multicolor 5.6s ease-in-out infinite;
8393}
8394@keyframes md-preloader-multicolor {
8395 0%,
8396 100% {
8397 stroke: #4285f4;
8398 }
8399 75% {
8400 stroke: #1b9a59;
8401 }
8402 50% {
8403 stroke: #f7c223;
8404 }
8405 25% {
8406 stroke: #de3e35;
8407 }
8408}
8409@keyframes md-preloader-rotate {
8410 0% {
8411 transform: rotate(0deg);
8412 }
8413 100% {
8414 transform: rotate(360deg);
8415 }
8416}
8417@keyframes md-preloader-circle-rotate {
8418 0% {
8419 transform: rotate(-90deg);
8420 stroke-dashoffset: 100px;
8421 }
8422 12.5% {
8423 transform: rotate(-90deg);
8424 stroke-dashoffset: 25px;
8425 }
8426 25% {
8427 stroke-dashoffset: 100px;
8428 transform: rotate(180deg);
8429 }
8430 25.1% {
8431 transform: rotate(-180deg);
8432 stroke-dashoffset: 100px;
8433 }
8434 37.5% {
8435 transform: rotate(-180deg);
8436 stroke-dashoffset: 25px;
8437 }
8438 50% {
8439 stroke-dashoffset: 100px;
8440 transform: rotate(90deg);
8441 }
8442 50.1% {
8443 transform: rotate(90deg);
8444 stroke-dashoffset: 100px;
8445 }
8446 62.5% {
8447 transform: rotate(90deg);
8448 stroke-dashoffset: 25px;
8449 }
8450 75% {
8451 stroke-dashoffset: 100px;
8452 transform: rotate(360deg);
8453 }
8454 75.1% {
8455 transform: rotate(0deg);
8456 stroke-dashoffset: 100px;
8457 }
8458 87.5% {
8459 transform: rotate(0deg);
8460 stroke-dashoffset: 25px;
8461 }
8462 100% {
8463 stroke-dashoffset: 100px;
8464 transform: rotate(270deg);
8465 }
8466}
8467.aurora .preloader-inner {
8468 position: absolute;
8469 left: 0;
8470 top: 0;
8471}
8472.aurora .preloader-inner-circle {
8473 width: 100%;
8474 height: 100%;
8475 position: absolute;
8476 left: 0;
8477 top: 0;
8478 border-radius: 50%;
8479 border: calc(var(--f7-preloader-size) / 8) solid var(--f7-preloader-color);
8480 border-top-color: transparent;
8481 box-sizing: border-box;
8482 animation: aurora-preloader-rotate 0.75s linear infinite;
8483}
8484.aurora .preloader.color-multi .preloader-inner-circle {
8485 animation: aurora-preloader-rotate 0.75s linear infinite, aurora-preloader-multicolor 3s linear infinite;
8486}
8487@keyframes aurora-preloader-rotate {
8488 0% {
8489 transform: rotate(0deg);
8490 }
8491 100% {
8492 transform: rotate(360deg);
8493 }
8494}
8495@keyframes aurora-preloader-multicolor {
8496 0%,
8497 100% {
8498 border-color: #2196f3;
8499 border-top-color: transparent;
8500 }
8501 25% {
8502 border-color: #ff3b30;
8503 border-top-color: transparent;
8504 }
8505 50% {
8506 border-color: #4cd964;
8507 border-top-color: transparent;
8508 }
8509 75% {
8510 border-color: #ff9500;
8511 border-top-color: transparent;
8512 }
8513}
8514/* === Progressbar === */
8515:root {
8516 /*
8517 --f7-progressbar-progress-color: var(--f7-theme-color);
8518 */
8519}
8520.ios {
8521 --f7-progressbar-height: 2px;
8522 --f7-progressbar-border-radius: 2px;
8523 --f7-progressbar-bg-color: rgba(0, 0, 0, 0.3);
8524}
8525.ios .theme-dark,
8526.ios.theme-dark {
8527 --f7-progressbar-bg-color: rgba(255, 255, 255, 0.3);
8528}
8529.md {
8530 /*
8531 --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
8532 */
8533 --f7-progressbar-height: 4px;
8534 --f7-progressbar-border-radius: 0px;
8535}
8536.aurora {
8537 --f7-progressbar-height: 6px;
8538 --f7-progressbar-border-radius: 3px;
8539 --f7-progressbar-bg-color: #dbdbdb;
8540}
8541.aurora .theme-dark,
8542.aurora.theme-dark {
8543 --f7-progressbar-bg-color: #444;
8544}
8545.progressbar,
8546.progressbar-infinite {
8547 width: 100%;
8548 overflow: hidden;
8549 position: relative;
8550 display: block;
8551 transform-style: preserve-3d;
8552 background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
8553 transform-origin: center top;
8554 height: var(--f7-progressbar-height);
8555 border-radius: var(--f7-progressbar-border-radius);
8556}
8557.progressbar {
8558 vertical-align: middle;
8559}
8560.progressbar span {
8561 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
8562 width: 100%;
8563 height: 100%;
8564 position: absolute;
8565 left: 0;
8566 top: 0;
8567 transform: translate3d(-100%, 0, 0);
8568 transition-duration: 150ms;
8569}
8570.progressbar-infinite {
8571 z-index: 15000;
8572}
8573.progressbar-infinite:before,
8574.progressbar-infinite:after {
8575 content: '';
8576 position: absolute;
8577 left: 0;
8578 top: 0;
8579 width: 100%;
8580 height: 100%;
8581 transform-origin: left center;
8582 transform: translate3d(0, 0, 0);
8583 display: block;
8584 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
8585}
8586.progressbar-infinite.color-multi {
8587 background: none !important;
8588}
8589.progressbar-in {
8590 animation: progressbar-in 150ms forwards;
8591}
8592.progressbar-out {
8593 animation: progressbar-out 150ms forwards;
8594}
8595body > .progressbar,
8596.view > .progressbar,
8597.views > .progressbar,
8598.page > .progressbar,
8599.panel > .progressbar,
8600.popup > .progressbar,
8601.framework7-root > .progressbar,
8602body > .progressbar-infinite,
8603.view > .progressbar-infinite,
8604.views > .progressbar-infinite,
8605.page > .progressbar-infinite,
8606.panel > .progressbar-infinite,
8607.popup > .progressbar-infinite,
8608.framework7-root > .progressbar-infinite {
8609 position: absolute;
8610 left: 0;
8611 top: 0;
8612 z-index: 15000;
8613 border-radius: 0 !important;
8614 transform-origin: center top !important;
8615}
8616@keyframes progressbar-in {
8617 from {
8618 opacity: 0;
8619 transform: scaleY(0);
8620 }
8621 to {
8622 opacity: 1;
8623 transform: scaleY(1);
8624 }
8625}
8626@keyframes progressbar-out {
8627 from {
8628 opacity: 1;
8629 transform: scaleY(1);
8630 }
8631 to {
8632 opacity: 0;
8633 transform: scaleY(0);
8634 }
8635}
8636.ios .progressbar-infinite:before {
8637 animation: ios-progressbar-infinite 1s linear infinite;
8638}
8639.ios .progressbar-infinite:after {
8640 display: none;
8641}
8642.ios .progressbar-infinite.color-multi:before {
8643 width: 400%;
8644 background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
8645 background-size: 25% 100%;
8646 background-repeat: repeat-x;
8647 animation: ios-progressbar-infinite-multicolor 3s linear infinite;
8648}
8649@keyframes ios-progressbar-infinite {
8650 0% {
8651 transform: translate3d(-100%, 0, 0);
8652 }
8653 100% {
8654 transform: translate3d(100%, 0, 0);
8655 }
8656}
8657@keyframes ios-progressbar-infinite-multicolor {
8658 0% {
8659 transform: translate3d(0%, 0, 0);
8660 }
8661 100% {
8662 transform: translate3d(-50%, 0, 0);
8663 }
8664}
8665.md .progressbar-infinite:before {
8666 animation: md-progressbar-infinite-1 2s linear infinite;
8667}
8668.md .progressbar-infinite:after {
8669 animation: md-progressbar-infinite-2 2s linear infinite;
8670}
8671.md .progressbar-infinite.color-multi:before {
8672 background: none;
8673 animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
8674}
8675.md .progressbar-infinite.color-multi:after {
8676 background: none;
8677 animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
8678 transform-origin: center center;
8679}
8680@keyframes md-progressbar-infinite-1 {
8681 0% {
8682 transform: translateX(-10%) scaleX(0.1);
8683 }
8684 25% {
8685 transform: translateX(30%) scaleX(0.6);
8686 }
8687 50% {
8688 transform: translateX(100%) scaleX(1);
8689 }
8690 100% {
8691 transform: translateX(100%) scaleX(1);
8692 }
8693}
8694@keyframes md-progressbar-infinite-2 {
8695 0% {
8696 transform: translateX(-100%) scaleX(1);
8697 }
8698 40% {
8699 transform: translateX(-100%) scaleX(1);
8700 }
8701 75% {
8702 transform: translateX(60%) scaleX(0.35);
8703 }
8704 90% {
8705 transform: translateX(100%) scaleX(0.1);
8706 }
8707 100% {
8708 transform: translateX(100%) scaleX(0.1);
8709 }
8710}
8711@keyframes md-progressbar-infinite-multicolor-bg {
8712 0% {
8713 background-color: #4caf50;
8714 }
8715 25% {
8716 background-color: #f44336;
8717 }
8718 50% {
8719 background-color: #2196f3;
8720 }
8721 75% {
8722 background-color: #ffeb3b;
8723 }
8724}
8725@keyframes md-progressbar-infinite-multicolor-fill {
8726 0% {
8727 transform: scaleX(0);
8728 background-color: #f44336;
8729 }
8730 24.9% {
8731 transform: scaleX(1);
8732 background-color: #f44336;
8733 }
8734 25% {
8735 transform: scaleX(0);
8736 background-color: #2196f3;
8737 }
8738 49.9% {
8739 transform: scaleX(1);
8740 background-color: #2196f3;
8741 }
8742 50% {
8743 transform: scaleX(0);
8744 background-color: #ffeb3b;
8745 }
8746 74.9% {
8747 transform: scaleX(1);
8748 background-color: #ffeb3b;
8749 }
8750 75% {
8751 transform: scaleX(0);
8752 background-color: #4caf50;
8753 }
8754 100% {
8755 transform: scaleX(1);
8756 background-color: #4caf50;
8757 }
8758}
8759.aurora .progressbar,
8760.aurora .progressbar-infinite,
8761.aurora .progressbar span,
8762.aurora .progressbar-infinite:before {
8763 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
8764}
8765.aurora .progressbar-infinite:before {
8766 animation: aurora-progressbar-infinite 1s linear infinite;
8767}
8768.aurora .progressbar-infinite:after {
8769 display: none;
8770}
8771.aurora .progressbar-infinite.color-multi:before {
8772 width: 400%;
8773 background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
8774 background-size: 25% 100%;
8775 background-repeat: repeat-x;
8776 animation: aurora-progressbar-infinite-multicolor 3s linear infinite;
8777}
8778@keyframes aurora-progressbar-infinite {
8779 0% {
8780 transform: translate3d(-100%, 0, 0);
8781 }
8782 100% {
8783 transform: translate3d(100%, 0, 0);
8784 }
8785}
8786@keyframes aurora-progressbar-infinite-multicolor {
8787 0% {
8788 transform: translate3d(0%, 0, 0);
8789 }
8790 100% {
8791 transform: translate3d(-50%, 0, 0);
8792 }
8793}
8794/* === Sortable === */
8795:root {
8796 --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
8797 --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
8798}
8799:root .theme-dark,
8800:root.theme-dark {
8801 --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
8802 --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
8803}
8804.ios {
8805 --f7-sortable-handler-width: 36px;
8806 --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
8807}
8808.md {
8809 --f7-sortable-handler-width: 42px;
8810 --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
8811}
8812.aurora {
8813 --f7-sortable-handler-width: 32px;
8814 --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
8815}
8816.sortable .sortable-handler {
8817 width: var(--f7-sortable-handler-width);
8818 height: 100%;
8819 position: absolute;
8820 top: 0;
8821 z-index: 10;
8822 opacity: 0;
8823 pointer-events: none;
8824 cursor: move;
8825 transition-duration: 300ms;
8826 display: flex;
8827 align-items: center;
8828 justify-content: center;
8829 overflow: hidden;
8830 right: var(--f7-safe-area-right);
8831}
8832.sortable .sortable-handler:after {
8833 font-family: 'framework7-core-icons';
8834 font-weight: normal;
8835 font-style: normal;
8836 line-height: 1;
8837 letter-spacing: normal;
8838 text-transform: none;
8839 white-space: nowrap;
8840 word-wrap: normal;
8841 direction: ltr;
8842 -webkit-font-smoothing: antialiased;
8843 text-rendering: optimizeLegibility;
8844 -moz-osx-font-smoothing: grayscale;
8845 font-feature-settings: 'liga';
8846 text-align: center;
8847 display: block;
8848 width: 100%;
8849 height: 100%;
8850 font-size: 20px;
8851 transition-duration: 300ms;
8852 transform: translateX(10px);
8853 color: var(--f7-sortable-handler-color);
8854 overflow: hidden;
8855 height: 20px;
8856 width: 18px;
8857}
8858.sortable li.sorting {
8859 z-index: 50;
8860 background: var(--f7-sortable-sorting-item-bg-color);
8861 transition-duration: 0ms;
8862 box-shadow: var(--f7-sortable-sorting-item-box-shadow);
8863}
8864.sortable li.sorting .item-inner:after {
8865 display: none !important;
8866}
8867.sortable-opposite .sortable-handler {
8868 left: var(--f7-safe-area-right);
8869 right: auto;
8870}
8871.sortable-opposite .sortable-handler:after {
8872 transform: translateX(-10px);
8873}
8874.sortable:not(.sortable-opposite) .item-inner,
8875.sortable-opposite .item-content,
8876.sortable.simple-list li,
8877.sortable-opposite.links-list li a {
8878 transition-duration: 300ms;
8879 transition-property: all;
8880}
8881.sortable-sorting li {
8882 transition-duration: 300ms;
8883}
8884.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler {
8885 pointer-events: auto;
8886 opacity: 1;
8887}
8888.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .sortable-handler:after {
8889 transform: translateX(0px);
8890}
8891.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner:before,
8892.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row:before,
8893.sortable-enabled:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting) > a:before {
8894 display: none;
8895}
8896.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,
8897.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
8898.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link.no-chevron .item-inner,
8899.sortable-enabled.no-chevron:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
8900.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,
8901.no-chevron .sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
8902.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),
8903.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a {
8904 padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
8905}
8906.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content,
8907.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),
8908.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a {
8909 padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
8910}
8911.ios .sortable-handler:after {
8912 content: 'sort_ios';
8913}
8914.md .sortable-handler:after {
8915 content: 'sort_md';
8916}
8917.aurora .sortable-handler:after {
8918 content: 'sort_md';
8919 font-size: 16px;
8920 height: 16px;
8921}
8922/* === Swipeout === */
8923:root {
8924 --f7-swipeout-button-text-color: #fff;
8925 --f7-swipeout-delete-button-bg-color: #ff3b30;
8926 --f7-swipeout-button-font-size: inherit;
8927 --f7-swipeout-button-font-weight: inherit;
8928 --f7-swipeout-button-padding-vertical: 0px;
8929 --f7-swipeout-button-bg-color: rgba(0, 0, 0, 0.22);
8930}
8931:root .theme-dark,
8932:root.theme-dark {
8933 --f7-swipeout-button-bg-color: rgba(255, 255, 255, 0.55);
8934}
8935.ios {
8936 --f7-swipeout-button-padding-horizontal: 30px;
8937}
8938.md {
8939 --f7-swipeout-button-padding-horizontal: 24px;
8940}
8941.aurora {
8942 --f7-swipeout-button-padding-horizontal: 12px;
8943 --f7-swipeout-button-font-weight: 500;
8944}
8945.swipeout {
8946 overflow: hidden;
8947 transform-style: preserve-3d;
8948}
8949.swipeout-deleting {
8950 transition-duration: 300ms;
8951}
8952.swipeout-deleting .swipeout-content {
8953 transform: translateX(-100%);
8954}
8955.swipeout-transitioning .swipeout-content,
8956.swipeout-transitioning .swipeout-actions-right a,
8957.swipeout-transitioning .swipeout-actions-left a,
8958.swipeout-transitioning .swipeout-overswipe {
8959 transition-duration: 300ms;
8960 transition-property: transform, left;
8961}
8962.swipeout-content {
8963 position: relative;
8964 z-index: 10;
8965}
8966.swipeout-overswipe {
8967 transition-duration: 200ms;
8968 transition-property: left;
8969}
8970.swipeout-actions-left,
8971.swipeout-actions-right {
8972 position: absolute;
8973 top: 0;
8974 height: 100%;
8975 display: flex;
8976 direction: ltr;
8977}
8978.swipeout-actions-left > a,
8979.swipeout-actions-right > a,
8980.swipeout-actions-left > button,
8981.swipeout-actions-right > button,
8982.swipeout-actions-left > span,
8983.swipeout-actions-right > span,
8984.swipeout-actions-left > div,
8985.swipeout-actions-right > div {
8986 color: var(--f7-swipeout-button-text-color);
8987 background: var(--f7-swipeout-button-bg-color);
8988 padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
8989 display: flex;
8990 align-items: center;
8991 position: relative;
8992 left: 0;
8993 font-size: var(--f7-swipeout-button-font-size);
8994 font-weight: var(--f7-swipeout-button-font-weight);
8995}
8996.swipeout-actions-left > a:after,
8997.swipeout-actions-right > a:after,
8998.swipeout-actions-left > button:after,
8999.swipeout-actions-right > button:after,
9000.swipeout-actions-left > span:after,
9001.swipeout-actions-right > span:after,
9002.swipeout-actions-left > div:after,
9003.swipeout-actions-right > div:after {
9004 content: '';
9005 position: absolute;
9006 top: 0;
9007 width: 600%;
9008 height: 100%;
9009 background: inherit;
9010 z-index: -1;
9011 transform: translate3d(0, 0, 0);
9012 pointer-events: none;
9013}
9014.swipeout-actions-left .swipeout-delete,
9015.swipeout-actions-right .swipeout-delete {
9016 background: var(--f7-swipeout-delete-button-bg-color);
9017}
9018.swipeout-actions-right {
9019 right: 0%;
9020 transform: translateX(100%);
9021}
9022.swipeout-actions-right > a:after,
9023.swipeout-actions-right > button:after,
9024.swipeout-actions-right > span:after,
9025.swipeout-actions-right > div:after {
9026 left: 100%;
9027 margin-left: -1px;
9028}
9029.swipeout-actions-right > a:last-child,
9030.swipeout-actions-right > button:last-child,
9031.swipeout-actions-right > span:last-child,
9032.swipeout-actions-right > div:last-child {
9033 padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
9034}
9035.swipeout-actions-left {
9036 left: 0%;
9037 transform: translateX(-100%);
9038}
9039.swipeout-actions-left > a:after,
9040.swipeout-actions-left > button:after,
9041.swipeout-actions-left > span:after,
9042.swipeout-actions-left > div:after {
9043 right: 100%;
9044 margin-right: -1px;
9045}
9046.swipeout-actions-left > a:first-child,
9047.swipeout-actions-left > button:first-child,
9048.swipeout-actions-left > span:first-child,
9049.swipeout-actions-left > div:first-child {
9050 padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
9051}
9052.swipeout-actions-left [class*='color-'],
9053.swipeout-actions-right [class*='color-'] {
9054 --f7-swipeout-button-bg-color: var(--f7-theme-color);
9055}
9056/* === Accordion === */
9057:root {
9058 --f7-accordion-chevron-icon-down: 'chevron_down';
9059 --f7-accordion-chevron-icon-up: 'chevron_up';
9060}
9061.accordion-item-toggle {
9062 cursor: pointer;
9063}
9064.list.accordion-list .accordion-item-toggle {
9065 transition-duration: 300ms;
9066 position: relative;
9067 overflow: hidden;
9068}
9069.list.accordion-list .accordion-item-toggle.active-state {
9070 transition-duration: 300ms;
9071 background-color: var(--f7-list-link-pressed-bg-color);
9072}
9073.list.accordion-list .accordion-item-toggle.active-state > .item-inner:after {
9074 background-color: transparent;
9075}
9076.list.accordion-list .accordion-item-toggle .item-inner {
9077 transition-duration: 300ms;
9078 transition-property: background-color;
9079}
9080.list.accordion-list .accordion-item-toggle .item-inner:after {
9081 transition-duration: 300ms;
9082}
9083.list.accordion-list .accordion-item-toggle .ripple-wave {
9084 z-index: 0;
9085}
9086.accordion-item .item-link .item-inner:after {
9087 transition-duration: 300ms;
9088}
9089.accordion-item .list,
9090.accordion-item .block {
9091 margin-top: 0;
9092 margin-bottom: 0;
9093}
9094.accordion-item .block > h1:first-child,
9095.accordion-item .block > h2:first-child,
9096.accordion-item .block > h3:first-child,
9097.accordion-item .block > h4:first-child,
9098.accordion-item .block > p:first-child {
9099 margin-top: 10px;
9100}
9101.accordion-item .block > h1:last-child,
9102.accordion-item .block > h2:last-child,
9103.accordion-item .block > h3:last-child,
9104.accordion-item .block > h4:last-child,
9105.accordion-item .block > p:last-child {
9106 margin-bottom: 10px;
9107}
9108.accordion-item-opened .accordion-item-toggle .item-inner:after,
9109.accordion-item-opened > .item-link .item-inner:after {
9110 background-color: transparent;
9111}
9112.list li.accordion-item ul {
9113 padding-left: 0;
9114}
9115.accordion-item-content {
9116 position: relative;
9117 overflow: hidden;
9118 height: 0;
9119 font-size: 14px;
9120 transition-duration: 300ms;
9121}
9122.accordion-item-opened > .accordion-item-content {
9123 height: auto;
9124}
9125html.device-android-4 .accordion-item-content {
9126 transform: none;
9127}
9128.list .accordion-item-toggle .item-inner:before {
9129 font-family: 'framework7-core-icons';
9130 font-weight: normal;
9131 font-style: normal;
9132 line-height: 1;
9133 letter-spacing: normal;
9134 text-transform: none;
9135 white-space: nowrap;
9136 word-wrap: normal;
9137 direction: ltr;
9138 -webkit-font-smoothing: antialiased;
9139 text-rendering: optimizeLegibility;
9140 -moz-osx-font-smoothing: grayscale;
9141 font-feature-settings: 'liga';
9142 text-align: center;
9143 display: block;
9144 width: 100%;
9145 height: 100%;
9146 font-size: 20px;
9147 position: absolute;
9148 top: 50%;
9149 font-size: var(--f7-list-chevron-icon-font-size);
9150 color: var(--f7-list-chevron-icon-color);
9151 pointer-events: none;
9152 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
9153}
9154.list:not(.accordion-opposite) .accordion-item-toggle .item-inner {
9155 padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
9156}
9157.accordion-opposite .accordion-item-toggle.item-link .item-inner,
9158.accordion-opposite .accordion-item-toggle .item-inner,
9159.accordion-opposite .accordion-item > .item-link > .item-inner,
9160.accordion-opposite .accordion-item > .item-link > .item-content > .item-inner {
9161 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
9162}
9163.accordion-opposite .accordion-item > .item-link > .item-title-row {
9164 padding-right: 0;
9165}
9166.accordion-opposite .accordion-item-toggle.item-link .item-inner:before,
9167.accordion-opposite .accordion-item-toggle .item-inner:before,
9168.accordion-opposite .accordion-item > .item-link > .item-inner:before,
9169.accordion-opposite .accordion-item > .item-link > .item-content > .item-inner:before,
9170.accordion-opposite .accordion-item > .item-link .item-title-row:before {
9171 display: none;
9172}
9173.accordion-opposite .accordion-item-toggle > .item-content,
9174.accordion-opposite .accordion-item-toggle.item-content,
9175.accordion-opposite .accordion-item > .item-content,
9176.accordion-opposite .accordion-item > .item-link > .item-content,
9177.accordion-opposite.links-list .accordion-item > a {
9178 position: relative;
9179 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
9180}
9181.accordion-opposite .accordion-item-toggle > .item-content:before,
9182.accordion-opposite .accordion-item-toggle.item-content:before,
9183.accordion-opposite .accordion-item > .item-content:before,
9184.accordion-opposite .accordion-item > .item-link > .item-content:before,
9185.accordion-opposite.links-list .accordion-item > a:before {
9186 font-family: 'framework7-core-icons';
9187 font-weight: normal;
9188 font-style: normal;
9189 line-height: 1;
9190 letter-spacing: normal;
9191 text-transform: none;
9192 white-space: nowrap;
9193 word-wrap: normal;
9194 direction: ltr;
9195 -webkit-font-smoothing: antialiased;
9196 text-rendering: optimizeLegibility;
9197 -moz-osx-font-smoothing: grayscale;
9198 font-feature-settings: 'liga';
9199 text-align: center;
9200 display: block;
9201 width: 100%;
9202 height: 100%;
9203 font-size: 20px;
9204 position: absolute;
9205 top: 50%;
9206 font-size: var(--f7-list-chevron-icon-font-size);
9207 color: var(--f7-list-chevron-icon-color);
9208 pointer-events: none;
9209 content: var(--f7-accordion-chevron-icon-down);
9210 width: 14px;
9211 height: 8px;
9212 margin-top: -4px;
9213 line-height: 8px;
9214 transform: translateX(-50%);
9215 left: calc((var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal)) / 2 + var(--f7-safe-area-left));
9216}
9217.list .accordion-item-toggle.active-state {
9218 background-color: var(--f7-list-link-pressed-bg-color);
9219}
9220.list .accordion-item-toggle .item-inner:before,
9221.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
9222.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
9223.media-list .accordion-item .accordion-item-toggle .item-title-row:before,
9224.media-list .accordion-item > .item-link .item-title-row:before,
9225.accordion-item.media-item .accordion-item-toggle .item-title-row:before,
9226.accordion-item.media-item > .item-link .item-title-row:before,
9227.links-list .accordion-item > a:before {
9228 content: var(--f7-accordion-chevron-icon-down);
9229 width: 14px;
9230 height: 8px;
9231 margin-top: -4px;
9232 line-height: 8px;
9233}
9234.list .accordion-item-toggle.accordion-item-opened .item-inner:before,
9235.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
9236.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
9237.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
9238.media-list .accordion-item-opened > .item-link .item-title-row:before,
9239.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
9240.accordion-item-opened.media-item > .item-link .item-title-row:before,
9241.links-list .accordion-item-opened > a:before,
9242.accordion-opposite .accordion-item-opened .accordion-item-toggle > .item-content:before,
9243.accordion-opposite .accordion-item-opened .accordion-item-toggle.item-content:before,
9244.accordion-opposite .accordion-item-opened > .item-content:before,
9245.accordion-opposite .accordion-item-opened > .item-link > .item-content:before,
9246.accordion-opposite .links-list .accordion-item-opened > a:before {
9247 content: var(--f7-accordion-chevron-icon-up);
9248 width: 14px;
9249 height: 8px;
9250 margin-top: -4px;
9251 line-height: 8px;
9252}
9253/* === Contacts === */
9254:root .theme-dark,
9255:root.theme-dark {
9256 --f7-contacts-list-title-text-color: #fff;
9257}
9258.ios {
9259 --f7-contacts-list-title-font-size: inherit;
9260 --f7-contacts-list-title-font-weight: 600;
9261 --f7-contacts-list-title-height: 22px;
9262 --f7-contacts-list-title-text-color: #000;
9263 --f7-contacts-list-title-bg-color: #f7f7f7;
9264}
9265.ios .theme-dark,
9266.ios.theme-dark {
9267 --f7-contacts-list-title-bg-color: #323234;
9268}
9269.md {
9270 --f7-contacts-list-title-font-size: 20px;
9271 --f7-contacts-list-title-font-weight: 500;
9272 /*
9273 --f7-contacts-list-title-text-color: var(--f7-theme-color);
9274 */
9275 --f7-contacts-list-title-height: 48px;
9276 --f7-contacts-list-title-bg-color: transparent;
9277}
9278.aurora {
9279 --f7-contacts-list-title-font-weight: 600;
9280 --f7-contacts-list-title-text-color: #000;
9281 /*
9282 --f7-contacts-list-title-bg-color: var(--f7-list-group-title-bg-color);
9283 --f7-contacts-list-title-font-size: var(--f7-list-group-title-font-size);
9284 --f7-contacts-list-title-line-height: var(--f7-list-group-title-height);
9285 --f7-contacts-list-title-height: var(--f7-list-group-title-height);
9286 */
9287}
9288.contacts-list {
9289 --f7-list-margin-vertical: 0px;
9290}
9291.contacts-list .list-group-title,
9292.contacts-list li.list-group-title {
9293 background-color: var(--f7-contacts-list-title-bg-color, var(--f7-list-group-title-bg-color));
9294 font-weight: var(--f7-contacts-list-title-font-weight, var(--f7-list-group-title-font-weight));
9295 font-size: var(--f7-contacts-list-title-font-size, var(--f7-list-group-title-font-size));
9296 color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
9297 line-height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
9298 height: var(--f7-contacts-list-title-height, var(--f7-list-group-title-height));
9299}
9300.contacts-list .list-group:first-child ul:before {
9301 display: none !important;
9302}
9303.contacts-list .list-group:last-child ul:after {
9304 display: none !important;
9305}
9306.md .contacts-list .list-group-title {
9307 pointer-events: none;
9308 overflow: visible;
9309 width: 56px;
9310}
9311.md .contacts-list .list-group-title + li {
9312 margin-top: calc(var(--f7-contacts-list-title-height) * -1);
9313}
9314.md .contacts-list li:not(.list-group-title) {
9315 padding-left: 56px;
9316}
9317/* === Virtual List === */
9318/* === Indexed List === */
9319:root {
9320 --f7-list-index-width: 16px;
9321 --f7-list-index-font-size: 11px;
9322 --f7-list-index-font-weight: 600;
9323 /* --f7-list-index-text-color: var(--f7-theme-color); */
9324 --f7-list-index-item-height: 14px;
9325 --f7-list-index-label-text-color: #fff;
9326 /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
9327 --f7-list-index-label-font-weight: 500;
9328}
9329.ios {
9330 --f7-list-index-label-size: 44px;
9331 --f7-list-index-label-font-size: 17px;
9332 --f7-list-index-skip-dot-size: 6px;
9333}
9334.md {
9335 --f7-list-index-label-size: 56px;
9336 --f7-list-index-label-font-size: 20px;
9337 --f7-list-index-skip-dot-size: 4px;
9338}
9339.aurora {
9340 --f7-list-index-font-size: 12px;
9341 --f7-list-index-label-size: 32px;
9342 --f7-list-index-label-font-size: 12px;
9343 --f7-list-index-label-font-weight: 600;
9344 --f7-list-index-skip-dot-size: 4px;
9345}
9346.list-index {
9347 position: absolute;
9348 top: 0;
9349 bottom: 0;
9350 text-align: center;
9351 z-index: 10;
9352 width: var(--f7-list-index-width);
9353 cursor: pointer;
9354 -webkit-user-select: none;
9355 -moz-user-select: none;
9356 user-select: none;
9357 right: var(--f7-safe-area-right);
9358}
9359.list-index:before {
9360 content: '';
9361 position: absolute;
9362 width: 20px;
9363 top: 0;
9364 right: 100%;
9365 height: 100%;
9366}
9367.list-index ul {
9368 color: var(--f7-list-index-text-color, var(--f7-theme-color));
9369 font-size: var(--f7-list-index-font-size);
9370 font-weight: var(--f7-list-index-font-weight);
9371 list-style: none;
9372 margin: 0;
9373 padding: 0;
9374 display: flex;
9375 flex-direction: column;
9376 justify-content: center;
9377 align-items: center;
9378 flex-shrink: 0;
9379 height: 100%;
9380 width: 100%;
9381 position: relative;
9382}
9383.list-index li {
9384 margin: 0;
9385 padding: 0;
9386 list-style: none;
9387 position: relative;
9388 height: var(--f7-list-index-item-height);
9389 line-height: var(--f7-list-index-item-height);
9390 flex-shrink: 0;
9391 display: block;
9392 width: 100%;
9393}
9394.list-index .list-index-skip-placeholder:after {
9395 content: '';
9396 position: absolute;
9397 left: 50%;
9398 top: 50%;
9399 border-radius: 50%;
9400 width: var(--f7-list-index-skip-dot-size);
9401 height: var(--f7-list-index-skip-dot-size);
9402 margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
9403 margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
9404 background: var(--f7-list-index-text-color, var(--f7-theme-color));
9405}
9406.list-index .list-index-label {
9407 position: absolute;
9408 bottom: 0;
9409 right: 100%;
9410 text-align: center;
9411 background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
9412 color: var(--f7-list-index-label-text-color);
9413 width: var(--f7-list-index-label-size);
9414 height: var(--f7-list-index-label-size);
9415 line-height: var(--f7-list-index-label-size);
9416 font-size: var(--f7-list-index-label-font-size);
9417 font-weight: var(--f7-list-index-label-font-weight);
9418}
9419.navbar ~ .page > .list-index,
9420.navbars ~ .page > .list-index,
9421.navbar ~ .list-index {
9422 top: var(--f7-navbar-height);
9423}
9424.navbar ~ .toolbar-top ~ .list-index,
9425.navbars ~ .toolbar-top ~ .list-index,
9426.ios .navbar ~ .toolbar-top-ios ~ .list-index,
9427.ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md ~ .list-index {
9428 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
9429}
9430.navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
9431.navbars ~ .toolbar-top.tabbar-labels ~ .list-index,
9432.ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
9433.ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
9434 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
9435}
9436.navbar ~ .subnavbar ~ .list-index,
9437.navbars ~ .subnavbar ~ .list-index,
9438.page-with-subnavbar .navbar ~ .list-index {
9439 top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
9440}
9441.toolbar-bottom ~ .page > .list-index,
9442.ios .toolbar-bottom-ios ~ .page > .list-index,
9443.md .toolbar-bottom-md ~ .page > .list-index,
9444.toolbar-bottom ~ * .page > .list-index,
9445.ios .toolbar-bottom-ios ~ * .page > .list-index,
9446.md .toolbar-bottom-md ~ * .page > .list-index,
9447.toolbar-bottom ~ .list-index,
9448.ios .toolbar-bottom-ios ~ .list-index,
9449.md .toolbar-bottom-md ~ .list-index {
9450 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
9451}
9452.toolbar-bottom.tabbar-labels ~ .page > .list-index,
9453.ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
9454.md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
9455.toolbar-bottom.tabbar-labels ~ * .page > .list-index,
9456.ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
9457.md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
9458.toolbar-bottom.tabbar-labels ~ .list-index,
9459.ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
9460.md .toolbar-bottom-md.tabbar-labels ~ .list-index {
9461 bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
9462}
9463.ios .list-index .list-index-label {
9464 margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
9465 margin-right: calc(var(--f7-list-index-width) - 1px);
9466 border-radius: 50%;
9467}
9468.ios .list-index .list-index-label:before {
9469 position: absolute;
9470 width: 100%;
9471 height: 100%;
9472 border-radius: 50% 0% 50% 50%;
9473 content: '';
9474 background-color: inherit;
9475 left: 0;
9476 top: 0;
9477 transform: rotate(45deg);
9478 z-index: -1;
9479}
9480.md .list-index .list-index-label {
9481 border-radius: 50% 50% 0 50%;
9482}
9483.aurora .list-index .list-index-label {
9484 margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
9485 margin-right: calc(var(--f7-list-index-width) - 1px);
9486 border-radius: 50%;
9487}
9488.aurora .list-index .list-index-label:before {
9489 position: absolute;
9490 width: 100%;
9491 height: 100%;
9492 border-radius: 50% 1px 50% 50%;
9493 content: '';
9494 background-color: inherit;
9495 left: 0;
9496 top: 0;
9497 transform: rotate(45deg);
9498 z-index: -1;
9499}
9500/* === Timeline === */
9501:root {
9502 --f7-timeline-inner-block-margin-vertical: 16px;
9503 --f7-timeline-divider-margin-horizontal: 16px;
9504 --f7-timeline-horizontal-date-height: 34px;
9505 --f7-timeline-year-height: 24px;
9506 --f7-timeline-year-font-weight: inherit;
9507 --f7-timeline-month-height: 24px;
9508 --f7-timeline-month-font-size: inherit;
9509 --f7-timeline-month-font-weight: inherit;
9510 --f7-timeline-item-text-font-weight: inherit;
9511 --f7-timeline-item-subtitle-font-weight: inherit;
9512 --f7-timeline-item-inner-bg-color: #fff;
9513}
9514:root .theme-dark,
9515:root.theme-dark {
9516 --f7-timeline-item-inner-bg-color: #1c1c1d;
9517 --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
9518 --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
9519}
9520.ios {
9521 --f7-timeline-padding-horizontal: 16px;
9522 --f7-timeline-margin-vertical: 35px;
9523 --f7-timeline-item-inner-border-radius: 7px;
9524 --f7-timeline-item-inner-box-shadow: none;
9525 --f7-timeline-item-time-font-size: 13px;
9526 --f7-timeline-item-title-font-size: 17px;
9527 --f7-timeline-item-title-line-height: inherit;
9528 --f7-timeline-item-title-font-weight: 600;
9529 --f7-timeline-item-subtitle-font-size: 15px;
9530 --f7-timeline-item-subtitle-line-height: inherit;
9531 --f7-timeline-item-text-font-size: inherit;
9532 --f7-timeline-item-text-color: inherit;
9533 --f7-timeline-item-text-line-height: inherit;
9534 --f7-timeline-year-font-size: 16px;
9535 --f7-timeline-horizontal-item-padding: 10px;
9536 --f7-timeline-horizontal-item-date-shadow-image: none;
9537 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.45);
9538 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.22);
9539 --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.22);
9540}
9541.ios .theme-dark,
9542.ios.theme-dark {
9543 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.55);
9544}
9545.md {
9546 --f7-timeline-padding-horizontal: 16px;
9547 --f7-timeline-margin-vertical: 32px;
9548 --f7-timeline-item-inner-border-radius: 4px;
9549 --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
9550 --f7-timeline-item-time-font-size: 13px;
9551 --f7-timeline-item-title-font-size: 16px;
9552 --f7-timeline-item-title-line-height: inherit;
9553 --f7-timeline-item-title-font-weight: 400;
9554 --f7-timeline-item-subtitle-font-size: inherit;
9555 --f7-timeline-item-subtitle-line-height: inherit;
9556 --f7-timeline-item-text-font-size: inherit;
9557 --f7-timeline-item-text-line-height: inherit;
9558 --f7-timeline-item-text-color: inherit;
9559 --f7-timeline-year-font-size: 16px;
9560 --f7-timeline-horizontal-item-padding: 12px;
9561 --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
9562 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
9563 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
9564 --f7-timeline-horizontal-item-date-border-color: transparent;
9565}
9566.md .theme-dark,
9567.md.theme-dark {
9568 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
9569}
9570.aurora {
9571 --f7-timeline-padding-horizontal: 10px;
9572 --f7-timeline-margin-vertical: 15px;
9573 --f7-timeline-item-inner-border-radius: 4px;
9574 --f7-timeline-item-inner-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
9575 --f7-timeline-item-time-font-size: 12px;
9576 --f7-timeline-item-title-font-size: 14px;
9577 --f7-timeline-item-title-line-height: 1.3;
9578 --f7-timeline-item-title-font-weight: 600;
9579 --f7-timeline-item-subtitle-font-size: 14px;
9580 --f7-timeline-item-subtitle-line-height: 1.3;
9581 --f7-timeline-item-text-font-size: 12px;
9582 --f7-timeline-item-text-line-height: 1.33;
9583 --f7-timeline-year-font-size: 14px;
9584 --f7-timeline-year-font-weight: 500;
9585 --f7-timeline-horizontal-item-padding: 10px;
9586 --f7-timeline-horizontal-item-date-shadow-image: none;
9587 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.5);
9588 --f7-timeline-item-text-color: rgba(0, 0, 0, 0.6);
9589 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.2);
9590 --f7-timeline-horizontal-item-date-border-color: rgba(0, 0, 0, 0.2);
9591}
9592.aurora .theme-dark,
9593.aurora.theme-dark {
9594 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
9595 --f7-timeline-item-text-color: rgba(255, 255, 255, 0.54);
9596}
9597.timeline {
9598 box-sizing: border-box;
9599 margin: var(--f7-timeline-margin-vertical) 0;
9600 padding: 0 var(--f7-timeline-padding-horizontal);
9601 padding-top: 0;
9602 padding-bottom: 0;
9603 padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
9604 padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
9605}
9606.block-strong .timeline {
9607 padding: 0;
9608 margin: 0;
9609}
9610.timeline-item {
9611 display: flex;
9612 justify-content: flex-start;
9613 overflow: hidden;
9614 box-sizing: border-box;
9615 position: relative;
9616 padding: 2px 0px var(--f7-timeline-padding-horizontal);
9617}
9618.timeline-item:last-child {
9619 padding-bottom: 2px;
9620}
9621.timeline-item-date {
9622 flex-shrink: 0;
9623 width: 50px;
9624 text-align: right;
9625 box-sizing: border-box;
9626}
9627.timeline-item-date small {
9628 font-size: 10px;
9629}
9630.timeline-item-content {
9631 margin: 2px;
9632 min-width: 0;
9633 position: relative;
9634 flex-shrink: 10;
9635}
9636.timeline-item-content .card,
9637.timeline-item-content.card,
9638.timeline-item-content .list,
9639.timeline-item-content.list,
9640.timeline-item-content .block,
9641.timeline-item-content.block {
9642 margin: 0;
9643 width: 100%;
9644}
9645.timeline-item-content .card + .card,
9646.timeline-item-content .list + .card,
9647.timeline-item-content .block + .card,
9648.timeline-item-content .card + .list,
9649.timeline-item-content .list + .list,
9650.timeline-item-content .block + .list,
9651.timeline-item-content .card + .block,
9652.timeline-item-content .list + .block,
9653.timeline-item-content .block + .block {
9654 margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
9655}
9656.timeline-item-content p:first-child,
9657.timeline-item-content ul:first-child,
9658.timeline-item-content ol:first-child,
9659.timeline-item-content h1:first-child,
9660.timeline-item-content h2:first-child,
9661.timeline-item-content h3:first-child,
9662.timeline-item-content h4:first-child {
9663 margin-top: 0;
9664}
9665.timeline-item-content p:last-child,
9666.timeline-item-content ul:last-child,
9667.timeline-item-content ol:last-child,
9668.timeline-item-content h1:last-child,
9669.timeline-item-content h2:last-child,
9670.timeline-item-content h3:last-child,
9671.timeline-item-content h4:last-child {
9672 margin-bottom: 0;
9673}
9674.timeline-item-inner {
9675 background: var(--f7-timeline-item-inner-bg-color);
9676 box-sizing: border-box;
9677 border-radius: var(--f7-timeline-item-inner-border-radius);
9678 padding: 8px var(--f7-timeline-padding-horizontal);
9679 box-shadow: var(--f7-timeline-item-inner-box-shadow);
9680}
9681.timeline-item-inner + .timeline-item-inner {
9682 margin-top: var(--f7-timeline-inner-block-margin-vertical);
9683}
9684.timeline-item-inner .block {
9685 padding: 0;
9686 color: inherit;
9687}
9688.timeline-item-inner .block-strong {
9689 padding-left: 0;
9690 padding-right: 0;
9691 margin: 0;
9692}
9693.timeline-item-inner .block-strong:before,
9694.timeline-item-inner .block-strong:after {
9695 display: none !important;
9696}
9697.timeline-item-inner .list ul:before,
9698.timeline-item-inner .list ul:after {
9699 display: none !important;
9700}
9701.timeline-item-divider {
9702 width: 1px;
9703 position: relative;
9704 width: 10px;
9705 height: 10px;
9706 background: #bbb;
9707 border-radius: 50%;
9708 flex-shrink: 0;
9709 margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
9710}
9711.timeline-item-divider:after,
9712.timeline-item-divider:before {
9713 content: ' ';
9714 width: 1px;
9715 height: 100vh;
9716 position: absolute;
9717 left: 50%;
9718 background: inherit;
9719 transform: translate3d(-50%, 0, 0);
9720}
9721.timeline-item-divider:after {
9722 top: 100%;
9723}
9724.timeline-item-divider:before {
9725 bottom: 100%;
9726}
9727.timeline-item:last-child .timeline-item-divider:after {
9728 display: none;
9729}
9730.timeline-item:first-child .timeline-item-divider:before {
9731 display: none;
9732}
9733.timeline-item-time {
9734 font-size: var(--f7-timeline-item-time-font-size);
9735 margin-top: var(--f7-timeline-inner-block-margin-vertical);
9736 color: var(--f7-timeline-item-time-text-color);
9737}
9738.timeline-item-time:first-child,
9739.timeline-item-time:last-child {
9740 margin-top: 0;
9741}
9742.timeline-item-title + .timeline-item-time {
9743 margin-top: 0;
9744}
9745.timeline-item-title {
9746 font-size: var(--f7-timeline-item-title-font-size);
9747 font-weight: var(--f7-timeline-item-title-font-weight);
9748 line-height: var(--f7-timeline-item-title-line-height);
9749}
9750.timeline-item-subtitle {
9751 font-size: var(--f7-timeline-item-subtitle-font-size);
9752 font-weight: var(--f7-timeline-item-subtitle-font-weight);
9753 line-height: var(--f7-timeline-item-subtitle-line-height);
9754}
9755.timeline-item-text {
9756 color: var(--f7-timeline-item-text-color);
9757 font-size: var(--f7-timeline-item-text-font-size);
9758 font-weight: var(--f7-timeline-item-text-font-weight);
9759 line-height: var(--f7-timeline-item-text-line-height);
9760}
9761.timeline-sides .timeline-item-right,
9762.timeline-sides .timeline-item {
9763 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9764 margin-right: 0;
9765}
9766.timeline-sides .timeline-item-right .timeline-item-date,
9767.timeline-sides .timeline-item .timeline-item-date {
9768 text-align: right;
9769}
9770.timeline-sides .timeline-item-left,
9771.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9772 flex-direction: row-reverse;
9773 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9774 margin-left: 0;
9775}
9776.timeline-sides .timeline-item-left .timeline-item-date,
9777.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9778 text-align: left;
9779}
9780@media (min-width: 480px) {
9781 .xsmall-sides .timeline-item-right,
9782 .xsmall-sides .timeline-item {
9783 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9784 margin-right: 0;
9785 }
9786 .xsmall-sides .timeline-item-right .timeline-item-date,
9787 .xsmall-sides .timeline-item .timeline-item-date {
9788 text-align: right;
9789 }
9790 .xsmall-sides .timeline-item-left,
9791 .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9792 flex-direction: row-reverse;
9793 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9794 margin-left: 0;
9795 }
9796 .xsmall-sides .timeline-item-left .timeline-item-date,
9797 .xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9798 text-align: left;
9799 }
9800}
9801@media (min-width: 568px) {
9802 .small-sides .timeline-item-right,
9803 .small-sides .timeline-item {
9804 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9805 margin-right: 0;
9806 }
9807 .small-sides .timeline-item-right .timeline-item-date,
9808 .small-sides .timeline-item .timeline-item-date {
9809 text-align: right;
9810 }
9811 .small-sides .timeline-item-left,
9812 .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9813 flex-direction: row-reverse;
9814 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9815 margin-left: 0;
9816 }
9817 .small-sides .timeline-item-left .timeline-item-date,
9818 .small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9819 text-align: left;
9820 }
9821}
9822@media (min-width: 768px) {
9823 .medium-sides .timeline-item-right,
9824 .medium-sides .timeline-item {
9825 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9826 margin-right: 0;
9827 }
9828 .medium-sides .timeline-item-right .timeline-item-date,
9829 .medium-sides .timeline-item .timeline-item-date {
9830 text-align: right;
9831 }
9832 .medium-sides .timeline-item-left,
9833 .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9834 flex-direction: row-reverse;
9835 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9836 margin-left: 0;
9837 }
9838 .medium-sides .timeline-item-left .timeline-item-date,
9839 .medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9840 text-align: left;
9841 }
9842}
9843@media (min-width: 1024px) {
9844 .large-sides .timeline-item-right,
9845 .large-sides .timeline-item {
9846 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9847 margin-right: 0;
9848 }
9849 .large-sides .timeline-item-right .timeline-item-date,
9850 .large-sides .timeline-item .timeline-item-date {
9851 text-align: right;
9852 }
9853 .large-sides .timeline-item-left,
9854 .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9855 flex-direction: row-reverse;
9856 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9857 margin-left: 0;
9858 }
9859 .large-sides .timeline-item-left .timeline-item-date,
9860 .large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9861 text-align: left;
9862 }
9863}
9864@media (min-width: 1200px) {
9865 .xlarge-sides .timeline-item-right,
9866 .xlarge-sides .timeline-item {
9867 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9868 margin-right: 0;
9869 }
9870 .xlarge-sides .timeline-item-right .timeline-item-date,
9871 .xlarge-sides .timeline-item .timeline-item-date {
9872 text-align: right;
9873 }
9874 .xlarge-sides .timeline-item-left,
9875 .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
9876 flex-direction: row-reverse;
9877 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
9878 margin-left: 0;
9879 }
9880 .xlarge-sides .timeline-item-left .timeline-item-date,
9881 .xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
9882 text-align: left;
9883 }
9884}
9885.timeline-horizontal {
9886 height: 100%;
9887 display: flex;
9888 padding: 0;
9889 margin: 0;
9890 position: relative;
9891 padding-left: var(--f7-safe-area-left);
9892 padding-right: 0;
9893}
9894.timeline-horizontal .timeline-item {
9895 display: block;
9896 width: 33.33333333vw;
9897 margin: 0;
9898 padding: 0;
9899 flex-shrink: 0;
9900 position: relative;
9901 height: 100%;
9902 padding-top: var(--f7-timeline-horizontal-date-height) !important;
9903 padding-bottom: var(--f7-timeline-horizontal-item-padding);
9904}
9905.timeline-horizontal .timeline-item:after {
9906 content: '';
9907 position: absolute;
9908 background-color: var(--f7-timeline-horizontal-item-border-color);
9909 display: block;
9910 z-index: 15;
9911 top: 0;
9912 right: 0;
9913 bottom: auto;
9914 left: auto;
9915 width: 1px;
9916 height: 100%;
9917 transform-origin: 100% 50%;
9918 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
9919}
9920.timeline-horizontal .timeline-item-date {
9921 padding: 0px var(--f7-timeline-horizontal-item-padding);
9922 width: auto;
9923 line-height: var(--f7-timeline-horizontal-date-height);
9924 position: absolute;
9925 left: 0;
9926 top: 0;
9927 width: 100%;
9928 height: var(--f7-timeline-horizontal-date-height);
9929 background-color: var(--f7-bars-bg-color);
9930 color: var(--f7-bars-text-color);
9931 text-align: left;
9932}
9933@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
9934 .ios-translucent-bars .timeline-horizontal .timeline-item-date {
9935 background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
9936 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
9937 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
9938 }
9939}
9940.timeline-horizontal .timeline-item-date:after {
9941 content: '';
9942 position: absolute;
9943 background-color: var(--f7-timeline-horizontal-item-date-border-color);
9944 display: block;
9945 z-index: 15;
9946 top: auto;
9947 right: auto;
9948 bottom: 0;
9949 left: 0;
9950 height: 1px;
9951 width: 100%;
9952 transform-origin: 50% 100%;
9953 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9954}
9955.timeline-horizontal .timeline-item-date:before {
9956 content: '';
9957 position: absolute;
9958 right: 0;
9959 width: 100%;
9960 top: 100%;
9961 bottom: auto;
9962 height: 8px;
9963 pointer-events: none;
9964 background: var(--f7-timeline-horizontal-item-date-shadow-image);
9965}
9966.timeline-horizontal.no-shadow .timeline-item-date:before {
9967 display: none;
9968}
9969.timeline-horizontal .timeline-item-content {
9970 padding: var(--f7-timeline-horizontal-item-padding);
9971 height: calc(100% - var(--f7-timeline-horizontal-item-padding));
9972 overflow: auto;
9973 -webkit-overflow-scrolling: touch;
9974 margin: 0;
9975}
9976.timeline-horizontal .timeline-item-divider {
9977 display: none;
9978}
9979.timeline-horizontal > .timeline-item:last-child:after,
9980.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
9981 display: none !important;
9982}
9983.timeline-horizontal.col-5 .timeline-item {
9984 width: 5vw;
9985}
9986.timeline-horizontal.col-10 .timeline-item {
9987 width: 10vw;
9988}
9989.timeline-horizontal.col-15 .timeline-item {
9990 width: 15vw;
9991}
9992.timeline-horizontal.col-20 .timeline-item {
9993 width: 20vw;
9994}
9995.timeline-horizontal.col-25 .timeline-item {
9996 width: 25vw;
9997}
9998.timeline-horizontal.col-30 .timeline-item {
9999 width: 30vw;
10000}
10001.timeline-horizontal.col-33 .timeline-item {
10002 width: 33.333333333333336vw;
10003}
10004.timeline-horizontal.col-35 .timeline-item {
10005 width: 35vw;
10006}
10007.timeline-horizontal.col-40 .timeline-item {
10008 width: 40vw;
10009}
10010.timeline-horizontal.col-45 .timeline-item {
10011 width: 45vw;
10012}
10013.timeline-horizontal.col-50 .timeline-item {
10014 width: 50vw;
10015}
10016.timeline-horizontal.col-55 .timeline-item {
10017 width: 55vw;
10018}
10019.timeline-horizontal.col-60 .timeline-item {
10020 width: 60vw;
10021}
10022.timeline-horizontal.col-65 .timeline-item {
10023 width: 65vw;
10024}
10025.timeline-horizontal.col-66 .timeline-item {
10026 width: 66.66666666666666vw;
10027}
10028.timeline-horizontal.col-70 .timeline-item {
10029 width: 70vw;
10030}
10031.timeline-horizontal.col-75 .timeline-item {
10032 width: 75vw;
10033}
10034.timeline-horizontal.col-80 .timeline-item {
10035 width: 80vw;
10036}
10037.timeline-horizontal.col-85 .timeline-item {
10038 width: 85vw;
10039}
10040.timeline-horizontal.col-90 .timeline-item {
10041 width: 90vw;
10042}
10043.timeline-horizontal.col-95 .timeline-item {
10044 width: 95vw;
10045}
10046.timeline-horizontal.col-100 .timeline-item {
10047 width: 100vw;
10048}
10049@media (min-width: 768px) {
10050 .timeline-horizontal.tablet-5 .timeline-item {
10051 width: 5vw;
10052 }
10053 .timeline-horizontal.tablet-10 .timeline-item {
10054 width: 10vw;
10055 }
10056 .timeline-horizontal.tablet-15 .timeline-item {
10057 width: 15vw;
10058 }
10059 .timeline-horizontal.tablet-20 .timeline-item {
10060 width: 20vw;
10061 }
10062 .timeline-horizontal.tablet-25 .timeline-item {
10063 width: 25vw;
10064 }
10065 .timeline-horizontal.tablet-30 .timeline-item {
10066 width: 30vw;
10067 }
10068 .timeline-horizontal.tablet-33 .timeline-item {
10069 width: 33.333333333333336vw;
10070 }
10071 .timeline-horizontal.tablet-35 .timeline-item {
10072 width: 35vw;
10073 }
10074 .timeline-horizontal.tablet-40 .timeline-item {
10075 width: 40vw;
10076 }
10077 .timeline-horizontal.tablet-45 .timeline-item {
10078 width: 45vw;
10079 }
10080 .timeline-horizontal.tablet-50 .timeline-item {
10081 width: 50vw;
10082 }
10083 .timeline-horizontal.tablet-55 .timeline-item {
10084 width: 55vw;
10085 }
10086 .timeline-horizontal.tablet-60 .timeline-item {
10087 width: 60vw;
10088 }
10089 .timeline-horizontal.tablet-65 .timeline-item {
10090 width: 65vw;
10091 }
10092 .timeline-horizontal.tablet-66 .timeline-item {
10093 width: 66.66666666666666vw;
10094 }
10095 .timeline-horizontal.tablet-70 .timeline-item {
10096 width: 70vw;
10097 }
10098 .timeline-horizontal.tablet-75 .timeline-item {
10099 width: 75vw;
10100 }
10101 .timeline-horizontal.tablet-80 .timeline-item {
10102 width: 80vw;
10103 }
10104 .timeline-horizontal.tablet-85 .timeline-item {
10105 width: 85vw;
10106 }
10107 .timeline-horizontal.tablet-90 .timeline-item {
10108 width: 90vw;
10109 }
10110 .timeline-horizontal.tablet-95 .timeline-item {
10111 width: 95vw;
10112 }
10113 .timeline-horizontal.tablet-100 .timeline-item {
10114 width: 100vw;
10115 }
10116}
10117.timeline-year {
10118 padding-top: var(--f7-timeline-year-height);
10119}
10120.timeline-year:after {
10121 content: '';
10122 position: absolute;
10123 background-color: var(--f7-timeline-horizontal-item-border-color);
10124 display: block;
10125 z-index: 15;
10126 top: 0;
10127 right: 0;
10128 bottom: auto;
10129 left: auto;
10130 width: 1px;
10131 height: 100%;
10132 transform-origin: 100% 50%;
10133 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
10134}
10135.timeline-year:last-child:after {
10136 display: none !important;
10137}
10138.timeline-month {
10139 padding-top: var(--f7-timeline-month-height);
10140}
10141.timeline-month .timeline-item:before {
10142 content: '';
10143 position: absolute;
10144 background-color: var(--f7-timeline-horizontal-item-border-color);
10145 display: block;
10146 z-index: 15;
10147 top: 0;
10148 right: auto;
10149 bottom: auto;
10150 left: 0;
10151 height: 1px;
10152 width: 100%;
10153 transform-origin: 50% 0%;
10154 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10155}
10156.timeline-year,
10157.timeline-month {
10158 display: flex;
10159 flex-shrink: 0;
10160 position: relative;
10161 box-sizing: border-box;
10162 height: 100%;
10163}
10164.timeline-year-title {
10165 line-height: var(--f7-timeline-year-height);
10166 height: var(--f7-timeline-year-height);
10167 font-size: var(--f7-timeline-year-font-size);
10168 font-weight: var(--f7-timeline-year-font-weight);
10169}
10170.timeline-month-title {
10171 line-height: var(--f7-timeline-month-height);
10172 height: var(--f7-timeline-month-height);
10173 font-size: var(--f7-timeline-month-font-size);
10174 font-weight: var(--f7-timeline-month-font-weight);
10175}
10176.timeline-year-title,
10177.timeline-month-title {
10178 position: absolute;
10179 left: 0;
10180 top: 0;
10181 width: 100%;
10182 box-sizing: border-box;
10183 padding: 0 var(--f7-timeline-horizontal-item-padding);
10184 background-color: var(--f7-bars-bg-color);
10185 color: var(--f7-bars-text-color);
10186}
10187@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
10188 .ios-translucent-bars .timeline-year-title,
10189 .ios-translucent-bars .timeline-month-title {
10190 background-color: rgba(var(--f7-bars-bg-color-rgb), var(--f7-bars-translucent-opacity));
10191 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
10192 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
10193 }
10194}
10195.timeline-year-title span,
10196.timeline-month-title span {
10197 display: inline-block;
10198 position: -webkit-sticky;
10199 position: sticky;
10200 left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
10201}
10202.timeline-month-title span {
10203 margin-top: -2px;
10204}
10205.timeline-year:first-child .timeline-year-title,
10206.timeline-year:first-child .timeline-month:first-child .timeline-month-title,
10207.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
10208 left: calc(var(--f7-safe-area-left) * -1);
10209 right: 0;
10210 width: auto;
10211}
10212.timeline-horizontal .timeline-item:first-child,
10213.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
10214.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
10215.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
10216 overflow: visible;
10217}
10218.timeline-horizontal .timeline-item:first-child .timeline-item-date,
10219.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
10220.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
10221.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
10222 width: auto;
10223 padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
10224 left: calc(0px - var(--f7-safe-area-left));
10225 right: 0;
10226}
10227.timeline-year:last-child .timeline-year-title,
10228.timeline-year:last-child .timeline-month:last-child .timeline-month-title {
10229 width: auto;
10230 right: calc(0px - var(--f7-safe-area-right));
10231}
10232.timeline-horizontal .timeline-item:last-child,
10233.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
10234 overflow: visible;
10235}
10236.timeline-horizontal .timeline-item:last-child .timeline-item-date,
10237.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
10238 width: auto;
10239 right: calc(0px - var(--f7-safe-area-right));
10240 left: 0;
10241}
10242.ios .block-strong .timeline-item-inner {
10243 border-radius: 3px;
10244 border: 1px solid rgba(0, 0, 0, 0.1);
10245}
10246.ios .timeline-year-title span {
10247 margin-top: 3px;
10248}
10249.md .timeline-year-title span {
10250 margin-top: 2px;
10251}
10252.aurora .timeline-year-title span {
10253 margin-top: 2px;
10254}
10255/* === Tabs === */
10256.tabs .tab {
10257 display: none;
10258}
10259.tabs .tab-active {
10260 display: block;
10261}
10262.tabs-animated-wrap {
10263 position: relative;
10264 width: 100%;
10265 overflow: hidden;
10266 height: 100%;
10267}
10268.tabs-animated-wrap > .tabs {
10269 display: flex;
10270 height: 100%;
10271 transition-duration: 300ms;
10272}
10273.tabs-animated-wrap > .tabs > .tab {
10274 width: 100%;
10275 display: block;
10276 flex-shrink: 0;
10277}
10278.tabs-animated-wrap.not-animated > .tabs {
10279 transition-duration: 0ms;
10280}
10281.tabs-swipeable-wrap {
10282 height: 100%;
10283}
10284.tabs-swipeable-wrap > .tabs {
10285 height: 100%;
10286}
10287.tabs-swipeable-wrap > .tabs > .tab {
10288 display: block;
10289}
10290.page > .tabs {
10291 height: 100%;
10292}
10293/* === Panels === */
10294:root {
10295 --f7-panel-width: 260px;
10296 /*
10297 --f7-panel-left-width: var(--f7-panel-width);
10298 --f7-panel-right-width: var(--f7-panel-width);
10299 --f7-panel-left-collapsed-width: var(--f7-panel-collapsed-width);
10300 --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
10301 */
10302 --f7-panel-bg-color: #fff;
10303}
10304.ios {
10305 --f7-panel-collapsed-width: 58px;
10306 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
10307 --f7-panel-transition-duration: 400ms;
10308 --f7-panel-shadow: transparent;
10309}
10310.md {
10311 --f7-panel-collapsed-width: 60px;
10312 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.3);
10313 --f7-panel-transition-duration: 300ms;
10314 --f7-panel-shadow: rgba(0, 0, 0, 0.2) 0%,
10315 rgba(0, 0, 0, 0.07) 30%,
10316 rgba(0, 0, 0, 0.03) 40%,
10317 rgba(0, 0, 0, 0) 60%,
10318 rgba(0, 0, 0, 0) 100%;
10319}
10320.aurora {
10321 --f7-panel-collapsed-width: 44px;
10322 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
10323 --f7-panel-transition-duration: 400ms;
10324 --f7-panel-shadow: transparent;
10325}
10326.panel-backdrop {
10327 position: absolute;
10328 left: 0;
10329 top: var(--f7-appbar-app-offset, 0px);
10330 width: 100%;
10331 height: calc(100% - var(--f7-appbar-app-offset, 0px));
10332 opacity: 0;
10333 z-index: 5999;
10334 visibility: hidden;
10335 pointer-events: none;
10336 transform: translate3d(0, 0, 0);
10337 background-color: var(--f7-panel-backdrop-bg-color);
10338 transition-property: transform, opacity;
10339 transition-duration: var(--f7-panel-transition-duration);
10340}
10341.panel-backdrop .with-panel,
10342.panel-backdrop .with-panel-closing {
10343 visibility: visible;
10344}
10345.panel-backdrop.not-animated {
10346 transition-duration: 0ms !important;
10347}
10348.panel {
10349 z-index: 1000;
10350 box-sizing: border-box;
10351 position: absolute;
10352 top: var(--f7-appbar-app-offset, 0px);
10353 height: calc(100% - var(--f7-appbar-app-offset, 0px));
10354 transform: translate3d(0, 0, 0);
10355 width: var(--f7-panel-width);
10356 background-color: var(--f7-panel-bg-color);
10357 overflow: visible;
10358 transition-property: transform;
10359 transition-duration: var(--f7-panel-transition-duration);
10360}
10361.panel:not(.panel-in):not(.panel-out):not(.panel-in-breakpoint):not(.panel-in-collapsed):not(.panel-in-swipe) {
10362 display: none;
10363}
10364.panel:after {
10365 pointer-events: none;
10366 opacity: 0;
10367 z-index: 5999;
10368 position: absolute;
10369 content: '';
10370 top: 0;
10371 width: 20px;
10372 height: 100%;
10373 transition-property: transform, opacity;
10374 transition-duration: var(--f7-panel-transition-duration);
10375}
10376.panel.not-animated,
10377.panel.not-animated:after {
10378 transition-duration: 0ms !important;
10379}
10380.panel.panel-reveal.not-animated ~ .views,
10381.panel.panel-reveal.not-animated ~ .view {
10382 transition-duration: 0ms !important;
10383}
10384.panel.panel-resizing {
10385 -webkit-user-select: none;
10386 -moz-user-select: none;
10387 user-select: none;
10388}
10389.panel.panel-resizing,
10390.panel.panel-resizing:after,
10391.panel.panel-resizing ~ .views,
10392.panel.panel-resizing ~ .view {
10393 transition-duration: 0ms !important;
10394}
10395.panel-cover {
10396 z-index: 6000;
10397}
10398.panel-left {
10399 left: 0;
10400 width: var(--f7-panel-left-width, var(--f7-panel-width));
10401}
10402.panel-left.panel-cover {
10403 transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
10404}
10405.panel-left.panel-cover:after {
10406 left: 100%;
10407 background: linear-gradient(to right, var(--f7-panel-shadow));
10408}
10409.with-panel-left-cover .panel-left.panel-cover:after {
10410 opacity: 1;
10411}
10412.panel-left.panel-reveal:after {
10413 right: 0;
10414 transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
10415 background: linear-gradient(to left, var(--f7-panel-shadow));
10416}
10417.with-panel-left-reveal .panel-left.panel-reveal:after {
10418 opacity: 1;
10419 transform: translate3d(0, 0, 0);
10420}
10421.panel-right {
10422 right: 0;
10423 width: var(--f7-panel-right-width, var(--f7-panel-width));
10424}
10425.panel-right.panel-cover {
10426 transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
10427}
10428.panel-right.panel-cover:after {
10429 right: 100%;
10430 background: linear-gradient(to left, var(--f7-panel-shadow));
10431}
10432.with-panel-right-cover .panel-right.panel-cover:after {
10433 opacity: 1;
10434}
10435.panel-right.panel-reveal:after {
10436 left: 0;
10437 background: linear-gradient(to right, var(--f7-panel-shadow));
10438 transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
10439}
10440.with-panel-right-reveal .panel-right.panel-reveal:after {
10441 opacity: 1;
10442 transform: translate3d(0, 0, 0);
10443}
10444.panel-in-breakpoint {
10445 transform: translate3d(0, 0, 0) !important;
10446 transition-duration: 0ms;
10447}
10448.panel-in-breakpoint:after {
10449 display: none;
10450}
10451.panel-in-breakpoint.panel-cover {
10452 z-index: 5900;
10453}
10454html.with-panel-left-reveal .views,
10455html.with-panel-right-reveal .views,
10456html.with-panel-closing .views,
10457html.with-panel-left-reveal .framework7-root > .view,
10458html.with-panel-right-reveal .framework7-root > .view,
10459html.with-panel-closing .framework7-root > .view {
10460 transition-duration: var(--f7-panel-transition-duration);
10461 transition-property: transform;
10462}
10463html.with-panel .framework7-root > .views .page-content,
10464html.with-panel .framework7-root > .view .page-content {
10465 overflow: hidden;
10466 -webkit-overflow-scrolling: auto;
10467}
10468html.with-panel-left-reveal .views,
10469html.with-panel-left-reveal .framework7-root > .view {
10470 transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
10471}
10472html.with-panel-right-reveal .views,
10473html.with-panel-right-reveal .framework7-root > .view {
10474 transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
10475}
10476.page > .panel-backdrop {
10477 z-index: 290;
10478}
10479.page > .panel-reveal {
10480 z-index: 1;
10481}
10482.page > .panel-cover {
10483 z-index: 300;
10484}
10485.page.with-panel-left-reveal > .page-content,
10486.page.with-panel-right-reveal > .page-content,
10487.page.with-panel-closing > .page-content,
10488.page.with-panel-left-reveal > .tabs,
10489.page.with-panel-right-reveal > .tabs,
10490.page.with-panel-closing > .tabs {
10491 transition-duration: var(--f7-panel-transition-duration);
10492 transition-property: transform;
10493}
10494.page.with-panel-left-reveal > .page-content,
10495.page.with-panel-left-reveal > .tabs {
10496 transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
10497}
10498.page.with-panel-right-reveal > .page-content,
10499.page.with-panel-right-reveal > .tabs {
10500 transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
10501}
10502.with-panel-left-reveal .panel-backdrop-in,
10503.with-panel-right-reveal .panel-backdrop-in,
10504.with-panel-closing .panel-backdrop-in {
10505 visibility: visible;
10506 pointer-events: auto;
10507 opacity: 0;
10508}
10509.with-panel-left-cover .panel-backdrop-in,
10510.with-panel-right-cover .panel-backdrop-in {
10511 visibility: visible;
10512 pointer-events: auto;
10513 opacity: 1;
10514}
10515.with-panel-left-reveal .panel-backdrop-in {
10516 transform: translate3d(var(--f7-panel-left-width, var(--f7-panel-width)), 0, 0);
10517}
10518.with-panel-right-reveal .panel-backdrop-in {
10519 transform: translate3d(calc(-1 * var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
10520}
10521.with-panel-left-cover .panel-left {
10522 transform: translate3d(0px, 0, 0);
10523}
10524.with-panel-right-cover .panel-right {
10525 transform: translate3d(0px, 0, 0);
10526}
10527.panel-resize-handler {
10528 position: absolute;
10529 top: 0;
10530 height: 100%;
10531 width: 6px;
10532 cursor: col-resize;
10533 z-index: 6000;
10534 display: none;
10535}
10536.panel-resizable .panel-resize-handler {
10537 display: block;
10538}
10539.panel-left.panel-cover .panel-resize-handler {
10540 right: -3px;
10541}
10542.panel-left.panel-reveal .panel-resize-handler {
10543 right: 0;
10544}
10545.panel-right.panel-cover .panel-resize-handler {
10546 left: -3px;
10547}
10548.panel-right.panel-reveal .panel-resize-handler {
10549 left: 0;
10550}
10551.panel-left.panel-in-collapsed ~ .views,
10552.panel-left.panel-in-collapsed ~ .view,
10553.panel-left.panel-in-collapsed ~ .page-content,
10554.panel-left.panel-in-collapsed ~ .tabs {
10555 margin-left: var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width));
10556}
10557.page.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .page-content,
10558.page.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .tabs,
10559html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .views,
10560html.with-panel-left-reveal .panel-left.panel-in-collapsed ~ .view {
10561 transform: translate3d(calc(var(--f7-panel-left-width, var(--f7-panel-width)) - var(--f7-panel-left-collapsed-width, var(--f7-panel-collapsed-width))), 0, 0);
10562}
10563.panel-right.panel-in-collapsed ~ .views,
10564.panel-right.panel-in-collapsed ~ .view,
10565.panel-right.panel-in-collapsed ~ .page-content,
10566.panel-right.panel-in-collapsed ~ .tabs {
10567 margin-right: var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width));
10568}
10569.page.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .page-content,
10570.page.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .tabs,
10571html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .views,
10572html.with-panel-right-reveal .panel-right.panel-in-collapsed ~ .view {
10573 transform: translate3d(calc(var(--f7-panel-right-collapsed-width, var(--f7-panel-collapsed-width)) - var(--f7-panel-right-width, var(--f7-panel-width))), 0, 0);
10574}
10575html.with-modal-popup-push .framework7-root,
10576html.with-modal-popup-push-closing .framework7-root {
10577 --f7-panelPushScale: var(--f7-popup-push-scale);
10578 --f7-panelPushTransitionDuration: var(--f7-popup-transition-duration);
10579 --f7-panelPushBorderRadius: var(--f7-popup-push-border-radius);
10580}
10581html.with-modal-sheet-push .framework7-root,
10582html.with-modal-sheet-push-closing .framework7-root {
10583 --f7-panelPushScale: var(--f7-sheet-push-scale);
10584 --f7-panelPushTransitionDuration: var(--f7-sheet-transition-duration);
10585 --f7-panelPushBorderRadius: var(--f7-sheet-push-border-radius);
10586}
10587html.with-modal-popup-push .framework7-root > .panel-in,
10588html.with-modal-sheet-push .framework7-root > .panel-in,
10589html.with-modal-popup-push .framework7-root > .panel-out,
10590html.with-modal-sheet-push .framework7-root > .panel-out {
10591 transition-duration: var(--f7-panelPushTransitionDuration);
10592}
10593html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left,
10594html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left,
10595html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left,
10596html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left {
10597 transform: scale(var(--f7-panelPushScale, 1));
10598 transform-origin: 50vw center;
10599 border-top-left-radius: var(--f7-panelPushBorderRadius);
10600}
10601html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
10602html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-left .view,
10603html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-left .view,
10604html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-left .view {
10605 border-top-left-radius: var(--f7-panelPushBorderRadius);
10606}
10607html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right,
10608html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right,
10609html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right,
10610html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right {
10611 transform: scale(var(--f7-panelPushScale, 1));
10612 transform-origin: calc(var(--f7-panel-left-width, var(--f7-panel-width)) - 50vw) center;
10613 border-top-right-radius: var(--f7-panelPushBorderRadius);
10614}
10615html.with-modal-popup-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
10616html.with-modal-sheet-push .framework7-root > .panel-in.panel-reveal.panel-right .view,
10617html.with-modal-popup-push .framework7-root > .panel-out.panel-reveal.panel-right .view,
10618html.with-modal-sheet-push .framework7-root > .panel-out.panel-reveal.panel-right .view {
10619 border-top-right-radius: var(--f7-panelPushBorderRadius);
10620}
10621html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-left,
10622html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-left,
10623html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-left,
10624html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-left {
10625 transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0px);
10626}
10627html.with-modal-popup-push .framework7-root > .panel-in.panel-cover.panel-right,
10628html.with-modal-sheet-push .framework7-root > .panel-in.panel-cover.panel-right,
10629html.with-modal-popup-push .framework7-root > .panel-out.panel-cover.panel-right,
10630html.with-modal-sheet-push .framework7-root > .panel-out.panel-cover.panel-right {
10631 transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0px);
10632}
10633html.with-modal-popup-push-closing .framework7-root > .panel-in,
10634html.with-modal-sheet-push-closing .framework7-root > .panel-in {
10635 transition-duration: var(--f7-panelPushTransitionDuration);
10636}
10637html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-left,
10638html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-left {
10639 transform-origin: 50vw center;
10640}
10641html.with-modal-popup-push-closing .framework7-root > .panel-in.panel-reveal.panel-right,
10642html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-reveal.panel-right {
10643 transform-origin: calc(var(--f7-panel-right-width, var(--f7-panel-width)) - 50vw) center;
10644}
10645/* === Card === */
10646:root {
10647 --f7-card-content-padding-horizontal: 16px;
10648 --f7-card-content-padding-vertical: 16px;
10649 --f7-card-border-radius: 4px;
10650 --f7-card-font-size: inherit;
10651 --f7-card-header-text-color: inherit;
10652 --f7-card-header-font-weight: 400;
10653 --f7-card-header-padding-horizontal: 16px;
10654 --f7-card-footer-font-weight: 400;
10655 --f7-card-footer-font-size: inherit;
10656 --f7-card-footer-padding-horizontal: 16px;
10657 --f7-card-expandable-font-size: 16px;
10658 --f7-card-expandable-tablet-width: 670px;
10659 --f7-card-expandable-tablet-height: 670px;
10660 --f7-card-bg-color: #fff;
10661 --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
10662 --f7-card-header-border-color: rgba(0, 0, 0, 0.1);
10663 --f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
10664 --f7-card-expandable-bg-color: #fff;
10665}
10666:root .theme-dark,
10667:root.theme-dark {
10668 --f7-card-bg-color: #1c1c1d;
10669 --f7-card-expandable-bg-color: #1c1c1d;
10670 --f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
10671 --f7-card-header-border-color: rgba(255, 255, 255, 0.15);
10672 --f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
10673 --f7-card-footer-text-color: rgba(255, 255, 255, 0.55);
10674}
10675.ios {
10676 --f7-card-margin-horizontal: 16px;
10677 --f7-card-margin-vertical: 16px;
10678 --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
10679 --f7-card-header-font-size: 17px;
10680 --f7-card-header-padding-vertical: 10px;
10681 --f7-card-header-min-height: 44px;
10682 --f7-card-footer-text-color: rgba(0, 0, 0, 0.45);
10683 --f7-card-footer-padding-vertical: 10px;
10684 --f7-card-footer-min-height: 44px;
10685 --f7-card-expandable-margin-horizontal: 20px;
10686 --f7-card-expandable-margin-vertical: 30px;
10687 --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
10688 --f7-card-expandable-border-radius: 15px;
10689 --f7-card-expandable-tablet-border-radius: 5px;
10690 --f7-card-expandable-header-font-size: 27px;
10691 --f7-card-expandable-header-font-weight: bold;
10692}
10693.md {
10694 --f7-card-margin-horizontal: 16px;
10695 --f7-card-margin-vertical: 16px;
10696 --f7-card-box-shadow: var(--f7-elevation-1);
10697 --f7-card-header-font-size: 16px;
10698 --f7-card-header-padding-vertical: 4px;
10699 --f7-card-header-min-height: 48px;
10700 --f7-card-footer-text-color: rgba(0, 0, 0, 0.54);
10701 --f7-card-footer-padding-vertical: 4px;
10702 --f7-card-footer-min-height: 48px;
10703 --f7-card-expandable-margin-horizontal: 12px;
10704 --f7-card-expandable-margin-vertical: 24px;
10705 --f7-card-expandable-box-shadow: var(--f7-elevation-10);
10706 --f7-card-expandable-border-radius: 8px;
10707 --f7-card-expandable-tablet-border-radius: 4px;
10708 --f7-card-expandable-header-font-size: 24px;
10709 --f7-card-expandable-header-font-weight: 500;
10710}
10711.aurora {
10712 --f7-card-border-radius: 8px;
10713 --f7-card-margin-horizontal: 16px;
10714 --f7-card-margin-vertical: 16px;
10715 --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
10716 --f7-card-header-font-size: 16px;
10717 --f7-card-header-font-weight: bold;
10718 --f7-card-header-padding-vertical: 8px;
10719 --f7-card-header-min-height: 48px;
10720 --f7-card-footer-text-color: rgba(0, 0, 0, 0.6);
10721 --f7-card-footer-padding-vertical: 8px;
10722 --f7-card-footer-min-height: 48px;
10723 --f7-card-expandable-margin-horizontal: 10px;
10724 --f7-card-expandable-margin-vertical: 20px;
10725 --f7-card-expandable-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
10726 --f7-card-expandable-border-radius: 8px;
10727 --f7-card-expandable-tablet-border-radius: 4px;
10728 --f7-card-expandable-header-font-size: 24px;
10729 --f7-card-expandable-header-font-weight: bold;
10730}
10731.cards-list > ul:before,
10732.card .list > ul:before,
10733.cards-list > ul:after,
10734.card .list > ul:after {
10735 display: none !important;
10736}
10737.cards-list ul,
10738.card .list ul {
10739 background: none;
10740}
10741.card {
10742 background: var(--f7-card-bg-color);
10743 position: relative;
10744 border-radius: var(--f7-card-border-radius);
10745 font-size: var(--f7-card-font-size);
10746 margin-top: var(--f7-card-margin-vertical);
10747 margin-bottom: var(--f7-card-margin-vertical);
10748 margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
10749 margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
10750 box-shadow: var(--f7-card-box-shadow);
10751}
10752.card .list,
10753.card .block {
10754 margin: 0;
10755}
10756.row:not(.no-gap) .col > .card {
10757 margin-left: 0;
10758 margin-right: 0;
10759}
10760.card.no-shadow {
10761 box-shadow: none;
10762}
10763.card-outline,
10764.ios .card-outline-ios,
10765.md .card-outline-md,
10766.aurora .card-outline-aurora {
10767 box-shadow: none;
10768 border: 1px solid var(--f7-card-outline-border-color);
10769}
10770.card-outline.no-border,
10771.ios .card-outline-ios.no-border,
10772.md .card-outline-md.no-border,
10773.aurora .card-outline-aurora.no-border,
10774.card-outline.no-hairlines,
10775.ios .card-outline-ios.no-hairlines,
10776.md .card-outline-md.no-hairlines,
10777.aurora .card-outline-aurora.no-hairlines {
10778 border: none;
10779}
10780.card-content {
10781 position: relative;
10782}
10783.card-content-padding {
10784 position: relative;
10785 padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
10786}
10787.card-content-padding > .list,
10788.card-content-padding > .block {
10789 margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
10790}
10791.card-content-padding > p:first-child {
10792 margin-top: 0;
10793}
10794.card-content-padding > p:last-child {
10795 margin-bottom: 0;
10796}
10797.card-header {
10798 min-height: var(--f7-card-header-min-height);
10799 color: var(--f7-card-header-text-color);
10800 font-size: var(--f7-card-header-font-size);
10801 font-weight: var(--f7-card-header-font-weight);
10802 padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
10803}
10804.card-footer {
10805 min-height: var(--f7-card-footer-min-height);
10806 color: var(--f7-card-footer-text-color);
10807 font-size: var(--f7-card-footer-font-size);
10808 font-weight: var(--f7-card-footer-font-weight);
10809 padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
10810}
10811.card-footer a.link {
10812 overflow: hidden;
10813}
10814.card-header,
10815.card-footer {
10816 position: relative;
10817 box-sizing: border-box;
10818 display: flex;
10819 justify-content: space-between;
10820 align-items: center;
10821}
10822.card-header[valign='top'],
10823.card-footer[valign='top'] {
10824 align-items: flex-start;
10825}
10826.card-header[valign='bottom'],
10827.card-footer[valign='bottom'] {
10828 align-items: flex-end;
10829}
10830.card-header a.link,
10831.card-footer a.link {
10832 position: relative;
10833}
10834.card-header a.link i.icon,
10835.card-footer a.link i.icon {
10836 display: block;
10837}
10838.card-header a.icon-only,
10839.card-footer a.icon-only {
10840 display: flex;
10841 justify-content: center;
10842 align-items: center;
10843 margin: 0;
10844}
10845.card-header {
10846 border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
10847}
10848.card-header:after {
10849 content: '';
10850 position: absolute;
10851 background-color: var(--f7-card-header-border-color);
10852 display: block;
10853 z-index: 15;
10854 top: auto;
10855 right: auto;
10856 bottom: 0;
10857 left: 0;
10858 height: 1px;
10859 width: 100%;
10860 transform-origin: 50% 100%;
10861 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10862}
10863.card-header.no-hairline:after {
10864 display: none !important;
10865}
10866.card-footer {
10867 border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
10868}
10869.card-footer:before {
10870 content: '';
10871 position: absolute;
10872 background-color: var(--f7-card-footer-border-color);
10873 display: block;
10874 z-index: 15;
10875 top: 0;
10876 right: auto;
10877 bottom: auto;
10878 left: 0;
10879 height: 1px;
10880 width: 100%;
10881 transform-origin: 50% 0%;
10882 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10883}
10884.card-footer.no-hairline:before {
10885 display: none !important;
10886}
10887.card-expandable {
10888 overflow: hidden;
10889 height: 300px;
10890 background: var(--f7-card-expandable-bg-color);
10891 position: relative;
10892 transform-origin: center center;
10893 transition-property: transform, border-radius;
10894 border-radius: var(--f7-card-expandable-border-radius);
10895 z-index: 2;
10896 transition-duration: 200ms;
10897 margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
10898 margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
10899 margin-top: var(--f7-card-expandable-margin-vertical);
10900 margin-bottom: var(--f7-card-expandable-margin-vertical);
10901 box-shadow: var(--f7-card-expandable-box-shadow);
10902 font-size: var(--f7-card-expandable-font-size);
10903}
10904.card-expandable:not(.card-opened) {
10905 -webkit-user-select: none;
10906 -moz-user-select: none;
10907 user-select: none;
10908}
10909.card-expandable.card-no-transition {
10910 transition-duration: 0ms;
10911}
10912.card-expandable.card-expandable-animate-width .card-content {
10913 transition-property: width, transform;
10914 width: 100%;
10915}
10916.card-expandable.active-state {
10917 transform: scale(0.97) translate3d(0, 0, 0);
10918}
10919.card-expandable .card-opened-fade-in,
10920.card-expandable .card-opened-fade-out {
10921 transition-duration: 400ms;
10922}
10923.card-expandable .card-opened-fade-in {
10924 opacity: 0;
10925 pointer-events: none;
10926}
10927.card-expandable .card-content {
10928 position: absolute;
10929 top: 0;
10930 width: 100vw;
10931 height: 100vh;
10932 transform-origin: center top;
10933 overflow: hidden;
10934 transition-property: transform;
10935 box-sizing: border-box;
10936 pointer-events: none;
10937 left: 0;
10938}
10939.card-expandable .card-content .card-content-padding {
10940 padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
10941 padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
10942}
10943.card-expandable.card-opened {
10944 transition-duration: 0ms;
10945}
10946.card-expandable.card-opening,
10947.card-expandable.card-closing,
10948.card-expandable.card-transitioning {
10949 transition-duration: 400ms;
10950}
10951.card-expandable.card-opening .card-content {
10952 transition-duration: 300ms;
10953}
10954.card-expandable.card-closing .card-content {
10955 transition-duration: 500ms;
10956}
10957.card-expandable.card-opening,
10958.card-expandable.card-opened,
10959.card-expandable.card-closing {
10960 z-index: 300;
10961}
10962.card-expandable.card-opening,
10963.card-expandable.card-opened {
10964 border-radius: 0;
10965}
10966.card-expandable.card-opening .card-opened-fade-in,
10967.card-expandable.card-opened .card-opened-fade-in {
10968 opacity: 1;
10969 pointer-events: auto;
10970}
10971.card-expandable.card-opening .card-opened-fade-out,
10972.card-expandable.card-opened .card-opened-fade-out {
10973 opacity: 0;
10974 pointer-events: none;
10975}
10976.card-expandable.card-opened .card-content {
10977 overflow: auto;
10978 -webkit-overflow-scrolling: touch;
10979 pointer-events: auto;
10980}
10981.card-expandable .card-header {
10982 font-size: var(--f7-card-expandable-header-font-size);
10983 font-weight: var(--f7-card-expandable-header-font-weight);
10984}
10985.card-expandable .card-header:after {
10986 display: none !important;
10987}
10988.card-prevent-open {
10989 pointer-events: auto;
10990}
10991.card-expandable-size {
10992 width: 0;
10993 height: 0;
10994 position: absolute;
10995 left: 0;
10996 top: 0;
10997 opacity: 0;
10998 pointer-events: none;
10999 visibility: hidden;
11000}
11001@media (min-width: 768px) and (min-height: 670px) {
11002 .card-expandable:not(.card-tablet-fullscreen) {
11003 max-width: var(--f7-card-expandable-tablet-width);
11004 }
11005 .card-expandable:not(.card-tablet-fullscreen).card-opened,
11006 .card-expandable:not(.card-tablet-fullscreen).card-opening {
11007 border-radius: var(--f7-card-expandable-tablet-border-radius);
11008 }
11009 .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
11010 width: var(--f7-card-expandable-tablet-width);
11011 }
11012 .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
11013 width: var(--f7-card-expandable-tablet-width);
11014 height: var(--f7-card-expandable-tablet-height);
11015 }
11016}
11017.page.page-with-card-opened .page-content {
11018 overflow: hidden;
11019}
11020.card-backdrop {
11021 position: fixed;
11022 left: 0;
11023 top: 0;
11024 width: 100%;
11025 height: 100%;
11026 z-index: 299;
11027 pointer-events: none;
11028 background: rgba(0, 0, 0, 0.2);
11029 opacity: 0;
11030}
11031.card-backdrop-in {
11032 animation: card-backdrop-fade-in 400ms forwards;
11033 pointer-events: auto;
11034}
11035.card-backdrop-out {
11036 animation: card-backdrop-fade-out 400ms forwards;
11037}
11038@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
11039 .card-backdrop {
11040 background: transparent;
11041 -webkit-backdrop-filter: blur(15px);
11042 backdrop-filter: blur(15px);
11043 }
11044}
11045@keyframes card-backdrop-fade-in {
11046 from {
11047 opacity: 0;
11048 }
11049 to {
11050 opacity: 1;
11051 }
11052}
11053@keyframes card-backdrop-fade-out {
11054 from {
11055 opacity: 1;
11056 }
11057 to {
11058 opacity: 0;
11059 }
11060}
11061/* === Chips === */
11062:root {
11063 --f7-chip-font-size: 14px;
11064 --f7-chip-font-weight: normal;
11065 --f7-chip-media-font-size: 16px;
11066 --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
11067 --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
11068 --f7-chip-delete-button-color: #000;
11069}
11070:root .theme-dark,
11071:root.theme-dark {
11072 --f7-chip-delete-button-color: #fff;
11073 --f7-chip-bg-color: #333;
11074 --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
11075}
11076.ios {
11077 --f7-chip-height: 28px;
11078 --f7-chip-padding-horizontal: 10px;
11079 --f7-chip-text-color: #000;
11080}
11081.ios .theme-dark,
11082.ios.theme-dark {
11083 --f7-chip-text-color: #fff;
11084}
11085.md {
11086 --f7-chip-height: 32px;
11087 --f7-chip-padding-horizontal: 12px;
11088 --f7-chip-text-color: rgba(0, 0, 0, 0.87);
11089}
11090.md .theme-dark,
11091.md.theme-dark {
11092 --f7-chip-text-color: rgba(255, 255, 255, 0.87);
11093}
11094.aurora {
11095 --f7-chip-height: 32px;
11096 --f7-chip-padding-horizontal: 12px;
11097 --f7-chip-text-color: #000;
11098}
11099.aurora .theme-dark,
11100.aurora.theme-dark {
11101 --f7-chip-text-color: #fff;
11102}
11103.chip {
11104 padding-left: var(--f7-chip-padding-horizontal);
11105 padding-right: var(--f7-chip-padding-horizontal);
11106 font-weight: var(--f7-chip-font-weight);
11107 display: inline-flex;
11108 box-sizing: border-box;
11109 vertical-align: middle;
11110 align-items: center;
11111 margin: 2px 0;
11112 background-color: var(--f7-chip-bg-color);
11113 font-size: var(--f7-chip-font-size);
11114 color: var(--f7-chip-text-color);
11115 height: var(--f7-chip-height);
11116 line-height: var(--f7-chip-height);
11117 border-radius: var(--f7-chip-height);
11118 position: relative;
11119}
11120.chip-media {
11121 border-radius: 50%;
11122 flex-shrink: 0;
11123 display: flex;
11124 align-items: center;
11125 justify-content: center;
11126 height: var(--f7-chip-height);
11127 width: var(--f7-chip-height);
11128 border-radius: var(--f7-chip-height);
11129 text-align: center;
11130 line-height: var(--f7-chip-height);
11131 box-sizing: border-box;
11132 color: #fff;
11133 font-size: var(--f7-chip-media-font-size);
11134 vertical-align: middle;
11135 margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
11136}
11137.chip-media i.icon {
11138 font-size: calc(var(--f7-chip-height) - 8px);
11139 height: calc(var(--f7-chip-height) - 8px);
11140}
11141.chip-media img {
11142 max-width: 100%;
11143 max-height: 100%;
11144 width: auto;
11145 height: auto;
11146 border-radius: 50%;
11147 display: block;
11148}
11149.chip-media + .chip-label {
11150 margin-left: 4px;
11151}
11152.chip-label {
11153 white-space: nowrap;
11154 overflow: hidden;
11155 text-overflow: ellipsis;
11156 position: relative;
11157 flex-shrink: 1;
11158 min-width: 0;
11159}
11160.chip-delete {
11161 text-align: center;
11162 cursor: pointer;
11163 flex-shrink: 0;
11164 background-repeat: no-repeat;
11165 width: 24px;
11166 height: 24px;
11167 color: var(--f7-chip-delete-button-color);
11168 opacity: 0.54;
11169 position: relative;
11170}
11171.chip-delete:after {
11172 font-family: 'framework7-core-icons';
11173 font-weight: normal;
11174 font-style: normal;
11175 line-height: 1;
11176 letter-spacing: normal;
11177 text-transform: none;
11178 white-space: nowrap;
11179 word-wrap: normal;
11180 direction: ltr;
11181 -webkit-font-smoothing: antialiased;
11182 text-rendering: optimizeLegibility;
11183 -moz-osx-font-smoothing: grayscale;
11184 font-feature-settings: 'liga';
11185 text-align: center;
11186 display: block;
11187 width: 100%;
11188 height: 100%;
11189 font-size: 20px;
11190 content: 'delete_round_ios';
11191 line-height: 24px;
11192}
11193.chip .chip-delete.active-state {
11194 opacity: 1;
11195}
11196.chip-outline,
11197.ios .chip-outline-ios,
11198.md .chip-outline-md,
11199.aurora .chip-outline-aurora {
11200 border: 1px solid var(--f7-chip-outline-border-color);
11201 background: none;
11202}
11203.chip[class*='color-'] {
11204 --f7-chip-bg-color: var(--f7-theme-color);
11205 --f7-chip-text-color: #fff;
11206}
11207.chip-outline[class*='color-'],
11208.ios .chip-outline-ios[class*='color-'],
11209.md .chip-outline-md[class*='color-'],
11210.aurora .chip-outline-aurora[class*='color-'] {
11211 --f7-chip-outline-border-color: var(--f7-theme-color);
11212 --f7-chip-text-color: var(--f7-theme-color);
11213}
11214.ios .chip-delete {
11215 margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
11216}
11217.ios .chip-delete:after {
11218 font-size: 10px;
11219}
11220.md .chip-label + .chip-delete {
11221 margin-left: 4px;
11222}
11223.md .chip-delete {
11224 margin-right: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
11225}
11226.md .chip-delete:after {
11227 font-size: 12px;
11228}
11229.aurora .chip-delete {
11230 margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
11231}
11232.aurora .chip-delete:after {
11233 font-size: 10px;
11234}
11235/* === Form === */
11236/* === Input === */
11237:root {
11238 --f7-input-bg-color: transparent;
11239 --f7-label-font-weight: 400;
11240 --f7-label-line-height: 1.3;
11241 --f7-input-padding-left: 0px;
11242 --f7-input-padding-right: 0px;
11243 --f7-input-error-text-color: #ff3b30;
11244 --f7-input-error-font-size: 12px;
11245 --f7-input-error-line-height: 1.4;
11246 --f7-input-error-font-weight: 400;
11247 --f7-input-info-font-size: 12px;
11248 --f7-input-info-line-height: 1.4;
11249 --f7-input-outline-height: 40px;
11250 --f7-input-outline-border-radius: 4px;
11251 --f7-input-outline-padding-horizontal: 12px;
11252 --f7-textarea-height: 100px;
11253 /*
11254 --f7-input-outline-focused-border-color: var(--f7-theme-color);
11255 --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
11256 */
11257 --f7-input-outline-border-color: #999;
11258}
11259:root .theme-dark,
11260:root.theme-dark {
11261 --f7-input-outline-border-color: #444;
11262}
11263.ios {
11264 --f7-input-height: 44px;
11265 --f7-input-font-size: 17px;
11266 --f7-input-placeholder-color: #a9a9a9;
11267 --f7-textarea-padding-vertical: 11px;
11268 /*
11269 --f7-input-focused-border-color: var(--f7-list-item-border-color);
11270 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
11271 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
11272 */
11273 --f7-label-font-size: 12px;
11274 --f7-label-text-color: inherit;
11275 /*
11276 --f7-label-focused-text-color: var(--f7-label-text-color);
11277 --f7-label-invalid-text-color: var(--f7-label-text-color);
11278 */
11279 --f7-floating-label-scale: calc(17 / 12);
11280 --f7-inline-label-font-size: 17px;
11281 --f7-inline-label-line-height: 1.4;
11282 --f7-inline-label-padding-top: 3px;
11283 --f7-input-clear-button-size: 14px;
11284 --f7-input-text-color: #000000;
11285 --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
11286 --f7-input-clear-button-color: rgba(0, 0, 0, 0.45);
11287}
11288.ios .theme-dark,
11289.ios.theme-dark {
11290 --f7-input-text-color: #fff;
11291 --f7-input-info-text-color: rgba(255, 255, 255, 0.55);
11292 --f7-input-clear-button-color: rgba(255, 255, 255, 0.5);
11293}
11294.md {
11295 --f7-input-height: 36px;
11296 --f7-input-font-size: 16px;
11297 --f7-textarea-padding-vertical: 7px;
11298 /*
11299 --f7-input-focused-border-color: var(--f7-theme-color);
11300 --f7-input-invalid-border-color: var(--f7-input-error-text-color);
11301 --f7-input-invalid-text-color: var(--f7-input-text-color);
11302 */
11303 --f7-label-font-size: 12px;
11304 /*
11305 --f7-label-focused-text-color: var(--f7-theme-color);
11306 --f7-label-invalid-text-color: var(--f7-input-error-text-color );
11307 */
11308 --f7-floating-label-scale: calc(16 / 12);
11309 --f7-inline-label-font-size: 16px;
11310 --f7-inline-label-line-height: 1.5;
11311 --f7-inline-label-padding-top: 7px;
11312 --f7-input-clear-button-size: 18px;
11313 --f7-input-clear-button-color: #aaa;
11314 --f7-input-text-color: #212121;
11315 --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
11316 --f7-label-text-color: rgba(0, 0, 0, 0.65);
11317 --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
11318}
11319.md .theme-dark,
11320.md.theme-dark {
11321 --f7-input-text-color: rgba(255, 255, 255, 0.87);
11322 --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
11323 --f7-label-text-color: rgba(255, 255, 255, 0.54);
11324 --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
11325}
11326.aurora {
11327 --f7-input-height: 24px;
11328 --f7-input-font-size: 13px;
11329 --f7-textarea-padding-vertical: 2px;
11330 /*
11331 --f7-input-focused-border-color: var(--f7-list-item-border-color);
11332 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
11333 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
11334 */
11335 --f7-label-font-size: 11px;
11336 --f7-label-text-color: inherit;
11337 /*
11338 --f7-label-focused-text-color: var(--f7-label-text-color);
11339 --f7-label-invalid-text-color: var(--f7-label-text-color);
11340 */
11341 --f7-floating-label-scale: calc(13 / 11);
11342 --f7-inline-label-font-size: 14px;
11343 --f7-inline-label-line-height: 1.4;
11344 --f7-inline-label-padding-top: 1px;
11345 --f7-input-clear-button-size: 14px;
11346 --f7-input-outline-height: 32px;
11347 --f7-input-outline-padding-horizontal: 8px;
11348 --f7-input-text-color: #000000;
11349 --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
11350 --f7-input-clear-button-color: #666;
11351 --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
11352}
11353.aurora .theme-dark,
11354.aurora.theme-dark {
11355 --f7-input-text-color: #fff;
11356 --f7-input-clear-button-color: #aaa;
11357 --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
11358 --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
11359}
11360input[type='text'],
11361input[type='password'],
11362input[type='search'],
11363input[type='email'],
11364input[type='tel'],
11365input[type='url'],
11366input[type='date'],
11367input[type='month'],
11368input[type='datetime-local'],
11369input[type='time'],
11370input[type='number'],
11371select,
11372textarea {
11373 box-sizing: border-box;
11374 -webkit-appearance: none;
11375 -moz-appearance: none;
11376 appearance: none;
11377 border: none;
11378 box-shadow: none;
11379 border-radius: 0;
11380 outline: 0;
11381 display: block;
11382 padding: 0;
11383 margin: 0;
11384 font-family: inherit;
11385 background: none;
11386 resize: none;
11387 font-size: inherit;
11388 color: inherit;
11389}
11390.textarea-resizable-shadow {
11391 opacity: 0;
11392 position: absolute;
11393 z-index: -1000;
11394 pointer-events: none;
11395 left: -1000px;
11396 top: -1000px;
11397 visibility: hidden;
11398}
11399.list input[type='text'],
11400.list input[type='password'],
11401.list input[type='search'],
11402.list input[type='email'],
11403.list input[type='tel'],
11404.list input[type='url'],
11405.list input[type='date'],
11406.list input[type='month'],
11407.list input[type='datetime-local'],
11408.list input[type='time'],
11409.list input[type='number'],
11410.list select {
11411 width: 100%;
11412 height: var(--f7-input-height);
11413 color: var(--f7-input-text-color);
11414 font-size: var(--f7-input-font-size);
11415 background-color: var(--f7-input-bg-color, transparent);
11416 padding-left: var(--f7-input-padding-left);
11417 padding-right: var(--f7-input-padding-right);
11418}
11419.list input[type='text']::-webkit-input-placeholder, .list input[type='password']::-webkit-input-placeholder, .list input[type='search']::-webkit-input-placeholder, .list input[type='email']::-webkit-input-placeholder, .list input[type='tel']::-webkit-input-placeholder, .list input[type='url']::-webkit-input-placeholder, .list input[type='date']::-webkit-input-placeholder, .list input[type='month']::-webkit-input-placeholder, .list input[type='datetime-local']::-webkit-input-placeholder, .list input[type='time']::-webkit-input-placeholder, .list input[type='number']::-webkit-input-placeholder, .list select::-webkit-input-placeholder {
11420 color: var(--f7-input-placeholder-color);
11421}
11422.list input[type='text']::placeholder,
11423.list input[type='password']::placeholder,
11424.list input[type='search']::placeholder,
11425.list input[type='email']::placeholder,
11426.list input[type='tel']::placeholder,
11427.list input[type='url']::placeholder,
11428.list input[type='date']::placeholder,
11429.list input[type='month']::placeholder,
11430.list input[type='datetime-local']::placeholder,
11431.list input[type='time']::placeholder,
11432.list input[type='number']::placeholder,
11433.list select::placeholder {
11434 color: var(--f7-input-placeholder-color);
11435}
11436.list textarea {
11437 width: 100%;
11438 color: var(--f7-input-text-color);
11439 font-size: var(--f7-input-font-size);
11440 resize: none;
11441 line-height: 1.4;
11442 height: var(--f7-textarea-height);
11443 background-color: var(--f7-input-bg-color, transparent);
11444 padding-top: var(--f7-textarea-padding-vertical);
11445 padding-bottom: var(--f7-textarea-padding-vertical);
11446 padding-left: var(--f7-input-padding-left);
11447 padding-right: var(--f7-input-padding-right);
11448}
11449.list textarea::-webkit-input-placeholder {
11450 color: var(--f7-input-placeholder-color);
11451}
11452.list textarea::placeholder {
11453 color: var(--f7-input-placeholder-color);
11454}
11455.list textarea.resizable {
11456 height: var(--f7-input-height);
11457}
11458.list input[type='datetime-local'] {
11459 max-width: 50vw;
11460}
11461.list input[type='time'],
11462.list input[type='date'],
11463.list input[type='month'],
11464.list input[type='datetime-local'] {
11465 line-height: var(--f7-input-height);
11466}
11467.list .item-label,
11468.list .item-floating-label {
11469 width: 100%;
11470 vertical-align: top;
11471 flex-shrink: 0;
11472 font-size: var(--f7-label-font-size);
11473 font-weight: var(--f7-label-font-weight);
11474 line-height: var(--f7-label-line-height);
11475 color: var(--f7-label-text-color);
11476 transition-duration: 200ms;
11477 transition-property: transform, color;
11478}
11479.list .item-floating-label {
11480 --label-height: calc(var(--f7-label-font-size) * var(--f7-label-line-height));
11481 transform: scale(var(--f7-floating-label-scale)) translateY(calc((var(--f7-input-height) / 2 + 50%) / var(--f7-floating-label-scale)));
11482 color: var(--f7-input-placeholder-color);
11483 width: auto;
11484 max-width: calc(100% / var(--f7-floating-label-scale));
11485 pointer-events: none;
11486 left: var(--f7-input-padding-left);
11487 transform-origin: left center;
11488}
11489.list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
11490 opacity: 0;
11491 transition-duration: 100ms;
11492}
11493.list .item-floating-label ~ .item-input-wrap input::placeholder,
11494.list .item-floating-label ~ .item-input-wrap textarea::placeholder {
11495 opacity: 0;
11496 transition-duration: 100ms;
11497}
11498.list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder, .list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
11499 opacity: 1;
11500 transition-duration: 300ms;
11501}
11502.list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
11503.list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
11504 opacity: 1;
11505 transition-duration: 300ms;
11506}
11507.list .item-input-with-value .item-floating-label {
11508 color: var(--f7-label-text-color);
11509}
11510.list .item-input-with-value .item-floating-label,
11511.list .item-input-focused .item-floating-label {
11512 transform: scale(1) translateY(0);
11513}
11514.list .item-input-wrap {
11515 width: 100%;
11516 flex-shrink: 1;
11517 position: relative;
11518}
11519.item-input .item-inner {
11520 display: flex;
11521 flex-direction: column;
11522 align-items: flex-start;
11523}
11524.item-input-error-message,
11525.input-error-message {
11526 font-size: var(--f7-input-error-font-size);
11527 line-height: var(--f7-input-error-line-height);
11528 color: var(--f7-input-error-text-color);
11529 font-weight: var(--f7-input-error-font-weight);
11530 display: none;
11531 box-sizing: border-box;
11532}
11533.item-input-info,
11534.input-info {
11535 font-size: var(--f7-input-info-font-size);
11536 line-height: var(--f7-input-info-line-height);
11537 color: var(--f7-input-info-text-color);
11538}
11539.item-input-invalid .item-input-error-message,
11540.input-invalid .item-input-error-message,
11541.item-input-invalid .input-error-message,
11542.input-invalid .input-error-message {
11543 display: block;
11544}
11545.item-input-invalid .item-input-info,
11546.input-invalid .item-input-info,
11547.item-input-invalid .input-info,
11548.input-invalid .input-info {
11549 display: none;
11550}
11551.inline-labels .item-inner,
11552.inline-label .item-inner {
11553 display: flex;
11554 align-items: center;
11555 flex-direction: row;
11556}
11557.inline-labels .item-label,
11558.inline-label .item-label,
11559.inline-labels .item-floating-label,
11560.inline-label .item-floating-label {
11561 padding-top: var(--f7-inline-label-padding-top);
11562 align-self: flex-start;
11563 width: 35%;
11564 font-size: var(--f7-inline-label-font-size);
11565 line-height: var(--f7-inline-label-line-height);
11566}
11567.inline-labels .item-label + .item-input-wrap,
11568.inline-label .item-label + .item-input-wrap,
11569.inline-labels .item-floating-label + .item-input-wrap,
11570.inline-label .item-floating-label + .item-input-wrap {
11571 margin-left: 8px;
11572}
11573.input {
11574 position: relative;
11575}
11576.input input,
11577.input select,
11578.input textarea {
11579 width: 100%;
11580}
11581.input-clear-button {
11582 opacity: 0;
11583 pointer-events: none;
11584 visibility: hidden;
11585 transition-duration: 100ms;
11586 position: absolute;
11587 top: 50%;
11588 border: none;
11589 padding: 0;
11590 margin: 0;
11591 outline: 0;
11592 z-index: 1;
11593 cursor: pointer;
11594 background: none;
11595 width: var(--f7-input-clear-button-size);
11596 height: var(--f7-input-clear-button-size);
11597 margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
11598 color: var(--f7-input-clear-button-color);
11599 right: 0;
11600}
11601.input-clear-button:after {
11602 font-family: 'framework7-core-icons';
11603 font-weight: normal;
11604 font-style: normal;
11605 line-height: 1;
11606 letter-spacing: normal;
11607 text-transform: none;
11608 white-space: nowrap;
11609 word-wrap: normal;
11610 direction: ltr;
11611 -webkit-font-smoothing: antialiased;
11612 text-rendering: optimizeLegibility;
11613 -moz-osx-font-smoothing: grayscale;
11614 font-feature-settings: 'liga';
11615 text-align: center;
11616 display: block;
11617 width: 100%;
11618 height: 100%;
11619 font-size: 20px;
11620}
11621.input-clear-button:before {
11622 position: absolute;
11623 content: '';
11624 left: 50%;
11625 top: 50%;
11626}
11627.item-input-wrap .input-clear-button {
11628 top: calc(var(--f7-input-height) / 2);
11629}
11630.input-clear-button.active-state {
11631 opacity: 0.75 !important;
11632}
11633.input-with-value ~ .input-clear-button,
11634.item-input-with-value .input-clear-button,
11635.input-with-value .input-clear-button {
11636 opacity: 1;
11637 pointer-events: auto;
11638 visibility: visible;
11639}
11640.input-dropdown-wrap,
11641.input-dropdown {
11642 position: relative;
11643}
11644.input-dropdown-wrap:before,
11645.input-dropdown:before {
11646 content: '';
11647 pointer-events: none;
11648 position: absolute;
11649 top: 50%;
11650 margin-top: -2px;
11651 width: 0;
11652 height: 0;
11653 border-left: 4px solid transparent;
11654 border-right: 4px solid transparent;
11655 border-top: 5px solid #727272;
11656 right: 6px;
11657}
11658.input-dropdown-wrap select,
11659.input-dropdown select,
11660.input-dropdown-wrap input,
11661.input-dropdown input,
11662.input-dropdown-wrap textarea,
11663.input-dropdown textarea {
11664 padding-right: calc(20px + var(--f7-input-padding-right));
11665}
11666.input-outline:after,
11667.item-input-outline .item-input-wrap:after {
11668 content: '';
11669 position: absolute;
11670 left: 0;
11671 top: 0;
11672 width: 100%;
11673 height: 100%;
11674 box-sizing: border-box;
11675 border: 1px solid var(--f7-input-outline-border-color);
11676 border-radius: var(--f7-input-outline-border-radius);
11677 transition-duration: 200ms;
11678 pointer-events: none;
11679}
11680.input-outline.input-focused:after,
11681.item-input-outline.item-input-focused .item-input-wrap:after {
11682 border-width: 2px;
11683 border-color: var(--f7-input-outline-focused-border-color, var(--f7-theme-color));
11684}
11685.input-outline.input-invalid:after,
11686.item-input-outline.item-input-invalid .item-input-wrap:after {
11687 border-width: 2px;
11688 border-color: var(--f7-input-outline-invalid-border-color, var(--f7-input-error-text-color));
11689}
11690.input-outline input,
11691.item-input-outline input,
11692.list .item-input-outline input,
11693.input-outline textarea,
11694.item-input-outline textarea,
11695.list .item-input-outline textarea,
11696.input-outline select,
11697.item-input-outline select,
11698.list .item-input-outline select {
11699 border-radius: var(--f7-input-outline-border-radius);
11700 padding-left: var(--f7-input-outline-padding-horizontal);
11701 padding-right: var(--f7-input-outline-padding-horizontal);
11702}
11703.input-outline.input-dropdown:before,
11704.item-input-outline .input-dropdown-wrap:before {
11705 right: 8px;
11706}
11707.input-outline.input-dropdown input,
11708.item-input-outline .input-dropdown-wrap input,
11709.input-outline.input-dropdown textarea,
11710.item-input-outline .input-dropdown-wrap textarea,
11711.input-outline.input-dropdown select,
11712.item-input-outline .input-dropdown-wrap select {
11713 padding-right: 20px;
11714}
11715.input-outline .input-clear-button,
11716.item-input-outline .input-clear-button {
11717 right: 8px;
11718}
11719.item-input-outline {
11720 --f7-input-height: var(--f7-input-outline-height);
11721}
11722.item-input-outline .item-inner:after {
11723 display: none !important;
11724}
11725.item-input-outline .item-label {
11726 left: var(--f7-input-outline-padding-horizontal);
11727}
11728.inline-labels .item-input-outline .item-label,
11729.inline-label .item-input-outline .item-label,
11730.item-input-outline .inline-label .item-label,
11731.item-input-outline .inline-label.item-label {
11732 left: 0;
11733}
11734.item-input-outline .item-floating-label {
11735 left: calc(var(--f7-input-outline-padding-horizontal) - 4px);
11736 padding-left: 4px;
11737 padding-right: 4px;
11738 background: var(--f7-page-bg-color);
11739 z-index: 10;
11740 margin-top: calc(-0.5 * (var(--f7-label-font-size) * var(--f7-label-line-height)));
11741}
11742.item-input-outline.item-input-with-value .item-floating-label,
11743.item-input-outline.item-input-focused .item-floating-label {
11744 transform: scale(1) translateY(50%);
11745}
11746.item-input-outline .item-input-info,
11747.item-input-outline .item-input-error-message {
11748 padding-left: var(--f7-input-outline-padding-horizontal);
11749}
11750.block-strong .item-input-outline .item-floating-label {
11751 background: var(--f7-block-strong-bg-color);
11752}
11753.list .item-input-outline .item-floating-label {
11754 background: var(--f7-list-bg-color);
11755}
11756.theme-dark option {
11757 background-color: var(--f7-page-bg-color);
11758}
11759.ios .item-label + .item-input-wrap,
11760.ios .item-floating-label + .item-input-wrap {
11761 margin-top: 0;
11762}
11763.ios .item-input-focused .item-floating-label {
11764 color: var(--f7-label-text-color);
11765}
11766.ios .item-input .item-media {
11767 align-self: flex-start;
11768}
11769.ios .item-input-wrap {
11770 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
11771 margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
11772}
11773.ios .inline-labels .item-label + .item-input-wrap,
11774.ios .inline-label .item-label + .item-input-wrap,
11775.ios .inline-labels .item-floating-label + .item-input-wrap,
11776.ios .inline-label .item-floating-label + .item-input-wrap {
11777 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
11778}
11779.ios .inline-labels .item-input-wrap,
11780.ios .inline-label .item-input-wrap {
11781 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
11782}
11783.ios .item-input-error-message,
11784.ios .item-input-info,
11785.ios .input-error-message,
11786.ios .input-info {
11787 position: relative;
11788 margin-bottom: 6px;
11789 margin-top: -8px;
11790}
11791.ios .item-input-focused .item-label,
11792.ios .item-input-focused .item-floating-label {
11793 color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
11794}
11795.ios .item-input-focused .item-inner:after {
11796 background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
11797}
11798.ios .item-input-invalid .item-label,
11799.ios .item-input-invalid .item-floating-label {
11800 color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
11801}
11802.ios .item-input-invalid .item-inner:after {
11803 background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
11804}
11805.ios .item-input-invalid input,
11806.ios .input-invalid input,
11807.ios .item-input-invalid select,
11808.ios .input-invalid select,
11809.ios .item-input-invalid textarea,
11810.ios .input-invalid textarea {
11811 color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
11812}
11813.ios .input-clear-button:after {
11814 content: 'delete_round_ios';
11815 font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
11816 line-height: 1.4;
11817}
11818.ios .input-clear-button:before {
11819 width: 44px;
11820 height: 44px;
11821 margin-left: -22px;
11822 margin-top: -22px;
11823}
11824.ios .item-input-outline .item-input-wrap,
11825.ios .input-outline .item-input-wrap {
11826 margin-top: 0;
11827 margin-bottom: 0;
11828}
11829.ios .item-input-outline .item-input-error-message,
11830.ios .input-outline .item-input-error-message,
11831.ios .item-input-outline .item-input-info,
11832.ios .input-outline .item-input-info,
11833.ios .item-input-outline .input-error-message,
11834.ios .input-outline .input-error-message,
11835.ios .item-input-outline .input-info,
11836.ios .input-outline .input-info {
11837 margin-top: 0;
11838 white-space: normal;
11839 overflow: hidden;
11840 text-overflow: ellipsis;
11841}
11842.ios .item-input-outline .item-input-info,
11843.ios .input-outline .item-input-info,
11844.ios .item-input-outline .input-info,
11845.ios .input-outline .input-info {
11846 margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
11847}
11848.ios .item-input-outline .item-input-error-message,
11849.ios .input-outline .item-input-error-message,
11850.ios .item-input-outline .input-error-message,
11851.ios .input-outline .input-error-message {
11852 margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
11853}
11854.ios .item-input-outline.item-input-with-info .item-input-wrap,
11855.ios .input-outline.item-input-with-info .item-input-wrap,
11856.ios .item-input-outline.input-with-info .item-input-wrap,
11857.ios .input-outline.input-with-info .item-input-wrap {
11858 margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
11859}
11860.ios .item-input-outline.item-input-with-error-message .item-input-wrap,
11861.ios .input-outline.item-input-with-error-message .item-input-wrap,
11862.ios .item-input-outline.input-with-error-message .item-input-wrap,
11863.ios .input-outline.input-with-error-message .item-input-wrap {
11864 margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
11865}
11866.md .item-input:not(.item-input-outline) .item-input-wrap:after,
11867.md .input:not(.input-outline):after {
11868 content: '';
11869 position: absolute;
11870 background-color: var(--f7-list-item-border-color);
11871 display: block;
11872 z-index: 15;
11873 top: auto;
11874 right: auto;
11875 bottom: 0;
11876 left: 0;
11877 height: 1px;
11878 width: 100%;
11879 transform-origin: 50% 100%;
11880 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11881}
11882.md .item-input:not(.item-input-outline) .item-input-wrap:after,
11883.md .input:not(.input-outline):after {
11884 transition-duration: 200ms;
11885}
11886.md .item-input-wrap {
11887 min-height: var(--f7-input-height);
11888}
11889.md .item-input .item-media {
11890 align-self: flex-end;
11891}
11892.md .item-input .item-inner:after {
11893 display: none !important;
11894}
11895.md .inline-labels .item-media,
11896.md .inline-label .item-media {
11897 align-self: flex-start;
11898 padding-top: 14px;
11899}
11900.md .item-input-with-error-message,
11901.md .item-input-with-info,
11902.md .input-with-error-message,
11903.md .input-with-info {
11904 padding-bottom: 20px;
11905}
11906.md .item-input-error-message,
11907.md .item-input-info,
11908.md .input-error-message,
11909.md .input-info {
11910 position: absolute;
11911 top: 100%;
11912 margin-top: 4px;
11913 white-space: nowrap;
11914 overflow: hidden;
11915 text-overflow: ellipsis;
11916 width: 100%;
11917 left: 0;
11918}
11919.md .item-input-focused .item-label,
11920.md .item-input-focused .item-floating-label {
11921 color: var(--f7-label-focused-text-color, var(--f7-theme-color));
11922}
11923.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
11924.md .input-focused:not(.input-outline):after {
11925 background: var(--f7-input-focused-border-color, var(--f7-theme-color));
11926}
11927.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
11928.md .item-input-focused:not(.item-input-outline) .item-input-wrap:after,
11929.md .input-invalid:not(.input-outline):after,
11930.md .input-focused:not(.input-outline):after {
11931 transform: scaleY(2) !important;
11932}
11933.md .item-input-invalid:not(.item-input-outline) .item-input-wrap:after,
11934.md .input-invalid:not(.input-outline):after {
11935 background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
11936}
11937.md .item-input-invalid .item-label,
11938.md .item-input-invalid .item-floating-label {
11939 color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
11940}
11941.md .item-input-invalid input,
11942.md .input-invalid input,
11943.md .item-input-invalid select,
11944.md .input-invalid select,
11945.md .item-input-invalid textarea,
11946.md .input-invalid textarea {
11947 color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
11948}
11949.md .input-clear-button:after {
11950 font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
11951 content: 'delete_round_md';
11952 line-height: 1.2;
11953}
11954.md .input-clear-button:before {
11955 width: 48px;
11956 height: 48px;
11957 margin-left: -24px;
11958 margin-top: -24px;
11959}
11960.aurora .item-label + .item-input-wrap,
11961.aurora .item-floating-label + .item-input-wrap {
11962 margin-top: 0;
11963}
11964.aurora .item-input-focused .item-floating-label {
11965 color: var(--f7-label-text-color);
11966}
11967.aurora .item-input .item-media {
11968 align-self: flex-start;
11969}
11970.aurora .item-input-error-message,
11971.aurora .item-input-info,
11972.aurora .input-error-message,
11973.aurora .input-info {
11974 position: relative;
11975}
11976.aurora .item-input-focused .item-label,
11977.aurora .item-input-focused .item-floating-label {
11978 color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
11979}
11980.aurora .item-input-focused .item-inner:after {
11981 background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
11982}
11983.aurora .item-input-invalid .item-label,
11984.aurora .item-input-invalid .item-floating-label {
11985 color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
11986}
11987.aurora .item-input-invalid .item-inner:after {
11988 background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
11989}
11990.aurora .item-input-invalid input,
11991.aurora .input-invalid input,
11992.aurora .item-input-invalid select,
11993.aurora .input-invalid select,
11994.aurora .item-input-invalid textarea,
11995.aurora .input-invalid textarea {
11996 color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
11997}
11998.aurora .input-clear-button:after {
11999 content: 'delete_round_ios';
12000 font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
12001 line-height: 1.4;
12002}
12003.aurora .input-clear-button:before {
12004 width: 28px;
12005 height: 28px;
12006 margin-left: -14px;
12007 margin-top: -14px;
12008}
12009.aurora .item-input-outline .item-input-wrap,
12010.aurora .input-outline .item-input-wrap {
12011 margin-top: 0;
12012 margin-bottom: 0;
12013}
12014.aurora .item-input-outline .item-input-error-message,
12015.aurora .input-outline .item-input-error-message,
12016.aurora .item-input-outline .item-input-info,
12017.aurora .input-outline .item-input-info,
12018.aurora .item-input-outline .input-error-message,
12019.aurora .input-outline .input-error-message,
12020.aurora .item-input-outline .input-info,
12021.aurora .input-outline .input-info {
12022 margin-top: 0;
12023 white-space: normal;
12024 overflow: hidden;
12025 text-overflow: ellipsis;
12026}
12027.aurora .item-input-outline .item-input-info,
12028.aurora .input-outline .item-input-info,
12029.aurora .item-input-outline .input-info,
12030.aurora .input-outline .input-info {
12031 margin-bottom: calc(-1 * var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
12032}
12033.aurora .item-input-outline .item-input-error-message,
12034.aurora .input-outline .item-input-error-message,
12035.aurora .item-input-outline .input-error-message,
12036.aurora .input-outline .input-error-message {
12037 margin-bottom: calc(-1 * var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
12038}
12039.aurora .item-input-outline.item-input-with-info .item-input-wrap,
12040.aurora .input-outline.item-input-with-info .item-input-wrap,
12041.aurora .item-input-outline.input-with-info .item-input-wrap,
12042.aurora .input-outline.input-with-info .item-input-wrap {
12043 margin-bottom: calc(var(--f7-input-info-font-size) * var(--f7-input-info-line-height));
12044}
12045.aurora .item-input-outline.item-input-with-error-message .item-input-wrap,
12046.aurora .input-outline.item-input-with-error-message .item-input-wrap,
12047.aurora .item-input-outline.input-with-error-message .item-input-wrap,
12048.aurora .input-outline.input-with-error-message .item-input-wrap {
12049 margin-bottom: calc(var(--f7-input-error-font-size) * var(--f7-input-error-line-height));
12050}
12051/* === Checkbox === */
12052:root {
12053 /* --f7-checkbox-active-color: var(--f7-theme-color); */
12054 --f7-checkbox-icon-color: #fff;
12055}
12056:root .theme-dark,
12057:root.theme-dark {
12058 --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
12059}
12060.ios {
12061 --f7-checkbox-size: 22px;
12062 --f7-checkbox-border-radius: 50%;
12063 --f7-checkbox-border-width: 1px;
12064 --f7-checkbox-extra-margin: 0px;
12065 --f7-checkbox-inactive-color: #c7c7cc;
12066}
12067.md {
12068 --f7-checkbox-size: 18px;
12069 --f7-checkbox-border-radius: 2px;
12070 --f7-checkbox-border-width: 2px;
12071 --f7-checkbox-extra-margin: 0px;
12072 --f7-checkbox-inactive-color: #6d6d6d;
12073}
12074.aurora {
12075 --f7-checkbox-size: 16px;
12076 --f7-checkbox-border-radius: 4px;
12077 --f7-checkbox-border-width: 1px;
12078 --f7-checkbox-extra-margin: 0px;
12079 --f7-checkbox-inactive-color: #888;
12080}
12081.checkbox {
12082 position: relative;
12083 display: inline-block;
12084 vertical-align: middle;
12085 z-index: 1;
12086 background-color: transparent;
12087 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
12088}
12089.icon-checkbox,
12090.checkbox i {
12091 flex-shrink: 0;
12092 border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
12093 width: var(--f7-checkbox-size);
12094 height: var(--f7-checkbox-size);
12095 border-radius: var(--f7-checkbox-border-radius);
12096 box-sizing: border-box;
12097 position: relative;
12098 display: block;
12099}
12100.icon-checkbox:after,
12101.checkbox i:after {
12102 font-family: 'framework7-core-icons';
12103 font-weight: normal;
12104 font-style: normal;
12105 line-height: 1;
12106 letter-spacing: normal;
12107 text-transform: none;
12108 white-space: nowrap;
12109 word-wrap: normal;
12110 direction: ltr;
12111 -webkit-font-smoothing: antialiased;
12112 text-rendering: optimizeLegibility;
12113 -moz-osx-font-smoothing: grayscale;
12114 font-feature-settings: 'liga';
12115 text-align: center;
12116 display: block;
12117 width: 100%;
12118 height: 100%;
12119 font-size: 20px;
12120 width: var(--f7-checkbox-size);
12121 height: var(--f7-checkbox-size);
12122 line-height: var(--f7-checkbox-size);
12123 top: calc(0px - var(--f7-checkbox-border-width));
12124 opacity: 0;
12125 color: var(--f7-checkbox-icon-color);
12126 position: relative;
12127 transition-property: opacity;
12128 left: calc(0px - var(--f7-checkbox-border-width));
12129}
12130label.item-checkbox input[type='checkbox']:not(:checked) ~ .icon-checkbox:after,
12131label.item-checkbox input[type='checkbox']:not(:checked) ~ * .icon-checkbox:after,
12132.checkbox input[type='checkbox']:not(:checked) ~ i:after {
12133 font-size: 0;
12134}
12135label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox,
12136label.item-checkbox input[type='checkbox']:checked ~ * .icon-checkbox,
12137.checkbox input[type='checkbox']:checked ~ i,
12138label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox,
12139label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox,
12140.checkbox input[type='checkbox']:indeterminate ~ i {
12141 border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
12142 background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
12143}
12144label.item-checkbox input[type='checkbox']:checked ~ .icon-checkbox:after,
12145label.item-checkbox input[type='checkbox']:checked ~ * .icon-checkbox:after,
12146.checkbox input[type='checkbox']:checked ~ i:after,
12147label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox:after,
12148label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox:after,
12149.checkbox input[type='checkbox']:indeterminate ~ i:after {
12150 opacity: 1;
12151}
12152label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox:after,
12153label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox:after,
12154.checkbox input[type='checkbox']:indeterminate ~ i:after {
12155 font-size: 0;
12156 content: '';
12157 position: absolute;
12158 top: 50%;
12159 width: 70%;
12160 background: #fff;
12161 height: 2px;
12162 border-radius: 2px;
12163 margin-top: -1px;
12164 transition: 0ms;
12165 left: 15%;
12166}
12167label.item-checkbox,
12168.checkbox {
12169 cursor: pointer;
12170}
12171label.item-checkbox input[type='checkbox'],
12172.checkbox input[type='checkbox'],
12173label.item-checkbox input[type='radio'],
12174.checkbox input[type='radio'] {
12175 display: none;
12176}
12177label.item-checkbox {
12178 transition-duration: 300ms;
12179}
12180label.item-checkbox .item-content .item-media,
12181label.item-checkbox.item-content .item-media {
12182 align-self: center;
12183}
12184label.item-checkbox > .icon-checkbox {
12185 margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
12186}
12187label.item-checkbox.active-state {
12188 background-color: var(--f7-list-link-pressed-bg-color);
12189}
12190label.item-checkbox.active-state:after {
12191 background-color: transparent;
12192}
12193label.item-checkbox.disabled,
12194.disabled label.item-checkbox {
12195 opacity: 0.55;
12196 pointer-events: none;
12197 opacity: 0.55 !important;
12198 pointer-events: none !important;
12199}
12200.ios .icon-checkbox:after,
12201.ios .checkbox i:after {
12202 content: 'checkbox_ios';
12203 font-size: 21px;
12204}
12205.ios label.item-checkbox.active-state {
12206 transition-duration: 0ms;
12207}
12208.ios label.item-checkbox input[type='checkbox']:indeterminate ~ .icon-checkbox:after,
12209.ios label.item-checkbox input[type='checkbox']:indeterminate ~ * .icon-checkbox:after,
12210.ios .checkbox input[type='checkbox']:indeterminate ~ i:after {
12211 height: 1px;
12212 margin-top: 0px;
12213}
12214.md .icon-checkbox,
12215.md .checkbox i {
12216 transition-duration: 200ms;
12217}
12218.md .icon-checkbox:after,
12219.md .checkbox i:after {
12220 content: 'checkbox_md';
12221 transition-duration: 200ms;
12222 font-size: 15px;
12223}
12224.md label.item-checkbox {
12225 position: relative;
12226 overflow: hidden;
12227 z-index: 0;
12228}
12229.aurora .icon-checkbox,
12230.aurora .checkbox i {
12231 transition-duration: 150ms;
12232}
12233.aurora .icon-checkbox:after,
12234.aurora .checkbox i:after {
12235 content: 'checkbox_aurora';
12236 transition-duration: 150ms;
12237 font-size: 21px;
12238}
12239.aurora .icon-checkbox:before,
12240.aurora .checkbox i:before {
12241 content: '';
12242 position: absolute;
12243 left: 0;
12244 top: 0;
12245 width: 100%;
12246 height: 100%;
12247 background: rgba(0, 0, 0, 0.1);
12248 opacity: 0;
12249 transition-duration: 150ms;
12250}
12251.aurora .checkbox.active-state i:before {
12252 opacity: 1;
12253}
12254.aurora label.item-checkbox {
12255 position: relative;
12256 overflow: hidden;
12257 z-index: 0;
12258}
12259/* === Radio === */
12260:root {
12261 /*
12262 --f7-radio-active-color: var(--f7-theme-color);
12263 */
12264 --f7-radio-border-radius: 50%;
12265}
12266:root .theme-dark,
12267:root.theme-dark {
12268 --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
12269}
12270.ios {
12271 --f7-radio-size: 22px;
12272 --f7-radio-border-width: 1px;
12273 --f7-radio-extra-margin: 0px;
12274 --f7-radio-inactive-color: #c7c7cc;
12275}
12276.md {
12277 --f7-radio-size: 20px;
12278 --f7-radio-border-width: 2px;
12279 --f7-radio-extra-margin: 0px;
12280 --f7-radio-inactive-color: #6d6d6d;
12281}
12282.aurora {
12283 --f7-radio-size: 16px;
12284 --f7-radio-border-width: 1px;
12285 --f7-radio-extra-margin: 0px;
12286 --f7-radio-inactive-color: #888;
12287}
12288.radio {
12289 position: relative;
12290 display: inline-block;
12291 vertical-align: middle;
12292 z-index: 1;
12293 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
12294}
12295.icon-radio {
12296 width: var(--f7-radio-size);
12297 height: var(--f7-radio-size);
12298 border-radius: var(--f7-radio-border-radius);
12299 position: relative;
12300 box-sizing: border-box;
12301 display: block;
12302 flex-shrink: 0;
12303}
12304.radio .icon-radio,
12305.md .icon-radio,
12306.aurora .icon-radio {
12307 border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
12308}
12309label.item-radio,
12310.radio {
12311 cursor: pointer;
12312}
12313label.item-radio input[type='checkbox'],
12314.radio input[type='checkbox'],
12315label.item-radio input[type='radio'],
12316.radio input[type='radio'] {
12317 display: none;
12318}
12319label.item-radio {
12320 transition-duration: 300ms;
12321}
12322label.item-radio .item-content .item-media,
12323label.item-radio.item-content .item-media {
12324 align-self: center;
12325}
12326label.item-radio.active-state {
12327 background-color: var(--f7-list-link-pressed-bg-color);
12328}
12329label.item-radio.active-state:after {
12330 background-color: transparent;
12331}
12332label.item-radio.disabled,
12333.disabled label.item-radio {
12334 opacity: 0.55;
12335 pointer-events: none;
12336 opacity: 0.55 !important;
12337 pointer-events: none !important;
12338}
12339.ios .icon-radio:after {
12340 font-family: 'framework7-core-icons';
12341 font-weight: normal;
12342 font-style: normal;
12343 line-height: 1;
12344 letter-spacing: normal;
12345 text-transform: none;
12346 white-space: nowrap;
12347 word-wrap: normal;
12348 direction: ltr;
12349 -webkit-font-smoothing: antialiased;
12350 text-rendering: optimizeLegibility;
12351 -moz-osx-font-smoothing: grayscale;
12352 font-feature-settings: 'liga';
12353 text-align: center;
12354 display: block;
12355 width: 100%;
12356 height: 100%;
12357 width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
12358 height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
12359 line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
12360 font-size: 20px;
12361 content: 'radio_ios';
12362 color: var(--f7-radio-active-color, var(--f7-theme-color));
12363 opacity: 0;
12364}
12365.ios label.item-radio input[type='radio']:checked ~ .icon-radio:after,
12366.ios label.item-radio input[type='radio']:checked ~ * .icon-radio:after,
12367.ios .radio input[type='radio']:checked ~ .icon-radio:after {
12368 opacity: 1;
12369}
12370.ios .radio input[type='radio']:checked ~ .icon-radio {
12371 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
12372}
12373.ios label.item-radio:not(.item-radio-icon-start) input[type='radio'] ~ .icon-radio {
12374 position: absolute;
12375 top: 50%;
12376 margin-top: -11px;
12377 right: calc(var(--f7-safe-area-right) + 10px);
12378}
12379.ios label.item-radio:not(.item-radio-icon-start) .item-inner {
12380 padding-right: calc(var(--f7-safe-area-right) + 36px);
12381}
12382.ios label.item-radio-icon-start > .icon-radio {
12383 margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
12384}
12385.ios label.item-radio.active-state {
12386 transition-duration: 0ms;
12387}
12388.md .icon-radio {
12389 transition-duration: 200ms;
12390}
12391.md .icon-radio:after {
12392 content: '';
12393 position: absolute;
12394 width: 10px;
12395 height: 10px;
12396 left: 50%;
12397 top: 50%;
12398 margin-left: -5px;
12399 margin-top: -5px;
12400 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
12401 border-radius: 50%;
12402 transform: scale(0);
12403 transition-duration: 200ms;
12404}
12405.md label.item-radio input[type='radio']:checked ~ .icon-radio,
12406.md label.item-radio input[type='radio']:checked ~ * .icon-radio,
12407.md .radio input[type='radio']:checked ~ .icon-radio {
12408 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
12409}
12410.md label.item-radio input[type='radio']:checked ~ .icon-radio:after,
12411.md label.item-radio input[type='radio']:checked ~ * .icon-radio:after,
12412.md .radio input[type='radio']:checked ~ .icon-radio:after {
12413 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
12414 transform: scale(1);
12415}
12416.md label.item-radio {
12417 position: relative;
12418 overflow: hidden;
12419 z-index: 0;
12420}
12421.md label.item-radio:not(.item-radio-icon-end) > .icon-radio {
12422 margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
12423}
12424.md label.item-radio-icon-end input[type='radio'] ~ .icon-radio {
12425 position: absolute;
12426 top: 50%;
12427 margin-top: -10px;
12428 right: calc(var(--f7-safe-area-right) + 16px);
12429}
12430.md label.item-radio-icon-end .item-inner {
12431 padding-right: calc(var(--f7-safe-area-right) + 52px);
12432}
12433.aurora .icon-radio {
12434 transition-duration: 150ms;
12435 overflow: hidden;
12436}
12437.aurora .icon-radio:after {
12438 content: '';
12439 position: absolute;
12440 width: 6px;
12441 height: 6px;
12442 left: 50%;
12443 top: 50%;
12444 margin-left: -3px;
12445 margin-top: -3px;
12446 background-color: #fff;
12447 border-radius: 50%;
12448 transform: scale(0);
12449 transition-duration: 150ms;
12450}
12451.aurora .icon-radio:before {
12452 content: '';
12453 position: absolute;
12454 left: 0;
12455 top: 0;
12456 width: 100%;
12457 height: 100%;
12458 background: rgba(0, 0, 0, 0.1);
12459 opacity: 0;
12460 transition-duration: 150ms;
12461}
12462.aurora .radio.active-state i:before {
12463 opacity: 1;
12464}
12465.aurora label.item-radio input[type='radio']:checked ~ .icon-radio,
12466.aurora label.item-radio input[type='radio']:checked ~ * .icon-radio,
12467.aurora .radio input[type='radio']:checked ~ .icon-radio {
12468 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
12469 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
12470}
12471.aurora label.item-radio input[type='radio']:checked ~ .icon-radio:after,
12472.aurora label.item-radio input[type='radio']:checked ~ * .icon-radio:after,
12473.aurora .radio input[type='radio']:checked ~ .icon-radio:after {
12474 transform: scale(1);
12475}
12476.aurora label.item-radio {
12477 position: relative;
12478 overflow: hidden;
12479 z-index: 0;
12480}
12481.aurora label.item-radio:not(.item-radio-icon-end) > .icon-radio {
12482 margin-right: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
12483}
12484.aurora label.item-radio-icon-end input[type='radio'] ~ .icon-radio {
12485 position: absolute;
12486 top: 50%;
12487 margin-top: -8px;
12488 right: calc(var(--f7-safe-area-right) + 16px);
12489}
12490.aurora label.item-radio-icon-end .item-inner {
12491 padding-right: calc(var(--f7-safe-area-right) + 48px);
12492}
12493/* === Toggle === */
12494:root {
12495 --f7-toggle-handle-color: #fff;
12496}
12497:root .theme-dark,
12498:root.theme-dark {
12499 --f7-toggle-inactive-color: #555;
12500}
12501.ios {
12502 --f7-toggle-width: 52px;
12503 --f7-toggle-height: 32px;
12504 --f7-toggle-border-color: #e5e5e5;
12505 --f7-toggle-inactive-color: #fff;
12506}
12507.ios .theme-dark,
12508.ios.theme-dark {
12509 --f7-toggle-border-color: #555;
12510}
12511.md {
12512 --f7-toggle-width: 36px;
12513 --f7-toggle-height: 14px;
12514 --f7-toggle-inactive-color: #b0afaf;
12515}
12516.aurora {
12517 --f7-toggle-width: 40px;
12518 --f7-toggle-height: 20px;
12519 --f7-toggle-inactive-color: #aaa;
12520}
12521.toggle,
12522.toggle-icon {
12523 width: var(--f7-toggle-width);
12524 height: var(--f7-toggle-height);
12525 border-radius: var(--f7-toggle-height);
12526}
12527.toggle {
12528 display: inline-block;
12529 vertical-align: middle;
12530 position: relative;
12531 box-sizing: border-box;
12532 align-self: center;
12533 -webkit-user-select: none;
12534 -moz-user-select: none;
12535 user-select: none;
12536}
12537.toggle input[type='checkbox'] {
12538 display: none;
12539}
12540.toggle input[disabled] ~ .toggle-icon {
12541 pointer-events: none;
12542}
12543.toggle-icon {
12544 z-index: 0;
12545 margin: 0;
12546 padding: 0;
12547 -webkit-appearance: none;
12548 -moz-appearance: none;
12549 appearance: none;
12550 border: none;
12551 position: relative;
12552 transition: 300ms;
12553 box-sizing: border-box;
12554 display: block;
12555 cursor: pointer;
12556}
12557.toggle-icon:before,
12558.toggle-icon:after {
12559 content: '';
12560}
12561.toggle-icon:after {
12562 background: var(--f7-toggle-handle-color);
12563 position: absolute;
12564 z-index: 2;
12565 transform: translateX(0px);
12566 transition-duration: 300ms;
12567}
12568.ios .toggle input[type='checkbox']:checked + .toggle-icon {
12569 background: var(--f7-toggle-active-color, var(--f7-theme-color));
12570}
12571.ios .toggle input[type='checkbox']:checked + .toggle-icon:before {
12572 transform: scale(0);
12573}
12574.ios .toggle input[type='checkbox']:checked + .toggle-icon:after {
12575 transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
12576}
12577.ios .toggle-icon {
12578 background: var(--f7-toggle-border-color);
12579}
12580.ios .toggle-icon:before {
12581 position: absolute;
12582 left: 2px;
12583 top: 2px;
12584 width: calc(var(--f7-toggle-width) - 4px);
12585 height: calc(var(--f7-toggle-height) - 4px);
12586 border-radius: var(--f7-toggle-height);
12587 box-sizing: border-box;
12588 background: var(--f7-toggle-inactive-color);
12589 z-index: 1;
12590 transition-duration: 300ms;
12591 transform: scale(1);
12592}
12593.ios .toggle-icon:after {
12594 height: calc(var(--f7-toggle-height) - 4px);
12595 width: calc(var(--f7-toggle-height) - 4px);
12596 top: 2px;
12597 left: 2px;
12598 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
12599 border-radius: calc(var(--f7-toggle-height) - 4px);
12600}
12601.ios .toggle-active-state input[type='checkbox']:not(:checked) + .toggle-icon:before {
12602 transform: scale(0);
12603}
12604.ios .toggle-active-state input[type='checkbox'] + .toggle-icon:after {
12605 width: calc(var(--f7-toggle-height) + 4px);
12606}
12607.ios .toggle-active-state input[type='checkbox']:checked + .toggle-icon:after {
12608 transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
12609}
12610.md .toggle input[type='checkbox']:checked + .toggle-icon {
12611 background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
12612}
12613.md .toggle input[type='checkbox']:checked + .toggle-icon:after {
12614 transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));
12615 background: var(--f7-toggle-active-color, var(--f7-theme-color));
12616}
12617.md .toggle-icon {
12618 background: var(--f7-toggle-inactive-color);
12619}
12620.md .toggle-icon:after {
12621 height: calc(var(--f7-toggle-height) + 6px);
12622 width: calc(var(--f7-toggle-height) + 6px);
12623 top: -3px;
12624 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
12625 border-radius: var(--f7-toggle-height);
12626 left: 0;
12627}
12628.aurora .toggle input[type='checkbox']:checked + .toggle-icon {
12629 background: var(--f7-toggle-active-color, var(--f7-theme-color));
12630}
12631.aurora .toggle input[type='checkbox']:checked + .toggle-icon:after {
12632 transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
12633}
12634.aurora .toggle-icon {
12635 background: var(--f7-toggle-inactive-color);
12636}
12637.aurora .toggle-icon:after {
12638 height: calc(var(--f7-toggle-height) - 4px);
12639 width: calc(var(--f7-toggle-height) - 4px);
12640 top: 2px;
12641 left: 2px;
12642 border-radius: calc(var(--f7-toggle-height) - 4px);
12643}
12644/* === Range Slider === */
12645:root {
12646 /*
12647 --f7-range-bar-active-bg-color: var(--f7-theme-color);
12648 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
12649 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
12650 */
12651 --f7-range-scale-step-height: 5px;
12652 --f7-range-scale-text-color: #666;
12653 --f7-range-scale-substep-width: 1px;
12654 --f7-range-scale-substep-height: 4px;
12655}
12656.ios {
12657 --f7-range-size: 28px;
12658 --f7-range-bar-bg-color: #b7b8b7;
12659 --f7-range-bar-size: 1px;
12660 --f7-range-bar-border-radius: 2px;
12661 --f7-range-knob-size: 28px;
12662 --f7-range-knob-color: #fff;
12663 --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
12664 --f7-range-label-size: 20px;
12665 --f7-range-label-text-color: #000;
12666 --f7-range-label-bg-color: #fff;
12667 --f7-range-label-font-size: 12px;
12668 --f7-range-label-font-weight: normal;
12669 --f7-range-label-border-radius: 5px;
12670 --f7-range-label-padding: 0px;
12671 --f7-range-scale-step-width: 1px;
12672 --f7-range-scale-font-size: 12px;
12673 --f7-range-scale-font-weight: 400;
12674 --f7-range-scale-label-offset: 4px;
12675}
12676.md {
12677 --f7-range-size: 20px;
12678 --f7-range-bar-bg-color: #b9b9b9;
12679 --f7-range-bar-size: 2px;
12680 --f7-range-bar-border-radius: 0px;
12681 --f7-range-knob-size: 12px;
12682 /*
12683 --f7-range-knob-color: var(--f7-theme-color);
12684 */
12685 --f7-range-knob-box-shadow: none;
12686 --f7-range-label-size: 26px;
12687 --f7-range-label-font-weight: normal;
12688 --f7-range-label-text-color: #fff;
12689 /*
12690 --f7-range-label-bg-color: var(--f7-theme-color);
12691 */
12692 --f7-range-label-font-size: 10px;
12693 --f7-range-label-border-radius: 50%;
12694 --f7-range-label-padding: 0px;
12695 --f7-range-scale-step-width: 2px;
12696 --f7-range-scale-font-size: 12px;
12697 --f7-range-scale-font-weight: 400;
12698 --f7-range-scale-label-offset: 4px;
12699}
12700.aurora {
12701 --f7-range-size: 20px;
12702 --f7-range-bar-bg-color: #c7c7c7;
12703 --f7-range-bar-size: 2px;
12704 --f7-range-bar-border-radius: 2px;
12705 --f7-range-knob-size: 16px;
12706 /*
12707 --f7-range-knob-color: var(--f7-theme-color);
12708 */
12709 --f7-range-knob-box-shadow: none;
12710 --f7-range-label-size: 20px;
12711 --f7-range-label-text-color: #fff;
12712 /*
12713 --f7-range-label-bg-color: var(--f7-theme-color);
12714 */
12715 --f7-range-label-font-size: 10px;
12716 --f7-range-label-font-weight: 600;
12717 --f7-range-label-border-radius: 4px;
12718 --f7-range-label-padding: 0px 4px;
12719 --f7-range-scale-step-width: 2px;
12720 --f7-range-scale-font-size: 11px;
12721 --f7-range-scale-font-weight: 500;
12722 --f7-range-scale-label-offset: 2px;
12723}
12724.range-slider {
12725 display: block;
12726 position: relative;
12727 align-self: center;
12728 cursor: pointer;
12729 -webkit-user-select: none;
12730 -moz-user-select: none;
12731 user-select: none;
12732}
12733.range-slider input[type='range'] {
12734 display: none;
12735}
12736.range-slider.range-slider-horizontal {
12737 width: 100%;
12738 height: var(--f7-range-size);
12739 touch-action: pan-y;
12740}
12741.range-slider.range-slider-vertical {
12742 height: 100%;
12743 width: var(--f7-range-size);
12744 touch-action: pan-x;
12745}
12746.range-bar {
12747 position: absolute;
12748 overflow: hidden;
12749 background: var(--f7-range-bar-bg-color);
12750 border-radius: var(--f7-range-bar-border-radius);
12751}
12752.range-slider-vertical .range-bar {
12753 left: 50%;
12754 top: 0;
12755 height: 100%;
12756 width: var(--f7-range-bar-size);
12757 margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
12758}
12759.range-slider-horizontal .range-bar {
12760 left: 0;
12761 top: 50%;
12762 width: 100%;
12763 height: var(--f7-range-bar-size);
12764 margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
12765}
12766.range-bar-active {
12767 position: absolute;
12768 background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
12769}
12770.range-slider-horizontal .range-bar-active {
12771 left: 0;
12772 top: 0;
12773 height: 100%;
12774}
12775.range-slider-vertical .range-bar-active {
12776 left: 0;
12777 bottom: 0;
12778 width: 100%;
12779}
12780.range-slider-vertical-reversed .range-bar-active {
12781 top: 0;
12782 bottom: auto;
12783}
12784.range-knob-wrap {
12785 z-index: 20;
12786 position: absolute;
12787 height: var(--f7-range-knob-size);
12788 width: var(--f7-range-knob-size);
12789}
12790.range-slider-horizontal .range-knob-wrap {
12791 top: 50%;
12792 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
12793 margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
12794 left: 0;
12795}
12796.range-slider-vertical .range-knob-wrap {
12797 left: 50%;
12798 margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
12799 bottom: 0;
12800 margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
12801}
12802.range-slider-vertical-reversed .range-knob-wrap {
12803 bottom: auto;
12804 top: 0;
12805 margin-bottom: 0;
12806 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
12807}
12808.range-knob {
12809 box-sizing: border-box;
12810 border-radius: 50%;
12811 position: absolute;
12812 left: 0;
12813 top: 0;
12814 width: 100%;
12815 height: 100%;
12816 z-index: 1;
12817 background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
12818 box-shadow: var(--f7-range-knob-box-shadow);
12819}
12820.range-knob:after {
12821 content: '';
12822 position: absolute;
12823 left: 50%;
12824 top: 50%;
12825 width: 44px;
12826 height: 44px;
12827 margin-left: -22px;
12828 margin-top: -22px;
12829}
12830.range-knob-label {
12831 position: absolute;
12832 left: 50%;
12833 bottom: 100%;
12834 text-align: center;
12835 transition-duration: 120ms;
12836 transition-property: transform;
12837 box-sizing: border-box;
12838 transform: translateY(100%) scale(0);
12839 height: var(--f7-range-label-size);
12840 line-height: var(--f7-range-label-size);
12841 min-width: var(--f7-range-label-size);
12842 color: var(--f7-range-label-text-color);
12843 background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
12844 font-size: var(--f7-range-label-font-size);
12845 font-weight: var(--f7-range-label-font-weight);
12846 border-radius: var(--f7-range-label-border-radius);
12847 padding: var(--f7-range-label-padding);
12848}
12849.range-knob-active-state .range-knob-label {
12850 transform: translateY(0%) scale(1);
12851}
12852.range-scale {
12853 position: absolute;
12854}
12855.range-slider-horizontal .range-scale {
12856 top: 50%;
12857 left: 0;
12858 width: 100%;
12859 margin-top: calc(var(--f7-range-bar-size) / 2);
12860}
12861.range-slider-vertical .range-scale {
12862 right: 50%;
12863 top: 0;
12864 height: 100%;
12865 margin-right: calc(var(--f7-range-bar-size) / 2);
12866}
12867.range-scale-step {
12868 position: absolute;
12869 box-sizing: border-box;
12870 display: flex;
12871 font-size: var(--f7-range-scale-font-size);
12872 font-weight: var(--f7-range-scale-font-weight);
12873 color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
12874 line-height: 1;
12875}
12876.range-scale-step:before {
12877 content: '';
12878 position: absolute;
12879 background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
12880}
12881.range-slider-horizontal .range-scale-step {
12882 justify-content: center;
12883 align-items: flex-start;
12884 width: var(--f7-range-scale-step-width);
12885 height: var(--f7-range-scale-step-height);
12886 padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
12887 top: 0;
12888 margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2);
12889}
12890.range-slider-horizontal .range-scale-step:before {
12891 left: 0;
12892 top: 0;
12893 width: 100%;
12894 height: var(--f7-range-scale-step-height);
12895}
12896.range-slider-horizontal .range-scale-step:first-child {
12897 margin-left: 0;
12898}
12899.range-slider-horizontal .range-scale-step:last-child {
12900 margin-left: calc(-1 * var(--f7-range-scale-step-width));
12901}
12902.range-slider-vertical .range-scale-step {
12903 line-height: 1;
12904 justify-content: flex-end;
12905 align-items: center;
12906 height: var(--f7-range-scale-step-width);
12907 width: var(--f7-range-scale-step-height);
12908 padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
12909 right: 0;
12910 margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
12911}
12912.range-slider-vertical .range-scale-step:first-child {
12913 margin-bottom: 0;
12914}
12915.range-slider-vertical .range-scale-step:last-child {
12916 margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
12917}
12918.range-slider-vertical .range-scale-step:before {
12919 right: 0;
12920 top: 0;
12921 height: 100%;
12922 width: var(--f7-range-scale-step-height);
12923}
12924.range-scale-substep {
12925 --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
12926 --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
12927 --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
12928}
12929.ios .range-knob-label {
12930 margin-bottom: 6px;
12931 transform: translateX(-50%) translateY(100%) scale(0);
12932}
12933.ios .range-knob-active-state .range-knob-label {
12934 transform: translateX(-50%) translateY(0%) scale(1);
12935}
12936.md .range-knob {
12937 transition-duration: 200ms;
12938 transition-property: transform, background-color;
12939}
12940.md .range-knob-active-state .range-knob {
12941 transform: scale(1.5);
12942}
12943.md .range-slider-min:not(.range-slider-dual) .range-knob {
12944 background: #fff !important;
12945 border: 2px solid var(--f7-range-bar-bg-color);
12946}
12947.md .range-knob-label {
12948 width: var(--f7-range-label-size);
12949 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
12950 margin-bottom: 8px;
12951}
12952.md .range-knob-label:before {
12953 content: '';
12954 left: 50%;
12955 top: 0px;
12956 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
12957 position: absolute;
12958 z-index: -1;
12959 width: var(--f7-range-label-size);
12960 height: var(--f7-range-label-size);
12961 background: var(--f7-range-label-bg-color, var(--f7-theme-color));
12962 transform: rotate(-45deg);
12963 border-radius: 50% 50% 50% 0;
12964}
12965.md .range-knob-active-state .range-knob-label {
12966 transform: translateY(0%) scale(1);
12967}
12968.md .range-slider-label .range-knob-active-state .range-knob {
12969 transform: scale(0);
12970}
12971.aurora .range-knob-label {
12972 margin-bottom: 6px;
12973 transform: translateX(-50%) translateY(100%) scale(0);
12974}
12975.aurora .range-knob-active-state .range-knob-label {
12976 transform: translateX(-50%) translateY(0%) scale(1);
12977}
12978/* === Stepper === */
12979:root {
12980 /*
12981 --f7-stepper-button-text-color: var(--f7-theme-color);
12982 --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
12983 --f7-stepper-value-text-color: var(--f7-theme-color);
12984 */
12985 --f7-stepper-fill-button-text-color: #fff;
12986 /*
12987 --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
12988 */
12989 --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
12990 --f7-stepper-value-font-weight: 500;
12991 --f7-stepper-border-width: 2px;
12992}
12993.ios {
12994 --f7-stepper-height: 28px;
12995 --f7-stepper-border-radius: 5px;
12996 /*
12997 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
12998 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
12999 */
13000 --f7-stepper-large-height: 44px;
13001 --f7-stepper-small-height: 26px;
13002 --f7-stepper-small-border-width: 2px;
13003 --f7-stepper-value-font-size: 17px;
13004}
13005.md {
13006 --f7-stepper-height: 36px;
13007 --f7-stepper-border-radius: 4px;
13008 /*
13009 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
13010 */
13011 --f7-stepper-large-height: 48px;
13012 --f7-stepper-small-border-width: 2px;
13013 --f7-stepper-small-height: 28px;
13014 --f7-stepper-value-font-size: 14px;
13015}
13016.aurora {
13017 /*
13018 --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
13019 --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
13020 */
13021 --f7-stepper-height: 28px;
13022 --f7-stepper-border-radius: 4px;
13023 /*
13024 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
13025 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
13026 */
13027 --f7-stepper-large-height: 34px;
13028 --f7-stepper-small-border-width: 1px;
13029 --f7-stepper-small-height: 22px;
13030 --f7-stepper-value-font-size: 14px;
13031}
13032.stepper {
13033 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
13034 display: inline-flex;
13035 align-items: stretch;
13036 height: var(--f7-stepper-height);
13037 border-radius: var(--f7-stepper-border-radius);
13038}
13039.stepper-button,
13040.stepper-button-minus,
13041.stepper-button-plus {
13042 background-color: var(--f7-stepper-button-bg-color);
13043 width: 40px;
13044 border-radius: var(--f7-stepper-border-radius);
13045 border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
13046 color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
13047 line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
13048 text-align: center;
13049 display: flex;
13050 justify-content: center;
13051 align-content: center;
13052 align-items: center;
13053 flex-shrink: 0;
13054 box-sizing: border-box;
13055 position: relative;
13056 cursor: pointer;
13057}
13058.stepper-button.active-state,
13059.stepper-button-minus.active-state,
13060.stepper-button-plus.active-state {
13061 background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
13062 color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
13063}
13064.stepper-button:first-child,
13065.stepper-button-minus:first-child,
13066.stepper-button-plus:first-child {
13067 border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
13068}
13069.stepper-button:last-child,
13070.stepper-button-minus:last-child,
13071.stepper-button-plus:last-child {
13072 border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
13073}
13074.stepper-button .icon,
13075.stepper-button-minus .icon,
13076.stepper-button-plus .icon {
13077 pointer-events: none;
13078}
13079.stepper-button + .stepper-button,
13080.stepper-button-minus + .stepper-button,
13081.stepper-button-plus + .stepper-button,
13082.stepper-button + .stepper-button-minus,
13083.stepper-button-minus + .stepper-button-minus,
13084.stepper-button-plus + .stepper-button-minus,
13085.stepper-button + .stepper-button-plus,
13086.stepper-button-minus + .stepper-button-plus,
13087.stepper-button-plus + .stepper-button-plus {
13088 border-left: none;
13089}
13090.stepper-button-plus,
13091.stepper-button-minus {
13092 -webkit-user-select: none;
13093 -moz-user-select: none;
13094 user-select: none;
13095}
13096.stepper-button-plus:after,
13097.stepper-button-minus:after,
13098.stepper-button-plus:before,
13099.stepper-button-minus:before {
13100 content: '';
13101 position: absolute;
13102 left: 50%;
13103 top: 50%;
13104 transform: translate(-50%, -50%);
13105 background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
13106 border-radius: 2px;
13107}
13108.stepper-button-plus:after,
13109.stepper-button-minus:after {
13110 width: 15px;
13111 height: 2px;
13112}
13113.stepper-button-plus:before {
13114 height: 15px;
13115 width: 2px;
13116}
13117.stepper-value {
13118 display: flex;
13119 align-content: center;
13120 align-items: center;
13121 justify-content: center;
13122}
13123.stepper-input-wrap,
13124.stepper-value {
13125 flex-shrink: 1;
13126 text-align: center;
13127 border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
13128 border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
13129}
13130.stepper .stepper-input-wrap input,
13131.stepper-value {
13132 width: 45px;
13133 color: var(--f7-stepper-value-text-color, var(--f7-theme-color));
13134 font-size: var(--f7-stepper-value-font-size);
13135 font-weight: var(--f7-stepper-value-font-weight);
13136 text-align: center;
13137}
13138.stepper .stepper-input-wrap input {
13139 height: 100%;
13140}
13141.stepper-round,
13142.ios .stepper-round-ios,
13143.md .stepper-round-md,
13144.aurora .stepper-round-aurora {
13145 --f7-stepper-border-radius: var(--f7-stepper-height);
13146}
13147.stepper-fill,
13148.ios .stepper-fill-ios,
13149.md .stepper-fill-md,
13150.aurora .stepper-fill-aurora {
13151 --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
13152 --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
13153 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
13154}
13155.stepper-fill .stepper-button + .stepper-button,
13156.ios .stepper-fill-ios .stepper-button + .stepper-button,
13157.md .stepper-fill-md .stepper-button + .stepper-button,
13158.aurora .stepper-fill-aurora .stepper-button + .stepper-button,
13159.stepper-raised .stepper-button + .stepper-button,
13160.ios .stepper-raised-ios .stepper-button + .stepper-button,
13161.md .stepper-raised-md .stepper-button + .stepper-button,
13162.aurora .stepper-raised-aurora .stepper-button + .stepper-button,
13163.stepper-fill .stepper-button-minus + .stepper-button-plus,
13164.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
13165.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
13166.aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus,
13167.stepper-raised .stepper-button-minus + .stepper-button-plus,
13168.ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
13169.md .stepper-raised-md .stepper-button-minus + .stepper-button-plus,
13170.aurora .stepper-raised-aurora .stepper-button-minus + .stepper-button-plus {
13171 border-left: 1px solid rgba(0, 0, 0, 0.1);
13172}
13173.stepper-fill .stepper-button + .stepper-button.active-state,
13174.ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
13175.md .stepper-fill-md .stepper-button + .stepper-button.active-state,
13176.aurora .stepper-fill-aurora .stepper-button + .stepper-button.active-state,
13177.stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
13178.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
13179.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state,
13180.aurora .stepper-fill-aurora .stepper-button-minus + .stepper-button-plus.active-state {
13181 border-left-color: var(--f7-stepper-button-pressed-bg-color);
13182}
13183.stepper-raised:not(.stepper-fill) .stepper-input-wrap,
13184.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
13185.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
13186.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-input-wrap,
13187.stepper-raised:not(.stepper-fill) .stepper-value,
13188.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
13189.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value,
13190.aurora .stepper-raised-aurora:not(.stepper-fill-aurora):not(.stepper-fill) .stepper-value {
13191 border-left: 1px solid rgba(0, 0, 0, 0.1);
13192 border-right: 1px solid rgba(0, 0, 0, 0.1);
13193}
13194.stepper-large,
13195.ios .stepper-large-ios,
13196.md .stepper-large-md,
13197.aurora .stepper-large-aurora {
13198 --f7-stepper-height: var(--f7-stepper-large-height);
13199}
13200.stepper-small,
13201.ios .stepper-small-ios,
13202.md .stepper-small-md,
13203.aurora .stepper-small-aurora {
13204 --f7-stepper-border-width: var(--f7-stepper-small-border-width);
13205 --f7-stepper-height: var(--f7-stepper-small-height);
13206}
13207.ios .stepper-fill.stepper-small-ios,
13208.ios .stepper-fill.stepper-small {
13209 --f7-stepper-button-pressed-bg-color: transparent;
13210 --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
13211}
13212.stepper-raised,
13213.ios .stepper-raised-ios,
13214.md .stepper-raised-md,
13215.aurora .stepper-raised-aurora {
13216 --f7-stepper-border-width: 0;
13217 box-shadow: var(--f7-stepper-raised-box-shadow);
13218}
13219.ios .stepper-button .f7-icons,
13220.ios .stepper-button-minus .f7-icons,
13221.ios .stepper-button-plus .f7-icons {
13222 font-size: 22px;
13223}
13224.ios .stepper-fill,
13225.ios .stepper-fill-ios {
13226 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
13227}
13228.ios .stepper-small.stepper-raised,
13229.ios .stepper-small-ios.stepper-raised,
13230.ios .stepper-small.stepper-raised-ios,
13231.ios .stepper-small-ios.stepper-raised-ios {
13232 --f7-stepper-border-width: 0px;
13233}
13234.ios .stepper-small .stepper-button,
13235.ios .stepper-small-ios .stepper-button,
13236.ios .stepper-small .stepper-button-minus,
13237.ios .stepper-small-ios .stepper-button-minus,
13238.ios .stepper-small .stepper-button-plus,
13239.ios .stepper-small-ios .stepper-button-plus {
13240 transition-duration: 200ms;
13241}
13242.ios .stepper-small .stepper-button.active-state:after,
13243.ios .stepper-small-ios .stepper-button.active-state:after,
13244.ios .stepper-small .stepper-button-minus.active-state:after,
13245.ios .stepper-small-ios .stepper-button-minus.active-state:after,
13246.ios .stepper-small .stepper-button-plus.active-state:after,
13247.ios .stepper-small-ios .stepper-button-plus.active-state:after,
13248.ios .stepper-small .stepper-button.active-state:before,
13249.ios .stepper-small-ios .stepper-button.active-state:before,
13250.ios .stepper-small .stepper-button-minus.active-state:before,
13251.ios .stepper-small-ios .stepper-button-minus.active-state:before,
13252.ios .stepper-small .stepper-button-plus.active-state:before,
13253.ios .stepper-small-ios .stepper-button-plus.active-state:before {
13254 transition-duration: 200ms;
13255 background-color: var(--f7-theme-color);
13256}
13257.md .stepper-button,
13258.md .stepper-button-minus,
13259.md .stepper-button-plus {
13260 transition-duration: 300ms;
13261 transform: translate3d(0, 0, 0);
13262 overflow: hidden;
13263}
13264.md .stepper-fill,
13265.md .stepper-fill-md {
13266 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
13267}
13268.aurora .stepper-button,
13269.aurora .stepper-button-minus,
13270.aurora .stepper-button-plus {
13271 transition-duration: 100ms;
13272 transform: translate3d(0, 0, 0);
13273 overflow: hidden;
13274}
13275.aurora.device-desktop .stepper-button:not(.active-state):not(.no-hover):hover,
13276.aurora.device-desktop .stepper-button-minus:not(.active-state):not(.no-hover):hover,
13277.aurora.device-desktop .stepper-button-plus:not(.active-state):not(.no-hover):hover {
13278 background-color: var(--f7-stepper-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
13279}
13280.aurora .stepper-fill,
13281.aurora .stepper-fill-aurora {
13282 --f7-stepper-button-hover-bg-color: var(--f7-stepper-button-fill-hover-bg-color, var(--f7-theme-color-tint));
13283 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
13284}
13285/* === Smart Select === */
13286.smart-select :root {
13287 /*
13288 --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
13289 --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
13290 */
13291}
13292.smart-select select {
13293 display: none;
13294}
13295.smart-select .item-after {
13296 max-width: 70%;
13297 overflow: hidden;
13298 text-overflow: ellipsis;
13299 position: relative;
13300 display: block;
13301}
13302.smart-select-sheet .page,
13303.smart-select-sheet .sheet-modal-inner,
13304.smart-select-sheet .list ul {
13305 background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
13306}
13307.smart-select-sheet .toolbar:after {
13308 content: '';
13309 position: absolute;
13310 background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
13311 display: block;
13312 z-index: 15;
13313 top: auto;
13314 right: auto;
13315 bottom: 0;
13316 left: 0;
13317 height: 1px;
13318 width: 100%;
13319 transform-origin: 50% 100%;
13320 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13321}
13322.smart-select-sheet .toolbar:after {
13323 display: block;
13324}
13325.smart-select-sheet .list {
13326 margin: 0;
13327}
13328.smart-select-sheet .list ul:before,
13329.smart-select-sheet .list ul:after {
13330 display: none !important;
13331}
13332.smart-select-popover .popover-inner {
13333 max-height: 40vh;
13334}
13335/* === Grid === */
13336:root {
13337 --f7-grid-gap: 16px;
13338 --f7-grid-row-gap: 0px;
13339 --f7-grid-resize-handler-bg-color: rgba(0, 0, 0, 0.35);
13340}
13341:root .theme-dark,
13342:root.theme-dark {
13343 --f7-grid-resize-handler-bg-color: rgba(255, 255, 255, 0.35);
13344}
13345.row {
13346 display: flex;
13347 justify-content: space-between;
13348 flex-wrap: wrap;
13349 align-items: flex-start;
13350 --f7-cols-per-row: 1;
13351}
13352.row + .row {
13353 margin-top: var(--f7-grid-row-gap);
13354}
13355.row > [class*='col-'],
13356.row > .col {
13357 box-sizing: border-box;
13358 width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
13359}
13360.row > [class*='col-'].resizable,
13361.row > .col.resizable {
13362 position: relative;
13363}
13364.row.resizable {
13365 position: relative;
13366}
13367.row.no-gap {
13368 --f7-grid-gap: 0px;
13369 --f7-grid-row-gap: 0px;
13370}
13371.row .col-5 {
13372 --f7-cols-per-row: 20;
13373}
13374.row .col-10 {
13375 --f7-cols-per-row: 10;
13376}
13377.row .col-15 {
13378 --f7-cols-per-row: 6.66666667;
13379}
13380.row .col-20 {
13381 --f7-cols-per-row: 5;
13382}
13383.row .col-25 {
13384 --f7-cols-per-row: 4;
13385}
13386.row .col-30 {
13387 --f7-cols-per-row: 3.33333333;
13388}
13389.row .col-33 {
13390 --f7-cols-per-row: 3;
13391}
13392.row .col-35 {
13393 --f7-cols-per-row: 2.85714286;
13394}
13395.row .col-40 {
13396 --f7-cols-per-row: 2.5;
13397}
13398.row .col-45 {
13399 --f7-cols-per-row: 2.22222222;
13400}
13401.row .col-50 {
13402 --f7-cols-per-row: 2;
13403}
13404.row .col-55 {
13405 --f7-cols-per-row: 1.81818182;
13406}
13407.row .col-60 {
13408 --f7-cols-per-row: 1.66666667;
13409}
13410.row .col-65 {
13411 --f7-cols-per-row: 1.53846154;
13412}
13413.row .col-66 {
13414 --f7-cols-per-row: 1.5;
13415}
13416.row .col-70 {
13417 --f7-cols-per-row: 1.42857143;
13418}
13419.row .col-75 {
13420 --f7-cols-per-row: 1.33333333;
13421}
13422.row .col-80 {
13423 --f7-cols-per-row: 1.25;
13424}
13425.row .col-85 {
13426 --f7-cols-per-row: 1.17647059;
13427}
13428.row .col-90 {
13429 --f7-cols-per-row: 1.11111111;
13430}
13431.row .col-95 {
13432 --f7-cols-per-row: 1.05263158;
13433}
13434.row .col-100 {
13435 --f7-cols-per-row: 1;
13436}
13437.row .col:nth-last-of-type(1),
13438.row .col:nth-last-of-type(1) ~ .col {
13439 --f7-cols-per-row: 1;
13440}
13441.row .col:nth-last-of-type(2),
13442.row .col:nth-last-of-type(2) ~ .col {
13443 --f7-cols-per-row: 2;
13444}
13445.row .col:nth-last-of-type(3),
13446.row .col:nth-last-of-type(3) ~ .col {
13447 --f7-cols-per-row: 3;
13448}
13449.row .col:nth-last-of-type(4),
13450.row .col:nth-last-of-type(4) ~ .col {
13451 --f7-cols-per-row: 4;
13452}
13453.row .col:nth-last-of-type(5),
13454.row .col:nth-last-of-type(5) ~ .col {
13455 --f7-cols-per-row: 5;
13456}
13457.row .col:nth-last-of-type(6),
13458.row .col:nth-last-of-type(6) ~ .col {
13459 --f7-cols-per-row: 6;
13460}
13461.row .col:nth-last-of-type(7),
13462.row .col:nth-last-of-type(7) ~ .col {
13463 --f7-cols-per-row: 7;
13464}
13465.row .col:nth-last-of-type(8),
13466.row .col:nth-last-of-type(8) ~ .col {
13467 --f7-cols-per-row: 8;
13468}
13469.row .col:nth-last-of-type(9),
13470.row .col:nth-last-of-type(9) ~ .col {
13471 --f7-cols-per-row: 9;
13472}
13473.row .col:nth-last-of-type(10),
13474.row .col:nth-last-of-type(10) ~ .col {
13475 --f7-cols-per-row: 10;
13476}
13477.row .col:nth-last-of-type(11),
13478.row .col:nth-last-of-type(11) ~ .col {
13479 --f7-cols-per-row: 11;
13480}
13481.row .col:nth-last-of-type(12),
13482.row .col:nth-last-of-type(12) ~ .col {
13483 --f7-cols-per-row: 12;
13484}
13485.row .col:nth-last-of-type(13),
13486.row .col:nth-last-of-type(13) ~ .col {
13487 --f7-cols-per-row: 13;
13488}
13489.row .col:nth-last-of-type(14),
13490.row .col:nth-last-of-type(14) ~ .col {
13491 --f7-cols-per-row: 14;
13492}
13493.row .col:nth-last-of-type(15),
13494.row .col:nth-last-of-type(15) ~ .col {
13495 --f7-cols-per-row: 15;
13496}
13497.row .col:nth-last-of-type(16),
13498.row .col:nth-last-of-type(16) ~ .col {
13499 --f7-cols-per-row: 16;
13500}
13501.row .col:nth-last-of-type(17),
13502.row .col:nth-last-of-type(17) ~ .col {
13503 --f7-cols-per-row: 17;
13504}
13505.row .col:nth-last-of-type(18),
13506.row .col:nth-last-of-type(18) ~ .col {
13507 --f7-cols-per-row: 18;
13508}
13509.row .col:nth-last-of-type(19),
13510.row .col:nth-last-of-type(19) ~ .col {
13511 --f7-cols-per-row: 19;
13512}
13513.row .col:nth-last-of-type(20),
13514.row .col:nth-last-of-type(20) ~ .col {
13515 --f7-cols-per-row: 20;
13516}
13517.row .col:nth-last-of-type(21),
13518.row .col:nth-last-of-type(21) ~ .col {
13519 --f7-cols-per-row: 21;
13520}
13521.row .col:nth-last-of-type(22),
13522.row .col:nth-last-of-type(22) ~ .col {
13523 --f7-cols-per-row: 22;
13524}
13525@media (min-width: 480px) {
13526 .row .xsmall-5 {
13527 --f7-cols-per-row: 20;
13528 }
13529 .row .xsmall-10 {
13530 --f7-cols-per-row: 10;
13531 }
13532 .row .xsmall-15 {
13533 --f7-cols-per-row: 6.66666667;
13534 }
13535 .row .xsmall-20 {
13536 --f7-cols-per-row: 5;
13537 }
13538 .row .xsmall-25 {
13539 --f7-cols-per-row: 4;
13540 }
13541 .row .xsmall-30 {
13542 --f7-cols-per-row: 3.33333333;
13543 }
13544 .row .xsmall-33 {
13545 --f7-cols-per-row: 3;
13546 }
13547 .row .xsmall-35 {
13548 --f7-cols-per-row: 2.85714286;
13549 }
13550 .row .xsmall-40 {
13551 --f7-cols-per-row: 2.5;
13552 }
13553 .row .xsmall-45 {
13554 --f7-cols-per-row: 2.22222222;
13555 }
13556 .row .xsmall-50 {
13557 --f7-cols-per-row: 2;
13558 }
13559 .row .xsmall-55 {
13560 --f7-cols-per-row: 1.81818182;
13561 }
13562 .row .xsmall-60 {
13563 --f7-cols-per-row: 1.66666667;
13564 }
13565 .row .xsmall-65 {
13566 --f7-cols-per-row: 1.53846154;
13567 }
13568 .row .xsmall-66 {
13569 --f7-cols-per-row: 1.5;
13570 }
13571 .row .xsmall-70 {
13572 --f7-cols-per-row: 1.42857143;
13573 }
13574 .row .xsmall-75 {
13575 --f7-cols-per-row: 1.33333333;
13576 }
13577 .row .xsmall-80 {
13578 --f7-cols-per-row: 1.25;
13579 }
13580 .row .xsmall-85 {
13581 --f7-cols-per-row: 1.17647059;
13582 }
13583 .row .xsmall-90 {
13584 --f7-cols-per-row: 1.11111111;
13585 }
13586 .row .xsmall-95 {
13587 --f7-cols-per-row: 1.05263158;
13588 }
13589 .row .xsmall-100 {
13590 --f7-cols-per-row: 1;
13591 }
13592 .row .xsmall-auto:nth-last-of-type(1),
13593 .row .xsmall-auto:nth-last-of-type(1) ~ .xsmall-auto {
13594 --f7-cols-per-row: 1;
13595 }
13596 .row .xsmall-auto:nth-last-of-type(2),
13597 .row .xsmall-auto:nth-last-of-type(2) ~ .xsmall-auto {
13598 --f7-cols-per-row: 2;
13599 }
13600 .row .xsmall-auto:nth-last-of-type(3),
13601 .row .xsmall-auto:nth-last-of-type(3) ~ .xsmall-auto {
13602 --f7-cols-per-row: 3;
13603 }
13604 .row .xsmall-auto:nth-last-of-type(4),
13605 .row .xsmall-auto:nth-last-of-type(4) ~ .xsmall-auto {
13606 --f7-cols-per-row: 4;
13607 }
13608 .row .xsmall-auto:nth-last-of-type(5),
13609 .row .xsmall-auto:nth-last-of-type(5) ~ .xsmall-auto {
13610 --f7-cols-per-row: 5;
13611 }
13612 .row .xsmall-auto:nth-last-of-type(6),
13613 .row .xsmall-auto:nth-last-of-type(6) ~ .xsmall-auto {
13614 --f7-cols-per-row: 6;
13615 }
13616 .row .xsmall-auto:nth-last-of-type(7),
13617 .row .xsmall-auto:nth-last-of-type(7) ~ .xsmall-auto {
13618 --f7-cols-per-row: 7;
13619 }
13620 .row .xsmall-auto:nth-last-of-type(8),
13621 .row .xsmall-auto:nth-last-of-type(8) ~ .xsmall-auto {
13622 --f7-cols-per-row: 8;
13623 }
13624 .row .xsmall-auto:nth-last-of-type(9),
13625 .row .xsmall-auto:nth-last-of-type(9) ~ .xsmall-auto {
13626 --f7-cols-per-row: 9;
13627 }
13628 .row .xsmall-auto:nth-last-of-type(10),
13629 .row .xsmall-auto:nth-last-of-type(10) ~ .xsmall-auto {
13630 --f7-cols-per-row: 10;
13631 }
13632 .row .xsmall-auto:nth-last-of-type(11),
13633 .row .xsmall-auto:nth-last-of-type(11) ~ .xsmall-auto {
13634 --f7-cols-per-row: 11;
13635 }
13636 .row .xsmall-auto:nth-last-of-type(12),
13637 .row .xsmall-auto:nth-last-of-type(12) ~ .xsmall-auto {
13638 --f7-cols-per-row: 12;
13639 }
13640 .row .xsmall-auto:nth-last-of-type(13),
13641 .row .xsmall-auto:nth-last-of-type(13) ~ .xsmall-auto {
13642 --f7-cols-per-row: 13;
13643 }
13644 .row .xsmall-auto:nth-last-of-type(14),
13645 .row .xsmall-auto:nth-last-of-type(14) ~ .xsmall-auto {
13646 --f7-cols-per-row: 14;
13647 }
13648 .row .xsmall-auto:nth-last-of-type(15),
13649 .row .xsmall-auto:nth-last-of-type(15) ~ .xsmall-auto {
13650 --f7-cols-per-row: 15;
13651 }
13652 .row .xsmall-auto:nth-last-of-type(16),
13653 .row .xsmall-auto:nth-last-of-type(16) ~ .xsmall-auto {
13654 --f7-cols-per-row: 16;
13655 }
13656 .row .xsmall-auto:nth-last-of-type(17),
13657 .row .xsmall-auto:nth-last-of-type(17) ~ .xsmall-auto {
13658 --f7-cols-per-row: 17;
13659 }
13660 .row .xsmall-auto:nth-last-of-type(18),
13661 .row .xsmall-auto:nth-last-of-type(18) ~ .xsmall-auto {
13662 --f7-cols-per-row: 18;
13663 }
13664 .row .xsmall-auto:nth-last-of-type(19),
13665 .row .xsmall-auto:nth-last-of-type(19) ~ .xsmall-auto {
13666 --f7-cols-per-row: 19;
13667 }
13668 .row .xsmall-auto:nth-last-of-type(20),
13669 .row .xsmall-auto:nth-last-of-type(20) ~ .xsmall-auto {
13670 --f7-cols-per-row: 20;
13671 }
13672 .row .xsmall-auto:nth-last-of-type(21),
13673 .row .xsmall-auto:nth-last-of-type(21) ~ .xsmall-auto {
13674 --f7-cols-per-row: 21;
13675 }
13676 .row .xsmall-auto:nth-last-of-type(22),
13677 .row .xsmall-auto:nth-last-of-type(22) ~ .xsmall-auto {
13678 --f7-cols-per-row: 22;
13679 }
13680}
13681@media (min-width: 568px) {
13682 .row .small-5 {
13683 --f7-cols-per-row: 20;
13684 }
13685 .row .small-10 {
13686 --f7-cols-per-row: 10;
13687 }
13688 .row .small-15 {
13689 --f7-cols-per-row: 6.66666667;
13690 }
13691 .row .small-20 {
13692 --f7-cols-per-row: 5;
13693 }
13694 .row .small-25 {
13695 --f7-cols-per-row: 4;
13696 }
13697 .row .small-30 {
13698 --f7-cols-per-row: 3.33333333;
13699 }
13700 .row .small-33 {
13701 --f7-cols-per-row: 3;
13702 }
13703 .row .small-35 {
13704 --f7-cols-per-row: 2.85714286;
13705 }
13706 .row .small-40 {
13707 --f7-cols-per-row: 2.5;
13708 }
13709 .row .small-45 {
13710 --f7-cols-per-row: 2.22222222;
13711 }
13712 .row .small-50 {
13713 --f7-cols-per-row: 2;
13714 }
13715 .row .small-55 {
13716 --f7-cols-per-row: 1.81818182;
13717 }
13718 .row .small-60 {
13719 --f7-cols-per-row: 1.66666667;
13720 }
13721 .row .small-65 {
13722 --f7-cols-per-row: 1.53846154;
13723 }
13724 .row .small-66 {
13725 --f7-cols-per-row: 1.5;
13726 }
13727 .row .small-70 {
13728 --f7-cols-per-row: 1.42857143;
13729 }
13730 .row .small-75 {
13731 --f7-cols-per-row: 1.33333333;
13732 }
13733 .row .small-80 {
13734 --f7-cols-per-row: 1.25;
13735 }
13736 .row .small-85 {
13737 --f7-cols-per-row: 1.17647059;
13738 }
13739 .row .small-90 {
13740 --f7-cols-per-row: 1.11111111;
13741 }
13742 .row .small-95 {
13743 --f7-cols-per-row: 1.05263158;
13744 }
13745 .row .small-100 {
13746 --f7-cols-per-row: 1;
13747 }
13748 .row .small-auto:nth-last-of-type(1),
13749 .row .small-auto:nth-last-of-type(1) ~ .small-auto {
13750 --f7-cols-per-row: 1;
13751 }
13752 .row .small-auto:nth-last-of-type(2),
13753 .row .small-auto:nth-last-of-type(2) ~ .small-auto {
13754 --f7-cols-per-row: 2;
13755 }
13756 .row .small-auto:nth-last-of-type(3),
13757 .row .small-auto:nth-last-of-type(3) ~ .small-auto {
13758 --f7-cols-per-row: 3;
13759 }
13760 .row .small-auto:nth-last-of-type(4),
13761 .row .small-auto:nth-last-of-type(4) ~ .small-auto {
13762 --f7-cols-per-row: 4;
13763 }
13764 .row .small-auto:nth-last-of-type(5),
13765 .row .small-auto:nth-last-of-type(5) ~ .small-auto {
13766 --f7-cols-per-row: 5;
13767 }
13768 .row .small-auto:nth-last-of-type(6),
13769 .row .small-auto:nth-last-of-type(6) ~ .small-auto {
13770 --f7-cols-per-row: 6;
13771 }
13772 .row .small-auto:nth-last-of-type(7),
13773 .row .small-auto:nth-last-of-type(7) ~ .small-auto {
13774 --f7-cols-per-row: 7;
13775 }
13776 .row .small-auto:nth-last-of-type(8),
13777 .row .small-auto:nth-last-of-type(8) ~ .small-auto {
13778 --f7-cols-per-row: 8;
13779 }
13780 .row .small-auto:nth-last-of-type(9),
13781 .row .small-auto:nth-last-of-type(9) ~ .small-auto {
13782 --f7-cols-per-row: 9;
13783 }
13784 .row .small-auto:nth-last-of-type(10),
13785 .row .small-auto:nth-last-of-type(10) ~ .small-auto {
13786 --f7-cols-per-row: 10;
13787 }
13788 .row .small-auto:nth-last-of-type(11),
13789 .row .small-auto:nth-last-of-type(11) ~ .small-auto {
13790 --f7-cols-per-row: 11;
13791 }
13792 .row .small-auto:nth-last-of-type(12),
13793 .row .small-auto:nth-last-of-type(12) ~ .small-auto {
13794 --f7-cols-per-row: 12;
13795 }
13796 .row .small-auto:nth-last-of-type(13),
13797 .row .small-auto:nth-last-of-type(13) ~ .small-auto {
13798 --f7-cols-per-row: 13;
13799 }
13800 .row .small-auto:nth-last-of-type(14),
13801 .row .small-auto:nth-last-of-type(14) ~ .small-auto {
13802 --f7-cols-per-row: 14;
13803 }
13804 .row .small-auto:nth-last-of-type(15),
13805 .row .small-auto:nth-last-of-type(15) ~ .small-auto {
13806 --f7-cols-per-row: 15;
13807 }
13808 .row .small-auto:nth-last-of-type(16),
13809 .row .small-auto:nth-last-of-type(16) ~ .small-auto {
13810 --f7-cols-per-row: 16;
13811 }
13812 .row .small-auto:nth-last-of-type(17),
13813 .row .small-auto:nth-last-of-type(17) ~ .small-auto {
13814 --f7-cols-per-row: 17;
13815 }
13816 .row .small-auto:nth-last-of-type(18),
13817 .row .small-auto:nth-last-of-type(18) ~ .small-auto {
13818 --f7-cols-per-row: 18;
13819 }
13820 .row .small-auto:nth-last-of-type(19),
13821 .row .small-auto:nth-last-of-type(19) ~ .small-auto {
13822 --f7-cols-per-row: 19;
13823 }
13824 .row .small-auto:nth-last-of-type(20),
13825 .row .small-auto:nth-last-of-type(20) ~ .small-auto {
13826 --f7-cols-per-row: 20;
13827 }
13828 .row .small-auto:nth-last-of-type(21),
13829 .row .small-auto:nth-last-of-type(21) ~ .small-auto {
13830 --f7-cols-per-row: 21;
13831 }
13832 .row .small-auto:nth-last-of-type(22),
13833 .row .small-auto:nth-last-of-type(22) ~ .small-auto {
13834 --f7-cols-per-row: 22;
13835 }
13836}
13837@media (min-width: 768px) {
13838 .row .medium-5 {
13839 --f7-cols-per-row: 20;
13840 }
13841 .row .medium-10 {
13842 --f7-cols-per-row: 10;
13843 }
13844 .row .medium-15 {
13845 --f7-cols-per-row: 6.66666667;
13846 }
13847 .row .medium-20 {
13848 --f7-cols-per-row: 5;
13849 }
13850 .row .medium-25 {
13851 --f7-cols-per-row: 4;
13852 }
13853 .row .medium-30 {
13854 --f7-cols-per-row: 3.33333333;
13855 }
13856 .row .medium-33 {
13857 --f7-cols-per-row: 3;
13858 }
13859 .row .medium-35 {
13860 --f7-cols-per-row: 2.85714286;
13861 }
13862 .row .medium-40 {
13863 --f7-cols-per-row: 2.5;
13864 }
13865 .row .medium-45 {
13866 --f7-cols-per-row: 2.22222222;
13867 }
13868 .row .medium-50 {
13869 --f7-cols-per-row: 2;
13870 }
13871 .row .medium-55 {
13872 --f7-cols-per-row: 1.81818182;
13873 }
13874 .row .medium-60 {
13875 --f7-cols-per-row: 1.66666667;
13876 }
13877 .row .medium-65 {
13878 --f7-cols-per-row: 1.53846154;
13879 }
13880 .row .medium-66 {
13881 --f7-cols-per-row: 1.5;
13882 }
13883 .row .medium-70 {
13884 --f7-cols-per-row: 1.42857143;
13885 }
13886 .row .medium-75 {
13887 --f7-cols-per-row: 1.33333333;
13888 }
13889 .row .medium-80 {
13890 --f7-cols-per-row: 1.25;
13891 }
13892 .row .medium-85 {
13893 --f7-cols-per-row: 1.17647059;
13894 }
13895 .row .medium-90 {
13896 --f7-cols-per-row: 1.11111111;
13897 }
13898 .row .medium-95 {
13899 --f7-cols-per-row: 1.05263158;
13900 }
13901 .row .medium-100 {
13902 --f7-cols-per-row: 1;
13903 }
13904 .row .medium-auto:nth-last-of-type(1),
13905 .row .medium-auto:nth-last-of-type(1) ~ .medium-auto {
13906 --f7-cols-per-row: 1;
13907 }
13908 .row .medium-auto:nth-last-of-type(2),
13909 .row .medium-auto:nth-last-of-type(2) ~ .medium-auto {
13910 --f7-cols-per-row: 2;
13911 }
13912 .row .medium-auto:nth-last-of-type(3),
13913 .row .medium-auto:nth-last-of-type(3) ~ .medium-auto {
13914 --f7-cols-per-row: 3;
13915 }
13916 .row .medium-auto:nth-last-of-type(4),
13917 .row .medium-auto:nth-last-of-type(4) ~ .medium-auto {
13918 --f7-cols-per-row: 4;
13919 }
13920 .row .medium-auto:nth-last-of-type(5),
13921 .row .medium-auto:nth-last-of-type(5) ~ .medium-auto {
13922 --f7-cols-per-row: 5;
13923 }
13924 .row .medium-auto:nth-last-of-type(6),
13925 .row .medium-auto:nth-last-of-type(6) ~ .medium-auto {
13926 --f7-cols-per-row: 6;
13927 }
13928 .row .medium-auto:nth-last-of-type(7),
13929 .row .medium-auto:nth-last-of-type(7) ~ .medium-auto {
13930 --f7-cols-per-row: 7;
13931 }
13932 .row .medium-auto:nth-last-of-type(8),
13933 .row .medium-auto:nth-last-of-type(8) ~ .medium-auto {
13934 --f7-cols-per-row: 8;
13935 }
13936 .row .medium-auto:nth-last-of-type(9),
13937 .row .medium-auto:nth-last-of-type(9) ~ .medium-auto {
13938 --f7-cols-per-row: 9;
13939 }
13940 .row .medium-auto:nth-last-of-type(10),
13941 .row .medium-auto:nth-last-of-type(10) ~ .medium-auto {
13942 --f7-cols-per-row: 10;
13943 }
13944 .row .medium-auto:nth-last-of-type(11),
13945 .row .medium-auto:nth-last-of-type(11) ~ .medium-auto {
13946 --f7-cols-per-row: 11;
13947 }
13948 .row .medium-auto:nth-last-of-type(12),
13949 .row .medium-auto:nth-last-of-type(12) ~ .medium-auto {
13950 --f7-cols-per-row: 12;
13951 }
13952 .row .medium-auto:nth-last-of-type(13),
13953 .row .medium-auto:nth-last-of-type(13) ~ .medium-auto {
13954 --f7-cols-per-row: 13;
13955 }
13956 .row .medium-auto:nth-last-of-type(14),
13957 .row .medium-auto:nth-last-of-type(14) ~ .medium-auto {
13958 --f7-cols-per-row: 14;
13959 }
13960 .row .medium-auto:nth-last-of-type(15),
13961 .row .medium-auto:nth-last-of-type(15) ~ .medium-auto {
13962 --f7-cols-per-row: 15;
13963 }
13964 .row .medium-auto:nth-last-of-type(16),
13965 .row .medium-auto:nth-last-of-type(16) ~ .medium-auto {
13966 --f7-cols-per-row: 16;
13967 }
13968 .row .medium-auto:nth-last-of-type(17),
13969 .row .medium-auto:nth-last-of-type(17) ~ .medium-auto {
13970 --f7-cols-per-row: 17;
13971 }
13972 .row .medium-auto:nth-last-of-type(18),
13973 .row .medium-auto:nth-last-of-type(18) ~ .medium-auto {
13974 --f7-cols-per-row: 18;
13975 }
13976 .row .medium-auto:nth-last-of-type(19),
13977 .row .medium-auto:nth-last-of-type(19) ~ .medium-auto {
13978 --f7-cols-per-row: 19;
13979 }
13980 .row .medium-auto:nth-last-of-type(20),
13981 .row .medium-auto:nth-last-of-type(20) ~ .medium-auto {
13982 --f7-cols-per-row: 20;
13983 }
13984 .row .medium-auto:nth-last-of-type(21),
13985 .row .medium-auto:nth-last-of-type(21) ~ .medium-auto {
13986 --f7-cols-per-row: 21;
13987 }
13988 .row .medium-auto:nth-last-of-type(22),
13989 .row .medium-auto:nth-last-of-type(22) ~ .medium-auto {
13990 --f7-cols-per-row: 22;
13991 }
13992}
13993@media (min-width: 1024px) {
13994 .row .large-5 {
13995 --f7-cols-per-row: 20;
13996 }
13997 .row .large-10 {
13998 --f7-cols-per-row: 10;
13999 }
14000 .row .large-15 {
14001 --f7-cols-per-row: 6.66666667;
14002 }
14003 .row .large-20 {
14004 --f7-cols-per-row: 5;
14005 }
14006 .row .large-25 {
14007 --f7-cols-per-row: 4;
14008 }
14009 .row .large-30 {
14010 --f7-cols-per-row: 3.33333333;
14011 }
14012 .row .large-33 {
14013 --f7-cols-per-row: 3;
14014 }
14015 .row .large-35 {
14016 --f7-cols-per-row: 2.85714286;
14017 }
14018 .row .large-40 {
14019 --f7-cols-per-row: 2.5;
14020 }
14021 .row .large-45 {
14022 --f7-cols-per-row: 2.22222222;
14023 }
14024 .row .large-50 {
14025 --f7-cols-per-row: 2;
14026 }
14027 .row .large-55 {
14028 --f7-cols-per-row: 1.81818182;
14029 }
14030 .row .large-60 {
14031 --f7-cols-per-row: 1.66666667;
14032 }
14033 .row .large-65 {
14034 --f7-cols-per-row: 1.53846154;
14035 }
14036 .row .large-66 {
14037 --f7-cols-per-row: 1.5;
14038 }
14039 .row .large-70 {
14040 --f7-cols-per-row: 1.42857143;
14041 }
14042 .row .large-75 {
14043 --f7-cols-per-row: 1.33333333;
14044 }
14045 .row .large-80 {
14046 --f7-cols-per-row: 1.25;
14047 }
14048 .row .large-85 {
14049 --f7-cols-per-row: 1.17647059;
14050 }
14051 .row .large-90 {
14052 --f7-cols-per-row: 1.11111111;
14053 }
14054 .row .large-95 {
14055 --f7-cols-per-row: 1.05263158;
14056 }
14057 .row .large-100 {
14058 --f7-cols-per-row: 1;
14059 }
14060 .row .large-auto:nth-last-of-type(1),
14061 .row .large-auto:nth-last-of-type(1) ~ .large-auto {
14062 --f7-cols-per-row: 1;
14063 }
14064 .row .large-auto:nth-last-of-type(2),
14065 .row .large-auto:nth-last-of-type(2) ~ .large-auto {
14066 --f7-cols-per-row: 2;
14067 }
14068 .row .large-auto:nth-last-of-type(3),
14069 .row .large-auto:nth-last-of-type(3) ~ .large-auto {
14070 --f7-cols-per-row: 3;
14071 }
14072 .row .large-auto:nth-last-of-type(4),
14073 .row .large-auto:nth-last-of-type(4) ~ .large-auto {
14074 --f7-cols-per-row: 4;
14075 }
14076 .row .large-auto:nth-last-of-type(5),
14077 .row .large-auto:nth-last-of-type(5) ~ .large-auto {
14078 --f7-cols-per-row: 5;
14079 }
14080 .row .large-auto:nth-last-of-type(6),
14081 .row .large-auto:nth-last-of-type(6) ~ .large-auto {
14082 --f7-cols-per-row: 6;
14083 }
14084 .row .large-auto:nth-last-of-type(7),
14085 .row .large-auto:nth-last-of-type(7) ~ .large-auto {
14086 --f7-cols-per-row: 7;
14087 }
14088 .row .large-auto:nth-last-of-type(8),
14089 .row .large-auto:nth-last-of-type(8) ~ .large-auto {
14090 --f7-cols-per-row: 8;
14091 }
14092 .row .large-auto:nth-last-of-type(9),
14093 .row .large-auto:nth-last-of-type(9) ~ .large-auto {
14094 --f7-cols-per-row: 9;
14095 }
14096 .row .large-auto:nth-last-of-type(10),
14097 .row .large-auto:nth-last-of-type(10) ~ .large-auto {
14098 --f7-cols-per-row: 10;
14099 }
14100 .row .large-auto:nth-last-of-type(11),
14101 .row .large-auto:nth-last-of-type(11) ~ .large-auto {
14102 --f7-cols-per-row: 11;
14103 }
14104 .row .large-auto:nth-last-of-type(12),
14105 .row .large-auto:nth-last-of-type(12) ~ .large-auto {
14106 --f7-cols-per-row: 12;
14107 }
14108 .row .large-auto:nth-last-of-type(13),
14109 .row .large-auto:nth-last-of-type(13) ~ .large-auto {
14110 --f7-cols-per-row: 13;
14111 }
14112 .row .large-auto:nth-last-of-type(14),
14113 .row .large-auto:nth-last-of-type(14) ~ .large-auto {
14114 --f7-cols-per-row: 14;
14115 }
14116 .row .large-auto:nth-last-of-type(15),
14117 .row .large-auto:nth-last-of-type(15) ~ .large-auto {
14118 --f7-cols-per-row: 15;
14119 }
14120 .row .large-auto:nth-last-of-type(16),
14121 .row .large-auto:nth-last-of-type(16) ~ .large-auto {
14122 --f7-cols-per-row: 16;
14123 }
14124 .row .large-auto:nth-last-of-type(17),
14125 .row .large-auto:nth-last-of-type(17) ~ .large-auto {
14126 --f7-cols-per-row: 17;
14127 }
14128 .row .large-auto:nth-last-of-type(18),
14129 .row .large-auto:nth-last-of-type(18) ~ .large-auto {
14130 --f7-cols-per-row: 18;
14131 }
14132 .row .large-auto:nth-last-of-type(19),
14133 .row .large-auto:nth-last-of-type(19) ~ .large-auto {
14134 --f7-cols-per-row: 19;
14135 }
14136 .row .large-auto:nth-last-of-type(20),
14137 .row .large-auto:nth-last-of-type(20) ~ .large-auto {
14138 --f7-cols-per-row: 20;
14139 }
14140 .row .large-auto:nth-last-of-type(21),
14141 .row .large-auto:nth-last-of-type(21) ~ .large-auto {
14142 --f7-cols-per-row: 21;
14143 }
14144 .row .large-auto:nth-last-of-type(22),
14145 .row .large-auto:nth-last-of-type(22) ~ .large-auto {
14146 --f7-cols-per-row: 22;
14147 }
14148}
14149@media (min-width: 1200px) {
14150 .row .xlarge-5 {
14151 --f7-cols-per-row: 20;
14152 }
14153 .row .xlarge-10 {
14154 --f7-cols-per-row: 10;
14155 }
14156 .row .xlarge-15 {
14157 --f7-cols-per-row: 6.66666667;
14158 }
14159 .row .xlarge-20 {
14160 --f7-cols-per-row: 5;
14161 }
14162 .row .xlarge-25 {
14163 --f7-cols-per-row: 4;
14164 }
14165 .row .xlarge-30 {
14166 --f7-cols-per-row: 3.33333333;
14167 }
14168 .row .xlarge-33 {
14169 --f7-cols-per-row: 3;
14170 }
14171 .row .xlarge-35 {
14172 --f7-cols-per-row: 2.85714286;
14173 }
14174 .row .xlarge-40 {
14175 --f7-cols-per-row: 2.5;
14176 }
14177 .row .xlarge-45 {
14178 --f7-cols-per-row: 2.22222222;
14179 }
14180 .row .xlarge-50 {
14181 --f7-cols-per-row: 2;
14182 }
14183 .row .xlarge-55 {
14184 --f7-cols-per-row: 1.81818182;
14185 }
14186 .row .xlarge-60 {
14187 --f7-cols-per-row: 1.66666667;
14188 }
14189 .row .xlarge-65 {
14190 --f7-cols-per-row: 1.53846154;
14191 }
14192 .row .xlarge-66 {
14193 --f7-cols-per-row: 1.5;
14194 }
14195 .row .xlarge-70 {
14196 --f7-cols-per-row: 1.42857143;
14197 }
14198 .row .xlarge-75 {
14199 --f7-cols-per-row: 1.33333333;
14200 }
14201 .row .xlarge-80 {
14202 --f7-cols-per-row: 1.25;
14203 }
14204 .row .xlarge-85 {
14205 --f7-cols-per-row: 1.17647059;
14206 }
14207 .row .xlarge-90 {
14208 --f7-cols-per-row: 1.11111111;
14209 }
14210 .row .xlarge-95 {
14211 --f7-cols-per-row: 1.05263158;
14212 }
14213 .row .xlarge-100 {
14214 --f7-cols-per-row: 1;
14215 }
14216 .row .xlarge-auto:nth-last-of-type(1),
14217 .row .xlarge-auto:nth-last-of-type(1) ~ .xlarge-auto {
14218 --f7-cols-per-row: 1;
14219 }
14220 .row .xlarge-auto:nth-last-of-type(2),
14221 .row .xlarge-auto:nth-last-of-type(2) ~ .xlarge-auto {
14222 --f7-cols-per-row: 2;
14223 }
14224 .row .xlarge-auto:nth-last-of-type(3),
14225 .row .xlarge-auto:nth-last-of-type(3) ~ .xlarge-auto {
14226 --f7-cols-per-row: 3;
14227 }
14228 .row .xlarge-auto:nth-last-of-type(4),
14229 .row .xlarge-auto:nth-last-of-type(4) ~ .xlarge-auto {
14230 --f7-cols-per-row: 4;
14231 }
14232 .row .xlarge-auto:nth-last-of-type(5),
14233 .row .xlarge-auto:nth-last-of-type(5) ~ .xlarge-auto {
14234 --f7-cols-per-row: 5;
14235 }
14236 .row .xlarge-auto:nth-last-of-type(6),
14237 .row .xlarge-auto:nth-last-of-type(6) ~ .xlarge-auto {
14238 --f7-cols-per-row: 6;
14239 }
14240 .row .xlarge-auto:nth-last-of-type(7),
14241 .row .xlarge-auto:nth-last-of-type(7) ~ .xlarge-auto {
14242 --f7-cols-per-row: 7;
14243 }
14244 .row .xlarge-auto:nth-last-of-type(8),
14245 .row .xlarge-auto:nth-last-of-type(8) ~ .xlarge-auto {
14246 --f7-cols-per-row: 8;
14247 }
14248 .row .xlarge-auto:nth-last-of-type(9),
14249 .row .xlarge-auto:nth-last-of-type(9) ~ .xlarge-auto {
14250 --f7-cols-per-row: 9;
14251 }
14252 .row .xlarge-auto:nth-last-of-type(10),
14253 .row .xlarge-auto:nth-last-of-type(10) ~ .xlarge-auto {
14254 --f7-cols-per-row: 10;
14255 }
14256 .row .xlarge-auto:nth-last-of-type(11),
14257 .row .xlarge-auto:nth-last-of-type(11) ~ .xlarge-auto {
14258 --f7-cols-per-row: 11;
14259 }
14260 .row .xlarge-auto:nth-last-of-type(12),
14261 .row .xlarge-auto:nth-last-of-type(12) ~ .xlarge-auto {
14262 --f7-cols-per-row: 12;
14263 }
14264 .row .xlarge-auto:nth-last-of-type(13),
14265 .row .xlarge-auto:nth-last-of-type(13) ~ .xlarge-auto {
14266 --f7-cols-per-row: 13;
14267 }
14268 .row .xlarge-auto:nth-last-of-type(14),
14269 .row .xlarge-auto:nth-last-of-type(14) ~ .xlarge-auto {
14270 --f7-cols-per-row: 14;
14271 }
14272 .row .xlarge-auto:nth-last-of-type(15),
14273 .row .xlarge-auto:nth-last-of-type(15) ~ .xlarge-auto {
14274 --f7-cols-per-row: 15;
14275 }
14276 .row .xlarge-auto:nth-last-of-type(16),
14277 .row .xlarge-auto:nth-last-of-type(16) ~ .xlarge-auto {
14278 --f7-cols-per-row: 16;
14279 }
14280 .row .xlarge-auto:nth-last-of-type(17),
14281 .row .xlarge-auto:nth-last-of-type(17) ~ .xlarge-auto {
14282 --f7-cols-per-row: 17;
14283 }
14284 .row .xlarge-auto:nth-last-of-type(18),
14285 .row .xlarge-auto:nth-last-of-type(18) ~ .xlarge-auto {
14286 --f7-cols-per-row: 18;
14287 }
14288 .row .xlarge-auto:nth-last-of-type(19),
14289 .row .xlarge-auto:nth-last-of-type(19) ~ .xlarge-auto {
14290 --f7-cols-per-row: 19;
14291 }
14292 .row .xlarge-auto:nth-last-of-type(20),
14293 .row .xlarge-auto:nth-last-of-type(20) ~ .xlarge-auto {
14294 --f7-cols-per-row: 20;
14295 }
14296 .row .xlarge-auto:nth-last-of-type(21),
14297 .row .xlarge-auto:nth-last-of-type(21) ~ .xlarge-auto {
14298 --f7-cols-per-row: 21;
14299 }
14300 .row .xlarge-auto:nth-last-of-type(22),
14301 .row .xlarge-auto:nth-last-of-type(22) ~ .xlarge-auto {
14302 --f7-cols-per-row: 22;
14303 }
14304}
14305.row .resize-handler {
14306 position: absolute;
14307 -webkit-user-select: none;
14308 -moz-user-select: none;
14309 user-select: none;
14310 z-index: 100;
14311}
14312.row .resize-handler:before {
14313 content: '';
14314 position: absolute;
14315}
14316.row .resize-handler:after {
14317 content: '';
14318 position: absolute;
14319 border-radius: 4px;
14320 background: var(--f7-grid-resize-handler-bg-color);
14321}
14322.row > .resize-handler {
14323 width: 100%;
14324 height: var(--f7-grid-row-gap);
14325 left: 0;
14326 top: 100%;
14327 cursor: row-resize;
14328}
14329.row > .resize-handler:before {
14330 left: 0%;
14331 top: 50%;
14332 height: 12px;
14333 width: 100%;
14334 min-height: var(--f7-grid-row-gap);
14335 transform: translateY(-50%);
14336}
14337.row > .resize-handler:after {
14338 height: 4px;
14339 margin-top: -2px;
14340 width: 80%;
14341 max-width: 20px;
14342 left: 50%;
14343 top: 50%;
14344 transform: translateX(-50%);
14345}
14346[class*='col-'] > .resize-handler,
14347.col > .resize-handler {
14348 width: var(--f7-grid-gap);
14349 left: 100%;
14350 top: 0;
14351 height: 100%;
14352 cursor: col-resize;
14353}
14354[class*='col-'] > .resize-handler:before,
14355.col > .resize-handler:before {
14356 left: 50%;
14357 top: 0;
14358 height: 100%;
14359 width: 12px;
14360 min-width: var(--f7-grid-gap);
14361 transform: translateX(-50%);
14362}
14363[class*='col-'] > .resize-handler:after,
14364.col > .resize-handler:after {
14365 width: 4px;
14366 margin-left: -2px;
14367 height: 80%;
14368 max-height: 20px;
14369 border-radius: 4px;
14370 left: 50%;
14371 top: 50%;
14372 transform: translateY(-50%);
14373}
14374.row:last-child > .resize-handler,
14375.row:last-of-type > .resize-handler,
14376.row [class*='col-']:last-child > .resize-handler,
14377.row [class*='col-']:last-of-type > .resize-handler,
14378.row .col:last-child > .resize-handler,
14379.row .col:last-of-type > .resize-handler {
14380 display: none;
14381}
14382/* === Calendar/Datepicker === */
14383:root {
14384 --f7-calendar-height: 340px;
14385 --f7-calendar-sheet-landscape-height: 220px;
14386 --f7-calendar-popover-width: 320px;
14387 --f7-calendar-popover-height: 320px;
14388 --f7-calendar-modal-height: 420px;
14389 --f7-calendar-modal-max-width: 380px;
14390 --f7-calendar-modal-border-radius: 4px;
14391 /*
14392 --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
14393 --f7-calendar-header-link-color: var(--f7-bars-link-color);
14394 --f7-calendar-header-text-color: var(--f7-bars-text-color);
14395 --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
14396 --f7-calendar-footer-border-color: var(--f7-bars-border-color);
14397 --f7-calendar-footer-link-color: var(--f7-bars-link-color);
14398 --f7-calendar-footer-text-color: var(--f7-bars-text-color);
14399 --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
14400 --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
14401 */
14402 --f7-calendar-footer-padding: 0 8px;
14403 --f7-calendar-week-header-font-size: 11px;
14404 --f7-calendar-selected-text-color: #fff;
14405 /*
14406 --f7-calendar-selected-bg-color: var(--f7-theme-color);
14407 */
14408 --f7-calendar-prev-next-text-color: #b8b8b8;
14409 --f7-calendar-disabled-text-color: #d4d4d4;
14410 --f7-calendar-event-dot-size: 4px;
14411 /*
14412 --f7-calendar-event-bg-color: var(--f7-theme-color);
14413 */
14414 /*
14415 --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
14416 */
14417 --f7-calendar-time-selector-height: 28px;
14418 --f7-calendar-day-text-color: #000;
14419 --f7-calendar-sheet-bg-color: #fff;
14420 --f7-calendar-modal-bg-color: #fff;
14421 --f7-calendar-picker-bg-color: #fff;
14422 --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
14423 --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
14424 --f7-calendar-time-selector-bg-color: rgba(0, 0, 0, 0.1);
14425}
14426:root .theme-dark,
14427:root.theme-dark {
14428 --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
14429 --f7-calendar-modal-bg-color: #121212;
14430 --f7-calendar-sheet-bg-color: #121212;
14431 --f7-calendar-picker-bg-color: #1c1c1d;
14432 --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
14433 --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
14434 --f7-calendar-time-selector-bg-color: rgba(255, 255, 255, 0.1);
14435}
14436.ios {
14437 --f7-calendar-sheet-border-color: #929499;
14438 --f7-calendar-header-height: 44px;
14439 --f7-calendar-header-font-size: 17px;
14440 --f7-calendar-header-font-weight: 600;
14441 --f7-calendar-header-padding: 0 8px;
14442 --f7-calendar-footer-height: 44px;
14443 --f7-calendar-footer-font-size: 17px;
14444 --f7-calendar-week-header-height: 18px;
14445 --f7-calendar-day-font-size: 15px;
14446 --f7-calendar-day-size: 30px;
14447 --f7-calendar-picker-font-size: 17px;
14448 --f7-calendar-time-selector-font-size: 17px;
14449 --f7-calendar-row-border-color: rgba(0, 0, 0, 0.25);
14450 --f7-calendar-today-text-color: #000;
14451 --f7-calendar-today-bg-color: #e3e3e3;
14452}
14453.ios .theme-dark,
14454.ios.theme-dark {
14455 --f7-calendar-row-border-color: var(--f7-bars-border-color);
14456 --f7-calendar-day-text-color: #fff;
14457 --f7-calendar-today-text-color: #fff;
14458 --f7-calendar-today-bg-color: #333;
14459}
14460.md {
14461 --f7-calendar-sheet-border-color: #ccc;
14462 --f7-calendar-header-height: 56px;
14463 --f7-calendar-header-font-size: 20px;
14464 --f7-calendar-header-font-weight: 400;
14465 --f7-calendar-header-padding: 0 24px;
14466 --f7-calendar-footer-height: 48px;
14467 --f7-calendar-footer-font-size: 14px;
14468 --f7-calendar-week-header-height: 24px;
14469 --f7-calendar-row-border-color: transparent;
14470 --f7-calendar-day-font-size: 14px;
14471 /*
14472 --f7-calendar-today-text-color: var(--f7-theme-color);
14473 */
14474 --f7-calendar-today-bg-color: none;
14475 --f7-calendar-day-size: 32px;
14476 --f7-calendar-picker-font-size: 14px;
14477 --f7-calendar-time-selector-font-size: 14px;
14478}
14479.md .theme-dark,
14480.md.theme-dark {
14481 --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
14482}
14483.aurora {
14484 --f7-calendar-sheet-border-color: #ccc;
14485 --f7-calendar-header-height: 38px;
14486 --f7-calendar-header-font-size: 14px;
14487 --f7-calendar-header-font-weight: 600;
14488 --f7-calendar-header-padding: 0 8px;
14489 --f7-calendar-footer-height: 38px;
14490 --f7-calendar-footer-font-size: 14px;
14491 --f7-calendar-week-header-height: 18px;
14492 --f7-calendar-day-font-size: 13px;
14493 --f7-calendar-day-size: 30px;
14494 --f7-calendar-picker-font-size: 14px;
14495 --f7-calendar-time-selector-font-size: 14px;
14496 --f7-calendar-row-border-color: #e3e3e3;
14497 --f7-calendar-today-text-color: #000;
14498 --f7-calendar-today-bg-color: #e3e3e3;
14499}
14500.aurora .theme-dark,
14501.aurora.theme-dark {
14502 --f7-calendar-row-border-color: var(--f7-bars-border-color);
14503 --f7-calendar-day-text-color: #fff;
14504 --f7-calendar-today-text-color: #fff;
14505 --f7-calendar-today-bg-color: #333;
14506}
14507.calendar {
14508 overflow: hidden;
14509 height: var(--f7-calendar-height);
14510 width: 100%;
14511 display: flex;
14512 flex-direction: column;
14513}
14514.calendar.modal-in {
14515 display: flex;
14516}
14517@media (orientation: landscape) and (max-height: 415px) {
14518 .calendar.calendar-sheet {
14519 height: var(--f7-calendar-sheet-landscape-height);
14520 }
14521 .calendar.calendar-modal {
14522 height: calc(100vh - var(--f7-navbar-height));
14523 }
14524}
14525.calendar.calendar-inline,
14526.calendar.calendar-popover .calendar {
14527 position: relative;
14528}
14529.calendar-sheet {
14530 --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
14531 background: var(--f7-calendar-sheet-bg-color);
14532 padding-bottom: var(--f7-safe-area-bottom);
14533 height: calc(var(--f7-calendar-height) + var(--f7-safe-area-bottom));
14534}
14535.calendar-sheet:before {
14536 z-index: 600;
14537}
14538.calendar-sheet .toolbar:before,
14539.calendar-modal .toolbar:before,
14540.calendar-popover .toolbar:before {
14541 display: none;
14542}
14543.calendar-popover {
14544 width: var(--f7-calendar-popover-width);
14545}
14546.calendar-popover .toolbar-top,
14547.calendar-popover .calendar-header {
14548 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
14549}
14550.calendar-popover .calendar-header + .toolbar-top {
14551 border-radius: 0;
14552}
14553.calendar-popover .toolbar-bottom,
14554.calendar-popover .calendar-footer {
14555 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
14556}
14557.calendar-popover .calendar {
14558 height: var(--f7-calendar-popover-height);
14559 position: relative;
14560 z-index: 1;
14561}
14562.calendar-popover .calendar-month-picker,
14563.calendar-popover .calendar-year-picker,
14564.calendar-popover .calendar-time-picker {
14565 border-radius: var(--f7-popover-border-radius);
14566}
14567.calendar-header {
14568 width: 100%;
14569 position: relative;
14570 overflow: hidden;
14571 flex-shrink: 0;
14572 white-space: nowrap;
14573 text-overflow: ellipsis;
14574 box-sizing: border-box;
14575 padding: var(--f7-calendar-header-padding);
14576 background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
14577 color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
14578 height: var(--f7-calendar-header-height);
14579 line-height: var(--f7-calendar-header-height);
14580 font-size: var(--f7-calendar-header-font-size);
14581 font-weight: var(--f7-calendar-header-font-weight);
14582}
14583.calendar-header a {
14584 color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14585}
14586.calendar-footer {
14587 width: 100%;
14588 flex-shrink: 0;
14589 padding: var(--f7-calendar-footer-padding);
14590 background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
14591 color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
14592 height: var(--f7-calendar-footer-height);
14593 font-size: var(--f7-calendar-header-font-size);
14594 display: flex;
14595 justify-content: flex-end;
14596 box-sizing: border-box;
14597 align-items: center;
14598 position: relative;
14599}
14600.calendar-footer a {
14601 color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14602}
14603.calendar-footer:before {
14604 content: '';
14605 position: absolute;
14606 background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
14607 display: block;
14608 z-index: 15;
14609 top: 0;
14610 right: auto;
14611 bottom: auto;
14612 left: 0;
14613 height: 1px;
14614 width: 100%;
14615 transform-origin: 50% 0%;
14616 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14617}
14618.calendar-modal {
14619 position: absolute;
14620 height: var(--f7-calendar-modal-height);
14621 overflow: hidden;
14622 top: 50%;
14623 left: 50%;
14624 min-width: 300px;
14625 max-width: var(--f7-calendar-modal-max-width);
14626 transform: translate3d(-50%, 100vh, 0);
14627 transition-property: transform;
14628 display: flex;
14629 z-index: 13500;
14630 background: var(--f7-calendar-modal-bg-color);
14631 width: 90%;
14632 border-radius: var(--f7-calendar-modal-border-radius);
14633 box-shadow: var(--f7-elevation-24);
14634}
14635.calendar-modal.modal-in,
14636.calendar-modal.modal-out {
14637 transition-duration: 400ms;
14638}
14639.calendar-modal.modal-in {
14640 transform: translate3d(-50%, -50%, 0);
14641}
14642.calendar-modal.modal-out {
14643 transform: translate3d(-50%, 100vh, 0);
14644}
14645.calendar-week-header {
14646 display: flex;
14647 box-sizing: border-box;
14648 position: relative;
14649 font-size: var(--f7-calendar-week-header-font-size);
14650 background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
14651 color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
14652 height: var(--f7-calendar-week-header-height);
14653 padding-left: var(--f7-safe-area-left);
14654 padding-right: var(--f7-safe-area-right);
14655}
14656.calendar-week-header .calendar-week-day {
14657 flex-shrink: 1;
14658 width: calc(100% / 7);
14659 text-align: center;
14660 line-height: var(--f7-calendar-week-header-height);
14661}
14662.calendar-months {
14663 width: 100%;
14664 height: 100%;
14665 overflow: hidden;
14666 position: relative;
14667 flex-shrink: 10;
14668}
14669.calendar-months-wrapper {
14670 position: relative;
14671 width: 100%;
14672 height: 100%;
14673 transition: 300ms;
14674}
14675.calendar-month {
14676 display: flex;
14677 flex-direction: column;
14678 width: 100%;
14679 height: 100%;
14680 position: absolute;
14681 left: 0;
14682 top: 0;
14683}
14684.calendar-row {
14685 height: 16.66666667%;
14686 height: calc(100% / 6);
14687 display: flex;
14688 flex-shrink: 1;
14689 width: 100%;
14690 position: relative;
14691 box-sizing: border-box;
14692 padding-left: var(--f7-safe-area-left);
14693 padding-right: var(--f7-safe-area-right);
14694}
14695.calendar-row:before {
14696 content: '';
14697 position: absolute;
14698 background-color: var(--f7-calendar-row-border-color);
14699 display: block;
14700 z-index: 15;
14701 top: 0;
14702 right: auto;
14703 bottom: auto;
14704 left: 0;
14705 height: 1px;
14706 width: 100%;
14707 transform-origin: 50% 0%;
14708 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14709}
14710.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
14711.calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
14712 display: none !important;
14713}
14714.calendar-day {
14715 flex-shrink: 1;
14716 display: flex;
14717 justify-content: center;
14718 align-items: center;
14719 box-sizing: border-box;
14720 width: 14.28571429%;
14721 width: calc(100% / 7);
14722 text-align: center;
14723 cursor: pointer;
14724 z-index: 20;
14725 color: var(--f7-calendar-day-text-color);
14726 height: 100%;
14727 font-size: var(--f7-calendar-day-font-size);
14728}
14729.calendar-day-today .calendar-day-number {
14730 color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
14731 background-color: var(--f7-calendar-today-bg-color);
14732}
14733.calendar-day-prev,
14734.calendar-day-next {
14735 color: var(--f7-calendar-prev-next-text-color);
14736}
14737.calendar-day-disabled {
14738 color: var(--f7-calendar-disabled-text-color);
14739 cursor: auto;
14740}
14741.calendar-day-selected .calendar-day-number {
14742 color: var(--f7-calendar-selected-text-color);
14743 background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
14744}
14745.calendar-day-number {
14746 display: inline-block;
14747 border-radius: 50%;
14748 position: relative;
14749 width: var(--f7-calendar-day-size);
14750 height: var(--f7-calendar-day-size);
14751 line-height: var(--f7-calendar-day-size);
14752}
14753.calendar-day-events {
14754 position: absolute;
14755 display: flex;
14756 left: 0;
14757 width: 100%;
14758 top: 100%;
14759 align-items: center;
14760 justify-content: center;
14761 margin-top: 1px;
14762}
14763.calendar-day-event {
14764 width: var(--f7-calendar-event-dot-size);
14765 height: var(--f7-calendar-event-dot-size);
14766 border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
14767 background-color: var(--f7-calendar-event-bg-color);
14768}
14769.calendar-day-event + .calendar-day-event {
14770 margin-left: 2px;
14771}
14772.calendar-day-selected-range,
14773.calendar-day-selected-left,
14774.calendar-day-selected-right {
14775 position: relative;
14776}
14777.calendar-day-selected-range:before,
14778.calendar-day-selected-left:before,
14779.calendar-day-selected-right:before {
14780 width: 100%;
14781 height: var(--f7-calendar-day-size);
14782 content: '';
14783 position: absolute;
14784 left: 0;
14785 top: 50%;
14786 transform: translateY(-50%);
14787 z-index: -1;
14788 background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
14789 opacity: 0.2;
14790}
14791.calendar-day-selected-range:first-child:before,
14792.calendar-day-selected-left:before {
14793 left: auto;
14794 right: 0;
14795 width: calc(50% + var(--f7-calendar-day-size) / 2);
14796 border-radius: var(--f7-calendar-day-size) 0 0 var(--f7-calendar-day-size);
14797}
14798.calendar-day-selected-range:last-child:before,
14799.calendar-day-selected-right:before {
14800 width: calc(50% + var(--f7-calendar-day-size) / 2);
14801 border-radius: 0 var(--f7-calendar-day-size) var(--f7-calendar-day-size) 0;
14802}
14803.calendar-day-selected-left:last-child:before,
14804.calendar-day-selected-right:first-child:before {
14805 display: none;
14806}
14807.calendar-day-selected-range .calendar-day-number {
14808 background-color: transparent;
14809 color: inherit;
14810}
14811.calendar-month-selector,
14812.calendar-year-selector {
14813 display: flex;
14814 justify-content: space-between;
14815 align-items: center;
14816 width: 50%;
14817 max-width: 200px;
14818 flex-shrink: 10;
14819 margin-left: auto;
14820 margin-right: auto;
14821}
14822.calendar-month-selector .calendar-day-number,
14823.calendar-year-selector .calendar-day-number {
14824 flex-shrink: 1;
14825 position: relative;
14826 overflow: hidden;
14827 text-overflow: ellipsis;
14828}
14829.calendar-month-selector a.icon-only,
14830.calendar-year-selector a.icon-only {
14831 min-width: 36px;
14832}
14833.calendar-month-picker,
14834.calendar-year-picker,
14835.calendar-time-picker {
14836 position: absolute;
14837 width: 100%;
14838 height: 100%;
14839 left: 0px;
14840 top: 0px;
14841 background: var(--f7-calendar-picker-bg-color);
14842 z-index: 1000;
14843 -webkit-user-select: none;
14844 -moz-user-select: none;
14845 user-select: none;
14846}
14847.calendar-month-picker,
14848.calendar-year-picker {
14849 flex-wrap: wrap;
14850 font-size: var(--f7-calendar-picker-font-size);
14851 display: flex;
14852}
14853.calendar-month-picker-item,
14854.calendar-year-picker-item {
14855 display: flex;
14856 justify-content: center;
14857 align-items: center;
14858 position: relative;
14859 overflow: hidden;
14860 cursor: pointer;
14861 transition-duration: 100ms;
14862 box-sizing: border-box;
14863}
14864.calendar-month-picker-item span,
14865.calendar-year-picker-item span {
14866 white-space: nowrap;
14867 text-overflow: ellipsis;
14868 box-sizing: border-box;
14869 position: relative;
14870 overflow: hidden;
14871 pointer-events: none;
14872}
14873.device-desktop.aurora .calendar-month-picker-item:hover,
14874.device-desktop.aurora .calendar-year-picker-item:hover {
14875 background-color: var(--f7-calendar-picker-hover-bg-color);
14876}
14877.calendar-month-picker-item.active-state,
14878.calendar-year-picker-item.active-state,
14879.device-desktop.aurora .calendar-month-picker-item.active-state,
14880.device-desktop.aurora .calendar-year-picker-item.active-state {
14881 background: var(--f7-calendar-picker-pressed-bg-color);
14882}
14883.calendar-month-picker-item {
14884 padding: 5px;
14885}
14886.calendar-month-picker-item:after {
14887 content: '';
14888 position: absolute;
14889 background-color: var(--f7-calendar-row-border-color);
14890 display: block;
14891 z-index: 15;
14892 top: auto;
14893 right: auto;
14894 bottom: 0;
14895 left: 0;
14896 height: 1px;
14897 width: 100%;
14898 transform-origin: 50% 100%;
14899 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14900}
14901.calendar-month-picker-item:before {
14902 content: '';
14903 position: absolute;
14904 background-color: var(--f7-calendar-row-border-color);
14905 display: block;
14906 z-index: 15;
14907 top: 0;
14908 right: auto;
14909 bottom: auto;
14910 left: 0;
14911 width: 1px;
14912 height: 100%;
14913 transform-origin: 0% 50%;
14914 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
14915}
14916.sheet-modal .calendar-month-picker-item {
14917 width: 25%;
14918 height: calc(100% / 3);
14919}
14920.sheet-modal .calendar-month-picker-item:nth-child(4n + 1):before {
14921 display: none !important;
14922}
14923.sheet-modal .calendar-month-picker-item:nth-child(n + 9):after {
14924 display: none !important;
14925}
14926.popover .calendar-month-picker-item,
14927.calendar-modal .calendar-month-picker-item {
14928 width: calc(100% / 3);
14929 height: 25%;
14930}
14931.popover .calendar-month-picker-item:nth-child(3n + 1):before,
14932.calendar-modal .calendar-month-picker-item:nth-child(3n + 1):before {
14933 display: none !important;
14934}
14935.popover .calendar-month-picker-item:nth-child(n + 10):after,
14936.calendar-modal .calendar-month-picker-item:nth-child(n + 10):after {
14937 display: none !important;
14938}
14939.calendar-month-picker-item-current,
14940.calendar-year-picker-item-current {
14941 color: var(--f7-calendar-picker-selected-text-color, var(--f7-theme-color));
14942}
14943.calendar-year-picker {
14944 overflow: auto;
14945 --webkit-overflow-scrolling: touch;
14946}
14947.calendar-year-picker-item {
14948 height: 34px;
14949 line-height: 34px;
14950 width: 100%;
14951}
14952.calendar-year-picker-item:after {
14953 content: '';
14954 position: absolute;
14955 background-color: var(--f7-calendar-row-border-color);
14956 display: block;
14957 z-index: 15;
14958 top: auto;
14959 right: auto;
14960 bottom: 0;
14961 left: 0;
14962 height: 1px;
14963 width: 100%;
14964 transform-origin: 50% 100%;
14965 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14966}
14967.calendar-time-selector {
14968 flex-shrink: 0;
14969 font-size: var(--f7-calendar-time-selector-font-size);
14970 position: relative;
14971 display: flex;
14972 justify-content: center;
14973 padding: 12px 16px;
14974}
14975.calendar-time-selector:before {
14976 content: '';
14977 position: absolute;
14978 background-color: var(--f7-calendar-row-border-color);
14979 display: block;
14980 z-index: 15;
14981 top: 0;
14982 right: auto;
14983 bottom: auto;
14984 left: 0;
14985 height: 1px;
14986 width: 100%;
14987 transform-origin: 50% 0%;
14988 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
14989}
14990.calendar-time-selector a {
14991 overflow: hidden;
14992 position: relative;
14993 justify-content: center;
14994 align-items: center;
14995 display: flex;
14996 min-width: 200px;
14997 box-sizing: border-box;
14998 height: var(--f7-calendar-time-selector-height);
14999 background-color: var(--f7-calendar-time-selector-bg-color);
15000 padding: 0 10px;
15001 border-radius: 8px;
15002}
15003.calendar-time-selector .segmented {
15004 margin-left: 8px;
15005}
15006.calendar-time-picker {
15007 --f7-picker-popover-height: 100%;
15008 --f7-picker-inline-height: 100%;
15009}
15010.calendar-time-picker .toolbar {
15011 flex-shrink: 0;
15012 top: 0 !important;
15013}
15014.calendar-time-picker .picker {
15015 height: 100%;
15016 display: flex;
15017 flex-direction: column;
15018}
15019/* === Picker === */
15020:root {
15021 --f7-picker-height: 260px;
15022 --f7-picker-inline-height: 200px;
15023 --f7-picker-popover-height: 200px;
15024 --f7-picker-popover-width: 280px;
15025 --f7-picker-landscape-height: 200px;
15026 --f7-picker-item-height: 36px;
15027 /*
15028 --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
15029 */
15030 --f7-picker-item-selected-bg-color: rgba(0, 0, 0, 0.12);
15031 --f7-picker-item-selected-text-color: #000;
15032}
15033:root .theme-dark,
15034:root.theme-dark {
15035 --f7-picker-item-selected-bg-color: rgba(255, 255, 255, 0.1);
15036 --f7-picker-item-selected-text-color: #fff;
15037}
15038.ios {
15039 --f7-picker-column-font-size: 20px;
15040 --f7-picker-divider-text-color: #000;
15041 --f7-picker-item-text-color: rgba(0, 0, 0, 0.45);
15042}
15043.ios .theme-dark,
15044.ios.theme-dark {
15045 --f7-picker-divider-text-color: #fff;
15046 --f7-picker-item-text-color: rgba(255, 255, 255, 0.55);
15047}
15048.md {
15049 --f7-picker-column-font-size: 20px;
15050 --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
15051 --f7-picker-item-text-color: rgba(0, 0, 0, 0.54);
15052}
15053.md .theme-dark,
15054.md.theme-dark {
15055 --f7-picker-item-text-color: rgba(255, 255, 255, 0.54);
15056 --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
15057}
15058.aurora {
15059 --f7-picker-column-font-size: 16px;
15060 --f7-picker-item-height: 28px;
15061 --f7-picker-item-text-color: #888;
15062 --f7-picker-divider-text-color: #000;
15063}
15064.aurora .theme-dark,
15065.aurora.theme-dark {
15066 --f7-picker-divider-text-color: #fff;
15067}
15068.picker {
15069 width: 100%;
15070 height: var(--f7-picker-height);
15071}
15072.picker.picker-inline {
15073 height: var(--f7-picker-inline-height);
15074}
15075.popover .picker {
15076 height: var(--f7-picker-popover-height);
15077}
15078@media (orientation: landscape) and (max-height: 415px) {
15079 .picker:not(.picker-inline) {
15080 height: var(--f7-picker-landscape-height);
15081 }
15082}
15083.picker.sheet-modal {
15084 background: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
15085}
15086.picker-popover {
15087 width: var(--f7-picker-popover-width);
15088}
15089.picker-popover .toolbar {
15090 background: none;
15091 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
15092}
15093.picker-popover .toolbar:before {
15094 display: none !important;
15095}
15096.picker-popover .toolbar + .picker-columns {
15097 height: calc(100% - var(--f7-toolbar-height));
15098}
15099.picker-columns {
15100 display: flex;
15101 overflow: hidden;
15102 justify-content: center;
15103 padding: 0;
15104 text-align: right;
15105 height: 100%;
15106 position: relative;
15107 -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
15108 font-size: var(--f7-picker-column-font-size);
15109}
15110.picker-column {
15111 position: relative;
15112 max-height: 100%;
15113}
15114.picker-column.picker-column-first:before,
15115.picker-column.picker-column-last:after {
15116 height: 100%;
15117 width: 100vw;
15118 position: absolute;
15119 content: '';
15120 top: 0;
15121}
15122.picker-column.picker-column-first:before {
15123 right: 100%;
15124}
15125.picker-column.picker-column-last:after {
15126 left: 100%;
15127}
15128.picker-column.picker-column-left {
15129 text-align: left;
15130}
15131.picker-column.picker-column-center {
15132 text-align: center;
15133}
15134.picker-column.picker-column-right {
15135 text-align: right;
15136}
15137.picker-column.picker-column-divider {
15138 display: flex;
15139 align-items: center;
15140 color: var(--f7-picker-divider-text-color);
15141}
15142.picker-items {
15143 transition: 300ms;
15144 transition-timing-function: ease-out;
15145}
15146.picker-item {
15147 height: var(--f7-picker-item-height);
15148 line-height: var(--f7-picker-item-height);
15149 white-space: nowrap;
15150 position: relative;
15151 overflow: hidden;
15152 text-overflow: ellipsis;
15153 left: 0;
15154 top: 0;
15155 width: 100%;
15156 box-sizing: border-box;
15157 transition: 300ms;
15158 color: var(--f7-picker-item-text-color);
15159 cursor: pointer;
15160}
15161.picker-item span {
15162 padding: 0 10px;
15163}
15164.picker-column-absolute .picker-item {
15165 position: absolute;
15166}
15167.picker-item.picker-item-far {
15168 pointer-events: none;
15169}
15170.picker-item.picker-item-selected {
15171 color: var(--f7-picker-item-selected-text-color);
15172 transform: translate3d(0, 0, 0) rotateX(0deg);
15173}
15174.picker-center-highlight {
15175 height: var(--f7-picker-item-height);
15176 box-sizing: border-box;
15177 position: absolute;
15178 left: 16px;
15179 right: 16px;
15180 top: 50%;
15181 margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
15182 pointer-events: none;
15183 background-color: var(--f7-picker-item-selected-bg-color);
15184 border-radius: 8px;
15185}
15186.popover .picker-center-highlight {
15187 left: 8px;
15188 right: 8px;
15189}
15190.picker-3d .picker-columns {
15191 overflow: hidden;
15192 perspective: 1200px;
15193}
15194.picker-3d .picker-column,
15195.picker-3d .picker-items,
15196.picker-3d .picker-item {
15197 transform-style: preserve-3d;
15198}
15199.picker-3d .picker-column {
15200 overflow: visible;
15201}
15202.picker-3d .picker-item {
15203 transform-origin: center center -110px;
15204 -webkit-backface-visibility: hidden;
15205 backface-visibility: hidden;
15206 transition-timing-function: ease-out;
15207}
15208/* === Infinite === */
15209.infinite-scroll-preloader {
15210 margin-left: auto;
15211 margin-right: auto;
15212 text-align: center;
15213}
15214.infinite-scroll-preloader.preloader {
15215 display: block;
15216}
15217.ios .infinite-scroll-preloader {
15218 margin-top: 35px;
15219 margin-bottom: 35px;
15220}
15221.ios .infinite-scroll-preloader .preloader,
15222.ios .infinite-scroll-preloader.preloader {
15223 width: 27px;
15224 height: 27px;
15225}
15226.md .infinite-scroll-preloader {
15227 margin-top: 32px;
15228 margin-bottom: 32px;
15229}
15230.aurora .infinite-scroll-preloader {
15231 margin-top: 15px;
15232 margin-bottom: 15px;
15233}
15234/* === PTR === */
15235.ios {
15236 --f7-ptr-preloader-size: 28px;
15237 --f7-ptr-size: 44px;
15238}
15239.md {
15240 --f7-ptr-preloader-size: 22px;
15241 --f7-ptr-size: 40px;
15242}
15243.aurora {
15244 --f7-ptr-preloader-size: 20px;
15245 --f7-ptr-size: 38px;
15246}
15247.ptr-preloader {
15248 position: relative;
15249 top: var(--f7-ptr-top, 0);
15250 height: var(--f7-ptr-size);
15251}
15252.ptr-preloader .preloader {
15253 position: absolute;
15254 left: 50%;
15255 width: var(--f7-ptr-preloader-size);
15256 height: var(--f7-ptr-preloader-size);
15257 margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
15258 margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
15259 top: 50%;
15260 visibility: hidden;
15261}
15262.ptr-bottom .ptr-preloader {
15263 top: auto;
15264 bottom: 0;
15265 position: fixed;
15266}
15267.ptr-with-navbar-large-transparent .ptr-preloader,
15268.ptr-with-navbar-transparent .ptr-preloader {
15269 top: calc(-1 * var(--f7-page-navbar-offset, 0px) + var(--f7-safe-area-top));
15270}
15271.ios .ptr-preloader {
15272 margin-top: calc(-1 * var(--f7-ptr-size));
15273 width: 100%;
15274 left: 0;
15275}
15276.ios .ptr-arrow {
15277 position: absolute;
15278 left: 50%;
15279 top: 50%;
15280 background: no-repeat center;
15281 z-index: 10;
15282 transform: rotate(0deg) translate3d(0, 0, 0);
15283 transition-duration: 300ms;
15284 transition-property: transform, opacity;
15285 width: 12px;
15286 height: 20px;
15287 margin-left: -6px;
15288 margin-top: -10px;
15289 visibility: visible;
15290 color: var(--f7-preloader-color);
15291}
15292.ios .ptr-arrow:after {
15293 font-family: 'framework7-core-icons';
15294 font-weight: normal;
15295 font-style: normal;
15296 line-height: 1;
15297 letter-spacing: normal;
15298 text-transform: none;
15299 white-space: nowrap;
15300 word-wrap: normal;
15301 direction: ltr;
15302 -webkit-font-smoothing: antialiased;
15303 text-rendering: optimizeLegibility;
15304 -moz-osx-font-smoothing: grayscale;
15305 font-feature-settings: 'liga';
15306 text-align: center;
15307 display: block;
15308 width: 100%;
15309 height: 100%;
15310 font-size: 20px;
15311 width: 12px;
15312 height: 20px;
15313 line-height: 20px;
15314 font-size: 10px;
15315 content: 'ptr_arrow_ios';
15316}
15317.ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader,
15318.ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader-inner {
15319 animation: none;
15320}
15321.ios .ptr-transitioning,
15322.ios .ptr-refreshing {
15323 transition-duration: 300ms;
15324 transition-property: transform;
15325}
15326.ios .ptr-refreshing {
15327 transform: translate3d(0, var(--f7-ptr-size), 0);
15328}
15329.ios .ptr-refreshing .ptr-arrow {
15330 visibility: hidden;
15331}
15332.ios .ptr-refreshing .ptr-preloader .preloader {
15333 visibility: visible;
15334}
15335.ios .ptr-pull-up .ptr-arrow {
15336 transform: rotate(180deg) translate3d(0, 0, 0);
15337}
15338.ios .ptr-no-navbar,
15339.ios .ptr-with-navbar-large-transparent,
15340.ios .ptr-with-navbar-transparent {
15341 margin-top: calc(-1 * var(--f7-ptr-size));
15342 height: calc(100% + var(--f7-ptr-size));
15343}
15344.ios .ptr-no-navbar .ptr-preloader,
15345.ios .ptr-with-navbar-large-transparent .ptr-preloader,
15346.ios .ptr-with-navbar-transparent .ptr-preloader {
15347 margin-top: 0;
15348}
15349.ios .ptr-bottom .ptr-preloader {
15350 margin-top: 0;
15351 margin-bottom: calc(-1 * var(--f7-ptr-size));
15352}
15353.ios .ptr-bottom.ptr-transitioning > *,
15354.ios .ptr-bottom.ptr-refreshing > * {
15355 transition-duration: 300ms;
15356 transition-property: transform;
15357}
15358.ios .ptr-bottom.ptr-refreshing {
15359 transform: none;
15360}
15361.ios .ptr-bottom.ptr-refreshing > * {
15362 transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
15363}
15364.ios .ptr-bottom .ptr-arrow {
15365 transform: rotate(180deg) translate3d(0, 0, 0);
15366}
15367.ios .ptr-bottom.ptr-pull-up .ptr-arrow {
15368 transform: rotate(0deg) translate3d(0, 0, 0);
15369}
15370.ios .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
15371.ios .ptr-with-navbar-transparent .ptr-preloader .preloader,
15372.ios .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
15373.ios .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
15374 opacity: 0;
15375 transition-duration: 300ms;
15376 transition-property: transform, opacity;
15377}
15378.ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
15379.ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
15380.ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
15381.ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
15382.ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
15383.ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
15384.ios .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
15385.ios .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
15386.ios .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
15387.ios .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
15388.ios .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
15389.ios .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
15390 opacity: 1;
15391}
15392.ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
15393.ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
15394.ios .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
15395.ios .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
15396 opacity: 0;
15397 transition-duration: 300ms;
15398}
15399.md {
15400 --f7-ptr-top: -4px;
15401}
15402.md .ptr-preloader {
15403 width: var(--f7-ptr-size);
15404 border-radius: 50%;
15405 background: #fff;
15406 margin-top: calc(-1 * var(--f7-ptr-size));
15407 z-index: 100;
15408 box-shadow: var(--f7-elevation-1);
15409 left: 50%;
15410 margin-left: calc(-1 * var(--f7-ptr-size) / 2);
15411}
15412.md .ptr-preloader .preloader circle {
15413 stroke-width: 4;
15414}
15415.md .ptr-arrow {
15416 width: 22px;
15417 height: 22px;
15418 box-sizing: border-box;
15419 border: 3px solid var(--f7-preloader-color);
15420 position: absolute;
15421 left: 50%;
15422 top: 50%;
15423 margin-left: -11px;
15424 margin-top: -11px;
15425 border-left-color: transparent;
15426 border-radius: 50%;
15427 opacity: 1;
15428 transform: rotate(150deg);
15429}
15430.md .ptr-arrow:after {
15431 content: '';
15432 width: 0px;
15433 height: 0px;
15434 position: absolute;
15435 left: -5px;
15436 bottom: 0px;
15437 border-bottom-width: 6px;
15438 border-bottom-style: solid;
15439 border-bottom-color: inherit;
15440 border-left: 5px solid transparent;
15441 border-right: 5px solid transparent;
15442 transform: rotate(-40deg);
15443}
15444.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
15445.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader-inner,
15446.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader circle {
15447 animation: none;
15448}
15449.md .ptr-refreshing .ptr-preloader .preloader,
15450.md .ptr-pull-up .ptr-preloader .preloader {
15451 visibility: visible;
15452}
15453.md .ptr-refreshing .ptr-arrow,
15454.md .ptr-pull-up .ptr-arrow {
15455 visibility: hidden;
15456}
15457.md .ptr-refreshing .ptr-preloader {
15458 transform: translate3d(0, 66px, 0);
15459}
15460.md .ptr-transitioning .ptr-arrow {
15461 transition: 300ms;
15462}
15463.md .ptr-pull-up .ptr-arrow {
15464 transition: 400ms;
15465 transform: rotate(620deg) !important;
15466 opacity: 0;
15467}
15468.md .ptr-transitioning .ptr-preloader,
15469.md .ptr-refreshing .ptr-preloader {
15470 transition-duration: 300ms;
15471 transition-property: transform, opacity;
15472}
15473.md .ptr-bottom .ptr-preloader {
15474 margin-top: 0;
15475 margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
15476}
15477.md .ptr-bottom.ptr-refreshing .ptr-preloader {
15478 transform: translate3d(0, -66px, 0);
15479}
15480.md .ptr-with-navbar-large-transparent .ptr-preloader,
15481.md .ptr-with-navbar-transparent .ptr-preloader {
15482 opacity: 0;
15483}
15484.md .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader,
15485.md .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader,
15486.md .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader,
15487.md .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader,
15488.md .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader,
15489.md .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader {
15490 opacity: 1;
15491}
15492.md .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader,
15493.md .ptr-with-navbar-transparent.ptr-closing .ptr-preloader {
15494 opacity: 0;
15495 transition-duration: 300ms;
15496}
15497.aurora .ptr-preloader {
15498 margin-top: calc(-1 * var(--f7-ptr-size));
15499 width: 100%;
15500 left: 0;
15501}
15502.aurora .ptr-arrow {
15503 position: absolute;
15504 left: 50%;
15505 top: 50%;
15506 background: no-repeat center;
15507 z-index: 10;
15508 transform: rotate(0deg) translate3d(0, 0, 0);
15509 transition-duration: 300ms;
15510 transition-property: transform, opacity;
15511 width: 12px;
15512 height: 20px;
15513 margin-left: -6px;
15514 margin-top: -10px;
15515 visibility: visible;
15516 color: var(--f7-preloader-color);
15517}
15518.aurora .ptr-arrow:after {
15519 font-family: 'framework7-core-icons';
15520 font-weight: normal;
15521 font-style: normal;
15522 line-height: 1;
15523 letter-spacing: normal;
15524 text-transform: none;
15525 white-space: nowrap;
15526 word-wrap: normal;
15527 direction: ltr;
15528 -webkit-font-smoothing: antialiased;
15529 text-rendering: optimizeLegibility;
15530 -moz-osx-font-smoothing: grayscale;
15531 font-feature-settings: 'liga';
15532 text-align: center;
15533 display: block;
15534 width: 100%;
15535 height: 100%;
15536 font-size: 20px;
15537 width: 12px;
15538 height: 20px;
15539 line-height: 20px;
15540 font-size: 8px;
15541 content: 'ptr_arrow_ios';
15542}
15543.aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader,
15544.aurora .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader-inner {
15545 animation: none;
15546}
15547.aurora .ptr-transitioning,
15548.aurora .ptr-refreshing {
15549 transition-duration: 300ms;
15550 transition-property: transform;
15551}
15552.aurora .ptr-refreshing {
15553 transform: translate3d(0, var(--f7-ptr-size), 0);
15554}
15555.aurora .ptr-refreshing .ptr-arrow {
15556 visibility: hidden;
15557}
15558.aurora .ptr-refreshing .ptr-preloader .preloader {
15559 visibility: visible;
15560}
15561.aurora .ptr-pull-up .ptr-arrow {
15562 transform: rotate(180deg) translate3d(0, 0, 0);
15563}
15564.aurora .ptr-no-navbar,
15565.aurora .ptr-with-navbar-large-transparent,
15566.aurora .ptr-with-navbar-transparent {
15567 margin-top: calc(-1 * var(--f7-ptr-size));
15568 height: calc(100% + var(--f7-ptr-size));
15569}
15570.aurora .ptr-no-navbar .ptr-preloader,
15571.aurora .ptr-with-navbar-large-transparent .ptr-preloader,
15572.aurora .ptr-with-navbar-transparent .ptr-preloader {
15573 margin-top: 0;
15574}
15575.aurora .ptr-bottom .ptr-preloader {
15576 margin-top: 0;
15577 margin-bottom: calc(-1 * var(--f7-ptr-size));
15578}
15579.aurora .ptr-bottom.ptr-transitioning > *,
15580.aurora .ptr-bottom.ptr-refreshing > * {
15581 transition-duration: 300ms;
15582 transition-property: transform;
15583}
15584.aurora .ptr-bottom.ptr-refreshing {
15585 transform: none;
15586}
15587.aurora .ptr-bottom.ptr-refreshing > * {
15588 transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
15589}
15590.aurora .ptr-bottom .ptr-arrow {
15591 transform: rotate(180deg) translate3d(0, 0, 0);
15592}
15593.aurora .ptr-bottom.ptr-pull-up .ptr-arrow {
15594 transform: rotate(0deg) translate3d(0, 0, 0);
15595}
15596.aurora .ptr-with-navbar-large-transparent .ptr-preloader .preloader,
15597.aurora .ptr-with-navbar-transparent .ptr-preloader .preloader,
15598.aurora .ptr-with-navbar-large-transparent .ptr-preloader .ptr-arrow,
15599.aurora .ptr-with-navbar-transparent .ptr-preloader .ptr-arrow {
15600 opacity: 0;
15601 transition-duration: 300ms;
15602 transition-property: transform, opacity;
15603}
15604.aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .preloader,
15605.aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .preloader,
15606.aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .preloader,
15607.aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .preloader,
15608.aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .preloader,
15609.aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .preloader,
15610.aurora .ptr-with-navbar-large-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
15611.aurora .ptr-with-navbar-transparent.ptr-pull-down .ptr-preloader .ptr-arrow,
15612.aurora .ptr-with-navbar-large-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
15613.aurora .ptr-with-navbar-transparent.ptr-pull-up .ptr-preloader .ptr-arrow,
15614.aurora .ptr-with-navbar-large-transparent.ptr-refreshing .ptr-preloader .ptr-arrow,
15615.aurora .ptr-with-navbar-transparent.ptr-refreshing .ptr-preloader .ptr-arrow {
15616 opacity: 1;
15617}
15618.aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .preloader,
15619.aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .preloader,
15620.aurora .ptr-with-navbar-large-transparent.ptr-closing .ptr-preloader .ptr-arrow,
15621.aurora .ptr-with-navbar-transparent.ptr-closing .ptr-preloader .ptr-arrow {
15622 opacity: 0;
15623 transition-duration: 300ms;
15624}
15625/* === Images Lazy Loading === */
15626.lazy-loaded.lazy-fade-in {
15627 animation: lazyFadeIn 600ms;
15628}
15629@keyframes lazyFadeIn {
15630 from {
15631 opacity: 0;
15632 }
15633 to {
15634 opacity: 1;
15635 }
15636}
15637/* === Data Table === */
15638:root {
15639 --f7-table-head-font-size: 12px;
15640 --f7-table-body-font-size: 14px;
15641 --f7-table-footer-font-size: 12px;
15642 --f7-table-input-height: 24px;
15643 --f7-table-input-font-size: 14px;
15644 --f7-table-collapsible-cell-padding: 16px;
15645 --f7-table-link-icon-only-icon-size: 20px;
15646 --f7-table-sortable-icon-color: #000;
15647}
15648:root .theme-dark,
15649:root.theme-dark {
15650 --f7-table-cell-border-color: rgba(255, 255, 255, 0.15);
15651 --f7-table-sortable-icon-color: #fff;
15652 --f7-table-input-text-color: #fff;
15653}
15654.ios {
15655 --f7-table-head-font-weight: 600;
15656 --f7-table-head-cell-height: 44px;
15657 --f7-table-head-icon-size: 18px;
15658 --f7-table-body-cell-height: 44px;
15659 --f7-table-cell-padding-vertical: 0px;
15660 --f7-table-cell-padding-horizontal: 16px;
15661 --f7-table-edge-cell-padding-horizontal: 16px;
15662 --f7-table-label-cell-padding-horizontal: 16px;
15663 --f7-table-checkbox-cell-width: 22px;
15664 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
15665 /* --f7-table-actions-link-color: var(--f7-theme-color); */
15666 --f7-table-title-font-size: 17px;
15667 --f7-table-title-font-weight: 600;
15668 --f7-table-card-header-height: 64px;
15669 --f7-table-footer-height: 44px;
15670 --f7-table-head-text-color: rgba(0, 0, 0, 0.45);
15671 --f7-table-cell-border-color: rgba(0, 0, 0, 0.22);
15672 --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
15673 --f7-table-footer-text-color: rgba(0, 0, 0, 0.45);
15674 --f7-table-input-text-color: #000;
15675}
15676.ios .theme-dark,
15677.ios.theme-dark {
15678 --f7-table-head-text-color: rgba(255, 255, 255, 0.55);
15679 --f7-table-footer-text-color: rgba(255, 255, 255, 0.55);
15680 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.08);
15681}
15682.md {
15683 --f7-table-head-font-weight: 500;
15684 --f7-table-head-cell-height: 56px;
15685 --f7-table-head-icon-size: 16px;
15686 --f7-table-body-cell-height: 48px;
15687 --f7-table-cell-padding-vertical: 0px;
15688 --f7-table-cell-padding-horizontal: 28px;
15689 --f7-table-edge-cell-padding-horizontal: 24px;
15690 --f7-table-label-cell-padding-horizontal: 24px;
15691 --f7-table-checkbox-cell-width: 18px;
15692 --f7-table-title-font-size: 20px;
15693 --f7-table-title-font-weight: 400;
15694 --f7-table-card-header-height: 64px;
15695 --f7-table-footer-height: 56px;
15696 --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
15697 --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
15698 --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
15699 --f7-table-selected-row-bg-color: #f5f5f5;
15700 --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
15701 --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
15702 --f7-table-input-text-color: #212121;
15703}
15704.md .theme-dark,
15705.md.theme-dark {
15706 --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
15707 --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
15708 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
15709 --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
15710 --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
15711}
15712.aurora {
15713 --f7-table-link-icon-only-icon-size: 18px;
15714 --f7-table-head-font-weight: 400;
15715 --f7-table-head-cell-height: 32px;
15716 --f7-table-head-icon-size: 18px;
15717 --f7-table-body-cell-height: 32px;
15718 --f7-table-cell-padding-vertical: 5px;
15719 --f7-table-cell-padding-horizontal: 10px;
15720 --f7-table-edge-cell-padding-horizontal: 16px;
15721 --f7-table-label-cell-padding-horizontal: 16px;
15722 --f7-table-checkbox-cell-width: 22px;
15723 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
15724 /* --f7-table-actions-link-color: var(--f7-theme-color); */
15725 --f7-table-title-font-size: 14px;
15726 --f7-table-title-font-weight: 600;
15727 --f7-table-card-header-height: 42px;
15728 --f7-table-footer-height: 32px;
15729 --f7-table-head-text-color: rgba(0, 0, 0, 0.6);
15730 --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
15731 --f7-table-selected-row-bg-color: rgba(0, 0, 0, 0.03);
15732 --f7-table-footer-text-color: rgba(0, 0, 0, 0.5);
15733 --f7-table-input-text-color: #000;
15734}
15735.aurora .theme-dark,
15736.aurora.theme-dark {
15737 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.03);
15738 --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
15739 --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
15740}
15741.data-table {
15742 overflow-x: auto;
15743}
15744.data-table table,
15745table.data-table {
15746 width: 100%;
15747 border: none;
15748 padding: 0;
15749 margin: 0;
15750 border-collapse: collapse;
15751 text-align: left;
15752}
15753.data-table thead th,
15754.data-table thead td {
15755 font-size: var(--f7-table-head-font-size);
15756 font-weight: var(--f7-table-head-font-weight);
15757 overflow: hidden;
15758 white-space: nowrap;
15759 text-overflow: ellipsis;
15760 line-height: 16px;
15761 height: var(--f7-table-head-cell-height);
15762}
15763.data-table thead th:not(.sortable-cell-active),
15764.data-table thead td:not(.sortable-cell-active) {
15765 color: var(--f7-table-head-text-color);
15766}
15767.data-table thead i.icon,
15768.data-table thead i.f7-icons,
15769.data-table thead i.material-icons {
15770 vertical-align: top;
15771 font-size: var(--f7-table-head-icon-size);
15772}
15773.data-table tbody {
15774 font-size: var(--f7-table-body-font-size);
15775}
15776.data-table tbody th,
15777.data-table tbody td {
15778 height: var(--f7-table-body-cell-height);
15779}
15780.data-table tbody tr.data-table-row-selected,
15781.device-desktop .data-table tbody tr:hover {
15782 background: var(--f7-table-selected-row-bg-color);
15783}
15784.data-table tbody td:before,
15785.data-table tbody th:before {
15786 content: '';
15787 position: absolute;
15788 background-color: var(--f7-table-cell-border-color);
15789 display: block;
15790 z-index: 15;
15791 top: 0;
15792 right: auto;
15793 bottom: auto;
15794 left: 0;
15795 height: 1px;
15796 width: 100%;
15797 transform-origin: 50% 0%;
15798 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
15799}
15800.data-table th,
15801.data-table td {
15802 --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
15803 --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
15804 padding-top: var(--f7-table-cell-padding-vertical);
15805 padding-bottom: var(--f7-table-cell-padding-vertical);
15806 padding-left: var(--f7-table-cell-padding-left);
15807 padding-right: var(--f7-table-cell-padding-right);
15808 position: relative;
15809 box-sizing: border-box;
15810}
15811.data-table th:first-child,
15812.data-table td:first-child {
15813 --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
15814}
15815.data-table th:last-child,
15816.data-table td:last-child {
15817 --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
15818}
15819.data-table th.label-cell,
15820.data-table td.label-cell {
15821 --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
15822 --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
15823}
15824.data-table th.numeric-cell,
15825.data-table td.numeric-cell {
15826 text-align: right;
15827}
15828.data-table th.checkbox-cell,
15829.data-table td.checkbox-cell {
15830 overflow: visible;
15831 width: var(--f7-table-checkbox-cell-width);
15832}
15833.data-table th.checkbox-cell label + span,
15834.data-table td.checkbox-cell label + span {
15835 margin-left: 8px;
15836}
15837.data-table th.checkbox-cell:first-child,
15838.data-table td.checkbox-cell:first-child {
15839 padding-right: calc(var(--f7-table-cell-padding-right) / 2);
15840}
15841.data-table th.checkbox-cell:first-child + td,
15842.data-table td.checkbox-cell:first-child + td,
15843.data-table th.checkbox-cell:first-child + th,
15844.data-table td.checkbox-cell:first-child + th {
15845 padding-left: calc(var(--f7-table-cell-padding-left) / 2);
15846}
15847.data-table th.checkbox-cell:last-child,
15848.data-table td.checkbox-cell:last-child {
15849 padding-left: calc(var(--f7-table-cell-padding-left) / 2);
15850}
15851.data-table th.actions-cell,
15852.data-table td.actions-cell {
15853 text-align: right;
15854 white-space: nowrap;
15855}
15856.data-table th.actions-cell a.link,
15857.data-table td.actions-cell a.link {
15858 color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
15859}
15860.data-table th a.icon-only,
15861.data-table td a.icon-only,
15862.card .data-table th a.icon-only,
15863.card .data-table td a.icon-only,
15864.card.data-table th a.icon-only,
15865.card.data-table td a.icon-only {
15866 display: inline-block;
15867 vertical-align: middle;
15868 text-align: center;
15869 font-size: 0;
15870 min-width: 0;
15871}
15872.data-table th a.icon-only i,
15873.data-table td a.icon-only i,
15874.card .data-table th a.icon-only i,
15875.card .data-table td a.icon-only i,
15876.card.data-table th a.icon-only i,
15877.card.data-table td a.icon-only i {
15878 font-size: var(--f7-table-link-icon-only-icon-size);
15879 vertical-align: middle;
15880}
15881.data-table .sortable-cell:not(.input-cell) {
15882 cursor: pointer;
15883 position: relative;
15884}
15885.data-table .sortable-cell.input-cell .table-head-label {
15886 cursor: pointer;
15887 position: relative;
15888}
15889.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
15890.data-table .sortable-cell.numeric-cell:not(.input-cell):before,
15891.data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
15892.data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
15893 content: 'arrow_bottom_md';
15894 font-family: 'framework7-core-icons';
15895 font-weight: normal;
15896 font-style: normal;
15897 line-height: 1;
15898 letter-spacing: normal;
15899 text-transform: none;
15900 white-space: nowrap;
15901 word-wrap: normal;
15902 direction: ltr;
15903 -webkit-font-smoothing: antialiased;
15904 text-rendering: optimizeLegibility;
15905 -moz-osx-font-smoothing: grayscale;
15906 font-feature-settings: 'liga';
15907 text-align: center;
15908 display: block;
15909 width: 100%;
15910 height: 100%;
15911 font-size: 20px;
15912 display: inline-block;
15913 vertical-align: top;
15914 width: 16px;
15915 height: 16px;
15916 color: var(--f7-table-sortable-icon-color);
15917 font-size: 13px;
15918 line-height: 16px;
15919 transition-duration: 300ms;
15920 transform: rotate(0);
15921 opacity: 0;
15922}
15923.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
15924.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
15925.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
15926.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
15927 opacity: 0.54;
15928}
15929.data-table .sortable-cell.sortable-cell-active:after,
15930.data-table .sortable-cell.sortable-cell-active .table-head-label:after,
15931.data-table .sortable-cell.sortable-cell-active:before,
15932.data-table .sortable-cell.sortable-cell-active .table-head-label:before {
15933 opacity: 0.87 !important;
15934}
15935.data-table .sortable-cell.sortable-desc:after,
15936.data-table .sortable-cell.sortable-desc:after,
15937.data-table .table-head-label:after,
15938.data-table .sortable-cell.sortable-desc:before,
15939.data-table .sortable-cell.sortable-desc:before,
15940.data-table .table-head-label:before {
15941 transform: rotate(180deg) !important;
15942}
15943.data-table.card .card-header,
15944.card .data-table .card-header,
15945.data-table.card .card-footer,
15946.card .data-table .card-footer {
15947 padding-left: var(--f7-table-edge-cell-padding-horizontal);
15948 padding-right: var(--f7-table-edge-cell-padding-horizontal);
15949}
15950.data-table.card .card-header,
15951.card .data-table .card-header {
15952 min-height: var(--f7-table-card-header-height);
15953}
15954.data-table.card .card-content,
15955.card .data-table .card-content {
15956 overflow-x: auto;
15957}
15958.data-table.card .card-footer,
15959.card .data-table .card-footer {
15960 min-height: var(--f7-table-footer-height);
15961}
15962.data-table .data-table-title {
15963 font-size: var(--f7-table-title-font-size);
15964 font-weight: var(--f7-table-title-font-weight);
15965}
15966.data-table .data-table-links,
15967.data-table .data-table-actions {
15968 display: flex;
15969}
15970.data-table .data-table-links .button {
15971 min-width: 64px;
15972}
15973.data-table .data-table-actions {
15974 margin-left: auto;
15975 align-items: center;
15976}
15977.data-table .data-table-actions a.link {
15978 color: var(--f7-table-actions-link-color, var(--f7-theme-color));
15979 min-width: 0;
15980}
15981.data-table .data-table-actions a.link.icon-only {
15982 line-height: 1;
15983 justify-content: center;
15984 padding: 0;
15985}
15986.data-table .data-table-header,
15987.data-table .data-table-header-selected {
15988 display: flex;
15989 justify-content: space-between;
15990 align-items: center;
15991 width: 100%;
15992}
15993.data-table .card-header > .data-table-header,
15994.data-table .card-header > .data-table-header-selected {
15995 padding-top: var(--f7-card-header-padding-vertical);
15996 padding-bottom: var(--f7-card-header-padding-vertical);
15997 height: 100%;
15998 margin-top: calc(-1 * var(--f7-card-header-padding-vertical));
15999 margin-bottom: calc(-1 * var(--f7-card-header-padding-vertical));
16000 min-height: var(--f7-table-card-header-height);
16001 padding-left: var(--f7-table-edge-cell-padding-horizontal);
16002 padding-right: var(--f7-table-edge-cell-padding-horizontal);
16003 margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
16004 margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
16005}
16006.data-table .data-table-header-selected {
16007 background: rgba(var(--f7-theme-color-rgb), 0.1);
16008 display: none;
16009}
16010.data-table.data-table-has-checked .data-table-header {
16011 display: none;
16012}
16013.data-table.data-table-has-checked .data-table-header-selected {
16014 display: flex;
16015}
16016.data-table .data-table-title-selected {
16017 font-size: 14px;
16018 color: var(--f7-theme-color);
16019}
16020.data-table .data-table-footer {
16021 display: flex;
16022 align-items: center;
16023 box-sizing: border-box;
16024 position: relative;
16025 font-size: var(--f7-table-footer-font-size);
16026 overflow: hidden;
16027 min-height: var(--f7-table-footer-height);
16028 color: var(--f7-table-footer-text-color);
16029 justify-content: flex-end;
16030}
16031.data-table .data-table-footer:before {
16032 content: '';
16033 position: absolute;
16034 background-color: var(--f7-table-cell-border-color);
16035 display: block;
16036 z-index: 15;
16037 top: 0;
16038 right: auto;
16039 bottom: auto;
16040 left: 0;
16041 height: 1px;
16042 width: 100%;
16043 transform-origin: 50% 0%;
16044 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
16045}
16046.data-table .data-table-rows-select,
16047.data-table .data-table-pagination {
16048 display: flex;
16049 align-items: center;
16050}
16051.data-table .input-cell {
16052 padding-top: 8px;
16053 padding-bottom: 8px;
16054 height: auto;
16055 vertical-align: top;
16056}
16057.data-table .input-cell .table-head-label + .input {
16058 margin-top: 4px;
16059}
16060.data-table .input-cell .input {
16061 height: var(--f7-table-input-height);
16062}
16063.data-table .input-cell .input input,
16064.data-table .input-cell .input textarea,
16065.data-table .input-cell .input select {
16066 height: var(--f7-table-input-height);
16067 color: var(--f7-table-input-text-color);
16068 font-size: var(--f7-table-input-font-size);
16069}
16070@media (max-width: 480px) and (orientation: portrait) {
16071 .data-table.data-table-collapsible thead {
16072 display: none;
16073 }
16074 .data-table.data-table-collapsible tbody,
16075 .data-table.data-table-collapsible tr,
16076 .data-table.data-table-collapsible td {
16077 display: block;
16078 }
16079 .data-table.data-table-collapsible tr {
16080 position: relative;
16081 }
16082 .data-table.data-table-collapsible tr:before {
16083 content: '';
16084 position: absolute;
16085 background-color: var(--f7-table-cell-border-color);
16086 display: block;
16087 z-index: 15;
16088 top: 0;
16089 right: auto;
16090 bottom: auto;
16091 left: 0;
16092 height: 1px;
16093 width: 100%;
16094 transform-origin: 50% 0%;
16095 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
16096 }
16097 .data-table.data-table-collapsible tr:hover {
16098 background-color: inherit;
16099 }
16100 .data-table.data-table-collapsible td {
16101 --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
16102 --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
16103 height: auto;
16104 min-height: var(--f7-table-body-cell-height);
16105 display: flex;
16106 align-content: center;
16107 align-items: center;
16108 justify-content: flex-start;
16109 text-align: left;
16110 }
16111 .data-table.data-table-collapsible td:before {
16112 display: none !important;
16113 }
16114 .data-table.data-table-collapsible td:not(.checkbox-cell):before {
16115 width: 40%;
16116 display: block !important;
16117 content: attr(data-collapsible-title);
16118 position: relative;
16119 height: auto;
16120 background: none !important;
16121 transform: none !important;
16122 font-size: var(--f7-table-head-font-size);
16123 font-weight: var(--f7-table-head-font-weight);
16124 color: var(--f7-table-head-text-color);
16125 margin-right: 16px;
16126 flex-shrink: 0;
16127 }
16128 .data-table.data-table-collapsible td.checkbox-cell {
16129 position: absolute;
16130 top: 0;
16131 left: 0;
16132 }
16133 .data-table.data-table-collapsible td.checkbox-cell + td {
16134 padding-left: 16px;
16135 }
16136 .data-table.data-table-collapsible td.checkbox-cell ~ td {
16137 margin-left: 32px;
16138 }
16139}
16140.data-table .xsmall-only,
16141.data-table .xsmall-landscape-only {
16142 display: none;
16143}
16144@media (min-width: 480px) {
16145 .data-table .xsmall-only {
16146 display: table-cell;
16147 }
16148}
16149@media (min-width: 480px) and (orientation: landscape) {
16150 .data-table .xsmall-landscape-only {
16151 display: table-cell;
16152 }
16153}
16154.data-table .small-only,
16155.data-table .small-landscape-only {
16156 display: none;
16157}
16158@media (min-width: 568px) {
16159 .data-table .small-only {
16160 display: table-cell;
16161 }
16162}
16163@media (min-width: 568px) and (orientation: landscape) {
16164 .data-table .small-landscape-only {
16165 display: table-cell;
16166 }
16167}
16168.data-table .medium-only,
16169.data-table .medium-landscape-only {
16170 display: none;
16171}
16172@media (min-width: 768px) {
16173 .data-table .medium-only {
16174 display: table-cell;
16175 }
16176}
16177@media (min-width: 768px) and (orientation: landscape) {
16178 .data-table .medium-landscape-only {
16179 display: table-cell;
16180 }
16181}
16182.data-table .large-only,
16183.data-table .large-landscape-only {
16184 display: none;
16185}
16186@media (min-width: 1024px) {
16187 .data-table .large-only {
16188 display: table-cell;
16189 }
16190}
16191@media (min-width: 1024px) and (orientation: landscape) {
16192 .data-table .large-landscape-only {
16193 display: table-cell;
16194 }
16195}
16196.data-table .xlarge-only,
16197.data-table .xlarge-landscape-only {
16198 display: none;
16199}
16200@media (min-width: 1200px) {
16201 .data-table .xlarge-only {
16202 display: table-cell;
16203 }
16204}
16205@media (min-width: 1200px) and (orientation: landscape) {
16206 .data-table .xlarge-landscape-only {
16207 display: table-cell;
16208 }
16209}
16210.ios .data-table th.actions-cell a.link + a.link,
16211.ios .data-table td.actions-cell a.link + a.link {
16212 margin-left: 16px;
16213}
16214.ios .sortable-cell:not(.numeric-cell):after {
16215 margin-left: 5px;
16216}
16217.ios .sortable-cell.numeric-cell:before {
16218 margin-right: 5px;
16219}
16220.ios .data-table-links a.link + a.link,
16221.ios .data-table-actions a.link + a.link,
16222.ios .data-table-links .button + .button,
16223.ios .data-table-actions .button + .button {
16224 margin-left: 16px;
16225}
16226.ios .data-table-actions a.link.icon-only {
16227 width: 44px;
16228 height: 44px;
16229}
16230.ios .data-table-rows-select a.link,
16231.ios .data-table-pagination a.link {
16232 width: 44px;
16233 height: 44px;
16234}
16235.ios .data-table-rows-select + .data-table-pagination {
16236 margin-left: 30px;
16237}
16238.ios .data-table-rows-select .input {
16239 margin-left: 20px;
16240}
16241.ios .data-table-pagination-label {
16242 margin-right: 16px;
16243}
16244.md .data-table th.actions-cell a.link + a.link,
16245.md .data-table td.actions-cell a.link + a.link {
16246 margin-left: 24px;
16247}
16248.md .data-table th.actions-cell a.icon-only,
16249.md .data-table td.actions-cell a.icon-only {
16250 width: 24px;
16251 height: 24px;
16252 line-height: 24px;
16253}
16254.md .sortable-cell:not(.numeric-cell):after {
16255 margin-left: 8px;
16256}
16257.md .sortable-cell.numeric-cell:before {
16258 margin-right: 8px;
16259}
16260.md .data-table-links a.link + a.link,
16261.md .data-table-actions a.link + a.link,
16262.md .data-table-links .button + .button,
16263.md .data-table-actions .button + .button {
16264 margin-left: 24px;
16265}
16266.md .data-table-actions a.link.icon-only {
16267 width: 24px;
16268 height: 24px;
16269 overflow: visible;
16270}
16271.md .data-table-actions a.link.icon-only.active-state {
16272 background: none;
16273}
16274.md .data-table-rows-select a.link,
16275.md .data-table-pagination a.link {
16276 width: 48px;
16277 height: 48px;
16278}
16279.md .data-table-rows-select a.link:before,
16280.md .data-table-pagination a.link:before {
16281 content: '';
16282 width: 152%;
16283 height: 152%;
16284 left: -26%;
16285 top: -26%;
16286 position: absolute;
16287 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
16288 background-repeat: no-repeat;
16289 background-position: center;
16290 background-size: 100% 100%;
16291 opacity: 0;
16292 pointer-events: none;
16293 transition-duration: 300ms;
16294 transition-property: opacity;
16295}
16296.md .data-table-rows-select a.link.icon-only:before,
16297.md .data-table-pagination a.link.icon-only:before,
16298.md .data-table-rows-select a.link.ripple-inset:before,
16299.md .data-table-pagination a.link.ripple-inset:before,
16300.md .data-table-rows-select a.link.searchbar-disable-button:before,
16301.md .data-table-pagination a.link.searchbar-disable-button:before,
16302.md .data-table-rows-select a.link.input-clear-button:before,
16303.md .data-table-pagination a.link.input-clear-button:before,
16304.md .data-table-rows-select a.link.notification-close-button:before,
16305.md .data-table-pagination a.link.notification-close-button:before {
16306 width: 100%;
16307 height: 100%;
16308 left: 0;
16309 top: 0;
16310 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
16311}
16312.md .data-table-rows-select a.link.active-state:before,
16313.md .data-table-pagination a.link.active-state:before {
16314 opacity: 1;
16315 transition-duration: 150ms;
16316}
16317.md .data-table-rows-select + .data-table-pagination {
16318 margin-left: 32px;
16319}
16320.md .data-table-rows-select .input {
16321 margin-left: 24px;
16322}
16323.md .data-table-pagination-label {
16324 margin-right: 20px;
16325}
16326.md .input-cell .input-clear-button {
16327 transform: scale(0.8);
16328}
16329.aurora .data-table th.actions-cell a.link + a.link,
16330.aurora .data-table td.actions-cell a.link + a.link {
16331 margin-left: 10px;
16332}
16333.aurora .sortable-cell:not(.numeric-cell):after {
16334 margin-left: 5px;
16335}
16336.aurora .sortable-cell.numeric-cell:before {
16337 margin-right: 5px;
16338}
16339.aurora .data-table-links a.link + a.link,
16340.aurora .data-table-actions a.link + a.link,
16341.aurora .data-table-links .button + .button,
16342.aurora .data-table-actions .button + .button {
16343 margin-left: 10px;
16344}
16345.aurora .data-table-rows-select a.link,
16346.aurora .data-table-pagination a.link {
16347 width: 32px;
16348 height: 32px;
16349}
16350.aurora .data-table-rows-select + .data-table-pagination {
16351 margin-left: 16px;
16352}
16353.aurora .data-table-rows-select .input {
16354 margin-left: 10px;
16355}
16356.aurora .data-table-pagination-label {
16357 margin-right: 10px;
16358}
16359/* === FAB === */
16360:root {
16361 --f7-fab-margin: 16px;
16362 --f7-fab-text-color: #fff;
16363 --f7-fab-extended-text-font-size: 14px;
16364 --f7-fab-extended-text-padding: 0 20px;
16365 --f7-fab-label-bg-color: #fff;
16366 --f7-fab-label-text-color: #333;
16367 --f7-fab-label-border-radius: 4px;
16368 --f7-fab-label-padding: 4px 12px;
16369 --f7-fab-button-size: 40px;
16370 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
16371}
16372.ios {
16373 --f7-fab-size: 50px;
16374 --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
16375 --f7-fab-extended-size: 50px;
16376 --f7-fab-extended-text-font-weight: 600;
16377 --f7-fab-extended-text-letter-spacing: 0;
16378 --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
16379 --f7-fab-label-font-size: inherit;
16380}
16381.md {
16382 --f7-fab-size: 56px;
16383 --f7-fab-box-shadow: var(--f7-elevation-6);
16384 --f7-fab-extended-size: 48px;
16385 --f7-fab-extended-text-font-weight: 500;
16386 --f7-fab-extended-text-letter-spacing: 0.05em;
16387 --f7-fab-label-box-shadow: var(--f7-elevation-3);
16388 --f7-fab-label-font-size: inherit;
16389}
16390.aurora {
16391 --f7-fab-size: 40px;
16392 --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
16393 --f7-fab-extended-size: 38px;
16394 --f7-fab-extended-text-font-weight: 500;
16395 --f7-fab-extended-text-letter-spacing: 0;
16396 --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
16397 --f7-fab-label-font-size: 12px;
16398}
16399.fab-backdrop {
16400 z-index: 1400;
16401}
16402.fab {
16403 position: absolute;
16404 z-index: 1500;
16405}
16406.fab a {
16407 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
16408}
16409.fab-left-top,
16410.fab-left-center,
16411.fab-left-bottom {
16412 left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
16413}
16414.fab-right-top,
16415.fab-right-center,
16416.fab-right-bottom {
16417 right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
16418}
16419.fab-left-top,
16420.fab-center-top,
16421.fab-right-top {
16422 top: var(--f7-fab-margin);
16423}
16424.fab-left-bottom,
16425.fab-center-bottom,
16426.fab-right-bottom {
16427 bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
16428}
16429.fab-center-top,
16430.fab-center-center,
16431.fab-center-bottom {
16432 left: 50%;
16433 transform: translateX(-50%);
16434}
16435.fab-left-center,
16436.fab-center-center,
16437.fab-right-center {
16438 top: 50%;
16439 transform: translateY(-50%);
16440}
16441.fab-center-center {
16442 top: 50%;
16443 left: 50%;
16444 transform: translateX(-50%) translateY(-50%);
16445}
16446.fab > a,
16447.fab-buttons a {
16448 background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
16449 width: var(--f7-fab-size);
16450 height: var(--f7-fab-size);
16451 box-shadow: var(--f7-fab-box-shadow);
16452 border-radius: calc(var(--f7-fab-size) / 2);
16453 position: relative;
16454 transition-duration: 300ms;
16455 display: flex;
16456 align-items: center;
16457 justify-content: center;
16458 overflow: hidden;
16459 z-index: 1;
16460 color: var(--f7-fab-text-color);
16461}
16462.fab > a.active-state,
16463.fab-buttons a.active-state {
16464 background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
16465}
16466.fab > a i {
16467 position: absolute;
16468 left: 50%;
16469 top: 50%;
16470 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
16471 transition: 300ms;
16472}
16473.fab > a i + i {
16474 transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
16475 opacity: 0;
16476}
16477.fab-buttons a {
16478 border-radius: calc(var(--f7-fab-button-size) / 2);
16479 width: var(--f7-fab-button-size);
16480 height: var(--f7-fab-button-size);
16481}
16482.fab-buttons {
16483 display: flex;
16484 visibility: hidden;
16485 pointer-events: none;
16486 position: absolute;
16487}
16488.fab-buttons a {
16489 opacity: 0;
16490}
16491.fab-opened:not(.fab-morph) > a i {
16492 transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
16493 opacity: 0;
16494}
16495.fab-opened:not(.fab-morph) > a i + i {
16496 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
16497 opacity: 1;
16498}
16499.fab-opened .fab-buttons {
16500 visibility: visible;
16501 pointer-events: auto;
16502}
16503.fab-opened .fab-buttons a {
16504 opacity: 1;
16505 transform: translate3d(0, 0px, 0) scale(1) !important;
16506}
16507.fab-opened .fab-buttons a:nth-child(2) {
16508 transition-delay: 50ms;
16509}
16510.fab-opened .fab-buttons a:nth-child(3) {
16511 transition-delay: 100ms;
16512}
16513.fab-opened .fab-buttons a:nth-child(4) {
16514 transition-delay: 150ms;
16515}
16516.fab-opened .fab-buttons a:nth-child(5) {
16517 transition-delay: 200ms;
16518}
16519.fab-opened .fab-buttons a:nth-child(6) {
16520 transition-delay: 250ms;
16521}
16522.fab-buttons-top,
16523.fab-buttons-bottom {
16524 left: 50%;
16525 width: var(--f7-fab-button-size);
16526 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
16527}
16528.fab-buttons-top {
16529 bottom: 100%;
16530 margin-bottom: 16px;
16531 flex-direction: column-reverse;
16532}
16533.fab-buttons-top a {
16534 transform: translate3d(0, 8px, 0) scale(0.3);
16535 transform-origin: center bottom;
16536}
16537.fab-buttons-top a + a {
16538 margin-bottom: 16px;
16539}
16540.fab-buttons-bottom {
16541 top: 100%;
16542 margin-top: 16px;
16543 flex-direction: column;
16544}
16545.fab-buttons-bottom a {
16546 transform: translate3d(0, -8px, 0) scale(0.3);
16547 transform-origin: center top;
16548}
16549.fab-buttons-bottom a + a {
16550 margin-top: 16px;
16551}
16552.fab-buttons-left,
16553.fab-buttons-right {
16554 top: 50%;
16555 height: var(--f7-fab-button-size);
16556 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
16557}
16558.fab-buttons-left {
16559 right: 100%;
16560 margin-right: 16px;
16561 flex-direction: row-reverse;
16562}
16563.fab-buttons-left a {
16564 transform: translate3d(8px, 0px, 0) scale(0.3);
16565 transform-origin: right center;
16566}
16567.fab-buttons-left a + a {
16568 margin-right: 16px;
16569}
16570.fab-buttons-right {
16571 left: 100%;
16572 margin-left: 16px;
16573}
16574.fab-buttons-right a {
16575 transform: translate3d(-8px, 0, 0) scale(0.3);
16576 transform-origin: left center;
16577}
16578.fab-buttons-right a + a {
16579 margin-left: 16px;
16580}
16581.fab-buttons-center {
16582 left: 0%;
16583 top: 0%;
16584 width: 100%;
16585 height: 100%;
16586}
16587.fab-buttons-center a {
16588 position: absolute;
16589}
16590.fab-buttons-center a:nth-child(1) {
16591 left: 50%;
16592 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
16593 bottom: 100%;
16594 margin-bottom: 16px;
16595 transform: translateY(-8px) scale(0.3);
16596 transform-origin: center bottom;
16597}
16598.fab-buttons-center a:nth-child(2) {
16599 left: 100%;
16600 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
16601 top: 50%;
16602 margin-left: 16px;
16603 transform: translateX(-8px) scale(0.3);
16604 transform-origin: left center;
16605}
16606.fab-buttons-center a:nth-child(3) {
16607 left: 50%;
16608 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
16609 top: 100%;
16610 margin-top: 16px;
16611 transform: translateY(8px) scale(0.3);
16612 transform-origin: center top;
16613}
16614.fab-buttons-center a:nth-child(4) {
16615 right: 100%;
16616 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
16617 top: 50%;
16618 margin-right: 16px;
16619 transform: translateX(8px) scale(0.3);
16620 transform-origin: right center;
16621}
16622.fab-morph {
16623 border-radius: calc(var(--f7-fab-size) / 2);
16624 background: var(--f7-fab-bg-color, var(--f7-theme-color));
16625 box-shadow: var(--f7-fab-box-shadow);
16626}
16627.fab-morph > a {
16628 box-shadow: none;
16629 background: none !important;
16630}
16631.fab-opened.fab-morph > a i {
16632 opacity: 0;
16633}
16634.fab-morph,
16635.fab-morph > a,
16636.fab-morph-target {
16637 transition-duration: 250ms;
16638}
16639.fab-morph-target:not(.fab-morph-target-visible) {
16640 display: none;
16641}
16642.fab-extended {
16643 width: auto;
16644 min-width: var(--f7-fab-extended-size);
16645}
16646.fab-extended > a {
16647 width: 100%;
16648 height: var(--f7-fab-extended-size);
16649}
16650.fab-extended > a i {
16651 left: calc(var(--f7-fab-extended-size) / 2);
16652}
16653.fab-extended i ~ .fab-text {
16654 padding-left: var(--f7-fab-extended-size);
16655}
16656.fab-extended > a {
16657 width: 100% !important;
16658}
16659.fab-text {
16660 box-sizing: border-box;
16661 font-size: var(--f7-fab-extended-text-font-size);
16662 padding: var(--f7-fab-extended-text-padding);
16663 font-weight: var(--f7-fab-extended-text-font-weight);
16664 letter-spacing: var(--f7-fab-extended-text-letter-spacing);
16665 text-transform: uppercase;
16666}
16667.fab-label-button {
16668 overflow: visible !important;
16669}
16670.fab-label {
16671 position: absolute;
16672 top: 50%;
16673 padding: var(--f7-fab-label-padding);
16674 border-radius: var(--f7-fab-label-border-radius);
16675 background: var(--f7-fab-label-bg-color);
16676 color: var(--f7-fab-label-text-color);
16677 box-shadow: var(--f7-fab-label-box-shadow);
16678 white-space: nowrap;
16679 transform: translateY(-50%);
16680 pointer-events: none;
16681 font-size: var(--f7-fab-label-font-size);
16682}
16683.fab-right-top .fab-label,
16684.fab-right-center .fab-label,
16685.fab-right-bottom .fab-label {
16686 right: 100%;
16687 margin-right: 8px;
16688}
16689.fab-left-top .fab-label,
16690.fab-left-center .fab-label,
16691.fab-left-bottom .fab-label {
16692 left: 100%;
16693 margin-left: 8px;
16694}
16695.navbar ~ * .fab-left-top,
16696.navbar ~ * .fab-center-top,
16697.navbar ~ * .fab-right-top,
16698.navbar ~ .fab-left-top,
16699.navbar ~ .fab-center-top,
16700.navbar ~ .fab-right-top,
16701.navbars ~ * .fab-left-top,
16702.navbars ~ * .fab-center-top,
16703.navbars ~ * .fab-right-top,
16704.navbars ~ .fab-left-top,
16705.navbars ~ .fab-center-top,
16706.navbars ~ .fab-right-top {
16707 margin-top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
16708}
16709.toolbar-top ~ * .fab-left-top,
16710.toolbar-top ~ * .fab-center-top,
16711.toolbar-top ~ * .fab-right-top,
16712.toolbar-top ~ .fab-left-top,
16713.toolbar-top ~ .fab-center-top,
16714.toolbar-top ~ .fab-right-top,
16715.ios .toolbar-top-ios ~ * .fab-left-top,
16716.ios .toolbar-top-ios ~ * .fab-center-top,
16717.ios .toolbar-top-ios ~ * .fab-right-top,
16718.ios .toolbar-top-ios ~ .fab-left-top,
16719.ios .toolbar-top-ios ~ .fab-center-top,
16720.ios .toolbar-top-ios ~ .fab-right-top,
16721.md .toolbar-top-md ~ * .fab-left-top,
16722.md .toolbar-top-md ~ * .fab-center-top,
16723.md .toolbar-top-md ~ * .fab-right-top,
16724.md .toolbar-top-md ~ .fab-left-top,
16725.md .toolbar-top-md ~ .fab-center-top,
16726.md .toolbar-top-md ~ .fab-right-top {
16727 margin-top: var(--f7-toolbar-height);
16728}
16729.toolbar-bottom ~ * .fab-left-bottom,
16730.toolbar-bottom ~ * .fab-center-bottom,
16731.toolbar-bottom ~ * .fab-right-bottom,
16732.toolbar-bottom ~ .fab-left-bottom,
16733.toolbar-bottom ~ .fab-center-bottom,
16734.toolbar-bottom ~ .fab-right-bottom,
16735.ios .toolbar-bottom-ios ~ * .fab-left-bottom,
16736.ios .toolbar-bottom-ios ~ * .fab-center-bottom,
16737.ios .toolbar-bottom-ios ~ * .fab-right-bottom,
16738.ios .toolbar-bottom-ios ~ .fab-left-bottom,
16739.ios .toolbar-bottom-ios ~ .fab-center-bottom,
16740.ios .toolbar-bottom-ios ~ .fab-right-bottom,
16741.md .toolbar-bottom-md ~ * .fab-left-bottom,
16742.md .toolbar-bottom-md ~ * .fab-center-bottom,
16743.md .toolbar-bottom-md ~ * .fab-right-bottom,
16744.md .toolbar-bottom-md ~ .fab-left-bottom,
16745.md .toolbar-bottom-md ~ .fab-center-bottom,
16746.md .toolbar-bottom-md ~ .fab-right-bottom {
16747 margin-bottom: var(--f7-toolbar-height);
16748}
16749.tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
16750.tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
16751.tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
16752.tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
16753.tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
16754.tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
16755.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
16756.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
16757.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
16758.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
16759.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
16760.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
16761.md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
16762.md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
16763.md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
16764.md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
16765.md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
16766.md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
16767 margin-bottom: var(--f7-tabbar-labels-height);
16768}
16769.tabbar-labels.toolbar-top ~ * .fab-left-bottom,
16770.tabbar-labels.toolbar-top ~ * .fab-center-bottom,
16771.tabbar-labels.toolbar-top ~ * .fab-right-bottom,
16772.tabbar-labels.toolbar-top ~ .fab-left-bottom,
16773.tabbar-labels.toolbar-top ~ .fab-center-bottom,
16774.tabbar-labels.toolbar-top ~ .fab-right-bottom,
16775.ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
16776.ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
16777.ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
16778.ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
16779.ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
16780.ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
16781.md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
16782.md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
16783.md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
16784.md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
16785.md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
16786.md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
16787 margin-top: var(--f7-tabbar-labels-height);
16788}
16789.messagebar ~ * .fab-left-bottom,
16790.messagebar ~ * .fab-center-bottom,
16791.messagebar ~ * .fab-right-bottom,
16792.messagebar ~ .fab-left-bottom,
16793.messagebar ~ .fab-center-bottom,
16794.messagebar ~ .fab-right-bottom {
16795 margin-bottom: var(--f7-messagebar-height);
16796}
16797.navbar + .toolbar-top ~ * .fab-left-top,
16798.ios .navbar + .toolbar-top-ios ~ * .fab-left-top,
16799.md .navbar + .toolbar-top-ios ~ * .fab-left-top,
16800.navbar + .toolbar-top ~ * .fab-center-top,
16801.ios .navbar + .toolbar-top-ios ~ * .fab-center-top,
16802.md .navbar + .toolbar-top-ios ~ * .fab-center-top,
16803.navbar + .toolbar-top ~ * .fab-right-top,
16804.ios .navbar + .toolbar-top-ios ~ * .fab-right-top,
16805.md .navbar + .toolbar-top-ios ~ * .fab-right-top,
16806.navbar + .toolbar-top ~ .fab-left-top,
16807.ios .navbar + .toolbar-top-ios ~ .fab-left-top,
16808.md .navbar + .toolbar-top-ios ~ .fab-left-top,
16809.navbar + .toolbar-top ~ .fab-center-top,
16810.ios .navbar + .toolbar-top-ios ~ .fab-center-top,
16811.md .navbar + .toolbar-top-ios ~ .fab-center-top,
16812.navbar + .toolbar-top ~ .fab-right-top,
16813.ios .navbar + .toolbar-top-ios ~ .fab-right-top,
16814.md .navbar + .toolbar-top-ios ~ .fab-right-top {
16815 margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
16816}
16817.navbar + .toolbar-top.tabbar-labels ~ * .fab-left-top,
16818.ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
16819.md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
16820.navbar + .toolbar-top.tabbar-labels ~ * .fab-center-top,
16821.ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
16822.md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
16823.navbar + .toolbar-top.tabbar-labels ~ * .fab-right-top,
16824.ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
16825.md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
16826.navbar + .toolbar-top.tabbar-labels ~ .fab-left-top,
16827.ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
16828.md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
16829.navbar + .toolbar-top.tabbar-labels ~ .fab-center-top,
16830.ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
16831.md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
16832.navbar + .toolbar-top.tabbar-labels ~ .fab-right-top,
16833.ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top,
16834.md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
16835 margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
16836}
16837.navbars + .toolbar-top ~ * .fab-left-top,
16838.ios .navbars + .toolbar-top-ios ~ * .fab-left-top,
16839.navbars + .toolbar-top ~ * .fab-center-top,
16840.ios .navbars + .toolbar-top-ios ~ * .fab-center-top,
16841.navbars + .toolbar-top ~ * .fab-right-top,
16842.ios .navbars + .toolbar-top-ios ~ * .fab-right-top,
16843.navbars + .toolbar-top ~ .fab-left-top,
16844.ios .navbars + .toolbar-top-ios ~ .fab-left-top,
16845.navbars + .toolbar-top ~ .fab-center-top,
16846.ios .navbars + .toolbar-top-ios ~ .fab-center-top,
16847.navbars + .toolbar-top ~ .fab-right-top,
16848.ios .navbars + .toolbar-top-ios ~ .fab-right-top {
16849 margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
16850}
16851.navbars + .toolbar-top.tabbar-labels ~ * .fab-left-top,
16852.ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-left-top,
16853.navbars + .toolbar-top.tabbar-labels ~ * .fab-center-top,
16854.ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-center-top,
16855.navbars + .toolbar-top.tabbar-labels ~ * .fab-right-top,
16856.ios .navbars + .toolbar-top-ios.tabbar-labels ~ * .fab-right-top,
16857.navbars + .toolbar-top.tabbar-labels ~ .fab-left-top,
16858.ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-left-top,
16859.navbars + .toolbar-top.tabbar-labels ~ .fab-center-top,
16860.ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-center-top,
16861.navbars + .toolbar-top.tabbar-labels ~ .fab-right-top,
16862.ios .navbars + .toolbar-top-ios.tabbar-labels ~ .fab-right-top {
16863 margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top));
16864}
16865.ios .fab > a.active-state,
16866.ios .fab-buttons a.active-state {
16867 transition-duration: 0ms;
16868}
16869/* === Searchbar === */
16870:root {
16871 /*
16872 --f7-searchbar-link-color: var(--f7-bars-link-color);
16873 --f7-searchbar-inline-input-font-size: var(--f7-searchbar-input-font-size);
16874 --f7-searchbar-inline-input-height: var(--f7-searchbar-input-height);
16875 */
16876 --f7-searchbar-input-border-width: 0px;
16877 --f7-searchbar-input-border-color: transparent;
16878 --f7-searchbar-input-text-color: #000;
16879 --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
16880}
16881:root .theme-dark,
16882:root.theme-dark {
16883 --f7-searchbar-input-text-color: #fff;
16884 --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
16885}
16886.ios {
16887 /*
16888 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
16889 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
16890 --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
16891 --f7-searchbar-border-color: var(--f7-bars-border-color);
16892 */
16893 --f7-searchbar-height: 44px;
16894 --f7-searchbar-inner-padding-left: 8px;
16895 --f7-searchbar-inner-padding-right: 8px;
16896 /*
16897 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
16898 */
16899 --f7-searchbar-input-font-size: 17px;
16900 --f7-searchbar-input-border-radius: 8px;
16901 --f7-searchbar-input-height: 32px;
16902 --f7-searchbar-input-padding-horizontal: 28px;
16903 /*
16904 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
16905 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
16906 */
16907 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
16908 --f7-searchbar-shadow-image: none;
16909 --f7-searchbar-in-page-content-margin: 0px;
16910 --f7-searchbar-in-page-content-box-shadow: none;
16911 --f7-searchbar-in-page-content-border-radius: 0;
16912 --f7-searchbar-in-page-content-input-border-radius: 0;
16913 --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
16914 --f7-searchbar-input-bg-color: #e4e4e4;
16915}
16916.ios .theme-dark,
16917.ios.theme-dark {
16918 --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
16919 --f7-searchbar-input-bg-color: #2a2a2a;
16920}
16921.md {
16922 --f7-searchbar-border-color: transparent;
16923 --f7-searchbar-height: 48px;
16924 --f7-searchbar-inner-padding-left: 0px;
16925 --f7-searchbar-inner-padding-right: 0px;
16926 --f7-searchbar-link-color: #737373;
16927 --f7-searchbar-search-icon-color: #737373;
16928 --f7-searchbar-input-font-size: 20px;
16929 --f7-searchbar-input-border-radius: 0px;
16930 --f7-searchbar-input-height: 100%;
16931 --f7-searchbar-input-padding-horizontal: 48px;
16932 --f7-searchbar-inline-input-padding-horizontal: 24px;
16933 --f7-searchbar-input-clear-button-color: #737373;
16934 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
16935 --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
16936 --f7-searchbar-in-page-content-margin: 8px;
16937 --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
16938 --f7-searchbar-in-page-content-border-radius: 4px;
16939 --f7-searchbar-in-page-content-input-border-radius: 4px;
16940 --f7-searchbar-bg-color: #fff;
16941 --f7-searchbar-input-bg-color: #fff;
16942}
16943.md .theme-dark,
16944.md.theme-dark {
16945 --f7-searchbar-bg-color: #202020;
16946 --f7-searchbar-input-bg-color: #202020;
16947}
16948.aurora {
16949 /*
16950 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
16951 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
16952 --f7-searchbar-border-color: var(--f7-bars-border-color);
16953 */
16954 --f7-searchbar-height: 56px;
16955 --f7-searchbar-inner-padding-left: 16px;
16956 --f7-searchbar-inner-padding-right: 16px;
16957 /*
16958 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
16959 */
16960 --f7-searchbar-input-font-size: 16px;
16961 --f7-searchbar-input-border-radius: 8px;
16962 --f7-searchbar-input-height: 38px;
16963 --f7-searchbar-input-padding-horizontal: 34px;
16964 /*
16965 --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal;
16966 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
16967 */
16968 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
16969 --f7-searchbar-shadow-image: none;
16970 --f7-searchbar-in-page-content-margin: 0px;
16971 --f7-searchbar-in-page-content-box-shadow: none;
16972 --f7-searchbar-in-page-content-border-radius: 0;
16973 /*
16974 --f7-searchbar-in-page-content-input-border-radius: var(--f7-searchbar-input-border-radius);
16975 */
16976 --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
16977 --f7-searchbar-input-bg-color: #e4e4e4;
16978}
16979.aurora .theme-dark,
16980.aurora.theme-dark {
16981 --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
16982 --f7-searchbar-input-bg-color: #2a2a2a;
16983}
16984.searchbar {
16985 --f7-link-highlight-color: var(--f7-link-highlight-black);
16986 width: 100%;
16987 position: relative;
16988 z-index: 200;
16989 height: var(--f7-searchbar-height);
16990 background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
16991 background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color));
16992}
16993.theme-dark .searchbar {
16994 --f7-link-highlight-color: var(--f7-link-highlight-white);
16995}
16996.searchbar input[type='search']::-webkit-search-decoration {
16997 display: none;
16998}
16999@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
17000 .ios-translucent-bars .searchbar {
17001 background-color: rgba(var(--f7-searchbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)), var(--f7-bars-translucent-opacity));
17002 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
17003 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
17004 }
17005}
17006.ios .subnavbar .searchbar {
17007 background-color: transparent;
17008 -webkit-backdrop-filter: none;
17009 backdrop-filter: none;
17010}
17011.ios .subnavbar .searchbar:after {
17012 display: none !important;
17013}
17014.searchbar.no-hairline:after,
17015.searchbar.no-border:after {
17016 display: none !important;
17017}
17018.searchbar.no-shadow:before {
17019 display: none !important;
17020}
17021.searchbar:after {
17022 content: '';
17023 position: absolute;
17024 background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
17025 display: block;
17026 z-index: 15;
17027 top: auto;
17028 right: auto;
17029 bottom: 0;
17030 left: 0;
17031 height: 1px;
17032 width: 100%;
17033 transform-origin: 50% 100%;
17034 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
17035}
17036.page > .searchbar:not(.searchbar-inline) {
17037 z-index: 600;
17038}
17039.page > .searchbar:not(.searchbar-inline):before {
17040 content: '';
17041 position: absolute;
17042 right: 0;
17043 width: 100%;
17044 top: 100%;
17045 bottom: auto;
17046 height: 8px;
17047 pointer-events: none;
17048 background: var(--f7-searchbar-shadow-image);
17049}
17050.searchbar input[type='text'],
17051.searchbar input[type='search'] {
17052 box-sizing: border-box;
17053 width: 100%;
17054 height: 100%;
17055 display: block;
17056 border: var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);
17057 -webkit-appearance: none;
17058 -moz-appearance: none;
17059 appearance: none;
17060 font-family: inherit;
17061 font-weight: normal;
17062 color: var(--f7-searchbar-input-text-color);
17063 font-size: var(--f7-searchbar-input-font-size);
17064 background-color: var(--f7-searchbar-input-bg-color);
17065 border-radius: var(--f7-searchbar-input-border-radius);
17066 position: relative;
17067 padding: 0;
17068 padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));
17069 padding-right: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));
17070}
17071.searchbar input[type='text']::-webkit-input-placeholder, .searchbar input[type='search']::-webkit-input-placeholder {
17072 color: var(--f7-searchbar-placeholder-color);
17073 opacity: 1;
17074}
17075.searchbar input[type='text']::placeholder,
17076.searchbar input[type='search']::placeholder {
17077 color: var(--f7-searchbar-placeholder-color);
17078 opacity: 1;
17079}
17080.searchbar input::-webkit-search-cancel-button {
17081 -webkit-appearance: none;
17082 appearance: none;
17083}
17084.searchbar .searchbar-input-wrap {
17085 flex-shrink: 1;
17086 width: 100%;
17087 height: var(--f7-searchbar-input-height);
17088 position: relative;
17089}
17090.searchbar a {
17091 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
17092}
17093.page > .searchbar:not(.searchbar-inline) {
17094 position: absolute;
17095 left: 0;
17096 top: 0;
17097}
17098.page-content .searchbar:not(.searchbar-inline) {
17099 border-radius: var(--f7-searchbar-in-page-content-border-radius);
17100 margin: var(--f7-searchbar-in-page-content-margin);
17101 width: auto;
17102 box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
17103}
17104.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,
17105.page-content .searchbar:not(.searchbar-inline) input[type='text'],
17106.page-content .searchbar:not(.searchbar-inline) input[type='search'] {
17107 border-radius: var(--f7-searchbar-in-page-content-input-border-radius, var(--f7-searchbar-input-border-radius));
17108}
17109.searchbar .input-clear-button {
17110 color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
17111}
17112.searchbar-expandable {
17113 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
17114 position: absolute;
17115 transition-duration: 300ms;
17116 pointer-events: none;
17117}
17118.navbar .searchbar-expandable {
17119 background: transparent;
17120}
17121.navbar .searchbar-expandable:after {
17122 display: none !important;
17123}
17124.navbar .searchbar.searchbar-expandable {
17125 --f7-searchbar-expandable-size: var(--f7-navbar-height);
17126}
17127.toolbar .searchbar.searchbar-expandable {
17128 --f7-searchbar-expandable-size: var(--f7-toolbar-height);
17129}
17130.subnavbar .searchbar.searchbar-expandable {
17131 --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
17132}
17133.tabbar-labels .searchbar.searchbar-expandable {
17134 --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
17135}
17136.searchbar-inner {
17137 position: absolute;
17138 left: 0;
17139 top: 0;
17140 width: 100%;
17141 height: 100%;
17142 display: flex;
17143 align-items: center;
17144 box-sizing: border-box;
17145 padding: 0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));
17146}
17147.searchbar-disable-button {
17148 cursor: pointer;
17149 pointer-events: none;
17150 -webkit-appearance: none;
17151 -moz-appearance: none;
17152 appearance: none;
17153 background: none;
17154 border: none;
17155 outline: 0;
17156 padding: 0;
17157 margin: 0;
17158 width: auto;
17159 opacity: 0;
17160}
17161.searchbar-icon {
17162 pointer-events: none;
17163 background-position: center;
17164 background-repeat: no-repeat;
17165}
17166.searchbar-icon:after {
17167 color: var(--f7-searchbar-search-icon-color);
17168 font-family: 'framework7-core-icons';
17169 font-weight: normal;
17170 font-style: normal;
17171 line-height: 1;
17172 letter-spacing: normal;
17173 text-transform: none;
17174 white-space: nowrap;
17175 word-wrap: normal;
17176 direction: ltr;
17177 -webkit-font-smoothing: antialiased;
17178 text-rendering: optimizeLegibility;
17179 -moz-osx-font-smoothing: grayscale;
17180 font-feature-settings: 'liga';
17181 text-align: center;
17182 display: block;
17183 width: 100%;
17184 height: 100%;
17185 font-size: 20px;
17186}
17187.searchbar-backdrop {
17188 position: absolute;
17189 left: 0;
17190 top: 0;
17191 width: 100%;
17192 height: 100%;
17193 z-index: 100;
17194 opacity: 0;
17195 pointer-events: none;
17196 transition-duration: 300ms;
17197 transform: translate3d(0, 0, 0);
17198 background: var(--f7-searchbar-backdrop-bg-color);
17199}
17200.searchbar-backdrop.searchbar-backdrop-in {
17201 opacity: 1;
17202 pointer-events: auto;
17203}
17204.page-content > .searchbar-backdrop {
17205 position: fixed;
17206}
17207.searchbar-not-found {
17208 display: none;
17209}
17210.hidden-by-searchbar,
17211.list .hidden-by-searchbar,
17212.list.li.hidden-by-searchbar,
17213.list li.hidden-by-searchbar {
17214 display: none !important;
17215}
17216.navbar.with-searchbar-expandable-enabled-no-transition,
17217.navbar.with-searchbar-expandable-enabled-no-transition {
17218 --f7-navbar-large-collapse-progress: 1;
17219}
17220.navbar.with-searchbar-expandable-enabled,
17221.navbar.with-searchbar-expandable-enabled {
17222 --f7-navbar-large-collapse-progress: 1;
17223}
17224.navbar.with-searchbar-expandable-enabled .navbar-bg,
17225.navbar.with-searchbar-expandable-enabled .navbar-bg,
17226.navbar.with-searchbar-expandable-enabled .title-large,
17227.navbar.with-searchbar-expandable-enabled .title-large,
17228.navbar.with-searchbar-expandable-enabled .title-large-text,
17229.navbar.with-searchbar-expandable-enabled .title-large-text {
17230 transition-duration: 300ms;
17231}
17232.navbar.with-searchbar-expandable-closing .navbar-bg,
17233.navbar.with-searchbar-expandable-closing .navbar-bg,
17234.navbar.with-searchbar-expandable-closing .title-large,
17235.navbar.with-searchbar-expandable-closing .title-large,
17236.navbar.with-searchbar-expandable-closing .title-large-text,
17237.navbar.with-searchbar-expandable-closing .title-large-text {
17238 transition-duration: 300ms;
17239}
17240.page-content.with-searchbar-expandable-enabled {
17241 height: calc(100% + var(--f7-navbar-large-title-height));
17242 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
17243 transition-duration: 300ms;
17244 transition-property: transform;
17245}
17246.page-content.with-searchbar-expandable-closing {
17247 transition-duration: 300ms;
17248}
17249.navbar ~ .page:not(.no-navbar) > .searchbar,
17250.navbars ~ .page:not(.no-navbar) > .searchbar,
17251.page > .navbar ~ .searchbar {
17252 top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
17253}
17254.navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
17255.navbars ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
17256.page-with-navbar-large .navbar ~ .searchbar,
17257.page-with-navbar-large .navbar ~ * .searchbar {
17258 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));
17259 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
17260}
17261.navbars ~ .page-with-navbar-large:not(.no-navbar) .page-content .searchbar,
17262.page-with-navbar-large .page-content .searchbar {
17263 top: 0;
17264 transform: none;
17265}
17266.searchbar ~ * {
17267 --f7-page-searchbar-offset: var(--f7-searchbar-height);
17268}
17269.page > .toolbar-top ~ .searchbar,
17270.ios .page > .toolbar-top-ios ~ .searchbar,
17271.md .page > .toolbar-top-md ~ .searchbar,
17272.aurora .page > .toolbar-top-aurora ~ .searchbar {
17273 top: var(--f7-toolbar-height);
17274}
17275.page > .tabbar-labels.toolbar-top ~ .searchbar,
17276.ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
17277.md .page > .tabbar-labels.toolbar-top-md ~ .searchbar,
17278.aurora .page > .tabbar-labels.toolbar-top-aurora ~ .searchbar {
17279 top: var(--f7-tabbar-labels-height);
17280}
17281.page > .navbar ~ .toolbar-top ~ .searchbar,
17282.ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
17283.md .page > .navbar ~ .toolbar-top-md ~ .searchbar,
17284.aurora .page > .navbar ~ .toolbar-top-aurora ~ .searchbar {
17285 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
17286}
17287.page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
17288.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
17289.md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar,
17290.aurora .page > .navbar ~ .tabbar-labels.toolbar-top-aurora ~ .searchbar {
17291 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top));
17292}
17293.searchbar.searchbar-inline {
17294 width: auto;
17295 height: auto;
17296 background-color: transparent;
17297 background-image: none;
17298}
17299.searchbar.searchbar-inline:after,
17300.searchbar.searchbar-inline:before {
17301 display: none !important;
17302}
17303.searchbar.searchbar-inline .searchbar-input-wrap {
17304 height: var(--f7-searchbar-inline-input-height, var(--f7-searchbar-input-height));
17305}
17306.searchbar.searchbar-inline .searchbar-inner {
17307 padding: 0;
17308 position: static;
17309 width: auto;
17310 height: auto;
17311}
17312.searchbar.searchbar-inline input[type='text'],
17313.searchbar.searchbar-inline input[type='search'] {
17314 font-size: var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));
17315 padding-left: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));
17316 padding-right: calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));
17317}
17318.ios .searchbar input[type='search'],
17319.ios .searchbar input[type='text'] {
17320 z-index: 30;
17321}
17322.ios .searchbar .input-clear-button {
17323 z-index: 40;
17324 right: 7px;
17325}
17326.ios .searchbar-icon {
17327 width: 13px;
17328 height: 13px;
17329 position: absolute;
17330 top: 50%;
17331 margin-top: -6px;
17332 z-index: 40;
17333 left: 8px;
17334}
17335.ios .searchbar-icon:after {
17336 content: 'search_ios';
17337 line-height: 13px;
17338}
17339.ios .searchbar-disable-button {
17340 font-size: 17px;
17341 flex-shrink: 0;
17342 transform: translate3d(0, 0, 0);
17343 transition-duration: 300ms;
17344 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
17345 display: none;
17346}
17347.ios .searchbar-disable-button.active-state {
17348 transition-duration: 0ms;
17349 opacity: 0.3 !important;
17350}
17351.ios .searchbar-enabled .searchbar-disable-button {
17352 pointer-events: auto;
17353 opacity: 1;
17354 margin-left: 8px;
17355}
17356.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
17357 transition-duration: 300ms !important;
17358}
17359.ios .searchbar-expandable {
17360 left: 0;
17361 bottom: 0;
17362 opacity: 1;
17363 width: 100%;
17364 height: 0%;
17365 transform: translate3d(0, 0, 0);
17366 overflow: hidden;
17367}
17368.ios .searchbar-expandable .searchbar-disable-button {
17369 margin-left: 8px;
17370 opacity: 1;
17371 display: block;
17372}
17373.ios .searchbar-expandable .searchbar-inner {
17374 height: var(--f7-searchbar-expandable-size);
17375}
17376.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
17377.ios .navbar.with-searchbar-expandable-closing .navbar-bg {
17378 transition-property: transform, opacity;
17379}
17380.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,
17381.ios .navbar.with-searchbar-expandable-closing .navbar-bg,
17382.ios .navbar.with-searchbar-expandable-enabled .left,
17383.ios .navbar.with-searchbar-expandable-closing .left,
17384.ios .navbar.with-searchbar-expandable-enabled .title,
17385.ios .navbar.with-searchbar-expandable-closing .title,
17386.ios .navbar.with-searchbar-expandable-enabled .right,
17387.ios .navbar.with-searchbar-expandable-closing .right {
17388 transition-duration: 300ms;
17389}
17390.ios .navbar.with-searchbar-expandable-enabled .left,
17391.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,
17392.ios .navbar.with-searchbar-expandable-enabled .title,
17393.ios .navbar.with-searchbar-expandable-enabled-no-transition .title,
17394.ios .navbar.with-searchbar-expandable-enabled .right,
17395.ios .navbar.with-searchbar-expandable-enabled-no-transition .right {
17396 transform: translateY(calc(-1 * var(--f7-navbar-height)));
17397 opacity: 0 !important;
17398}
17399.ios .searchbar-expandable.searchbar-enabled {
17400 opacity: 1;
17401 height: var(--f7-searchbar-expandable-size);
17402 pointer-events: auto;
17403}
17404.md .searchbar-icon,
17405.md .searchbar-disable-button {
17406 position: absolute;
17407 left: calc(-4px + var(--f7-safe-area-left));
17408 top: 50%;
17409 transition-duration: 300ms;
17410}
17411.md .searchbar-icon {
17412 width: 24px;
17413 height: 24px;
17414 margin-left: 12px;
17415 margin-top: -12px;
17416}
17417.md .searchbar-icon:after {
17418 content: 'search_md';
17419 line-height: 1.2;
17420}
17421.md .searchbar-disable-button {
17422 width: 48px;
17423 height: 48px;
17424 transform: rotate(-90deg) scale(0.5);
17425 font-size: 0 !important;
17426 display: block;
17427 margin-top: -24px;
17428 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
17429}
17430.md .searchbar-disable-button:before {
17431 content: '';
17432 width: 152%;
17433 height: 152%;
17434 left: -26%;
17435 top: -26%;
17436 position: absolute;
17437 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
17438 background-repeat: no-repeat;
17439 background-position: center;
17440 background-size: 100% 100%;
17441 opacity: 0;
17442 pointer-events: none;
17443 transition-duration: 300ms;
17444 transition-property: opacity;
17445}
17446.md .searchbar-disable-button.icon-only:before,
17447.md .searchbar-disable-button.ripple-inset:before,
17448.md .searchbar-disable-button.searchbar-disable-button:before,
17449.md .searchbar-disable-button.input-clear-button:before,
17450.md .searchbar-disable-button.notification-close-button:before {
17451 width: 100%;
17452 height: 100%;
17453 left: 0;
17454 top: 0;
17455 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
17456}
17457.md .searchbar-disable-button.active-state:before {
17458 opacity: 1;
17459 transition-duration: 150ms;
17460}
17461.md .searchbar-disable-button:after {
17462 font-family: 'framework7-core-icons';
17463 font-weight: normal;
17464 font-style: normal;
17465 line-height: 1;
17466 letter-spacing: normal;
17467 text-transform: none;
17468 white-space: nowrap;
17469 word-wrap: normal;
17470 direction: ltr;
17471 -webkit-font-smoothing: antialiased;
17472 text-rendering: optimizeLegibility;
17473 -moz-osx-font-smoothing: grayscale;
17474 font-feature-settings: 'liga';
17475 text-align: center;
17476 display: block;
17477 width: 100%;
17478 height: 100%;
17479 font-size: 20px;
17480 line-height: 48px;
17481 content: 'arrow_left_md';
17482}
17483.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
17484 transform: rotate(0deg) scale(1);
17485 pointer-events: auto;
17486 opacity: 1;
17487}
17488.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
17489 opacity: 0;
17490 transform: rotate(90deg) scale(0.5);
17491}
17492.md .searchbar {
17493 --f7-searchbar-input-extra-padding-left: 16px;
17494}
17495.md .searchbar .input-clear-button {
17496 width: 48px;
17497 height: 48px;
17498 margin-top: -24px;
17499 right: 0;
17500}
17501.md .searchbar .input-clear-button:before {
17502 content: '';
17503 width: 152%;
17504 height: 152%;
17505 left: -26%;
17506 top: -26%;
17507 position: absolute;
17508 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
17509 background-repeat: no-repeat;
17510 background-position: center;
17511 background-size: 100% 100%;
17512 opacity: 0;
17513 pointer-events: none;
17514 transition-duration: 300ms;
17515 transition-property: opacity;
17516}
17517.md .searchbar .input-clear-button.icon-only:before,
17518.md .searchbar .input-clear-button.ripple-inset:before,
17519.md .searchbar .input-clear-button.searchbar-disable-button:before,
17520.md .searchbar .input-clear-button.input-clear-button:before,
17521.md .searchbar .input-clear-button.notification-close-button:before {
17522 width: 100%;
17523 height: 100%;
17524 left: 0;
17525 top: 0;
17526 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
17527}
17528.md .searchbar .input-clear-button.active-state:before {
17529 opacity: 1;
17530 transition-duration: 150ms;
17531}
17532.md .searchbar .input-clear-button:after {
17533 line-height: 48px;
17534 content: 'delete_md';
17535 opacity: 1;
17536}
17537.md .searchbar .input-clear-button:before {
17538 margin-left: 0;
17539 margin-top: 0;
17540}
17541.md .page > .searchbar,
17542.md .subnavbar .searchbar,
17543.md .searchbar-expandable {
17544 --f7-searchbar-input-extra-padding-left: 24px;
17545}
17546.md .page > .searchbar .searchbar-icon,
17547.md .subnavbar .searchbar .searchbar-icon,
17548.md .searchbar-expandable .searchbar-icon,
17549.md .page > .searchbar .searchbar-disable-button,
17550.md .subnavbar .searchbar .searchbar-disable-button,
17551.md .searchbar-expandable .searchbar-disable-button {
17552 left: calc(-4px + 8px + var(--f7-safe-area-left));
17553}
17554.md .searchbar-expandable {
17555 height: var(--f7-searchbar-expandable-size);
17556 opacity: 0;
17557 bottom: 0;
17558 border-radius: calc(var(--f7-searchbar-expandable-size));
17559 width: calc(var(--f7-searchbar-expandable-size));
17560 margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
17561 transform: translate3d(0px, 0px, 0px);
17562 background-color: var(--f7-searchbar-input-bg-color);
17563 left: 100%;
17564 margin-left: calc(var(--f7-searchbar-expandable-size) * -1);
17565}
17566.md .searchbar-expandable.searchbar-enabled {
17567 width: 100%;
17568 border-radius: 0;
17569 opacity: 1;
17570 pointer-events: auto;
17571 margin-top: 0;
17572 left: 0;
17573 margin-left: 0;
17574}
17575.aurora .searchbar input[type='search'],
17576.aurora .searchbar input[type='text'] {
17577 z-index: 30;
17578}
17579.aurora .searchbar .input-clear-button {
17580 z-index: 40;
17581 right: 8px;
17582}
17583.aurora .searchbar-icon {
17584 width: 24px;
17585 height: 24px;
17586 position: absolute;
17587 top: 50%;
17588 margin-top: -12px;
17589 z-index: 40;
17590 left: 5px;
17591}
17592.aurora .searchbar-icon:after {
17593 content: 'search_md';
17594 line-height: 24px;
17595}
17596.aurora .searchbar-disable-button {
17597 font-size: 14px;
17598 flex-shrink: 0;
17599 transform: translate3d(0, 0, 0);
17600 transition-duration: 300ms;
17601 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
17602 display: none;
17603}
17604.aurora .searchbar-disable-button.active-state {
17605 transition-duration: 0ms;
17606 opacity: 0.3 !important;
17607}
17608.aurora .searchbar-enabled .searchbar-disable-button {
17609 pointer-events: auto;
17610 opacity: 1;
17611 margin-left: 8px;
17612}
17613.aurora .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
17614 transition-duration: 300ms !important;
17615}
17616.aurora .searchbar-expandable {
17617 left: 0;
17618 top: auto;
17619 bottom: 0;
17620 opacity: 0;
17621 width: 100%;
17622 transform: translate3d(0, 0, 0);
17623 overflow: hidden;
17624}
17625.aurora .searchbar-expandable .searchbar-disable-button {
17626 margin-left: 8px;
17627 opacity: 1;
17628 display: block;
17629}
17630.aurora .searchbar-expandable .searchbar-inner {
17631 height: var(--f7-searchbar-expandable-size);
17632}
17633.aurora .searchbar-expandable.searchbar-enabled {
17634 opacity: 1;
17635 pointer-events: auto;
17636}
17637/* === Messages === */
17638:root {
17639 --f7-message-text-header-text-color: inherit;
17640 --f7-message-text-header-opacity: 0.65;
17641 --f7-message-text-header-font-size: 12px;
17642 --f7-message-text-footer-text-color: inherit;
17643 --f7-message-text-footer-opacity: 0.65;
17644 --f7-message-text-footer-font-size: 12px;
17645 --f7-message-bubble-line-height: 1.2;
17646 --f7-message-header-font-size: 12px;
17647 --f7-message-footer-font-size: 11px;
17648 --f7-message-name-font-size: 12px;
17649 --f7-message-name-font-weight: inherit;
17650 --f7-message-avatar-border-radius: 50%;
17651 --f7-messages-title-font-weight: inherit;
17652 /*
17653 --f7-message-sent-bg-color: var(--f7-theme-color);
17654 */
17655 --f7-message-sent-text-color: #fff;
17656 --f7-messages-content-bg-color: #fff;
17657 --f7-message-typing-indicator-bg-color: #000;
17658 --f7-message-received-bg-color: #e5e5ea;
17659 --f7-message-received-text-color: #000;
17660}
17661:root .theme-dark,
17662:root.theme-dark {
17663 --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
17664 --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
17665 --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
17666 --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
17667 --f7-messages-content-bg-color: transparent;
17668 --f7-message-received-bg-color: #252525;
17669 --f7-message-received-text-color: #fff;
17670 --f7-message-typing-indicator-bg-color: #fff;
17671}
17672.ios {
17673 --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
17674 --f7-messages-title-font-size: 11px;
17675 --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
17676 --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
17677 --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
17678 --f7-message-avatar-size: 29px;
17679 --f7-message-margin: 10px;
17680 --f7-message-bubble-min-height: 32px;
17681 --f7-message-bubble-font-size: 17px;
17682 --f7-message-bubble-border-radius: 16px;
17683 --f7-message-bubble-padding-vertical: 6px;
17684 --f7-message-bubble-padding-horizontal: 16px;
17685 --f7-message-typing-indicator-opacity: 0.35;
17686}
17687.md {
17688 --f7-messages-title-font-size: 12px;
17689 --f7-message-avatar-size: 32px;
17690 --f7-message-margin: 16px;
17691 --f7-message-bubble-min-height: 32px;
17692 --f7-message-bubble-font-size: 16px;
17693 --f7-message-bubble-border-radius: 4px;
17694 --f7-message-bubble-padding-vertical: 6px;
17695 --f7-message-bubble-padding-horizontal: 8px;
17696 --f7-message-typing-indicator-opacity: 0.6;
17697 --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
17698 --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
17699 --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
17700 --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
17701}
17702.aurora {
17703 --f7-messages-title-font-size: 12px;
17704 --f7-message-avatar-size: 24px;
17705 --f7-message-margin: 10px;
17706 --f7-message-bubble-min-height: 28px;
17707 --f7-message-bubble-font-size: 13px;
17708 --f7-message-bubble-line-height: 1.4;
17709 --f7-message-bubble-border-radius: 14px;
17710 --f7-message-bubble-padding-vertical: 5px;
17711 --f7-message-bubble-padding-horizontal: 10px;
17712 --f7-message-typing-indicator-opacity: 0.5;
17713 --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
17714 --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
17715 --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
17716 --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
17717}
17718.messages-content,
17719.messages {
17720 background: var(--f7-messages-content-bg-color);
17721}
17722.messages {
17723 display: flex;
17724 flex-direction: column;
17725 min-height: 100%;
17726 position: relative;
17727 z-index: 1;
17728}
17729.messages-title,
17730.message {
17731 margin-top: var(--f7-message-margin);
17732}
17733.messages-title:last-child,
17734.message:last-child {
17735 margin-bottom: var(--f7-message-margin);
17736}
17737.messages-title {
17738 text-align: center;
17739 width: 100%;
17740 line-height: 1;
17741 color: var(--f7-messages-title-text-color);
17742 font-size: var(--f7-messages-title-font-size);
17743 font-weight: var(--f7-messages-title-font-weight);
17744}
17745.message {
17746 max-width: 70%;
17747 box-sizing: border-box;
17748 display: flex;
17749 align-items: flex-end;
17750 position: relative;
17751 z-index: 1;
17752 transform: translate3d(0, 0, 0);
17753}
17754.message-avatar {
17755 border-radius: var(--f7-message-avatar-border-radius);
17756 position: relative;
17757 background-size: cover;
17758 align-self: flex-end;
17759 flex-shrink: 0;
17760 width: var(--f7-message-avatar-size);
17761 height: var(--f7-message-avatar-size);
17762}
17763.message-content {
17764 position: relative;
17765 display: flex;
17766 flex-direction: column;
17767}
17768.message-header,
17769.message-footer,
17770.message-name {
17771 line-height: 1;
17772}
17773.message-header {
17774 color: var(--f7-message-header-text-color);
17775 font-size: var(--f7-message-header-font-size);
17776}
17777.message-footer {
17778 color: var(--f7-message-footer-text-color);
17779 font-size: var(--f7-message-footer-font-size);
17780 margin-bottom: -1em;
17781}
17782.message-name {
17783 color: var(--f7-message-name-text-color);
17784 font-size: var(--f7-message-name-font-size);
17785 font-weight: var(--f7-message-name-font-weight);
17786}
17787.message-bubble {
17788 box-sizing: border-box;
17789 word-break: break-word;
17790 display: flex;
17791 flex-direction: column;
17792 position: relative;
17793 line-height: var(--f7-message-bubble-line-height);
17794 font-size: var(--f7-message-bubble-font-size);
17795 border-radius: var(--f7-message-bubble-border-radius);
17796 padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
17797 min-height: var(--f7-message-bubble-min-height);
17798}
17799.message-image img {
17800 display: block;
17801 max-width: 100%;
17802 height: auto;
17803 width: auto;
17804}
17805.message-text-header,
17806.message-text-footer {
17807 line-height: 1;
17808}
17809.message-text-header {
17810 color: var(--f7-message-text-header-text-color);
17811 opacity: var(--f7-message-text-header-opacity);
17812 font-size: var(--f7-message-text-header-font-size);
17813}
17814.message-text-footer {
17815 color: var(--f7-message-text-footer-text-color);
17816 opacity: var(--f7-message-text-footer-opacity);
17817 font-size: var(--f7-message-text-footer-font-size);
17818}
17819.message-text {
17820 text-align: left;
17821}
17822.message-sent {
17823 text-align: right;
17824 flex-direction: row-reverse;
17825 align-self: flex-end;
17826}
17827.message-sent .message-bubble {
17828 color: var(--f7-message-sent-text-color);
17829 background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
17830}
17831.message-sent .message-content {
17832 align-items: flex-end;
17833}
17834.message-sent.message-tail .message-bubble {
17835 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
17836}
17837.message-received {
17838 flex-direction: row;
17839}
17840.message-received .message-bubble {
17841 color: var(--f7-message-received-text-color);
17842 background: var(--f7-message-received-bg-color);
17843}
17844.message-received .message-content {
17845 align-items: flex-start;
17846}
17847.message-received.message-tail .message-bubble {
17848 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
17849}
17850.message:not(.message-last) .message-avatar {
17851 opacity: 0;
17852}
17853.message:not(.message-first) .message-name {
17854 display: none;
17855}
17856.message.message-same-name .message-name {
17857 display: none;
17858}
17859.message.message-same-header .message-header {
17860 display: none;
17861}
17862.message.message-same-footer .message-footer {
17863 display: none;
17864}
17865.message-appear-from-bottom {
17866 animation: message-appear-from-bottom 300ms;
17867}
17868.message-appear-from-top {
17869 animation: message-appear-from-top 300ms;
17870}
17871.message-typing-indicator {
17872 display: inline-block;
17873 font-size: 0;
17874 vertical-align: middle;
17875}
17876.message-typing-indicator > div {
17877 display: inline-block;
17878 position: relative;
17879 background: var(--f7-message-typing-indicator-bg-color);
17880 opacity: var(--f7-message-typing-indicator-opacity);
17881 vertical-align: middle;
17882 border-radius: 50%;
17883}
17884@keyframes message-appear-from-bottom {
17885 from {
17886 transform: translate3d(0, 100%, 0);
17887 }
17888 to {
17889 transform: translate3d(0, 0, 0);
17890 }
17891}
17892@keyframes message-appear-from-top {
17893 from {
17894 transform: translate3d(0, -100%, 0);
17895 }
17896 to {
17897 transform: translate3d(0, 0, 0);
17898 }
17899}
17900.ios .messages-title b,
17901.ios .message-header b,
17902.ios .message-footer b,
17903.ios .message-name b {
17904 font-weight: 600;
17905}
17906.ios .message-header,
17907.ios .message-name {
17908 margin-bottom: 3px;
17909}
17910.ios .message-footer {
17911 margin-top: 3px;
17912}
17913.ios .message-bubble {
17914 min-width: 48px;
17915}
17916.ios .message-image {
17917 margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
17918}
17919.ios .message-image:first-child {
17920 margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
17921}
17922.ios .message-image:first-child img {
17923 border-top-left-radius: var(--f7-message-bubble-border-radius);
17924 border-top-right-radius: var(--f7-message-bubble-border-radius);
17925}
17926.ios .message-image:last-child {
17927 margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
17928}
17929.ios .message-image:last-child img {
17930 border-bottom-left-radius: var(--f7-message-bubble-border-radius);
17931 border-bottom-right-radius: var(--f7-message-bubble-border-radius);
17932}
17933.ios .message-text-header {
17934 margin-bottom: 3px;
17935}
17936.ios .message-text-footer {
17937 margin-top: 3px;
17938}
17939.ios .message-received {
17940 margin-left: calc(10px + var(--f7-safe-area-left));
17941}
17942.ios .message-received .message-header,
17943.ios .message-received .message-footer,
17944.ios .message-received .message-name {
17945 margin-left: var(--f7-message-bubble-padding-horizontal);
17946}
17947.ios .message-received .message-bubble {
17948 padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
17949 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
17950}
17951.ios .message-received .message-image {
17952 margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
17953}
17954.ios .message-received.message-tail:not(.message-typing) .message-bubble {
17955 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
17956}
17957.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
17958 border-bottom-left-radius: 0px;
17959}
17960.ios .message-sent {
17961 margin-right: calc(10px + var(--f7-safe-area-right));
17962}
17963.ios .message-sent .message-header,
17964.ios .message-sent .message-footer,
17965.ios .message-sent .message-name {
17966 margin-right: var(--f7-message-bubble-padding-horizontal);
17967}
17968.ios .message-sent .message-bubble {
17969 padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
17970 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
17971}
17972.ios .message-sent .message-image {
17973 margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
17974}
17975.ios .message-sent.message-tail .message-bubble {
17976 -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
17977}
17978.ios .message-sent.message-tail .message-bubble .message-image:last-child img {
17979 border-bottom-right-radius: 0px;
17980}
17981.ios .message + .message:not(.message-first) {
17982 margin-top: 1px;
17983}
17984.ios .message-received.message-typing .message-content:after,
17985.ios .message-received.message-typing .message-content:before {
17986 content: '';
17987 position: absolute;
17988 background: var(--f7-message-received-bg-color);
17989 border-radius: 50%;
17990}
17991.ios .message-received.message-typing .message-content:after {
17992 width: 11px;
17993 height: 11px;
17994 left: 4px;
17995 bottom: 0px;
17996}
17997.ios .message-received.message-typing .message-content:before {
17998 width: 6px;
17999 height: 6px;
18000 left: -1px;
18001 bottom: -4px;
18002}
18003.ios .message-typing-indicator > div {
18004 width: 9px;
18005 height: 9px;
18006}
18007.ios .message-typing-indicator > div + div {
18008 margin-left: 4px;
18009}
18010.ios .message-typing-indicator > div:nth-child(1) {
18011 animation: ios-message-typing-indicator 900ms infinite;
18012}
18013.ios .message-typing-indicator > div:nth-child(2) {
18014 animation: ios-message-typing-indicator 900ms 150ms infinite;
18015}
18016.ios .message-typing-indicator > div:nth-child(3) {
18017 animation: ios-message-typing-indicator 900ms 300ms infinite;
18018}
18019@keyframes ios-message-typing-indicator {
18020 0% {
18021 opacity: 0.35;
18022 }
18023 25% {
18024 opacity: 0.2;
18025 }
18026 50% {
18027 opacity: 0.2;
18028 }
18029}
18030.md .messages-title b,
18031.md .message-header b,
18032.md .message-footer b,
18033.md .message-name b {
18034 font-weight: 500;
18035}
18036.md .message-header,
18037.md .message-name {
18038 margin-bottom: 2px;
18039}
18040.md .message-footer {
18041 margin-top: 2px;
18042}
18043.md .message-text-header {
18044 margin-bottom: 4px;
18045}
18046.md .message-text-footer {
18047 margin-top: 4px;
18048}
18049.md .message-received.message-tail .message-bubble:before,
18050.md .message-sent.message-tail .message-bubble:before {
18051 position: absolute;
18052 content: '';
18053 bottom: 0;
18054 width: 0;
18055 height: 0;
18056}
18057.md .message-received {
18058 margin-left: calc(8px + var(--f7-safe-area-left));
18059}
18060.md .message-received .message-avatar + .message-content {
18061 margin-left: var(--f7-message-bubble-padding-horizontal);
18062}
18063.md .message-received.message-tail .message-bubble:before {
18064 border-left: 8px solid transparent;
18065 border-right: 0 solid transparent;
18066 border-bottom: 8px solid var(--f7-message-received-bg-color);
18067 right: 100%;
18068}
18069.md .message-sent {
18070 margin-right: calc(8px + var(--f7-safe-area-right));
18071}
18072.md .message-sent .message-avatar + .message-content {
18073 margin-right: var(--f7-message-bubble-padding-horizontal);
18074}
18075.md .message-sent.message-tail .message-bubble:before {
18076 border-left: 0 solid transparent;
18077 border-right: 8px solid transparent;
18078 border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
18079 left: 100%;
18080}
18081.md .message + .message:not(.message-first) {
18082 margin-top: 8px;
18083}
18084.md .message-typing-indicator > div {
18085 width: 6px;
18086 height: 6px;
18087}
18088.md .message-typing-indicator > div + div {
18089 margin-left: 6px;
18090}
18091.md .message-typing-indicator > div:nth-child(1) {
18092 animation: md-message-typing-indicator 900ms infinite;
18093}
18094.md .message-typing-indicator > div:nth-child(2) {
18095 animation: md-message-typing-indicator 900ms 150ms infinite;
18096}
18097.md .message-typing-indicator > div:nth-child(3) {
18098 animation: md-message-typing-indicator 900ms 300ms infinite;
18099}
18100@keyframes md-message-typing-indicator {
18101 0% {
18102 transform: translateY(0%);
18103 }
18104 25% {
18105 transform: translateY(-5px);
18106 }
18107 50% {
18108 transform: translateY(0%);
18109 }
18110}
18111.aurora .messages-title b,
18112.aurora .message-header b,
18113.aurora .message-footer b,
18114.aurora .message-name b {
18115 font-weight: 500;
18116}
18117.aurora .message-header,
18118.aurora .message-name {
18119 margin-bottom: 2px;
18120}
18121.aurora .message-footer {
18122 margin-top: 2px;
18123}
18124.aurora .message-text-header {
18125 margin-bottom: 2px;
18126}
18127.aurora .message-text-footer {
18128 margin-top: 2px;
18129}
18130.aurora .message-received.message-tail .message-bubble:before,
18131.aurora .message-sent.message-tail .message-bubble:before {
18132 position: absolute;
18133 content: '';
18134 bottom: 0;
18135 width: 0;
18136 height: 0;
18137}
18138.aurora .message-image {
18139 margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal) + 4px);
18140}
18141.aurora .message-image:first-child {
18142 margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
18143}
18144.aurora .message-image:first-child img {
18145 border-top-left-radius: var(--f7-message-bubble-border-radius);
18146 border-top-right-radius: var(--f7-message-bubble-border-radius);
18147}
18148.aurora .message-image:last-child {
18149 margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical) + 4px);
18150}
18151.aurora .message-image:last-child img {
18152 border-bottom-left-radius: var(--f7-message-bubble-border-radius);
18153 border-bottom-right-radius: var(--f7-message-bubble-border-radius);
18154}
18155.aurora .message-received {
18156 margin-left: calc(16px + var(--f7-safe-area-left));
18157}
18158.aurora .message-received .message-avatar + .message-content {
18159 margin-left: 5px;
18160}
18161.aurora .message-received .message-header,
18162.aurora .message-received .message-footer,
18163.aurora .message-received .message-name {
18164 margin-left: var(--f7-message-bubble-padding-horizontal);
18165}
18166.aurora .message-received.message-tail .message-bubble:before {
18167 border-left: 6px solid transparent;
18168 border-right: 0 solid transparent;
18169 border-bottom: 6px solid var(--f7-message-received-bg-color);
18170 right: 100%;
18171 transform: translate(2px, 0px) rotate(-15deg);
18172 transform-origin: right bottom;
18173}
18174.aurora .message-sent {
18175 margin-right: calc(16px + var(--f7-safe-area-right));
18176}
18177.aurora .message-sent .message-avatar + .message-content {
18178 margin-right: 5px;
18179}
18180.aurora .message-sent .message-header,
18181.aurora .message-sent .message-footer,
18182.aurora .message-sent .message-name {
18183 margin-right: var(--f7-message-bubble-padding-horizontal);
18184}
18185.aurora .message-sent.message-tail .message-bubble:before {
18186 border-left: 0 solid transparent;
18187 border-right: 6px solid transparent;
18188 border-bottom: 6px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
18189 left: 100%;
18190 transform: translate(-2px, 0px) rotate(15deg);
18191 transform-origin: left bottom;
18192}
18193.aurora .message + .message:not(.message-first) {
18194 margin-top: 5px;
18195}
18196.aurora .message-typing-indicator > div {
18197 width: 6px;
18198 height: 6px;
18199}
18200.aurora .message-typing-indicator > div + div {
18201 margin-left: 4px;
18202}
18203.aurora .message-typing-indicator > div:nth-child(1) {
18204 animation: aurora-message-typing-indicator 900ms infinite;
18205}
18206.aurora .message-typing-indicator > div:nth-child(2) {
18207 animation: aurora-message-typing-indicator 900ms 150ms infinite;
18208}
18209.aurora .message-typing-indicator > div:nth-child(3) {
18210 animation: aurora-message-typing-indicator 900ms 300ms infinite;
18211}
18212@keyframes aurora-message-typing-indicator {
18213 0% {
18214 transform: translateY(0%);
18215 }
18216 50% {
18217 transform: translateY(-5px);
18218 }
18219 100% {
18220 transform: translateY(0%);
18221 }
18222}
18223/* === Messagebar === */
18224:root {
18225 --f7-messagebar-shadow-image: none;
18226 --f7-messagebar-textarea-bg-color: transparent;
18227 --f7-messagebar-attachments-height: 155px;
18228 --f7-messagebar-attachment-height: 155px;
18229 --f7-messagebar-attachment-landscape-height: 120px;
18230 --f7-messagebar-sheet-height: 252px;
18231 --f7-messagebar-sheet-landscape-height: 192px;
18232 /*
18233 --f7-messagebar-inner-padding-left: var(--f7-toolbar-inner-padding-left);
18234 --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
18235 */
18236 --f7-messagebar-bg-color: #fff;
18237 --f7-messagebar-bg-color-rgb: 255, 255, 255;
18238}
18239:root .theme-dark,
18240:root.theme-dark {
18241 --f7-messagebar-bg-color: var(--f7-bars-bg-color);
18242 --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
18243}
18244.ios {
18245 --f7-messagebar-height: 44px;
18246 --f7-messagebar-font-size: 17px;
18247 /*
18248 --f7-messagebar-link-color: var(--f7-theme-color);
18249 */
18250 --f7-messagebar-border-color: transparent;
18251 --f7-messagebar-textarea-border-radius: 17px;
18252 --f7-messagebar-textarea-padding: 6px 16px;
18253 --f7-messagebar-textarea-height: 34px;
18254 --f7-messagebar-textarea-font-size: 17px;
18255 --f7-messagebar-textarea-line-height: 20px;
18256 --f7-messagebar-sheet-bg-color: #d1d5da;
18257 --f7-messagebar-attachment-border-radius: 12px;
18258 --f7-messagebar-textarea-text-color: #000;
18259 --f7-messagebar-textarea-border: 1px solid #c8c8cd;
18260 --f7-messagebar-attachments-border-color: #c8c8cd;
18261}
18262.ios .theme-dark,
18263.ios.theme-dark {
18264 --f7-messagebar-textarea-text-color: #fff;
18265 --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
18266 --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
18267}
18268.md {
18269 --f7-messagebar-height: 48px;
18270 --f7-messagebar-font-size: 16px;
18271 --f7-messagebar-textarea-border-radius: 0px;
18272 --f7-messagebar-textarea-padding: 5px 8px;
18273 --f7-messagebar-textarea-height: 32px;
18274 --f7-messagebar-textarea-font-size: 16px;
18275 --f7-messagebar-textarea-line-height: 22px;
18276 --f7-messagebar-textarea-border: 1px solid transparent;
18277 --f7-messagebar-sheet-bg-color: #fff;
18278 --f7-messagebar-attachment-border-radius: 4px;
18279 --f7-messagebar-link-color: #333;
18280 --f7-messagebar-border-color: #d1d1d1;
18281 --f7-messagebar-textarea-text-color: #333;
18282 --f7-messagebar-attachments-border-color: #ddd;
18283}
18284.md .theme-dark,
18285.md.theme-dark {
18286 --f7-messagebar-border-color: transparent;
18287 --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
18288 --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
18289 --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
18290}
18291.aurora {
18292 --f7-messagebar-height: 38px;
18293 --f7-messagebar-font-size: 14px;
18294 /*
18295 --f7-messagebar-link-color: var(--f7-theme-color);
18296 */
18297 --f7-messagebar-border-color: transparent;
18298 --f7-messagebar-textarea-border-radius: 12px;
18299 --f7-messagebar-textarea-padding: 3px 10px;
18300 --f7-messagebar-textarea-height: 24px;
18301 --f7-messagebar-textarea-font-size: 13px;
18302 --f7-messagebar-textarea-line-height: 16px;
18303 --f7-messagebar-sheet-bg-color: #fff;
18304 --f7-messagebar-attachment-border-radius: 12px;
18305 --f7-messagebar-textarea-text-color: #000;
18306 --f7-messagebar-textarea-border: 1px solid #c8c8cd;
18307 --f7-messagebar-attachments-border-color: #c8c8cd;
18308}
18309.aurora .theme-dark,
18310.aurora.theme-dark {
18311 --f7-messagebar-textarea-text-color: #fff;
18312 --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
18313 --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
18314}
18315.messagebar {
18316 transform: translate3d(0, 0, 0);
18317 background: var(--f7-messagebar-bg-color);
18318 height: auto;
18319 min-height: var(--f7-messagebar-height);
18320 font-size: var(--f7-messagebar-font-size);
18321 padding-bottom: var(--f7-safe-area-bottom);
18322 bottom: 0;
18323}
18324.messagebar:before {
18325 content: '';
18326 position: absolute;
18327 background-color: var(--f7-messagebar-border-color);
18328 display: block;
18329 z-index: 15;
18330 top: 0;
18331 right: auto;
18332 bottom: auto;
18333 left: 0;
18334 height: 1px;
18335 width: 100%;
18336 transform-origin: 50% 0%;
18337 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
18338}
18339.messagebar:after {
18340 content: '';
18341 position: absolute;
18342 right: 0;
18343 width: 100%;
18344 bottom: 100%;
18345 height: 8px;
18346 top: auto;
18347 pointer-events: none;
18348 background: var(--f7-messagebar-shadow-image);
18349 transform: translate3d(0, 0, 0);
18350}
18351@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
18352 .ios-translucent-bars .messagebar {
18353 background-color: rgba(var(--f7-messagebar-bg-color-rgb), var(--f7-bars-translucent-opacity));
18354 -webkit-backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
18355 backdrop-filter: saturate(180%) blur(var(--f7-bars-translucent-blur));
18356 }
18357}
18358.messagebar.no-hairline:before,
18359.messagebar.no-border:before {
18360 display: none !important;
18361}
18362.messagebar.no-shadow:after,
18363.messagebar.toolbar-hidden:after {
18364 display: none !important;
18365}
18366.messagebar .toolbar-inner {
18367 top: auto;
18368 position: relative;
18369 height: auto;
18370 bottom: auto;
18371 padding-left: calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));
18372 padding-right: calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));
18373}
18374.messagebar.messagebar-sheet-visible > .toolbar-inner {
18375 bottom: 0;
18376}
18377.messagebar .messagebar-area {
18378 width: 100%;
18379 flex-shrink: 1;
18380 overflow: hidden;
18381 position: relative;
18382}
18383.messagebar textarea {
18384 width: 100%;
18385 flex-shrink: 1;
18386 background-color: var(--f7-messagebar-textarea-bg-color);
18387 border-radius: var(--f7-messagebar-textarea-border-radius);
18388 padding: var(--f7-messagebar-textarea-padding);
18389 height: var(--f7-messagebar-textarea-height);
18390 color: var(--f7-messagebar-textarea-text-color);
18391 font-size: var(--f7-messagebar-textarea-font-size);
18392 line-height: var(--f7-messagebar-textarea-line-height);
18393 border: var(--f7-messagebar-textarea-border);
18394}
18395.messagebar a.link {
18396 align-self: flex-end;
18397 flex-shrink: 0;
18398 color: var(--f7-messagebar-link-color, var(--f7-theme-color));
18399}
18400.messagebar-attachments {
18401 width: 100%;
18402 overflow: auto;
18403 -webkit-overflow-scrolling: touch;
18404 font-size: 0;
18405 white-space: nowrap;
18406 box-sizing: border-box;
18407 position: relative;
18408}
18409.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
18410 display: none;
18411}
18412.messagebar-attachment {
18413 background-size: cover;
18414 background-position: center;
18415 background-repeat: no-repeat;
18416 display: inline-block;
18417 vertical-align: middle;
18418 white-space: normal;
18419 height: var(--f7-messagebar-attachment-height);
18420 position: relative;
18421 border-radius: var(--f7-messagebar-attachment-border-radius);
18422}
18423@media (orientation: landscape) {
18424 .messagebar-attachment {
18425 height: var(--f7-messagebar-attachment-landscape-height);
18426 }
18427}
18428.messagebar-attachment img {
18429 display: block;
18430 width: auto;
18431 height: 100%;
18432 border-radius: var(--f7-messagebar-attachment-border-radius);
18433}
18434.messagebar-attachment + .messagebar-attachment {
18435 margin-left: 8px;
18436}
18437.messagebar-sheet {
18438 overflow: auto;
18439 -webkit-overflow-scrolling: touch;
18440 display: flex;
18441 flex-wrap: wrap;
18442 flex-direction: column;
18443 align-content: flex-start;
18444 height: var(--f7-messagebar-sheet-height);
18445 background-color: var(--f7-messagebar-sheet-bg-color);
18446 padding-left: var(--f7-safe-area-left);
18447 padding-right: var(--f7-safe-area-right);
18448}
18449@media (orientation: landscape) {
18450 .messagebar-sheet {
18451 height: var(--f7-messagebar-sheet-landscape-height);
18452 }
18453}
18454.messagebar-sheet-image,
18455.messagebar-sheet-item {
18456 box-sizing: border-box;
18457 flex-shrink: 0;
18458 margin-top: 1px;
18459 position: relative;
18460 overflow: hidden;
18461 height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
18462 width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
18463 margin-left: 1px;
18464}
18465@media (orientation: landscape) {
18466 .messagebar-sheet-image,
18467 .messagebar-sheet-item {
18468 width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
18469 height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
18470 }
18471}
18472.messagebar-sheet-image .icon-checkbox,
18473.messagebar-sheet-item .icon-checkbox,
18474.messagebar-sheet-image .icon-radio,
18475.messagebar-sheet-item .icon-radio {
18476 position: absolute;
18477 right: 8px;
18478 bottom: 8px;
18479}
18480.messagebar-sheet-image {
18481 background-size: cover;
18482 background-position: center;
18483 background-repeat: no-repeat;
18484}
18485.messagebar-attachment-delete {
18486 display: block;
18487 position: absolute;
18488 border-radius: 50%;
18489 box-sizing: border-box;
18490 cursor: pointer;
18491 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
18492}
18493.messagebar-attachment-delete:after,
18494.messagebar-attachment-delete:before {
18495 position: absolute;
18496 content: '';
18497 left: 50%;
18498 top: 50%;
18499}
18500.messagebar-attachment-delete:after {
18501 transform: rotate(45deg);
18502}
18503.messagebar-attachment-delete:before {
18504 transform: rotate(-45deg);
18505}
18506.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
18507 display: none;
18508}
18509.messagebar ~ * {
18510 --f7-page-toolbar-bottom-offset: var(--f7-messagebar-height);
18511}
18512.ios .messagebar a.link.icon-only:first-child {
18513 margin-left: -8px;
18514}
18515.ios .messagebar a.link.icon-only:last-child {
18516 margin-right: -8px;
18517}
18518.ios .messagebar a.link:not(.icon-only) + .messagebar-area {
18519 margin-left: 8px;
18520}
18521.ios .messagebar .messagebar-area + a.link:not(.icon-only) {
18522 margin-left: 8px;
18523}
18524.ios .messagebar-area {
18525 margin-top: 5px;
18526 margin-bottom: 5px;
18527}
18528.ios .messagebar-attachments {
18529 padding: 5px;
18530 border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
18531 border: 1px solid var(--f7-messagebar-attachments-border-color);
18532 border-bottom: none;
18533}
18534.ios .messagebar-attachments-visible .messagebar-attachments + textarea {
18535 border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
18536}
18537.ios .messagebar-attachment {
18538 font-size: 14px;
18539}
18540.ios .messagebar-attachment-delete {
18541 right: 5px;
18542 top: 5px;
18543 width: 20px;
18544 height: 20px;
18545 background: #7d7e80;
18546 border: 2px solid #fff;
18547}
18548.ios .messagebar-attachment-delete:after,
18549.ios .messagebar-attachment-delete:before {
18550 width: 10px;
18551 height: 2px;
18552 background: #fff;
18553 margin-left: -5px;
18554 margin-top: -1px;
18555}
18556.md .messagebar-attachments {
18557 padding: 8px;
18558 border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
18559}
18560.md .messagebar-area {
18561 margin-top: 8px;
18562 margin-bottom: 8px;
18563}
18564.md .messagebar-sheet-image .icon-checkbox,
18565.md .messagebar-sheet-item .icon-checkbox {
18566 border-color: #fff;
18567 background: rgba(255, 255, 255, 0.25);
18568 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
18569}
18570.md .messagebar-attachment-delete {
18571 right: 8px;
18572 top: 8px;
18573 width: 24px;
18574 height: 24px;
18575 background-color: var(--f7-theme-color);
18576 border-radius: 4px;
18577}
18578.md .messagebar-attachment-delete:after,
18579.md .messagebar-attachment-delete:before {
18580 width: 14px;
18581 height: 2px;
18582 background: #fff;
18583 margin-left: -7px;
18584 margin-top: -1px;
18585}
18586.aurora .messagebar a.link + .messagebar-area {
18587 margin-left: 5px;
18588}
18589.aurora .messagebar .messagebar-area + a.link {
18590 margin-left: 5px;
18591}
18592.aurora .messagebar-area {
18593 margin-top: 5px;
18594 margin-bottom: 5px;
18595}
18596.aurora .messagebar-sheet-image .icon-checkbox,
18597.aurora .messagebar-sheet-item .icon-checkbox {
18598 background: rgba(255, 255, 255, 0.25);
18599}
18600.aurora .messagebar-attachments {
18601 padding: 5px;
18602 border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
18603 border: 1px solid var(--f7-messagebar-attachments-border-color);
18604 border-bottom: none;
18605}
18606.aurora .messagebar-attachments-visible .messagebar-attachments + textarea {
18607 border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
18608}
18609.aurora .messagebar-attachment {
18610 font-size: 14px;
18611}
18612.aurora .messagebar-attachment-delete {
18613 right: 5px;
18614 top: 5px;
18615 width: 14px;
18616 height: 14px;
18617 background: #808080;
18618}
18619.aurora .messagebar-attachment-delete:after,
18620.aurora .messagebar-attachment-delete:before {
18621 width: 8px;
18622 height: 1px;
18623 background: #fff;
18624 margin-left: -4px;
18625 margin-top: -1px;
18626}
18627/* === Swiper === */
18628/**
18629 * Swiper 6.3.5
18630 * Most modern mobile touch slider and framework with hardware accelerated transitions
18631 * https://swiperjs.com
18632 *
18633 * Copyright 2014-2020 Vladimir Kharlampidi
18634 *
18635 * Released under the MIT License
18636 *
18637 * Released on: October 30, 2020
18638 */
18639
18640@font-face {
18641 font-family: 'swiper-icons';
18642 src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');
18643 font-weight: 400;
18644 font-style: normal;
18645}
18646:root {
18647 --swiper-theme-color: #007aff;
18648}
18649.swiper-container {
18650 margin-left: auto;
18651 margin-right: auto;
18652 position: relative;
18653 overflow: hidden;
18654 list-style: none;
18655 padding: 0;
18656 /* Fix of Webkit flickering */
18657 z-index: 1;
18658}
18659.swiper-container-vertical > .swiper-wrapper {
18660 flex-direction: column;
18661}
18662.swiper-wrapper {
18663 position: relative;
18664 width: 100%;
18665 height: 100%;
18666 z-index: 1;
18667 display: flex;
18668 transition-property: transform;
18669 box-sizing: content-box;
18670}
18671.swiper-container-android .swiper-slide,
18672.swiper-wrapper {
18673 transform: translate3d(0px, 0, 0);
18674}
18675.swiper-container-multirow > .swiper-wrapper {
18676 flex-wrap: wrap;
18677}
18678.swiper-container-multirow-column > .swiper-wrapper {
18679 flex-wrap: wrap;
18680 flex-direction: column;
18681}
18682.swiper-container-free-mode > .swiper-wrapper {
18683 transition-timing-function: ease-out;
18684 margin: 0 auto;
18685}
18686.swiper-slide {
18687 flex-shrink: 0;
18688 width: 100%;
18689 height: 100%;
18690 position: relative;
18691 transition-property: transform;
18692}
18693.swiper-slide-invisible-blank {
18694 visibility: hidden;
18695}
18696/* Auto Height */
18697.swiper-container-autoheight,
18698.swiper-container-autoheight .swiper-slide {
18699 height: auto;
18700}
18701.swiper-container-autoheight .swiper-wrapper {
18702 align-items: flex-start;
18703 transition-property: transform, height;
18704}
18705/* 3D Effects */
18706.swiper-container-3d {
18707 perspective: 1200px;
18708}
18709.swiper-container-3d .swiper-wrapper,
18710.swiper-container-3d .swiper-slide,
18711.swiper-container-3d .swiper-slide-shadow-left,
18712.swiper-container-3d .swiper-slide-shadow-right,
18713.swiper-container-3d .swiper-slide-shadow-top,
18714.swiper-container-3d .swiper-slide-shadow-bottom,
18715.swiper-container-3d .swiper-cube-shadow {
18716 transform-style: preserve-3d;
18717}
18718.swiper-container-3d .swiper-slide-shadow-left,
18719.swiper-container-3d .swiper-slide-shadow-right,
18720.swiper-container-3d .swiper-slide-shadow-top,
18721.swiper-container-3d .swiper-slide-shadow-bottom {
18722 position: absolute;
18723 left: 0;
18724 top: 0;
18725 width: 100%;
18726 height: 100%;
18727 pointer-events: none;
18728 z-index: 10;
18729}
18730.swiper-container-3d .swiper-slide-shadow-left {
18731 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
18732}
18733.swiper-container-3d .swiper-slide-shadow-right {
18734 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
18735}
18736.swiper-container-3d .swiper-slide-shadow-top {
18737 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
18738}
18739.swiper-container-3d .swiper-slide-shadow-bottom {
18740 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
18741}
18742/* CSS Mode */
18743.swiper-container-css-mode > .swiper-wrapper {
18744 overflow: auto;
18745 scrollbar-width: none;
18746 /* For Firefox */
18747 -ms-overflow-style: none;
18748 /* For Internet Explorer and Edge */
18749}
18750.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
18751 display: none;
18752}
18753.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
18754 scroll-snap-align: start start;
18755}
18756.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
18757 scroll-snap-type: x mandatory;
18758}
18759.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
18760 scroll-snap-type: y mandatory;
18761}
18762:root {
18763 --swiper-navigation-size: 44px;
18764 /*
18765 --swiper-navigation-color: var(--swiper-theme-color);
18766 */
18767}
18768.swiper-button-prev,
18769.swiper-button-next {
18770 position: absolute;
18771 top: 50%;
18772 width: calc(var(--swiper-navigation-size) / 44 * 27);
18773 height: var(--swiper-navigation-size);
18774 margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
18775 z-index: 10;
18776 cursor: pointer;
18777 display: flex;
18778 align-items: center;
18779 justify-content: center;
18780 color: var(--swiper-navigation-color, var(--swiper-theme-color));
18781}
18782.swiper-button-prev.swiper-button-disabled,
18783.swiper-button-next.swiper-button-disabled {
18784 opacity: 0.35;
18785 cursor: auto;
18786 pointer-events: none;
18787}
18788.swiper-button-prev:after,
18789.swiper-button-next:after {
18790 font-family: swiper-icons;
18791 font-size: var(--swiper-navigation-size);
18792 text-transform: none !important;
18793 letter-spacing: 0;
18794 text-transform: none;
18795 font-variant: initial;
18796 line-height: 1;
18797}
18798.swiper-button-prev,
18799.swiper-container-rtl .swiper-button-next {
18800 left: 10px;
18801 right: auto;
18802}
18803.swiper-button-prev:after,
18804.swiper-container-rtl .swiper-button-next:after {
18805 content: 'prev';
18806}
18807.swiper-button-next,
18808.swiper-container-rtl .swiper-button-prev {
18809 right: 10px;
18810 left: auto;
18811}
18812.swiper-button-next:after,
18813.swiper-container-rtl .swiper-button-prev:after {
18814 content: 'next';
18815}
18816.swiper-button-prev.swiper-button-white,
18817.swiper-button-next.swiper-button-white {
18818 --swiper-navigation-color: #ffffff;
18819}
18820.swiper-button-prev.swiper-button-black,
18821.swiper-button-next.swiper-button-black {
18822 --swiper-navigation-color: #000000;
18823}
18824.swiper-button-lock {
18825 display: none;
18826}
18827:root {
18828 /*
18829 --swiper-pagination-color: var(--swiper-theme-color);
18830 */
18831}
18832.swiper-pagination {
18833 position: absolute;
18834 text-align: center;
18835 transition: 300ms opacity;
18836 transform: translate3d(0, 0, 0);
18837 z-index: 10;
18838}
18839.swiper-pagination.swiper-pagination-hidden {
18840 opacity: 0;
18841}
18842/* Common Styles */
18843.swiper-pagination-fraction,
18844.swiper-pagination-custom,
18845.swiper-container-horizontal > .swiper-pagination-bullets {
18846 bottom: 10px;
18847 left: 0;
18848 width: 100%;
18849}
18850/* Bullets */
18851.swiper-pagination-bullets-dynamic {
18852 overflow: hidden;
18853 font-size: 0;
18854}
18855.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
18856 transform: scale(0.33);
18857 position: relative;
18858}
18859.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
18860 transform: scale(1);
18861}
18862.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
18863 transform: scale(1);
18864}
18865.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
18866 transform: scale(0.66);
18867}
18868.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
18869 transform: scale(0.33);
18870}
18871.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
18872 transform: scale(0.66);
18873}
18874.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
18875 transform: scale(0.33);
18876}
18877.swiper-pagination-bullet {
18878 width: 8px;
18879 height: 8px;
18880 display: inline-block;
18881 border-radius: 100%;
18882 background: #000;
18883 opacity: 0.2;
18884}
18885button.swiper-pagination-bullet {
18886 border: none;
18887 margin: 0;
18888 padding: 0;
18889 box-shadow: none;
18890 -webkit-appearance: none;
18891 -moz-appearance: none;
18892 appearance: none;
18893}
18894.swiper-pagination-clickable .swiper-pagination-bullet {
18895 cursor: pointer;
18896}
18897.swiper-pagination-bullet-active {
18898 opacity: 1;
18899 background: var(--swiper-pagination-color, var(--swiper-theme-color));
18900}
18901.swiper-container-vertical > .swiper-pagination-bullets {
18902 right: 10px;
18903 top: 50%;
18904 transform: translate3d(0px, -50%, 0);
18905}
18906.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
18907 margin: 6px 0;
18908 display: block;
18909}
18910.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
18911 top: 50%;
18912 transform: translateY(-50%);
18913 width: 8px;
18914}
18915.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
18916 display: inline-block;
18917 transition: 200ms transform, 200ms top;
18918}
18919.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
18920 margin: 0 4px;
18921}
18922.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
18923 left: 50%;
18924 transform: translateX(-50%);
18925 white-space: nowrap;
18926}
18927.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
18928 transition: 200ms transform, 200ms left;
18929}
18930.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
18931 transition: 200ms transform, 200ms right;
18932}
18933/* Progress */
18934.swiper-pagination-progressbar {
18935 background: rgba(0, 0, 0, 0.25);
18936 position: absolute;
18937}
18938.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
18939 background: var(--swiper-pagination-color, var(--swiper-theme-color));
18940 position: absolute;
18941 left: 0;
18942 top: 0;
18943 width: 100%;
18944 height: 100%;
18945 transform: scale(0);
18946 transform-origin: left top;
18947}
18948.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
18949 transform-origin: right top;
18950}
18951.swiper-container-horizontal > .swiper-pagination-progressbar,
18952.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
18953 width: 100%;
18954 height: 4px;
18955 left: 0;
18956 top: 0;
18957}
18958.swiper-container-vertical > .swiper-pagination-progressbar,
18959.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
18960 width: 4px;
18961 height: 100%;
18962 left: 0;
18963 top: 0;
18964}
18965.swiper-pagination-white {
18966 --swiper-pagination-color: #ffffff;
18967}
18968.swiper-pagination-black {
18969 --swiper-pagination-color: #000000;
18970}
18971.swiper-pagination-lock {
18972 display: none;
18973}
18974/* Scrollbar */
18975.swiper-scrollbar {
18976 border-radius: 10px;
18977 position: relative;
18978 -ms-touch-action: none;
18979 background: rgba(0, 0, 0, 0.1);
18980}
18981.swiper-container-horizontal > .swiper-scrollbar {
18982 position: absolute;
18983 left: 1%;
18984 bottom: 3px;
18985 z-index: 50;
18986 height: 5px;
18987 width: 98%;
18988}
18989.swiper-container-vertical > .swiper-scrollbar {
18990 position: absolute;
18991 right: 3px;
18992 top: 1%;
18993 z-index: 50;
18994 width: 5px;
18995 height: 98%;
18996}
18997.swiper-scrollbar-drag {
18998 height: 100%;
18999 width: 100%;
19000 position: relative;
19001 background: rgba(0, 0, 0, 0.5);
19002 border-radius: 10px;
19003 left: 0;
19004 top: 0;
19005}
19006.swiper-scrollbar-cursor-drag {
19007 cursor: move;
19008}
19009.swiper-scrollbar-lock {
19010 display: none;
19011}
19012.swiper-zoom-container {
19013 width: 100%;
19014 height: 100%;
19015 display: flex;
19016 justify-content: center;
19017 align-items: center;
19018 text-align: center;
19019}
19020.swiper-zoom-container > img,
19021.swiper-zoom-container > svg,
19022.swiper-zoom-container > canvas {
19023 max-width: 100%;
19024 max-height: 100%;
19025 object-fit: contain;
19026}
19027.swiper-slide-zoomed {
19028 cursor: move;
19029}
19030/* Preloader */
19031:root {
19032 /*
19033 --swiper-preloader-color: var(--swiper-theme-color);
19034 */
19035}
19036.swiper-lazy-preloader {
19037 width: 42px;
19038 height: 42px;
19039 position: absolute;
19040 left: 50%;
19041 top: 50%;
19042 margin-left: -21px;
19043 margin-top: -21px;
19044 z-index: 10;
19045 transform-origin: 50%;
19046 animation: swiper-preloader-spin 1s infinite linear;
19047 box-sizing: border-box;
19048 border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
19049 border-radius: 50%;
19050 border-top-color: transparent;
19051}
19052.swiper-lazy-preloader-white {
19053 --swiper-preloader-color: #fff;
19054}
19055.swiper-lazy-preloader-black {
19056 --swiper-preloader-color: #000;
19057}
19058@keyframes swiper-preloader-spin {
19059 100% {
19060 transform: rotate(360deg);
19061 }
19062}
19063/* a11y */
19064.swiper-container .swiper-notification {
19065 position: absolute;
19066 left: 0;
19067 top: 0;
19068 pointer-events: none;
19069 opacity: 0;
19070 z-index: -1000;
19071}
19072.swiper-container-fade.swiper-container-free-mode .swiper-slide {
19073 transition-timing-function: ease-out;
19074}
19075.swiper-container-fade .swiper-slide {
19076 pointer-events: none;
19077 transition-property: opacity;
19078}
19079.swiper-container-fade .swiper-slide .swiper-slide {
19080 pointer-events: none;
19081}
19082.swiper-container-fade .swiper-slide-active,
19083.swiper-container-fade .swiper-slide-active .swiper-slide-active {
19084 pointer-events: auto;
19085}
19086.swiper-container-cube {
19087 overflow: visible;
19088}
19089.swiper-container-cube .swiper-slide {
19090 pointer-events: none;
19091 -webkit-backface-visibility: hidden;
19092 backface-visibility: hidden;
19093 z-index: 1;
19094 visibility: hidden;
19095 transform-origin: 0 0;
19096 width: 100%;
19097 height: 100%;
19098}
19099.swiper-container-cube .swiper-slide .swiper-slide {
19100 pointer-events: none;
19101}
19102.swiper-container-cube.swiper-container-rtl .swiper-slide {
19103 transform-origin: 100% 0;
19104}
19105.swiper-container-cube .swiper-slide-active,
19106.swiper-container-cube .swiper-slide-active .swiper-slide-active {
19107 pointer-events: auto;
19108}
19109.swiper-container-cube .swiper-slide-active,
19110.swiper-container-cube .swiper-slide-next,
19111.swiper-container-cube .swiper-slide-prev,
19112.swiper-container-cube .swiper-slide-next + .swiper-slide {
19113 pointer-events: auto;
19114 visibility: visible;
19115}
19116.swiper-container-cube .swiper-slide-shadow-top,
19117.swiper-container-cube .swiper-slide-shadow-bottom,
19118.swiper-container-cube .swiper-slide-shadow-left,
19119.swiper-container-cube .swiper-slide-shadow-right {
19120 z-index: 0;
19121 -webkit-backface-visibility: hidden;
19122 backface-visibility: hidden;
19123}
19124.swiper-container-cube .swiper-cube-shadow {
19125 position: absolute;
19126 left: 0;
19127 bottom: 0px;
19128 width: 100%;
19129 height: 100%;
19130 background: #000;
19131 opacity: 0.6;
19132 -webkit-filter: blur(50px);
19133 filter: blur(50px);
19134 z-index: 0;
19135}
19136.swiper-container-flip {
19137 overflow: visible;
19138}
19139.swiper-container-flip .swiper-slide {
19140 pointer-events: none;
19141 -webkit-backface-visibility: hidden;
19142 backface-visibility: hidden;
19143 z-index: 1;
19144}
19145.swiper-container-flip .swiper-slide .swiper-slide {
19146 pointer-events: none;
19147}
19148.swiper-container-flip .swiper-slide-active,
19149.swiper-container-flip .swiper-slide-active .swiper-slide-active {
19150 pointer-events: auto;
19151}
19152.swiper-container-flip .swiper-slide-shadow-top,
19153.swiper-container-flip .swiper-slide-shadow-bottom,
19154.swiper-container-flip .swiper-slide-shadow-left,
19155.swiper-container-flip .swiper-slide-shadow-right {
19156 z-index: 0;
19157 -webkit-backface-visibility: hidden;
19158 backface-visibility: hidden;
19159}
19160
19161:root {
19162 --swiper-theme-color: var(--f7-theme-color);
19163}
19164.color-theme-red {
19165 --swiper-theme-color: #ff3b30;
19166}
19167.color-theme-green {
19168 --swiper-theme-color: #4cd964;
19169}
19170.color-theme-blue {
19171 --swiper-theme-color: #2196f3;
19172}
19173.color-theme-pink {
19174 --swiper-theme-color: #ff2d55;
19175}
19176.color-theme-yellow {
19177 --swiper-theme-color: #ffcc00;
19178}
19179.color-theme-orange {
19180 --swiper-theme-color: #ff9500;
19181}
19182.color-theme-purple {
19183 --swiper-theme-color: #9c27b0;
19184}
19185.color-theme-deeppurple {
19186 --swiper-theme-color: #673ab7;
19187}
19188.color-theme-lightblue {
19189 --swiper-theme-color: #5ac8fa;
19190}
19191.color-theme-teal {
19192 --swiper-theme-color: #009688;
19193}
19194.color-theme-lime {
19195 --swiper-theme-color: #cddc39;
19196}
19197.color-theme-deeporange {
19198 --swiper-theme-color: #ff6b22;
19199}
19200.color-theme-gray {
19201 --swiper-theme-color: #8e8e93;
19202}
19203.color-theme-white {
19204 --swiper-theme-color: #ffffff;
19205}
19206.color-theme-black {
19207 --swiper-theme-color: #000000;
19208}
19209.color-red {
19210 --swiper-theme-color: #ff3b30;
19211}
19212.color-green {
19213 --swiper-theme-color: #4cd964;
19214}
19215.color-blue {
19216 --swiper-theme-color: #2196f3;
19217}
19218.color-pink {
19219 --swiper-theme-color: #ff2d55;
19220}
19221.color-yellow {
19222 --swiper-theme-color: #ffcc00;
19223}
19224.color-orange {
19225 --swiper-theme-color: #ff9500;
19226}
19227.color-purple {
19228 --swiper-theme-color: #9c27b0;
19229}
19230.color-deeppurple {
19231 --swiper-theme-color: #673ab7;
19232}
19233.color-lightblue {
19234 --swiper-theme-color: #5ac8fa;
19235}
19236.color-teal {
19237 --swiper-theme-color: #009688;
19238}
19239.color-lime {
19240 --swiper-theme-color: #cddc39;
19241}
19242.color-deeporange {
19243 --swiper-theme-color: #ff6b22;
19244}
19245.color-gray {
19246 --swiper-theme-color: #8e8e93;
19247}
19248.color-white {
19249 --swiper-theme-color: #ffffff;
19250}
19251.color-black {
19252 --swiper-theme-color: #000000;
19253}
19254/* === Photo Browser === */
19255:root {
19256 --f7-photobrowser-bg-color: #fff;
19257 --f7-photobrowser-bars-bg-image: none;
19258 /*
19259 --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
19260 --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
19261 --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
19262 */
19263 --f7-photobrowser-caption-font-size: 14px;
19264 --f7-photobrowser-caption-light-text-color: #000;
19265 --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
19266 --f7-photobrowser-caption-dark-text-color: #fff;
19267 --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
19268 --f7-photobrowser-exposed-bg-color: #000;
19269 --f7-photobrowser-dark-bg-color: #000;
19270 --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
19271 --f7-photobrowser-dark-bars-text-color: #fff;
19272 --f7-photobrowser-dark-bars-link-color: #fff;
19273}
19274.photo-browser {
19275 position: absolute;
19276 left: 0;
19277 top: 0;
19278 width: 100%;
19279 height: 100%;
19280 z-index: 400;
19281}
19282.photo-browser-standalone.modal-in {
19283 transition-duration: 0ms;
19284 animation: photo-browser-in 400ms;
19285}
19286.photo-browser-standalone.modal-out {
19287 transition-duration: 0ms;
19288 animation: photo-browser-out 400ms !important;
19289}
19290.photo-browser-standalone.modal-out.swipe-close-to-bottom,
19291.photo-browser-standalone.modal-out.swipe-close-to-top {
19292 animation: none !important;
19293}
19294.photo-browser-standalone.photo-browser-transitioning {
19295 transition: 400ms;
19296 transition-property: transform;
19297 animation: none !important;
19298}
19299.photo-browser-popup.modal-out.swipe-close-to-bottom,
19300.photo-browser-popup.modal-out.swipe-close-to-top {
19301 transition-duration: 300ms;
19302}
19303.photo-browser-popup.modal-out.swipe-close-to-bottom {
19304 transform: translate3d(0, 100vh, 0);
19305}
19306.photo-browser-popup.modal-out.swipe-close-to-top {
19307 transform: translate3d(0, -100vh, 0);
19308}
19309.photo-browser-page {
19310 background: none;
19311}
19312.photo-browser-page .toolbar {
19313 transform: none;
19314}
19315.photo-browser-popup {
19316 background: none;
19317}
19318.photo-browser-of {
19319 margin: 0 5px;
19320}
19321.photo-browser-captions {
19322 pointer-events: none;
19323 position: absolute;
19324 left: 0;
19325 width: 100%;
19326 bottom: var(--f7-safe-area-bottom);
19327 z-index: 10;
19328 opacity: 1;
19329 transition: 400ms;
19330}
19331.photo-browser-captions.photo-browser-captions-exposed {
19332 opacity: 0;
19333}
19334.toolbar ~ .photo-browser-captions {
19335 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
19336 transform: translate3d(0, 0px, 0);
19337}
19338.toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
19339 transform: translate3d(0, 0px, 0);
19340}
19341.photo-browser-caption {
19342 box-sizing: border-box;
19343 transition: 300ms;
19344 position: absolute;
19345 bottom: 0;
19346 left: 0;
19347 opacity: 0;
19348 padding: 4px 5px;
19349 width: 100%;
19350 text-align: center;
19351 font-size: var(--f7-photobrowser-caption-font-size);
19352}
19353.photo-browser-caption:empty {
19354 display: none;
19355}
19356.photo-browser-caption.photo-browser-caption-active {
19357 opacity: 1;
19358}
19359.photo-browser-captions-light .photo-browser-caption {
19360 color: var(--f7-photobrowser-caption-light-text-color);
19361 background: var(--f7-photobrowser-caption-light-bg-color);
19362}
19363.photo-browser-captions-dark .photo-browser-caption {
19364 color: var(--f7-photobrowser-caption-dark-text-color);
19365 background: var(--f7-photobrowser-caption-dark-bg-color);
19366}
19367.photo-browser-swiper-container {
19368 position: absolute;
19369 left: 0;
19370 top: 0;
19371 width: 100%;
19372 height: 100%;
19373 overflow: hidden;
19374 background: var(--f7-photobrowser-bg-color);
19375 transition: 400ms;
19376 transition-property: background-color;
19377}
19378.photo-browser-prev.swiper-button-disabled,
19379.photo-browser-next.swiper-button-disabled {
19380 opacity: 0.3;
19381 pointer-events: none;
19382}
19383.photo-browser-slide {
19384 width: 100%;
19385 height: 100%;
19386 position: relative;
19387 overflow: hidden;
19388 display: flex;
19389 justify-content: center;
19390 align-items: center;
19391 flex-shrink: 0;
19392 box-sizing: border-box;
19393}
19394.photo-browser-slide span.swiper-zoom-container {
19395 display: none;
19396}
19397.photo-browser-slide img {
19398 width: auto;
19399 height: auto;
19400 max-width: 100%;
19401 max-height: 100%;
19402 display: none;
19403}
19404.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
19405.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
19406.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
19407 display: flex;
19408}
19409.photo-browser-slide.swiper-slide-active img,
19410.photo-browser-slide.swiper-slide-next img,
19411.photo-browser-slide.swiper-slide-prev img {
19412 display: inline;
19413}
19414.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
19415.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
19416.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
19417 display: block;
19418}
19419.photo-browser-slide iframe {
19420 width: 100%;
19421 height: 100%;
19422}
19423.photo-browser-slide .preloader {
19424 display: none;
19425 position: absolute;
19426 width: 42px;
19427 height: 42px;
19428 margin-left: -21px;
19429 margin-top: -21px;
19430 left: 50%;
19431 top: 50%;
19432}
19433.photo-browser-page .navbar-bg,
19434.navbar-photo-browser .navbar-bg,
19435.photo-browser-page .toolbar {
19436 background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
19437 background-image: var(--f7-photobrowser-bars-bg-image);
19438}
19439.photo-browser-page .navbar,
19440.photo-browser-page .toolbar {
19441 transform: translate3d(0, 0, 0);
19442 transition: 400ms;
19443 color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
19444}
19445.photo-browser-page .navbar a,
19446.photo-browser-page .toolbar a {
19447 color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
19448}
19449.photo-browser-exposed .navbar,
19450.photo-browser-exposed .toolbar {
19451 opacity: 0;
19452 visibility: hidden;
19453 pointer-events: none;
19454}
19455.photo-browser-exposed .toolbar ~ .photo-browser-captions {
19456 transform: translate3d(0, var(--f7-toolbar-height), 0);
19457}
19458.photo-browser-exposed .photo-browser-swiper-container {
19459 background: var(--f7-photobrowser-exposed-bg-color);
19460}
19461.photo-browser-exposed .photo-browser-caption {
19462 color: var(--f7-photobrowser-caption-dark-text-color);
19463 background: var(--f7-photobrowser-caption-dark-bg-color);
19464}
19465.view.with-photo-browser-page-exposed .navbar {
19466 opacity: 0;
19467 pointer-events: none;
19468}
19469.photo-browser-page-dark .navbar-bg,
19470.navbar-photo-browser-dark .navbar-bg,
19471.photo-browser-page-dark .toolbar {
19472 background: var(--f7-photobrowser-dark-bars-bg-color);
19473}
19474.photo-browser-page-dark .navbar-bg:before,
19475.navbar-photo-browser-dark .navbar-bg:before,
19476.photo-browser-page-dark .toolbar:before,
19477.photo-browser-page-dark .navbar-bg:after,
19478.navbar-photo-browser-dark .navbar-bg:after,
19479.photo-browser-page-dark .toolbar:after {
19480 display: none !important;
19481}
19482.navbar-photo-browser-dark,
19483.photo-browser-dark .navbar,
19484.photo-browser-dark .toolbar,
19485.photo-browser-dark-page .navbar,
19486.photo-browser-dark-page .toolbar {
19487 color: var(--f7-photobrowser-dark-bars-text-color);
19488}
19489.navbar-photo-browser-dark a,
19490.photo-browser-dark .navbar a,
19491.photo-browser-dark .toolbar a,
19492.photo-browser-dark-page .navbar a,
19493.photo-browser-dark-page .toolbar a {
19494 color: var(--f7-photobrowser-dark-bars-link-color);
19495}
19496.photo-browser-dark .photo-browser-swiper-container,
19497.photo-browser-page-dark .photo-browser-swiper-container {
19498 background: var(--f7-photobrowser-dark-bg-color);
19499}
19500@keyframes photo-browser-in {
19501 0% {
19502 transform: translate3d(0, 0, 0) scale(0.5);
19503 opacity: 0;
19504 }
19505 50% {
19506 transform: translate3d(0, 0, 0) scale(1.05);
19507 opacity: 1;
19508 }
19509 100% {
19510 transform: translate3d(0, 0, 0) scale(1);
19511 opacity: 1;
19512 }
19513}
19514@keyframes photo-browser-out {
19515 0% {
19516 transform: translate3d(0, 0, 0) scale(1);
19517 opacity: 1;
19518 }
19519 50% {
19520 transform: translate3d(0, 0, 0) scale(1.05);
19521 opacity: 1;
19522 }
19523 100% {
19524 transform: translate3d(0, 0, 0) scale(0.5);
19525 opacity: 0;
19526 }
19527}
19528/* === Notifications === */
19529:root {
19530 --f7-notification-max-width: 568px;
19531 --f7-notification-subtitle-text-transform: none;
19532 --f7-notification-subtitle-line-height: 1.35;
19533 --f7-notification-text-text-transform: none;
19534 --f7-notification-text-font-weight: 400;
19535}
19536:root .theme-dark,
19537:root.theme-dark {
19538 --f7-notification-subtitle-color: #fff;
19539}
19540.ios {
19541 --f7-notification-margin: 8px;
19542 --f7-notification-padding: 10px;
19543 --f7-notification-border-radius: 12px;
19544 --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
19545 --f7-notification-icon-size: 20px;
19546 --f7-notification-title-font-size: 13px;
19547 --f7-notification-title-text-transform: uppercase;
19548 --f7-notification-title-line-height: 1.4;
19549 --f7-notification-title-font-weight: 400;
19550 --f7-notification-title-letter-spacing: 0.02em;
19551 --f7-notification-title-right-font-size: 13px;
19552 --f7-notification-subtitle-font-size: 15px;
19553 --f7-notification-subtitle-font-weight: 600;
19554 --f7-notification-text-font-size: 15px;
19555 --f7-notification-text-line-height: 1.2;
19556 --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
19557 --f7-notification-bg-color-rgb: 255, 255, 255;
19558 --f7-notification-title-color: #000;
19559 --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
19560 --f7-notification-subtitle-color: #000;
19561 --f7-notification-text-color: #000;
19562}
19563.ios .theme-dark,
19564.ios.theme-dark {
19565 --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
19566 --f7-notification-bg-color-rgb: 30, 30, 30;
19567 --f7-notification-title-color: #fff;
19568 --f7-notification-text-color: #fff;
19569 --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
19570}
19571.md {
19572 --f7-notification-margin: 0px;
19573 --f7-notification-padding: 16px;
19574 --f7-notification-border-radius: 0px;
19575 --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
19576 --f7-notification-icon-size: 16px;
19577 --f7-notification-title-color: var(--f7-theme-color);
19578 --f7-notification-title-font-size: 12px;
19579 --f7-notification-title-text-transform: none;
19580 --f7-notification-title-line-height: 1;
19581 --f7-notification-title-font-weight: 400;
19582 --f7-notification-title-right-font-size: 12px;
19583 --f7-notification-subtitle-font-size: 14px;
19584 --f7-notification-subtitle-font-weight: 400;
19585 --f7-notification-text-font-size: 14px;
19586 --f7-notification-text-line-height: 1.35;
19587 --f7-notification-bg-color: #fff;
19588 --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
19589 --f7-notification-subtitle-color: #212121;
19590 --f7-notification-text-color: rgba(0, 0, 0, 0.54);
19591}
19592.md .theme-dark,
19593.md.theme-dark {
19594 --f7-notification-bg-color: #242424;
19595 --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
19596 --f7-notification-text-color: rgba(255, 255, 255, 0.54);
19597}
19598.aurora {
19599 --f7-notification-margin: 10px;
19600 --f7-notification-padding: 10px;
19601 --f7-notification-border-radius: 4px;
19602 --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
19603 --f7-notification-icon-size: 18px;
19604 --f7-notification-title-font-size: 13px;
19605 --f7-notification-title-text-transform: uppercase;
19606 --f7-notification-title-line-height: 1.4;
19607 --f7-notification-title-font-weight: 500;
19608 --f7-notification-title-letter-spacing: 0.02em;
19609 --f7-notification-title-right-font-size: 13px;
19610 --f7-notification-subtitle-font-size: 12px;
19611 --f7-notification-subtitle-font-weight: 600;
19612 --f7-notification-text-font-size: 12px;
19613 --f7-notification-text-line-height: 1.2;
19614 --f7-notification-bg-color: #fff;
19615 --f7-notification-title-color: #000;
19616 --f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
19617 --f7-notification-subtitle-color: #000;
19618 --f7-notification-text-color: #000;
19619}
19620.aurora .theme-dark,
19621.aurora.theme-dark {
19622 --f7-notification-bg-color: #242424;
19623 --f7-notification-title-color: #fff;
19624 --f7-notification-text-color: #fff;
19625 --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
19626}
19627.notification {
19628 --f7-link-highlight-color: var(--f7-link-highlight-black);
19629 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
19630 position: absolute;
19631 left: var(--f7-notification-margin);
19632 top: var(--f7-notification-margin);
19633 width: calc(100% - var(--f7-notification-margin) * 2);
19634 z-index: 20000;
19635 font-size: 14px;
19636 margin: 0;
19637 border: none;
19638 display: none;
19639 box-sizing: border-box;
19640 transition-property: transform;
19641 direction: ltr;
19642 max-width: var(--f7-notification-max-width);
19643 padding: var(--f7-notification-padding);
19644 border-radius: var(--f7-notification-border-radius);
19645 box-shadow: var(--f7-notification-box-shadow);
19646 background: var(--f7-notification-bg-color);
19647 margin-top: var(--f7-safe-area-top);
19648}
19649@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
19650 .ios-translucent-modals .notification {
19651 background-color: rgba(var(--f7-notification-bg-color-rgb), 0.8);
19652 -webkit-backdrop-filter: saturate(180%) blur(20px);
19653 backdrop-filter: saturate(180%) blur(20px);
19654 }
19655}
19656@media (min-width: 568px) {
19657 .notification {
19658 left: 50%;
19659 width: var(--f7-notification-max-width);
19660 margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
19661 }
19662}
19663.notification-title {
19664 color: var(--f7-notification-title-color, var(--f7-theme-color));
19665 font-size: var(--f7-notification-title-font-size);
19666 text-transform: var(--f7-notification-title-text-transform);
19667 line-height: var(--f7-notification-title-line-height);
19668 font-weight: var(--f7-notification-title-font-weight);
19669 letter-spacing: var(--f7-notification-title-letter-spacing);
19670}
19671.notification-subtitle {
19672 color: var(--f7-notification-subtitle-color);
19673 font-size: var(--f7-notification-subtitle-font-size);
19674 text-transform: var(--f7-notification-subtitle-text-transform);
19675 line-height: var(--f7-notification-subtitle-line-height);
19676 font-weight: var(--f7-notification-subtitle-font-weight);
19677}
19678.notification-text {
19679 color: var(--f7-notification-text-color);
19680 font-size: var(--f7-notification-text-font-size);
19681 text-transform: var(--f7-notification-text-text-transform);
19682 line-height: var(--f7-notification-text-line-height);
19683 font-weight: var(--f7-notification-text-font-weight);
19684}
19685.notification-title-right-text {
19686 color: var(--f7-notification-title-right-color);
19687 font-size: var(--f7-notification-title-right-font-size);
19688}
19689.notification-icon {
19690 font-size: 0;
19691 line-height: var(--f7-notification-icon-size);
19692}
19693.notification-icon i,
19694.notification-icon {
19695 width: var(--f7-notification-icon-size) !important;
19696 height: var(--f7-notification-icon-size) !important;
19697}
19698.notification-icon i {
19699 font-size: var(--f7-notification-icon-size);
19700}
19701.notification-icon img {
19702 height: var(--f7-notification-icon-size);
19703}
19704.notification-header {
19705 display: flex;
19706 justify-content: flex-start;
19707 align-items: center;
19708}
19709.notification-close-button {
19710 margin-left: auto;
19711 cursor: pointer;
19712 position: relative;
19713}
19714.notification-close-button:after {
19715 font-family: 'framework7-core-icons';
19716 font-weight: normal;
19717 font-style: normal;
19718 line-height: 1;
19719 letter-spacing: normal;
19720 text-transform: none;
19721 white-space: nowrap;
19722 word-wrap: normal;
19723 direction: ltr;
19724 -webkit-font-smoothing: antialiased;
19725 text-rendering: optimizeLegibility;
19726 -moz-osx-font-smoothing: grayscale;
19727 font-feature-settings: 'liga';
19728 display: block;
19729 width: 100%;
19730 height: 100%;
19731 font-size: 20px;
19732 position: absolute;
19733 left: 50%;
19734 top: 50%;
19735 text-align: center;
19736}
19737.ios .notification {
19738 transition-duration: 450ms;
19739 transform: translate3d(0%, -200%, 0);
19740}
19741.ios .notification.modal-in {
19742 transform: translate3d(0%, 0%, 0);
19743 opacity: 1;
19744}
19745.ios .notification.modal-out {
19746 transform: translate3d(0%, -200%, 0);
19747}
19748.ios .notification-icon {
19749 margin-right: 8px;
19750}
19751.ios .notification-header + .notification-content {
19752 margin-top: 10px;
19753}
19754.ios .notification-title-right-text {
19755 margin-right: 6px;
19756 margin-left: auto;
19757}
19758.ios .notification-title-right-text + .notification-close-button {
19759 margin-left: 10px;
19760}
19761.ios .notification-close-button {
19762 font-size: 14px;
19763 width: 20px;
19764 height: 20px;
19765 opacity: 0.3;
19766 transition-duration: 300ms;
19767}
19768.ios .notification-close-button.active-state {
19769 transition-duration: 0ms;
19770 opacity: 0.1;
19771}
19772.ios .notification-close-button:after {
19773 color: #000;
19774 content: 'notification_close_ios';
19775 font-size: 0.65em;
19776 line-height: 44px;
19777 width: 44px;
19778 height: 44px;
19779 margin-left: -22px;
19780 margin-top: -22px;
19781}
19782.ios .theme-dark .notification-close-button:after,
19783.ios.theme-dark .notification-close-button:after {
19784 color: #fff;
19785}
19786.md .notification {
19787 transform: translate3d(0, -150%, 0);
19788}
19789.md .notification.modal-in {
19790 transition-duration: 0ms;
19791 animation: notification-md-in 400ms ease-out;
19792 transform: translate3d(0, 0%, 0);
19793}
19794.md .notification.modal-in.notification-transitioning {
19795 transition-duration: 200ms;
19796}
19797.md .notification.modal-out {
19798 animation: none;
19799 transition-duration: 200ms;
19800 transition-timing-function: ease-in;
19801 transform: translate3d(0, -150%, 0);
19802}
19803.md .notification-icon {
19804 margin-right: 8px;
19805}
19806.md .notification-subtitle + .notification-text {
19807 margin-top: 2px;
19808}
19809.md .notification-header + .notification-content {
19810 margin-top: 6px;
19811}
19812.md .notification-title-right-text {
19813 margin-left: 4px;
19814}
19815.md .notification-title-right-text:before {
19816 content: '';
19817 width: 3px;
19818 height: 3px;
19819 border-radius: 50%;
19820 display: inline-block;
19821 vertical-align: middle;
19822 margin-right: 4px;
19823 background: var(--f7-notification-title-right-color);
19824}
19825.md .notification-close-button {
19826 width: 16px;
19827 height: 16px;
19828 transition-duration: 300ms;
19829}
19830.md .notification-close-button:before {
19831 content: '';
19832 width: 152%;
19833 height: 152%;
19834 left: -26%;
19835 top: -26%;
19836 position: absolute;
19837 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
19838 background-repeat: no-repeat;
19839 background-position: center;
19840 background-size: 100% 100%;
19841 opacity: 0;
19842 pointer-events: none;
19843 transition-duration: 300ms;
19844 transition-property: opacity;
19845}
19846.md .notification-close-button.icon-only:before,
19847.md .notification-close-button.ripple-inset:before,
19848.md .notification-close-button.searchbar-disable-button:before,
19849.md .notification-close-button.input-clear-button:before,
19850.md .notification-close-button.notification-close-button:before {
19851 width: 100%;
19852 height: 100%;
19853 left: 0;
19854 top: 0;
19855 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
19856}
19857.md .notification-close-button.active-state:before {
19858 opacity: 1;
19859 transition-duration: 150ms;
19860}
19861.md .notification-close-button:before,
19862.md .notification-close-button:after {
19863 width: 48px;
19864 height: 48px;
19865 left: 50%;
19866 top: 50%;
19867 margin-left: -24px;
19868 margin-top: -24px;
19869}
19870.md .notification-close-button:after {
19871 color: #737373;
19872 content: 'delete_md';
19873 line-height: 48px;
19874 font-size: 14px;
19875}
19876@keyframes notification-md-in {
19877 0% {
19878 transform: translate3d(0, -150%, 0);
19879 }
19880 50% {
19881 transform: translate3d(0, 10%, 0);
19882 }
19883 100% {
19884 transform: translate3d(0, 0%, 0);
19885 }
19886}
19887.aurora .notification {
19888 transition-duration: 450ms;
19889 transform: translate3d(0%, -200%, 0);
19890}
19891.aurora .notification.modal-in {
19892 transform: translate3d(0%, 0%, 0);
19893 opacity: 1;
19894}
19895.aurora .notification.modal-out {
19896 transform: translate3d(0%, -200%, 0);
19897}
19898.aurora .notification-icon {
19899 margin-right: 10px;
19900}
19901.aurora .notification-header + .notification-content {
19902 margin-top: 10px;
19903}
19904.aurora .notification-title-right-text {
19905 margin-right: 0px;
19906 margin-left: auto;
19907}
19908.aurora .notification-title-right-text + .notification-close-button {
19909 margin-left: 10px;
19910}
19911.aurora .notification-close-button {
19912 font-size: 14px;
19913 width: 16px;
19914 height: 16px;
19915 opacity: 0.4;
19916 transition-duration: 300ms;
19917}
19918.aurora .notification-close-button.active-state {
19919 transition-duration: 0ms;
19920 opacity: 0.6;
19921}
19922.aurora .notification-close-button:after {
19923 color: #000;
19924 content: 'notification_close_ios';
19925 font-size: 0.5em;
19926 line-height: 38px;
19927 width: 38px;
19928 height: 38px;
19929 margin-left: -19px;
19930 margin-top: -19px;
19931}
19932.aurora .theme-dark .notification-close-button:after,
19933.aurora.theme-dark .notification-close-button:after {
19934 color: #fff;
19935}
19936/* === Autocomplete === */
19937:root {
19938 --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
19939 --f7-autocomplete-dropdown-preloader-size: 20px;
19940 /*
19941 --f7-autocomplete-dropdown-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
19942 */
19943 --f7-autocomplete-dropdown-bg-color: #fff;
19944}
19945:root .theme-dark,
19946:root.theme-dark {
19947 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
19948}
19949.ios {
19950 --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
19951 --f7-autocomplete-dropdown-text-matching-font-weight: 600;
19952 --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
19953 --f7-autocomplete-dropdown-text-color: #000;
19954 --f7-autocomplete-dropdown-text-matching-color: #000;
19955}
19956.ios .theme-dark,
19957.ios.theme-dark {
19958 --f7-autocomplete-dropdown-text-color: #fff;
19959 --f7-autocomplete-dropdown-text-matching-color: #fff;
19960}
19961.md {
19962 --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
19963 --f7-autocomplete-dropdown-text-matching-font-weight: 400;
19964 --f7-autocomplete-dropdown-font-size: var(--f7-list-font-size);
19965 --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
19966 --f7-autocomplete-dropdown-text-matching-color: #212121;
19967}
19968.md .theme-dark,
19969.md.theme-dark {
19970 --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
19971 --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
19972}
19973.aurora {
19974 --f7-autocomplete-dropdown-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
19975 --f7-autocomplete-dropdown-text-matching-font-weight: 700;
19976 --f7-autocomplete-dropdown-font-size: 13px;
19977 --f7-autocomplete-dropdown-text-color: #000;
19978 --f7-autocomplete-dropdown-text-matching-color: #000;
19979}
19980.aurora .theme-dark,
19981.aurora.theme-dark {
19982 --f7-autocomplete-dropdown-text-color: #fff;
19983 --f7-autocomplete-dropdown-text-matching-color: #fff;
19984}
19985.autocomplete-page .autocomplete-found {
19986 display: block;
19987}
19988.autocomplete-page .autocomplete-not-found {
19989 display: none;
19990}
19991.autocomplete-page .autocomplete-values {
19992 display: block;
19993}
19994.autocomplete-page .list ul:empty {
19995 display: none;
19996}
19997.autocomplete-preloader:not(.autocomplete-preloader-visible) {
19998 visibility: hidden;
19999}
20000.autocomplete-preloader:not(.autocomplete-preloader-visible),
20001.autocomplete-preloader:not(.autocomplete-preloader-visible) * {
20002 animation: none;
20003}
20004.autocomplete-dropdown {
20005 background: var(--f7-autocomplete-dropdown-bg-color);
20006 box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
20007 box-sizing: border-box;
20008 position: absolute;
20009 z-index: 500;
20010 width: 100%;
20011 left: 0;
20012}
20013.autocomplete-dropdown .autocomplete-dropdown-inner {
20014 position: relative;
20015 overflow: auto;
20016 -webkit-overflow-scrolling: touch;
20017 height: 100%;
20018 z-index: 1;
20019}
20020.autocomplete-dropdown .autocomplete-preloader {
20021 display: none;
20022 position: absolute;
20023 bottom: 100%;
20024 width: var(--f7-autocomplete-dropdown-preloader-size);
20025 height: var(--f7-autocomplete-dropdown-preloader-size);
20026}
20027.autocomplete-dropdown .autocomplete-preloader-visible {
20028 display: block;
20029}
20030.autocomplete-dropdown .autocomplete-dropdown-placeholder {
20031 color: var(--f7-autocomplete-dropdown-placeholder-color);
20032}
20033.autocomplete-dropdown .list {
20034 margin: 0;
20035 color: var(--f7-autocomplete-dropdown-text-color);
20036 font-size: var(--f7-autocomplete-dropdown-font-size);
20037}
20038.autocomplete-dropdown .list b {
20039 color: var(--f7-autocomplete-dropdown-text-matching-color);
20040 font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
20041}
20042.autocomplete-dropdown .list ul {
20043 background: none !important;
20044}
20045.autocomplete-dropdown .list ul:before,
20046.autocomplete-dropdown .list ul:after {
20047 display: none !important;
20048}
20049.autocomplete-dropdown .autocomplete-dropdown-selected {
20050 background: var(--f7-autocomplete-dropdown-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
20051}
20052.searchbar-input-wrap .autocomplete-dropdown {
20053 background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
20054 border-radius: var(--f7-searchbar-input-border-radius);
20055}
20056.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
20057 color: var(--f7-searchbar-placeholder-color);
20058}
20059.searchbar-input-wrap .autocomplete-dropdown li:last-child {
20060 border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
20061 position: relative;
20062 overflow: hidden;
20063}
20064.searchbar-input-wrap .autocomplete-dropdown .item-content {
20065 padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left));
20066}
20067.list .item-content-dropdown-expanded .item-title.item-label {
20068 width: 0;
20069 flex-shrink: 10;
20070 overflow: hidden;
20071}
20072.list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
20073 margin-left: 0;
20074}
20075.list .item-content-dropdown-expanded .item-input-wrap {
20076 width: 100%;
20077}
20078.ios .autocomplete-dropdown .autocomplete-preloader {
20079 right: 16px;
20080 margin-bottom: 12px;
20081}
20082.ios .searchbar-input-wrap .autocomplete-dropdown {
20083 margin-top: calc(-1 * var(--f7-searchbar-input-height));
20084 top: 100%;
20085 z-index: 20;
20086}
20087.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
20088 padding-top: var(--f7-searchbar-input-height);
20089}
20090.md .autocomplete-page .navbar .autocomplete-preloader {
20091 margin-right: 8px;
20092}
20093.md .autocomplete-popup .navbar .autocomplete-preloader {
20094 margin-left: 8px;
20095 margin-right: 16px;
20096}
20097.md .autocomplete-dropdown .autocomplete-preloader {
20098 right: 16px;
20099 margin-bottom: 8px;
20100}
20101.md .autocomplete-dropdown .autocomplete-preloader circle {
20102 stroke-width: 3;
20103}
20104.aurora .autocomplete-dropdown .autocomplete-preloader {
20105 right: 16px;
20106 margin-bottom: 2px;
20107}
20108.aurora .searchbar-input-wrap .autocomplete-dropdown {
20109 margin-top: calc(-1 * var(--f7-searchbar-input-height));
20110 top: 100%;
20111 z-index: 20;
20112}
20113.aurora .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
20114 padding-top: var(--f7-searchbar-input-height);
20115}
20116/* === Tooltip === */
20117:root {
20118 --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
20119 --f7-tooltip-text-color: #fff;
20120 --f7-tooltip-border-radius: 4px;
20121 --f7-tooltip-padding: 8px 16px;
20122 --f7-tooltip-font-size: 14px;
20123 --f7-tooltip-font-weight: 500;
20124 --f7-tooltip-desktop-padding: 6px 8px;
20125 --f7-tooltip-desktop-font-size: 12px;
20126}
20127.tooltip {
20128 position: absolute;
20129 z-index: 20000;
20130 background: var(--f7-tooltip-bg-color);
20131 border-radius: var(--f7-tooltip-border-radius);
20132 padding: var(--f7-tooltip-padding);
20133 color: var(--f7-tooltip-text-color);
20134 font-size: var(--f7-tooltip-font-size);
20135 font-weight: var(--f7-tooltip-font-weight);
20136 box-sizing: border-box;
20137 line-height: 1.2;
20138 opacity: 0;
20139 transform: scale(0.9);
20140 transition-duration: 150ms;
20141 transition-property: opacity, transform;
20142 z-index: 99000;
20143}
20144.tooltip.tooltip-in {
20145 transform: scale(1);
20146 opacity: 1;
20147}
20148.tooltip.tooltip-out {
20149 opacity: 0;
20150 transform: scale(1);
20151}
20152.device-desktop .tooltip {
20153 font-size: var(--f7-tooltip-desktop-font-size);
20154 padding: var(--f7-tooltip-desktop-padding);
20155}
20156/* === Gauge === */
20157.gauge {
20158 position: relative;
20159 text-align: center;
20160 margin-left: auto;
20161 margin-right: auto;
20162 display: inline-block;
20163}
20164.gauge-svg,
20165.gauge svg {
20166 max-width: 100%;
20167 height: auto;
20168}
20169.gauge-svg circle,
20170.gauge svg circle,
20171.gauge-svg path,
20172.gauge svg path {
20173 transition-duration: 400ms;
20174}
20175/* === Skeleton === */
20176:root {
20177 --skeleton-color: #ccc;
20178 --skeleton-icon-color: rgba(0, 0, 0, 0.25); }
20179
20180.skeleton-block {
20181 height: 1em;
20182 background: var(--skeleton-color) !important;
20183 width: 100%;
20184 display: block; }
20185
20186@font-face {
20187 font-family: 'skeleton';
20188 src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAYEAA0AAAAAEUAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAcjvRG2U9TLzIAAAFMAAAASwAAAGBRtV1jY21hcAAAAZgAAAC9AAABamglddJjdnQgAAACWAAAAAQAAAAEABEBRGdhc3AAAAJcAAAACAAAAAj//wADZ2x5ZgAAAmQAAACXAAAJjHCzhiRoZWFkAAAC/AAAAC4AAAA2FrNd6WhoZWEAAAMsAAAAGgAAACQC8ADFaG10eAAAA0gAAAATAAAAtAMAABFsb2NhAAADXAAAAK4AAACuaNBmhG1heHAAAAQMAAAAHwAAACAAmgA5bmFtZQAABCwAAAE5AAACNKfxxURwb3N0AAAFaAAAAJkAAADOCKMIc3icY2BgYGQAghsJmjkg+rYX3zYYDQA7wwWhAAB4nGNgYWRgnMDAysDA6MOYxsDA4A6lvzJIMrQwMDAxsHIywAAjAxIISHNNYWhgUGCoZTzw/wCDHuMBBgeYGsYDQB4DUI4RAOnYC70AeJxjYGBgZoBgGQZGBhBIAfIYwXwWBg8gzcfAwcDEwMagxKDFYM0QyxDPUPv/P1BcgUGNQYfBEchP/P///+P/D/7f/3/r/83/N6DmIAFGNga4ICMTkGBCVwB0AgsrkMHGzsHJxcDNw8vHLyAoJCwiKiYuISkFViMtIysnr6CopKyiqqauoamlraOrp29gaGRsYmpmzmDBYGllbWNrZ+/g6OTs4urm7uHp5e3j6+cfEBgUHBKK7iL6AwBJLiG7AAAAABEBRAAAAAH//wACeJxjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVA4mN4/KjcqNyo2WGaNyo3LDRW4A8xQAx51w5gB4nGNgZGBgAOItPD1s8fw2Xxm4mRhA4LYX3zYE/f8AIwPjASCXgwEsDQAA0AleAAB4nGNgZGBgPPD/AIMekAEEjGCEAlgAUGYCtwAAeJxjZGAQZAACRigeCgAADn0AFQAAAAAqACoAKgA4AEYAVABiAHAAfgCMAJoAqAC2AMQA2ADmAPQBAgEQAR4BLAE6AUgBVgFkAXIBgAGOAZwBqgG4AcYB1AHiAfAB/gIMAhoCKAI2AkQCUgJgAm4CfAKKApgCpgK0AsIC0ALeAvIDAAMOAxwDKgM4A0YDVANiA3ADfgOMA5oDqAO2A8QD0gPgA+4D/AQKBBgEJgQ0BEIEUAReBGwEegSIBJwEqgS4BMYAAHicY2BkYGAIY+BgYGIAARDJyAASc2DQAwkAAA0nANQAeJx9j7FuwjAYhM8QKF0qXqCShw4gQeqEgYoVCVViQQwZukVgJVYSgkwYUNVH6NpH6Njn69jDmKUDjn758+X8/2cAD/iBwGUNsPYs0MOn5xbu8O25jSf8eg7QE8+eO+iLN89d6h90iuCep5W7dWaBPt49tzj3y3Mbr8xw4YB9Hj13IMWL5y71AnPU2OMEC4MMORpIZt5gyD2GcjUiJyiRYktXxbJUlnSnpLNesYdxfzGv9ydrsryRg81QxipWI5mU6dZUxsplntoyrfZmS+cBBTSvaw6tsaNQ6FI3NWlNMcPR9bY86uxYpoSFMzZut3RolzJkRokZ63/LizpBhDGmrOuLsKh3zaK2mZZxqORMXkcTJ9F4Oj7nvpkwoWhpMH6O4he5JMqlQaLtwbChUlGolJK3uv0ByyBbWAAAAHicXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAA==") format("woff");
20189 font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
20190 font-style: normal, italic;
20191 font-display: block; }
20192
20193.skeleton-text {
20194 font-family: 'skeleton' !important;
20195 -webkit-user-select: none;
20196 -moz-user-select: none;
20197 user-select: none; }
20198 .skeleton-text,
20199 .skeleton-text * {
20200 color: var(--skeleton-color) !important;
20201 letter-spacing: -0.03em !important; }
20202
20203.skeleton-image {
20204 display: inline-block; }
20205 .skeleton-image svg {
20206 width: 100%;
20207 height: auto; }
20208 .skeleton-image polygon {
20209 fill: var(--skeleton-color); }
20210 .skeleton-image path {
20211 fill: var(--skeleton-icon-color); }
20212
20213.skeleton-avatar {
20214 display: inline-block; }
20215 .skeleton-avatar svg {
20216 width: 100%;
20217 height: auto; }
20218 .skeleton-avatar rect {
20219 fill: var(--skeleton-color); }
20220 .skeleton-avatar path {
20221 fill: var(--skeleton-icon-color); }
20222
20223.skeleton-effect-blink, .skeleton-effect-wave {
20224 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
20225 mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
20226 -webkit-mask-size: 200% 100%;
20227 mask-size: 200% 100%;
20228 -webkit-mask-repeat: repeat;
20229 mask-repeat: repeat;
20230 -webkit-mask-position: 50% top;
20231 mask-position: 50% top;
20232 animation: skeleton-effect-wave 1s infinite; }
20233
20234.skeleton-effect-fade {
20235 animation: skeleton-effect-fade 1s infinite; }
20236
20237.skeleton-effect-pulse {
20238 animation: skeleton-effect-pulse 1s infinite; }
20239
20240@keyframes skeleton-effect-fade {
20241 0% {
20242 opacity: 1; }
20243 50% {
20244 opacity: 0.2; }
20245 100% {
20246 opacity: 1; } }
20247
20248@keyframes skeleton-effect-wave {
20249 0% {
20250 -webkit-mask-position: 50% top;
20251 mask-position: 50% top; }
20252 100% {
20253 -webkit-mask-position: -150% top;
20254 mask-position: -150% top; } }
20255
20256@keyframes skeleton-effect-pulse {
20257 0% {
20258 transform: scale(1); }
20259 40% {
20260 transform: scale(1); }
20261 50% {
20262 transform: scale(0.975); }
20263 100% {
20264 transform: scale(1); } }
20265
20266:root {
20267 --skeleton-color: #ccc;
20268 --skeleton-icon-color: rgba(0, 0, 0, 0.25);
20269}
20270.theme-dark {
20271 --skeleton-color: #515151;
20272 --skeleton-icon-color: rgba(255, 255, 255, 0.25);
20273}
20274/* === Menu === */
20275:root {
20276 --f7-menu-text-color: #fff;
20277 --f7-menu-font-size: 16px;
20278 --f7-menu-font-weight: 500;
20279 --f7-menu-line-height: 1.2;
20280 --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
20281 --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
20282 --f7-menu-item-padding-horizontal: 12px;
20283 --f7-menu-item-spacing: 6px;
20284 --f7-menu-item-height: 40px;
20285 --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
20286 --f7-menu-item-border-radius: 8px;
20287 /*
20288 --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
20289 */
20290 --f7-menu-dropdown-item-height: 32px;
20291 --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
20292 --f7-menu-dropdown-padding-vertical: 6px;
20293 /*
20294 --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
20295 */
20296}
20297.aurora {
20298 /*
20299 --f7-menu-dropdown-hover-bg-color: rgba(255, 255, 255, 0.15);
20300 */
20301}
20302.menu {
20303 z-index: 1000;
20304 position: relative;
20305 transform: translate3d(0, 0, 0);
20306 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
20307}
20308.menu-inner {
20309 display: flex;
20310 justify-content: flex-start;
20311 align-items: flex-start;
20312 padding-left: var(--f7-menu-item-spacing);
20313 padding-right: var(--f7-menu-item-spacing);
20314}
20315.menu-inner:after {
20316 content: '';
20317 width: var(--f7-menu-item-spacing);
20318 height: 100%;
20319 flex-shrink: 0;
20320}
20321.menu-item {
20322 height: var(--f7-menu-item-height);
20323 min-width: var(--f7-menu-item-height);
20324 flex-shrink: 0;
20325 background: var(--f7-menu-bg-color);
20326 color: var(--f7-menu-text-color);
20327 border-radius: var(--f7-menu-item-border-radius);
20328 position: relative;
20329 box-sizing: border-box;
20330 font-size: var(--f7-menu-font-size);
20331 font-weight: var(--f7-menu-font-weight);
20332 cursor: pointer;
20333 margin-left: var(--f7-menu-item-spacing);
20334}
20335.menu-item:first-child {
20336 margin-left: 0;
20337}
20338.menu-item.active-state:not(.menu-item-dropdown-opened) {
20339 background-color: rgba(0, 0, 0, 0.7);
20340}
20341.menu-item.icon-only {
20342 padding-left: 0;
20343 padding-right: 0;
20344}
20345.menu-item-content {
20346 display: flex;
20347 justify-content: center;
20348 align-items: center;
20349 padding: 0 var(--f7-menu-item-padding-horizontal);
20350 height: 100%;
20351 box-sizing: border-box;
20352 width: 100%;
20353 overflow: hidden;
20354 border-radius: var(--f7-menu-item-border-radius);
20355 position: relative;
20356}
20357.menu-item-content.icon-only,
20358.icon-only .menu-item-content {
20359 padding-left: 0;
20360 padding-right: 0;
20361}
20362.menu-item-dropdown .menu-item-content:after {
20363 content: '';
20364 position: absolute;
20365 width: 20px;
20366 height: 2px;
20367 left: 50%;
20368 transform: translateX(-50%);
20369 bottom: 4px;
20370 background: var(--f7-menu-item-dropdown-icon-color);
20371 border-radius: 4px;
20372}
20373.menu-dropdown {
20374 opacity: 0;
20375 visibility: hidden;
20376 pointer-events: none;
20377 cursor: auto;
20378 height: 10px;
20379 background: var(--f7-menu-bg-color);
20380 position: relative;
20381}
20382.menu-dropdown-content {
20383 position: absolute;
20384 top: 100%;
20385 border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
20386 padding-top: var(--f7-menu-dropdown-padding-vertical);
20387 padding-bottom: var(--f7-menu-dropdown-padding-vertical);
20388 box-sizing: border-box;
20389 background: var(--f7-menu-bg-color);
20390 overflow: auto;
20391 -webkit-overflow-scrolling: touch;
20392 min-width: calc(100% + 24px);
20393}
20394.menu-dropdown-link,
20395.menu-dropdown-item {
20396 display: flex;
20397 position: relative;
20398 justify-content: space-between;
20399 align-items: center;
20400 padding-left: var(--f7-menu-item-padding-horizontal);
20401 padding-right: var(--f7-menu-item-padding-horizontal);
20402 min-height: var(--f7-menu-dropdown-item-height);
20403 line-height: var(--f7-menu-line-height);
20404 font-size: var(--f7-menu-font-size);
20405 color: var(--f7-menu-text-color);
20406 font-weight: var(--f7-menu-font-weight);
20407 white-space: nowrap;
20408 min-width: 100px;
20409 z-index: 1;
20410}
20411.menu-dropdown-link i,
20412.menu-dropdown-item i,
20413.menu-dropdown-link i.icon,
20414.menu-dropdown-item i.icon,
20415.menu-dropdown-link i.f7-icons,
20416.menu-dropdown-item i.f7-icons,
20417.menu-dropdown-link i.material-icons,
20418.menu-dropdown-item i.material-icons {
20419 font-size: 20px;
20420}
20421.menu-dropdown-link:before {
20422 content: '';
20423 position: absolute;
20424 left: 4px;
20425 top: 2px;
20426 right: 4px;
20427 bottom: 2px;
20428 border-radius: 4px;
20429 background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
20430 z-index: -1;
20431 opacity: 0;
20432 pointer-events: none;
20433}
20434.menu-dropdown-link.active-state {
20435 color: var(--f7-menu-text-color);
20436}
20437.menu-dropdown-link.active-state:before {
20438 opacity: 1;
20439}
20440.menu-dropdown-divider {
20441 height: 1px;
20442 margin-top: 2px;
20443 margin-bottom: 2px;
20444 background: var(--f7-menu-dropdown-divider-color);
20445}
20446.menu-item-dropdown-opened {
20447 border-bottom-left-radius: 0px;
20448 border-bottom-right-radius: 0px;
20449}
20450.menu-item-dropdown-opened .menu-item-content:after {
20451 opacity: 0;
20452}
20453.menu-item-dropdown-opened .menu-dropdown {
20454 opacity: 1;
20455 visibility: visible;
20456 pointer-events: auto;
20457}
20458.menu-item-dropdown-left .menu-dropdown:after,
20459.menu-item-dropdown-center .menu-dropdown:after,
20460.menu-dropdown-left:after,
20461.menu-dropdown-center:after {
20462 content: '';
20463 position: absolute;
20464 left: 100%;
20465 bottom: 0;
20466 width: var(--f7-menu-item-border-radius);
20467 height: var(--f7-menu-item-border-radius);
20468 background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
20469}
20470.menu-item-dropdown-right .menu-dropdown:before,
20471.menu-item-dropdown-center .menu-dropdown:before,
20472.menu-dropdown-right:before,
20473.menu-dropdown-center:before {
20474 content: '';
20475 position: absolute;
20476 right: 100%;
20477 bottom: 0;
20478 width: var(--f7-menu-item-border-radius);
20479 height: var(--f7-menu-item-border-radius);
20480 background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
20481}
20482.menu-item-dropdown-left .menu-dropdown-content,
20483.menu-dropdown-left .menu-dropdown-content {
20484 left: 0;
20485 border-top-left-radius: 0px;
20486}
20487.menu-item-dropdown-right .menu-dropdown-content,
20488.menu-dropdown-right .menu-dropdown-content {
20489 right: 0;
20490 border-top-right-radius: 0px;
20491}
20492.menu-item-dropdown-center .menu-dropdown-content,
20493.menu-dropdown-center .menu-dropdown-content {
20494 left: 50%;
20495 min-width: calc(100% + 24px + 24px);
20496 transform: translateX(-50%);
20497}
20498.aurora.device-desktop .menu-dropdown-link:not(.no-hover):not(.active-state):hover:before {
20499 background: var(--f7-menu-dropdown-hover-bg-color, rgba(255, 255, 255, 0.15));
20500 opacity: 1;
20501}
20502/* === Color Picker === */
20503:root {
20504 --f7-color-picker-popover-width: 350px;
20505 --f7-color-picker-slider-size: 6px;
20506 --f7-color-picker-slider-knob-size: 16px;
20507 --f7-color-picker-bar-size: 50px;
20508 --f7-color-picker-bar-min-height: 260px;
20509 --f7-color-picker-value-width: 64px;
20510 --f7-color-picker-value-height: 32px;
20511 --f7-color-picker-value-font-size: 16px;
20512 --f7-color-picker-value-border-radius: 4px;
20513 --f7-color-picker-hex-value-width: 84px;
20514 --f7-color-picker-label-font-size: 14px;
20515 --f7-color-picker-label-width: 10px;
20516 --f7-color-picker-label-height: 14px;
20517 --f7-color-picker-sb-spectrum-height: 260px;
20518 --f7-color-picker-sb-spectrum-handle-size: 16px;
20519 --f7-color-picker-wheel-width: 330px;
20520 --f7-color-picker-palette-value-width: 36px;
20521 --f7-color-picker-palette-value-height: 36px;
20522 --f7-color-picker-initial-current-color-height: 40px;
20523 --f7-color-picker-initial-current-color-border-radius: 4px;
20524 --f7-color-picker-sheet-bg-color: #fff;
20525 --f7-color-picker-popup-bg-color: #fff;
20526 --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
20527 --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
20528 --f7-color-picker-group-value-bg-color: #fff;
20529}
20530:root .theme-dark,
20531:root.theme-dark {
20532 --f7-color-picker-sheet-bg-color: #121212;
20533 --f7-color-picker-popup-bg-color: #121212;
20534 --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
20535 --f7-color-picker-group-bg-color: #000;
20536 --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
20537}
20538.color-picker {
20539 overflow: hidden;
20540 width: 100%;
20541 display: flex;
20542 flex-direction: column;
20543}
20544.color-picker.color-picker-inline,
20545.color-picker-popover .color-picker,
20546.color-picker-popup .color-picker {
20547 position: relative;
20548}
20549.color-picker-sheet-modal {
20550 background: var(--f7-color-picker-sheet-bg-color);
20551}
20552.color-picker-sheet-modal:before {
20553 z-index: 600;
20554}
20555.color-picker-sheet-modal .sheet-modal-inner {
20556 margin-bottom: var(--f7-safe-area-bottom);
20557}
20558.color-picker-popup .page {
20559 background: var(--f7-color-picker-popup-bg-color);
20560}
20561.color-picker-popup .page-content {
20562 padding-bottom: var(--f7-safe-area-bottom);
20563}
20564.color-picker-popover .color-picker,
20565.color-picker-popup .color-picker,
20566.color-picker-page .color-picker {
20567 height: 100%;
20568}
20569.color-picker-popover .color-picker .toolbar,
20570.color-picker-popup .color-picker .toolbar,
20571.color-picker-page .color-picker .toolbar {
20572 position: absolute;
20573}
20574.color-picker-popover {
20575 width: var(--f7-color-picker-popover-width);
20576 max-width: 90vw;
20577 max-height: 80vh;
20578}
20579.color-picker-popover .color-picker {
20580 max-height: 80vh;
20581}
20582.color-picker-popover .toolbar-top {
20583 border-top-left-radius: var(--f7-popover-border-radius);
20584 border-top-right-radius: var(--f7-popover-border-radius);
20585}
20586.color-picker-popover .color-picker-module-palette {
20587 overflow: hidden;
20588 flex-shrink: 0;
20589}
20590.color-picker-popover .color-picker-module-palette:first-child {
20591 border-top-left-radius: var(--f7-popover-border-radius);
20592 border-top-right-radius: var(--f7-popover-border-radius);
20593}
20594.color-picker-popover .color-picker-module-palette:last-child {
20595 border-bottom-left-radius: var(--f7-popover-border-radius);
20596 border-bottom-right-radius: var(--f7-popover-border-radius);
20597}
20598.color-picker-popover .color-picker-module-palette:first-child:last-child {
20599 border-radius: var(--f7-popover-border-radius);
20600}
20601.color-picker-popover .toolbar ~ .page-content .color-picker-module-palette:first-child {
20602 border-top-left-radius: 0;
20603 border-top-right-radius: 0;
20604}
20605.color-picker-popup .page-content,
20606.color-picker-popover .page-content,
20607.color-picker-sheet-modal .page-content,
20608.color-picker-page .page-content {
20609 display: flex;
20610 justify-content: flex-start;
20611 align-items: stretch;
20612 flex-direction: column;
20613 overflow-x: hidden;
20614}
20615.color-picker-module {
20616 margin-top: 5px;
20617}
20618.color-picker-module:last-child {
20619 margin-bottom: 5px;
20620}
20621.color-picker-module-sb-spectrum,
20622.color-picker-module-hs-spectrum {
20623 margin-left: 10px;
20624 margin-right: 10px;
20625}
20626.color-picker-module-sb-spectrum:first-child,
20627.color-picker-module-hs-spectrum:first-child {
20628 margin-top: 10px;
20629}
20630.color-picker-module-sb-spectrum .color-picker-sb-spectrum,
20631.color-picker-module-hs-spectrum .color-picker-sb-spectrum,
20632.color-picker-module-sb-spectrum .color-picker-hs-spectrum,
20633.color-picker-module-hs-spectrum .color-picker-hs-spectrum {
20634 border-radius: 4px;
20635 height: var(--f7-color-picker-sb-spectrum-height);
20636}
20637.color-picker-sb-spectrum {
20638 background-color: #000;
20639 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 100%);
20640 position: relative;
20641}
20642.color-picker-hs-spectrum {
20643 position: relative;
20644 background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
20645}
20646.color-picker-hs-spectrum:after {
20647 content: '';
20648 position: absolute;
20649 left: 0;
20650 top: 0;
20651 width: 100%;
20652 height: 100%;
20653 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
20654}
20655.color-picker-sb-spectrum-handle,
20656.color-picker-hs-spectrum-handle {
20657 width: 4px;
20658 height: 4px;
20659 position: absolute;
20660 left: -2px;
20661 top: -2px;
20662 z-index: 1;
20663}
20664.color-picker-sb-spectrum-handle:after,
20665.color-picker-hs-spectrum-handle:after {
20666 background-color: inherit;
20667 content: '';
20668 position: absolute;
20669 width: var(--f7-color-picker-sb-spectrum-handle-size);
20670 height: var(--f7-color-picker-sb-spectrum-handle-size);
20671 border: 1px solid #fff;
20672 border-radius: 50%;
20673 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
20674 box-sizing: border-box;
20675 left: 50%;
20676 top: 50%;
20677 transform: translate(-50%, -50%);
20678 transition: 150ms;
20679 transition-property: transform;
20680 transform-origin: center;
20681}
20682.color-picker-sb-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
20683.color-picker-hs-spectrum-handle.color-picker-sb-spectrum-handle-pressed:after,
20684.color-picker-sb-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after,
20685.color-picker-hs-spectrum-handle.color-picker-hs-spectrum-handle-pressed:after {
20686 transform: scale(1.5) translate(-33.333%, -33.333%);
20687}
20688.color-picker-module-wheel {
20689 margin-left: 10px;
20690 margin-right: 10px;
20691}
20692.color-picker-wheel {
20693 position: relative;
20694 width: var(--f7-color-picker-wheel-width);
20695 max-width: 100%;
20696 height: auto;
20697 font-size: 0;
20698 margin-left: auto;
20699 margin-right: auto;
20700}
20701.color-picker-wheel svg {
20702 width: 100%;
20703 height: auto;
20704}
20705.color-picker-wheel .color-picker-wheel-handle {
20706 width: calc(100% / 6);
20707 height: calc(100% / 6);
20708 position: absolute;
20709 box-sizing: border-box;
20710 border: 2px solid #fff;
20711 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
20712 background: red;
20713 border-radius: 50%;
20714 left: 0;
20715 top: 0;
20716}
20717.color-picker-wheel .color-picker-sb-spectrum {
20718 width: 45%;
20719 height: 45%;
20720 left: 50%;
20721 top: 50%;
20722 transform: translate3d(-50%, -50%, 0);
20723 position: absolute;
20724}
20725.color-picker-slider-wrap {
20726 display: flex;
20727 align-items: center;
20728 margin-bottom: 2px;
20729}
20730.color-picker-slider-wrap + .color-picker-slider-wrap {
20731 margin-top: 5px;
20732}
20733.color-picker-hex-wrap {
20734 justify-content: space-between;
20735 display: flex;
20736 align-items: center;
20737}
20738.color-picker-slider-label,
20739.color-picker-hex-label {
20740 font-size: var(--f7-color-picker-label-font-size);
20741 width: var(--f7-color-picker-label-size);
20742 flex-shrink: 0;
20743 margin-right: 12px;
20744}
20745.color-picker-hex-label {
20746 width: auto;
20747}
20748.color-picker-bar-value,
20749.color-picker-slider-value,
20750.color-picker-hex-value {
20751 width: var(--f7-color-picker-value-width);
20752 height: var(--f7-color-picker-value-height);
20753 background: var(--f7-color-picker-value-bg-color);
20754 border-radius: var(--f7-color-picker-value-border-radius);
20755 text-align: center;
20756 font-size: var(--f7-color-picker-value-font-size);
20757 display: flex;
20758 justify-content: center;
20759 align-items: center;
20760 flex-shrink: 0;
20761 margin-left: 10px;
20762}
20763.color-picker-bar-value input,
20764.color-picker-slider-value input,
20765.color-picker-hex-value input {
20766 width: 100%;
20767 height: 100%;
20768 -webkit-appearance: none;
20769 -moz-appearance: none;
20770 appearance: none;
20771 border: none;
20772 outline: 0;
20773 background: transparent;
20774 color: inherit;
20775 font-family: inherit;
20776 font-size: inherit;
20777 text-align: center;
20778 display: block;
20779 border-radius: 4px;
20780}
20781.color-picker-bar-value input::-webkit-inner-spin-button,
20782.color-picker-slider-value input::-webkit-inner-spin-button,
20783.color-picker-hex-value input::-webkit-inner-spin-button,
20784.color-picker-bar-value input::-webkit-outer-spin-button,
20785.color-picker-slider-value input::-webkit-outer-spin-button,
20786.color-picker-hex-value input::-webkit-outer-spin-button {
20787 -webkit-appearance: none;
20788 -moz-appearance: none;
20789 appearance: none;
20790 margin: 0;
20791 display: none;
20792}
20793.color-picker-hex-value {
20794 width: var(--f7-color-picker-hex-value-width);
20795}
20796.color-picker-hex-value:first-child {
20797 margin-left: auto;
20798}
20799.color-picker-slider {
20800 --f7-range-bar-active-bg-color: transparent;
20801 --f7-range-bar-size: var(--f7-color-picker-slider-size);
20802 --f7-range-bar-border-radius: var(--f7-color-picker-slider-size);
20803 --f7-range-knob-size: var(--f7-color-picker-slider-knob-size);
20804 --f7-range-knob-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
20805}
20806.color-picker-slider .range-knob {
20807 transition-duration: 200ms;
20808 transition-property: transform;
20809}
20810.color-picker-slider .range-knob:after {
20811 width: 30px;
20812 height: 30px;
20813 margin-left: -16px;
20814 margin-top: -16px;
20815}
20816.color-picker-slider .range-knob-active-state .range-knob {
20817 transform: scale(1.5);
20818}
20819.md .color-picker-slider.range-slider-min:not(.range-slider-dual) .range-knob {
20820 background: var(--f7-range-knob-color) !important;
20821 border: none;
20822}
20823.color-picker-module-rgb-bars {
20824 display: flex;
20825 justify-content: space-around;
20826 justify-content: space-evenly;
20827 align-items: stretch;
20828 height: 100%;
20829 min-height: var(--f7-color-picker-bar-min-height);
20830 padding-bottom: 10px;
20831 padding-top: 10px;
20832 box-sizing: border-box;
20833}
20834.color-picker-bar-wrap {
20835 display: flex;
20836 align-items: center;
20837 flex-direction: column-reverse;
20838}
20839.color-picker-bar {
20840 --f7-range-bar-active-bg-color: transparent;
20841 --f7-range-bar-size: var(--f7-color-picker-bar-size);
20842 --f7-range-bar-border-radius: 2px;
20843 --f7-range-knob-size: 6px;
20844 --f7-range-knob-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
20845 --f7-range-knob-color: #fff;
20846}
20847.color-picker-bar .range-knob {
20848 transition-duration: 0ms;
20849 transition-property: transform;
20850 border-radius: 3px;
20851}
20852.color-picker-bar .range-knob-wrap {
20853 height: 6px;
20854 width: calc(var(--f7-color-picker-bar-size) - 4px);
20855 margin-left: calc(-0.5 * (var(--f7-color-picker-bar-size) - 4px));
20856}
20857.color-picker-bar .range-knob-active-state .range-knob {
20858 transform: scale(1);
20859}
20860.md .color-picker-bar.range-slider-min:not(.range-slider-dual) .range-knob {
20861 background: var(--f7-range-knob-color) !important;
20862 border: none;
20863}
20864.color-picker-bar-label {
20865 font-size: var(--f7-color-picker-label-size);
20866 margin-top: 12px;
20867 line-height: 1;
20868 height: var(--f7-color-picker-label-height);
20869 flex-shrink: 0;
20870}
20871.color-picker-bar-value {
20872 margin-left: 0;
20873 margin-bottom: 10px;
20874}
20875.color-picker-slider-alpha {
20876 --f7-range-knob-color: #fff;
20877}
20878.color-picker-slider-alpha .range-bar {
20879 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000), linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
20880 background-size: 100% 100%, 6px 3px, 6px 3px;
20881 background-position: 0 0, 0px 3px, 0 0;
20882 background-repeat: repeat-y, repeat-x, repeat-x;
20883}
20884.color-picker-slider-hue .range-bar {
20885 background-image: linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));
20886}
20887.color-picker-slider-brightness .range-bar {
20888 background-image: linear-gradient(to right, #000, #fff);
20889}
20890.color-picker-module-palette {
20891 margin-top: 16px;
20892}
20893.color-picker-module-palette:first-child {
20894 margin-top: 0;
20895}
20896.color-picker-module-palette:last-child {
20897 margin-bottom: 0;
20898}
20899.color-picker-module-palette:first-child:last-child {
20900 margin: 0;
20901}
20902.color-picker-palette {
20903 display: flex;
20904 flex-wrap: wrap;
20905}
20906.color-picker-palette-row {
20907 width: 100%;
20908 display: flex;
20909 flex-wrap: nowrap;
20910}
20911.color-picker-palette-row .color-picker-palette-value {
20912 width: 100%;
20913}
20914.color-picker-palette-value {
20915 width: var(--f7-color-picker-palette-value-width);
20916 height: var(--f7-color-picker-palette-value-height);
20917 cursor: pointer;
20918}
20919.color-picker-module-initial-current-colors,
20920.color-picker-module-current-color {
20921 margin-left: 10px;
20922 margin-right: 10px;
20923 border-radius: var(--f7-color-picker-initial-current-color-border-radius);
20924 overflow: hidden;
20925 flex-shrink: 0;
20926}
20927.color-picker-initial-color,
20928.color-picker-current-color {
20929 height: var(--f7-color-picker-initial-current-color-height);
20930}
20931.color-picker-initial-current-colors {
20932 display: flex;
20933}
20934.color-picker-initial-current-colors .color-picker-initial-color,
20935.color-picker-initial-current-colors .color-picker-current-color {
20936 width: 50%;
20937}
20938.color-picker-module-rgb-sliders,
20939.color-picker-module-hsb-sliders,
20940.color-picker-module-alpha-slider,
20941.color-picker-module-hue-slider,
20942.color-picker-module-brightness-slider,
20943.color-picker-module-hex {
20944 margin-left: 10px;
20945 margin-right: 10px;
20946}
20947.color-picker-grouped-modules .color-picker-module-rgb-sliders,
20948.color-picker-grouped-modules .color-picker-module-hsb-sliders,
20949.color-picker-grouped-modules .color-picker-module-alpha-slider,
20950.color-picker-grouped-modules .color-picker-module-hue-slider,
20951.color-picker-grouped-modules .color-picker-module-brightness-slider,
20952.color-picker-grouped-modules .color-picker-module-hex {
20953 background: var(--f7-color-picker-group-bg-color);
20954 padding: 5px;
20955 border-radius: 4px;
20956 margin-top: 16px;
20957 margin-left: 5px;
20958 margin-right: 5px;
20959}
20960.color-picker-grouped-modules .color-picker-module-rgb-sliders:last-child,
20961.color-picker-grouped-modules .color-picker-module-hsb-sliders:last-child,
20962.color-picker-grouped-modules .color-picker-module-alpha-slider:last-child,
20963.color-picker-grouped-modules .color-picker-module-hue-slider:last-child,
20964.color-picker-grouped-modules .color-picker-module-brightness-slider:last-child,
20965.color-picker-grouped-modules .color-picker-module-hex:last-child {
20966 margin-bottom: 16px;
20967}
20968.color-picker-grouped-modules .color-picker-slider-value,
20969.color-picker-grouped-modules .color-picker-hex-value {
20970 background: var(--f7-color-picker-group-value-bg-color);
20971}
20972.color-picker-grouped-modules .color-picker-slider-label,
20973.color-picker-grouped-modules .color-picker-hex-label {
20974 margin-left: 5px;
20975}
20976.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:first-child,
20977.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:first-child,
20978.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:first-child,
20979.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:first-child,
20980.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:first-child {
20981 margin-left: 5px;
20982}
20983.color-picker-grouped-modules .color-picker-module-rgb-sliders .range-slider:last-child,
20984.color-picker-grouped-modules .color-picker-module-hsb-sliders .range-slider:last-child,
20985.color-picker-grouped-modules .color-picker-module-alpha-slider .range-slider:last-child,
20986.color-picker-grouped-modules .color-picker-module-hue-slider .range-slider:last-child,
20987.color-picker-grouped-modules .color-picker-module-brightness-slider .range-slider:last-child {
20988 margin-right: 5px;
20989}
20990/* === Treeview === */
20991:root {
20992 --f7-treeview-item-padding-left: 16px;
20993 --f7-treeview-item-padding-right: 16px;
20994 --f7-treeview-toggle-size: 24px;
20995 --f7-treeview-children-offset: 29px;
20996 --f7-treeview-label-font-weight: 400;
20997 --f7-treeview-label-text-color: inherit;
20998 /*
20999 --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
21000 */
21001 --f7-treeview-toggle-color: rgba(0, 0, 0, 0.5);
21002 --f7-treeview-toggle-hover-bg-color: rgba(0, 0, 0, 0.1);
21003 --f7-treeview-toggle-pressed-bg-color: rgba(0, 0, 0, 0.15);
21004 --f7-treeview-icon-color: rgba(0, 0, 0, 0.5);
21005 --f7-treeview-selectable-hover-bg-color: rgba(0, 0, 0, 0.1);
21006 --f7-treeview-link-hover-bg-color: rgba(0, 0, 0, 0.1);
21007 --f7-treeview-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
21008}
21009:root .theme-dark,
21010:root.theme-dark {
21011 --f7-treeview-toggle-color: rgba(255, 255, 255, 0.5);
21012 --f7-treeview-toggle-hover-bg-color: rgba(255, 255, 255, 0.03);
21013 --f7-treeview-toggle-pressed-bg-color: rgba(255, 255, 255, 0.1);
21014 --f7-treeview-icon-color: rgba(255, 255, 255, 0.75);
21015 --f7-treeview-selectable-hover-bg-color: rgba(255, 255, 255, 0.03);
21016 --f7-treeview-link-hover-bg-color: rgba(255, 255, 255, 0.03);
21017 --f7-treeview-link-pressed-bg-color: rgba(255, 255, 255, 0.11);
21018}
21019.ios {
21020 --f7-treeview-item-height: 34px;
21021 --f7-treeview-label-font-size: 17px;
21022 --f7-treeview-icon-size: 24px;
21023}
21024.md {
21025 --f7-treeview-item-height: 34px;
21026 --f7-treeview-label-font-size: 16px;
21027 --f7-treeview-icon-size: 24px;
21028}
21029.aurora {
21030 --f7-treeview-item-height: 28px;
21031 --f7-treeview-label-font-size: 14px;
21032 --f7-treeview-icon-size: 20px;
21033}
21034.treeview-item-root {
21035 padding-left: var(--f7-treeview-item-padding-left);
21036 padding-right: var(--f7-treeview-item-padding-right);
21037 min-height: var(--f7-treeview-item-height);
21038 display: flex;
21039 align-items: center;
21040 justify-content: flex-start;
21041}
21042.treeview-item-content {
21043 display: flex;
21044 justify-content: flex-start;
21045 align-items: center;
21046}
21047.treeview-item-content > i,
21048.treeview-item-content > .f7-icons,
21049.treeview-item-content > .material-icons {
21050 font-size: var(--f7-treeview-icon-size);
21051 color: var(--f7-treeview-icon-color);
21052}
21053.treeview-item-content:first-child {
21054 margin-left: calc(var(--f7-treeview-toggle-size) + 5px);
21055}
21056.treeview-item-content > * + * {
21057 margin-left: 5px;
21058}
21059.treeview-item-label {
21060 font-size: var(--f7-treeview-label-font-size);
21061 font-weight: var(--f7-treeview-label-font-weight);
21062 color: var(--f7-treeview-label-text-color);
21063}
21064.treeview-toggle {
21065 width: var(--f7-treeview-toggle-size);
21066 height: var(--f7-treeview-toggle-size);
21067 cursor: pointer;
21068 border-radius: 4px;
21069 background-color: rgba(0, 0, 0, 0);
21070 transition-duration: 200ms;
21071 position: relative;
21072 margin-right: 5px;
21073}
21074.treeview-toggle.active-state {
21075 background-color: var(--f7-treeview-toggle-pressed-bg-color);
21076}
21077.treeview-toggle:after {
21078 transition-duration: 200ms;
21079 content: '';
21080 position: absolute;
21081 left: 50%;
21082 top: 50%;
21083 width: 0;
21084 height: 0;
21085 border-top: 5px solid transparent;
21086 border-bottom: 5px solid transparent;
21087 transform: translate(-50%, -50%);
21088 border-left: 6px solid var(--f7-treeview-toggle-color);
21089}
21090.treeview-toggle-hidden {
21091 opacity: 0;
21092 pointer-events: none;
21093 visibility: hidden;
21094}
21095.treeview-preloader {
21096 --f7-preloader-size: var(--f7-treeview-toggle-size);
21097 margin-right: calc(-1 * var(--f7-treeview-toggle-size));
21098}
21099.treeview-item-children {
21100 display: none;
21101}
21102.treeview-item-opened > .treeview-item-children {
21103 display: block;
21104}
21105.treeview-item-opened > .treeview-item-root .treeview-toggle:after {
21106 transform: translate(-50%, -50%) rotate(90deg);
21107}
21108a.treeview-item-root {
21109 color: var(--f7-treeview-label-text-color);
21110}
21111.treeview-item-selectable > .treeview-item-root,
21112.treeview-item-selectable.treeview-item-root {
21113 cursor: pointer;
21114 transition-duration: 150ms;
21115}
21116a.treeview-item-root {
21117 transition-duration: 150ms;
21118}
21119a.treeview-item-root.active-state {
21120 background: var(--f7-treeview-link-pressed-bg-color);
21121}
21122.treeview-item-toggle > .treeview-item-root,
21123.treeview-item-toggle.treeview-item-root {
21124 cursor: pointer;
21125}
21126.treeview-item-selected > .treeview-item-root,
21127.treeview-item-selected.treeview-item-root {
21128 background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
21129}
21130.treeview-item .treeview-item .treeview-item-root {
21131 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1);
21132}
21133.treeview-item .treeview-item .treeview-item .treeview-item-root {
21134 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2);
21135}
21136.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21137 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3);
21138}
21139.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21140 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4);
21141}
21142.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21143 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5);
21144}
21145.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21146 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6);
21147}
21148.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21149 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7);
21150}
21151.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21152 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8);
21153}
21154.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21155 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9);
21156}
21157.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root {
21158 padding-left: calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10);
21159}
21160.aurora .treeview-toggle:hover {
21161 background-color: var(--f7-treeview-toggle-hover-bg-color);
21162}
21163.aurora .treeview-toggle.active-state {
21164 background-color: var(--f7-treeview-toggle-pressed-bg-color);
21165}
21166.aurora .treeview-item-selectable > .treeview-item-root:hover,
21167.aurora .treeview-item-selectable.treeview-item-root:hover {
21168 background: var(--f7-treeview-selectable-hover-bg-color);
21169}
21170.aurora a.treeview-item-root:hover {
21171 background: var(--f7-treeview-link-hover-bg-color);
21172}
21173.aurora a.treeview-item-root.active-state {
21174 background: var(--f7-treeview-link-pressed-bg-color);
21175}
21176.aurora .treeview-item-selected > .treeview-item-root:hover,
21177.aurora .treeview-item-selected.treeview-item-root:hover {
21178 background: var(--f7-treeview-selectable-selected-bg-color, rgba(var(--f7-theme-color-rgb), 0.2));
21179}
21180/* === Stepper === */
21181:root {
21182 --f7-text-editor-font-size: inherit;
21183 --f7-text-editor-font-weight: inherit;
21184 --f7-text-editor-border-width: 1px;
21185 --f7-text-editor-height: 250px;
21186 --f7-text-editor-margin: 16px;
21187 --f7-text-editor-padding: 8px;
21188 --f7-text-editor-button-bg-color: transparent;
21189 --f7-text-editor-button-size: 28px;
21190 --f7-text-editor-button-icon-size: 20px;
21191 --f7-text-editor-button-margin: 2px;
21192 --f7-text-editor-button-border-radius: 2px;
21193 --f7-text-editor-text-color: #000;
21194 --f7-text-editor-bg-color: #fff;
21195 --f7-text-editor-border-color: rgba(0, 0, 0, 0.1);
21196 --f7-text-editor-toolbar-bg-color: #fff;
21197 --f7-text-editor-button-text-color: #333;
21198 --f7-text-editor-button-divider-color: rgba(0, 0, 0, 0.15);
21199 --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
21200}
21201:root .theme-dark,
21202:root.theme-dark {
21203 --f7-text-editor-bg-color: #121212;
21204 --f7-text-editor-border-color: rgba(255, 255, 255, 0.1);
21205 --f7-text-editor-toolbar-bg-color: #202020;
21206 --f7-text-editor-text-color: #fff;
21207 --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
21208 --f7-text-editor-button-text-color: #fff;
21209 --f7-text-editor-button-divider-color: rgba(255, 255, 255, 0.15);
21210}
21211.ios {
21212 --f7-text-editor-toolbar-padding: 6px;
21213 --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
21214}
21215.ios .theme-dark,
21216.ios.theme-dark {
21217 --f7-text-editor-toolbar-bg-color: #121212;
21218 --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
21219}
21220.md {
21221 --f7-text-editor-toolbar-padding: 8px;
21222 --f7-text-editor-toolbar-box-shadow: 0px 2px 3px -1px rgba(0, 0, 0, 0.25);
21223}
21224.aurora {
21225 --f7-text-editor-toolbar-padding: 3px;
21226 --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
21227}
21228.aurora .theme-dark,
21229.aurora.theme-dark {
21230 --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
21231}
21232.text-editor {
21233 margin: var(--f7-text-editor-margin);
21234 background-color: var(--f7-text-editor-bg-color);
21235 display: block;
21236 position: relative;
21237 border: var(--f7-text-editor-border-width) solid var(--f7-text-editor-border-color);
21238 display: flex;
21239 flex-direction: column;
21240 align-items: stretch;
21241 height: var(--f7-text-editor-height);
21242 box-sizing: border-box;
21243}
21244.text-editor.text-editor-resizable {
21245 height: auto;
21246}
21247.text-editor-toolbar {
21248 display: flex;
21249 flex-wrap: wrap;
21250 background: var(--f7-text-editor-toolbar-bg-color);
21251 z-index: 100;
21252 position: relative;
21253 position: -webkit-sticky;
21254 position: sticky;
21255 left: 0;
21256 top: 0;
21257 padding: var(--f7-text-editor-toolbar-padding);
21258 flex-shrink: 0;
21259 box-shadow: var(--f7-text-editor-toolbar-box-shadow);
21260 box-sizing: border-box;
21261}
21262.text-editor-toolbar:after {
21263 content: '';
21264 position: absolute;
21265 background-color: var(--f7-text-editor-toolbar-border-color);
21266 display: block;
21267 z-index: 15;
21268 top: auto;
21269 right: auto;
21270 bottom: 0;
21271 left: 0;
21272 height: 1px;
21273 width: 100%;
21274 transform-origin: 50% 100%;
21275 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
21276}
21277button.text-editor-button {
21278 -webkit-appearance: none;
21279 -moz-appearance: none;
21280 appearance: none;
21281 border: none;
21282 padding: 0;
21283 margin: 0;
21284 outline: 0;
21285 font-family: inherit;
21286 background: transparent;
21287 cursor: pointer;
21288 box-shadow: none;
21289 border-radius: var(--f7-text-editor-button-border-radius);
21290 position: relative;
21291 z-index: 1;
21292 display: flex;
21293 width: auto;
21294 overflow: hidden;
21295 width: var(--f7-text-editor-button-size);
21296 height: var(--f7-text-editor-button-size);
21297 align-items: center;
21298 justify-content: center;
21299 margin: var(--f7-text-editor-button-margin);
21300 box-sizing: border-box;
21301 color: var(--f7-text-editor-button-text-color);
21302 background-color: var(--f7-text-editor-button-bg-color);
21303 flex-shrink: 0;
21304}
21305button.text-editor-button i {
21306 font-size: var(--f7-text-editor-button-icon-size);
21307 font-style: normal;
21308}
21309button.text-editor-button i sup,
21310button.text-editor-button i sub {
21311 font-size: 60%;
21312}
21313.text-editor-button-divider {
21314 width: 1px;
21315 background: var(--f7-text-editor-button-divider-color);
21316 margin: 0 2px;
21317 flex-shrink: 0;
21318}
21319.text-editor-content {
21320 -webkit-user-modify: read-write;
21321 -webkit-appearance: none;
21322 -moz-appearance: none;
21323 appearance: none;
21324 border: none;
21325 outline: 0;
21326 height: 100%;
21327 -webkit-user-select: text;
21328 -moz-user-select: text;
21329 user-select: text;
21330 padding: var(--f7-text-editor-padding);
21331 overflow: auto;
21332 flex-shrink: 10;
21333 box-sizing: border-box;
21334 color: var(--f7-text-editor-text-color);
21335 font-size: var(--f7-text-editor-font-size);
21336 font-weight: var(--f7-text-editor-font-weight);
21337}
21338.text-editor-content .text-editor-placeholder {
21339 pointer-events: none;
21340 color: var(--f7-text-editor-placeholder-color);
21341}
21342.text-editor-content img {
21343 max-width: 100%;
21344}
21345.text-editor-content a {
21346 pointer-events: none;
21347}
21348.text-editor-popover {
21349 z-index: 12500;
21350 width: auto;
21351 max-width: 80vw;
21352}
21353.text-editor-popover .popover-inner {
21354 display: flex;
21355 flex-wrap: wrap;
21356 padding: 3px;
21357}
21358.text-editor-keyboard-toolbar {
21359 position: absolute;
21360 z-index: 6000;
21361 --f7-safe-area-bottom: 0px;
21362}
21363.text-editor-keyboard-toolbar .toolbar-inner {
21364 justify-content: flex-start !important;
21365 overflow: auto;
21366 -webkit-overflow-scrolling: touch;
21367}
21368.text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar {
21369 display: none;
21370}
21371.text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider {
21372 height: 100%;
21373}
21374.item-input .text-editor {
21375 border: none;
21376 margin: 0;
21377 background-color: var(--f7-input-bg-color, transparent);
21378}
21379.item-input .text-editor-content {
21380 padding-top: var(--f7-textarea-padding-vertical);
21381 padding-bottom: var(--f7-textarea-padding-vertical);
21382 padding-left: var(--f7-input-padding-left);
21383 padding-right: var(--f7-input-padding-right);
21384 color: var(--f7-input-text-color);
21385 font-size: var(--f7-input-font-size);
21386}
21387.item-input .text-editor-toolbar {
21388 box-shadow: none;
21389}
21390.item-input .text-editor-toolbar:after {
21391 display: none !important;
21392}
21393.item-input-outline .text-editor-content {
21394 border-radius: var(--f7-input-outline-border-radius);
21395 padding-left: var(--f7-input-outline-padding-horizontal);
21396 padding-right: var(--f7-input-outline-padding-horizontal);
21397}
21398.ios button.text-editor-button {
21399 transition: opacity 300ms;
21400}
21401.ios button.text-editor-button.active-state {
21402 opacity: 0.3;
21403 transition-duration: 0ms;
21404}
21405.md button.text-editor-button {
21406 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
21407}
21408.md button.text-editor-button:before {
21409 content: '';
21410 width: 152%;
21411 height: 152%;
21412 left: -26%;
21413 top: -26%;
21414 position: absolute;
21415 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
21416 background-repeat: no-repeat;
21417 background-position: center;
21418 background-size: 100% 100%;
21419 opacity: 0;
21420 pointer-events: none;
21421 transition-duration: 300ms;
21422 transition-property: opacity;
21423}
21424.md button.text-editor-button.icon-only:before,
21425.md button.text-editor-button.ripple-inset:before,
21426.md button.text-editor-button.searchbar-disable-button:before,
21427.md button.text-editor-button.input-clear-button:before,
21428.md button.text-editor-button.notification-close-button:before {
21429 width: 100%;
21430 height: 100%;
21431 left: 0;
21432 top: 0;
21433 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
21434}
21435.md button.text-editor-button.active-state:before {
21436 opacity: 1;
21437 transition-duration: 150ms;
21438}
21439.md .text-editor-keyboard-toolbar .toolbar-inner {
21440 padding-left: 8px;
21441 padding-right: 8px;
21442}
21443.aurora button.text-editor-button {
21444 transition: opacity 300ms;
21445}
21446.aurora button.text-editor-button.active-state {
21447 opacity: 0.3;
21448 transition-duration: 0ms;
21449}
21450.pie-chart {
21451 position: relative;
21452}
21453.pie-chart svg {
21454 display: block;
21455 width: 100%;
21456 font-size: 0;
21457 height: auto;
21458 margin: 0 auto;
21459}
21460.pie-chart path {
21461 transition-duration: 150ms;
21462}
21463.pie-chart-hidden {
21464 opacity: 0.4;
21465}
21466.pie-chart-tooltip {
21467 pointer-events: none;
21468 text-align: left;
21469 font-size: 12px;
21470 line-height: 1.4;
21471 white-space: nowrap;
21472 width: auto;
21473 max-width: none;
21474}
21475.pie-chart-tooltip-label {
21476 display: flex;
21477 align-items: center;
21478}
21479.pie-chart-tooltip-color {
21480 display: inline-block;
21481 width: 10px;
21482 height: 10px;
21483 border-radius: 50%;
21484 margin-right: 4px;
21485}
21486:root {
21487 --f7-area-chart-current-line-stroke-width: 2px;
21488 --f7-area-chart-current-line-stroke: rgba(0, 0, 0, 0.15);
21489 --f7-area-chart-axis-text-color: inherit;
21490 --f7-area-chart-axis-height: 1px;
21491 --f7-area-chart-axis-font-size: 10px;
21492 --f7-area-chart-axis-font-weight: 500;
21493 --f7-area-chart-tooltip-font-size: 12px;
21494 --f7-area-chart-tooltip-total-label-text-color: rgba(255, 255, 255, 0.75);
21495 --f7-area-chart-tooltip-total-font-size: 16px;
21496 --f7-area-chart-tooltip-total-font-weight: bold;
21497 --f7-area-chart-tooltip-color-size: 10px;
21498 --f7-area-chart-legend-font-size: 14px;
21499 --f7-area-chart-legend-font-weight: 500;
21500 --f7-area-chart-legend-text-color: inherit;
21501 --f7-area-chart-legend-padding: 4px 8px;
21502 --f7-area-chart-legend-border-radius: 4px;
21503 --f7-area-chart-legend-color-size: 14px;
21504 --f7-area-chart-line-stroke-width: 2px;
21505 --f7-area-chart-axis-bg-color: rgba(0, 0, 0, 0.15);
21506 --f7-area-chart-legend-disabled-text-color: rgba(0, 0, 0, 0.22);
21507}
21508:root .theme-dark,
21509:root.theme-dark {
21510 --f7-area-chart-axis-bg-color: rgba(255, 255, 255, 0.15);
21511 --f7-area-chart-legend-disabled-text-color: rgba(255, 255, 255, 0.22);
21512}
21513.area-chart {
21514 position: relative;
21515}
21516.area-chart svg {
21517 display: block;
21518 width: 100%;
21519 font-size: 0;
21520 height: auto;
21521 margin: 0 auto;
21522}
21523.area-chart path {
21524 fill: none;
21525 stroke-width: var(--f7-area-chart-line-stroke-width);
21526}
21527.area-chart-current-line {
21528 stroke: var(--f7-area-chart-current-line-stroke);
21529 stroke-width: var(--f7-area-chart-current-line-stroke-width);
21530}
21531.area-chart-axis {
21532 height: var(--f7-area-chart-axis-height);
21533 background: var(--f7-area-chart-axis-bg-color);
21534 color: var(--f7-area-chart-axis-text-color);
21535 display: flex;
21536 font-size: var(--f7-area-chart-axis-font-size);
21537 font-weight: var(--f7-area-chart-axis-font-weight);
21538 justify-content: space-between;
21539 line-height: 1;
21540 margin-bottom: 2em;
21541}
21542.area-chart-axis > span {
21543 padding-top: 10px;
21544 width: 0;
21545 display: flex;
21546 align-items: flex-start;
21547 justify-content: center;
21548 white-space: nowrap;
21549}
21550.area-chart-axis > span:first-child {
21551 justify-content: flex-start;
21552}
21553.area-chart-axis > span:last-child {
21554 justify-content: flex-end;
21555}
21556.area-chart-tooltip {
21557 pointer-events: none;
21558 text-align: left;
21559 font-size: var(--f7-area-chart-tooltip-font-size);
21560 line-height: 1.4;
21561}
21562.area-chart-tooltip-label {
21563 color: var(--f7-area-chart-tooltip-total-label-text-color);
21564}
21565.area-chart-tooltip-total {
21566 font-size: var(--f7-area-chart-tooltip-total-font-size);
21567 font-weight: var(--f7-area-chart-tooltip-total-font-weight);
21568}
21569.area-chart-tooltip-list {
21570 list-style: none;
21571 margin: 0;
21572 padding: 0;
21573}
21574.area-chart-tooltip-list li {
21575 white-space: nowrap;
21576}
21577.area-chart-tooltip-list span {
21578 display: inline-block;
21579 width: var(--f7-area-chart-tooltip-color-size);
21580 height: var(--f7-area-chart-tooltip-color-size);
21581 border-radius: 50%;
21582 margin-right: 4px;
21583}
21584.area-chart-axis ~ .area-chart-legend {
21585 margin-top: 2em;
21586}
21587.area-chart-legend {
21588 display: flex;
21589 flex-wrap: wrap;
21590 align-items: center;
21591 justify-content: center;
21592 font-size: var(--f7-area-chart-legend-font-size);
21593 width: 100%;
21594 margin-top: 1em;
21595}
21596.area-chart-legend-button {
21597 -webkit-appearance: none !important;
21598 -moz-appearance: none !important;
21599 appearance: none !important;
21600 background-color: transparent;
21601 border-radius: 0;
21602 border: none;
21603 outline: 0 !important;
21604 cursor: pointer;
21605 font-family: inherit;
21606 font-size: inherit;
21607 box-shadow: none !important;
21608}
21609.area-chart-legend-item {
21610 position: relative;
21611 color: var(--f7-area-chart-legend-text-color);
21612 width: auto;
21613 display: flex;
21614 align-items: center;
21615 font-weight: var(--f7-area-chart-legend-font-weight);
21616 transition-duration: 200ms;
21617 padding: var(--f7-area-chart-legend-padding);
21618 border-radius: var(--f7-area-chart-legend-border-radius);
21619 overflow: hidden;
21620}
21621.area-chart-legend-item span {
21622 width: var(--f7-area-chart-legend-color-size);
21623 height: var(--f7-area-chart-legend-color-size);
21624 margin-right: 4px;
21625 border-radius: 50%;
21626 transition-duration: 200ms;
21627}
21628.area-chart-legend-item-hidden {
21629 color: var(--f7-area-chart-legend-disabled-text-color);
21630}
21631.area-chart-legend-item-hidden span {
21632 background-color: var(--f7-area-chart-legend-disabled-text-color) !important;
21633}
21634/* === Elevation === */
21635:root {
21636 --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
21637 --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
21638 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
21639 --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
21640 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
21641 --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
21642 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
21643 --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
21644 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
21645 --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
21646 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
21647 --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
21648 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
21649 --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
21650 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
21651 --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
21652 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
21653 --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
21654 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
21655 --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
21656 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
21657 --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
21658 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
21659 --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
21660 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
21661 --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
21662 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
21663 --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
21664 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
21665 --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
21666 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
21667 --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
21668 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
21669 --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
21670 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
21671 --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
21672 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
21673 --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
21674 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
21675 --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
21676 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
21677 --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
21678 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
21679 --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
21680 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
21681 --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
21682 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
21683 --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
21684 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
21685}
21686.elevation-0 {
21687 box-shadow: var(--f7-elevation-0) !important;
21688}
21689.elevation-1 {
21690 box-shadow: var(--f7-elevation-1) !important;
21691}
21692.elevation-2 {
21693 box-shadow: var(--f7-elevation-2) !important;
21694}
21695.elevation-3 {
21696 box-shadow: var(--f7-elevation-3) !important;
21697}
21698.elevation-4 {
21699 box-shadow: var(--f7-elevation-4) !important;
21700}
21701.elevation-5 {
21702 box-shadow: var(--f7-elevation-5) !important;
21703}
21704.elevation-6 {
21705 box-shadow: var(--f7-elevation-6) !important;
21706}
21707.elevation-7 {
21708 box-shadow: var(--f7-elevation-7) !important;
21709}
21710.elevation-8 {
21711 box-shadow: var(--f7-elevation-8) !important;
21712}
21713.elevation-9 {
21714 box-shadow: var(--f7-elevation-9) !important;
21715}
21716.elevation-10 {
21717 box-shadow: var(--f7-elevation-10) !important;
21718}
21719.elevation-11 {
21720 box-shadow: var(--f7-elevation-11) !important;
21721}
21722.elevation-12 {
21723 box-shadow: var(--f7-elevation-12) !important;
21724}
21725.elevation-13 {
21726 box-shadow: var(--f7-elevation-13) !important;
21727}
21728.elevation-14 {
21729 box-shadow: var(--f7-elevation-14) !important;
21730}
21731.elevation-15 {
21732 box-shadow: var(--f7-elevation-15) !important;
21733}
21734.elevation-16 {
21735 box-shadow: var(--f7-elevation-16) !important;
21736}
21737.elevation-17 {
21738 box-shadow: var(--f7-elevation-17) !important;
21739}
21740.elevation-18 {
21741 box-shadow: var(--f7-elevation-18) !important;
21742}
21743.elevation-19 {
21744 box-shadow: var(--f7-elevation-19) !important;
21745}
21746.elevation-20 {
21747 box-shadow: var(--f7-elevation-20) !important;
21748}
21749.elevation-21 {
21750 box-shadow: var(--f7-elevation-21) !important;
21751}
21752.elevation-22 {
21753 box-shadow: var(--f7-elevation-22) !important;
21754}
21755.elevation-23 {
21756 box-shadow: var(--f7-elevation-23) !important;
21757}
21758.elevation-24 {
21759 box-shadow: var(--f7-elevation-24) !important;
21760}
21761.device-desktop .elevation-hover-0:hover {
21762 box-shadow: var(--f7-elevation-0) !important;
21763}
21764.device-desktop .elevation-hover-1:hover {
21765 box-shadow: var(--f7-elevation-1) !important;
21766}
21767.device-desktop .elevation-hover-2:hover {
21768 box-shadow: var(--f7-elevation-2) !important;
21769}
21770.device-desktop .elevation-hover-3:hover {
21771 box-shadow: var(--f7-elevation-3) !important;
21772}
21773.device-desktop .elevation-hover-4:hover {
21774 box-shadow: var(--f7-elevation-4) !important;
21775}
21776.device-desktop .elevation-hover-5:hover {
21777 box-shadow: var(--f7-elevation-5) !important;
21778}
21779.device-desktop .elevation-hover-6:hover {
21780 box-shadow: var(--f7-elevation-6) !important;
21781}
21782.device-desktop .elevation-hover-7:hover {
21783 box-shadow: var(--f7-elevation-7) !important;
21784}
21785.device-desktop .elevation-hover-8:hover {
21786 box-shadow: var(--f7-elevation-8) !important;
21787}
21788.device-desktop .elevation-hover-9:hover {
21789 box-shadow: var(--f7-elevation-9) !important;
21790}
21791.device-desktop .elevation-hover-10:hover {
21792 box-shadow: var(--f7-elevation-10) !important;
21793}
21794.device-desktop .elevation-hover-11:hover {
21795 box-shadow: var(--f7-elevation-11) !important;
21796}
21797.device-desktop .elevation-hover-12:hover {
21798 box-shadow: var(--f7-elevation-12) !important;
21799}
21800.device-desktop .elevation-hover-13:hover {
21801 box-shadow: var(--f7-elevation-13) !important;
21802}
21803.device-desktop .elevation-hover-14:hover {
21804 box-shadow: var(--f7-elevation-14) !important;
21805}
21806.device-desktop .elevation-hover-15:hover {
21807 box-shadow: var(--f7-elevation-15) !important;
21808}
21809.device-desktop .elevation-hover-16:hover {
21810 box-shadow: var(--f7-elevation-16) !important;
21811}
21812.device-desktop .elevation-hover-17:hover {
21813 box-shadow: var(--f7-elevation-17) !important;
21814}
21815.device-desktop .elevation-hover-18:hover {
21816 box-shadow: var(--f7-elevation-18) !important;
21817}
21818.device-desktop .elevation-hover-19:hover {
21819 box-shadow: var(--f7-elevation-19) !important;
21820}
21821.device-desktop .elevation-hover-20:hover {
21822 box-shadow: var(--f7-elevation-20) !important;
21823}
21824.device-desktop .elevation-hover-21:hover {
21825 box-shadow: var(--f7-elevation-21) !important;
21826}
21827.device-desktop .elevation-hover-22:hover {
21828 box-shadow: var(--f7-elevation-22) !important;
21829}
21830.device-desktop .elevation-hover-23:hover {
21831 box-shadow: var(--f7-elevation-23) !important;
21832}
21833.device-desktop .elevation-hover-24:hover {
21834 box-shadow: var(--f7-elevation-24) !important;
21835}
21836.active-state.elevation-pressed-0,
21837.device-desktop .active-state.elevation-pressed-0 {
21838 box-shadow: var(--f7-elevation-0) !important;
21839}
21840.active-state.elevation-pressed-1,
21841.device-desktop .active-state.elevation-pressed-1 {
21842 box-shadow: var(--f7-elevation-1) !important;
21843}
21844.active-state.elevation-pressed-2,
21845.device-desktop .active-state.elevation-pressed-2 {
21846 box-shadow: var(--f7-elevation-2) !important;
21847}
21848.active-state.elevation-pressed-3,
21849.device-desktop .active-state.elevation-pressed-3 {
21850 box-shadow: var(--f7-elevation-3) !important;
21851}
21852.active-state.elevation-pressed-4,
21853.device-desktop .active-state.elevation-pressed-4 {
21854 box-shadow: var(--f7-elevation-4) !important;
21855}
21856.active-state.elevation-pressed-5,
21857.device-desktop .active-state.elevation-pressed-5 {
21858 box-shadow: var(--f7-elevation-5) !important;
21859}
21860.active-state.elevation-pressed-6,
21861.device-desktop .active-state.elevation-pressed-6 {
21862 box-shadow: var(--f7-elevation-6) !important;
21863}
21864.active-state.elevation-pressed-7,
21865.device-desktop .active-state.elevation-pressed-7 {
21866 box-shadow: var(--f7-elevation-7) !important;
21867}
21868.active-state.elevation-pressed-8,
21869.device-desktop .active-state.elevation-pressed-8 {
21870 box-shadow: var(--f7-elevation-8) !important;
21871}
21872.active-state.elevation-pressed-9,
21873.device-desktop .active-state.elevation-pressed-9 {
21874 box-shadow: var(--f7-elevation-9) !important;
21875}
21876.active-state.elevation-pressed-10,
21877.device-desktop .active-state.elevation-pressed-10 {
21878 box-shadow: var(--f7-elevation-10) !important;
21879}
21880.active-state.elevation-pressed-11,
21881.device-desktop .active-state.elevation-pressed-11 {
21882 box-shadow: var(--f7-elevation-11) !important;
21883}
21884.active-state.elevation-pressed-12,
21885.device-desktop .active-state.elevation-pressed-12 {
21886 box-shadow: var(--f7-elevation-12) !important;
21887}
21888.active-state.elevation-pressed-13,
21889.device-desktop .active-state.elevation-pressed-13 {
21890 box-shadow: var(--f7-elevation-13) !important;
21891}
21892.active-state.elevation-pressed-14,
21893.device-desktop .active-state.elevation-pressed-14 {
21894 box-shadow: var(--f7-elevation-14) !important;
21895}
21896.active-state.elevation-pressed-15,
21897.device-desktop .active-state.elevation-pressed-15 {
21898 box-shadow: var(--f7-elevation-15) !important;
21899}
21900.active-state.elevation-pressed-16,
21901.device-desktop .active-state.elevation-pressed-16 {
21902 box-shadow: var(--f7-elevation-16) !important;
21903}
21904.active-state.elevation-pressed-17,
21905.device-desktop .active-state.elevation-pressed-17 {
21906 box-shadow: var(--f7-elevation-17) !important;
21907}
21908.active-state.elevation-pressed-18,
21909.device-desktop .active-state.elevation-pressed-18 {
21910 box-shadow: var(--f7-elevation-18) !important;
21911}
21912.active-state.elevation-pressed-19,
21913.device-desktop .active-state.elevation-pressed-19 {
21914 box-shadow: var(--f7-elevation-19) !important;
21915}
21916.active-state.elevation-pressed-20,
21917.device-desktop .active-state.elevation-pressed-20 {
21918 box-shadow: var(--f7-elevation-20) !important;
21919}
21920.active-state.elevation-pressed-21,
21921.device-desktop .active-state.elevation-pressed-21 {
21922 box-shadow: var(--f7-elevation-21) !important;
21923}
21924.active-state.elevation-pressed-22,
21925.device-desktop .active-state.elevation-pressed-22 {
21926 box-shadow: var(--f7-elevation-22) !important;
21927}
21928.active-state.elevation-pressed-23,
21929.device-desktop .active-state.elevation-pressed-23 {
21930 box-shadow: var(--f7-elevation-23) !important;
21931}
21932.active-state.elevation-pressed-24,
21933.device-desktop .active-state.elevation-pressed-24 {
21934 box-shadow: var(--f7-elevation-24) !important;
21935}
21936.elevation-transition-100 {
21937 transition-duration: 100ms;
21938 transition-property: box-shadow;
21939}
21940.elevation-transition,
21941.elevation-transition-200 {
21942 transition-duration: 200ms;
21943 transition-property: box-shadow;
21944}
21945.elevation-transition-300 {
21946 transition-duration: 300ms;
21947 transition-property: box-shadow;
21948}
21949.elevation-transition-400 {
21950 transition-duration: 400ms;
21951 transition-property: box-shadow;
21952}
21953.elevation-transition-500 {
21954 transition-duration: 500ms;
21955 transition-property: box-shadow;
21956}
21957/* === Typography === */
21958:root {
21959 --f7-typography-padding: 16px;
21960 --f7-typography-margin: 16px;
21961}
21962.display-flex {
21963 display: flex !important;
21964}
21965.display-block {
21966 display: block !important;
21967}
21968.display-inline-flex {
21969 display: inline-flex !important;
21970}
21971.display-inline-block {
21972 display: inline-block !important;
21973}
21974.display-inline {
21975 display: inline !important;
21976}
21977.display-none {
21978 display: none !important;
21979}
21980.flex-shrink-0 {
21981 flex-shrink: 0 !important;
21982}
21983.flex-shrink-1 {
21984 flex-shrink: 1 !important;
21985}
21986.flex-shrink-2 {
21987 flex-shrink: 2 !important;
21988}
21989.flex-shrink-3 {
21990 flex-shrink: 3 !important;
21991}
21992.flex-shrink-4 {
21993 flex-shrink: 4 !important;
21994}
21995.flex-shrink-5 {
21996 flex-shrink: 5 !important;
21997}
21998.flex-shrink-6 {
21999 flex-shrink: 6 !important;
22000}
22001.flex-shrink-7 {
22002 flex-shrink: 7 !important;
22003}
22004.flex-shrink-8 {
22005 flex-shrink: 8 !important;
22006}
22007.flex-shrink-9 {
22008 flex-shrink: 9 !important;
22009}
22010.flex-shrink-10 {
22011 flex-shrink: 10 !important;
22012}
22013.flex-direction-row {
22014 flex-direction: row !important;
22015}
22016.flex-direction-row-reverse {
22017 flex-direction: row-reverse !important;
22018}
22019.flex-direction-column {
22020 flex-direction: column !important;
22021}
22022.flex-direction-column-reverse {
22023 flex-direction: column-reverse !important;
22024}
22025.justify-content-flex-start {
22026 justify-content: flex-start !important;
22027}
22028.justify-content-center {
22029 justify-content: center !important;
22030}
22031.justify-content-flex-end {
22032 justify-content: flex-end !important;
22033}
22034.justify-content-space-between {
22035 justify-content: space-between !important;
22036}
22037.justify-content-space-around {
22038 justify-content: space-around !important;
22039}
22040.justify-content-space-evenly {
22041 justify-content: space-evenly !important;
22042}
22043.justify-content-stretch {
22044 justify-content: stretch !important;
22045}
22046.justify-content-start {
22047 justify-content: start !important;
22048}
22049.justify-content-end {
22050 justify-content: end !important;
22051}
22052.justify-content-left {
22053 justify-content: left !important;
22054}
22055.justify-content-right {
22056 justify-content: right !important;
22057}
22058.align-content-flex-start {
22059 align-content: flex-start !important;
22060}
22061.align-content-flex-end {
22062 align-content: flex-end !important;
22063}
22064.align-content-center {
22065 align-content: center !important;
22066}
22067.align-content-space-between {
22068 align-content: space-between !important;
22069}
22070.align-content-space-around {
22071 align-content: space-around !important;
22072}
22073.align-content-stretch {
22074 align-content: stretch !important;
22075}
22076.align-items-baseline {
22077 align-items: baseline !important;
22078}
22079.align-items-flex-start {
22080 align-items: flex-start !important;
22081}
22082.align-items-flex-end {
22083 align-items: flex-end !important;
22084}
22085.align-items-center {
22086 align-items: center !important;
22087}
22088.align-items-stretch {
22089 align-items: stretch !important;
22090}
22091.align-self-flex-start {
22092 align-self: flex-start !important;
22093}
22094.align-self-flex-end {
22095 align-self: flex-end !important;
22096}
22097.align-self-center {
22098 align-self: center !important;
22099}
22100.align-self-stretch {
22101 align-self: stretch !important;
22102}
22103.text-align-left {
22104 text-align: left !important;
22105}
22106.text-align-center {
22107 text-align: center !important;
22108}
22109.text-align-right {
22110 text-align: right !important;
22111}
22112.text-align-justify {
22113 text-align: justify !important;
22114}
22115.float-left {
22116 float: left !important;
22117}
22118.float-right {
22119 float: right !important;
22120}
22121.float-none {
22122 float: none !important;
22123}
22124.vertical-align-bottom {
22125 vertical-align: bottom !important;
22126}
22127.vertical-align-middle {
22128 vertical-align: middle !important;
22129}
22130.vertical-align-top {
22131 vertical-align: top !important;
22132}
22133.no-padding {
22134 padding: 0 !important;
22135}
22136.no-padding-left {
22137 padding-left: 0 !important;
22138}
22139.no-padding-right {
22140 padding-right: 0 !important;
22141}
22142.no-padding-horizontal {
22143 padding-left: 0 !important;
22144 padding-right: 0 !important;
22145}
22146.no-padding-top {
22147 padding-top: 0 !important;
22148}
22149.no-padding-bottom {
22150 padding-bottom: 0 !important;
22151}
22152.no-padding-vertical {
22153 padding-top: 0 !important;
22154 padding-bottom: 0 !important;
22155}
22156.no-margin {
22157 margin: 0 !important;
22158}
22159.no-margin-left {
22160 margin-left: 0 !important;
22161}
22162.no-margin-right {
22163 margin-right: 0 !important;
22164}
22165.no-margin-horizontal {
22166 margin-left: 0 !important;
22167 margin-right: 0 !important;
22168}
22169.no-margin-top {
22170 margin-top: 0 !important;
22171}
22172.no-margin-bottom {
22173 margin-bottom: 0 !important;
22174}
22175.no-margin-vertical {
22176 margin-top: 0 !important;
22177 margin-bottom: 0 !important;
22178}
22179.width-auto {
22180 width: auto !important;
22181}
22182.width-100 {
22183 width: 100% !important;
22184}
22185.padding {
22186 padding: var(--f7-typography-padding) !important;
22187}
22188.padding-half {
22189 padding: calc(var(--f7-typography-padding) / 2) !important;
22190}
22191.padding-top {
22192 padding-top: var(--f7-typography-padding) !important;
22193}
22194.padding-top-half {
22195 padding-top: calc(var(--f7-typography-padding) / 2) !important;
22196}
22197.padding-bottom {
22198 padding-bottom: var(--f7-typography-padding) !important;
22199}
22200.padding-bottom-half {
22201 padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
22202}
22203.padding-left {
22204 padding-left: var(--f7-typography-padding) !important;
22205}
22206.padding-left-half {
22207 padding-left: calc(var(--f7-typography-padding) / 2) !important;
22208}
22209.padding-right {
22210 padding-right: var(--f7-typography-padding) !important;
22211}
22212.padding-right-half {
22213 padding-right: calc(var(--f7-typography-padding) / 2) !important;
22214}
22215.padding-vertical {
22216 padding-top: var(--f7-typography-padding) !important;
22217 padding-bottom: var(--f7-typography-padding) !important;
22218}
22219.padding-vertical-half {
22220 padding-top: calc(var(--f7-typography-padding) / 2) !important;
22221 padding-bottom: calc(var(--f7-typography-padding) / 2) !important;
22222}
22223.padding-horizontal {
22224 padding-left: var(--f7-typography-padding) !important;
22225 padding-right: var(--f7-typography-padding) !important;
22226}
22227.padding-horizontal-half {
22228 padding-left: calc(var(--f7-typography-padding) / 2) !important;
22229 padding-right: calc(var(--f7-typography-padding) / 2) !important;
22230}
22231.margin {
22232 margin: var(--f7-typography-margin) !important;
22233}
22234.margin-half {
22235 margin: calc(var(--f7-typography-margin) / 2) !important;
22236}
22237.margin-top {
22238 margin-top: var(--f7-typography-margin) !important;
22239}
22240.margin-top-half {
22241 margin-top: calc(var(--f7-typography-margin) / 2) !important;
22242}
22243.margin-bottom {
22244 margin-bottom: var(--f7-typography-margin) !important;
22245}
22246.margin-bottom-half {
22247 margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
22248}
22249.margin-left {
22250 margin-left: var(--f7-typography-margin) !important;
22251}
22252.margin-left-half {
22253 margin-left: calc(var(--f7-typography-margin) / 2) !important;
22254}
22255.margin-right {
22256 margin-right: var(--f7-typography-margin) !important;
22257}
22258.margin-right-half {
22259 margin-right: calc(var(--f7-typography-margin) / 2) !important;
22260}
22261.margin-vertical {
22262 margin-top: var(--f7-typography-margin) !important;
22263 margin-bottom: var(--f7-typography-margin) !important;
22264}
22265.margin-vertical-half {
22266 margin-top: calc(var(--f7-typography-margin) / 2) !important;
22267 margin-bottom: calc(var(--f7-typography-margin) / 2) !important;
22268}
22269.margin-horizontal {
22270 margin-left: var(--f7-typography-margin) !important;
22271 margin-right: var(--f7-typography-margin) !important;
22272}
22273.margin-horizontal-half {
22274 margin-left: calc(var(--f7-typography-margin) / 2) !important;
22275 margin-right: calc(var(--f7-typography-margin) / 2) !important;
22276}
22277[class*='text-color-'] {
22278 color: var(--f7-theme-color-text-color) !important;
22279}
22280[class*='bg-color-'] {
22281 background-color: var(--f7-theme-color-bg-color) !important;
22282}
22283[class*='border-color-'] {
22284 border-color: var(--f7-theme-color-border-color) !important;
22285}