]> git.proxmox.com Git - framework7.git/blame - framework7/css/framework7.bundle.rtl.css
projects / framework7.git / blame
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (incremental) | history | HEAD
intial commit
[framework7.git] / framework7 / css / framework7.bundle.rtl.css
CommitLineData
5309fbda
DC		 1/**
2 * Framework7 4.0.5
3 * Full featured mobile HTML framework for building iOS & Android apps
4 * http://framework7.io/
5 *
6 * Copyright 2014-2019 Vladimir Kharlampidi
7 *
8 * Released under the MIT License
9 *
10 * Released on: February 14, 2019
11 */
12
13/*====================
14 Core
15 ==================== */
16:root {
17 --f7-theme-color: #007aff;
18 --f7-theme-color-rgb: 0, 122, 255;
19 --f7-theme-color-shade: #0066d6;
20 --f7-theme-color-tint: #298fff;
21 --f7-safe-area-left: 0px;
22 --f7-safe-area-right: 0px;
23 --f7-safe-area-top: 0px;
24 --f7-safe-area-bottom: 0px;
25 --f7-safe-area-outer-left: 0px;
26 --f7-safe-area-outer-right: 0px;
27 --f7-device-pixel-ratio: 1;
28}
29@supports (left: env(safe-area-inset-left)) {
30 :root {
31 --f7-safe-area-top: env(safe-area-inset-top);
32 --f7-safe-area-bottom: env(safe-area-inset-bottom);
33 }
34 :root .ios-left-edge,
35 :root .ios-edges,
36 :root .safe-area-left,
37 :root .safe-areas,
38 :root .popup,
39 :root .sheet-modal,
40 :root .panel-left {
41 --f7-safe-area-left: env(safe-area-inset-left);
42 --f7-safe-area-outer-left: env(safe-area-inset-left);
43 }
44 :root .ios-right-edge,
45 :root .ios-edges,
46 :root .safe-area-right,
47 :root .safe-areas,
48 :root .popup,
49 :root .sheet-modal,
50 :root .panel-right {
51 --f7-safe-area-right: env(safe-area-inset-right);
52 --f7-safe-area-outer-right: env(safe-area-inset-right);
53 }
54 :root .no-safe-areas,
55 :root .no-safe-area-left,
56 :root .no-ios-edges,
57 :root .no-ios-left-edge {
58 --f7-safe-area-left: 0px;
59 --f7-safe-area-outer-left: 0px;
60 }
61 :root .no-safe-areas,
62 :root .no-safe-area-right,
63 :root .no-ios-edges,
64 :root .no-ios-right-edge {
65 --f7-safe-area-right: 0px;
66 --f7-safe-area-outer-right: 0px;
67 }
68}
69@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
70 :root {
71 --f7-device-pixel-ratio: 2;
72 }
73}
74@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
75 :root {
76 --f7-device-pixel-ratio: 3;
77 }
78}
79/*====================
80 Fonts
81 ==================== */
82.ios {
83 --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
84 --f7-text-color: #000;
85 --f7-font-size: 14px;
86 --f7-line-height: 1.4;
87}
88.ios .theme-dark,
89.ios.theme-dark {
90 --f7-text-color: #fff;
91}
92.md {
93 --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
94 --f7-text-color: #212121;
95 --f7-font-size: 14px;
96 --f7-line-height: 1.5;
97}
98.md .theme-dark,
99.md.theme-dark {
100 --f7-text-color: rgba(255, 255, 255, 0.87);
101}
102/*====================
103 Bars
104 ==================== */
105:root {
106 /*
107 --f7-bars-link-color: var(--f7-theme-color);
108 */
109 --f7-bars-bg-image: none;
110 --f7-bars-bg-color: #f7f7f8;
111 --f7-bars-bg-color-rgb: 247, 247, 248;
112 --f7-bars-text-color: #000;
113 --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
114 --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
115}
116.theme-dark {
117 --f7-bars-bg-color: #1b1b1b;
118 --f7-bars-text-color: #fff;
119}
120.ios {
121 --f7-bars-border-color: #c4c4c4;
122}
123.ios .theme-dark,
124.ios.theme-dark {
125 --f7-bars-border-color: #282829;
126}
127.md {
128 --f7-bars-border-color: transparent;
129}
130/*====================
131 Color Themes
132 ==================== */
133.text-color-primary {
134 --f7-theme-color-text-color: var(--f7-theme-color);
135}
136.bg-color-primary {
137 --f7-theme-color-bg-color: var(--f7-theme-color);
138}
139.border-color-primary {
140 --f7-theme-color-border-color: var(--f7-theme-color);
141}
142.ripple-color-primary {
143 --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
144}
145:root {
146 --f7-color-red: #ff3b30;
147 --f7-color-red-rgb: 255, 59, 48;
148 --f7-color-red-shade: #ff1407;
149 --f7-color-red-tint: #ff6259;
150 --f7-color-green: #4cd964;
151 --f7-color-green-rgb: 76, 217, 100;
152 --f7-color-green-shade: #2cd048;
153 --f7-color-green-tint: #6ee081;
154 --f7-color-blue: #2196f3;
155 --f7-color-blue-rgb: 33, 150, 243;
156 --f7-color-blue-shade: #0c82df;
157 --f7-color-blue-tint: #48a8f5;
158 --f7-color-pink: #ff2d55;
159 --f7-color-pink-rgb: 255, 45, 85;
160 --f7-color-pink-shade: #ff0434;
161 --f7-color-pink-tint: #ff5676;
162 --f7-color-yellow: #ffcc00;
163 --f7-color-yellow-rgb: 255, 204, 0;
164 --f7-color-yellow-shade: #d6ab00;
165 --f7-color-yellow-tint: #ffd429;
166 --f7-color-orange: #ff9500;
167 --f7-color-orange-rgb: 255, 149, 0;
168 --f7-color-orange-shade: #d67d00;
169 --f7-color-orange-tint: #ffa629;
170 --f7-color-purple: #9c27b0;
171 --f7-color-purple-rgb: 156, 39, 176;
172 --f7-color-purple-shade: #7e208f;
173 --f7-color-purple-tint: #b92fd1;
174 --f7-color-deeppurple: #673ab7;
175 --f7-color-deeppurple-rgb: 103, 58, 183;
176 --f7-color-deeppurple-shade: #563098;
177 --f7-color-deeppurple-tint: #7c52c8;
178 --f7-color-lightblue: #5ac8fa;
179 --f7-color-lightblue-rgb: 90, 200, 250;
180 --f7-color-lightblue-shade: #32bbf9;
181 --f7-color-lightblue-tint: #82d5fb;
182 --f7-color-teal: #009688;
183 --f7-color-teal-rgb: 0, 150, 136;
184 --f7-color-teal-shade: #006d63;
185 --f7-color-teal-tint: #00bfad;
186 --f7-color-lime: #cddc39;
187 --f7-color-lime-rgb: 205, 220, 57;
188 --f7-color-lime-shade: #bac923;
189 --f7-color-lime-tint: #d6e25c;
190 --f7-color-deeporange: #ff6b22;
191 --f7-color-deeporange-rgb: 255, 107, 34;
192 --f7-color-deeporange-shade: #f85200;
193 --f7-color-deeporange-tint: #ff864b;
194 --f7-color-gray: #8e8e93;
195 --f7-color-gray-rgb: 142, 142, 147;
196 --f7-color-gray-shade: #79797f;
197 --f7-color-gray-tint: #a3a3a7;
198 --f7-color-white: #ffffff;
199 --f7-color-white-rgb: 255, 255, 255;
200 --f7-color-white-shade: #ebebeb;
201 --f7-color-white-tint: #ffffff;
202 --f7-color-black: #000000;
203 --f7-color-black-rgb: 0, 0, 0;
204 --f7-color-black-shade: #000000;
205 --f7-color-black-tint: #141414;
206}
207.color-theme-red {
208 --f7-theme-color: #ff3b30;
209 --f7-theme-color-rgb: 255, 59, 48;
210 --f7-theme-color-shade: #ff1407;
211 --f7-theme-color-tint: #ff6259;
212}
213.color-theme-green {
214 --f7-theme-color: #4cd964;
215 --f7-theme-color-rgb: 76, 217, 100;
216 --f7-theme-color-shade: #2cd048;
217 --f7-theme-color-tint: #6ee081;
218}
219.color-theme-blue {
220 --f7-theme-color: #2196f3;
221 --f7-theme-color-rgb: 33, 150, 243;
222 --f7-theme-color-shade: #0c82df;
223 --f7-theme-color-tint: #48a8f5;
224}
225.color-theme-pink {
226 --f7-theme-color: #ff2d55;
227 --f7-theme-color-rgb: 255, 45, 85;
228 --f7-theme-color-shade: #ff0434;
229 --f7-theme-color-tint: #ff5676;
230}
231.color-theme-yellow {
232 --f7-theme-color: #ffcc00;
233 --f7-theme-color-rgb: 255, 204, 0;
234 --f7-theme-color-shade: #d6ab00;
235 --f7-theme-color-tint: #ffd429;
236}
237.color-theme-orange {
238 --f7-theme-color: #ff9500;
239 --f7-theme-color-rgb: 255, 149, 0;
240 --f7-theme-color-shade: #d67d00;
241 --f7-theme-color-tint: #ffa629;
242}
243.color-theme-purple {
244 --f7-theme-color: #9c27b0;
245 --f7-theme-color-rgb: 156, 39, 176;
246 --f7-theme-color-shade: #7e208f;
247 --f7-theme-color-tint: #b92fd1;
248}
249.color-theme-deeppurple {
250 --f7-theme-color: #673ab7;
251 --f7-theme-color-rgb: 103, 58, 183;
252 --f7-theme-color-shade: #563098;
253 --f7-theme-color-tint: #7c52c8;
254}
255.color-theme-lightblue {
256 --f7-theme-color: #5ac8fa;
257 --f7-theme-color-rgb: 90, 200, 250;
258 --f7-theme-color-shade: #32bbf9;
259 --f7-theme-color-tint: #82d5fb;
260}
261.color-theme-teal {
262 --f7-theme-color: #009688;
263 --f7-theme-color-rgb: 0, 150, 136;
264 --f7-theme-color-shade: #006d63;
265 --f7-theme-color-tint: #00bfad;
266}
267.color-theme-lime {
268 --f7-theme-color: #cddc39;
269 --f7-theme-color-rgb: 205, 220, 57;
270 --f7-theme-color-shade: #bac923;
271 --f7-theme-color-tint: #d6e25c;
272}
273.color-theme-deeporange {
274 --f7-theme-color: #ff6b22;
275 --f7-theme-color-rgb: 255, 107, 34;
276 --f7-theme-color-shade: #f85200;
277 --f7-theme-color-tint: #ff864b;
278}
279.color-theme-gray {
280 --f7-theme-color: #8e8e93;
281 --f7-theme-color-rgb: 142, 142, 147;
282 --f7-theme-color-shade: #79797f;
283 --f7-theme-color-tint: #a3a3a7;
284}
285.color-theme-white {
286 --f7-theme-color: #ffffff;
287 --f7-theme-color-rgb: 255, 255, 255;
288 --f7-theme-color-shade: #ebebeb;
289 --f7-theme-color-tint: #ffffff;
290}
291.color-theme-black {
292 --f7-theme-color: #000000;
293 --f7-theme-color-rgb: 0, 0, 0;
294 --f7-theme-color-shade: #000000;
295 --f7-theme-color-tint: #141414;
296}
297.color-red {
298 --f7-theme-color: #ff3b30;
299 --f7-theme-color-rgb: 255, 59, 48;
300 --f7-theme-color-shade: #ff1407;
301 --f7-theme-color-tint: #ff6259;
302}
303.text-color-red {
304 --f7-theme-color-text-color: #ff3b30;
305}
306.bg-color-red {
307 --f7-theme-color-bg-color: #ff3b30;
308}
309.border-color-red {
310 --f7-theme-color-border-color: #ff3b30;
311}
312.ripple-color-red,
313.ripple-red {
314 --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
315}
316.color-green {
317 --f7-theme-color: #4cd964;
318 --f7-theme-color-rgb: 76, 217, 100;
319 --f7-theme-color-shade: #2cd048;
320 --f7-theme-color-tint: #6ee081;
321}
322.text-color-green {
323 --f7-theme-color-text-color: #4cd964;
324}
325.bg-color-green {
326 --f7-theme-color-bg-color: #4cd964;
327}
328.border-color-green {
329 --f7-theme-color-border-color: #4cd964;
330}
331.ripple-color-green,
332.ripple-green {
333 --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
334}
335.color-blue {
336 --f7-theme-color: #2196f3;
337 --f7-theme-color-rgb: 33, 150, 243;
338 --f7-theme-color-shade: #0c82df;
339 --f7-theme-color-tint: #48a8f5;
340}
341.text-color-blue {
342 --f7-theme-color-text-color: #2196f3;
343}
344.bg-color-blue {
345 --f7-theme-color-bg-color: #2196f3;
346}
347.border-color-blue {
348 --f7-theme-color-border-color: #2196f3;
349}
350.ripple-color-blue,
351.ripple-blue {
352 --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
353}
354.color-pink {
355 --f7-theme-color: #ff2d55;
356 --f7-theme-color-rgb: 255, 45, 85;
357 --f7-theme-color-shade: #ff0434;
358 --f7-theme-color-tint: #ff5676;
359}
360.text-color-pink {
361 --f7-theme-color-text-color: #ff2d55;
362}
363.bg-color-pink {
364 --f7-theme-color-bg-color: #ff2d55;
365}
366.border-color-pink {
367 --f7-theme-color-border-color: #ff2d55;
368}
369.ripple-color-pink,
370.ripple-pink {
371 --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
372}
373.color-yellow {
374 --f7-theme-color: #ffcc00;
375 --f7-theme-color-rgb: 255, 204, 0;
376 --f7-theme-color-shade: #d6ab00;
377 --f7-theme-color-tint: #ffd429;
378}
379.text-color-yellow {
380 --f7-theme-color-text-color: #ffcc00;
381}
382.bg-color-yellow {
383 --f7-theme-color-bg-color: #ffcc00;
384}
385.border-color-yellow {
386 --f7-theme-color-border-color: #ffcc00;
387}
388.ripple-color-yellow,
389.ripple-yellow {
390 --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
391}
392.color-orange {
393 --f7-theme-color: #ff9500;
394 --f7-theme-color-rgb: 255, 149, 0;
395 --f7-theme-color-shade: #d67d00;
396 --f7-theme-color-tint: #ffa629;
397}
398.text-color-orange {
399 --f7-theme-color-text-color: #ff9500;
400}
401.bg-color-orange {
402 --f7-theme-color-bg-color: #ff9500;
403}
404.border-color-orange {
405 --f7-theme-color-border-color: #ff9500;
406}
407.ripple-color-orange,
408.ripple-orange {
409 --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
410}
411.color-purple {
412 --f7-theme-color: #9c27b0;
413 --f7-theme-color-rgb: 156, 39, 176;
414 --f7-theme-color-shade: #7e208f;
415 --f7-theme-color-tint: #b92fd1;
416}
417.text-color-purple {
418 --f7-theme-color-text-color: #9c27b0;
419}
420.bg-color-purple {
421 --f7-theme-color-bg-color: #9c27b0;
422}
423.border-color-purple {
424 --f7-theme-color-border-color: #9c27b0;
425}
426.ripple-color-purple,
427.ripple-purple {
428 --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
429}
430.color-deeppurple {
431 --f7-theme-color: #673ab7;
432 --f7-theme-color-rgb: 103, 58, 183;
433 --f7-theme-color-shade: #563098;
434 --f7-theme-color-tint: #7c52c8;
435}
436.text-color-deeppurple {
437 --f7-theme-color-text-color: #673ab7;
438}
439.bg-color-deeppurple {
440 --f7-theme-color-bg-color: #673ab7;
441}
442.border-color-deeppurple {
443 --f7-theme-color-border-color: #673ab7;
444}
445.ripple-color-deeppurple,
446.ripple-deeppurple {
447 --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
448}
449.color-lightblue {
450 --f7-theme-color: #5ac8fa;
451 --f7-theme-color-rgb: 90, 200, 250;
452 --f7-theme-color-shade: #32bbf9;
453 --f7-theme-color-tint: #82d5fb;
454}
455.text-color-lightblue {
456 --f7-theme-color-text-color: #5ac8fa;
457}
458.bg-color-lightblue {
459 --f7-theme-color-bg-color: #5ac8fa;
460}
461.border-color-lightblue {
462 --f7-theme-color-border-color: #5ac8fa;
463}
464.ripple-color-lightblue,
465.ripple-lightblue {
466 --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
467}
468.color-teal {
469 --f7-theme-color: #009688;
470 --f7-theme-color-rgb: 0, 150, 136;
471 --f7-theme-color-shade: #006d63;
472 --f7-theme-color-tint: #00bfad;
473}
474.text-color-teal {
475 --f7-theme-color-text-color: #009688;
476}
477.bg-color-teal {
478 --f7-theme-color-bg-color: #009688;
479}
480.border-color-teal {
481 --f7-theme-color-border-color: #009688;
482}
483.ripple-color-teal,
484.ripple-teal {
485 --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
486}
487.color-lime {
488 --f7-theme-color: #cddc39;
489 --f7-theme-color-rgb: 205, 220, 57;
490 --f7-theme-color-shade: #bac923;
491 --f7-theme-color-tint: #d6e25c;
492}
493.text-color-lime {
494 --f7-theme-color-text-color: #cddc39;
495}
496.bg-color-lime {
497 --f7-theme-color-bg-color: #cddc39;
498}
499.border-color-lime {
500 --f7-theme-color-border-color: #cddc39;
501}
502.ripple-color-lime,
503.ripple-lime {
504 --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
505}
506.color-deeporange {
507 --f7-theme-color: #ff6b22;
508 --f7-theme-color-rgb: 255, 107, 34;
509 --f7-theme-color-shade: #f85200;
510 --f7-theme-color-tint: #ff864b;
511}
512.text-color-deeporange {
513 --f7-theme-color-text-color: #ff6b22;
514}
515.bg-color-deeporange {
516 --f7-theme-color-bg-color: #ff6b22;
517}
518.border-color-deeporange {
519 --f7-theme-color-border-color: #ff6b22;
520}
521.ripple-color-deeporange,
522.ripple-deeporange {
523 --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
524}
525.color-gray {
526 --f7-theme-color: #8e8e93;
527 --f7-theme-color-rgb: 142, 142, 147;
528 --f7-theme-color-shade: #79797f;
529 --f7-theme-color-tint: #a3a3a7;
530}
531.text-color-gray {
532 --f7-theme-color-text-color: #8e8e93;
533}
534.bg-color-gray {
535 --f7-theme-color-bg-color: #8e8e93;
536}
537.border-color-gray {
538 --f7-theme-color-border-color: #8e8e93;
539}
540.ripple-color-gray,
541.ripple-gray {
542 --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
543}
544.color-white {
545 --f7-theme-color: #ffffff;
546 --f7-theme-color-rgb: 255, 255, 255;
547 --f7-theme-color-shade: #ebebeb;
548 --f7-theme-color-tint: #ffffff;
549}
550.text-color-white {
551 --f7-theme-color-text-color: #ffffff;
552}
553.bg-color-white {
554 --f7-theme-color-bg-color: #ffffff;
555}
556.border-color-white {
557 --f7-theme-color-border-color: #ffffff;
558}
559.ripple-color-white,
560.ripple-white {
561 --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
562}
563.color-black {
564 --f7-theme-color: #000000;
565 --f7-theme-color-rgb: 0, 0, 0;
566 --f7-theme-color-shade: #000000;
567 --f7-theme-color-tint: #141414;
568}
569.text-color-black {
570 --f7-theme-color-text-color: #000000;
571}
572.bg-color-black {
573 --f7-theme-color-bg-color: #000000;
574}
575.border-color-black {
576 --f7-theme-color-border-color: #000000;
577}
578.ripple-color-black,
579.ripple-black {
580 --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
581}
582@font-face {
583 font-family: 'framework7-core-icons';
584 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAucABAAAAAAFdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAALgAAAABkAAAAciVvo20dERUYAAAmwAAAAIwAAACQAdwBXR1BPUwAAC1AAAAAuAAAANuAY7+xHU1VCAAAJ1AAAAXsAAANI9IT86E9TLzIAAAHcAAAASgAAAGBRKF+WY21hcAAAAnQAAACIAAABYt6F0cBjdnQgAAAC/AAAAAQAAAAEABEBRGdhc3AAAAmoAAAACAAAAAj//wADZ2x5ZgAAA4gAAAOZAAAITCn3I+5oZWFkAAABbAAAADAAAAA2FHn/62hoZWEAAAGcAAAAIAAAACQHggM3aG10eAAAAigAAABMAAABDCk9AApsb2NhAAADAAAAAIgAAACIN4I51G1heHAAAAG8AAAAHwAAACAAiQBLbmFtZQAAByQAAAFTAAAC1pgGDVZwb3N0AAAIeAAAAS4AAAH92CB3HXjaY2BkYGAA4uKM/yHx/DZfGbiZGEDgRu397TD6/89/vSxpTJ+BXA4GsDQAfeMOn3jaY2BkYGD6/K+XQY8l7f9PBgaWNAagCApwBgCRZgXAeNpjYGRgYHBmkGJgYQABJiBmZACJOTDogQQADRYA1QB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPabPjMUwNYwHwEoUGMQAQ7UMZAAAeNpj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wLxWSCWAGI3CGZKg/KBNBNIjTHEHKazED1MQD4AiKAPYnjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIB3gIAAioCPAJSAmQChAKUAqQC1gLsAv4DEAMiAzQDRANqA3wDlgOqA7wDzgP2BAwEJnja7VTPaxtHFH7fyNLGCFuWrF/tpZa82nVpcYhW0qZUrgWKezAtDcHuwZdYJeiUQ0yIe5N8LAGhHhyMRW6GHNqTZdOeKqu9KBc1oFMpPqlQh0JOPgXiVd/MaoOT/gclMLNv5pu3b7753pshQWEi2sc6+UijxUPQ1WJbm6AX2cOA/7TY9gke0qFPwn4Jt7UAXhXbkLgVtsKmFZ4Pf/dttYp158cwLI4Gbl3VeRS+JsfvsHfY/x4TlzAfo58IBdME90ncxAbfsBDFKEEUSQei8WwhZ2Tj0UDayPltM4SEbf6wViyuFR/fXV29u4ry1L3p6a3pLZSKa0tLa1+vSvjl9L0pCbocRr/C4k0iRJl0SMhIyzCNXCH7AeIwAfwVnIsHT06C8VRwGGoLMQzG54KdE4kOQy7n0Rm6eMLvwHscJaGZeTMwn5Yx4rGolkhLlswWpR1jR1tcXqlUHn6zoP20eePGZrmxY9Rj2kLlYaWy8tmiVt4slzcVLzKow+f1E81qHNLubG/rrRYKytCY+zlaaNAV3jWWkk4JDS3naVPv9/XmnznXjn1pCr/hjoxnIwHTbiKkO/2mvj62hNFL1uIj1oLfM7uwDKYfZUmlvFdh+MEn5zN3OvL8w9Az+IZSE567Ssg9otRzOdtMxrR7B3q9rv/M31rmzfU8U01o4+VMra4rHZ3GRFWcU1DmN2OyQ8LmjNqmmNPFTESfm4jMCFHqFXpe+9T53bnY24MPWfj29v7p2d6S/er0NexcSLf/aiYF4/fXRkvqZH3flQbXWUBPsxK+RIkCPElo19gbH+qnWzpjbOa/UJxpA30Y6u2nJaRi/nwqhr5joX9uWfuWpfbsIsm68rkzkLogOaLk8+fJrmvcvW7jc44j882Z1MwDJQ4MZTw+r304CGvj+tw+0Gs1XdVhQ1RxzkxmiXIznL+ZQBocy1Py2Dk+dmj0frXqtRLo6GhER9i/BNKbnPOQuQIlz86SXYwZezVVxX3OF0FTpBUtVJtN3Wv46tJE/uN0RUt0paY2a29N4u/+mdN1njSEdaFk82Kv8L00lPZKehvWszuRW78gqszbd0RWv8k3Q3/wABtstrdpfDc3RF8YNMmvhtTEkqLMp2cvVddg99Fg8Gh3t1aocavL78dYGAycPwZ4XLdrNbuuvm/Xj9ozlU+ZfVk3zlNcb6IhhzlVPz7JT1jMT9YGaxTOu9Uhuzys22HkcjuqEf0LOMqq8QAAAHjarZC9TgJBFIXP8GOihTFG+lsCYTfDhoRAZUJCQ2MstnazjDCB3cFhE0J8Fms7G2ufwtha+hzeGaawoLBgk5v59sy5M+cOgEu8QeDwtXEfWKCF18A1XOAzcB1S3AZuoCVeAjdxJb4Cn6FVu2anaJzz353vcizQxXPgGm7wEbiOB3wHbqArngI3QeI98BnrP5jAYIM9LDQWWKICceYcHV4TSPQxQo85xRoZ5uwquCwrM3ZnTE4v+AztdzExm73Vi2VF7bxDieyPepSus7kutKXZMrPrrNjoOTsfudm1Kuw4hMUKQ0R8tWPFpD2X2LLVZoXaGbsaRrmxKtK5KVk+6v1rmHqx8qvl+ZSfKua5CGOu/0c4+AesJb4OL4OpKaupsQtFSSxpTEeDsj6Iksi9xSmmTtlneV97H3EUFyb2qxsMqbJbbUqSsh9LKekEl/4CxNCFmAB42m2QB2/CMBCF30FbSBgJBcJof0333nsoColprEIcOWb8+ao1I4hIPcmS796973xGDvP4/QHhv9jXh5BDHjbqaKAJBy200UEXO9jFHg5wiCMc4wSnOMM5LnCJK1zjBre4wz0e8IgnPOMFr3jDOz7wSTnK0wZt0hYVqEgGmVSiMlWoShbZVKNtqlODmuRQi9rUoa6ZME/6octFUvNDNpYiciX/CtWsYizFYWCl2oD1lc4rnpRikmYlrfrfPTHVdzvTqSGVDLa8LjuRULzPfU9xXfEHImEzh7WA94RSYqiRhvQCLmZKIRFyPjCZ8JhJN2JTZabEUbyCB2ISWQEbMMVcKUZRsOaJJRsbS00vEivpLuZpfnm1iE7s7H/o1TJE3VFdGFO9OH+drv8BbS2SHgAAAAAAAf//AAJ42mNgZGBg4AFiGSBmAkJmBk0GRgYtBicgmwUsxgAADTQAzwB42nVSSVLCQBR9HSmJOIAhSkpJkEGwEOcZcVy4cO2SDSu1inJFuXDhUTyBJ/AcnsMjiO93TAKhUl1Jd7/3+v2hGwpABh5aUP3e4AUmUkQwHEIY1X9+7BGDvyOX0rMJZfwiDRuv6tPIGB2jawwwRXwDdzhEFmUOD3WuFjlXOTwUuSsijxssjPBlOFhGgQqf3cb8CLvKGEshl6GyjS7e8YEvfONHmWoNm4xRoG5dn3Jjng6xCnaRi2kiZ19xNaGIZ7bFOclD+D1mnuRwhrkYl9cVutifYALXy3/GworuYiPMdQezE4xkcMoOjXvVUNL30sQ9rlmhrd2r/LJaU6MqH/q2uUpSiH8HM2O8YPIqDlil3LLDvB1mldNrPwOLevG2wyhy4oK9qtI/S2102xF/xEg5ugsS4NN8N3V25QFPeMM5e1AnU6Kz+JT4l8pPYrjLucFYTfbG1tEs9ijwbOmKIlQqumW/PCLR2zjmWw8Qv+Y0z1hcuTpu5Q/+XTUsAHjaY2BkYGDgYpBjMGFgzEksyWPgYGABijD8/88AkmEszqxKhYp9YIADAMCOBtEAAHjaY2BgYGQAghsJmjlguvb+dhgNAEgzB6UAAAA=") format("woff");
585 font-weight: 400;
586 font-style: normal;
587}
588@font-face {
589 font-family: 'framework7-skeleton';
590 src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAYQAA0AAAAAEcQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAF9AAAABkAAAAciVvoDU9TLzIAAAGcAAAASwAAAGBRtV1jY21hcAAAAfwAAAC8AAABamglddJjdnQgAAACuAAAAAQAAAAEABEBRGdhc3AAAAXsAAAACAAAAAj //wADZ2x5ZgAAA2wAAACUAAAJjHCzhiRoZWFkAAABMAAAAC4AAAA2ERr/HWhoZWEAAAFgAAAAGgAAACQC8ADFaG10eAAAAegAAAATAAAAtAMAABFsb2NhAAACvAAAAK4AAACuaNBmhG1heHAAAAF8AAAAHwAAACAAmgA5bmFtZQAABAAAAAFQAAACuLf6wytwb3N0AAAFUAAAAJkAAADOCKMIc3jaY2BkYGAA4lUx8ibx/DZfGbiZGEDgRu39AAT9/wAjA+MBIJeDASwNACBICpsAAHjaY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB42mNgZGBgCGPgYGBiAAEQycgAEnNg0AMJAAANJwDUAHjaY2BhZGCcwMDKwMDow5jGwMDgDqW/MkgytDAwMDGwcjLAACMDEghIc01haGBQYKhlPPD/AIMe4wEGB5gaxgNAHgNQjhEA6dgLvQB42mNkYBBkAAJGKB4KAAAOfQAVAHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMSgxWDNEMsQz1D7/z9QXIFBjUGHwRHIT/z////j/w/+3/9/6//N/zeg5iABRjYGuCAjE5BgQlcAdAILK5DBxs7BycXAzcPLxy8gKCQsIiomLiEpBVYjLSMrJ6+gqKSsoqqmrqGppa2jq6dvYGhkbGJqZs5gwWBpZW1ja2fv4Ojk7OLq5u7h6eXt4+vnHxAYFBwSyjDgAABJLiG7ABEBRAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C8gMAAw4DHAMqAzgDRgNUA2IDcAN+A4wDmgOoA7YDxAPSA+AD7gP8BAoEGAQmBDQEQgRQBF4EbAR6BIgEnASqBLgExgAAeNpjYGIQZGBgmMkYysDMwM6gt5GRQd9mEzsLw1ujjWysd2w2MTMBmQwbmUHCrCDhTexsjH9sNjGCxI0FjQXVjQWVBTvK09IYQ/+tFmQ0BprGyMDw/wAjA+MBoJkMooKKgowMDkwM/xgYRuVwyjEhybFDZBXBKv4zQFVBVI6G36jcqNyo3GiZMSo3Kjes8hQAx51w5njapZC9agJBFIXP+EfSBMEXmEoU3GVcBNFWsLEJKbYKhEUnOrjryrggkgfIQ6RMnzZVHiBNijxM6pydHUiRFAEXLvebc8+duXcBXOEFAtXXw41ngQ6ePddwgXfPdYRCeW6gIx49N9EWb55b1L/oFI1Lnq5dV8kCXTx4rqGNV8913OLTcwNdcee5CSmePLeof2CGHHucYGGwxgYFJGdeos8cQWGICQbkGCkSrOjKGJbKgu6EVOoZ7zCuilm+P1mz3hSyt+zLSA0nAxmnycpkxsrFJrFpku3Nis57NpetGkcOYbHFGAEOzJqXao6SY0ebTTJ9zO12HBy2OtVFTvGX66c0d0LhsuVO2m0ScheJKeN/z1beESuRi+pPYJ7vinlu11pGoZJT+cdwVEdBFJSbn7djzLql1/iBlBsidLlcBrG2B8MHlRqGSil51nPfEi6AO3jaXc5ZM4IBAEbhp9RF1FhCRbmyVNYskSXG0CaEQvaf2j/LN112bt6Zc/HOETZiOJAJJmSc15ENmxARFTNpSlzCtBmz5iTNW7AoJR08LFmWlbNi1Zp1G/IKijZt2bZj156SfQcOHSk7dqLi1JlzF6ouXbl241ZNXUNTy522ew8edTx59qKrF3S9edf34dOXbz9+/f0DgycTFgAAAAAAAAH//wACeNpjYGBgZACCGwmaOWC69n4AjAYARC0G1wAAAA==") format("woff");
591 font-weight: 300, 400, 500, 600, 700;
592 font-style: normal, italic;
593}
594html {
595 direction: rtl;
596}
597html,
598body,
599.framework7-root {
600 position: relative;
601 height: 100%;
602 width: 100%;
603 overflow-x: hidden;
604}
605body {
606 margin: 0;
607 padding: 0;
608 width: 100%;
609 background: #fff;
610 overflow: hidden;
611 -webkit-text-size-adjust: 100%;
612 -webkit-font-smoothing: antialiased;
613 font-family: var(--f7-font-family);
614 font-size: var(--f7-font-size);
615 line-height: var(--f7-line-height);
616 color: var(--f7-text-color);
617}
618.theme-dark {
619 color: var(--f7-text-color);
620}
621.framework7-root {
622 overflow: hidden;
623 box-sizing: border-box;
624}
625.framework7-initializing *,
626.framework7-initializing *:before,
627.framework7-initializing *:after {
628 transition-duration: 0ms !important;
629}
630.device-ios,
631.device-android {
632 cursor: pointer;
633}
634.device-ios {
635 touch-action: manipulation;
636}
637@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
638 html,
639 body,
640 .framework7-root {
641 height: 671px;
642 }
643}
644@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
645 html,
646 body,
647 .framework7-root {
648 height: 672px;
649 }
650}
651* {
652 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
653 -webkit-touch-callout: none;
654}
655a,
656input,
657textarea,
658select {
659 outline: 0;
660}
661a {
662 cursor: pointer;
663 text-decoration: none;
664 color: var(--f7-theme-color);
665}
666p {
667 margin: 1em 0;
668}
669.disabled {
670 opacity: 0.55 !important;
671 pointer-events: none !important;
672}
673html.device-full-viewport,
674html.device-full-viewport body {
675 height: 100vh;
676}
677.ios .md-only,
678.ios .if-md {
679 display: none !important;
680}
681@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
682 .ios,
683 .ios body,
684 .ios .framework7-root {
685 height: 671px;
686 }
687}
688@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
689 .ios,
690 .ios body,
691 .ios .framework7-root {
692 height: 672px;
693 }
694}
695.md .ios-only,
696.md .if-ios {
697 display: none !important;
698}
699/* === Statusbar === */
700:root {
701 --f7-statusbar-height: 0px;
702 --f7-statusbar-bg-color: var(--f7-bars-bg-color);
703}
704.device-ios {
705 --f7-statusbar-height: var(--f7-safe-area-top, 20px);
706}
707.device-android {
708 --f7-statusbar-height: var(--f7-safe-area-top, 24px);
709}
710.with-statusbar.ios:not(.device-ios):not(.device-android) {
711 --f7-statusbar-height: 20px;
712}
713.with-statusbar.md:not(.device-ios):not(.device-android) {
714 --f7-statusbar-height: 24px;
715}
716@supports not (top: env(safe-area-inset-top)) {
717 .with-statusbar.device-ios {
718 --f7-statusbar-height: 20px;
719 }
720}
721@supports not (top: env(safe-area-inset-top)) {
722 .with-statusbar.device-android {
723 --f7-statusbar-height: 24px;
724 }
725}
726.statusbar {
727 position: absolute;
728 left: 0;
729 top: 0;
730 width: 100%;
731 z-index: 10000;
732 box-sizing: border-box;
733 display: block;
734 height: var(--f7-statusbar-height);
735}
736.framework7-root {
737 padding-top: var(--f7-statusbar-height);
738}
739.ios .statusbar {
740 background: var(--f7-statusbar-bg-color, var(--f7-bars-bg-color));
741}
742.md .statusbar {
743 background: var(--f7-statusbar-bg-color, var(--f7-theme-color-shade));
744}
745/* === Views === */
746.views,
747.view {
748 position: relative;
749 height: 100%;
750 z-index: 5000;
751 overflow: hidden;
752 box-sizing: border-box;
753}
754/* === Pages === */
755:root {
756 --f7-page-master-width: 320px;
757 --f7-page-master-border-color: rgba(0, 0, 0, 0.1);
758 --f7-page-master-border-width: 1px;
759}
760.ios {
761 --f7-page-bg-color: #efeff4;
762 --f7-page-transition-duration: 400ms;
763 --f7-page-swipeback-transition-duration: 400ms;
764}
765.md {
766 --f7-page-bg-color: #fff;
767 --f7-page-transition-duration: 250ms;
768 --f7-page-swipeback-transition-duration: 400ms;
769}
770.theme-dark {
771 --f7-page-bg-color: #171717;
772 --f7-page-master-border-color: rgba(255, 255, 255, 0.1);
773}
774.pages {
775 position: relative;
776 width: 100%;
777 height: 100%;
778 overflow: hidden;
779}
780.page {
781 box-sizing: border-box;
782 position: absolute;
783 left: 0;
784 top: 0;
785 width: 100%;
786 height: 100%;
787 transform: translate3d(0, 0, 0);
788 background-color: var(--f7-page-bg-color);
789}
790.page.stacked {
791 display: none;
792}
793.page-with-navbar-large-collapsed {
794 --f7-navbar-large-collapse-progress: 1;
795}
796.page-previous {
797 pointer-events: none;
798}
799.page-content {
800 will-change: scroll-position;
801 overflow: auto;
802 -webkit-overflow-scrolling: touch;
803 box-sizing: border-box;
804 height: 100%;
805 position: relative;
806 z-index: 1;
807}
808.page-transitioning,
809.page-transitioning .page-shadow-effect,
810.page-transitioning .page-opacity-effect {
811 transition-duration: var(--f7-page-transition-duration);
812}
813.page-transitioning-swipeback,
814.page-transitioning-swipeback .page-shadow-effect,
815.page-transitioning-swipeback .page-opacity-effect {
816 transition-duration: var(--f7-page-swipeback-transition-duration);
817}
818.router-transition-forward .page-next,
819.router-transition-backward .page-next,
820.router-transition-forward .page-current,
821.router-transition-backward .page-current,
822.router-transition-forward .page-previous:not(.stacked),
823.router-transition-backward .page-previous:not(.stacked) {
824 pointer-events: none;
825}
826.page-shadow-effect {
827 position: absolute;
828 top: 0;
829 width: 16px;
830 bottom: 0;
831 z-index: -1;
832 content: '';
833 opacity: 0;
834 left: 100%;
835 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
836}
837.page-opacity-effect {
838 position: absolute;
839 left: 0;
840 top: 0;
841 background: rgba(0, 0, 0, 0.1);
842 width: 100%;
843 bottom: 0;
844 content: '';
845 opacity: 0;
846 z-index: 10000;
847}
848.ios .page-previous {
849 transform: translate3d(20%, 0, 0);
850}
851.ios .page-next {
852 transform: translate3d(-100%, 0, 0);
853}
854.ios .page-previous .page-opacity-effect {
855 opacity: 1;
856}
857.ios .page-previous:after {
858 opacity: 1;
859}
860.ios .page-current .page-shadow-effect {
861 opacity: 1;
862}
863.ios .router-transition-forward .page-next,
864.ios .router-transition-forward .page-current {
865 will-change: transform;
866}
867.ios .router-transition-forward .page-next {
868 animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
869}
870.ios .router-transition-forward .page-next:before {
871 position: absolute;
872 top: 0;
873 width: 16px;
874 bottom: 0;
875 z-index: -1;
876 content: '';
877 opacity: 0;
878 left: 100%;
879 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
880 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
881}
882.ios .router-transition-forward .page-current {
883 animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
884}
885.ios .router-transition-forward .page-current:after {
886 position: absolute;
887 left: 0;
888 top: 0;
889 background: rgba(0, 0, 0, 0.1);
890 width: 100%;
891 bottom: 0;
892 content: '';
893 opacity: 0;
894 z-index: 10000;
895 animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
896}
897.ios .router-transition-backward .page-previous,
898.ios .router-transition-backward .page-current {
899 will-change: transform;
900}
901.ios .router-transition-backward .page-previous {
902 animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
903}
904.ios .router-transition-backward .page-previous:after {
905 position: absolute;
906 left: 0;
907 top: 0;
908 background: rgba(0, 0, 0, 0.1);
909 width: 100%;
910 bottom: 0;
911 content: '';
912 opacity: 0;
913 z-index: 10000;
914 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
915}
916.ios .router-transition-backward .page-current {
917 animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
918}
919.ios .router-transition-backward .page-current:before {
920 position: absolute;
921 top: 0;
922 width: 16px;
923 bottom: 0;
924 z-index: -1;
925 content: '';
926 opacity: 0;
927 left: 100%;
928 background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
929 animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
930}
931.ios .router-dynamic-navbar-inside .page-shadow-effect,
932.ios .router-dynamic-navbar-inside .page-opacity-effect {
933 top: var(--f7-navbar-height);
934}
935.ios .router-dynamic-navbar-inside .page-next:before,
936.ios .router-dynamic-navbar-inside .page-current:after,
937.ios .router-dynamic-navbar-inside .page-current:before,
938.ios .router-dynamic-navbar-inside .page-previous:after {
939 top: var(--f7-navbar-height);
940}
941@keyframes ios-page-next-to-current {
942 from {
943 transform: translate3d(-100%, 0, 0);
944 }
945 to {
946 transform: translate3d(0%, 0, 0);
947 }
948}
949@keyframes ios-page-previous-to-current {
950 from {
951 transform: translate3d(20%, 0, 0);
952 }
953 to {
954 transform: translate3d(0%, 0, 0);
955 }
956}
957@keyframes ios-page-current-to-previous {
958 from {
959 transform: translate3d(0, 0, 0);
960 }
961 to {
962 transform: translate3d(20%, 0, 0);
963 }
964}
965@keyframes ios-page-current-to-next {
966 from {
967 transform: translate3d(0, 0, 0);
968 }
969 to {
970 transform: translate3d(-100%, 0, 0);
971 }
972}
973@keyframes ios-page-element-fade-in {
974 from {
975 opacity: 0;
976 }
977 to {
978 opacity: 1;
979 }
980}
981@keyframes ios-page-element-fade-out {
982 from {
983 opacity: 1;
984 }
985 to {
986 opacity: 0;
987 }
988}
989.md .page-next {
990 transform: translate3d(0, 56px, 0);
991 opacity: 0;
992 pointer-events: none;
993}
994.md .page-next.page-next-on-right {
995 transform: translate3d(-100%, 0, 0);
996}
997.md .router-transition-forward .page-next {
998 will-change: transform, opacity;
999 animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
1000}
1001.md .router-transition-forward .page-current {
1002 animation: none;
1003}
1004.md .router-transition-backward .page-current {
1005 will-change: transform, opacity;
1006 animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
1007}
1008.md .router-transition-backward .page-previous {
1009 animation: none;
1010}
1011@keyframes md-page-next-to-current {
1012 from {
1013 transform: translate3d(0, 56px, 0);
1014 opacity: 0;
1015 }
1016 to {
1017 transform: translate3d(0, 0px, 0);
1018 opacity: 1;
1019 }
1020}
1021@keyframes md-page-current-to-next {
1022 from {
1023 transform: translate3d(0, 0, 0);
1024 opacity: 1;
1025 }
1026 to {
1027 transform: translate3d(0, 56px, 0);
1028 opacity: 0;
1029 }
1030}
1031.view:not(.view-master-detail) .page-master-stacked {
1032 display: none;
1033}
1034.view:not(.view-master-detail) .navbar-master-stacked {
1035 display: none;
1036}
1037.view-master-detail .page-master,
1038.view-master-detail .navbar-master {
1039 width: var(--f7-page-master-width);
1040 left: auto;
1041 right: 0;
1042 --f7-safe-area-left: 0px;
1043 --f7-safe-area-outer-left: 0px;
1044 border-left: var(--f7-page-master-border-width) solid var(--f7-page-master-border-color);
1045}
1046.view-master-detail .page-master-detail,
1047.view-master-detail .navbar-master-detail {
1048 width: calc(100% - var(--f7-page-master-width));
1049 --f7-safe-area-right: 0px;
1050 --f7-safe-area-outer-right: 0px;
1051 right: var(--f7-page-master-width);
1052}
1053.view-master-detail .page-master {
1054 z-index: 1;
1055 transform: none;
1056 pointer-events: auto;
1057}
1058.view-master-detail .page-master:before,
1059.view-master-detail .page-master:after {
1060 display: none;
1061}
1062.view-master-detail.router-transition .page-master {
1063 animation: none;
1064}
1065/* === Link === */
1066:root {
1067 --f7-link-highlight-black: rgba(0, 0, 0, 0.1);
1068 --f7-link-highlight-white: rgba(255, 255, 255, 0.15);
1069 --f7-link-highlight-color: var(--f7-link-highlight-black);
1070}
1071.theme-dark {
1072 --f7-link-highlight-color: var(--f7-link-highlight-white);
1073}
1074.link,
1075.tab-link {
1076 display: inline-flex;
1077 align-items: center;
1078 align-content: center;
1079 justify-content: center;
1080 position: relative;
1081 box-sizing: border-box;
1082 transform: translate3d(0, 0, 0);
1083 z-index: 1;
1084}
1085.link i + span,
1086.link i + i,
1087.link span + i,
1088.link span + span {
1089 margin-right: 4px;
1090}
1091.ios .link {
1092 transition: opacity 300ms;
1093}
1094.ios .link.active-state {
1095 opacity: 0.3;
1096 transition-duration: 0ms;
1097}
1098/* === Navbar === */
1099:root {
1100 /*
1101 --f7-navbar-bg-color: var(--f7-bars-bg-color);
1102 --f7-navbar-bg-image: var(--f7-bars-bg-image);
1103 --f7-navbar-border-color: var(--f7-bars-border-color);
1104 --f7-navbar-link-color: var(--f7-bars-link-color);
1105 --f7-navbar-text-color: var(--f7-bars-text-color);
1106 */
1107 --f7-navbar-hide-show-transition-duration: 400ms;
1108 --f7-navbar-title-line-height: 1.2;
1109}
1110.ios {
1111 --f7-navbar-height: 44px;
1112 --f7-navbar-tablet-height: 44px;
1113 --f7-navbar-font-size: 17px;
1114 --f7-navbar-inner-padding-left: 8px;
1115 --f7-navbar-inner-padding-right: 8px;
1116 --f7-navbar-title-font-weight: 600;
1117 --f7-navbar-title-margin-left: 0;
1118 --f7-navbar-title-margin-right: 0;
1119 --f7-navbar-title-text-align: center;
1120 --f7-navbar-subtitle-text-color: #6d6d72;
1121 --f7-navbar-subtitle-font-size: 10px;
1122 --f7-navbar-subtitle-line-height: 1;
1123 --f7-navbar-subtitle-text-align: inherit;
1124 --f7-navbar-shadow-image: none;
1125 --f7-navbar-large-title-height: 52px;
1126 --f7-navbar-large-title-font-size: 34px;
1127 --f7-navbar-large-title-font-weight: 700;
1128 --f7-navbar-large-title-line-height: 1.2;
1129 --f7-navbar-large-title-letter-spacing: -0.03em;
1130 --f7-navbar-large-title-padding-left: 15px;
1131 --f7-navbar-large-title-padding-right: 15px;
1132 --f7-navbar-large-title-text-color: inherit;
1133}
1134.ios .theme-dark,
1135.ios.theme-dark {
1136 --f7-navbar-subtitle-text-color: #8e8e93;
1137}
1138.md {
1139 --f7-navbar-height: 56px;
1140 --f7-navbar-tablet-height: 64px;
1141 --f7-navbar-font-size: 20px;
1142 --f7-navbar-inner-padding-left: 0px;
1143 --f7-navbar-inner-padding-right: 0px;
1144 --f7-navbar-title-font-weight: 500;
1145 --f7-navbar-title-margin-left: 16px;
1146 --f7-navbar-title-margin-right: 16px;
1147 --f7-navbar-title-text-align: left;
1148 --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1149 --f7-navbar-subtitle-font-size: 14px;
1150 --f7-navbar-subtitle-line-height: 1.2;
1151 --f7-navbar-subtitle-text-align: inherit;
1152 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1153 --f7-navbar-large-title-font-size: 34px;
1154 --f7-navbar-large-title-height: 56px;
1155 --f7-navbar-large-title-font-weight: 500;
1156 --f7-navbar-large-title-line-height: 1.2;
1157 --f7-navbar-large-title-letter-spacing: 0;
1158 --f7-navbar-large-title-padding-left: 16px;
1159 --f7-navbar-large-title-padding-right: 16px;
1160 --f7-navbar-large-title-text-color: inherit;
1161}
1162.md .theme-dark,
1163.md.theme-dark {
1164 --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1165}
1166.navbar {
1167 --f7-navbar-large-collapse-progress: 0;
1168 position: relative;
1169 left: 0;
1170 top: 0;
1171 width: 100%;
1172 z-index: 500;
1173 -webkit-backface-visibility: hidden;
1174 backface-visibility: hidden;
1175 box-sizing: border-box;
1176 margin: 0;
1177 transform: translate3d(0, 0, 0);
1178 height: var(--f7-navbar-height);
1179 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1180 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1181 color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1182 font-size: var(--f7-navbar-font-size);
1183}
1184.navbar .material-icons {
1185 width: 24px;
1186}
1187.navbar .f7-icons {
1188 width: 28px;
1189}
1190.navbar b {
1191 font-weight: 500;
1192}
1193.navbar a {
1194 color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
1195}
1196.navbar a.link {
1197 display: flex;
1198 justify-content: flex-start;
1199 line-height: var(--f7-navbar-height);
1200 height: var(--f7-navbar-height);
1201}
1202.navbar .title,
1203.navbar .left,
1204.navbar .right {
1205 position: relative;
1206 z-index: 10;
1207}
1208.navbar .title {
1209 text-align: center;
1210 position: relative;
1211 overflow: hidden;
1212 text-overflow: ellipsis;
1213 white-space: nowrap;
1214 flex-shrink: 10;
1215 font-weight: var(--f7-navbar-title-font-weight);
1216 display: inline-block;
1217 line-height: var(--f7-navbar-title-line-height);
1218 text-align: var(--f7-navbar-title-text-align);
1219 margin-right: var(--f7-navbar-title-margin-left);
1220 margin-left: var(--f7-navbar-title-margin-left);
1221}
1222.navbar .subtitle {
1223 display: block;
1224 color: var(--f7-navbar-subtitle-text-color);
1225 font-weight: normal;
1226 font-size: var(--f7-navbar-subtitle-font-size);
1227 line-height: var(--f7-navbar-subtitle-line-height);
1228 text-align: var(--f7-navbar-subtitle-text-align);
1229}
1230.navbar .left,
1231.navbar .right {
1232 flex-shrink: 0;
1233 display: flex;
1234 justify-content: flex-start;
1235 align-items: center;
1236 transform: translate3d(0, 0, 0);
1237}
1238.navbar .right:first-child {
1239 position: absolute;
1240 height: 100%;
1241}
1242.navbar.no-hairline:after,
1243.navbar.no-border:after {
1244 display: none !important;
1245}
1246.navbar.no-hairline .title-large:after,
1247.navbar.no-border .title-large:after {
1248 display: none !important;
1249}
1250.navbar.no-shadow:before {
1251 display: none !important;
1252}
1253.navbar.navbar-hidden:before {
1254 opacity: 0 !important;
1255}
1256.navbar:after,
1257.navbar:before {
1258 -webkit-backface-visibility: hidden;
1259 backface-visibility: hidden;
1260}
1261.navbar:after {
1262 content: '';
1263 position: absolute;
1264 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1265 display: block;
1266 z-index: 15;
1267 top: auto;
1268 right: auto;
1269 bottom: 0;
1270 left: 0;
1271 height: 1px;
1272 width: 100%;
1273 transform-origin: 50% 100%;
1274 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1275}
1276.navbar:before {
1277 content: '';
1278 position: absolute;
1279 right: 0;
1280 width: 100%;
1281 top: 100%;
1282 bottom: auto;
1283 height: 8px;
1284 pointer-events: none;
1285 background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
1286}
1287.navbar:after {
1288 z-index: 1;
1289}
1290@media (min-width: 768px) {
1291 :root {
1292 --f7-navbar-height: var(--f7-navbar-tablet-height);
1293 }
1294}
1295.navbar-transitioning,
1296.navbar-transitioning:before,
1297.navbar-transitioning .title,
1298.navbar-transitioning .title-large,
1299.navbar-transitioning .title-large-inner,
1300.navbar-transitioning .title-large-text,
1301.navbar-transitioning .subnavbar {
1302 transition-duration: var(--f7-navbar-hide-show-transition-duration);
1303}
1304.navbar-page-transitioning {
1305 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1306}
1307.navbar-page-transitioning .title-large-text,
1308.navbar-page-transitioning .title-large-inner {
1309 transition-duration: var(--f7-page-swipeback-transition-duration) !important;
1310}
1311.navbar-hidden {
1312 transform: translate3d(0, -100%, 0);
1313}
1314.navbar-large-hidden {
1315 --f7-navbar-large-collapse-progress: 1;
1316}
1317.navbar-inner {
1318 position: absolute;
1319 left: 0;
1320 top: 0;
1321 width: 100%;
1322 height: var(--f7-navbar-height);
1323 display: flex;
1324 align-items: center;
1325 box-sizing: border-box;
1326 padding: 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-left));
1327}
1328.navbar-inner.stacked {
1329 display: none;
1330}
1331.views > .navbar,
1332.view > .navbar,
1333.page > .navbar {
1334 position: absolute;
1335}
1336.navbar-large:before {
1337 transform: translateY(calc((1 - var(--f7-navbar-large-collapse-progress)) * var(--f7-navbar-large-title-height)));
1338}
1339.navbar-inner-large > .title {
1340 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress));
1341}
1342.navbar-large-collapsed,
1343.navbar-inner-large-collapsed {
1344 --f7-navbar-large-collapse-progress: 1;
1345}
1346.navbar .title-large {
1347 box-sizing: border-box;
1348 position: absolute;
1349 left: 0;
1350 right: 0;
1351 top: 100%;
1352 display: flex;
1353 align-items: center;
1354 white-space: nowrap;
1355 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1356 will-change: transform, opacity;
1357 transition-property: transform;
1358 overflow: hidden;
1359 background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1360 background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
1361 height: calc(var(--f7-navbar-large-title-height) + 1px);
1362 z-index: 5;
1363 margin-top: -1px;
1364 transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1365}
1366.navbar .title-large:after {
1367 content: '';
1368 position: absolute;
1369 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
1370 display: block;
1371 z-index: 15;
1372 top: auto;
1373 right: auto;
1374 bottom: 0;
1375 left: 0;
1376 height: 1px;
1377 width: 100%;
1378 transform-origin: 50% 100%;
1379 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1380}
1381.title-large-text,
1382.title-large-inner .title {
1383 text-overflow: ellipsis;
1384 white-space: nowrap;
1385 color: var(--f7-navbar-large-title-text-color);
1386 letter-spacing: var(--f7-navbar-large-title-letter-spacing);
1387 font-size: var(--f7-navbar-large-title-font-size);
1388 font-weight: var(--f7-navbar-large-title-font-weight);
1389 line-height: var(--f7-navbar-large-title-line-height);
1390 padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
1391 padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
1392 transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
1393}
1394.title-large-text,
1395.title-large-inner {
1396 box-sizing: border-box;
1397 overflow: hidden;
1398 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1399 transition-property: transform, opacity;
1400 width: 100%;
1401}
1402.navbar-no-title-large-transition .title-large,
1403.navbar-no-title-large-transition .title-large-text,
1404.navbar-no-title-large-transition .title-large-inner {
1405 transition-duration: 0ms;
1406}
1407.navbar ~ * .page:not(.no-navbar) .page-content,
1408.navbar ~ .page:not(.no-navbar) .page-content,
1409.navbar ~ .page-content,
1410.navbar ~ :not(.page) .page-content {
1411 padding-top: var(--f7-navbar-height);
1412}
1413.navbar ~ * .page:not(.no-navbar).page-with-navbar-large .page-content,
1414.navbar ~ .page:not(.no-navbar).page-with-navbar-large .page-content,
1415.page-with-navbar-large .navbar ~ .page-content,
1416.page-with-navbar-large .navbar ~ * .page-content {
1417 padding-top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
1418}
1419.ios {
1420 --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
1421 --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
1422}
1423.ios .navbar a.icon-only {
1424 width: 44px;
1425 margin: 0;
1426 justify-content: center;
1427}
1428.ios .navbar .left a + a,
1429.ios .navbar .right a + a {
1430 margin-right: 15px;
1431}
1432.ios .navbar b {
1433 font-weight: 600;
1434}
1435.ios .navbar .left {
1436 margin-left: 10px;
1437}
1438.ios .navbar .right {
1439 margin-right: 10px;
1440}
1441.ios .navbar .right:first-child {
1442 left: calc(8px + var(--f7-safe-area-left));
1443}
1444.ios .navbar-inner {
1445 justify-content: space-between;
1446}
1447.ios .navbar-inner-left-title {
1448 justify-content: flex-start;
1449}
1450.ios .navbar-inner-left-title .right {
1451 margin-right: auto;
1452}
1453.ios .navbar-inner-left-title .title {
1454 text-align: left;
1455 margin-left: 10px;
1456}
1457.ios .view-master-detail .navbar-previous:not(.navbar-master),
1458.ios .view:not(.view-master-detail) .navbar-previous {
1459 pointer-events: none;
1460}
1461.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
1462.ios .view:not(.view-master-detail) .navbar-previous .title-large {
1463 transform: translateY(-100%);
1464 opacity: 0;
1465 transition: 0ms;
1466}
1467.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
1468.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
1469 transform: scale(0.5);
1470 transition: 0ms;
1471}
1472.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-inner,
1473.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-inner {
1474 transform: translateX(-100%);
1475 opacity: 0;
1476 transition: 0ms;
1477}
1478.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
1479.ios .view:not(.view-master-detail) .navbar-previous .left,
1480.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
1481.ios .view:not(.view-master-detail) .navbar-previous .right,
1482.ios .view-master-detail .navbar-previous:not(.navbar-master) > .title,
1483.ios .view:not(.view-master-detail) .navbar-previous > .title,
1484.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
1485.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
1486.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
1487.ios .view:not(.view-master-detail) .navbar-previous .fading {
1488 opacity: 0;
1489}
1490.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding,
1491.ios .view:not(.view-master-detail) .navbar-previous .sliding {
1492 opacity: 0;
1493}
1494.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
1495.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
1496.ios .view-master-detail .navbar-previous:not(.navbar-master).sliding .subnavbar,
1497.ios .view:not(.view-master-detail) .navbar-previous.sliding .subnavbar {
1498 opacity: 1;
1499 transform: translate3d(-100%, 0, 0);
1500}
1501.ios .navbar-next {
1502 pointer-events: none;
1503}
1504.ios .navbar-next .title-large {
1505 transform: translateX(100%);
1506 transition: 0ms;
1507}
1508.ios .navbar-next .title-large .title-large-text,
1509.ios .navbar-next .title-large .title-large-inner {
1510 transition: 0ms;
1511}
1512.ios .navbar-next .left,
1513.ios .navbar-next .right,
1514.ios .navbar-next > .title,
1515.ios .navbar-next .subnavbar,
1516.ios .navbar-next .fading {
1517 opacity: 0;
1518}
1519.ios .navbar-next .sliding {
1520 opacity: 0;
1521}
1522.ios .navbar-next.sliding .left,
1523.ios .navbar-next.sliding .right,
1524.ios .navbar-next.sliding > .title,
1525.ios .navbar-next.sliding .subnavbar {
1526 opacity: 0;
1527}
1528.ios .navbar-next .subnavbar.sliding,
1529.ios .navbar-next.sliding .subnavbar {
1530 opacity: 1;
1531 transform: translate3d(100%, 0, 0);
1532}
1533.ios .router-dynamic-navbar-inside .navbar-next .title-large,
1534.ios .router-dynamic-navbar-inside .navbar-next .title-large-text,
1535.ios .router-dynamic-navbar-inside .navbar-next .title-large-inner {
1536 transform: none;
1537}
1538.ios .router-dynamic-navbar-inside .navbar-previous .title-large {
1539 opacity: 1;
1540 transform: translate3d(0px, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1541}
1542.ios .router-dynamic-navbar-inside .navbar-previous .title-large-text,
1543.ios .router-dynamic-navbar-inside .navbar-previous .title-large-inner {
1544 transform: translate3d(0, calc(var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
1545}
1546.ios .router-transition .navbar {
1547 transition-duration: var(--f7-page-transition-duration);
1548}
1549.ios .router-transition .title-large {
1550 transition: 0ms;
1551}
1552.ios .router-transition .navbar-current .left,
1553.ios .router-transition .navbar-current > .title,
1554.ios .router-transition .navbar-current .right,
1555.ios .router-transition .navbar-current .subnavbar {
1556 animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
1557}
1558.ios .router-transition .navbar-current .sliding,
1559.ios .router-transition .navbar-current .left.sliding .icon + span,
1560.ios .router-transition .navbar-current.sliding .left,
1561.ios .router-transition .navbar-current.sliding .left .icon + span,
1562.ios .router-transition .navbar-current.sliding > .title,
1563.ios .router-transition .navbar-current.sliding .right {
1564 transition-duration: var(--f7-page-transition-duration);
1565 opacity: 0 !important;
1566 animation: none;
1567}
1568.ios .router-transition .navbar-current.sliding .subnavbar,
1569.ios .router-transition .navbar-current .sliding.subnavbar {
1570 transition-duration: var(--f7-page-transition-duration);
1571 animation: none;
1572 opacity: 1;
1573}
1574.ios .router-transition-forward .navbar-next .left,
1575.ios .router-transition-backward .navbar-previous .left,
1576.ios .router-transition-forward .navbar-next > .title,
1577.ios .router-transition-backward .navbar-previous > .title,
1578.ios .router-transition-forward .navbar-next .right,
1579.ios .router-transition-backward .navbar-previous .right,
1580.ios .router-transition-forward .navbar-next .subnavbar,
1581.ios .router-transition-backward .navbar-previous .subnavbar {
1582 animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
1583}
1584.ios .router-transition-forward .navbar-next .sliding,
1585.ios .router-transition-backward .navbar-previous .sliding,
1586.ios .router-transition-forward .navbar-next .left.sliding .icon + span,
1587.ios .router-transition-backward .navbar-previous .left.sliding .icon + span,
1588.ios .router-transition-forward .navbar-next.sliding .left,
1589.ios .router-transition-backward .navbar-previous.sliding .left,
1590.ios .router-transition-forward .navbar-next.sliding .left .icon + span,
1591.ios .router-transition-backward .navbar-previous.sliding .left .icon + span,
1592.ios .router-transition-forward .navbar-next.sliding > .title,
1593.ios .router-transition-backward .navbar-previous.sliding > .title,
1594.ios .router-transition-forward .navbar-next.sliding .right,
1595.ios .router-transition-backward .navbar-previous.sliding .right,
1596.ios .router-transition-forward .navbar-next.sliding .subnavbar,
1597.ios .router-transition-backward .navbar-previous.sliding .subnavbar {
1598 transition-duration: var(--f7-page-transition-duration);
1599 animation: none;
1600 transform: translate3d(0, 0, 0) !important;
1601 opacity: 1 !important;
1602}
1603.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1604 overflow: visible;
1605}
1606.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1607 animation: ios-navbar-title-large-text-slide-up var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards;
1608}
1609.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1610 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1611}
1612.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
1613 animation: ios-navbar-title-large-text-fade-out var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-scale-out var(--f7-page-transition-duration) forwards;
1614}
1615.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large .title-large-inner {
1616 animation: ios-navbar-title-large-inner-current-to-previous var(--f7-page-transition-duration) forwards;
1617}
1618.ios .router-transition-forward:not(.router-dynamic-navbar-inside) .navbar-next.router-navbar-transition-from-large .left .back span {
1619 animation: ios-navbar-back-text-next-to-current var(--f7-page-transition-duration) forwards;
1620 transition: none;
1621 transform-origin: right center;
1622}
1623.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1624 overflow: visible;
1625}
1626.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1627.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1628 animation: ios-navbar-title-large-text-slide-left var(--f7-page-transition-duration) forwards;
1629}
1630.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1631 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1632}
1633.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text,
1634.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-inner {
1635 animation: ios-navbar-title-large-text-slide-left-top var(--f7-page-transition-duration) forwards;
1636}
1637.ios .router-transition-forward .navbar-next.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1638.ios .router-transition-forward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1639 animation: none;
1640 opacity: 0 !important;
1641 transition-duration: 0;
1642}
1643.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large,
1644.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large,
1645.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-text,
1646.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1647.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-next .title-large-inner,
1648.ios .router-transition-forward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1649 animation: none !important;
1650}
1651.ios .router-transition-backward:not(.router-dynamic-navbar-inside) .navbar-current.router-navbar-transition-to-large .left .back span {
1652 animation: ios-navbar-back-text-current-to-previous var(--f7-page-transition-duration) forwards;
1653 transition: none;
1654 transform-origin: right center;
1655}
1656.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1657 overflow: visible;
1658 transform: translateX(100%);
1659}
1660.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
1661.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-inner {
1662 animation: ios-navbar-title-large-text-slide-right var(--f7-page-transition-duration) forwards;
1663}
1664.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
1665 animation: ios-navbar-title-large-slide-up var(--f7-page-transition-duration) forwards;
1666}
1667.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text,
1668.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-inner {
1669 animation: ios-navbar-title-large-text-slide-right-bottom var(--f7-page-transition-duration) forwards;
1670}
1671.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1672 opacity: 0;
1673}
1674.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
1675 overflow: visible;
1676 opacity: 1;
1677 transform: translateY(0);
1678}
1679.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
1680 animation: ios-navbar-title-large-text-slide-down var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1681}
1682.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
1683 opacity: 1;
1684 animation: ios-navbar-title-large-slide-down var(--f7-page-transition-duration) forwards;
1685}
1686.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
1687 animation: ios-navbar-title-large-text-scale-in var(--f7-page-transition-duration) forwards, ios-navbar-title-large-text-fade-in var(--f7-page-transition-duration) forwards;
1688}
1689.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large .title-large-inner {
1690 animation: ios-navbar-title-large-inner-previous-to-current var(--f7-page-transition-duration) forwards;
1691}
1692.ios .router-transition-backward .navbar-current.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title,
1693.ios .router-transition-backward .navbar-previous.navbar-inner-large:not(.navbar-inner-large-collapsed) > .title {
1694 animation: none;
1695 opacity: 0 !important;
1696 transition-duration: 0;
1697}
1698.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large,
1699.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large,
1700.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-text,
1701.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-text,
1702.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-previous .title-large-inner,
1703.ios .router-transition-backward.router-dynamic-navbar-inside .navbar-current .title-large-inner {
1704 animation: none !important;
1705}
1706.view-master-detail .navbar-master.navbar-previous {
1707 pointer-events: auto;
1708}
1709.view-master-detail .navbar-master.navbar-previous .left,
1710.view-master-detail .navbar-master.navbar-previous:not(.navbar-inner-large) .title,
1711.view-master-detail .navbar-master.navbar-previous .right,
1712.view-master-detail .navbar-master.navbar-previous .subnavbar {
1713 opacity: 1;
1714}
1715.ios .view-master-detail.router-transition .navbar-master .left,
1716.ios .view-master-detail.router-transition .navbar-master .left .icon + span,
1717.ios .view-master-detail.router-transition .navbar-master:not(.navbar-inner-large) .title,
1718.ios .view-master-detail.router-transition .navbar-master .right,
1719.ios .view-master-detail.router-transition .navbar-master .subnavbar,
1720.ios .view-master-detail.router-transition .navbar-master .sliding,
1721.ios .view-master-detail.router-transition .navbar-master .fading {
1722 opacity: 1 !important;
1723 transition-duration: 0ms;
1724 transform: none !important;
1725 animation: none !important;
1726}
1727.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title {
1728 opacity: calc(-1 + 2 * var(--f7-navbar-large-collapse-progress)) !important;
1729 transition-duration: 0ms;
1730 transform: none !important;
1731 animation: none !important;
1732}
1733.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large,
1734.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-text,
1735.ios .view-master-detail.router-transition .navbar-master.navbar-inner-large .title-large-inner {
1736 transition-duration: 0ms;
1737 animation: none !important;
1738}
1739@keyframes ios-navbar-element-fade-in {
1740 from {
1741 opacity: 0;
1742 }
1743 to {
1744 opacity: 1;
1745 }
1746}
1747@keyframes ios-navbar-element-fade-out {
1748 from {
1749 opacity: 1;
1750 }
1751 to {
1752 opacity: 0;
1753 }
1754}
1755@keyframes ios-navbar-title-large-slide-up {
1756 0% {
1757 transform: translateY(0%);
1758 }
1759 100% {
1760 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1761 }
1762}
1763@keyframes ios-navbar-title-large-slide-down {
1764 0% {
1765 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
1766 }
1767 100% {
1768 transform: translateY(0%);
1769 }
1770}
1771@keyframes ios-navbar-title-large-text-slide-up {
1772 0% {
1773 transform: translateX(0px) translateY(0%) scale(1);
1774 }
1775 100% {
1776 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1777 }
1778}
1779@keyframes ios-navbar-title-large-text-slide-down {
1780 0% {
1781 transform: translateX(calc(var(--f7-navbarLeftTextOffset) - var(--f7-navbarTitleLargeOffset))) translateY(calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(0.5);
1782 }
1783 100% {
1784 transform: translateX(0px) translateY(0%) scale(1);
1785 }
1786}
1787@keyframes ios-navbar-title-large-text-slide-left {
1788 0% {
1789 transform: translateX(-200%) scale(1);
1790 }
1791 100% {
1792 transform: translateX(-100%) scale(1);
1793 }
1794}
1795@keyframes ios-navbar-title-large-text-slide-right {
1796 0% {
1797 transform: translateX(-100%) scale(1);
1798 }
1799 100% {
1800 transform: translateX(-200%) scale(1);
1801 }
1802}
1803@keyframes ios-navbar-title-large-text-slide-left-top {
1804 0% {
1805 transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1806 }
1807 100% {
1808 transform: translateX(0%) translateY(0%) scale(1);
1809 }
1810}
1811@keyframes ios-navbar-title-large-text-slide-right-bottom {
1812 0% {
1813 transform: translateX(0%) translateY(0%) scale(1);
1814 }
1815 100% {
1816 transform: translateX(-100%) translateY(var(--f7-navbar-large-title-height)) scale(1);
1817 }
1818}
1819@keyframes ios-navbar-title-large-text-fade-out {
1820 0% {
1821 opacity: 1;
1822 }
1823 80% {
1824 opacity: 0;
1825 }
1826 100% {
1827 opacity: 0;
1828 }
1829}
1830@keyframes ios-navbar-title-large-text-fade-in {
1831 0% {
1832 opacity: 0;
1833 }
1834 20% {
1835 opacity: 0;
1836 }
1837 100% {
1838 opacity: 1;
1839 }
1840}
1841@keyframes ios-navbar-title-large-text-scale-out {
1842 0% {
1843 transform: translateY(0%) scale(1);
1844 }
1845 100% {
1846 transform: translateY(0%) scale(0.5);
1847 }
1848}
1849@keyframes ios-navbar-title-large-text-scale-in {
1850 0% {
1851 transform: translateY(0%) scale(0.5);
1852 }
1853 100% {
1854 transform: translateY(0%) scale(1);
1855 }
1856}
1857@keyframes ios-navbar-back-text-current-to-previous {
1858 0% {
1859 opacity: 1;
1860 transform: translateY(0px) translateX(0px) scale(1);
1861 }
1862 80% {
1863 opacity: 0;
1864 }
1865 100% {
1866 opacity: 0;
1867 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1868 }
1869}
1870@keyframes ios-navbar-back-text-next-to-current {
1871 0% {
1872 opacity: 0;
1873 transform: translateX(calc(var(--f7-navbarTitleLargeOffset) - var(--f7-navbarLeftTextOffset))) translateY(calc((var(--f7-navbar-height) + var(--f7-navbar-large-title-height)) / 2)) scale(2);
1874 }
1875 20% {
1876 opacity: 0;
1877 }
1878 100% {
1879 opacity: 1;
1880 transform: translateX(0px) translateY(0px) scale(1);
1881 }
1882}
1883@keyframes ios-navbar-title-large-inner-current-to-previous {
1884 0% {
1885 transform: translateX(0%);
1886 opacity: 1;
1887 }
1888 100% {
1889 transform: translateX(100%);
1890 opacity: 0;
1891 }
1892}
1893@keyframes ios-navbar-title-large-inner-previous-to-current {
1894 0% {
1895 transform: translateX(100%);
1896 opacity: 0;
1897 }
1898 100% {
1899 transform: translateX(0%);
1900 opacity: 1;
1901 }
1902}
1903.md .navbar a.link {
1904 padding: 0 16px;
1905 min-width: 48px;
1906}
1907.md .navbar a.link:before {
1908 content: '';
1909 width: 152%;
1910 height: 152%;
1911 position: absolute;
1912 left: -26%;
1913 top: -26%;
1914 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
1915 background-repeat: no-repeat;
1916 background-position: center;
1917 background-size: 100% 100%;
1918 opacity: 0;
1919 pointer-events: none;
1920 transition-duration: 600ms;
1921}
1922.md .navbar a.link.active-state:before {
1923 opacity: 1;
1924 transition-duration: 150ms;
1925}
1926.md .navbar a.icon-only {
1927 min-width: 0;
1928 flex-shrink: 0;
1929 width: 56px;
1930}
1931.md .navbar .right {
1932 margin-right: auto;
1933}
1934.md .navbar .right:first-child {
1935 left: var(--f7-safe-area-left);
1936}
1937.md .navbar-inner {
1938 justify-content: flex-start;
1939 overflow: hidden;
1940}
1941.md .navbar-inner-large:not(.navbar-inner-large-collapsed) {
1942 overflow: visible;
1943}
1944.md .page.page-with-subnavbar .navbar-inner {
1945 overflow: visible;
1946}
1947.md .navbar-inner-centered-title {
1948 justify-content: space-between;
1949}
1950.md .navbar-inner-centered-title .right {
1951 margin-right: 0;
1952}
1953.md .navbar-inner-centered-title .title {
1954 text-align: center;
1955}
1956/* === Toolbar === */
1957:root {
1958 /*
1959 --f7-toolbar-bg-color: var(--f7-bars-bg-color);
1960 --f7-toolbar-bg-image: var(--f7-bars-bg-image);
1961 --f7-toolbar-border-color: var(--f7-bars-border-color);
1962 --f7-toolbar-link-color: var(--f7-bars-link-color);
1963 --f7-toolbar-text-color: var(--f7-bars-text-color);
1964 */
1965 --f7-toolbar-hide-show-transition-duration: 400ms;
1966}
1967.ios {
1968 --f7-toolbar-height: 44px;
1969 --f7-toolbar-font-size: 17px;
1970 --f7-tabbar-labels-height: 50px;
1971 --f7-tabbar-labels-tablet-height: 56px;
1972 --f7-tabbar-link-inactive-color: #929292;
1973 /*
1974 --f7-tabbar-link-active-color: var(--f7-theme-color);
1975 */
1976 --f7-toolbar-top-shadow-image: none;
1977 --f7-toolbar-bottom-shadow-image: none;
1978 --f7-tabbar-icon-size: 28px;
1979 --f7-tabbar-link-text-transform: none;
1980 --f7-tabbar-link-font-weight: 400;
1981 --f7-tabbar-link-letter-spacing: 0;
1982 --f7-tabbar-label-font-size: 10px;
1983 --f7-tabbar-label-tablet-font-size: 14px;
1984 --f7-tabbar-label-text-transform: none;
1985 --f7-tabbar-label-font-weight: 400;
1986 --f7-tabbar-label-letter-spacing: 0.01;
1987}
1988.md {
1989 --f7-toolbar-height: 48px;
1990 --f7-toolbar-font-size: 14px;
1991 --f7-tabbar-labels-height: 56px;
1992 --f7-tabbar-labels-tablet-height: 56px;
1993 --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
1994 /*
1995 --f7-tabbar-link-active-color: var(--f7-theme-color);
1996 --f7-tabbar-link-active-border-color: var(--f7-theme-color);
1997 */
1998 --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
1999 --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2000 --f7-tabbar-icon-size: 24px;
2001 --f7-tabbar-link-text-transform: uppercase;
2002 --f7-tabbar-link-font-weight: 500;
2003 --f7-tabbar-link-letter-spacing: 0.03em;
2004 --f7-tabbar-label-font-size: 14px;
2005 --f7-tabbar-label-tablet-font-size: 14px;
2006 --f7-tabbar-label-text-transform: none;
2007 --f7-tabbar-label-font-weight: 400;
2008 --f7-tabbar-label-letter-spacing: 0;
2009}
2010.md .theme-dark,
2011.md.theme-dark {
2012 --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2013}
2014.toolbar {
2015 width: 100%;
2016 position: relative;
2017 margin: 0;
2018 transform: translate3d(0, 0, 0);
2019 -webkit-backface-visibility: hidden;
2020 backface-visibility: hidden;
2021 z-index: 500;
2022 box-sizing: border-box;
2023 left: 0;
2024 height: var(--f7-toolbar-height);
2025 background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2026 background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2027 color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2028 font-size: var(--f7-toolbar-font-size);
2029}
2030.toolbar b {
2031 font-weight: 600;
2032}
2033.toolbar a {
2034 color: var(--f7-toolbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2035 box-sizing: border-box;
2036 flex-shrink: 1;
2037 position: relative;
2038 white-space: nowrap;
2039 text-overflow: ellipsis;
2040}
2041.toolbar a.link {
2042 display: flex;
2043 line-height: var(--f7-toolbar-height);
2044 height: var(--f7-toolbar-height);
2045}
2046.toolbar i.icon {
2047 display: block;
2048}
2049.toolbar:after,
2050.toolbar:before {
2051 -webkit-backface-visibility: hidden;
2052 backface-visibility: hidden;
2053}
2054.views > .toolbar,
2055.view > .toolbar,
2056.page > .toolbar {
2057 position: absolute;
2058}
2059.toolbar-top,
2060.ios .toolbar-top-ios,
2061.md .toolbar-top-md {
2062 top: 0;
2063}
2064.toolbar-top .tab-link-highlight,
2065.ios .toolbar-top-ios .tab-link-highlight,
2066.md .toolbar-top-md .tab-link-highlight {
2067 bottom: 0;
2068}
2069.toolbar-top.no-hairline:after,
2070.ios .toolbar-top-ios.no-hairline:after,
2071.md .toolbar-top-md.no-hairline:after,
2072.toolbar-top.no-border:after,
2073.ios .toolbar-top-ios.no-border:after,
2074.md .toolbar-top-md.no-border:after {
2075 display: none !important;
2076}
2077.toolbar-top.no-shadow:before,
2078.ios .toolbar-top-ios.no-shadow:before,
2079.md .toolbar-top-md.no-shadow:before,
2080.toolbar-top.toolbar-hidden:before,
2081.ios .toolbar-top-ios.toolbar-hidden:before,
2082.md .toolbar-top-md.toolbar-hidden:before {
2083 display: none !important;
2084}
2085.toolbar-top:after,
2086.ios .toolbar-top-ios:after,
2087.md .toolbar-top-md:after,
2088.toolbar-top:before,
2089.ios .toolbar-top-ios:before,
2090.md .toolbar-top-md:before {
2091 -webkit-backface-visibility: hidden;
2092 backface-visibility: hidden;
2093}
2094.toolbar-top:after,
2095.ios .toolbar-top-ios:after,
2096.md .toolbar-top-md:after {
2097 content: '';
2098 position: absolute;
2099 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2100 display: block;
2101 z-index: 15;
2102 top: auto;
2103 right: auto;
2104 bottom: 0;
2105 left: 0;
2106 height: 1px;
2107 width: 100%;
2108 transform-origin: 50% 100%;
2109 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2110}
2111.toolbar-top:before,
2112.ios .toolbar-top-ios:before,
2113.md .toolbar-top-md:before {
2114 content: '';
2115 position: absolute;
2116 right: 0;
2117 width: 100%;
2118 top: 100%;
2119 bottom: auto;
2120 height: 8px;
2121 pointer-events: none;
2122 background: var(--f7-toolbar-top-shadow-image, var(--f7-bars-shadow-bottom-image));
2123}
2124.toolbar-bottom,
2125.ios .toolbar-bottom-ios,
2126.md .toolbar-bottom-md {
2127 bottom: 0;
2128 height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2129}
2130.toolbar-bottom .tab-link-highlight,
2131.ios .toolbar-bottom-ios .tab-link-highlight,
2132.md .toolbar-bottom-md .tab-link-highlight {
2133 top: 0;
2134}
2135.toolbar-bottom .toolbar-inner,
2136.ios .toolbar-bottom-ios .toolbar-inner,
2137.md .toolbar-bottom-md .toolbar-inner {
2138 height: auto;
2139 top: 0;
2140 bottom: var(--f7-safe-area-bottom);
2141}
2142.toolbar-bottom.no-hairline:before,
2143.ios .toolbar-bottom-ios.no-hairline:before,
2144.md .toolbar-bottom-md.no-hairline:before,
2145.toolbar-bottom.no-border:before,
2146.ios .toolbar-bottom-ios.no-border:before,
2147.md .toolbar-bottom-md.no-border:before {
2148 display: none !important;
2149}
2150.toolbar-bottom.no-shadow:after,
2151.ios .toolbar-bottom-ios.no-shadow:after,
2152.md .toolbar-bottom-md.no-shadow:after,
2153.toolbar-bottom.toolbar-hidden:after,
2154.ios .toolbar-bottom-ios.toolbar-hidden:after,
2155.md .toolbar-bottom-md.toolbar-hidden:after {
2156 display: none !important;
2157}
2158.toolbar-bottom:before,
2159.ios .toolbar-bottom-ios:before,
2160.md .toolbar-bottom-md:before {
2161 content: '';
2162 position: absolute;
2163 background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
2164 display: block;
2165 z-index: 15;
2166 top: 0;
2167 right: auto;
2168 bottom: auto;
2169 left: 0;
2170 height: 1px;
2171 width: 100%;
2172 transform-origin: 50% 0%;
2173 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2174}
2175.toolbar-bottom:after,
2176.ios .toolbar-bottom-ios:after,
2177.md .toolbar-bottom-md:after {
2178 content: '';
2179 position: absolute;
2180 right: 0;
2181 width: 100%;
2182 bottom: 100%;
2183 height: 8px;
2184 top: auto;
2185 pointer-events: none;
2186 background: var(--f7-toolbar-bottom-shadow-image, var(--f7-bars-shadow-top-image));
2187}
2188.toolbar-inner {
2189 position: absolute;
2190 left: 0;
2191 top: 0;
2192 width: 100%;
2193 height: 100%;
2194 display: flex;
2195 justify-content: space-between;
2196 box-sizing: border-box;
2197 align-items: center;
2198 align-content: center;
2199 overflow: hidden;
2200}
2201.views > .tabbar,
2202.views > .tabbar-labels {
2203 z-index: 5001;
2204}
2205.tabbar a,
2206.tabbar-labels a {
2207 color: var(--f7-tabbar-link-inactive-color);
2208}
2209.tabbar a.link,
2210.tabbar-labels a.link {
2211 line-height: 1.4;
2212}
2213.tabbar a.tab-link,
2214.tabbar-labels a.tab-link,
2215.tabbar a.link,
2216.tabbar-labels a.link {
2217 height: 100%;
2218 width: 100%;
2219 box-sizing: border-box;
2220 display: flex;
2221 justify-content: center;
2222 align-items: center;
2223 flex-direction: column;
2224 text-transform: var(--f7-tabbar-link-text-transform);
2225 font-weight: var(--f7-tabbar-link-font-weight);
2226 letter-spacing: var(--f7-tabbar-link-letter-spacing);
2227 overflow: hidden;
2228}
2229.tabbar .tab-link-active,
2230.tabbar-labels .tab-link-active {
2231 color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
2232}
2233.tabbar i.icon,
2234.tabbar-labels i.icon {
2235 font-size: var(--f7-tabbar-icon-size);
2236 height: var(--f7-tabbar-icon-size);
2237 line-height: var(--f7-tabbar-icon-size);
2238}
2239.tabbar-labels {
2240 --f7-toolbar-height: var(--f7-tabbar-labels-height);
2241}
2242.tabbar-labels a.tab-link,
2243.tabbar-labels a.link {
2244 height: 100%;
2245 justify-content: space-between;
2246 align-items: center;
2247}
2248.tabbar-labels .tabbar-label {
2249 display: block;
2250 line-height: 1;
2251 margin: 0;
2252 position: relative;
2253 text-overflow: ellipsis;
2254 white-space: nowrap;
2255 font-size: var(--f7-tabbar-label-font-size);
2256 text-transform: var(--f7-tabbar-label-text-transform);
2257 font-weight: var(--f7-tabbar-label-font-weight);
2258 letter-spacing: var(--f7-tabbar-label-letter-spacing);
2259}
2260@media (min-width: 768px) {
2261 :root {
2262 --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2263 --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
2264 }
2265}
2266.tabbar-scrollable .toolbar-inner {
2267 will-change: scroll-position;
2268 overflow: auto;
2269 -webkit-overflow-scrolling: touch;
2270}
2271.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2272 display: none !important;
2273 width: 0 !important;
2274 height: 0 !important;
2275 -webkit-appearance: none;
2276 opacity: 0 !important;
2277}
2278.tabbar-scrollable a.tab-link,
2279.tabbar-scrollable a.link {
2280 width: auto;
2281 flex-shrink: 0;
2282}
2283.toolbar-transitioning,
2284.navbar-transitioning + .toolbar,
2285.navbar-transitioning ~ * .toolbar {
2286 transition-duration: var(--f7-toolbar-hide-show-transition-duration);
2287}
2288.toolbar-bottom.toolbar-hidden,
2289.ios .toolbar-bottom-ios.toolbar-hidden,
2290.md .toolbar-bottom-md.toolbar-hidden {
2291 transform: translate3d(0, 100%, 0);
2292}
2293.toolbar-bottom ~ .page-content,
2294.ios .toolbar-bottom-ios ~ .page-content,
2295.md .toolbar-bottom-md ~ .page-content,
2296.toolbar-bottom ~ * .page-content,
2297.ios .toolbar-bottom-ios ~ * .page-content,
2298.md .toolbar-bottom-md ~ * .page-content {
2299 padding-bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2300}
2301.toolbar-bottom.tabbar-labels ~ .page-content,
2302.ios .toolbar-bottom-ios.tabbar-labels ~ .page-content,
2303.md .toolbar-bottom-md.tabbar-labels ~ .page-content,
2304.toolbar-bottom.tabbar-labels ~ * .page-content,
2305.ios .toolbar-bottom-ios.tabbar-labels ~ * .page-content,
2306.md .toolbar-bottom-md.tabbar-labels ~ * .page-content {
2307 padding-bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
2308}
2309.toolbar-top.toolbar-hidden,
2310.ios .toolbar-top-ios.toolbar-hidden,
2311.md .toolbar-top-md.toolbar-hidden {
2312 transform: translate3d(0, -100%, 0);
2313}
2314.toolbar-top ~ .page-content,
2315.ios .toolbar-top-ios ~ .page-content,
2316.md .toolbar-top-md ~ .page-content,
2317.toolbar-top ~ * .page-content,
2318.ios .toolbar-top-ios ~ * .page-content,
2319.md .toolbar-top-md ~ * .page-content {
2320 padding-top: var(--f7-toolbar-height);
2321}
2322.toolbar-top.tabbar-labels ~ .page-content,
2323.ios .toolbar-top-ios.tabbar-labels ~ .page-content,
2324.md .toolbar-top-md.tabbar-labels ~ .page-content,
2325.toolbar-top.tabbar-labels ~ * .page-content,
2326.ios .toolbar-top-ios.tabbar-labels ~ * .page-content,
2327.md .toolbar-top-md.tabbar-labels ~ * .page-content {
2328 padding-top: var(--f7-tabbar-labels-height);
2329}
2330.navbar ~ .toolbar-top,
2331.ios .navbar ~ .toolbar-top-ios,
2332.md .navbar ~ .toolbar-top-md,
2333.navbar ~ * .toolbar-top,
2334.ios .navbar ~ * .toolbar-top-ios,
2335.md .navbar ~ * .toolbar-top-md,
2336.navbar ~ .page:not(.no-navbar) .toolbar-top,
2337.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
2338.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
2339 top: var(--f7-navbar-height);
2340}
2341.navbar ~ .toolbar-top ~ .page-content,
2342.ios .navbar ~ .toolbar-top-ios ~ .page-content,
2343.md .navbar ~ .toolbar-top-md ~ .page-content,
2344.navbar ~ * .toolbar-top ~ .page-content,
2345.ios .navbar ~ * .toolbar-top-ios ~ .page-content,
2346.md .navbar ~ * .toolbar-top-md ~ .page-content,
2347.navbar ~ .page:not(.no-navbar) .toolbar-top ~ .page-content,
2348.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ .page-content,
2349.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ .page-content,
2350.navbar ~ .toolbar-top ~ * .page-content,
2351.ios .navbar ~ .toolbar-top-ios ~ * .page-content,
2352.md .navbar ~ .toolbar-top-md ~ * .page-content,
2353.navbar ~ * .toolbar-top ~ * .page-content,
2354.ios .navbar ~ * .toolbar-top-ios ~ * .page-content,
2355.md .navbar ~ * .toolbar-top-md ~ * .page-content,
2356.navbar ~ .page:not(.no-navbar) .toolbar-top ~ * .page-content,
2357.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios ~ * .page-content,
2358.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md ~ * .page-content {
2359 padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
2360}
2361.navbar ~ .toolbar-top.tabbar-labels ~ .page-content,
2362.ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .page-content,
2363.md .navbar ~ .toolbar-top-md.tabbar-labels ~ .page-content,
2364.navbar ~ * .toolbar-top.tabbar-labels ~ .page-content,
2365.ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ .page-content,
2366.md .navbar ~ * .toolbar-top-md.tabbar-labels ~ .page-content,
2367.navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ .page-content,
2368.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ .page-content,
2369.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ .page-content,
2370.navbar ~ .toolbar-top.tabbar-labels ~ * .page-content,
2371.ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ * .page-content,
2372.md .navbar ~ .toolbar-top-md.tabbar-labels ~ * .page-content,
2373.navbar ~ * .toolbar-top.tabbar-labels ~ * .page-content,
2374.ios .navbar ~ * .toolbar-top-ios.tabbar-labels ~ * .page-content,
2375.md .navbar ~ * .toolbar-top-md.tabbar-labels ~ * .page-content,
2376.navbar ~ .page:not(.no-navbar) .toolbar-top.tabbar-labels ~ * .page-content,
2377.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.tabbar-labels ~ * .page-content,
2378.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.tabbar-labels ~ * .page-content {
2379 padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
2380}
2381.navbar ~ .toolbar-top.toolbar-hidden,
2382.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
2383.md .navbar ~ .toolbar-top-md.toolbar-hidden,
2384.navbar ~ * .toolbar-top.toolbar-hidden,
2385.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
2386.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
2387.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
2388.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
2389.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
2390 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height))), 0);
2391}
2392.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
2393.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2394.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
2395.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
2396.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2397.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
2398.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
2399.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
2400.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels {
2401 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height))), 0);
2402}
2403.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
2404.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2405.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
2406.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2407.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2408.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2409 transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
2410}
2411.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
2412.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
2413.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
2414.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
2415.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
2416.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
2417 transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-navbar-large-title-height))), 0);
2418}
2419.ios .toolbar a.icon-only {
2420 min-height: var(--f7-toolbar-height);
2421 display: flex;
2422 justify-content: center;
2423 align-items: center;
2424 margin: 0;
2425 min-width: 44px;
2426}
2427.ios .toolbar-inner {
2428 padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left));
2429}
2430.ios .tabbar-labels a.tab-link,
2431.ios .tabbar-labels a.link {
2432 padding-top: 4px;
2433 padding-bottom: 4px;
2434}
2435.ios .tabbar-labels a.tab-link i + span,
2436.ios .tabbar-labels a.link i + span {
2437 margin: 0;
2438}
2439@media (min-width: 768px) {
2440 .ios .tabbar .toolbar-inner,
2441 .ios .tabbar-labels .toolbar-inner {
2442 justify-content: center;
2443 }
2444 .ios .tabbar a.tab-link,
2445 .ios .tabbar-labels a.tab-link,
2446 .ios .tabbar a.link,
2447 .ios .tabbar-labels a.link {
2448 width: auto;
2449 min-width: 105px;
2450 }
2451}
2452.ios .tabbar-scrollable .toolbar-inner {
2453 justify-content: flex-start;
2454}
2455.ios .tabbar-scrollable a.tab-link,
2456.ios .tabbar-scrollable a.link {
2457 padding: 0 8px;
2458}
2459.md .toolbar a.link {
2460 justify-content: center;
2461 padding: 0 16px;
2462 min-width: 48px;
2463}
2464.md .toolbar a.link:before {
2465 content: '';
2466 width: 152%;
2467 height: 152%;
2468 position: absolute;
2469 left: -26%;
2470 top: -26%;
2471 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2472 background-repeat: no-repeat;
2473 background-position: center;
2474 background-size: 100% 100%;
2475 opacity: 0;
2476 pointer-events: none;
2477 transition-duration: 600ms;
2478}
2479.md .toolbar a.link.active-state:before {
2480 opacity: 1;
2481 transition-duration: 150ms;
2482}
2483.md .toolbar a.icon-only {
2484 min-width: 0;
2485 flex-shrink: 0;
2486}
2487.md .toolbar-inner {
2488 padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left);
2489}
2490.md .tabbar a.tab-link,
2491.md .tabbar-labels a.tab-link,
2492.md .tabbar a.link,
2493.md .tabbar-labels a.link {
2494 padding-left: 0;
2495 padding-right: 0;
2496}
2497.md .tabbar a.tab-link,
2498.md .tabbar-labels a.tab-link {
2499 transition-duration: 300ms;
2500 overflow: hidden;
2501 position: relative;
2502}
2503.md .tabbar .tab-link-highlight,
2504.md .tabbar-labels .tab-link-highlight {
2505 position: absolute;
2506 left: 0;
2507 height: 2px;
2508 background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
2509 transition-duration: 300ms;
2510 right: 0;
2511}
2512.md .tabbar-labels a.tab-link,
2513.md .tabbar-labels a.link {
2514 padding-top: 7px;
2515 padding-bottom: 7px;
2516}
2517.md .tabbar-label {
2518 max-width: 100%;
2519 overflow: hidden;
2520 line-height: 1.2;
2521}
2522.md .tabbar-scrollable .toolbar-inner {
2523 overflow: auto;
2524 justify-content: flex-start;
2525}
2526.md .tabbar-scrollable a.tab-link,
2527.md .tabbar-scrollable a.link {
2528 padding: 0 16px;
2529}
2530/* === Subnavbar === */
2531:root {
2532 /*
2533 --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
2534 --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
2535 --f7-subnavbar-border-color: var(--f7-bars-border-color);
2536 --f7-subnavbar-link-color: var(--f7-bars-link-color);
2537 --f7-subnavbar-text-color: var(--f7-bars-text-color);
2538 */
2539}
2540.ios {
2541 --f7-subnavbar-height: 44px;
2542 --f7-subnavbar-inner-padding-left: 8px;
2543 --f7-subnavbar-inner-padding-right: 8px;
2544 --f7-subnavbar-title-font-size: 34px;
2545 --f7-subnavbar-title-font-weight: 700;
2546 --f7-subnavbar-title-line-height: 1.2;
2547 --f7-subnavbar-title-letter-spacing: -0.03em;
2548 --f7-subnavbar-title-margin-left: 7px;
2549 --f7-navbar-shadow-image: none;
2550}
2551.md {
2552 --f7-subnavbar-height: 48px;
2553 --f7-subnavbar-inner-padding-left: 16px;
2554 --f7-subnavbar-inner-padding-right: 16px;
2555 --f7-subnavbar-title-font-size: 20px;
2556 --f7-subnavbar-title-font-weight: 500;
2557 --f7-subnavbar-title-line-height: 1.2;
2558 --f7-subnavbar-title-letter-spacing: 0;
2559 --f7-subnavbar-title-margin-left: 0px;
2560 --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
2561}
2562.subnavbar {
2563 width: 100%;
2564 position: absolute;
2565 left: 0;
2566 top: 0;
2567 z-index: 500;
2568 box-sizing: border-box;
2569 display: flex;
2570 justify-content: space-between;
2571 align-items: center;
2572 background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
2573 background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
2574 color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
2575}
2576.subnavbar .title {
2577 position: relative;
2578 overflow: hidden;
2579 text-overflow: ellpsis;
2580 white-space: nowrap;
2581 font-size: var(--f7-subnavbar-title-font-size);
2582 font-weight: var(--f7-subnavbar-title-font-weight);
2583 text-align: left;
2584 display: inline-block;
2585 line-height: var(--f7-subnavbar-title-line-height);
2586 letter-spacing: var(--f7-subnavbar-title-letter-spacing);
2587 margin-right: var(--f7-subnavbar-title-margin-left);
2588}
2589.subnavbar .left,
2590.subnavbar .right {
2591 flex-shrink: 0;
2592 display: flex;
2593 justify-content: flex-start;
2594 align-items: center;
2595}
2596.subnavbar .right:first-child {
2597 position: absolute;
2598 height: 100%;
2599}
2600.subnavbar a {
2601 color: var(--f7-subnavbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
2602}
2603.subnavbar a.link {
2604 line-height: var(--f7-subnavbar-height);
2605 height: var(--f7-subnavbar-height);
2606}
2607.subnavbar a.icon-only {
2608 min-width: var(--f7-subnavbar-height);
2609}
2610.subnavbar.no-hairline:after,
2611.subnavbar.no-border:after {
2612 display: none !important;
2613}
2614.subnavbar.no-shadow:before,
2615.subnavbar.navbar-hidden:before {
2616 display: none !important;
2617}
2618.subnavbar:after,
2619.subnavbar:before {
2620 -webkit-backface-visibility: hidden;
2621 backface-visibility: hidden;
2622}
2623.subnavbar:after {
2624 content: '';
2625 position: absolute;
2626 background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
2627 display: block;
2628 z-index: 15;
2629 top: auto;
2630 right: auto;
2631 bottom: 0;
2632 left: 0;
2633 height: 1px;
2634 width: 100%;
2635 transform-origin: 50% 100%;
2636 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2637}
2638.subnavbar:before {
2639 content: '';
2640 position: absolute;
2641 right: 0;
2642 width: 100%;
2643 top: 100%;
2644 bottom: auto;
2645 height: 8px;
2646 pointer-events: none;
2647 background: var(--f7-navbar-shadow-image, var(--f7-bars-shadow-bottom-image));
2648}
2649.subnavbar-inner {
2650 width: 100%;
2651 height: 100%;
2652 display: flex;
2653 align-items: center;
2654 box-sizing: border-box;
2655 justify-content: space-between;
2656 overflow: hidden;
2657 padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
2658}
2659.subnavbar-inner.stacked {
2660 display: none;
2661}
2662.navbar .subnavbar {
2663 top: 100%;
2664}
2665.views > .subnavbar,
2666.view > .subnavbar,
2667.page > .subnavbar {
2668 position: absolute;
2669}
2670.navbar ~ * .subnavbar,
2671.page-with-subnavbar .navbar ~ .subnavbar,
2672.page-with-subnavbar .navbar ~ * .subnavbar,
2673.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
2674.navbar ~ .subnavbar {
2675 top: var(--f7-navbar-height);
2676}
2677.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
2678.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
2679.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar {
2680 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2681 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2682}
2683.navbar .title-large ~ .subnavbar {
2684 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
2685 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
2686}
2687.page-with-subnavbar .page-content,
2688.subnavbar ~ .page-content,
2689.subnavbar ~ * .page-content {
2690 padding-top: var(--f7-subnavbar-height);
2691}
2692.navbar ~ .page-with-subnavbar:not(.no-navbar) .page-content,
2693.navbar ~ *:not(.no-navbar) .subnavbar ~ .page-content,
2694.navbar ~ *:not(.no-navbar) .subnavbar ~ * .page-content,
2695.navbar ~ .subnavbar ~ .page-content,
2696.navbar ~ .subnavbar ~ * .page-content,
2697.page-with-subnavbar .navbar ~ * .page-content,
2698.page-with-subnavbar .navbar ~ .page-content {
2699 padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
2700}
2701.navbar ~ .page-with-subnavbar.page-with-navbar-large:not(.no-navbar) .page-content,
2702.page-with-subnavbar.page-with-navbar-large .navbar ~ * .page-content,
2703.page-with-subnavbar.page-with-navbar-large .navbar ~ .page-content,
2704.page-with-subnavbar.page-with-navbar-large .page-content {
2705 padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height));
2706}
2707.ios .subnavbar {
2708 height: calc(var(--f7-subnavbar-height) + 1px);
2709 margin-top: -1px;
2710 padding-top: 1px;
2711}
2712.ios .subnavbar .title {
2713 align-self: flex-start;
2714 flex-shrink: 10;
2715}
2716.ios .subnavbar .left a + a,
2717.ios .subnavbar .right a + a {
2718 margin-right: 15px;
2719}
2720.ios .subnavbar .left {
2721 margin-left: 10px;
2722}
2723.ios .subnavbar .right {
2724 margin-right: 10px;
2725}
2726.ios .subnavbar .right:first-child {
2727 left: 8px;
2728}
2729.ios .subnavbar a.link {
2730 justify-content: flex-start;
2731}
2732.ios .subnavbar a.icon-only {
2733 justify-content: center;
2734 margin: 0;
2735}
2736.md .subnavbar {
2737 height: var(--f7-subnavbar-height);
2738}
2739.md .subnavbar .right {
2740 margin-right: auto;
2741}
2742.md .subnavbar .right:first-child {
2743 left: 16px;
2744}
2745.md .subnavbar a.link {
2746 justify-content: center;
2747 padding: 0 16px;
2748}
2749.md .subnavbar a.link:before {
2750 content: '';
2751 width: 152%;
2752 height: 152%;
2753 position: absolute;
2754 left: -26%;
2755 top: -26%;
2756 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
2757 background-repeat: no-repeat;
2758 background-position: center;
2759 background-size: 100% 100%;
2760 opacity: 0;
2761 pointer-events: none;
2762 transition-duration: 600ms;
2763}
2764.md .subnavbar a.link.active-state:before {
2765 opacity: 1;
2766 transition-duration: 150ms;
2767}
2768.md .subnavbar a.icon-only {
2769 flex-shrink: 0;
2770}
2771.md .subnavbar-inner > a.link:first-child {
2772 margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
2773}
2774.md .subnavbar-inner > a.link:last-child {
2775 margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
2776}
2777/* === Content Block === */
2778:root {
2779 --f7-block-font-size: inherit;
2780 --f7-block-strong-bg-color: #fff;
2781 --f7-block-title-font-size: inherit;
2782 --f7-block-header-margin: 10px;
2783 --f7-block-footer-margin: 10px;
2784 --f7-block-header-font-size: 14px;
2785 --f7-block-footer-font-size: 14px;
2786 --f7-block-title-white-space: nowrap;
2787 --f7-block-title-medium-text-color: #000;
2788 --f7-block-title-medium-text-transform: none;
2789 --f7-block-title-large-text-color: #000;
2790 --f7-block-title-large-text-transform: none;
2791}
2792:root .theme-dark,
2793:root.theme-dark {
2794 --f7-block-title-medium-text-color: #fff;
2795 --f7-block-title-large-text-color: #fff;
2796}
2797.ios {
2798 --f7-block-text-color: #6d6d72;
2799 --f7-block-padding-horizontal: 15px;
2800 --f7-block-padding-vertical: 15px;
2801 --f7-block-margin-vertical: 35px;
2802 --f7-block-strong-text-color: #000;
2803 --f7-block-strong-border-color: #c8c7cc;
2804 --f7-block-title-text-transform: uppercase;
2805 --f7-block-title-text-color: #6d6d72;
2806 --f7-block-title-font-weight: 400;
2807 --f7-block-title-line-height: 17px;
2808 --f7-block-title-margin-bottom: 10px;
2809 --f7-block-title-medium-font-size: 22px;
2810 --f7-block-title-medium-font-weight: bold;
2811 --f7-block-title-medium-line-height: 1.4;
2812 --f7-block-title-large-font-size: 29px;
2813 --f7-block-title-large-font-weight: bold;
2814 --f7-block-title-large-line-height: 1.3;
2815 --f7-block-inset-side-margin: 15px;
2816 --f7-block-inset-border-radius: 7px;
2817 --f7-block-header-text-color: #8f8f94;
2818 --f7-block-footer-text-color: #8f8f94;
2819}
2820.ios .theme-dark,
2821.ios.theme-dark {
2822 --f7-block-strong-border-color: #282829;
2823 --f7-block-title-text-color: #8E8E93;
2824 --f7-block-header-text-color: #8E8E93;
2825 --f7-block-footer-text-color: #8E8E93;
2826 --f7-block-strong-bg-color: #1c1c1d;
2827 --f7-block-strong-text-color: #fff;
2828}
2829.md {
2830 --f7-block-text-color: inherit;
2831 --f7-block-padding-horizontal: 16px;
2832 --f7-block-padding-vertical: 16px;
2833 --f7-block-margin-vertical: 32px;
2834 --f7-block-strong-text-color: inherit;
2835 --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
2836 --f7-block-title-text-transform: none;
2837 --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
2838 --f7-block-title-font-weight: 500;
2839 --f7-block-title-line-height: 16px;
2840 --f7-block-title-margin-bottom: 16px;
2841 --f7-block-title-medium-font-size: 24px;
2842 --f7-block-title-medium-font-weight: 500;
2843 --f7-block-title-medium-line-height: 1.3;
2844 --f7-block-title-large-font-size: 34px;
2845 --f7-block-title-large-font-weight: 500;
2846 --f7-block-title-large-line-height: 1.2;
2847 --f7-block-inset-side-margin: 16px;
2848 --f7-block-inset-border-radius: 4px;
2849 --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
2850 --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
2851}
2852.md .theme-dark,
2853.md.theme-dark {
2854 --f7-block-strong-border-color: #282829;
2855 --f7-block-title-text-color: #fff;
2856 --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
2857 --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
2858 --f7-block-strong-bg-color: #1c1c1d;
2859}
2860.block {
2861 box-sizing: border-box;
2862 position: relative;
2863 z-index: 1;
2864 color: var(--f7-block-text-color);
2865 margin: var(--f7-block-margin-vertical) 0;
2866 padding-top: 0;
2867 padding-bottom: 0;
2868 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2869 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2870 font-size: var(--f7-block-font-size);
2871}
2872.block.no-hairlines:before,
2873.block.no-hairlines ul:before,
2874.md .block.no-hairlines-md:before,
2875.md .block.no-hairlines-md ul:before,
2876.ios .block.no-hairlines-ios:before,
2877.ios .block.no-hairlines-ios ul:before {
2878 display: none !important;
2879}
2880.block.no-hairlines:after,
2881.block.no-hairlines ul:after,
2882.md .block.no-hairlines-md:after,
2883.md .block.no-hairlines-md ul:after,
2884.ios .block.no-hairlines-ios:after,
2885.ios .block.no-hairlines-ios ul:after {
2886 display: none !important;
2887}
2888.block.no-hairline-top:before,
2889.block.no-hairline-top ul:before,
2890.md .block.no-hairline-top-md:before,
2891.md .block.no-hairline-top-md ul:before,
2892.ios .block.no-hairline-top-ios:before,
2893.ios .block.no-hairline-top-ios ul:before {
2894 display: none !important;
2895}
2896.block.no-hairline-bottom:after,
2897.block.no-hairline-bottom ul:after,
2898.md .block.no-hairline-bottom-md:after,
2899.md .block.no-hairline-bottom-md ul:after,
2900.ios .block.no-hairline-bottom-ios:after,
2901.ios .block.no-hairline-bottom-ios ul:after {
2902 display: none !important;
2903}
2904.block > h1:first-child,
2905.block > h2:first-child,
2906.block > h3:first-child,
2907.block > h4:first-child,
2908.block > p:first-child {
2909 margin-top: 0;
2910}
2911.block > h1:last-child,
2912.block > h2:last-child,
2913.block > h3:last-child,
2914.block > h4:last-child,
2915.block > p:last-child {
2916 margin-bottom: 0;
2917}
2918.block-strong {
2919 color: var(--f7-block-strong-text-color);
2920 padding-top: var(--f7-block-padding-vertical);
2921 padding-bottom: var(--f7-block-padding-vertical);
2922 background-color: var(--f7-block-strong-bg-color);
2923}
2924.block-strong:before {
2925 content: '';
2926 position: absolute;
2927 background-color: var(--f7-block-strong-border-color);
2928 display: block;
2929 z-index: 15;
2930 top: 0;
2931 right: auto;
2932 bottom: auto;
2933 left: 0;
2934 height: 1px;
2935 width: 100%;
2936 transform-origin: 50% 0%;
2937 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2938}
2939.block-strong:after {
2940 content: '';
2941 position: absolute;
2942 background-color: var(--f7-block-strong-border-color);
2943 display: block;
2944 z-index: 15;
2945 top: auto;
2946 right: auto;
2947 bottom: 0;
2948 left: 0;
2949 height: 1px;
2950 width: 100%;
2951 transform-origin: 50% 100%;
2952 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2953}
2954.block-title {
2955 position: relative;
2956 overflow: hidden;
2957 margin: 0;
2958 white-space: var(--f7-block-title-white-space);
2959 text-overflow: ellipsis;
2960 text-transform: var(--f7-block-title-text-transform);
2961 color: var(--f7-block-title-text-color);
2962 font-size: var(--f7-block-title-font-size, inherit);
2963 font-weight: var(--f7-block-title-font-weight);
2964 line-height: var(--f7-block-title-line-height);
2965 margin-top: var(--f7-block-margin-vertical);
2966 margin-bottom: var(--f7-block-title-margin-bottom);
2967 margin-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
2968 margin-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
2969}
2970.block-title + .list,
2971.block-title + .block,
2972.block-title + .card,
2973.block-title + .timeline,
2974.block-title + .block-header {
2975 margin-top: 0px;
2976}
2977.block-title-medium {
2978 font-size: var(--f7-block-title-medium-font-size);
2979 text-transform: var(--f7-block-title-medium-text-transform);
2980 color: var(--f7-block-title-medium-text-color);
2981 font-weight: var(--f7-block-title-medium-font-weight);
2982 line-height: var(--f7-block-title-medium-line-height);
2983}
2984.block-title-large {
2985 font-size: var(--f7-block-title-large-font-size);
2986 text-transform: var(--f7-block-title-large-text-transform);
2987 color: var(--f7-block-title-large-text-color);
2988 font-weight: var(--f7-block-title-large-font-weight);
2989 line-height: var(--f7-block-title-large-line-height);
2990}
2991.block > .block-title:first-child,
2992.list > .block-title:first-child {
2993 margin-top: 0;
2994 margin-left: 0;
2995 margin-right: 0;
2996}
2997.block-header {
2998 color: var(--f7-block-header-text-color);
2999 font-size: var(--f7-block-header-font-size);
3000 margin-bottom: var(--f7-block-header-margin);
3001 margin-top: var(--f7-block-margin-vertical);
3002}
3003.block-header + .list,
3004.block-header + .block,
3005.block-header + .card,
3006.block-header + .timeline {
3007 margin-top: var(--f7-block-header-margin);
3008}
3009.block-footer {
3010 color: var(--f7-block-footer-text-color);
3011 font-size: var(--f7-block-footer-font-size);
3012 margin-top: var(--f7-block-footer-margin);
3013 margin-bottom: var(--f7-block-margin-vertical);
3014}
3015.block-footer,
3016.block-header {
3017 padding-top: 0;
3018 padding-bottom: 0;
3019 padding-left: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-left));
3020 padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3021}
3022.block-footer ul:first-child,
3023.block-header ul:first-child,
3024.block-footer p:first-child,
3025.block-header p:first-child,
3026.block-footer h1:first-child,
3027.block-header h1:first-child,
3028.block-footer h2:first-child,
3029.block-header h2:first-child,
3030.block-footer h3:first-child,
3031.block-header h3:first-child,
3032.block-footer h4:first-child,
3033.block-header h4:first-child {
3034 margin-top: 0;
3035}
3036.block-footer ul:last-child,
3037.block-header ul:last-child,
3038.block-footer p:last-child,
3039.block-header p:last-child,
3040.block-footer h1:last-child,
3041.block-header h1:last-child,
3042.block-footer h2:last-child,
3043.block-header h2:last-child,
3044.block-footer h3:last-child,
3045.block-header h3:last-child,
3046.block-footer h4:last-child,
3047.block-header h4:last-child {
3048 margin-bottom: 0;
3049}
3050.block-footer ul:first-child:last-child,
3051.block-header ul:first-child:last-child,
3052.block-footer p:first-child:last-child,
3053.block-header p:first-child:last-child,
3054.block-footer h1:first-child:last-child,
3055.block-header h1:first-child:last-child,
3056.block-footer h2:first-child:last-child,
3057.block-header h2:first-child:last-child,
3058.block-footer h3:first-child:last-child,
3059.block-header h3:first-child:last-child,
3060.block-footer h4:first-child:last-child,
3061.block-header h4:first-child:last-child {
3062 margin-top: 0;
3063 margin-bottom: 0;
3064}
3065.list .block-header,
3066.block .block-header,
3067.card .block-header,
3068.timeline .block-header {
3069 margin-top: 0;
3070}
3071.list .block-footer,
3072.block .block-footer,
3073.card .block-footer,
3074.timeline .block-footer {
3075 margin-bottom: 0;
3076}
3077.list + .block-footer,
3078.block + .block-footer,
3079.card + .block-footer,
3080.timeline + .block-footer {
3081 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3082}
3083.block + .block-footer {
3084 margin-top: calc(-1 * (var(--f7-block-margin-vertical) - var(--f7-block-footer-margin)));
3085 margin-bottom: var(--f7-block-margin-vertical);
3086}
3087.block .block-header,
3088.block .block-footer {
3089 padding: 0;
3090}
3091.block.inset {
3092 border-radius: var(--f7-block-inset-border-radius);
3093 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3094 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3095 --f7-safe-area-left: 0px;
3096 --f7-safe-area-right: 0px;
3097}
3098.block-strong.inset:before {
3099 display: none !important;
3100}
3101.block-strong.inset:after {
3102 display: none !important;
3103}
3104@media (min-width: 768px) {
3105 .block.tablet-inset {
3106 border-radius: var(--f7-block-inset-border-radius);
3107 margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
3108 margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
3109 --f7-safe-area-left: 0px;
3110 --f7-safe-area-right: 0px;
3111 }
3112 .block-strong.tablet-inset:before {
3113 display: none !important;
3114 }
3115 .block-strong.tablet-inset:after {
3116 display: none !important;
3117 }
3118}
3119/* === List View === */
3120:root {
3121 --f7-list-bg-color: #fff;
3122 --f7-list-item-text-max-lines: 2;
3123 --f7-list-chevron-icon-color: #c7c7cc;
3124 --f7-list-item-title-font-size: inherit;
3125 --f7-list-item-title-font-weight: 400;
3126 --f7-list-item-title-text-color: inherit;
3127 --f7-list-item-title-line-height: inherit;
3128 --f7-list-item-title-white-space: nowrap;
3129 --f7-list-item-subtitle-font-weight: 400;
3130 --f7-list-item-subtitle-text-color: inherit;
3131 --f7-list-item-subtitle-line-height: inherit;
3132 --f7-list-item-header-text-color: inherit;
3133 --f7-list-item-header-font-size: 12px;
3134 --f7-list-item-header-font-weight: 400;
3135 --f7-list-item-header-line-height: 1.2;
3136 --f7-list-item-footer-font-size: 12px;
3137 --f7-list-item-footer-font-weight: 400;
3138 --f7-list-item-footer-line-height: 1.2;
3139}
3140.ios {
3141 --f7-list-inset-side-margin: 15px;
3142 --f7-list-inset-border-radius: 7px;
3143 --f7-list-margin-vertical: 35px;
3144 --f7-list-font-size: 17px;
3145 --f7-list-chevron-icon-area: 20px;
3146 --f7-list-border-color: #c8c7cc;
3147 --f7-list-item-border-color: #c8c7cc;
3148 --f7-list-link-pressed-bg-color: #d9d9d9;
3149 --f7-list-item-subtitle-font-size: 15px;
3150 --f7-list-item-text-font-size: 15px;
3151 --f7-list-item-text-font-weight: 400;
3152 --f7-list-item-text-text-color: #8e8e93;
3153 --f7-list-item-text-line-height: 21px;
3154 --f7-list-item-after-font-size: inherit;
3155 --f7-list-item-after-font-weight: 400;
3156 --f7-list-item-after-text-color: #8e8e93;
3157 --f7-list-item-after-line-height: inherit;
3158 --f7-list-item-after-padding: 5px;
3159 --f7-list-item-footer-text-color: #8e8e93;
3160 --f7-list-item-min-height: 44px;
3161 --f7-list-item-media-margin: 15px;
3162 --f7-list-item-media-icons-margin: 5px;
3163 --f7-list-item-cell-margin: 15px;
3164 --f7-list-item-padding-vertical: 8px;
3165 --f7-list-item-padding-horizontal: 15px;
3166 --f7-list-media-item-padding-vertical: 10px;
3167 --f7-list-media-item-padding-horizontal: 15px;
3168 /*
3169 --f7-list-button-text-color: var(--f7-theme-color);
3170 */
3171 --f7-list-button-font-size: inherit;
3172 --f7-list-button-font-weight: 400;
3173 --f7-list-button-text-align: center;
3174 --f7-list-button-border-color: #c8c7cc;
3175 --f7-list-button-pressed-bg-color: #d9d9d9;
3176 --f7-list-item-divider-height: 31px;
3177 --f7-list-item-divider-text-color: #8e8e93;
3178 --f7-list-item-divider-font-size: inherit;
3179 --f7-list-item-divider-font-weight: 400;
3180 --f7-list-item-divider-bg-color: #f7f7f7;
3181 --f7-list-item-divider-line-height: inherit;
3182 --f7-list-item-divider-border-color: #c8c7cc;
3183 --f7-list-group-title-height: 31px;
3184 --f7-list-group-title-text-color: #8e8e93;
3185 --f7-list-group-title-font-size: inherit;
3186 --f7-list-group-title-font-weight: 400;
3187 --f7-list-group-title-bg-color: #f7f7f7;
3188 --f7-list-group-title-line-height: inherit;
3189}
3190.ios .theme-dark,
3191.ios.theme-dark {
3192 --f7-list-bg-color: #1c1c1d;
3193 --f7-list-border-color: #282829;
3194 --f7-list-button-border-color: #282829;
3195 --f7-list-item-border-color: #282829;
3196 --f7-list-item-divider-border-color: #282829;
3197 --f7-list-item-divider-bg-color: #232323;
3198 --f7-list-group-title-bg-color: #232323;
3199 --f7-list-link-pressed-bg-color: #363636;
3200 --f7-list-button-pressed-bg-color: #363636;
3201 --f7-list-chevron-icon-color: #434345;
3202}
3203.md {
3204 --f7-list-inset-side-margin: 16px;
3205 --f7-list-inset-border-radius: 4px;
3206 --f7-list-margin-vertical: 32px;
3207 --f7-list-font-size: 16px;
3208 --f7-list-chevron-icon-area: 26px;
3209 --f7-list-border-color: rgba(0, 0, 0, 0.12);
3210 --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
3211 --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
3212 --f7-list-item-subtitle-font-size: 14px;
3213 --f7-list-item-text-font-size: 14px;
3214 --f7-list-item-text-font-weight: 400;
3215 --f7-list-item-text-text-color: #757575;
3216 --f7-list-item-text-line-height: 20px;
3217 --f7-list-item-after-font-size: 14px;
3218 --f7-list-item-after-font-weight: 400;
3219 --f7-list-item-after-text-color: #757575;
3220 --f7-list-item-after-line-height: inherit;
3221 --f7-list-item-after-padding: 8px;
3222 --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
3223 --f7-list-item-min-height: 48px;
3224 --f7-list-item-media-margin: 16px;
3225 --f7-list-item-media-icons-margin: 8px;
3226 --f7-list-item-cell-margin: 16px;
3227 --f7-list-item-padding-vertical: 8px;
3228 --f7-list-item-padding-horizontal: 16px;
3229 --f7-list-media-item-padding-vertical: 14px;
3230 --f7-list-media-item-padding-horizontal: 16px;
3231 --f7-list-button-text-color: #212121;
3232 --f7-list-button-font-size: inherit;
3233 --f7-list-button-font-weight: 400;
3234 --f7-list-button-text-align: left;
3235 --f7-list-button-border-color: transparent;
3236 --f7-list-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
3237 --f7-list-item-divider-height: 48px;
3238 --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
3239 --f7-list-item-divider-font-size: 14px;
3240 --f7-list-item-divider-font-weight: 400;
3241 --f7-list-item-divider-bg-color: #f4f4f4;
3242 --f7-list-item-divider-line-height: inherit;
3243 --f7-list-item-divider-border-color: transparent;
3244 --f7-list-group-title-height: 48px;
3245 --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
3246 --f7-list-group-title-font-size: 14px;
3247 --f7-list-group-title-font-weight: 400;
3248 --f7-list-group-title-bg-color: #f4f4f4;
3249 --f7-list-group-title-line-height: inherit;
3250}
3251.md .theme-dark,
3252.md.theme-dark {
3253 --f7-list-bg-color: #1c1c1d;
3254 --f7-list-border-color: #282829;
3255 --f7-list-button-text-color: #fff;
3256 --f7-list-item-border-color: #282829;
3257 --f7-list-item-divider-border-color: #282829;
3258 --f7-list-item-divider-bg-color: #232323;
3259 --f7-list-item-divider-text-color: #fff;
3260 --f7-list-group-title-bg-color: #232323;
3261 --f7-list-group-title-text-color: #fff;
3262 --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
3263 --f7-list-button-pressed-bg-color: rgba(255, 255, 255, 0.05);
3264 --f7-list-chevron-icon-color: #434345;
3265 --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
3266 --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
3267 --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
3268}
3269.list {
3270 position: relative;
3271 z-index: 1;
3272 font-size: var(--f7-list-font-size);
3273 margin: var(--f7-list-margin-vertical) 0;
3274}
3275.list ul {
3276 list-style: none;
3277 margin: 0;
3278 padding: 0;
3279 position: relative;
3280 background: var(--f7-list-bg-color);
3281}
3282.list ul:before {
3283 content: '';
3284 position: absolute;
3285 background-color: var(--f7-list-border-color);
3286 display: block;
3287 z-index: 15;
3288 top: 0;
3289 right: auto;
3290 bottom: auto;
3291 left: 0;
3292 height: 1px;
3293 width: 100%;
3294 transform-origin: 50% 0%;
3295 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3296}
3297.list ul:after {
3298 content: '';
3299 position: absolute;
3300 background-color: var(--f7-list-border-color);
3301 display: block;
3302 z-index: 15;
3303 top: auto;
3304 right: auto;
3305 bottom: 0;
3306 left: 0;
3307 height: 1px;
3308 width: 100%;
3309 transform-origin: 50% 100%;
3310 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3311}
3312.list ul ul:before {
3313 display: none !important;
3314}
3315.list ul ul:after {
3316 display: none !important;
3317}
3318.list li {
3319 position: relative;
3320 box-sizing: border-box;
3321}
3322.list .item-media {
3323 display: flex;
3324 flex-shrink: 0;
3325 flex-wrap: nowrap;
3326 align-items: center;
3327 box-sizing: border-box;
3328 padding-bottom: var(--f7-list-item-padding-vertical);
3329 padding-top: var(--f7-list-item-padding-vertical);
3330}
3331.list .item-media + .item-inner {
3332 margin-right: var(--f7-list-item-media-margin);
3333}
3334.list .item-media i + i,
3335.list .item-media i + img {
3336 margin-right: var(--f7-list-item-media-icons-margin);
3337}
3338.list .item-after {
3339 padding-right: var(--f7-list-item-after-padding);
3340}
3341.list .item-inner {
3342 position: relative;
3343 width: 100%;
3344 min-width: 0;
3345 display: flex;
3346 justify-content: space-between;
3347 box-sizing: border-box;
3348 align-items: center;
3349 align-self: stretch;
3350 padding-top: var(--f7-list-item-padding-vertical);
3351 padding-bottom: var(--f7-list-item-padding-vertical);
3352 min-height: var(--f7-list-item-min-height);
3353 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3354}
3355.list .item-title {
3356 min-width: 0;
3357 flex-shrink: 1;
3358 white-space: var(--f7-list-item-title-white-space);
3359 position: relative;
3360 overflow: hidden;
3361 text-overflow: ellipsis;
3362 max-width: 100%;
3363 font-size: var(--f7-list-item-title-font-size);
3364 font-weight: var(--f7-list-item-title-font-weight);
3365 color: var(--f7-list-item-title-text-color);
3366 line-height: var(--f7-list-item-title-line-height);
3367}
3368.list .item-after {
3369 white-space: nowrap;
3370 flex-shrink: 0;
3371 display: flex;
3372 font-size: var(--f7-list-item-after-font-size);
3373 font-weight: var(--f7-list-item-after-font-weight);
3374 color: var(--f7-list-item-after-text-color);
3375 line-height: var(--f7-list-item-after-line-height);
3376 margin-right: auto;
3377}
3378.list .item-header,
3379.list .item-footer {
3380 white-space: normal;
3381}
3382.list .item-header {
3383 color: var(--f7-list-item-header-text-color);
3384 font-size: var(--f7-list-item-header-font-size);
3385 font-weight: var(--f7-list-item-header-font-weight);
3386 line-height: var(--f7-list-item-header-line-height);
3387}
3388.list .item-footer {
3389 color: var(--f7-list-item-footer-text-color);
3390 font-size: var(--f7-list-item-footer-font-size);
3391 font-weight: var(--f7-list-item-footer-font-weight);
3392 line-height: var(--f7-list-item-footer-line-height);
3393}
3394.list .item-link,
3395.list .list-button {
3396 transition-duration: 300ms;
3397 transition-property: background-color;
3398 display: block;
3399 position: relative;
3400 overflow: hidden;
3401 z-index: 0;
3402}
3403.list .item-link {
3404 color: inherit;
3405}
3406.list .item-link.active-state {
3407 background-color: var(--f7-list-link-pressed-bg-color);
3408}
3409.list .item-link .item-inner {
3410 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3411}
3412.list .item-content {
3413 display: flex;
3414 justify-content: space-between;
3415 box-sizing: border-box;
3416 align-items: center;
3417 min-height: var(--f7-list-item-min-height);
3418 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3419}
3420.list .item-subtitle {
3421 position: relative;
3422 overflow: hidden;
3423 white-space: nowrap;
3424 max-width: 100%;
3425 text-overflow: ellipsis;
3426 font-size: var(--f7-list-item-subtitle-font-size);
3427 font-weight: var(--f7-list-item-subtitle-font-weight);
3428 color: var(--f7-list-item-subtitle-text-color);
3429 line-height: var(--f7-list-item-subtitle-line-height);
3430}
3431.list .item-text {
3432 position: relative;
3433 overflow: hidden;
3434 text-overflow: hidden;
3435 -webkit-line-clamp: var(--f7-list-item-text-max-lines);
3436 display: -webkit-box;
3437 font-size: var(--f7-list-item-text-font-size);
3438 font-weight: var(--f7-list-item-text-font-weight);
3439 color: var(--f7-list-item-text-text-color);
3440 line-height: var(--f7-list-item-text-line-height);
3441 max-height: calc(var(--f7-list-item-text-line-height) * var(--f7-list-item-text-max-lines));
3442}
3443.list .item-title-row {
3444 position: relative;
3445 display: flex;
3446 justify-content: space-between;
3447 box-sizing: border-box;
3448}
3449.list .item-title-row .item-after {
3450 align-self: center;
3451}
3452.list .item-row {
3453 display: flex;
3454 justify-content: space-between;
3455 box-sizing: border-box;
3456}
3457.list .item-cell {
3458 display: block;
3459 align-self: center;
3460 box-sizing: border-box;
3461 width: 100%;
3462 min-width: 0;
3463 margin-right: var(--f7-list-item-cell-margin);
3464 flex-shrink: 1;
3465}
3466.list .item-cell:first-child {
3467 margin-right: 0;
3468}
3469.list li:last-child .list-button:after {
3470 display: none !important;
3471}
3472.list li:last-child > .item-inner:after,
3473.list li:last-child li:last-child > .item-inner:after,
3474.list li:last-child > .item-content > .item-inner:after,
3475.list li:last-child li:last-child > .item-content > .item-inner:after,
3476.list li:last-child > .swipeout-content > .item-content > .item-inner:after,
3477.list li:last-child li:last-child > .swipeout-content > .item-content > .item-inner:after,
3478.list li:last-child > .item-link > .item-content > .item-inner:after,
3479.list li:last-child li:last-child > .item-link > .item-content > .item-inner:after {
3480 display: none !important;
3481}
3482.list li li:last-child .item-inner:after,
3483.list li:last-child li .item-inner:after {
3484 content: '';
3485 position: absolute;
3486 background-color: var(--f7-list-item-border-color);
3487 display: block;
3488 z-index: 15;
3489 top: auto;
3490 right: auto;
3491 bottom: 0;
3492 left: 0;
3493 height: 1px;
3494 width: 100%;
3495 transform-origin: 50% 100%;
3496 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3497}
3498.list.no-hairlines:before,
3499.list.no-hairlines ul:before,
3500.md .list.no-hairlines-md:before,
3501.md .list.no-hairlines-md ul:before,
3502.ios .list.no-hairlines-ios:before,
3503.ios .list.no-hairlines-ios ul:before {
3504 display: none !important;
3505}
3506.list.no-hairlines:after,
3507.list.no-hairlines ul:after,
3508.md .list.no-hairlines-md:after,
3509.md .list.no-hairlines-md ul:after,
3510.ios .list.no-hairlines-ios:after,
3511.ios .list.no-hairlines-ios ul:after {
3512 display: none !important;
3513}
3514.list.no-hairline-top:before,
3515.list.no-hairline-top ul:before,
3516.md .list.no-hairline-top-md:before,
3517.md .list.no-hairline-top-md ul:before,
3518.ios .list.no-hairline-top-ios:before,
3519.ios .list.no-hairline-top-ios ul:before {
3520 display: none !important;
3521}
3522.list.no-hairline-bottom:after,
3523.list.no-hairline-bottom ul:after,
3524.md .list.no-hairline-bottom-md:after,
3525.md .list.no-hairline-bottom-md ul:after,
3526.ios .list.no-hairline-bottom-ios:after,
3527.ios .list.no-hairline-bottom-ios ul:after {
3528 display: none !important;
3529}
3530.list.no-hairlines-between .item-inner:after,
3531.md .list.no-hairlines-between-md .item-inner:after,
3532.ios .list.no-hairlines-between-ios .item-inner:after,
3533.list.no-hairlines-between .list-button:after,
3534.md .list.no-hairlines-between-md .list-button:after,
3535.ios .list.no-hairlines-between-ios .list-button:after,
3536.list.no-hairlines-between .item-divider:after,
3537.md .list.no-hairlines-between-md .item-divider:after,
3538.ios .list.no-hairlines-between-ios .item-divider:after,
3539.list.no-hairlines-between .list-group-title:after,
3540.md .list.no-hairlines-between-md .list-group-title:after,
3541.ios .list.no-hairlines-between-ios .list-group-title:after,
3542.list.no-hairlines-between .list-group-title:after,
3543.md .list.no-hairlines-between-md .list-group-title:after,
3544.ios .list.no-hairlines-between-ios .list-group-title:after {
3545 display: none !important;
3546}
3547.list.no-hairlines-between.simple-list li:after,
3548.md .list.no-hairlines-between-md.simple-list li:after,
3549.ios .list.no-hairlines-between-ios.simple-list li:after {
3550 display: none !important;
3551}
3552.list.no-hairlines-between.links-list a:after,
3553.md .list.no-hairlines-between-md.links-list a:after,
3554.ios .list.no-hairlines-between-ios.links-list a:after {
3555 display: none !important;
3556}
3557.list-button {
3558 padding: 0 var(--f7-list-item-padding-horizontal);
3559 line-height: var(--f7-list-item-min-height);
3560 color: var(--f7-list-button-text-color, var(--f7-theme-color));
3561 font-size: var(--f7-list-button-font-size);
3562 font-weight: var(--f7-list-button-font-weight);
3563 text-align: var(--f7-list-button-text-align);
3564}
3565.list-button:after {
3566 content: '';
3567 position: absolute;
3568 background-color: var(--f7-list-button-border-color);
3569 display: block;
3570 z-index: 15;
3571 top: auto;
3572 right: auto;
3573 bottom: 0;
3574 left: 0;
3575 height: 1px;
3576 width: 100%;
3577 transform-origin: 50% 100%;
3578 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3579}
3580.list-button.active-state {
3581 background-color: var(--f7-list-button-pressed-bg-color);
3582}
3583.list-button[class*="color-"] {
3584 --f7-list-button-text-color: var(--f7-theme-color);
3585}
3586.simple-list li {
3587 position: relative;
3588 white-space: nowrap;
3589 text-overflow: ellipsis;
3590 max-width: 100%;
3591 box-sizing: border-box;
3592 display: flex;
3593 justify-content: space-between;
3594 align-items: center;
3595 align-content: center;
3596 line-height: var(--f7-list-item-min-height);
3597 height: var(--f7-list-item-min-height);
3598 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3599 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3600}
3601.simple-list li:after {
3602 left: var(--f7-list-item-padding-horizontal);
3603 right: 0;
3604 width: auto;
3605 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3606 left: 0;
3607}
3608.simple-list li:last-child:after {
3609 display: none !important;
3610}
3611.links-list li {
3612 z-index: 1;
3613}
3614.links-list a {
3615 transition-duration: 300ms;
3616 transition-property: background-color;
3617 display: block;
3618 position: relative;
3619 overflow: hidden;
3620 display: flex;
3621 align-items: center;
3622 align-content: center;
3623 justify-content: space-between;
3624 box-sizing: border-box;
3625 white-space: nowrap;
3626 text-overflow: ellipsis;
3627 max-width: 100%;
3628 height: var(--f7-list-item-min-height);
3629 color: inherit;
3630}
3631.links-list a .ripple-wave {
3632 z-index: 0;
3633}
3634.links-list a:after {
3635 width: auto;
3636}
3637.links-list a.active-state {
3638 background-color: var(--f7-list-link-pressed-bg-color);
3639}
3640.links-list a {
3641 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3642 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3643}
3644.links-list a:after {
3645 right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3646 left: 0;
3647}
3648.links-list li:last-child a:after {
3649 display: none !important;
3650}
3651.simple-list li:after,
3652.links-list a:after,
3653.list .item-inner:after {
3654 content: '';
3655 position: absolute;
3656 background-color: var(--f7-list-item-border-color);
3657 display: block;
3658 z-index: 15;
3659 top: auto;
3660 right: auto;
3661 bottom: 0;
3662 left: 0;
3663 height: 1px;
3664 width: 100%;
3665 transform-origin: 50% 100%;
3666 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3667}
3668.media-list,
3669li.media-item {
3670 --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
3671 --f7-list-item-padding-horizontal: var(--f7-list-media-item-padding-horizontal);
3672}
3673.media-list .item-inner,
3674li.media-item .item-inner {
3675 display: block;
3676 align-self: stretch;
3677}
3678.media-list .item-media,
3679li.media-item .item-media {
3680 align-self: flex-start;
3681}
3682.media-list .item-media img,
3683li.media-item .item-media img {
3684 display: block;
3685}
3686.media-list .item-link .item-inner,
3687li.media-item .item-link .item-inner {
3688 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3689}
3690.media-list .item-link .item-title-row,
3691li.media-item .item-link .item-title-row {
3692 padding-left: calc(var(--f7-list-chevron-icon-area));
3693}
3694.media-list.chevron-center .item-link .item-inner,
3695.media-list .chevron-center .item-link .item-inner,
3696.media-list .item-link.chevron-center .item-inner,
3697li.media-item.chevron-center .item-link .item-inner,
3698li.media-item .item-link.chevron-center .item-inner,
3699li.media-item .chevron-center .item-link .item-inner {
3700 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3701}
3702.media-list.chevron-center .item-title-row,
3703.media-list .chevron-center .item-title-row,
3704li.media-item.chevron-center .item-title-row,
3705li.media-item .chevron-center .item-title-row {
3706 padding-left: 0;
3707}
3708.list .item-link .item-inner:before,
3709.links-list a:before,
3710.media-list .item-link .item-title-row:before,
3711li.media-item .item-link .item-title-row:before,
3712.media-list.chevron-center .item-link .item-inner:before,
3713.media-list .chevron-center .item-link .item-inner:before,
3714.media-list .item-link.chevron-center .item-inner:before,
3715li.media-item.chevron-center .item-link .item-inner:before,
3716li.media-item .chevron-center .item-link .item-inner:before,
3717li.media-item .item-link.chevron-center .item-inner:before {
3718 font-family: 'framework7-core-icons';
3719 font-weight: normal;
3720 font-style: normal;
3721 line-height: 1;
3722 letter-spacing: normal;
3723 text-transform: none;
3724 white-space: nowrap;
3725 word-wrap: normal;
3726 direction: ltr;
3727 -webkit-font-smoothing: antialiased;
3728 text-rendering: optimizeLegibility;
3729 -moz-osx-font-smoothing: grayscale;
3730 -moz-font-feature-settings: "liga";
3731 font-feature-settings: "liga";
3732 text-align: center;
3733 display: block;
3734 width: 100%;
3735 height: 100%;
3736 position: absolute;
3737 top: 50%;
3738 width: 8px;
3739 height: 14px;
3740 margin-top: -7px;
3741 font-size: 20px;
3742 line-height: 14px;
3743 color: var(--f7-list-chevron-icon-color);
3744 pointer-events: none;
3745 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3746 content: 'chevron_left';
3747}
3748.media-list.chevron-center .item-title-row:before,
3749.media-list .chevron-center .item-title-row:before,
3750li.media-item.chevron-center .item-title-row:before,
3751li.media-item .chevron-center .item-title-row:before {
3752 display: none;
3753}
3754.media-list .item-link .item-inner:before,
3755li.media-item .item-link .item-inner:before {
3756 display: none;
3757}
3758.media-list .item-link .item-title-row:before,
3759li.media-item .item-link .item-title-row:before {
3760 left: 0;
3761}
3762.list-group ul:after,
3763.list-group ul:before {
3764 z-index: 25 !important;
3765}
3766.list-group + .list-group ul:before {
3767 display: none !important;
3768}
3769li.item-divider,
3770.item-divider,
3771li.list-group-title {
3772 white-space: nowrap;
3773 position: relative;
3774 max-width: 100%;
3775 text-overflow: ellipsis;
3776 overflow: hidden;
3777 z-index: 15;
3778 padding-top: 0;
3779 padding-bottom: 0;
3780 padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
3781 padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
3782 box-sizing: border-box;
3783 display: flex;
3784 align-items: center;
3785 align-content: center;
3786}
3787li.item-divider:after,
3788.item-divider:after,
3789li.list-group-title:after {
3790 display: none !important;
3791}
3792li.item-divider,
3793.item-divider {
3794 margin-top: -1px;
3795 height: var(--f7-list-item-divider-height);
3796 color: var(--f7-list-item-divider-text-color);
3797 font-size: var(--f7-list-item-divider-font-size);
3798 font-weight: var(--f7-list-item-divider-font-weight);
3799 background-color: var(--f7-list-item-divider-bg-color);
3800 line-height: var(--f7-list-item-divider-line-height);
3801}
3802li.item-divider:before,
3803.item-divider:before {
3804 content: '';
3805 position: absolute;
3806 background-color: var(--f7-list-item-divider-border-color);
3807 display: block;
3808 z-index: 15;
3809 top: 0;
3810 right: auto;
3811 bottom: auto;
3812 left: 0;
3813 height: 1px;
3814 width: 100%;
3815 transform-origin: 50% 0%;
3816 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3817}
3818li.list-group-title,
3819.list li.list-group-title {
3820 position: relative;
3821 position: -webkit-sticky;
3822 position: sticky;
3823 top: 0;
3824 margin-top: 0;
3825 z-index: 20;
3826 height: var(--f7-list-group-title-height);
3827 color: var(--f7-list-group-title-text-color);
3828 font-size: var(--f7-list-group-title-font-size);
3829 font-weight: var(--f7-list-group-title-font-weight);
3830 background-color: var(--f7-list-group-title-bg-color);
3831 line-height: var(--f7-list-group-title-line-height);
3832}
3833.list.inset {
3834 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3835 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3836 border-radius: var(--f7-list-inset-border-radius);
3837 --f7-safe-area-left: 0px;
3838 --f7-safe-area-right: 0px;
3839}
3840.list.inset .block-title {
3841 margin-left: 0;
3842 margin-right: 0;
3843}
3844.list.inset ul {
3845 border-radius: var(--f7-list-inset-border-radius);
3846}
3847.list.inset ul:before {
3848 display: none !important;
3849}
3850.list.inset ul:after {
3851 display: none !important;
3852}
3853.list.inset li.swipeout:first-child,
3854.list.inset li:first-child > a {
3855 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3856}
3857.list.inset li.swipeout:last-child,
3858.list.inset li:last-child > a {
3859 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3860}
3861.list.inset li.swipeout:first-child:last-child,
3862.list.inset li:first-child:last-child > a {
3863 border-radius: var(--f7-list-inset-border-radius);
3864}
3865@media (min-width: 768px) {
3866 .list.tablet-inset {
3867 margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
3868 margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
3869 border-radius: var(--f7-list-inset-border-radius);
3870 --f7-safe-area-left: 0px;
3871 --f7-safe-area-right: 0px;
3872 }
3873 .list.tablet-inset .block-title {
3874 margin-left: 0;
3875 margin-right: 0;
3876 }
3877 .list.tablet-inset ul {
3878 border-radius: var(--f7-list-inset-border-radius);
3879 }
3880 .list.tablet-inset ul:before {
3881 display: none !important;
3882 }
3883 .list.tablet-inset ul:after {
3884 display: none !important;
3885 }
3886 .list.tablet-inset li:first-child > a {
3887 border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
3888 }
3889 .list.tablet-inset li:last-child > a {
3890 border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
3891 }
3892 .list.tablet-inset li:first-child:last-child > a {
3893 border-radius: var(--f7-list-inset-border-radius);
3894 }
3895}
3896.list.no-chevron,
3897.list .no-chevron {
3898 --f7-list-chevron-icon-color: transparent;
3899 --f7-list-chevron-icon-area: 0px;
3900}
3901.ios .list ul ul {
3902 padding-right: calc(var(--f7-list-item-padding-horizontal) + 30px);
3903}
3904.ios .item-link.active-state .item-inner:after,
3905.ios .list-button.active-state:after,
3906.ios .links-list a.active-state:after {
3907 background-color: transparent;
3908}
3909.ios .links-list a.active-state,
3910.ios .list .item-link.active-state,
3911.ios .list .list-button.active-state {
3912 transition-duration: 0ms;
3913}
3914.ios .media-list .item-title,
3915.ios li.media-item .item-title {
3916 font-weight: 600;
3917}
3918.md .list ul ul {
3919 padding-right: calc(var(--f7-list-item-padding-horizontal) + 40px);
3920}
3921.md .list .item-media {
3922 min-width: 40px;
3923}
3924/* === Badge === */
3925:root {
3926 --f7-badge-text-color: #fff;
3927 --f7-badge-bg-color: #8e8e93;
3928 --f7-badge-padding: 0 4px;
3929 --f7-badge-in-icon-size: 16px;
3930 --f7-badge-in-icon-font-size: 10px;
3931 --f7-badge-font-weight: normal;
3932 --f7-badge-font-size: 12px;
3933}
3934.ios {
3935 --f7-badge-size: 20px;
3936}
3937.md {
3938 --f7-badge-size: 18px;
3939}
3940.badge {
3941 display: inline-flex;
3942 align-items: center;
3943 align-content: center;
3944 justify-content: center;
3945 color: var(--f7-badge-text-color);
3946 background: var(--f7-badge-bg-color);
3947 position: relative;
3948 box-sizing: border-box;
3949 text-align: center;
3950 vertical-align: middle;
3951 font-weight: var(--f7-badge-font-weight);
3952 font-size: var(--f7-badge-font-size);
3953 border-radius: var(--f7-badge-size);
3954 padding: var(--f7-badge-padding);
3955 height: var(--f7-badge-size);
3956 min-width: var(--f7-badge-size);
3957}
3958.icon .badge,
3959.f7-icons .badge,
3960.framework7-icons .badge,
3961.material-icons .badge {
3962 position: absolute;
3963 left: 100%;
3964 margin-left: -10px;
3965 top: -2px;
3966 font-family: var(--f7-font-family);
3967 --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
3968 --f7-badge-size: var(--f7-badge-in-icon-size);
3969}
3970.badge[class*="color-"] {
3971 --f7-badge-bg-color: var(--f7-theme-color);
3972}
3973:root {
3974 --f7-button-font-size: 14px;
3975 --f7-button-min-width: 32px;
3976 --f7-button-bg-color: transparent;
3977 --f7-button-border-width: 0px;
3978 /*
3979 --f7-button-text-color: var(--f7-theme-color);
3980 --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
3981 --f7-button-border-color: var(--f7-theme-color);
3982 --f7-button-fill-text-color: #fff;
3983 --f7-button-fill-bg-color: var(--f7-theme-color);
3984 --f7-button-outline-border-color: var(--f7-theme-color);
3985 */
3986 --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
3987 --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0,0,0,0.23);
3988 --f7-segmented-raised-divider-color: rgba(0, 0, 0, 0.1);
3989}
3990.ios {
3991 --f7-button-height: 29px;
3992 --f7-button-padding-horizontal: 10px;
3993 --f7-button-border-radius: 5px;
3994 --f7-button-font-weight: 400;
3995 --f7-button-letter-spacing: 0;
3996 --f7-button-text-transform: none;
3997 /*
3998 --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
3999 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
4000 */
4001 --f7-button-outline-border-width: 1px;
4002 --f7-button-large-height: 44px;
4003 --f7-button-large-font-size: 17px;
4004 --f7-button-small-height: 26px;
4005 --f7-button-small-font-size: 13px;
4006 --f7-button-small-font-weight: 600;
4007 --f7-button-small-text-transform: uppercase;
4008 --f7-button-small-outline-border-width: 2px;
4009}
4010.md {
4011 --f7-button-height: 36px;
4012 --f7-button-padding-horizontal: 8px;
4013 --f7-button-border-radius: 4px;
4014 --f7-button-font-weight: 500;
4015 --f7-button-letter-spacing: 0.03em;
4016 --f7-button-text-transform: uppercase;
4017 --f7-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4018 /*
4019 --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
4020 */
4021 --f7-button-outline-border-width: 2px;
4022 --f7-button-large-height: 48px;
4023 --f7-button-large-font-size: 14px;
4024 --f7-button-small-height: 28px;
4025 --f7-button-small-font-size: 13px;
4026 --f7-button-small-font-weight: 500;
4027 --f7-button-small-text-transform: uppercase;
4028 --f7-button-small-outline-border-width: 2px;
4029}
4030.md .theme-dark,
4031.md.theme-dark {
4032 --f7-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
4033}
4034button {
4035 -webkit-appearance: none;
4036 -moz-appearance: none;
4037 appearance: none;
4038 width: 100%;
4039}
4040.button {
4041 text-decoration: none;
4042 text-align: center;
4043 display: block;
4044 -webkit-appearance: none;
4045 -moz-appearance: none;
4046 appearance: none;
4047 background: none;
4048 margin: 0;
4049 white-space: nowrap;
4050 text-overflow: ellipsis;
4051 position: relative;
4052 overflow: hidden;
4053 font-family: inherit;
4054 cursor: pointer;
4055 outline: 0;
4056 box-sizing: border-box;
4057 vertical-align: middle;
4058 border: var(--f7-button-border-width, 0px) solid var(--f7-button-border-color, var(--f7-theme-color));
4059 font-size: var(--f7-button-font-size);
4060 color: var(--f7-button-text-color, var(--f7-theme-color));
4061 height: var(--f7-button-height);
4062 line-height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2);
4063 padding: var(--f7-button-padding-vertical, 0) var(--f7-button-padding-horizontal);
4064 border-radius: var(--f7-button-border-radius);
4065 min-width: var(--f7-button-min-width);
4066 font-weight: var(--f7-button-font-weight);
4067 letter-spacing: var(--f7-button-letter-spacing);
4068 text-transform: var(--f7-button-text-transform);
4069 background-color: var(--f7-button-bg-color);
4070 box-shadow: var(--f7-button-box-shadow);
4071}
4072.button.active-state {
4073 background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4074 color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
4075}
4076input[type="submit"].button,
4077input[type="button"].button {
4078 width: 100%;
4079}
4080.button > i + span,
4081.button > span + span,
4082.button > span + i,
4083.button > i + i {
4084 margin-right: 4px;
4085}
4086.subnavbar .button,
4087.navbar .button,
4088.toolbar .button,
4089.searchbar .button {
4090 color: var(--f7-button-text-color, var(--f7-theme-color));
4091}
4092.button-round,
4093.ios .button-round-ios,
4094.md .button-round-md {
4095 --f7-button-border-radius: var(--f7-button-height);
4096}
4097.button-fill,
4098.ios .button-fill-ios,
4099.md .button-fill-md,
4100.button-active,
4101.button.tab-link-active {
4102 --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
4103 --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
4104 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4105}
4106.button-fill,
4107.ios .button-fill-ios,
4108.md .button-fill-md {
4109 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
4110}
4111.button-active,
4112.button.tab-link-active {
4113 --f7-button-pressed-bg-color: var(--f7-button-bg-color);
4114}
4115.button-outline,
4116.ios .button-outline-ios,
4117.md .button-outline-md {
4118 --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
4119 --f7-button-border-width: var(--f7-button-outline-border-width);
4120}
4121.button-large,
4122.ios .button-large-ios,
4123.md .button-large-md {
4124 --f7-button-height: var(--f7-button-large-height);
4125 --f7-button-font-size: var(--f7-button-large-font-size);
4126}
4127.button-small,
4128.ios .button-small-ios,
4129.md .button-small-md {
4130 --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
4131 --f7-button-height: var(--f7-button-small-height);
4132 --f7-button-font-size: var(--f7-button-small-font-size);
4133 --f7-button-font-weight: var(--f7-button-small-font-weight);
4134 --f7-button-text-transform: var(--f7-button-small-text-transform);
4135}
4136.ios .button-small.button-fill,
4137.ios .button-small-ios.button-fill,
4138.ios .button-small.button-fill-ios {
4139 --f7-button-border-width: var(--f7-button-small-outline-border-width);
4140 --f7-button-pressed-text-color: var(--f7-theme-color);
4141 --f7-button-pressed-bg-color: transparent;
4142}
4143.segmented {
4144 align-self: center;
4145 display: flex;
4146 flex-wrap: nowrap;
4147 border-radius: var(--f7-button-border-radius);
4148 box-shadow: var(--f7-button-box-shadow);
4149}
4150.segmented .button,
4151.segmented button {
4152 width: 100%;
4153 flex-shrink: 1;
4154 min-width: 0;
4155 border-radius: 0;
4156}
4157.segmented .button:first-child {
4158 border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
4159}
4160.segmented .button:not(.button-outline):first-child {
4161 border-right: none;
4162}
4163.segmented .button.button-outline:nth-child(n + 2) {
4164 border-right: none;
4165}
4166.segmented .button:last-child {
4167 border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
4168}
4169.segmented .button-round:first-child {
4170 border-radius: 0 var(--f7-button-height) var(--f7-button-height) 0;
4171}
4172.segmented .button-round:last-child {
4173 border-radius: var(--f7-button-height) 0 0 var(--f7-button-height);
4174}
4175.segmented .button:first-child:last-child {
4176 border-radius: var(--f7-button-border-radius);
4177}
4178.segmented-round,
4179.ios .segmented-round-ios,
4180.md .segmented-round-md {
4181 border-radius: var(--f7-button-height);
4182}
4183.segmented-raised,
4184.ios .segmented-raised-ios,
4185.md .segmented-raised-md {
4186 box-shadow: var(--f7-button-raised-box-shadow);
4187}
4188.segmented-raised .button:not(.button-outline),
4189.ios .segmented-raised-ios .button:not(.button-outline),
4190.md .segmented-raised-md .button:not(.button-outline) {
4191 border-right: 1px solid var(--f7-segmented-raised-divider-color);
4192}
4193.button-raised,
4194.ios .button-raised-ios,
4195.md .button-raised-md {
4196 --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
4197}
4198.button-raised.active-state,
4199.ios .button-raised-ios.active-state,
4200.md .button-raised-md.active-state {
4201 --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
4202}
4203.subnavbar .segmented {
4204 width: 100%;
4205}
4206.ios .button {
4207 transition-duration: 100ms;
4208}
4209.ios .button-fill,
4210.ios .button-fill-ios {
4211 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
4212}
4213.ios .button-small,
4214.ios .button-small-ios {
4215 transition-duration: 200ms;
4216}
4217.md .button {
4218 transition-duration: 300ms;
4219 transform: translate3d(0, 0, 0);
4220}
4221.md .button-fill,
4222.md .button-fill-md {
4223 --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
4224}
4225/* === Touch Ripple === */
4226:root {
4227 --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
4228 --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
4229 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
4230}
4231.theme-dark {
4232 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
4233}
4234.ripple,
4235.fab a,
4236a.link,
4237a.item-link,
4238a.list-button,
4239.button,
4240.dialog-button,
4241.tab-link,
4242.radio,
4243.checkbox,
4244.actions-button,
4245.speed-dial-buttons a {
4246 -webkit-user-select: none;
4247 -moz-user-select: none;
4248 -ms-user-select: none;
4249 user-select: none;
4250}
4251.ripple-wave {
4252 left: 0;
4253 top: 0;
4254 position: absolute !important;
4255 border-radius: 50%;
4256 pointer-events: none;
4257 z-index: -1;
4258 padding: 0;
4259 margin: 0;
4260 font-size: 0;
4261 transform: translate3d(0px, 0px, 0) scale(0);
4262 transition-duration: 1400ms;
4263 background-color: var(--f7-touch-ripple-color);
4264 will-change: transform, opacity;
4265}
4266.ripple-wave.ripple-wave-fill {
4267 transition-duration: 300ms;
4268 opacity: 0.35;
4269}
4270.ripple-wave.ripple-wave-out {
4271 transition-duration: 600ms;
4272 opacity: 0;
4273}
4274.button-fill .ripple-wave,
4275.picker-calendar-day .ripple-wave,
4276.menu .ripple-wave {
4277 z-index: 1;
4278}
4279.checkbox .ripple-wave,
4280.radio .ripple-wave,
4281.data-table .sortable-cell .ripple-wave {
4282 z-index: 0;
4283}
4284[class*="ripple-color-"] {
4285 --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
4286}
4287/* === Icon === */
4288i.icon {
4289 display: inline-block;
4290 vertical-align: middle;
4291 background-size: 100% auto;
4292 background-position: center;
4293 background-repeat: no-repeat;
4294 font-style: normal;
4295 position: relative;
4296}
4297.icon-back:after,
4298.icon-prev:after,
4299.icon-forward:after,
4300.icon-next:after {
4301 font-family: 'framework7-core-icons';
4302 font-weight: normal;
4303 font-style: normal;
4304 line-height: 1;
4305 letter-spacing: normal;
4306 text-transform: none;
4307 white-space: nowrap;
4308 word-wrap: normal;
4309 direction: ltr;
4310 -webkit-font-smoothing: antialiased;
4311 text-rendering: optimizeLegibility;
4312 -moz-osx-font-smoothing: grayscale;
4313 -moz-font-feature-settings: "liga";
4314 font-feature-settings: "liga";
4315 text-align: center;
4316 display: block;
4317 width: 100%;
4318 height: 100%;
4319 font-size: 20px;
4320}
4321.icon[class*="color-"] {
4322 color: var(--f7-theme-color);
4323}
4324.ios .icon-back,
4325.ios .icon-prev,
4326.ios .icon-forward,
4327.ios .icon-next {
4328 width: 12px;
4329 height: 20px;
4330 line-height: 20px;
4331}
4332.ios .icon-back:after,
4333.ios .icon-prev:after,
4334.ios .icon-forward:after,
4335.ios .icon-next:after {
4336 line-height: inherit;
4337}
4338.ios .icon-prev:after,
4339.ios .icon-next:after {
4340 font-size: 16px;
4341}
4342.ios .item-media .icon {
4343 color: #808080;
4344}
4345.ios .item-media .f7-icons {
4346 font-size: 28px;
4347 width: 28px;
4348 height: 28px;
4349}
4350.ios .icon-back:after,
4351.ios .icon-prev:after {
4352 content: 'chevron_right_ios';
4353}
4354.ios .icon-forward:after,
4355.ios .icon-next:after {
4356 content: 'chevron_left_ios';
4357}
4358.md .icon-back,
4359.md .icon-forward,
4360.md .icon-next,
4361.md .icon-prev {
4362 width: 24px;
4363 height: 24px;
4364}
4365.md .icon-back:after,
4366.md .icon-forward:after,
4367.md .icon-next:after,
4368.md .icon-prev:after {
4369 line-height: 1.2;
4370}
4371.md .item-media .icon {
4372 color: #737373;
4373}
4374.md .item-media .material-icons {
4375 font-size: 24px;
4376 width: 24px;
4377 height: 24px;
4378}
4379.md .icon-back:after {
4380 content: 'arrow_right_md';
4381}
4382.md .icon-forward:after {
4383 content: 'arrow_left_md';
4384}
4385.md .icon-next:after {
4386 content: 'chevron_left_md';
4387}
4388.md .icon-prev:after {
4389 content: 'chevron_right_md';
4390}
4391.custom-modal-backdrop {
4392 z-index: 10500;
4393}
4394.custom-modal-backdrop,
4395.actions-backdrop,
4396.dialog-backdrop,
4397.popover-backdrop,
4398.popup-backdrop,
4399.preloader-backdrop,
4400.sheet-backdrop {
4401 position: absolute;
4402 left: 0;
4403 top: 0;
4404 width: 100%;
4405 height: 100%;
4406 background: rgba(0, 0, 0, 0.4);
4407 z-index: 13000;
4408 visibility: hidden;
4409 opacity: 0;
4410 transition-duration: 400ms;
4411}
4412.custom-modal-backdrop.not-animated,
4413.actions-backdrop.not-animated,
4414.dialog-backdrop.not-animated,
4415.popover-backdrop.not-animated,
4416.popup-backdrop.not-animated,
4417.preloader-backdrop.not-animated,
4418.sheet-backdrop.not-animated {
4419 transition-duration: 0ms;
4420}
4421.custom-modal-backdrop.backdrop-in,
4422.actions-backdrop.backdrop-in,
4423.dialog-backdrop.backdrop-in,
4424.popover-backdrop.backdrop-in,
4425.popup-backdrop.backdrop-in,
4426.preloader-backdrop.backdrop-in,
4427.sheet-backdrop.backdrop-in {
4428 visibility: visible;
4429 opacity: 1;
4430}
4431/* === Dialog === */
4432:root {
4433 --f7-dialog-button-text-color: var(--f7-theme-color);
4434}
4435.ios {
4436 --f7-dialog-bg-color: rgba(255, 255, 255, 0.95);
4437 --f7-dialog-box-shadow: none;
4438 --f7-dialog-width: 270px;
4439 --f7-dialog-border-radius: 13px;
4440 --f7-dialog-text-color: #000;
4441 --f7-dialog-text-align: center;
4442 --f7-dialog-font-size: 14px;
4443 --f7-dialog-title-text-color: inherit;
4444 --f7-dialog-title-font-size: 18px;
4445 --f7-dialog-title-font-weight: 600;
4446 --f7-dialog-title-line-height: inherit;
4447 --f7-dialog-button-font-size: 17px;
4448 --f7-dialog-button-height: 44px;
4449 --f7-dialog-button-letter-spacing: 0;
4450 --f7-dialog-button-text-align: center;
4451 --f7-dialog-button-font-weight: 400;
4452 --f7-dialog-button-text-transform: none;
4453 --f7-dialog-button-pressed-bg-color: rgba(230, 230, 230, 0.95);
4454 --f7-dialog-input-font-size: 14px;
4455 --f7-dialog-input-height: 32px;
4456 --f7-dialog-input-bg-color: #fff;
4457 --f7-dialog-input-border-color: rgba(0, 0, 0, 0.3);
4458 --f7-dialog-input-border-width: 1px;
4459 --f7-dialog-input-placeholder-color: #a9a9a9;
4460 --f7-dialog-preloader-size: 34px;
4461}
4462.md {
4463 --f7-dialog-bg-color: #fff;
4464 --f7-dialog-box-shadow: var(--f7-elevation-24);
4465 --f7-dialog-width: 280px;
4466 --f7-dialog-border-radius: 4px;
4467 --f7-dialog-text-color: #757575;
4468 --f7-dialog-text-align: left;
4469 --f7-dialog-font-size: 16px;
4470 --f7-dialog-title-text-color: #212121;
4471 --f7-dialog-title-font-size: 20px;
4472 --f7-dialog-title-font-weight: 500;
4473 --f7-dialog-title-line-height: 1.3;
4474 --f7-dialog-button-font-size: 14px;
4475 --f7-dialog-button-height: 36px;
4476 --f7-dialog-button-letter-spacing: 0.03em;
4477 --f7-dialog-button-text-align: center;
4478 --f7-dialog-button-font-weight: 500;
4479 --f7-dialog-button-text-transform: uppercase;
4480 --f7-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
4481 --f7-dialog-input-font-size: 16px;
4482 --f7-dialog-input-height: 36px;
4483 --f7-dialog-input-bg-color: #fff;
4484 --f7-dialog-input-border-color: transparent;
4485 --f7-dialog-input-border-width: 0px;
4486 --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
4487 --f7-dialog-preloader-size: 32px;
4488}
4489.dialog {
4490 position: absolute;
4491 z-index: 13500;
4492 left: 50%;
4493 margin-top: 0;
4494 top: 50%;
4495 overflow: hidden;
4496 opacity: 0;
4497 transform: translate3d(0, -50%, 0) scale(1.185);
4498 transition-property: transform, opacity;
4499 display: none;
4500 transition-duration: 400ms;
4501 box-shadow: var(--f7-dialog-box-shadow);
4502 width: var(--f7-dialog-width);
4503 margin-left: calc(-1 * var(--f7-dialog-width) / 2);
4504 border-radius: var(--f7-dialog-border-radius);
4505 text-align: var(--f7-dialog-text-align);
4506 color: var(--f7-dialog-text-color);
4507 font-size: var(--f7-dialog-font-size);
4508 will-change: transform, opacity;
4509}
4510.dialog.modal-in {
4511 opacity: 1;
4512 transform: translate3d(0, -50%, 0) scale(1);
4513}
4514.dialog.modal-out {
4515 opacity: 0;
4516 z-index: 13499;
4517}
4518.dialog.not-animated {
4519 transition-duration: 0ms;
4520}
4521.dialog-inner {
4522 position: relative;
4523}
4524.dialog-title {
4525 color: var(--f7-dialog-title-text-color);
4526 font-size: var(--f7-dialog-title-font-size);
4527 font-weight: var(--f7-dialog-title-font-weight);
4528 line-height: var(--f7-dialog-title-line-height);
4529}
4530.dialog-buttons {
4531 position: relative;
4532 display: flex;
4533 flex-direction: row-reverse;
4534}
4535.dialog-buttons-vertical .dialog-buttons {
4536 display: block;
4537 height: auto !important;
4538}
4539.dialog-button {
4540 box-sizing: border-box;
4541 overflow: hidden;
4542 position: relative;
4543 white-space: nowrap;
4544 text-overflow: ellipsis;
4545 color: var(--f7-dialog-button-text-color);
4546 font-size: var(--f7-dialog-button-font-size);
4547 height: var(--f7-dialog-button-height);
4548 line-height: var(--f7-dialog-button-height);
4549 letter-spacing: var(--f7-dialog-button-letter-spacing);
4550 text-align: var(--f7-dialog-button-text-align);
4551 font-weight: var(--f7-dialog-button-font-weight);
4552 text-transform: var(--f7-dialog-button-text-transform);
4553 display: block;
4554 cursor: pointer;
4555}
4556.dialog-button[class*="color-"] {
4557 --f7-dialog-button-text-color: var(--f7-theme-color);
4558}
4559.dialog-no-buttons .dialog-buttons {
4560 display: none;
4561}
4562.dialog-input-field {
4563 position: relative;
4564}
4565input.dialog-input[type] {
4566 box-sizing: border-box;
4567 margin: 0;
4568 margin-top: 15px;
4569 border-radius: 0;
4570 -webkit-appearance: none;
4571 -moz-appearance: none;
4572 appearance: none;
4573 width: 100%;
4574 display: block;
4575 font-family: inherit;
4576 box-shadow: none;
4577 font-size: var(--f7-dialog-input-font-size);
4578 height: var(--f7-dialog-input-height);
4579 background-color: var(--f7-dialog-input-bg-color);
4580 border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
4581}
4582input.dialog-input[type]::-webkit-input-placeholder {
4583 color: var(--f7-dialog-input-placeholder-color);
4584}
4585input.dialog-input[type]::-moz-placeholder {
4586 color: var(--f7-dialog-input-placeholder-color);
4587}
4588input.dialog-input[type]::-ms-input-placeholder {
4589 color: var(--f7-dialog-input-placeholder-color);
4590}
4591input.dialog-input[type]::placeholder {
4592 color: var(--f7-dialog-input-placeholder-color);
4593}
4594.dialog-preloader .preloader {
4595 --f7-preloader-size: var(--f7-dialog-preloader-size);
4596}
4597html.with-modal-dialog .page-content {
4598 overflow: hidden;
4599 -webkit-overflow-scrolling: auto;
4600}
4601.ios .dialog.modal-out {
4602 transform: translate3d(0, -50%, 0) scale(1);
4603}
4604.ios .dialog-inner {
4605 padding: 15px;
4606 border-radius: var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0;
4607 background: var(--f7-dialog-bg-color);
4608}
4609.ios .dialog-inner:after {
4610 content: '';
4611 position: absolute;
4612 background-color: rgba(0, 0, 0, 0.2);
4613 display: block;
4614 z-index: 15;
4615 top: auto;
4616 right: auto;
4617 bottom: 0;
4618 left: 0;
4619 height: 1px;
4620 width: 100%;
4621 transform-origin: 50% 100%;
4622 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4623}
4624.ios .dialog-title + .dialog-text {
4625 margin-top: 5px;
4626}
4627.ios .dialog-buttons {
4628 height: 44px;
4629 justify-content: center;
4630}
4631.ios .dialog-button {
4632 width: 100%;
4633 padding: 0 5px;
4634 -webkit-box-flex: 1;
4635 -ms-flex: 1;
4636 background: var(--f7-dialog-bg-color);
4637}
4638.ios .dialog-button:after {
4639 content: '';
4640 position: absolute;
4641 background-color: rgba(0, 0, 0, 0.2);
4642 display: block;
4643 z-index: 15;
4644 top: 0;
4645 right: 0;
4646 bottom: auto;
4647 left: auto;
4648 width: 1px;
4649 height: 100%;
4650 transform-origin: 100% 50%;
4651 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
4652}
4653.ios .dialog-button.active-state {
4654 background-color: var(--f7-dialog-button-pressed-bg-color);
4655}
4656.ios .dialog-button:first-child {
4657 border-radius: 0 0 0 var(--f7-dialog-border-radius);
4658}
4659.ios .dialog-button:last-child {
4660 border-radius: 0 0 var(--f7-dialog-border-radius) 0;
4661}
4662.ios .dialog-button:last-child:after {
4663 display: none !important;
4664}
4665.ios .dialog-button:first-child:last-child {
4666 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
4667}
4668.ios .dialog-button.dialog-button-bold {
4669 font-weight: 500;
4670}
4671.ios .dialog-buttons-vertical .dialog-buttons {
4672 height: auto;
4673}
4674.ios .dialog-buttons-vertical .dialog-button {
4675 border-radius: 0;
4676}
4677.ios .dialog-buttons-vertical .dialog-button:after {
4678 content: '';
4679 position: absolute;
4680 background-color: rgba(0, 0, 0, 0.2);
4681 display: block;
4682 z-index: 15;
4683 top: auto;
4684 right: auto;
4685 bottom: 0;
4686 left: 0;
4687 height: 1px;
4688 width: 100%;
4689 transform-origin: 50% 100%;
4690 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4691}
4692.ios .dialog-buttons-vertical .dialog-button:last-child {
4693 border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
4694}
4695.ios .dialog-buttons-vertical .dialog-button:last-child:after {
4696 display: none !important;
4697}
4698.ios .dialog-no-buttons .dialog-inner {
4699 border-radius: var(--f7-dialog-border-radius);
4700}
4701.ios .dialog-no-buttons .dialog-inner:after {
4702 display: none !important;
4703}
4704.ios .dialog-input-field {
4705 margin-top: 15px;
4706}
4707.ios .dialog-input {
4708 padding: 0 5px;
4709}
4710.ios .dialog-input + .dialog-input {
4711 margin-top: 5px;
4712}
4713.ios .dialog-input-double + .dialog-input-double {
4714 margin-top: 0;
4715}
4716.ios .dialog-input-double + .dialog-input-double .dialog-input {
4717 border-top: 0;
4718 margin-top: 0;
4719}
4720.ios .dialog-preloader .dialog-title ~ .preloader,
4721.ios .dialog-preloader .dialog-text ~ .preloader {
4722 margin-top: 15px;
4723}
4724.ios .dialog-progress .dialog-title ~ .progressbar,
4725.ios .dialog-progress .dialog-text ~ .progressbar,
4726.ios .dialog-progress .dialog-title ~ .progressbar-infinite,
4727.ios .dialog-progress .dialog-text ~ .progressbar-infinite {
4728 margin-top: 15px;
4729}
4730.md .dialog {
4731 background: var(--f7-dialog-bg-color);
4732}
4733.md .dialog.modal-out {
4734 transform: translate3d(0, -50%, 0) scale(0.815);
4735}
4736.md .dialog-inner {
4737 padding: 24px 24px 20px;
4738}
4739.md .dialog-title + .dialog-text {
4740 margin-top: 20px;
4741}
4742.md .dialog-text {
4743 line-height: 1.5;
4744}
4745.md .dialog-buttons {
4746 height: 48px;
4747 padding: 6px 8px;
4748 overflow: hidden;
4749 box-sizing: border-box;
4750 justify-content: flex-end;
4751}
4752.md .dialog-button {
4753 border-radius: 4px;
4754 min-width: 64px;
4755 padding: 0 8px;
4756 border: none;
4757 transition-duration: 300ms;
4758 transform: translate3d(0, 0, 0);
4759}
4760.md .dialog-button.active-state {
4761 background-color: var(--f7-dialog-button-pressed-bg-color);
4762}
4763.md .dialog-button.dialog-button-bold {
4764 font-weight: 700;
4765}
4766.md .dialog-button + .dialog-button {
4767 margin-left: 4px;
4768}
4769.md .dialog-buttons-vertical .dialog-buttons {
4770 padding: 0 0 8px 0;
4771}
4772.md .dialog-buttons-vertical .dialog-button {
4773 margin-left: 0;
4774 text-align: right;
4775 height: 48px;
4776 line-height: 48px;
4777 border-radius: 0;
4778 padding-left: 16px;
4779 padding-right: 16px;
4780}
4781.md .dialog-input {
4782 padding: 0;
4783 transition-duration: 200ms;
4784 position: relative;
4785}
4786.md .dialog-input + .dialog-input {
4787 margin-top: 16px;
4788}
4789.md .dialog-preloader .dialog-title,
4790.md .dialog-progress .dialog-title,
4791.md .dialog-preloader .dialog-inner,
4792.md .dialog-progress .dialog-inner {
4793 text-align: center;
4794}
4795.md .dialog-preloader .dialog-title ~ .preloader,
4796.md .dialog-preloader .dialog-text ~ .preloader {
4797 margin-top: 20px;
4798}
4799.md .dialog-progress .dialog-title ~ .progressbar,
4800.md .dialog-progress .dialog-text ~ .progressbar,
4801.md .dialog-progress .dialog-title ~ .progressbar-infinite,
4802.md .dialog-progress .dialog-text ~ .progressbar-infinite {
4803 margin-top: 16px;
4804}
4805/* === Popup === */
4806:root {
4807 --f7-popup-border-radius: 0px;
4808 --f7-popup-tablet-width: 630px;
4809 --f7-popup-tablet-height: 630px;
4810 /*
4811 --f7-popup-tablet-border-radius: 0px;
4812 */
4813}
4814.ios {
4815 --f7-popup-box-shadow: none;
4816}
4817.md {
4818 --f7-popup-box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5);
4819}
4820.popup-backdrop {
4821 z-index: 10500;
4822}
4823.popup {
4824 position: absolute;
4825 left: 0;
4826 top: var(--f7-statusbar-height);
4827 width: 100%;
4828 height: calc(100% - var(--f7-statusbar-height));
4829 display: none;
4830 box-sizing: border-box;
4831 transition-property: transform;
4832 transform: translate3d(0, 100%, 0);
4833 background: #fff;
4834 z-index: 11000;
4835 will-change: transform;
4836 overflow: hidden;
4837 border-radius: var(--f7-popup-border-radius);
4838}
4839.popup.modal-in,
4840.popup.modal-out {
4841 transition-duration: 400ms;
4842}
4843.popup.not-animated {
4844 transition-duration: 0ms;
4845}
4846.popup.modal-in {
4847 display: block;
4848 transform: translate3d(0, 0, 0);
4849}
4850.popup.modal-out {
4851 transform: translate3d(0, 100%, 0);
4852}
4853@media (min-width: 630px) and (min-height: 630px) {
4854 .popup:not(.popup-tablet-fullscreen) {
4855 width: var(--f7-popup-tablet-width);
4856 height: var(--f7-popup-tablet-height);
4857 left: 50%;
4858 top: 50%;
4859 margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
4860 margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
4861 transform: translate3d(0, 100vh, 0);
4862 box-shadow: var(--f7-popup-box-shadow);
4863 border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
4864 }
4865 .popup:not(.popup-tablet-fullscreen).modal-in {
4866 transform: translate3d(0, 0, 0);
4867 }
4868 .popup:not(.popup-tablet-fullscreen).modal-out {
4869 transform: translate3d(0, 100vh, 0);
4870 }
4871}
4872@media (max-width: 629px), (max-height: 629px) {
4873 .popup-backdrop {
4874 z-index: 9500;
4875 }
4876}
4877html.with-modal-popup .framework7-root > .views .page-content,
4878html.with-modal-popup .framework7-root > .view .page-content,
4879html.with-modal-popup .framework7-root > .panel .page-content {
4880 overflow: hidden;
4881 -webkit-overflow-scrolling: auto;
4882}
4883/* === Login Screen === */
4884:root {
4885 --f7-login-screen-bg-color: #fff;
4886 --f7-login-screen-content-bg-color: #fff;
4887 --f7-login-screen-blocks-max-width: 480px;
4888 /*
4889 --f7-login-screen-list-button-text-color: var(--f7-theme-color);
4890 */
4891 --f7-login-screen-title-text-align: center;
4892 --f7-login-screen-title-text-color: inherit;
4893 --f7-login-screen-title-letter-spacing: 0;
4894}
4895:root .theme-dark,
4896:root.theme-dark {
4897 --f7-login-screen-bg-color: #171717;
4898 --f7-login-screen-content-bg-color: transparent;
4899}
4900.ios {
4901 --f7-login-screen-blocks-margin-vertical: 25px;
4902 --f7-login-screen-title-font-size: 30px;
4903 --f7-login-screen-title-font-weight: normal;
4904}
4905.md {
4906 --f7-login-screen-blocks-margin-vertical: 24px;
4907 --f7-login-screen-title-font-size: 34px;
4908 --f7-login-screen-title-font-weight: normal;
4909}
4910.login-screen {
4911 position: absolute;
4912 left: 0;
4913 top: var(--f7-statusbar-height);
4914 width: 100%;
4915 height: calc(100% - var(--f7-statusbar-height));
4916 display: none;
4917 box-sizing: border-box;
4918 transition-property: transform;
4919 transform: translate3d(0, 100%, 0);
4920 background: var(--f7-login-screen-bg-color);
4921 z-index: 11000;
4922 will-change: transform;
4923}
4924.login-screen.modal-in,
4925.login-screen.modal-out {
4926 transition-duration: 400ms;
4927}
4928.login-screen.not-animated {
4929 transition-duration: 0ms;
4930}
4931.login-screen.modal-in {
4932 display: block;
4933 transform: translate3d(0, 0, 0);
4934}
4935.login-screen.modal-out {
4936 transform: translate3d(0, 100%, 0);
4937}
4938.login-screen-content {
4939 background: var(--f7-login-screen-content-bg-color);
4940}
4941.login-screen-content .list-button {
4942 text-align: center;
4943 color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
4944}
4945.login-screen-content .login-screen-title,
4946.login-screen-content .list,
4947.login-screen-content .block {
4948 margin: var(--f7-login-screen-blocks-margin-vertical) auto;
4949}
4950.login-screen-content .login-screen-title,
4951.login-screen-content .list,
4952.login-screen-content .block,
4953.login-screen-content .block-footer,
4954.login-screen-content .block-header {
4955 max-width: var(--f7-login-screen-blocks-max-width);
4956}
4957.login-screen-content .list ul {
4958 background: none;
4959}
4960.login-screen-content .list ul:before {
4961 display: none !important;
4962}
4963.login-screen-content .list ul:after {
4964 display: none !important;
4965}
4966.login-screen-content .block-footer,
4967.login-screen-content .block-header {
4968 text-align: center;
4969 margin-left: auto;
4970 margin-right: auto;
4971}
4972.login-screen-title {
4973 text-align: var(--f7-login-screen-title-text-align);
4974 font-size: var(--f7-login-screen-title-font-size);
4975 font-weight: var(--f7-login-screen-title-font-weight);
4976 color: var(--f7-login-screen-title-text-color);
4977 letter-spacing: var(--f7-login-screen-title-letter-spacing);
4978}
4979.theme-dark .login-screen-content .list ul,
4980.theme-dark .login-screen-content .block-strong {
4981 background-color: transparent;
4982}
4983/* === Popover === */
4984:root {
4985 --f7-popover-width: 260px;
4986}
4987.ios {
4988 --f7-popover-bg-color: rgba(255, 255, 255, 0.95);
4989 --f7-popover-border-radius: 13px;
4990 --f7-popover-box-shadow: none;
4991 --f7-popover-actions-icon-size: 28px;
4992 --f7-popover-actions-label-text-color: #8a8a8a;
4993}
4994.ios .theme-dark,
4995.ios.theme-dark {
4996 --f7-popover-bg-color: rgba(30, 30, 30, 0.95);
4997}
4998.md {
4999 --f7-popover-bg-color: #fff;
5000 --f7-popover-border-radius: 4px;
5001 --f7-popover-box-shadow: var(--f7-elevation-8);
5002 --f7-popover-actions-icon-size: 24px;
5003 --f7-popover-actions-label-text-color: rgba(0, 0, 0, 0.54);
5004}
5005.md .theme-dark,
5006.md.theme-dark {
5007 --f7-popover-bg-color: #202020;
5008 --f7-popover-actions-label-text-color: rgba(255, 255, 255, 0.54);
5009}
5010.popover {
5011 width: var(--f7-popover-width);
5012 z-index: 13500;
5013 margin: 0;
5014 top: 0;
5015 opacity: 0;
5016 left: 0;
5017 position: absolute;
5018 display: none;
5019 transition-duration: 300ms;
5020 background-color: var(--f7-popover-bg-color);
5021 border-radius: var(--f7-popover-border-radius);
5022 box-shadow: var(--f7-popover-box-shadow);
5023 will-change: transform, opacity;
5024}
5025.popover .list {
5026 margin: 0;
5027}
5028.popover .list ul {
5029 background: none;
5030}
5031.popover .list:first-child ul:before {
5032 display: none !important;
5033}
5034.popover .list:last-child ul:after {
5035 display: none !important;
5036}
5037.popover .list:first-child ul {
5038 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5039}
5040.popover .list:first-child li:first-child,
5041.popover .list:first-child li:first-child a,
5042.popover .list:first-child li:first-child > label {
5043 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
5044}
5045.popover .list:last-child ul {
5046 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5047}
5048.popover .list:last-child li:last-child,
5049.popover .list:last-child li:last-child a,
5050.popover .list:last-child li:last-child > label {
5051 border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
5052}
5053.popover .list:first-child:last-child li:first-child:last-child,
5054.popover .list:first-child:last-child li:first-child:last-child a,
5055.popover .list:first-child:last-child li:first-child:last-child > label,
5056.popover .list:first-child:last-child ul {
5057 border-radius: var(--f7-popover-border-radius);
5058}
5059.popover .list + .list {
5060 margin-top: var(--f7-list-margin-vertical);
5061}
5062.popover.modal-in {
5063 opacity: 1;
5064}
5065.popover.not-animated {
5066 transition-duration: 0ms;
5067}
5068.popover-inner {
5069 will-change: scroll-position;
5070 overflow: auto;
5071 -webkit-overflow-scrolling: touch;
5072}
5073.popover-from-actions .item-link i.icon {
5074 width: var(--f7-popover-actions-icon-size);
5075 height: var(--f7-popover-actions-icon-size);
5076 font-size: var(--f7-popover-actions-icon-size);
5077}
5078.popover-from-actions-bold {
5079 font-weight: 600;
5080}
5081.popover-from-actions-label {
5082 line-height: 1.3;
5083 position: relative;
5084 display: flex;
5085 align-items: center;
5086 padding: var(--f7-actions-label-padding);
5087 color: var(--f7-popover-actions-label-text-color);
5088 font-size: var(--f7-actions-label-font-size);
5089 justify-content: var(--f7-actions-label-justify-content);
5090}
5091.popover-from-actions-label:after {
5092 content: '';
5093 position: absolute;
5094 background-color: var(--f7-list-item-border-color);
5095 display: block;
5096 z-index: 15;
5097 top: auto;
5098 right: auto;
5099 bottom: 0;
5100 left: 0;
5101 height: 1px;
5102 width: 100%;
5103 transform-origin: 50% 100%;
5104 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5105}
5106.popover-from-actions-label:last-child:after {
5107 display: none !important;
5108}
5109.ios .popover {
5110 transform: none;
5111 transition-property: opacity;
5112}
5113.ios .popover-angle {
5114 width: 26px;
5115 height: 26px;
5116 position: absolute;
5117 left: -26px;
5118 top: 0;
5119 z-index: 100;
5120 overflow: hidden;
5121}
5122.ios .popover-angle:after {
5123 content: '';
5124 background: var(--f7-popover-bg-color);
5125 width: 26px;
5126 height: 26px;
5127 position: absolute;
5128 left: 0;
5129 top: 0;
5130 border-radius: 3px;
5131 transform: rotate(45deg);
5132}
5133.ios .popover-angle.on-left {
5134 left: -26px;
5135}
5136.ios .popover-angle.on-left:after {
5137 left: 19px;
5138 top: 0;
5139}
5140.ios .popover-angle.on-right {
5141 left: 100%;
5142}
5143.ios .popover-angle.on-right:after {
5144 left: -19px;
5145 top: 0;
5146}
5147.ios .popover-angle.on-top {
5148 left: 0;
5149 top: -26px;
5150}
5151.ios .popover-angle.on-top:after {
5152 left: 0;
5153 top: 19px;
5154}
5155.ios .popover-angle.on-bottom {
5156 left: 0;
5157 top: 100%;
5158}
5159.ios .popover-angle.on-bottom:after {
5160 left: 0;
5161 top: -19px;
5162}
5163.md .popover {
5164 transform: scale(0.85, 0.6);
5165 transition-property: opacity, transform;
5166}
5167.md .popover.modal-in {
5168 opacity: 1;
5169 transform: scale(1);
5170}
5171.md .popover.modal-out {
5172 opacity: 0;
5173 transform: scale(1);
5174}
5175.md .popover-on-top {
5176 transform-origin: center bottom;
5177}
5178.md .popover-on-bottom {
5179 transform-origin: center top;
5180}
5181/* === Actions === */
5182.ios {
5183 --f7-actions-bg-color: rgba(255, 255, 255, 0.95);
5184 --f7-actions-border-radius: 13px;
5185 --f7-actions-button-border-color: rgba(0, 0, 0, 0.2);
5186 --f7-actions-button-text-color: var(--f7-theme-color);
5187 --f7-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
5188 --f7-actions-button-padding: 0px;
5189 --f7-actions-button-text-align: center;
5190 --f7-actions-button-height: 57px;
5191 --f7-actions-button-height-landscape: 44px;
5192 --f7-actions-button-font-size: 20px;
5193 --f7-actions-button-icon-size: 28px;
5194 --f7-actions-button-justify-content: center;
5195 --f7-actions-label-padding: 8px 10px;
5196 --f7-actions-label-text-color: #8a8a8a;
5197 --f7-actions-label-font-size: 13px;
5198 --f7-actions-label-justify-content: center;
5199 --f7-actions-group-border-color: transparent;
5200 --f7-actions-group-margin: 8px;
5201 --f7-actions-grid-button-text-color: #757575;
5202 --f7-actions-grid-button-icon-size: 48px;
5203 --f7-actions-grid-button-font-size: 12px;
5204}
5205.md {
5206 --f7-actions-bg-color: #fff;
5207 --f7-actions-border-radius: 0px;
5208 --f7-actions-button-border-color: transparent;
5209 --f7-actions-button-text-color: rgba(0, 0, 0, 0.87);
5210 --f7-actions-button-pressed-bg-color: #e5e5e5;
5211 --f7-actions-button-padding: 0 16px;
5212 --f7-actions-button-text-align: left;
5213 --f7-actions-button-height: 48px;
5214 --f7-actions-button-height-landscape: 48px;
5215 --f7-actions-button-font-size: 16px;
5216 --f7-actions-button-icon-size: 24px;
5217 --f7-actions-button-justify-content: space-between;
5218 --f7-actions-label-padding: 12px 16px;
5219 --f7-actions-label-text-color: rgba(0, 0, 0, 0.54);
5220 --f7-actions-label-font-size: 16px;
5221 --f7-actions-label-justify-content: flex-start;
5222 --f7-actions-group-border-color: #d2d2d6;
5223 --f7-actions-group-margin: 0px;
5224 --f7-actions-grid-button-text-color: #757575;
5225 --f7-actions-grid-button-icon-size: 48px;
5226 --f7-actions-grid-button-font-size: 12px;
5227}
5228.actions-modal {
5229 position: absolute;
5230 left: 0;
5231 bottom: 0;
5232 z-index: 13500;
5233 width: 100%;
5234 transform: translate3d(0, 100%, 0);
5235 display: none;
5236 max-height: 100%;
5237 will-change: scroll-position;
5238 overflow: auto;
5239 -webkit-overflow-scrolling: touch;
5240 transition-property: transform;
5241 will-change: transform;
5242}
5243.actions-modal.modal-in,
5244.actions-modal.modal-out {
5245 transition-duration: 300ms;
5246}
5247.actions-modal.not-animated {
5248 transition-duration: 0ms;
5249}
5250.actions-modal.modal-in {
5251 transform: translate3d(0, calc(-1 * var(--f7-safe-area-bottom)), 0);
5252}
5253.actions-modal.modal-out {
5254 z-index: 13499;
5255 transform: translate3d(0, 100%, 0);
5256}
5257@media (min-width: 496px) {
5258 .actions-modal {
5259 width: 480px;
5260 left: 50%;
5261 margin-left: -240px;
5262 }
5263}
5264@media (orientation: landscape) {
5265 .actions-modal {
5266 --f7-actions-button-height: var(--f7-actions-button-height-landscape);
5267 }
5268}
5269.actions-group {
5270 overflow: hidden;
5271 position: relative;
5272 margin: var(--f7-actions-group-margin);
5273 border-radius: var(--f7-actions-border-radius);
5274 transform: translate3d(0, 0, 0);
5275}
5276.actions-group:after {
5277 content: '';
5278 position: absolute;
5279 background-color: var(--f7-actions-group-border-color);
5280 display: block;
5281 z-index: 15;
5282 top: auto;
5283 right: auto;
5284 bottom: 0;
5285 left: 0;
5286 height: 1px;
5287 width: 100%;
5288 transform-origin: 50% 100%;
5289 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5290}
5291.actions-group:last-child:after {
5292 display: none !important;
5293}
5294.actions-button,
5295.actions-label {
5296 width: 100%;
5297 font-weight: normal;
5298 margin: 0;
5299 box-sizing: border-box;
5300 display: block;
5301 position: relative;
5302 overflow: hidden;
5303 text-align: var(--f7-actions-button-text-align);
5304 background: var(--f7-actions-bg-color);
5305}
5306.actions-button:after,
5307.actions-label:after {
5308 content: '';
5309 position: absolute;
5310 background-color: var(--f7-actions-button-border-color);
5311 display: block;
5312 z-index: 15;
5313 top: auto;
5314 right: auto;
5315 bottom: 0;
5316 left: 0;
5317 height: 1px;
5318 width: 100%;
5319 transform-origin: 50% 100%;
5320 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5321}
5322.actions-button:first-child,
5323.actions-label:first-child {
5324 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
5325}
5326.actions-button:last-child,
5327.actions-label:last-child {
5328 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
5329}
5330.actions-button:last-child:after,
5331.actions-label:last-child:after {
5332 display: none !important;
5333}
5334.actions-button:first-child:last-child,
5335.actions-label:first-child:last-child {
5336 border-radius: var(--f7-actions-border-radius);
5337}
5338.actions-button a,
5339.actions-label a {
5340 text-decoration: none;
5341 color: inherit;
5342 display: block;
5343}
5344.actions-button b,
5345.actions-label b,
5346.actions-button.actions-button-bold,
5347.actions-label.actions-button-bold {
5348 font-weight: 600;
5349}
5350.actions-button {
5351 cursor: pointer;
5352 display: flex;
5353 color: var(--f7-actions-button-text-color);
5354 font-size: var(--f7-actions-button-font-size);
5355 height: var(--f7-actions-button-height);
5356 line-height: var(--f7-actions-button-height);
5357 padding: var(--f7-actions-button-padding);
5358 justify-content: var(--f7-actions-button-justify-content);
5359 z-index: 10;
5360}
5361.actions-button.active-state {
5362 background-color: var(--f7-actions-button-pressed-bg-color) !important;
5363}
5364.actions-button[class*="color-"] {
5365 color: var(--f7-theme-color);
5366}
5367.actions-button-media {
5368 flex-shrink: 0;
5369 display: flex;
5370 align-items: center;
5371}
5372.actions-button-media i.icon {
5373 width: var(--f7-actions-button-icon-size);
5374 height: var(--f7-actions-button-icon-size);
5375 font-size: var(--f7-actions-button-icon-size);
5376}
5377.actions-button a,
5378.actions-button-text {
5379 position: relative;
5380 overflow: hidden;
5381 white-space: nowrap;
5382 text-overflow: ellipsis;
5383}
5384.actions-button-text {
5385 width: 100%;
5386 flex-shrink: 1;
5387 text-align: var(--f7-actions-button-text-align);
5388}
5389.actions-label {
5390 line-height: 1.3;
5391 display: flex;
5392 align-items: center;
5393 font-size: var(--f7-actions-label-font-size);
5394 color: var(--f7-actions-label-text-color);
5395 padding: var(--f7-actions-label-padding);
5396 justify-content: var(--f7-actions-label-justify-content);
5397 min-height: var(--f7-actions-label-min-height, var(--f7-actions-button-height));
5398}
5399.actions-label[class*=" color-"] {
5400 --f7-actions-label-text-color: var(--f7-theme-color);
5401}
5402.actions-grid .actions-group {
5403 display: flex;
5404 flex-wrap: wrap;
5405 justify-content: flex-start;
5406 border-radius: 0;
5407 background: var(--f7-actions-bg-color);
5408 margin-top: 0;
5409}
5410.actions-grid .actions-group:first-child {
5411 border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
5412}
5413.actions-grid .actions-group:last-child {
5414 border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
5415}
5416.actions-grid .actions-group:first-child:last-child {
5417 border-radius: var(--f7-actions-border-radius);
5418}
5419.actions-grid .actions-group:not(:last-child) {
5420 margin-bottom: 0;
5421}
5422.actions-grid .actions-button,
5423.actions-grid .actions-label {
5424 border-radius: 0 !important;
5425 background: none;
5426}
5427.actions-grid .actions-button {
5428 width: 33.33333333%;
5429 display: block;
5430 color: var(--f7-actions-grid-button-text-color);
5431 height: auto;
5432 line-height: 1;
5433 padding: 16px;
5434}
5435.actions-grid .actions-button:after {
5436 display: none !important;
5437}
5438.actions-grid .actions-button-media {
5439 margin-left: auto !important;
5440 margin-right: auto !important;
5441 width: var(--f7-actions-grid-button-icon-size);
5442 height: var(--f7-actions-grid-button-icon-size);
5443}
5444.actions-grid .actions-button-media i.icon {
5445 width: var(--f7-actions-grid-button-icon-size);
5446 height: var(--f7-actions-grid-button-icon-size);
5447 font-size: var(--f7-actions-grid-button-icon-size);
5448}
5449.actions-grid .actions-button-text {
5450 margin-left: 0 !important;
5451 text-align: center !important;
5452 margin-top: 8px;
5453 line-height: 1.33em;
5454 height: 1.33em;
5455 font-size: var(--f7-actions-grid-button-font-size);
5456}
5457.ios .actions-button-media {
5458 margin-left: 15px;
5459}
5460.ios .actions-button-media + .actions-button-text {
5461 text-align: left;
5462 margin-left: 15px;
5463}
5464.md .actions-button {
5465 transition-duration: 300ms;
5466}
5467.md .actions-button-media {
5468 min-width: 40px;
5469}
5470.md .actions-button-media + .actions-button-text {
5471 margin-left: 16px;
5472}
5473/* === Sheet Modal === */
5474:root {
5475 --f7-sheet-height: 260px;
5476}
5477.ios {
5478 --f7-sheet-bg-color: #cfd5da;
5479 --f7-sheet-border-color: #929499;
5480}
5481.ios .theme-dark,
5482.ios.theme-dark {
5483 --f7-sheet-bg-color: #171717;
5484 --f7-sheet-border-color: var(--f7-bars-border-color);
5485}
5486.md {
5487 --f7-sheet-bg-color: #fff;
5488 --f7-sheet-border-color: transparent;
5489}
5490.md .theme-dark,
5491.md.theme-dark {
5492 --f7-sheet-bg-color: #202020;
5493 --f7-sheet-border-color: transparent;
5494}
5495.sheet-backdrop {
5496 z-index: 11000;
5497}
5498.sheet-modal {
5499 position: absolute;
5500 left: 0;
5501 bottom: 0;
5502 width: 100%;
5503 height: var(--f7-sheet-height);
5504 display: none;
5505 box-sizing: border-box;
5506 transition-property: transform;
5507 transform: translate3d(0, 100%, 0);
5508 background: var(--f7-sheet-bg-color);
5509 z-index: 12500;
5510 will-change: transform;
5511}
5512.sheet-modal:before {
5513 content: '';
5514 position: absolute;
5515 background-color: var(--f7-sheet-border-color);
5516 display: block;
5517 z-index: 15;
5518 top: 0;
5519 right: auto;
5520 bottom: auto;
5521 left: 0;
5522 height: 1px;
5523 width: 100%;
5524 transform-origin: 50% 0%;
5525 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
5526}
5527.sheet-modal:before {
5528 z-index: 600;
5529 -webkit-backface-visibility: hidden;
5530 backface-visibility: hidden;
5531 transform-style: preserve-3d;
5532}
5533.sheet-modal.modal-in,
5534.sheet-modal.modal-out {
5535 transition-duration: 300ms;
5536}
5537.sheet-modal.not-animated {
5538 transition-duration: 0ms;
5539}
5540.sheet-modal.modal-in {
5541 display: block;
5542 transform: translate3d(0, 0, 0);
5543}
5544.sheet-modal.modal-out {
5545 transform: translate3d(0, 100%, 0);
5546}
5547.sheet-modal .sheet-modal-inner {
5548 height: 100%;
5549 position: relative;
5550 overflow: hidden;
5551}
5552.sheet-modal .toolbar {
5553 position: relative;
5554 width: 100%;
5555}
5556.sheet-modal .toolbar:after,
5557.sheet-modal .toolbar:before {
5558 display: none;
5559}
5560.sheet-modal .toolbar ~ * .page-content {
5561 padding-top: 0;
5562 padding-bottom: 0;
5563}
5564.sheet-modal .toolbar + .sheet-modal-inner {
5565 height: calc(100% - var(--f7-toolbar-height));
5566}
5567.sheet-modal .toolbar ~ .sheet-modal-inner .page-content {
5568 padding-bottom: 0;
5569 padding-top: 0;
5570}
5571.sheet-modal .toolbar ~ .sheet-modal-inner .page-content,
5572.sheet-modal .sheet-modal-inner > .page-content {
5573 padding-bottom: var(--f7-safe-area-bottom);
5574}
5575.md .sheet-modal .toolbar a.link:not(.tab-link) {
5576 flex-shrink: 0;
5577}
5578/* === Toast === */
5579.ios {
5580 --f7-toast-text-color: #fff;
5581 --f7-toast-font-size: 14px;
5582 --f7-toast-bg-color: rgba(0, 0, 0, 0.75);
5583 --f7-toast-translucent-bg-color-ios: rgba(0, 0, 0, 0.75);
5584 --f7-toast-padding-horizontal: 15px;
5585 --f7-toast-padding-vertical: 12px;
5586 --f7-toast-border-radius: 8px;
5587 --f7-toast-button-min-width: 64px;
5588 --f7-toast-icon-size: 48px;
5589}
5590.md {
5591 --f7-toast-text-color: #fff;
5592 --f7-toast-font-size: 14px;
5593 --f7-toast-bg-color: #323232;
5594 --f7-toast-padding-horizontal: 24px;
5595 --f7-toast-padding-vertical: 14px;
5596 --f7-toast-border-radius: 4px;
5597 --f7-toast-button-min-width: 64px;
5598 --f7-toast-icon-size: 48px;
5599}
5600.toast {
5601 transition-property: transform, opacity;
5602 position: absolute;
5603 max-width: 568px;
5604 z-index: 20000;
5605 color: var(--f7-toast-text-color);
5606 font-size: var(--f7-toast-font-size);
5607 box-sizing: border-box;
5608 background-color: var(--f7-toast-bg-color);
5609 opacity: 0;
5610 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5611}
5612.toast.modal-in {
5613 opacity: 1;
5614}
5615.toast .toast-content {
5616 display: flex;
5617 justify-content: space-between;
5618 align-items: center;
5619 box-sizing: border-box;
5620 padding: var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal);
5621}
5622.toast .toast-text {
5623 line-height: 20px;
5624 flex-shrink: 1;
5625 min-width: 0;
5626}
5627.toast .toast-button {
5628 flex-shrink: 0;
5629 min-width: var(--f7-toast-button-min-width);
5630 margin-top: -8px;
5631 margin-bottom: -8px;
5632}
5633.toast.toast-with-icon .toast-content {
5634 display: block;
5635 text-align: center;
5636}
5637.toast.toast-with-icon .toast-text {
5638 text-align: center;
5639}
5640.toast.toast-with-icon .toast-icon .f7-icons,
5641.toast.toast-with-icon .toast-icon .material-icons {
5642 font-size: var(--f7-toast-icon-size);
5643 width: var(--f7-toast-icon-size);
5644 height: var(--f7-toast-icon-size);
5645}
5646.toast.toast-center {
5647 top: 50%;
5648}
5649.toast.toast-top {
5650 margin-top: var(--f7-statusbar-height);
5651}
5652.ios .toast {
5653 transition-duration: 300ms;
5654 width: 100%;
5655 left: 0;
5656}
5657@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
5658 .ios .toast {
5659 background: var(--f7-toast-translucent-bg-color-ios);
5660 -webkit-backdrop-filter: blur(10px);
5661 backdrop-filter: blur(10px);
5662 }
5663}
5664.ios .toast.toast-top {
5665 top: 0;
5666 transform: translate3d(0, -100%, 0);
5667}
5668.ios .toast.toast-top.modal-in {
5669 transform: translate3d(0, 0%, 0);
5670}
5671.ios .toast.toast-center {
5672 width: auto;
5673 left: 50%;
5674 border-radius: var(--f7-toast-border-radius);
5675 transform: translate3d(-50%, -50%, 0);
5676}
5677.ios .toast.toast-center.modal-in {
5678 transform: translate3d(-50%, -50%, 0);
5679}
5680.ios .toast.toast-bottom {
5681 bottom: 0;
5682 transform: translate3d(0, 100%, 0);
5683}
5684.ios .toast.toast-bottom.modal-in {
5685 transform: translate3d(0, 0%, 0);
5686}
5687@media (max-width: 568px) {
5688 .ios .toast.toast-bottom .toast-content {
5689 padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
5690 }
5691}
5692@media (min-width: 569px) {
5693 .ios .toast {
5694 left: 50%;
5695 margin-left: -284px;
5696 border-radius: var(--f7-toast-border-radius);
5697 }
5698 .ios .toast.toast-top {
5699 top: 15px;
5700 }
5701 .ios .toast.toast-center {
5702 margin-left: 0;
5703 }
5704 .ios .toast.toast-bottom {
5705 margin-bottom: calc(15px + var(--f7-safe-area-bottom));
5706 }
5707}
5708@media (min-width: 1024px) {
5709 .ios .toast {
5710 margin-left: 0;
5711 width: auto;
5712 }
5713 .ios .toast.toast-bottom,
5714 .ios .toast.toast-top {
5715 left: 15px;
5716 }
5717}
5718.ios .toast-button {
5719 margin-right: 15px;
5720 margin-left: calc(-1 * var(--f7-button-padding-horizontal));
5721}
5722.md .toast {
5723 transition-duration: 200ms;
5724 border-radius: var(--f7-toast-border-radius);
5725 left: 8px;
5726 width: calc(100% - 16px);
5727 transform: scale(0.9);
5728}
5729.md .toast.modal-in {
5730 transform: scale(1);
5731}
5732.md .toast.modal-out {
5733 transform: scale(1);
5734}
5735.md .toast.toast-top {
5736 top: 8px;
5737}
5738.md .toast.toast-center {
5739 left: 50%;
5740 width: auto;
5741 transform: scale(0.9) translate3d(-55%, -55%, 0);
5742}
5743.md .toast.toast-center.modal-in {
5744 transform: scale(1) translate3d(-50%, -50%, 0);
5745}
5746.md .toast.toast-center.modal-out {
5747 transform: scale(1) translate3d(-50%, -50%, 0);
5748}
5749.md .toast.toast-bottom {
5750 bottom: calc(8px + var(--f7-safe-area-bottom));
5751}
5752@media (min-width: 584px) {
5753 .md .toast {
5754 left: 50%;
5755 margin-left: -284px;
5756 }
5757 .md .toast.toast-center {
5758 margin-left: 0;
5759 }
5760}
5761@media (min-width: 1024px) {
5762 .md .toast {
5763 margin-left: 0;
5764 width: auto;
5765 }
5766 .md .toast.toast-bottom,
5767 .md .toast.toast-top {
5768 left: 24px;
5769 }
5770 .md .toast.toast-bottom {
5771 bottom: calc(24px + var(--f7-safe-area-bottom));
5772 }
5773 .md .toast.toast-top {
5774 top: 24px;
5775 }
5776}
5777.md .toast-button {
5778 margin-right: 16px;
5779 margin-left: -8px;
5780}
5781/* === Preloader === */
5782:root {
5783 --f7-preloader-modal-padding: 8px;
5784 --f7-preloader-modal-bg-color: rgba(0, 0, 0, 0.8);
5785}
5786.ios {
5787 --f7-preloader-color: #6c6c6c;
5788 --f7-preloader-size: 20px;
5789 --f7-preloader-modal-preloader-size: 34px;
5790 --f7-preloader-modal-border-radius: 5px;
5791}
5792.md {
5793 --f7-preloader-color: #757575;
5794 --f7-preloader-size: 32px;
5795 --f7-preloader-modal-preloader-size: 32px;
5796 --f7-preloader-modal-border-radius: 4px;
5797}
5798.preloader {
5799 display: inline-block;
5800 vertical-align: middle;
5801 width: var(--f7-preloader-size);
5802 height: var(--f7-preloader-size);
5803 font-size: 0;
5804 position: relative;
5805}
5806/* === Preloader Modal === */
5807.preloader-backdrop {
5808 visibility: visible;
5809 opacity: 0;
5810 background: none;
5811 z-index: 14000;
5812}
5813.preloader-modal {
5814 position: absolute;
5815 left: 50%;
5816 top: 50%;
5817 padding: var(--f7-preloader-modal-padding);
5818 background: var(--f7-preloader-modal-bg-color);
5819 z-index: 14500;
5820 transform: translateX(-50%) translateY(-50%);
5821 border-radius: var(--f7-preloader-modal-border-radius);
5822}
5823.preloader-modal .preloader {
5824 --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
5825 display: block !important;
5826}
5827html.with-modal-preloader .page-content {
5828 overflow: hidden;
5829 -webkit-overflow-scrolling: auto;
5830}
5831.preloader[class*="color-"] {
5832 --f7-preloader-color: var(--f7-theme-color);
5833}
5834.ios .preloader {
5835 animation: ios-preloader-spin 1s steps(12, end) infinite;
5836}
5837.ios .preloader .preloader-inner-line {
5838 display: block;
5839 width: 10%;
5840 height: 25%;
5841 border-radius: 100px;
5842 background: var(--f7-preloader-color);
5843 position: absolute;
5844 left: 50%;
5845 top: 50%;
5846 transform-origin: center 200%;
5847}
5848.ios .preloader .preloader-inner-line:nth-child(1) {
5849 transform: translate(-50%, -200%) rotate(0deg);
5850 opacity: 0.27;
5851}
5852.ios .preloader .preloader-inner-line:nth-child(2) {
5853 transform: translate(-50%, -200%) rotate(30deg);
5854 opacity: 0.32272727;
5855}
5856.ios .preloader .preloader-inner-line:nth-child(3) {
5857 transform: translate(-50%, -200%) rotate(60deg);
5858 opacity: 0.37545455;
5859}
5860.ios .preloader .preloader-inner-line:nth-child(4) {
5861 transform: translate(-50%, -200%) rotate(90deg);
5862 opacity: 0.42818182;
5863}
5864.ios .preloader .preloader-inner-line:nth-child(5) {
5865 transform: translate(-50%, -200%) rotate(120deg);
5866 opacity: 0.48090909;
5867}
5868.ios .preloader .preloader-inner-line:nth-child(6) {
5869 transform: translate(-50%, -200%) rotate(150deg);
5870 opacity: 0.53363636;
5871}
5872.ios .preloader .preloader-inner-line:nth-child(7) {
5873 transform: translate(-50%, -200%) rotate(180deg);
5874 opacity: 0.58636364;
5875}
5876.ios .preloader .preloader-inner-line:nth-child(8) {
5877 transform: translate(-50%, -200%) rotate(210deg);
5878 opacity: 0.63909091;
5879}
5880.ios .preloader .preloader-inner-line:nth-child(9) {
5881 transform: translate(-50%, -200%) rotate(240deg);
5882 opacity: 0.69181818;
5883}
5884.ios .preloader .preloader-inner-line:nth-child(10) {
5885 transform: translate(-50%, -200%) rotate(270deg);
5886 opacity: 0.74454545;
5887}
5888.ios .preloader .preloader-inner-line:nth-child(11) {
5889 transform: translate(-50%, -200%) rotate(300deg);
5890 opacity: 0.79727273;
5891}
5892.ios .preloader .preloader-inner-line:nth-child(12) {
5893 transform: translate(-50%, -200%) rotate(330deg);
5894 opacity: 0.85;
5895}
5896@keyframes ios-preloader-spin {
5897 100% {
5898 transform: rotate(360deg);
5899 }
5900}
5901.md .preloader {
5902 animation: md-preloader-outer 3300ms linear infinite;
5903}
5904@keyframes md-preloader-outer {
5905 0% {
5906 transform: rotate(0);
5907 }
5908 100% {
5909 transform: rotate(360deg);
5910 }
5911}
5912.md .preloader-inner {
5913 position: relative;
5914 display: block;
5915 width: 100%;
5916 height: 100%;
5917 animation: md-preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
5918}
5919.md .preloader-inner .preloader-inner-gap {
5920 position: absolute;
5921 width: 2px;
5922 left: 50%;
5923 margin-left: -1px;
5924 top: 0;
5925 bottom: 0;
5926 box-sizing: border-box;
5927 border-top: 4px solid var(--f7-preloader-color);
5928}
5929.md .preloader-inner .preloader-inner-left,
5930.md .preloader-inner .preloader-inner-right {
5931 position: absolute;
5932 top: 0;
5933 height: 100%;
5934 width: 50%;
5935 overflow: hidden;
5936}
5937.md .preloader-inner .preloader-inner-half-circle {
5938 position: absolute;
5939 top: 0;
5940 height: 100%;
5941 width: 200%;
5942 box-sizing: border-box;
5943 border: 4px solid var(--f7-preloader-color);
5944 border-bottom-color: transparent !important;
5945 border-radius: 50%;
5946 animation-iteration-count: infinite;
5947 animation-duration: 1.3125s;
5948 animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
5949}
5950.md .preloader-inner .preloader-inner-left {
5951 left: 0;
5952}
5953.md .preloader-inner .preloader-inner-left .preloader-inner-half-circle {
5954 left: 0;
5955 border-right-color: transparent !important;
5956 animation-name: md-preloader-left-rotate;
5957}
5958.md .preloader-inner .preloader-inner-right {
5959 right: 0;
5960}
5961.md .preloader-inner .preloader-inner-right .preloader-inner-half-circle {
5962 right: 0;
5963 border-left-color: transparent !important;
5964 animation-name: md-preloader-right-rotate;
5965}
5966.md .preloader.color-multi .preloader-inner-left .preloader-inner-half-circle {
5967 animation-name: md-preloader-left-rotate-multicolor;
5968}
5969.md .preloader.color-multi .preloader-inner-right .preloader-inner-half-circle {
5970 animation-name: md-preloader-right-rotate-multicolor;
5971}
5972@keyframes md-preloader-left-rotate {
5973 0%,
5974 100% {
5975 transform: rotate(130deg);
5976 }
5977 50% {
5978 transform: rotate(-5deg);
5979 }
5980}
5981@keyframes md-preloader-right-rotate {
5982 0%,
5983 100% {
5984 transform: rotate(-130deg);
5985 }
5986 50% {
5987 transform: rotate(5deg);
5988 }
5989}
5990@keyframes md-preloader-inner-rotate {
5991 12.5% {
5992 transform: rotate(135deg);
5993 }
5994 25% {
5995 transform: rotate(270deg);
5996 }
5997 37.5% {
5998 transform: rotate(405deg);
5999 }
6000 50% {
6001 transform: rotate(540deg);
6002 }
6003 62.5% {
6004 transform: rotate(675deg);
6005 }
6006 75% {
6007 transform: rotate(810deg);
6008 }
6009 87.5% {
6010 transform: rotate(945deg);
6011 }
6012 100% {
6013 transform: rotate(1080deg);
6014 }
6015}
6016@keyframes md-preloader-left-rotate-multicolor {
6017 0%,
6018 100% {
6019 border-left-color: #4285F4;
6020 transform: rotate(130deg);
6021 }
6022 75% {
6023 border-left-color: #1B9A59;
6024 border-top-color: #1B9A59;
6025 }
6026 50% {
6027 border-left-color: #F7C223;
6028 border-top-color: #F7C223;
6029 transform: rotate(-5deg);
6030 }
6031 25% {
6032 border-left-color: #DE3E35;
6033 border-top-color: #DE3E35;
6034 }
6035}
6036@keyframes md-preloader-right-rotate-multicolor {
6037 0%,
6038 100% {
6039 border-right-color: #4285F4;
6040 transform: rotate(-130deg);
6041 }
6042 75% {
6043 border-right-color: #1B9A59;
6044 border-top-color: #1B9A59;
6045 }
6046 50% {
6047 border-right-color: #F7C223;
6048 border-top-color: #F7C223;
6049 transform: rotate(5deg);
6050 }
6051 25% {
6052 border-top-color: #DE3E35;
6053 border-right-color: #DE3E35;
6054 }
6055}
6056/* === Progressbar === */
6057.ios {
6058 /*
6059 --f7-progressbar-progress-color: var(--f7-theme-color);
6060 */
6061 --f7-progressbar-bg-color: #b6b6b6;
6062 --f7-progressbar-height: 2px;
6063 --f7-progressbar-border-radius: 2px;
6064}
6065.md {
6066 /*
6067 --f7-progressbar-progress-color: var(--f7-theme-color);
6068 --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
6069 */
6070 --f7-progressbar-height: 4px;
6071 --f7-progressbar-border-radius: 0px;
6072}
6073.progressbar,
6074.progressbar-infinite {
6075 width: 100%;
6076 overflow: hidden;
6077 position: relative;
6078 display: block;
6079 transform-style: preserve-3d;
6080 background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
6081 transform-origin: center top;
6082 height: var(--f7-progressbar-height);
6083 border-radius: var(--f7-progressbar-border-radius);
6084}
6085.progressbar {
6086 vertical-align: middle;
6087}
6088.progressbar span {
6089 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
6090 width: 100%;
6091 height: 100%;
6092 position: absolute;
6093 left: 0;
6094 top: 0;
6095 transform: translate3d(-100%, 0, 0);
6096 transition-duration: 150ms;
6097}
6098.progressbar-infinite {
6099 z-index: 15000;
6100}
6101.progressbar-infinite:before,
6102.progressbar-infinite:after {
6103 content: '';
6104 position: absolute;
6105 left: 0;
6106 top: 0;
6107 width: 100%;
6108 height: 100%;
6109 transform-origin: left center;
6110 transform: translate3d(0, 0, 0);
6111 display: block;
6112 background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
6113}
6114.progressbar-infinite.color-multi {
6115 background: none !important;
6116}
6117.progressbar-in {
6118 animation: progressbar-in 150ms forwards;
6119}
6120.progressbar-out {
6121 animation: progressbar-out 150ms forwards;
6122}
6123body > .progressbar,
6124.view > .progressbar,
6125.views > .progressbar,
6126.page > .progressbar,
6127.panel > .progressbar,
6128.popup > .progressbar,
6129.framework7-root > .progressbar,
6130body > .progressbar-infinite,
6131.view > .progressbar-infinite,
6132.views > .progressbar-infinite,
6133.page > .progressbar-infinite,
6134.panel > .progressbar-infinite,
6135.popup > .progressbar-infinite,
6136.framework7-root > .progressbar-infinite {
6137 position: absolute;
6138 left: 0;
6139 top: 0;
6140 z-index: 15000;
6141 border-radius: 0 !important;
6142 transform-origin: center top !important;
6143}
6144body > .progressbar,
6145.framework7-root > .progressbar,
6146body > .progressbar-infinite,
6147.framework7-root > .progressbar-infinite {
6148 top: var(--f7-statusbar-height);
6149}
6150@keyframes progressbar-in {
6151 from {
6152 opacity: 0;
6153 transform: scaleY(0);
6154 }
6155 to {
6156 opacity: 1;
6157 transform: scaleY(1);
6158 }
6159}
6160@keyframes progressbar-out {
6161 from {
6162 opacity: 1;
6163 transform: scaleY(1);
6164 }
6165 to {
6166 opacity: 0;
6167 transform: scaleY(0);
6168 }
6169}
6170.ios .progressbar-infinite:before {
6171 animation: ios-progressbar-infinite 1s linear infinite;
6172}
6173.ios .progressbar-infinite:after {
6174 display: none;
6175}
6176.ios .progressbar-infinite.color-multi:before {
6177 width: 400%;
6178 background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
6179 background-size: 25% 100%;
6180 background-repeat: repeat-x;
6181 animation: ios-progressbar-infinite-multicolor 3s linear infinite;
6182}
6183@keyframes ios-progressbar-infinite {
6184 0% {
6185 transform: translate3d(-100%, 0, 0);
6186 }
6187 100% {
6188 transform: translate3d(100%, 0, 0);
6189 }
6190}
6191@keyframes ios-progressbar-infinite-multicolor {
6192 0% {
6193 transform: translate3d(0%, 0, 0);
6194 }
6195 100% {
6196 transform: translate3d(-50%, 0, 0);
6197 }
6198}
6199.md .progressbar-infinite:before {
6200 animation: md-progressbar-infinite-1 2s linear infinite;
6201}
6202.md .progressbar-infinite:after {
6203 animation: md-progressbar-infinite-2 2s linear infinite;
6204}
6205.md .progressbar-infinite.color-multi:before {
6206 background: none;
6207 animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
6208}
6209.md .progressbar-infinite.color-multi:after {
6210 background: none;
6211 animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
6212 transform-origin: center center;
6213}
6214@keyframes md-progressbar-infinite-1 {
6215 0% {
6216 transform: translateX(-10%) scaleX(0.1);
6217 }
6218 25% {
6219 transform: translateX(30%) scaleX(0.6);
6220 }
6221 50% {
6222 transform: translateX(100%) scaleX(1);
6223 }
6224 100% {
6225 transform: translateX(100%) scaleX(1);
6226 }
6227}
6228@keyframes md-progressbar-infinite-2 {
6229 0% {
6230 transform: translateX(-100%) scaleX(1);
6231 }
6232 40% {
6233 transform: translateX(-100%) scaleX(1);
6234 }
6235 75% {
6236 transform: translateX(60%) scaleX(0.35);
6237 }
6238 90% {
6239 transform: translateX(100%) scaleX(0.1);
6240 }
6241 100% {
6242 transform: translateX(100%) scaleX(0.1);
6243 }
6244}
6245@keyframes md-progressbar-infinite-multicolor-bg {
6246 0% {
6247 background-color: #4caf50;
6248 }
6249 25% {
6250 background-color: #f44336;
6251 }
6252 50% {
6253 background-color: #2196f3;
6254 }
6255 75% {
6256 background-color: #ffeb3b;
6257 }
6258}
6259@keyframes md-progressbar-infinite-multicolor-fill {
6260 0% {
6261 transform: scaleX(0);
6262 background-color: #f44336;
6263 }
6264 24.9% {
6265 transform: scaleX(1);
6266 background-color: #f44336;
6267 }
6268 25% {
6269 transform: scaleX(0);
6270 background-color: #2196f3;
6271 }
6272 49.9% {
6273 transform: scaleX(1);
6274 background-color: #2196f3;
6275 }
6276 50% {
6277 transform: scaleX(0);
6278 background-color: #ffeb3b;
6279 }
6280 74.9% {
6281 transform: scaleX(1);
6282 background-color: #ffeb3b;
6283 }
6284 75% {
6285 transform: scaleX(0);
6286 background-color: #4caf50;
6287 }
6288 100% {
6289 transform: scaleX(1);
6290 background-color: #4caf50;
6291 }
6292}
6293/* === Sortable === */
6294:root {
6295 --f7-sortable-handler-color: #c7c7cc;
6296 --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
6297}
6298:root .theme-dark,
6299:root.theme-dark {
6300 --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
6301}
6302.ios {
6303 --f7-sortable-handler-width: 35px;
6304 --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
6305}
6306.md {
6307 --f7-sortable-handler-width: 42px;
6308 --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
6309}
6310.sortable .sortable-handler {
6311 width: var(--f7-sortable-handler-width);
6312 height: 100%;
6313 position: absolute;
6314 top: 0;
6315 z-index: 10;
6316 opacity: 0;
6317 pointer-events: none;
6318 cursor: move;
6319 transition-duration: 300ms;
6320 display: flex;
6321 align-items: center;
6322 justify-content: center;
6323 overflow: hidden;
6324 left: var(--f7-safe-area-left);
6325}
6326.sortable .sortable-handler:after {
6327 font-family: 'framework7-core-icons';
6328 font-weight: normal;
6329 font-style: normal;
6330 line-height: 1;
6331 letter-spacing: normal;
6332 text-transform: none;
6333 white-space: nowrap;
6334 word-wrap: normal;
6335 direction: ltr;
6336 -webkit-font-smoothing: antialiased;
6337 text-rendering: optimizeLegibility;
6338 -moz-osx-font-smoothing: grayscale;
6339 -moz-font-feature-settings: "liga";
6340 font-feature-settings: "liga";
6341 text-align: center;
6342 display: block;
6343 width: 100%;
6344 height: 100%;
6345 font-size: 20px;
6346 transition-duration: 300ms;
6347 transform: translateX(10px);
6348 color: var(--f7-sortable-handler-color);
6349 overflow: hidden;
6350 height: 20px;
6351 width: 18px;
6352}
6353.sortable .item-inner {
6354 transition-duration: 300ms;
6355}
6356.sortable li.sorting {
6357 z-index: 50;
6358 background: var(--f7-sortable-sorting-item-bg-color);
6359 transition-duration: 0ms;
6360 box-shadow: var(--f7-sortable-sorting-item-box-shadow);
6361}
6362.sortable li.sorting .item-inner:after {
6363 display: none !important;
6364}
6365.sortable-sorting li {
6366 transition-duration: 300ms;
6367}
6368.sortable-enabled .sortable-handler {
6369 pointer-events: auto;
6370 opacity: 1;
6371}
6372.sortable-enabled .sortable-handler:after {
6373 transform: translateX(0px);
6374}
6375.sortable-enabled .item-link .item-inner,
6376.sortable-enabled .item-link .item-title-row {
6377 background-image: none !important;
6378}
6379.list.sortable-enabled .item-inner,
6380.list.sortable-enabled .item-link .item-inner,
6381.list.sortable-enabled .item-link.no-chevron .item-inner,
6382.list.sortable-enabled.no-chevron .item-link .item-inner,
6383.list.sortable-enabled .no-chevron .item-link .item-inner,
6384.no-chevron .list.sortable-enabled .item-link .item-inner {
6385 padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
6386}
6387.ios .sortable-handler:after {
6388 content: 'sort_ios';
6389}
6390.md .sortable-handler:after {
6391 content: 'sort_md';
6392}
6393/* === Swipeout === */
6394:root {
6395 --f7-swipeout-button-text-color: #fff;
6396 --f7-swipeout-button-bg-color: #c7c7cc;
6397 --f7-swipeout-delete-button-bg-color: #ff3b30;
6398}
6399.ios {
6400 --f7-swipeout-button-padding: 0 30px;
6401}
6402.md {
6403 --f7-swipeout-button-padding: 0 24px;
6404}
6405.swipeout {
6406 overflow: hidden;
6407 transform-style: preserve-3d;
6408}
6409.swipeout-deleting {
6410 transition-duration: 300ms;
6411}
6412.swipeout-deleting .swipeout-content {
6413 transform: translateX(-100%);
6414}
6415.swipeout-transitioning .swipeout-content,
6416.swipeout-transitioning .swipeout-actions-right a,
6417.swipeout-transitioning .swipeout-actions-left a,
6418.swipeout-transitioning .swipeout-overswipe {
6419 transition-duration: 300ms;
6420 transition-property: transform, left;
6421}
6422.swipeout-content {
6423 position: relative;
6424 z-index: 10;
6425}
6426.swipeout-overswipe {
6427 transition-duration: 200ms;
6428 transition-property: left;
6429}
6430.swipeout-actions-left,
6431.swipeout-actions-right {
6432 position: absolute;
6433 top: 0;
6434 height: 100%;
6435 display: flex;
6436 direction: ltr;
6437}
6438.swipeout-actions-left > a,
6439.swipeout-actions-right > a,
6440.swipeout-actions-left > button,
6441.swipeout-actions-right > button,
6442.swipeout-actions-left > span,
6443.swipeout-actions-right > span,
6444.swipeout-actions-left > div,
6445.swipeout-actions-right > div {
6446 color: var(--f7-swipeout-button-text-color);
6447 background: var(--f7-swipeout-button-bg-color);
6448 padding: var(--f7-swipeout-button-padding);
6449 display: flex;
6450 align-items: center;
6451 position: relative;
6452 left: 0;
6453}
6454.swipeout-actions-left > a:after,
6455.swipeout-actions-right > a:after,
6456.swipeout-actions-left > button:after,
6457.swipeout-actions-right > button:after,
6458.swipeout-actions-left > span:after,
6459.swipeout-actions-right > span:after,
6460.swipeout-actions-left > div:after,
6461.swipeout-actions-right > div:after {
6462 content: '';
6463 position: absolute;
6464 top: 0;
6465 width: 600%;
6466 height: 100%;
6467 background: inherit;
6468 z-index: -1;
6469 transform: translate3d(0, 0, 0);
6470 pointer-events: none;
6471}
6472.swipeout-actions-left .swipeout-delete,
6473.swipeout-actions-right .swipeout-delete {
6474 background: var(--f7-swipeout-delete-button-bg-color);
6475}
6476.swipeout-actions-right {
6477 right: 0%;
6478 transform: translateX(100%);
6479}
6480.swipeout-actions-right > a:after,
6481.swipeout-actions-right > button:after,
6482.swipeout-actions-right > span:after,
6483.swipeout-actions-right > div:after {
6484 left: 100%;
6485 margin-left: -1px;
6486}
6487.swipeout-actions-left {
6488 left: 0%;
6489 transform: translateX(-100%);
6490}
6491.swipeout-actions-left > a:after,
6492.swipeout-actions-left > button:after,
6493.swipeout-actions-left > span:after,
6494.swipeout-actions-left > div:after {
6495 right: 100%;
6496 margin-right: -1px;
6497}
6498.swipeout-actions-left [class*="color-"],
6499.swipeout-actions-right [class*="color-"] {
6500 --f7-swipeout-button-bg-color: var(--f7-theme-color);
6501}
6502/* === Accordion === */
6503.accordion-item-toggle {
6504 cursor: pointer;
6505 transition-duration: 300ms;
6506}
6507.accordion-item-toggle.active-state {
6508 transition-duration: 300ms;
6509}
6510.accordion-item-toggle.active-state > .item-inner:after {
6511 background-color: transparent;
6512}
6513.accordion-item-toggle .item-inner {
6514 transition-duration: 300ms;
6515 transition-property: background-color;
6516}
6517.accordion-item-toggle .item-inner:after {
6518 transition-duration: 300ms;
6519}
6520.accordion-item .item-link .item-inner:after {
6521 transition-duration: 300ms;
6522}
6523.accordion-item .list,
6524.accordion-item .block {
6525 margin-top: 0;
6526 margin-bottom: 0;
6527}
6528.accordion-item .block > h1:first-child,
6529.accordion-item .block > h2:first-child,
6530.accordion-item .block > h3:first-child,
6531.accordion-item .block > h4:first-child,
6532.accordion-item .block > p:first-child {
6533 margin-top: 10px;
6534}
6535.accordion-item .block > h1:last-child,
6536.accordion-item .block > h2:last-child,
6537.accordion-item .block > h3:last-child,
6538.accordion-item .block > h4:last-child,
6539.accordion-item .block > p:last-child {
6540 margin-bottom: 10px;
6541}
6542.accordion-item-opened .accordion-item-toggle .item-inner:after,
6543.accordion-item-opened > .item-link .item-inner:after {
6544 background-color: transparent;
6545}
6546.list li.accordion-item ul {
6547 padding-right: 0;
6548}
6549.accordion-item-content {
6550 position: relative;
6551 overflow: hidden;
6552 height: 0;
6553 font-size: 14px;
6554 transition-duration: 300ms;
6555}
6556.accordion-item-opened > .accordion-item-content {
6557 height: auto;
6558}
6559html.device-android-4 .accordion-item-content {
6560 transform: none;
6561}
6562.list .accordion-item-toggle .item-inner {
6563 padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-left));
6564}
6565.list .accordion-item-toggle .item-inner:before {
6566 font-family: 'framework7-core-icons';
6567 font-weight: normal;
6568 font-style: normal;
6569 line-height: 1;
6570 letter-spacing: normal;
6571 text-transform: none;
6572 white-space: nowrap;
6573 word-wrap: normal;
6574 direction: ltr;
6575 -webkit-font-smoothing: antialiased;
6576 text-rendering: optimizeLegibility;
6577 -moz-osx-font-smoothing: grayscale;
6578 -moz-font-feature-settings: "liga";
6579 font-feature-settings: "liga";
6580 text-align: center;
6581 display: block;
6582 width: 100%;
6583 height: 100%;
6584 position: absolute;
6585 top: 50%;
6586 width: 14px;
6587 height: 8px;
6588 margin-top: -4px;
6589 font-size: 20px;
6590 line-height: 14px;
6591 color: var(--f7-list-chevron-icon-color);
6592 pointer-events: none;
6593 left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
6594 content: 'chevron_left';
6595}
6596.list .accordion-item-toggle.active-state {
6597 background-color: var(--f7-list-link-pressed-bg-color);
6598}
6599.list .accordion-item-toggle .item-inner:before,
6600.list:not(.media-list) .accordion-item:not(.media-item) .accordion-item-toggle .item-inner:before,
6601.list:not(.media-list) .accordion-item:not(.media-item) > .item-link .item-inner:before,
6602.media-list .accordion-item .accordion-item-toggle .item-title-row:before,
6603.media-list .accordion-item > .item-link .item-title-row:before,
6604.accordion-item.media-item .accordion-item-toggle .item-title-row:before,
6605.accordion-item.media-item > .item-link .item-title-row:before,
6606.links-list .accordion-item > a:before {
6607 content: 'chevron_down';
6608 width: 14px;
6609 height: 8px;
6610 margin-top: -4px;
6611 line-height: 8px;
6612}
6613.list .accordion-item-toggle.accordion-item-opened .item-inner:before,
6614.list:not(.media-list) .accordion-item-opened:not(.media-item) .accordion-item-toggle .item-inner:before,
6615.list:not(.media-list) .accordion-item-opened:not(.media-item) > .item-link .item-inner:before,
6616.media-list .accordion-item-opened .accordion-item-toggle .item-title-row:before,
6617.media-list .accordion-item-opened > .item-link .item-title-row:before,
6618.accordion-item-opened.media-item .accordion-item-toggle .item-title-row:before,
6619.accordion-item-opened.media-item > .item-link .item-title-row:before,
6620.links-list .accordion-item-opened > a:before {
6621 content: 'chevron_up';
6622 width: 14px;
6623 height: 8px;
6624 margin-top: -4px;
6625 line-height: 8px;
6626}
6627/* === Contacts === */
6628.ios {
6629 --f7-contacts-list-title-font-size: inherit;
6630 --f7-contacts-list-title-font-weight: 600;
6631 --f7-contacts-list-title-text-color: #000;
6632 --f7-contacts-list-title-height: 22px;
6633 --f7-contacts-list-title-bg-color: #f7f7f7;
6634}
6635.ios .theme-dark,
6636.ios.theme-dark {
6637 --f7-contacts-list-title-text-color: #fff;
6638 --f7-contacts-list-title-bg-color: #232323;
6639}
6640.md {
6641 --f7-contacts-list-title-font-size: 20px;
6642 --f7-contacts-list-title-font-weight: 500;
6643 --f7-contacts-list-title-text-color: var(--f7-theme-color);
6644 --f7-contacts-list-title-height: 48px;
6645 --f7-contacts-list-title-bg-color: transparent;
6646}
6647.md .theme-dark,
6648.md.theme-dark {
6649 --f7-contacts-list-title-text-color: #fff;
6650}
6651.contacts-list {
6652 --f7-list-margin-vertical: 0px;
6653}
6654.contacts-list .list-group-title,
6655.contacts-list li.list-group-title {
6656 background-color: var(--f7-contacts-list-title-bg-color);
6657 font-weight: var(--f7-contacts-list-title-font-weight);
6658 font-size: var(--f7-contacts-list-title-font-size);
6659 color: var(--f7-contacts-list-title-text-color, var(--f7-theme-color));
6660 line-height: var(--f7-contacts-list-title-height);
6661 height: var(--f7-contacts-list-title-height);
6662}
6663.contacts-list .list-group:first-child ul:before {
6664 display: none !important;
6665}
6666.contacts-list .list-group:last-child ul:after {
6667 display: none !important;
6668}
6669.md .contacts-list .list-group-title {
6670 pointer-events: none;
6671 overflow: visible;
6672 width: 56px;
6673}
6674.md .contacts-list .list-group-title + li {
6675 margin-top: calc(var(--f7-contacts-list-title-height) * -1);
6676}
6677.md .contacts-list li:not(.list-group-title) {
6678 padding-right: 56px;
6679}
6680/* === Virtual List === */
6681/* === Indexed List === */
6682:root {
6683 --f7-list-index-width: 16px;
6684 --f7-list-index-font-size: 11px;
6685 --f7-list-index-font-weight: 600;
6686 /* --f7-list-index-text-color: var(--f7-theme-color); */
6687 --f7-list-index-item-height: 14px;
6688 --f7-list-index-label-text-color: #fff;
6689 /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
6690 --f7-list-index-label-font-weight: 500;
6691}
6692.ios {
6693 --f7-list-index-label-size: 44px;
6694 --f7-list-index-label-font-size: 17px;
6695 --f7-list-index-skip-dot-size: 6px;
6696}
6697.md {
6698 --f7-list-index-label-size: 56px;
6699 --f7-list-index-label-font-size: 20px;
6700 --f7-list-index-skip-dot-size: 4px;
6701}
6702.list-index {
6703 position: absolute;
6704 top: 0;
6705 bottom: 0;
6706 text-align: center;
6707 z-index: 10;
6708 width: var(--f7-list-index-width);
6709 cursor: pointer;
6710 -webkit-user-select: none;
6711 -moz-user-select: none;
6712 -ms-user-select: none;
6713 user-select: none;
6714 left: var(--f7-safe-area-left);
6715}
6716.list-index:before {
6717 content: '';
6718 position: absolute;
6719 width: 20px;
6720 top: 0;
6721 right: 100%;
6722 height: 100%;
6723}
6724.list-index ul {
6725 color: var(--f7-list-index-text-color, var(--f7-theme-color));
6726 font-size: var(--f7-list-index-font-size);
6727 font-weight: var(--f7-list-index-font-weight);
6728 list-style: none;
6729 margin: 0;
6730 padding: 0;
6731 display: flex;
6732 flex-direction: column;
6733 justify-content: center;
6734 align-items: center;
6735 flex-shrink: 0;
6736 height: 100%;
6737 width: 100%;
6738 position: relative;
6739}
6740.list-index li {
6741 margin: 0;
6742 padding: 0;
6743 list-style: none;
6744 position: relative;
6745 height: var(--f7-list-index-item-height);
6746 line-height: var(--f7-list-index-item-height);
6747 flex-shrink: 0;
6748 display: block;
6749 width: 100%;
6750}
6751.list-index .list-index-skip-placeholder:after {
6752 content: '';
6753 position: absolute;
6754 left: 50%;
6755 top: 50%;
6756 border-radius: 50%;
6757 width: var(--f7-list-index-skip-dot-size);
6758 height: var(--f7-list-index-skip-dot-size);
6759 margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
6760 margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
6761 background: var(--f7-list-index-text-color, var(--f7-theme-color));
6762}
6763.list-index .list-index-label {
6764 position: absolute;
6765 bottom: 0;
6766 right: 100%;
6767 text-align: center;
6768 background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
6769 color: var(--f7-list-index-label-text-color);
6770 width: var(--f7-list-index-label-size);
6771 height: var(--f7-list-index-label-size);
6772 line-height: var(--f7-list-index-label-size);
6773 font-size: var(--f7-list-index-label-font-size);
6774 font-weight: var(--f7-list-index-label-font-weight);
6775}
6776.navbar ~ .page > .list-index,
6777.navbar ~ .list-index {
6778 top: var(--f7-navbar-height);
6779}
6780.navbar ~ .toolbar-top ~ .list-index,
6781.ios .navbar ~ .toolbar-top-ios ~ .list-index,
6782.md .navbar ~ .toolbar-top-md ~ .list-index {
6783 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
6784}
6785.navbar ~ .toolbar-top.tabbar-labels ~ .list-index,
6786.ios .navbar ~ .toolbar-top-ios.tabbar-labels ~ .list-index,
6787.md .navbar ~ .toolbar-top-md.tabbar-labels ~ .list-index {
6788 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
6789}
6790.navbar ~ .subnavbar ~ .list-index,
6791.page-with-subnavbar .navbar ~ .list-index {
6792 top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
6793}
6794.toolbar-bottom ~ .page > .list-index,
6795.ios .toolbar-bottom-ios ~ .page > .list-index,
6796.md .toolbar-bottom-md ~ .page > .list-index,
6797.toolbar-bottom ~ * .page > .list-index,
6798.ios .toolbar-bottom-ios ~ * .page > .list-index,
6799.md .toolbar-bottom-md ~ * .page > .list-index,
6800.toolbar-bottom ~ .list-index,
6801.ios .toolbar-bottom-ios ~ .list-index,
6802.md .toolbar-bottom-md ~ .list-index {
6803 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
6804}
6805.toolbar-bottom.tabbar-labels ~ .page > .list-index,
6806.ios .toolbar-bottom-ios.tabbar-labels ~ .page > .list-index,
6807.md .toolbar-bottom-md.tabbar-labels ~ .page > .list-index,
6808.toolbar-bottom.tabbar-labels ~ * .page > .list-index,
6809.ios .toolbar-bottom-ios.tabbar-labels ~ * .page > .list-index,
6810.md .toolbar-bottom-md.tabbar-labels ~ * .page > .list-index,
6811.toolbar-bottom.tabbar-labels ~ .list-index,
6812.ios .toolbar-bottom-ios.tabbar-labels ~ .list-index,
6813.md .toolbar-bottom-md.tabbar-labels ~ .list-index {
6814 bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
6815}
6816.ios .list-index .list-index-label {
6817 margin-bottom: calc(-1 * var(--f7-list-index-label-size) / 2);
6818 margin-right: calc(var(--f7-list-index-width) - 1px);
6819 border-radius: 50%;
6820}
6821.ios .list-index .list-index-label:before {
6822 position: absolute;
6823 width: 100%;
6824 height: 100%;
6825 border-radius: 50% 0% 50% 50%;
6826 content: '';
6827 background-color: inherit;
6828 left: 0;
6829 top: 0;
6830 transform: rotate(45deg);
6831 z-index: -1;
6832}
6833.md .list-index .list-index-label {
6834 border-radius: 50% 50% 0 50%;
6835}
6836/* === Timeline === */
6837:root {
6838 --f7-timeline-horizontal-date-height: 34px;
6839 --f7-timeline-year-height: 24px;
6840 --f7-timeline-month-height: 24px;
6841 --f7-timeline-item-inner-bg-color: #fff;
6842}
6843:root .theme-dark,
6844:root.theme-dark {
6845 --f7-timeline-item-inner-bg-color: #1c1c1d;
6846}
6847.ios {
6848 --f7-timeline-padding-horizontal: 15px;
6849 --f7-timeline-margin-vertical: 35px;
6850 --f7-timeline-divider-margin-horizontal: 15px;
6851 --f7-timeline-inner-block-margin-vertical: 15px;
6852 --f7-timeline-item-inner-border-radius: 7px;
6853 --f7-timeline-item-inner-box-shadow: none;
6854 --f7-timeline-item-time-font-size: 13px;
6855 --f7-timeline-item-time-text-color: #6d6d72;
6856 --f7-timeline-item-title-font-size: 17px;
6857 --f7-timeline-item-title-font-weight: 600;
6858 --f7-timeline-item-subtitle-font-size: 15px;
6859 --f7-timeline-item-subtitle-font-weight: inherit;
6860 --f7-timeline-horizontal-item-padding: 10px;
6861 --f7-timeline-horizontal-item-border-color: #c4c4c4;
6862 --f7-timeline-horizontal-item-date-border-color: #c4c4c4;
6863 --f7-timeline-horizontal-item-date-shadow-image: none;
6864}
6865.ios .theme-dark,
6866.ios.theme-dark {
6867 --f7-timeline-item-time-text-color: #8E8E93;
6868}
6869.md {
6870 --f7-timeline-padding-horizontal: 16px;
6871 --f7-timeline-margin-vertical: 32px;
6872 --f7-timeline-divider-margin-horizontal: 16px;
6873 --f7-timeline-inner-block-margin-vertical: 16px;
6874 --f7-timeline-item-inner-border-radius: 4px;
6875 --f7-timeline-item-inner-box-shadow: var(--f7-elevation-1);
6876 --f7-timeline-item-time-font-size: 13px;
6877 --f7-timeline-item-time-text-color: rgba(0, 0, 0, 0.54);
6878 --f7-timeline-item-title-font-size: 16px;
6879 --f7-timeline-item-title-font-weight: 400;
6880 --f7-timeline-item-subtitle-font-size: inherit;
6881 --f7-timeline-item-subtitle-font-weight: inherit;
6882 --f7-timeline-horizontal-item-padding: 12px;
6883 --f7-timeline-horizontal-item-border-color: rgba(0, 0, 0, 0.12);
6884 --f7-timeline-horizontal-item-date-border-color: transparent;
6885 --f7-timeline-horizontal-item-date-shadow-image: var(--f7-bars-shadow-bottom-image);
6886}
6887.md .theme-dark,
6888.md.theme-dark {
6889 --f7-timeline-item-time-text-color: rgba(255, 255, 255, 0.54);
6890}
6891.timeline {
6892 box-sizing: border-box;
6893 margin: var(--f7-timeline-margin-vertical) 0;
6894 padding: 0 var(--f7-timeline-padding-horizontal);
6895 padding-top: 0;
6896 padding-bottom: 0;
6897 padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
6898 padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
6899}
6900.block-strong .timeline {
6901 padding: 0;
6902 margin: 0;
6903}
6904.timeline-item {
6905 display: flex;
6906 justify-content: flex-start;
6907 overflow: hidden;
6908 box-sizing: border-box;
6909 position: relative;
6910 padding: 2px 0px var(--f7-timeline-padding-horizontal);
6911}
6912.timeline-item:last-child {
6913 padding-bottom: 2px;
6914}
6915.timeline-item-date {
6916 flex-shrink: 0;
6917 width: 50px;
6918 text-align: right;
6919 box-sizing: border-box;
6920}
6921.timeline-item-date small {
6922 font-size: 10px;
6923}
6924.timeline-item-content {
6925 margin: 2px;
6926 min-width: 0;
6927 position: relative;
6928 flex-shrink: 10;
6929}
6930.timeline-item-content .card,
6931.timeline-item-content.card,
6932.timeline-item-content .list,
6933.timeline-item-content.list,
6934.timeline-item-content .block,
6935.timeline-item-content.block {
6936 margin: 0;
6937 width: 100%;
6938}
6939.timeline-item-content .card + .card,
6940.timeline-item-content .list + .card,
6941.timeline-item-content .block + .card,
6942.timeline-item-content .card + .list,
6943.timeline-item-content .list + .list,
6944.timeline-item-content .block + .list,
6945.timeline-item-content .card + .block,
6946.timeline-item-content .list + .block,
6947.timeline-item-content .block + .block {
6948 margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
6949}
6950.timeline-item-content p:first-child,
6951.timeline-item-content ul:first-child,
6952.timeline-item-content ol:first-child,
6953.timeline-item-content h1:first-child,
6954.timeline-item-content h2:first-child,
6955.timeline-item-content h3:first-child,
6956.timeline-item-content h4:first-child {
6957 margin-top: 0;
6958}
6959.timeline-item-content p:last-child,
6960.timeline-item-content ul:last-child,
6961.timeline-item-content ol:last-child,
6962.timeline-item-content h1:last-child,
6963.timeline-item-content h2:last-child,
6964.timeline-item-content h3:last-child,
6965.timeline-item-content h4:last-child {
6966 margin-bottom: 0;
6967}
6968.timeline-item-inner {
6969 background: var(--f7-timeline-item-inner-bg-color);
6970 box-sizing: border-box;
6971 border-radius: var(--f7-timeline-item-inner-border-radius);
6972 padding: 8px var(--f7-timeline-padding-horizontal);
6973 box-shadow: var(--f7-timeline-item-inner-box-shadow);
6974}
6975.timeline-item-inner + .timeline-item-inner {
6976 margin-top: var(--f7-timeline-inner-block-margin-vertical);
6977}
6978.timeline-item-inner .block {
6979 padding: 0;
6980 color: inherit;
6981}
6982.timeline-item-inner .block-strong {
6983 padding-left: 0;
6984 padding-right: 0;
6985 margin: 0;
6986}
6987.timeline-item-inner .block-strong:before {
6988 display: none !important;
6989}
6990.timeline-item-inner .block-strong:after {
6991 display: none !important;
6992}
6993.timeline-item-inner .list ul:before {
6994 display: none !important;
6995}
6996.timeline-item-inner .list ul:after {
6997 display: none !important;
6998}
6999.timeline-item-divider {
7000 width: 1px;
7001 position: relative;
7002 width: 10px;
7003 height: 10px;
7004 background: #bbb;
7005 border-radius: 50%;
7006 flex-shrink: 0;
7007 margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
7008}
7009.timeline-item-divider:after,
7010.timeline-item-divider:before {
7011 content: ' ';
7012 width: 1px;
7013 height: 100vh;
7014 position: absolute;
7015 left: 50%;
7016 background: inherit;
7017 transform: translate3d(-50%, 0, 0);
7018}
7019.timeline-item-divider:after {
7020 top: 100%;
7021}
7022.timeline-item-divider:before {
7023 bottom: 100%;
7024}
7025.timeline-item:last-child .timeline-item-divider:after {
7026 display: none;
7027}
7028.timeline-item:first-child .timeline-item-divider:before {
7029 display: none;
7030}
7031.timeline-item-time {
7032 font-size: var(--f7-timeline-item-time-font-size);
7033 margin-top: var(--f7-timeline-inner-block-margin-vertical);
7034 color: var(--f7-timeline-item-time-text-color);
7035}
7036.timeline-item-time:first-child,
7037.timeline-item-time:last-child {
7038 margin-top: 0;
7039}
7040.timeline-item-title + .timeline-item-time {
7041 margin-top: 0;
7042}
7043.timeline-item-title {
7044 font-size: var(--f7-timeline-item-title-font-size);
7045 font-weight: var(--f7-timeline-item-title-font-weight);
7046}
7047.timeline-item-subtitle {
7048 font-size: var(--f7-timeline-item-subtitle-font-size);
7049 font-weight: var(--f7-timeline-item-subtitle-font-weight);
7050}
7051.timeline-sides .timeline-item-right,
7052.timeline-sides .timeline-item {
7053 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7054 margin-left: 0;
7055}
7056.timeline-sides .timeline-item-right .timeline-item-date,
7057.timeline-sides .timeline-item .timeline-item-date {
7058 text-align: left;
7059}
7060.timeline-sides .timeline-item-left,
7061.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
7062 flex-direction: row-reverse;
7063 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7064 margin-right: 0;
7065}
7066.timeline-sides .timeline-item-left .timeline-item-date,
7067.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
7068 text-align: right;
7069}
7070@media (min-width: 768px) {
7071 .tablet-sides .timeline-item-right,
7072 .tablet-sides .timeline-item {
7073 margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7074 margin-left: 0;
7075 }
7076 .tablet-sides .timeline-item-right .timeline-item-date,
7077 .tablet-sides .timeline-item .timeline-item-date {
7078 text-align: left;
7079 }
7080 .tablet-sides .timeline-item-left,
7081 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) {
7082 flex-direction: row-reverse;
7083 margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
7084 margin-right: 0;
7085 }
7086 .tablet-sides .timeline-item-left .timeline-item-date,
7087 .tablet-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date {
7088 text-align: right;
7089 }
7090}
7091.timeline-horizontal {
7092 height: 100%;
7093 display: flex;
7094 padding: 0;
7095 margin: 0;
7096 position: relative;
7097 padding-left: var(--f7-safe-area-left);
7098 padding-right: 0;
7099}
7100.timeline-horizontal .timeline-item {
7101 display: block;
7102 width: 33.33333333vw;
7103 margin: 0;
7104 padding: 0;
7105 flex-shrink: 0;
7106 position: relative;
7107 height: 100%;
7108 padding-top: var(--f7-timeline-horizontal-date-height) !important;
7109 padding-bottom: var(--f7-timeline-horizontal-item-padding);
7110}
7111.timeline-horizontal .timeline-item:after {
7112 content: '';
7113 position: absolute;
7114 background-color: var(--f7-timeline-horizontal-item-border-color);
7115 display: block;
7116 z-index: 15;
7117 top: 0;
7118 right: 0;
7119 bottom: auto;
7120 left: auto;
7121 width: 1px;
7122 height: 100%;
7123 transform-origin: 100% 50%;
7124 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
7125}
7126.timeline-horizontal .timeline-item-date {
7127 padding: 0px var(--f7-timeline-horizontal-item-padding);
7128 width: auto;
7129 text-align: left;
7130 line-height: var(--f7-timeline-horizontal-date-height);
7131 position: absolute;
7132 left: 0;
7133 top: 0;
7134 width: 100%;
7135 height: var(--f7-timeline-horizontal-date-height);
7136 background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
7137 color: var(--f7-bars-text-color);
7138 text-align: right;
7139}
7140.timeline-horizontal .timeline-item-date:after {
7141 content: '';
7142 position: absolute;
7143 background-color: var(--f7-timeline-horizontal-item-date-border-color);
7144 display: block;
7145 z-index: 15;
7146 top: auto;
7147 right: auto;
7148 bottom: 0;
7149 left: 0;
7150 height: 1px;
7151 width: 100%;
7152 transform-origin: 50% 100%;
7153 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7154}
7155.timeline-horizontal .timeline-item-date:before {
7156 content: '';
7157 position: absolute;
7158 right: 0;
7159 width: 100%;
7160 top: 100%;
7161 bottom: auto;
7162 height: 8px;
7163 pointer-events: none;
7164 background: var(--f7-timeline-horizontal-item-date-shadow-image);
7165}
7166.timeline-horizontal.no-shadow .timeline-item-date:before {
7167 display: none;
7168}
7169.timeline-horizontal .timeline-item-content {
7170 padding: var(--f7-timeline-horizontal-item-padding);
7171 height: calc(100% - var(--f7-timeline-horizontal-item-padding));
7172 will-change: scroll-position;
7173 overflow: auto;
7174 -webkit-overflow-scrolling: touch;
7175 margin: 0;
7176}
7177.timeline-horizontal .timeline-item-divider {
7178 display: none;
7179}
7180.timeline-horizontal > .timeline-item:last-child:after,
7181.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after {
7182 display: none !important;
7183}
7184.timeline-horizontal.col-5 .timeline-item {
7185 width: 5vw;
7186}
7187.timeline-horizontal.col-10 .timeline-item {
7188 width: 10vw;
7189}
7190.timeline-horizontal.col-15 .timeline-item {
7191 width: 15vw;
7192}
7193.timeline-horizontal.col-20 .timeline-item {
7194 width: 20vw;
7195}
7196.timeline-horizontal.col-25 .timeline-item {
7197 width: 25vw;
7198}
7199.timeline-horizontal.col-30 .timeline-item {
7200 width: 30vw;
7201}
7202.timeline-horizontal.col-33 .timeline-item {
7203 width: 33.333333333333336vw;
7204}
7205.timeline-horizontal.col-35 .timeline-item {
7206 width: 35vw;
7207}
7208.timeline-horizontal.col-40 .timeline-item {
7209 width: 40vw;
7210}
7211.timeline-horizontal.col-45 .timeline-item {
7212 width: 45vw;
7213}
7214.timeline-horizontal.col-50 .timeline-item {
7215 width: 50vw;
7216}
7217.timeline-horizontal.col-55 .timeline-item {
7218 width: 55vw;
7219}
7220.timeline-horizontal.col-60 .timeline-item {
7221 width: 60vw;
7222}
7223.timeline-horizontal.col-65 .timeline-item {
7224 width: 65vw;
7225}
7226.timeline-horizontal.col-66 .timeline-item {
7227 width: 66.66666666666666vw;
7228}
7229.timeline-horizontal.col-70 .timeline-item {
7230 width: 70vw;
7231}
7232.timeline-horizontal.col-75 .timeline-item {
7233 width: 75vw;
7234}
7235.timeline-horizontal.col-80 .timeline-item {
7236 width: 80vw;
7237}
7238.timeline-horizontal.col-85 .timeline-item {
7239 width: 85vw;
7240}
7241.timeline-horizontal.col-90 .timeline-item {
7242 width: 90vw;
7243}
7244.timeline-horizontal.col-95 .timeline-item {
7245 width: 95vw;
7246}
7247.timeline-horizontal.col-100 .timeline-item {
7248 width: 100vw;
7249}
7250@media (min-width: 768px) {
7251 .timeline-horizontal.tablet-5 .timeline-item {
7252 width: 5vw;
7253 }
7254 .timeline-horizontal.tablet-10 .timeline-item {
7255 width: 10vw;
7256 }
7257 .timeline-horizontal.tablet-15 .timeline-item {
7258 width: 15vw;
7259 }
7260 .timeline-horizontal.tablet-20 .timeline-item {
7261 width: 20vw;
7262 }
7263 .timeline-horizontal.tablet-25 .timeline-item {
7264 width: 25vw;
7265 }
7266 .timeline-horizontal.tablet-30 .timeline-item {
7267 width: 30vw;
7268 }
7269 .timeline-horizontal.tablet-33 .timeline-item {
7270 width: 33.333333333333336vw;
7271 }
7272 .timeline-horizontal.tablet-35 .timeline-item {
7273 width: 35vw;
7274 }
7275 .timeline-horizontal.tablet-40 .timeline-item {
7276 width: 40vw;
7277 }
7278 .timeline-horizontal.tablet-45 .timeline-item {
7279 width: 45vw;
7280 }
7281 .timeline-horizontal.tablet-50 .timeline-item {
7282 width: 50vw;
7283 }
7284 .timeline-horizontal.tablet-55 .timeline-item {
7285 width: 55vw;
7286 }
7287 .timeline-horizontal.tablet-60 .timeline-item {
7288 width: 60vw;
7289 }
7290 .timeline-horizontal.tablet-65 .timeline-item {
7291 width: 65vw;
7292 }
7293 .timeline-horizontal.tablet-66 .timeline-item {
7294 width: 66.66666666666666vw;
7295 }
7296 .timeline-horizontal.tablet-70 .timeline-item {
7297 width: 70vw;
7298 }
7299 .timeline-horizontal.tablet-75 .timeline-item {
7300 width: 75vw;
7301 }
7302 .timeline-horizontal.tablet-80 .timeline-item {
7303 width: 80vw;
7304 }
7305 .timeline-horizontal.tablet-85 .timeline-item {
7306 width: 85vw;
7307 }
7308 .timeline-horizontal.tablet-90 .timeline-item {
7309 width: 90vw;
7310 }
7311 .timeline-horizontal.tablet-95 .timeline-item {
7312 width: 95vw;
7313 }
7314 .timeline-horizontal.tablet-100 .timeline-item {
7315 width: 100vw;
7316 }
7317}
7318.timeline-year {
7319 padding-top: var(--f7-timeline-year-height);
7320}
7321.timeline-year:after {
7322 content: '';
7323 position: absolute;
7324 background-color: var(--f7-timeline-horizontal-item-border-color);
7325 display: block;
7326 z-index: 15;
7327 top: 0;
7328 right: 0;
7329 bottom: auto;
7330 left: auto;
7331 width: 1px;
7332 height: 100%;
7333 transform-origin: 100% 50%;
7334 transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)));
7335}
7336.timeline-year:last-child:after {
7337 display: none !important;
7338}
7339.timeline-month {
7340 padding-top: var(--f7-timeline-month-height);
7341}
7342.timeline-month .timeline-item:before {
7343 content: '';
7344 position: absolute;
7345 background-color: var(--f7-timeline-horizontal-item-border-color);
7346 display: block;
7347 z-index: 15;
7348 top: 0;
7349 right: auto;
7350 bottom: auto;
7351 left: 0;
7352 height: 1px;
7353 width: 100%;
7354 transform-origin: 50% 0%;
7355 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7356}
7357.timeline-year,
7358.timeline-month {
7359 display: flex;
7360 flex-shrink: 0;
7361 position: relative;
7362 box-sizing: border-box;
7363 height: 100%;
7364}
7365.timeline-year-title {
7366 line-height: var(--f7-timeline-year-height);
7367 height: var(--f7-timeline-year-height);
7368}
7369.timeline-month-title {
7370 line-height: var(--f7-timeline-month-height);
7371 height: var(--f7-timeline-month-height);
7372}
7373.timeline-year-title,
7374.timeline-month-title {
7375 position: absolute;
7376 left: 0;
7377 top: 0;
7378 width: 100%;
7379 box-sizing: border-box;
7380 padding: 0 var(--f7-timeline-horizontal-item-padding);
7381 background-color: var(--f7-bars-bg-color, var(--f7-theme-color));
7382 color: var(--f7-bars-text-color);
7383}
7384.timeline-year-title span,
7385.timeline-month-title span {
7386 display: inline-block;
7387 position: -webkit-sticky;
7388 position: sticky;
7389 right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
7390}
7391.timeline-year-title {
7392 font-size: 16px;
7393}
7394.timeline-month-title span {
7395 margin-top: -2px;
7396}
7397.timeline-year:first-child .timeline-year-title,
7398.timeline-year:first-child .timeline-month:first-child .timeline-month-title,
7399.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
7400 left: calc(var(--f7-safe-area-left) * -1);
7401 right: 0;
7402 width: auto;
7403}
7404.timeline-horizontal .timeline-item:first-child,
7405.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
7406.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
7407.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item {
7408 overflow: visible;
7409}
7410.timeline-horizontal .timeline-item:first-child .timeline-item-date,
7411.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,
7412.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child .timeline-item-date,
7413.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title + .timeline-item .timeline-item-date {
7414 width: auto;
7415 padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
7416 left: calc(0px - var(--f7-safe-area-left));
7417 right: 0;
7418}
7419.timeline-year:last-child .timeline-year-title,
7420.timeline-year:last-child .timeline-month:last-child .timeline-month-title {
7421 width: auto;
7422 right: calc(0px - var(--f7-safe-area-right));
7423}
7424.timeline-horizontal .timeline-item:last-child,
7425.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
7426 overflow: visible;
7427}
7428.timeline-horizontal .timeline-item:last-child .timeline-item-date,
7429.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date {
7430 width: auto;
7431 right: calc(0px - var(--f7-safe-area-right));
7432 left: 0;
7433}
7434/* === Timeline iOS === */
7435.ios .block-strong .timeline-item-inner {
7436 border-radius: 3px;
7437 border: 1px solid rgba(0, 0, 0, 0.1);
7438}
7439.ios .timeline-year-title span {
7440 margin-top: 3px;
7441}
7442/* === Timeline MD === */
7443.md .timeline-year-title span {
7444 margin-top: 2px;
7445}
7446/* === Tabs === */
7447.tabs .tab {
7448 display: none;
7449}
7450.tabs .tab-active {
7451 display: block;
7452}
7453.tabs-animated-wrap {
7454 position: relative;
7455 width: 100%;
7456 overflow: hidden;
7457 height: 100%;
7458}
7459.tabs-animated-wrap > .tabs {
7460 display: flex;
7461 height: 100%;
7462 transition-duration: 300ms;
7463}
7464.tabs-animated-wrap > .tabs > .tab {
7465 width: 100%;
7466 display: block;
7467 flex-shrink: 0;
7468}
7469.tabs-animated-wrap.not-animated > .tabs {
7470 transition-duration: 300ms;
7471}
7472.tabs-swipeable-wrap {
7473 height: 100%;
7474}
7475.tabs-swipeable-wrap > .tabs {
7476 height: 100%;
7477}
7478.tabs-swipeable-wrap > .tabs > .tab {
7479 display: block;
7480}
7481.page > .tabs {
7482 height: 100%;
7483}
7484/* === Panels === */
7485:root {
7486 --f7-panel-width: 260px;
7487 --f7-panel-bg-color: #fff;
7488}
7489.ios {
7490 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0);
7491 --f7-panel-transition-duration: 400ms;
7492 --f7-panel-shadow: transparent;
7493}
7494.md {
7495 --f7-panel-backdrop-bg-color: rgba(0, 0, 0, 0.2);
7496 --f7-panel-transition-duration: 300ms;
7497 --f7-panel-shadow: rgba(0, 0, 0, 0.25) 0%,
7498 rgba(0, 0, 0, 0.1) 30%,
7499 rgba(0, 0, 0, 0.05) 40%,
7500 rgba(0, 0, 0, 0) 60%,
7501 rgba(0, 0, 0, 0) 100%;
7502}
7503.panel-backdrop {
7504 position: absolute;
7505 left: 0;
7506 top: var(--f7-statusbar-height);
7507 width: 100%;
7508 height: calc(100% - var(--f7-statusbar-height));
7509 opacity: 0;
7510 z-index: 5999;
7511 display: none;
7512 transform: translate3d(0, 0, 0);
7513 background-color: var(--f7-panel-backdrop-bg-color);
7514 transition-duration: var(--f7-panel-transition-duration);
7515 will-change: transform, opacity;
7516}
7517.panel-backdrop.not-animated {
7518 transition-duration: 0ms !important;
7519}
7520.panel {
7521 z-index: 1000;
7522 display: none;
7523 box-sizing: border-box;
7524 position: absolute;
7525 top: var(--f7-statusbar-height);
7526 height: calc(100% - var(--f7-statusbar-height));
7527 transform: translate3d(0, 0, 0);
7528 width: var(--f7-panel-width);
7529 background-color: var(--f7-panel-bg-color);
7530 overflow: visible;
7531 will-change: transform;
7532}
7533.panel:after {
7534 pointer-events: none;
7535 opacity: 0;
7536 z-index: 5999;
7537 position: absolute;
7538 content: '';
7539 top: 0;
7540 width: 20px;
7541 height: 100%;
7542}
7543.panel,
7544.panel:after {
7545 transition-duration: var(--f7-panel-transition-duration);
7546}
7547.panel.not-animated,
7548.panel.not-animated:after {
7549 transition-duration: 0ms !important;
7550}
7551.panel.panel-reveal.not-animated ~ .views,
7552.panel.panel-reveal.not-animated ~ .view {
7553 transition-duration: 0ms !important;
7554}
7555.panel-cover {
7556 z-index: 6000;
7557}
7558.panel-left {
7559 left: 0;
7560}
7561.panel-left.panel-cover {
7562 transform: translate3d(-100%, 0, 0);
7563}
7564.panel-left.panel-cover:after {
7565 left: 100%;
7566 background: linear-gradient(to right, var(--f7-panel-shadow));
7567}
7568html.with-panel-left-cover .panel-left.panel-cover:after {
7569 opacity: 1;
7570}
7571.panel-left.panel-reveal:after {
7572 right: 100%;
7573 background: linear-gradient(to left, var(--f7-panel-shadow));
7574}
7575html.with-panel-left-reveal .panel-left.panel-reveal:after {
7576 opacity: 1;
7577 transform: translate3d(var(--f7-panel-width), 0, 0);
7578}
7579.panel-right {
7580 right: 0;
7581}
7582.panel-right.panel-cover {
7583 transform: translate3d(100%, 0, 0);
7584}
7585.panel-right.panel-cover:after {
7586 right: 100%;
7587 background: linear-gradient(to left, var(--f7-panel-shadow));
7588}
7589html.with-panel-right-cover .panel-right.panel-cover:after {
7590 opacity: 1;
7591}
7592.panel-right.panel-reveal:after {
7593 left: 100%;
7594 background: linear-gradient(to right, var(--f7-panel-shadow));
7595}
7596html.with-panel-right-reveal .panel-right.panel-reveal:after {
7597 opacity: 1;
7598 transform: translate3d(calc(-1 * (var(--f7-panel-width))), 0, 0);
7599}
7600.panel-visible-by-breakpoint {
7601 display: block;
7602 transform: translate3d(0, 0, 0) !important;
7603}
7604.panel-visible-by-breakpoint:after {
7605 display: none;
7606}
7607.panel-visible-by-breakpoint.panel-cover {
7608 z-index: 5900;
7609}
7610html.with-panel-left-reveal .views,
7611html.with-panel-right-reveal .views,
7612html.with-panel-transitioning .views,
7613html.with-panel-left-reveal .framework7-root > .view,
7614html.with-panel-right-reveal .framework7-root > .view,
7615html.with-panel-transitioning .framework7-root > .view {
7616 transition-duration: var(--f7-panel-transition-duration);
7617 transition-property: transform;
7618}
7619html.with-panel-left-reveal .panel-backdrop,
7620html.with-panel-right-reveal .panel-backdrop,
7621html.with-panel-transitioning .panel-backdrop {
7622 background: rgba(0, 0, 0, 0);
7623 display: block;
7624 opacity: 0;
7625}
7626html.with-panel .framework7-root > .views .page-content,
7627html.with-panel .framework7-root > .view .page-content {
7628 overflow: hidden;
7629 -webkit-overflow-scrolling: auto;
7630}
7631html.with-panel-left-cover .panel-backdrop,
7632html.with-panel-right-cover .panel-backdrop {
7633 display: block;
7634 opacity: 1;
7635}
7636html.with-panel-left-reveal .views,
7637html.with-panel-left-reveal .framework7-root > .view,
7638html.with-panel-left-reveal .panel-backdrop {
7639 transform: translate3d(var(--f7-panel-width), 0, 0);
7640}
7641html.with-panel-right-reveal .views,
7642html.with-panel-right-reveal .framework7-root > .view,
7643html.with-panel-right-reveal .panel-backdrop {
7644 transform: translate3d(calc(-1 * var(--f7-panel-width)), 0, 0);
7645}
7646html.with-panel-left-cover .panel-left {
7647 transform: translate3d(0px, 0, 0);
7648}
7649html.with-panel-right-cover .panel-right {
7650 transform: translate3d(0px, 0, 0);
7651}
7652/* === Card === */
7653:root {
7654 --f7-card-bg-color: #fff;
7655 --f7-card-outline-border-color: rgba(0, 0, 0, 0.12);
7656 --f7-card-border-radius: 4px;
7657 --f7-card-font-size: inherit;
7658 --f7-card-header-text-color: inherit;
7659 --f7-card-header-font-weight: 400;
7660 --f7-card-header-border-color: #e1e1e1;
7661 --f7-card-footer-border-color: #e1e1e1;
7662 --f7-card-footer-font-weight: 400;
7663 --f7-card-footer-font-size: inherit;
7664 --f7-card-expandable-bg-color: #fff;
7665 --f7-card-expandable-font-size: 16px;
7666 --f7-card-expandable-tablet-width: 670px;
7667 --f7-card-expandable-tablet-height: 670px;
7668}
7669:root .theme-dark,
7670:root.theme-dark {
7671 --f7-card-bg-color: #1c1c1d;
7672 --f7-card-outline-border-color: #282829;
7673 --f7-card-header-border-color: #282829;
7674 --f7-card-footer-border-color: #282829;
7675 --f7-card-footer-text-color: #8E8E93;
7676}
7677.ios {
7678 --f7-card-margin-horizontal: 10px;
7679 --f7-card-margin-vertical: 10px;
7680 --f7-card-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
7681 --f7-card-content-padding-horizontal: 15px;
7682 --f7-card-content-padding-vertical: 15px;
7683 --f7-card-header-font-size: 17px;
7684 --f7-card-header-padding-vertical: 10px;
7685 --f7-card-header-padding-horizontal: 15px;
7686 --f7-card-header-min-height: 44px;
7687 --f7-card-footer-text-color: #6d6d72;
7688 --f7-card-footer-padding-vertical: 10px;
7689 --f7-card-footer-padding-horizontal: 15px;
7690 --f7-card-footer-min-height: 44px;
7691 --f7-card-expandable-margin-horizontal: 20px;
7692 --f7-card-expandable-margin-vertical: 30px;
7693 --f7-card-expandable-box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
7694 --f7-card-expandable-border-radius: 15px;
7695 --f7-card-expandable-tablet-border-radius: 5px;
7696 --f7-card-expandable-header-font-size: 27px;
7697 --f7-card-expandable-header-font-weight: bold;
7698}
7699.md {
7700 --f7-card-margin-horizontal: 8px;
7701 --f7-card-margin-vertical: 8px;
7702 --f7-card-box-shadow: var(--f7-elevation-1);
7703 --f7-card-content-padding-horizontal: 16px;
7704 --f7-card-content-padding-vertical: 16px;
7705 --f7-card-header-font-size: 16px;
7706 --f7-card-header-padding-vertical: 4px;
7707 --f7-card-header-padding-horizontal: 16px;
7708 --f7-card-header-min-height: 48px;
7709 --f7-card-footer-text-color: #757575;
7710 --f7-card-footer-padding-vertical: 4px;
7711 --f7-card-footer-padding-horizontal: 16px;
7712 --f7-card-footer-min-height: 48px;
7713 --f7-card-expandable-margin-horizontal: 12px;
7714 --f7-card-expandable-margin-vertical: 24px;
7715 --f7-card-expandable-box-shadow: var(--f7-elevation-10);
7716 --f7-card-expandable-border-radius: 8px;
7717 --f7-card-expandable-tablet-border-radius: 4px;
7718 --f7-card-expandable-header-font-size: 24px;
7719 --f7-card-expandable-header-font-weight: 500;
7720}
7721.cards-list > ul:before,
7722.card .list > ul:before {
7723 display: none !important;
7724}
7725.cards-list > ul:after,
7726.card .list > ul:after {
7727 display: none !important;
7728}
7729.cards-list ul,
7730.card .list ul {
7731 background: none;
7732}
7733.card {
7734 background: var(--f7-card-bg-color);
7735 position: relative;
7736 border-radius: var(--f7-card-border-radius);
7737 font-size: var(--f7-card-font-size);
7738 margin-top: var(--f7-card-margin-vertical);
7739 margin-bottom: var(--f7-card-margin-vertical);
7740 margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
7741 margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
7742 box-shadow: var(--f7-card-box-shadow);
7743}
7744.card .list,
7745.card .block {
7746 margin: 0;
7747}
7748.row:not(.no-gap) .col > .card {
7749 margin-left: 0;
7750 margin-right: 0;
7751}
7752.card.no-shadow {
7753 box-shadow: none;
7754}
7755.card-outline,
7756.ios .card-outline-ios,
7757.md .card-outline-md {
7758 box-shadow: none;
7759 border: 1px solid var(--f7-card-outline-border-color);
7760}
7761.card-outline.no-border,
7762.ios .card-outline-ios.no-border,
7763.md .card-outline-md.no-border,
7764.card-outline.no-hairlines,
7765.ios .card-outline-ios.no-hairlines,
7766.md .card-outline-md.no-hairlines {
7767 border: none;
7768}
7769.card-content {
7770 position: relative;
7771}
7772.card-content-padding {
7773 position: relative;
7774 padding: var(--f7-card-content-padding-vertical) var(--f7-card-content-padding-horizontal);
7775}
7776.card-content-padding > .list,
7777.card-content-padding > .block {
7778 margin: calc(-1 * var(--f7-card-content-padding-vertical)) calc(-1 * var(--f7-card-content-padding-horizontal));
7779}
7780.card-content-padding > p:first-child {
7781 margin-top: 0;
7782}
7783.card-content-padding > p:last-child {
7784 margin-bottom: 0;
7785}
7786.card-header {
7787 min-height: var(--f7-card-header-min-height);
7788 color: var(--f7-card-header-text-color);
7789 font-size: var(--f7-card-header-font-size);
7790 font-weight: var(--f7-card-header-font-weight);
7791 padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
7792}
7793.card-footer {
7794 min-height: var(--f7-card-footer-min-height);
7795 color: var(--f7-card-footer-text-color);
7796 font-size: var(--f7-card-footer-font-size);
7797 font-weight: var(--f7-card-footer-font-weight);
7798 padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
7799}
7800.card-footer a.link {
7801 overflow: hidden;
7802}
7803.card-header,
7804.card-footer {
7805 position: relative;
7806 box-sizing: border-box;
7807 display: flex;
7808 justify-content: space-between;
7809 align-items: center;
7810}
7811.card-header[valign="top"],
7812.card-footer[valign="top"] {
7813 align-items: flex-start;
7814}
7815.card-header[valign="bottom"],
7816.card-footer[valign="bottom"] {
7817 align-items: flex-end;
7818}
7819.card-header a.link,
7820.card-footer a.link {
7821 position: relative;
7822}
7823.card-header a.link i.icon,
7824.card-footer a.link i.icon {
7825 display: block;
7826}
7827.card-header a.icon-only,
7828.card-footer a.icon-only {
7829 display: flex;
7830 justify-content: center;
7831 align-items: center;
7832 margin: 0;
7833}
7834.card-header {
7835 border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
7836}
7837.card-header:after {
7838 content: '';
7839 position: absolute;
7840 background-color: var(--f7-card-header-border-color);
7841 display: block;
7842 z-index: 15;
7843 top: auto;
7844 right: auto;
7845 bottom: 0;
7846 left: 0;
7847 height: 1px;
7848 width: 100%;
7849 transform-origin: 50% 100%;
7850 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7851}
7852.card-header.no-hairline:after {
7853 display: none !important;
7854}
7855.card-footer {
7856 border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
7857}
7858.card-footer:before {
7859 content: '';
7860 position: absolute;
7861 background-color: var(--f7-card-footer-border-color);
7862 display: block;
7863 z-index: 15;
7864 top: 0;
7865 right: auto;
7866 bottom: auto;
7867 left: 0;
7868 height: 1px;
7869 width: 100%;
7870 transform-origin: 50% 0%;
7871 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
7872}
7873.card-footer.no-hairline:before {
7874 display: none !important;
7875}
7876.card-expandable {
7877 overflow: hidden;
7878 height: 300px;
7879 background: var(--f7-card-expandable-bg-color);
7880 position: relative;
7881 transform-origin: center center;
7882 transition-property: transform, border-radius;
7883 border-radius: var(--f7-card-expandable-border-radius);
7884 z-index: 2;
7885 transition-duration: 200ms;
7886 margin-left: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-left));
7887 margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
7888 margin-top: var(--f7-card-expandable-margin-vertical);
7889 margin-bottom: var(--f7-card-expandable-margin-vertical);
7890 box-shadow: var(--f7-card-expandable-box-shadow);
7891 font-size: var(--f7-card-expandable-font-size);
7892}
7893.card-expandable.card-no-transition {
7894 transition-duration: 0ms;
7895}
7896.card-expandable.card-expandable-animate-width .card-content {
7897 transition-property: width, transform;
7898 width: 100%;
7899}
7900.card-expandable.active-state {
7901 transform: scale(0.97);
7902}
7903.card-expandable .card-opened-fade-in,
7904.card-expandable .card-opened-fade-out {
7905 transition-duration: 400ms;
7906}
7907.card-expandable .card-opened-fade-in {
7908 opacity: 0;
7909 pointer-events: none;
7910}
7911.card-expandable .card-content {
7912 position: absolute;
7913 top: 0;
7914 width: 100vw;
7915 height: 100vh;
7916 transform-origin: center top;
7917 overflow: hidden;
7918 transition-property: transform;
7919 box-sizing: border-box;
7920 pointer-events: none;
7921 right: 0;
7922}
7923.card-expandable .card-content .card-content-padding {
7924 padding-left: calc(var(--f7-safe-area-left) + var(--f7-card-content-padding-horizontal));
7925 padding-right: calc(var(--f7-safe-area-right) + var(--f7-card-content-padding-horizontal));
7926}
7927.card-expandable.card-opened {
7928 transition-duration: 0ms;
7929}
7930.card-expandable.card-opening,
7931.card-expandable.card-closing,
7932.card-expandable.card-transitioning {
7933 transition-duration: 400ms;
7934}
7935.card-expandable.card-opening .card-content {
7936 transition-duration: 300ms;
7937}
7938.card-expandable.card-closing .card-content {
7939 transition-duration: 500ms;
7940}
7941.card-expandable.card-opening,
7942.card-expandable.card-opened,
7943.card-expandable.card-closing {
7944 z-index: 100;
7945}
7946.card-expandable.card-opening,
7947.card-expandable.card-opened {
7948 border-radius: 0;
7949}
7950.card-expandable.card-opening .card-opened-fade-in,
7951.card-expandable.card-opened .card-opened-fade-in {
7952 opacity: 1;
7953 pointer-events: auto;
7954}
7955.card-expandable.card-opening .card-opened-fade-out,
7956.card-expandable.card-opened .card-opened-fade-out {
7957 opacity: 0;
7958 pointer-events: none;
7959}
7960.card-expandable.card-opened .card-content {
7961 overflow: auto;
7962 -webkit-overflow-scrolling: touch;
7963 pointer-events: auto;
7964}
7965.card-expandable .card-header {
7966 font-size: var(--f7-card-expandable-header-font-size);
7967 font-weight: var(--f7-card-expandable-header-font-weight);
7968}
7969.card-expandable .card-header:after {
7970 display: none !important;
7971}
7972.card-prevent-open {
7973 pointer-events: auto;
7974}
7975.card-expandable-size {
7976 width: 0;
7977 height: 0;
7978 position: absolute;
7979 left: 0;
7980 top: 0;
7981 opacity: 0;
7982 pointer-events: none;
7983 visibility: hidden;
7984}
7985@media (min-width: 768px) and (min-height: 670px) {
7986 .card-expandable:not(.card-tablet-fullscreen) {
7987 max-width: var(--f7-card-expandable-tablet-width);
7988 }
7989 .card-expandable:not(.card-tablet-fullscreen).card-opened,
7990 .card-expandable:not(.card-tablet-fullscreen).card-opening {
7991 border-radius: var(--f7-card-expandable-tablet-border-radius);
7992 }
7993 .card-expandable:not(.card-tablet-fullscreen):not(.card-expandable-animate-width) .card-content {
7994 width: var(--f7-card-expandable-tablet-width);
7995 }
7996 .card-expandable:not(.card-tablet-fullscreen) .card-expandable-size {
7997 width: var(--f7-card-expandable-tablet-width);
7998 height: var(--f7-card-expandable-tablet-height);
7999 }
8000}
8001.page.page-with-card-opened .page-content {
8002 overflow: hidden;
8003}
8004.card-backdrop {
8005 position: fixed;
8006 left: 0;
8007 top: 0;
8008 width: 100%;
8009 height: 100%;
8010 z-index: 99;
8011 pointer-events: none;
8012 background: rgba(0, 0, 0, 0.2);
8013 opacity: 0;
8014}
8015.card-backdrop-in {
8016 animation: card-backdrop-fade-in 400ms forwards;
8017 pointer-events: auto;
8018}
8019.card-backdrop-out {
8020 animation: card-backdrop-fade-out 400ms forwards;
8021}
8022@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
8023 .card-backdrop {
8024 background: transparent;
8025 opacity: 1;
8026 }
8027 .card-backdrop-in {
8028 animation: card-backdrop-blur-in 400ms forwards;
8029 }
8030 .card-backdrop-out {
8031 animation: card-backdrop-blur-out 400ms forwards;
8032 }
8033}
8034@keyframes card-backdrop-fade-in {
8035 from {
8036 opacity: 0;
8037 }
8038 to {
8039 opacity: 1;
8040 }
8041}
8042@keyframes card-backdrop-fade-out {
8043 from {
8044 opacity: 1;
8045 }
8046 to {
8047 opacity: 0;
8048 }
8049}
8050@keyframes card-backdrop-blur-in {
8051 from {
8052 -webkit-backdrop-filter: blur(0px);
8053 backdrop-filter: blur(0px);
8054 }
8055 to {
8056 -webkit-backdrop-filter: blur(15px);
8057 backdrop-filter: blur(15px);
8058 }
8059}
8060@keyframes card-backdrop-blur-out {
8061 from {
8062 -webkit-backdrop-filter: blur(15px);
8063 backdrop-filter: blur(15px);
8064 }
8065 to {
8066 -webkit-backdrop-filter: blur(0px);
8067 backdrop-filter: blur(0px);
8068 }
8069}
8070/* === Chips === */
8071:root {
8072 --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
8073 --f7-chip-font-size: 13px;
8074 --f7-chip-font-weight: normal;
8075 --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
8076 --f7-chip-media-font-size: 16px;
8077 --f7-chip-delete-button-color: #000;
8078}
8079:root .theme-dark,
8080:root.theme-dark {
8081 --f7-chip-delete-button-color: #fff;
8082 --f7-chip-bg-color: #333;
8083 --f7-chip-outline-border-color: #333;
8084}
8085.ios {
8086 --f7-chip-text-color: #000;
8087 --f7-chip-height: 24px;
8088 --f7-chip-padding-horizontal: 10px;
8089}
8090.ios .theme-dark,
8091.ios.theme-dark {
8092 --f7-chip-text-color: #fff;
8093}
8094.md {
8095 --f7-chip-text-color: rgba(0, 0, 0, 0.87);
8096 --f7-chip-height: 32px;
8097 --f7-chip-padding-horizontal: 12px;
8098}
8099.md .theme-dark,
8100.md.theme-dark {
8101 --f7-chip-text-color: rgba(255, 255, 255, 0.87);
8102}
8103.chip {
8104 padding-left: var(--f7-chip-padding-horizontal);
8105 padding-right: var(--f7-chip-padding-horizontal);
8106 font-weight: var(--f7-chip-font-weight);
8107 display: inline-flex;
8108 box-sizing: border-box;
8109 vertical-align: middle;
8110 align-items: center;
8111 margin: 2px 0;
8112 background-color: var(--f7-chip-bg-color);
8113 font-size: var(--f7-chip-font-size);
8114 color: var(--f7-chip-text-color);
8115 height: var(--f7-chip-height);
8116 line-height: var(--f7-chip-height);
8117 border-radius: var(--f7-chip-height);
8118 position: relative;
8119}
8120.chip-media {
8121 border-radius: 50%;
8122 flex-shrink: 0;
8123 display: flex;
8124 align-items: center;
8125 justify-content: center;
8126 height: var(--f7-chip-height);
8127 width: var(--f7-chip-height);
8128 border-radius: var(--f7-chip-height);
8129 text-align: center;
8130 line-height: var(--f7-chip-height);
8131 box-sizing: border-box;
8132 color: #fff;
8133 font-size: var(--f7-chip-media-font-size);
8134 vertical-align: middle;
8135 margin-right: calc(-1 * var(--f7-chip-padding-horizontal));
8136}
8137.chip-media i.icon {
8138 font-size: calc(var(--f7-chip-height) - 8px);
8139 height: calc(var(--f7-chip-height) - 8px);
8140}
8141.chip-media img {
8142 max-width: 100%;
8143 max-height: 100%;
8144 width: auto;
8145 height: auto;
8146 border-radius: 50%;
8147 display: block;
8148}
8149.chip-media + .chip-label {
8150 margin-right: 4px;
8151}
8152.chip-label {
8153 white-space: nowrap;
8154 overflow: hidden;
8155 text-overflow: ellipsis;
8156 position: relative;
8157 flex-shrink: 1;
8158 min-width: 0;
8159}
8160.chip-delete {
8161 text-align: center;
8162 cursor: pointer;
8163 flex-shrink: 0;
8164 background-repeat: no-repeat;
8165 width: 24px;
8166 height: 24px;
8167 color: var(--f7-chip-delete-button-color);
8168 opacity: 0.54;
8169 position: relative;
8170}
8171.chip-delete:after {
8172 font-family: 'framework7-core-icons';
8173 font-weight: normal;
8174 font-style: normal;
8175 line-height: 1;
8176 letter-spacing: normal;
8177 text-transform: none;
8178 white-space: nowrap;
8179 word-wrap: normal;
8180 direction: ltr;
8181 -webkit-font-smoothing: antialiased;
8182 text-rendering: optimizeLegibility;
8183 -moz-osx-font-smoothing: grayscale;
8184 -moz-font-feature-settings: "liga";
8185 font-feature-settings: "liga";
8186 text-align: center;
8187 display: block;
8188 width: 100%;
8189 height: 100%;
8190 font-size: 20px;
8191 content: 'delete_round_ios';
8192 line-height: 24px;
8193}
8194.chip .chip-delete.active-state {
8195 opacity: 1;
8196}
8197.chip-outline,
8198.ios .chip-outline-ios,
8199.md .chip-outline-md {
8200 border: 1px solid var(--f7-chip-outline-border-color);
8201 background: none;
8202}
8203.chip[class*="color-"] {
8204 --f7-chip-bg-color: var(--f7-theme-color);
8205 --f7-chip-text-color: #fff;
8206}
8207.chip-outline[class*="color-"],
8208.ios .chip-outline-ios[class*="color-"],
8209.md .chip-outline-md[class*="color-"] {
8210 --f7-chip-outline-border-color: var(--f7-theme-color);
8211 --f7-chip-text-color: var(--f7-theme-color);
8212}
8213.ios .chip-delete {
8214 margin-left: calc(-1 * var(--f7-chip-padding-horizontal));
8215}
8216.ios .chip-delete:after {
8217 font-size: 10px;
8218}
8219.md .chip-label + .chip-delete {
8220 margin-right: 4px;
8221}
8222.md .chip-delete {
8223 margin-left: calc(-1 * var(--f7-chip-padding-horizontal) + 4px);
8224}
8225.md .chip-delete:after {
8226 font-size: 12px;
8227}
8228/* === Form === */
8229/* === Input === */
8230:root {
8231 --f7-label-font-size: 12px;
8232 --f7-label-font-weight: 400;
8233 --f7-label-line-height: 1.2;
8234 --f7-input-error-text-color: #ff3b30;
8235 --f7-input-error-font-size: 12px;
8236 --f7-input-error-line-height: 1.4;
8237 --f7-input-error-font-weight: 400;
8238 --f7-input-info-font-size: 12px;
8239 --f7-input-info-line-height: 1.4;
8240}
8241.ios {
8242 --f7-input-height: 44px;
8243 --f7-input-text-color: #000000;
8244 --f7-input-font-size: 17px;
8245 --f7-input-placeholder-color: #a9a9a9;
8246 /*
8247 --f7-input-focused-border-color: var(--f7-list-item-border-color);
8248 --f7-input-invalid-border-color: var(--f7-list-item-border-color);
8249 --f7-input-invalid-text-color: var(--f7-input-error-text-color);
8250 */
8251 --f7-label-text-color: inherit;
8252 /*
8253 --f7-label-focused-text-color: var(--f7-label-text-color);
8254 --f7-label-invalid-text-color: var(--f7-label-text-color);
8255 */
8256 --f7-floating-label-scale: calc(17 / 12);
8257 --f7-inline-label-font-size: 17px;
8258 --f7-inline-label-line-height: 1.4;
8259 --f7-input-info-text-color: #8e8e93;
8260 --f7-input-clear-button-size: 14px;
8261 --f7-input-clear-button-color: #8e8e93;
8262}
8263.ios .theme-dark,
8264.ios.theme-dark {
8265 --f7-input-text-color: #fff;
8266}
8267.md {
8268 --f7-input-height: 36px;
8269 --f7-input-text-color: #212121;
8270 --f7-input-font-size: 16px;
8271 --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
8272 /*
8273 --f7-input-focused-border-color: var(--f7-theme-color);
8274 --f7-input-invalid-border-color: var(--f7-input-error-text-color);
8275 --f7-input-invalid-text-color: var(--f7-input-text-color);
8276 */
8277 --f7-label-text-color: rgba(0, 0, 0, 0.65);
8278 /*
8279 --f7-label-focused-text-color: var(--f7-theme-color);
8280 --f7-label-invalid-text-color: var(--f7-input-error-text-color );
8281 */
8282 --f7-floating-label-scale: calc(16 / 12);
8283 --f7-inline-label-font-size: 16px;
8284 --f7-inline-label-line-height: 1.5;
8285 --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
8286 --f7-input-clear-button-size: 24px;
8287 --f7-input-clear-button-color: #aaa;
8288}
8289.md .theme-dark,
8290.md.theme-dark {
8291 --f7-input-text-color: rgba(255, 255, 255, 0.87);
8292 --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
8293 --f7-label-text-color: rgba(255, 255, 255, 0.54);
8294 --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
8295}
8296input[type="text"],
8297input[type="password"],
8298input[type="search"],
8299input[type="email"],
8300input[type="tel"],
8301input[type="url"],
8302input[type="date"],
8303input[type="datetime-local"],
8304input[type="time"],
8305input[type="number"],
8306select,
8307textarea {
8308 box-sizing: border-box;
8309 -webkit-appearance: none;
8310 -moz-appearance: none;
8311 appearance: none;
8312 border: none;
8313 box-shadow: none;
8314 border-radius: 0;
8315 outline: 0;
8316 display: block;
8317 padding: 0;
8318 margin: 0;
8319 font-family: inherit;
8320 background: none;
8321 resize: none;
8322 font-size: inherit;
8323 color: inherit;
8324}
8325.textarea-resizable-shadow {
8326 opacity: 0;
8327 position: absolute;
8328 z-index: -1000;
8329 pointer-events: none;
8330 left: -1000px;
8331 top: -1000px;
8332 visibility: hidden;
8333}
8334.list input[type="text"],
8335.list input[type="password"],
8336.list input[type="search"],
8337.list input[type="email"],
8338.list input[type="tel"],
8339.list input[type="url"],
8340.list input[type="date"],
8341.list input[type="datetime-local"],
8342.list input[type="time"],
8343.list input[type="number"],
8344.list select {
8345 width: 100%;
8346 height: var(--f7-input-height);
8347 color: var(--f7-input-text-color);
8348 font-size: var(--f7-input-font-size);
8349}
8350.list input[type="text"]::-webkit-input-placeholder,
8351.list input[type="password"]::-webkit-input-placeholder,
8352.list input[type="search"]::-webkit-input-placeholder,
8353.list input[type="email"]::-webkit-input-placeholder,
8354.list input[type="tel"]::-webkit-input-placeholder,
8355.list input[type="url"]::-webkit-input-placeholder,
8356.list input[type="date"]::-webkit-input-placeholder,
8357.list input[type="datetime-local"]::-webkit-input-placeholder,
8358.list input[type="time"]::-webkit-input-placeholder,
8359.list input[type="number"]::-webkit-input-placeholder,
8360.list select::-webkit-input-placeholder {
8361 color: var(--f7-input-placeholder-color);
8362}
8363.list input[type="text"]::-moz-placeholder,
8364.list input[type="password"]::-moz-placeholder,
8365.list input[type="search"]::-moz-placeholder,
8366.list input[type="email"]::-moz-placeholder,
8367.list input[type="tel"]::-moz-placeholder,
8368.list input[type="url"]::-moz-placeholder,
8369.list input[type="date"]::-moz-placeholder,
8370.list input[type="datetime-local"]::-moz-placeholder,
8371.list input[type="time"]::-moz-placeholder,
8372.list input[type="number"]::-moz-placeholder,
8373.list select::-moz-placeholder {
8374 color: var(--f7-input-placeholder-color);
8375}
8376.list input[type="text"]::-ms-input-placeholder,
8377.list input[type="password"]::-ms-input-placeholder,
8378.list input[type="search"]::-ms-input-placeholder,
8379.list input[type="email"]::-ms-input-placeholder,
8380.list input[type="tel"]::-ms-input-placeholder,
8381.list input[type="url"]::-ms-input-placeholder,
8382.list input[type="date"]::-ms-input-placeholder,
8383.list input[type="datetime-local"]::-ms-input-placeholder,
8384.list input[type="time"]::-ms-input-placeholder,
8385.list input[type="number"]::-ms-input-placeholder,
8386.list select::-ms-input-placeholder {
8387 color: var(--f7-input-placeholder-color);
8388}
8389.list input[type="text"]::placeholder,
8390.list input[type="password"]::placeholder,
8391.list input[type="search"]::placeholder,
8392.list input[type="email"]::placeholder,
8393.list input[type="tel"]::placeholder,
8394.list input[type="url"]::placeholder,
8395.list input[type="date"]::placeholder,
8396.list input[type="datetime-local"]::placeholder,
8397.list input[type="time"]::placeholder,
8398.list input[type="number"]::placeholder,
8399.list select::placeholder {
8400 color: var(--f7-input-placeholder-color);
8401}
8402.list textarea {
8403 width: 100%;
8404 color: var(--f7-input-text-color);
8405 font-size: var(--f7-input-font-size);
8406 resize: none;
8407 line-height: 1.4;
8408 height: 100px;
8409}
8410.list textarea::-webkit-input-placeholder {
8411 color: var(--f7-input-placeholder-color);
8412}
8413.list textarea::-moz-placeholder {
8414 color: var(--f7-input-placeholder-color);
8415}
8416.list textarea::-ms-input-placeholder {
8417 color: var(--f7-input-placeholder-color);
8418}
8419.list textarea::placeholder {
8420 color: var(--f7-input-placeholder-color);
8421}
8422.list textarea.resizable {
8423 height: var(--f7-input-height);
8424}
8425.list input[type="datetime-local"] {
8426 max-width: 50vw;
8427}
8428.list input[type="date"],
8429.list input[type="datetime-local"] {
8430 line-height: var(--f7-input-height);
8431}
8432.list input[type="date"],
8433.list input[type="datetime-local"] {
8434 text-align: right;
8435 flex-direction: row-reverse;
8436 width: auto;
8437}
8438.list .item-label,
8439.list .item-floating-label {
8440 width: 100%;
8441 vertical-align: top;
8442 flex-shrink: 0;
8443 font-size: var(--f7-label-font-size);
8444 font-weight: var(--f7-label-font-weight);
8445 line-height: var(--f7-label-line-height);
8446 color: var(--f7-label-text-color);
8447 transition-duration: 200ms;
8448 transition-property: transform, color;
8449}
8450.list .item-floating-label {
8451 transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-input-height) / 2));
8452 color: var(--f7-input-placeholder-color);
8453 width: auto;
8454 max-width: calc(100% / var(--f7-floating-label-scale));
8455 pointer-events: none;
8456 transform-origin: right bottom;
8457}
8458.list .item-floating-label ~ .item-input-wrap input::-webkit-input-placeholder,
8459.list .item-floating-label ~ .item-input-wrap textarea::-webkit-input-placeholder {
8460 opacity: 0;
8461 transition-duration: 100ms;
8462}
8463.list .item-floating-label ~ .item-input-wrap input::-moz-placeholder,
8464.list .item-floating-label ~ .item-input-wrap textarea::-moz-placeholder {
8465 opacity: 0;
8466 transition-duration: 100ms;
8467}
8468.list .item-floating-label ~ .item-input-wrap input::-ms-input-placeholder,
8469.list .item-floating-label ~ .item-input-wrap textarea::-ms-input-placeholder {
8470 opacity: 0;
8471 transition-duration: 100ms;
8472}
8473.list .item-floating-label ~ .item-input-wrap input::placeholder,
8474.list .item-floating-label ~ .item-input-wrap textarea::placeholder {
8475 opacity: 0;
8476 transition-duration: 100ms;
8477}
8478.list .item-floating-label ~ .item-input-wrap input.input-focused::-webkit-input-placeholder,
8479.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-webkit-input-placeholder {
8480 opacity: 1;
8481 transition-duration: 300ms;
8482}
8483.list .item-floating-label ~ .item-input-wrap input.input-focused::-moz-placeholder,
8484.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-moz-placeholder {
8485 opacity: 1;
8486 transition-duration: 300ms;
8487}
8488.list .item-floating-label ~ .item-input-wrap input.input-focused::-ms-input-placeholder,
8489.list .item-floating-label ~ .item-input-wrap textarea.input-focused::-ms-input-placeholder {
8490 opacity: 1;
8491 transition-duration: 300ms;
8492}
8493.list .item-floating-label ~ .item-input-wrap input.input-focused::placeholder,
8494.list .item-floating-label ~ .item-input-wrap textarea.input-focused::placeholder {
8495 opacity: 1;
8496 transition-duration: 300ms;
8497}
8498.list .item-input-with-value .item-floating-label {
8499 color: var(--f7-label-text-color);
8500}
8501.list .item-input-with-value .item-floating-label,
8502.list .item-input-focused .item-floating-label {
8503 transform: scale(1) translateY(0);
8504}
8505.list .item-input-wrap {
8506 width: 100%;
8507 flex-shrink: 1;
8508 position: relative;
8509}
8510.item-input .item-inner {
8511 display: block;
8512}
8513.item-input-error-message,
8514.input-error-message {
8515 font-size: var(--f7-input-error-font-size);
8516 line-height: var(--f7-input-error-line-height);
8517 color: var(--f7-input-error-text-color);
8518 font-weight: var(--f7-input-error-font-weight);
8519 display: none;
8520}
8521.item-input-info,
8522.input-info {
8523 font-size: var(--f7-input-info-font-size);
8524 line-height: var(--f7-input-info-line-height);
8525 color: var(--f7-input-info-text-color);
8526}
8527.item-input-invalid .item-input-error-message,
8528.input-invalid .item-input-error-message,
8529.item-input-invalid .input-error-message,
8530.input-invalid .input-error-message {
8531 display: block;
8532}
8533.item-input-invalid .item-input-info,
8534.input-invalid .item-input-info,
8535.item-input-invalid .input-info,
8536.input-invalid .input-info {
8537 display: none;
8538}
8539.inline-labels .item-inner,
8540.inline-label .item-inner {
8541 display: flex;
8542}
8543.inline-labels .item-label,
8544.inline-label .item-label,
8545.inline-labels .item-floating-label,
8546.inline-label .item-floating-label {
8547 align-self: flex-start;
8548 width: 35%;
8549 font-size: var(--f7-inline-label-font-size);
8550 line-height: var(--f7-inline-label-line-height);
8551}
8552.inline-labels .item-label + .item-input-wrap,
8553.inline-label .item-label + .item-input-wrap,
8554.inline-labels .item-floating-label + .item-input-wrap,
8555.inline-label .item-floating-label + .item-input-wrap {
8556 margin-right: 8px;
8557}
8558.input {
8559 position: relative;
8560}
8561.input input,
8562.input select,
8563.input textarea {
8564 width: 100%;
8565}
8566.input-clear-button {
8567 opacity: 0;
8568 pointer-events: none;
8569 visibility: hidden;
8570 transition-duration: 100ms;
8571 position: absolute;
8572 top: 50%;
8573 border: none;
8574 padding: 0;
8575 margin: 0;
8576 outline: 0;
8577 z-index: 1;
8578 cursor: pointer;
8579 background: none;
8580 width: var(--f7-input-clear-button-size);
8581 height: var(--f7-input-clear-button-size);
8582 margin-top: calc(-1 * var(--f7-input-clear-button-size) / 2);
8583 color: var(--f7-input-clear-button-color);
8584 left: 0;
8585}
8586.input-clear-button:after {
8587 font-family: 'framework7-core-icons';
8588 font-weight: normal;
8589 font-style: normal;
8590 line-height: 1;
8591 letter-spacing: normal;
8592 text-transform: none;
8593 white-space: nowrap;
8594 word-wrap: normal;
8595 direction: ltr;
8596 -webkit-font-smoothing: antialiased;
8597 text-rendering: optimizeLegibility;
8598 -moz-osx-font-smoothing: grayscale;
8599 -moz-font-feature-settings: "liga";
8600 font-feature-settings: "liga";
8601 text-align: center;
8602 display: block;
8603 width: 100%;
8604 height: 100%;
8605 font-size: 20px;
8606}
8607.input-clear-button:before {
8608 position: absolute;
8609 content: '';
8610 left: 50%;
8611 top: 50%;
8612}
8613.item-input-wrap .input-clear-button {
8614 top: calc(var(--f7-input-height) / 2);
8615}
8616.input-with-value ~ .input-clear-button,
8617.item-input-with-value .input-clear-button,
8618.input-with-value .input-clear-button {
8619 opacity: 1;
8620 pointer-events: auto;
8621 visibility: visible;
8622}
8623.input-dropdown-wrap,
8624.input-dropdown {
8625 position: relative;
8626}
8627.input-dropdown-wrap:before,
8628.input-dropdown:before {
8629 content: '';
8630 pointer-events: none;
8631 position: absolute;
8632 top: 50%;
8633 margin-top: -2px;
8634 width: 0;
8635 height: 0;
8636 border-left: 4px solid transparent;
8637 border-right: 4px solid transparent;
8638 border-top: 5px solid #727272;
8639 left: 6px;
8640}
8641.input-dropdown-wrap select,
8642.input-dropdown select,
8643.input-dropdown-wrap input,
8644.input-dropdown input,
8645.input-dropdown-wrap textarea,
8646.input-dropdown textarea {
8647 padding-right: 20px;
8648}
8649.ios .list textarea {
8650 padding-top: 11px;
8651 padding-bottom: 11px;
8652}
8653.ios .item-label + .item-input-wrap,
8654.ios .item-floating-label + .item-input-wrap {
8655 margin-top: 0;
8656}
8657.ios .item-input-focused .item-floating-label {
8658 color: var(--f7-label-text-color);
8659}
8660.ios .item-input .item-media {
8661 align-self: flex-start;
8662}
8663.ios .item-input-wrap {
8664 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8665 margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));
8666}
8667.ios .inline-labels .item-label,
8668.ios .inline-label .item-label,
8669.ios .inline-labels .item-floating-label,
8670.ios .inline-label .item-floating-label {
8671 padding-top: 3px;
8672}
8673.ios .inline-labels .item-label + .item-input-wrap,
8674.ios .inline-label .item-label + .item-input-wrap,
8675.ios .inline-labels .item-floating-label + .item-input-wrap,
8676.ios .inline-label .item-floating-label + .item-input-wrap {
8677 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8678}
8679.ios .inline-labels .item-input-wrap,
8680.ios .inline-label .item-input-wrap {
8681 margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
8682}
8683.ios .item-input-error-message,
8684.ios .item-input-info,
8685.ios .input-error-message,
8686.ios .input-info {
8687 position: relative;
8688 margin-bottom: 6px;
8689 margin-top: -8px;
8690}
8691.ios .item-input-focused .item-label,
8692.ios .item-input-focused .item-floating-label {
8693 color: var(--f7-label-focused-text-color, var(--f7-label-text-color));
8694}
8695.ios .item-input-focused .item-inner:after {
8696 background: var(--f7-input-focused-border-color, var(--f7-list-item-border-color));
8697}
8698.ios .item-input-invalid .item-label,
8699.ios .item-input-invalid .item-floating-label {
8700 color: var(--f7-label-invalid-text-color, var(--f7-label-text-color));
8701}
8702.ios .item-input-invalid .item-inner:after {
8703 background: var(--f7-input-invalid-border-color, var(--f7-list-item-border-color));
8704}
8705.ios .item-input-invalid input,
8706.ios .input-invalid input,
8707.ios .item-input-invalid select,
8708.ios .input-invalid select,
8709.ios .item-input-invalid textarea,
8710.ios .input-invalid textarea {
8711 color: var(--f7-input-invalid-text-color, var(--f7-input-error-text-color));
8712}
8713.ios .input-clear-button:after {
8714 content: 'delete_round_ios';
8715 font-size: calc(var(--f7-input-clear-button-size) / (14 / 10));
8716 line-height: 1.4;
8717}
8718.ios .input-clear-button:before {
8719 width: 44px;
8720 height: 44px;
8721 margin-left: -22px;
8722 margin-top: -22px;
8723}
8724.md .list textarea {
8725 padding-top: 7px;
8726 padding-bottom: 7px;
8727}
8728.md .item-input-wrap:after,
8729.md .input:after {
8730 content: '';
8731 position: absolute;
8732 background-color: var(--f7-list-item-border-color);
8733 display: block;
8734 z-index: 15;
8735 top: auto;
8736 right: auto;
8737 bottom: 0;
8738 left: 0;
8739 height: 1px;
8740 width: 100%;
8741 transform-origin: 50% 100%;
8742 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
8743}
8744.md .item-input-wrap:after,
8745.md .input:after {
8746 transition-duration: 200ms;
8747}
8748.md .item-input-wrap {
8749 min-height: var(--f7-input-height);
8750}
8751.md .item-input .item-media {
8752 align-self: flex-end;
8753}
8754.md .item-input .item-inner:after {
8755 display: none !important;
8756}
8757.md .inline-labels .item-media,
8758.md .inline-label .item-media {
8759 align-self: flex-start;
8760 padding-top: 14px;
8761}
8762.md .inline-labels .item-label,
8763.md .inline-label .item-label,
8764.md .inline-labels .item-floating-label,
8765.md .inline-label .item-floating-label {
8766 padding-top: 7px;
8767}
8768.md .item-input-with-error-message,
8769.md .item-input-with-info,
8770.md .input-with-error-message,
8771.md .input-with-info {
8772 padding-bottom: 20px;
8773}
8774.md .item-input-error-message,
8775.md .item-input-info,
8776.md .input-error-message,
8777.md .input-info {
8778 position: absolute;
8779 top: 100%;
8780 margin-top: 4px;
8781 white-space: nowrap;
8782 overflow: hidden;
8783 text-overflow: ellipsis;
8784 width: 100%;
8785 right: 0;
8786}
8787.md .item-input-focused .item-label,
8788.md .item-input-focused .item-floating-label {
8789 color: var(--f7-label-focused-text-color, var(--f7-theme-color));
8790}
8791.md .item-input-focused .item-input-wrap:after,
8792.md .input-focused:after {
8793 background: var(--f7-input-focused-border-color, var(--f7-theme-color));
8794}
8795.md .item-input-invalid .item-input-wrap:after,
8796.md .item-input-focused .item-input-wrap:after,
8797.md .input-invalid:after,
8798.md .input-focused:after {
8799 transform: scaleY(2) !important;
8800}
8801.md .item-input-invalid .item-input-wrap:after,
8802.md .input-invalid:after {
8803 background: var(--f7-input-invalid-border-color, var(--f7-input-error-text-color));
8804}
8805.md .item-input-invalid .item-label,
8806.md .item-input-invalid .item-floating-label {
8807 color: var(--f7-label-invalid-text-color, var(--f7-input-error-text-color));
8808}
8809.md .item-input-invalid input,
8810.md .input-invalid input,
8811.md .item-input-invalid select,
8812.md .input-invalid select,
8813.md .item-input-invalid textarea,
8814.md .input-invalid textarea {
8815 color: var(--f7-input-invalid-text-color, var(--f7-input-text-color));
8816}
8817.md .input-clear-button:after {
8818 font-size: calc(var(--f7-input-clear-button-size) / (24 / 20));
8819 content: 'delete_round_md';
8820 line-height: 1.2;
8821}
8822.md .input-clear-button:before {
8823 width: 48px;
8824 height: 48px;
8825 margin-left: -24px;
8826 margin-top: -24px;
8827}
8828/* === Checkbox === */
8829:root {
8830 /* --f7-checkbox-active-color: var(--f7-theme-color); */
8831 --f7-checkbox-icon-color: #fff;
8832}
8833.ios {
8834 --f7-checkbox-size: 22px;
8835 --f7-checkbox-border-radius: 50%;
8836 --f7-checkbox-border-width: 1px;
8837 --f7-checkbox-inactive-color: #c7c7cc;
8838 --f7-checkbox-extra-margin: 0px;
8839}
8840.md {
8841 --f7-checkbox-size: 18px;
8842 --f7-checkbox-border-radius: 2px;
8843 --f7-checkbox-border-width: 2px;
8844 --f7-checkbox-inactive-color: #6d6d6d;
8845 --f7-checkbox-extra-margin: 22px;
8846}
8847.checkbox {
8848 position: relative;
8849 display: inline-block;
8850 vertical-align: middle;
8851 z-index: 1;
8852 background-color: transparent;
8853 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
8854}
8855.icon-checkbox,
8856.checkbox i {
8857 flex-shrink: 0;
8858 border: var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);
8859 width: var(--f7-checkbox-size);
8860 height: var(--f7-checkbox-size);
8861 border-radius: var(--f7-checkbox-border-radius);
8862 box-sizing: border-box;
8863 position: relative;
8864 display: block;
8865}
8866.icon-checkbox:after,
8867.checkbox i:after {
8868 font-family: 'framework7-core-icons';
8869 font-weight: normal;
8870 font-style: normal;
8871 line-height: 1;
8872 letter-spacing: normal;
8873 text-transform: none;
8874 white-space: nowrap;
8875 word-wrap: normal;
8876 direction: ltr;
8877 -webkit-font-smoothing: antialiased;
8878 text-rendering: optimizeLegibility;
8879 -moz-osx-font-smoothing: grayscale;
8880 -moz-font-feature-settings: "liga";
8881 font-feature-settings: "liga";
8882 text-align: center;
8883 display: block;
8884 width: 100%;
8885 height: 100%;
8886 font-size: 20px;
8887 width: var(--f7-checkbox-size);
8888 height: var(--f7-checkbox-size);
8889 line-height: var(--f7-checkbox-size);
8890 left: calc(0px - var(--f7-checkbox-border-width));
8891 top: calc(0px - var(--f7-checkbox-border-width));
8892 opacity: 0;
8893 color: var(--f7-checkbox-icon-color);
8894 position: relative;
8895}
8896label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox,
8897label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox,
8898.checkbox input[type="checkbox"]:checked ~ i {
8899 border-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
8900 background-color: var(--f7-checkbox-active-color, var(--f7-theme-color));
8901}
8902label.item-checkbox input[type="checkbox"]:checked ~ .icon-checkbox:after,
8903label.item-checkbox input[type="checkbox"]:checked ~ * .icon-checkbox:after,
8904.checkbox input[type="checkbox"]:checked ~ i:after {
8905 opacity: 1;
8906}
8907label.item-checkbox,
8908.checkbox {
8909 cursor: pointer;
8910}
8911label.item-checkbox input[type="checkbox"],
8912.checkbox input[type="checkbox"],
8913label.item-checkbox input[type="radio"],
8914.checkbox input[type="radio"] {
8915 display: none;
8916}
8917label.item-checkbox {
8918 transition-duration: 300ms;
8919}
8920label.item-checkbox .item-content .item-media,
8921label.item-checkbox.item-content .item-media {
8922 align-self: center;
8923}
8924label.item-checkbox > .icon-checkbox {
8925 margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin));
8926}
8927label.item-checkbox.active-state {
8928 background-color: var(--f7-list-link-pressed-bg-color);
8929}
8930label.item-checkbox.active-state:after {
8931 background-color: transparent;
8932}
8933label.item-checkbox.disabled,
8934.disabled label.item-checkbox {
8935 opacity: 0.55;
8936 pointer-events: none;
8937 opacity: 0.55 !important;
8938 pointer-events: none !important;
8939}
8940.ios .icon-checkbox:after,
8941.ios .checkbox i:after {
8942 content: 'checkbox_ios';
8943 font-size: 21px;
8944}
8945.ios label.item-checkbox.active-state {
8946 transition-duration: 0ms;
8947}
8948.md .icon-checkbox,
8949.md .checkbox i {
8950 transition-duration: 200ms;
8951}
8952.md .icon-checkbox:after,
8953.md .checkbox i:after {
8954 content: 'checkbox_md';
8955 transition-duration: 200ms;
8956 font-size: 15px;
8957}
8958.md label.item-checkbox {
8959 position: relative;
8960 overflow: hidden;
8961 z-index: 0;
8962}
8963/* === Radio === */
8964:root {
8965 /*
8966 --f7-radio-active-color: var(--f7-theme-color);
8967 */
8968 --f7-radio-border-radius: 50%;
8969}
8970.ios {
8971 --f7-radio-size: 22px;
8972 --f7-radio-border-width: 1px;
8973 --f7-radio-inactive-color: #c7c7cc;
8974 --f7-radio-extra-margin: 0px;
8975}
8976.md {
8977 --f7-radio-size: 20px;
8978 --f7-radio-border-width: 2px;
8979 --f7-radio-inactive-color: #6d6d6d;
8980 --f7-radio-extra-margin: 22px;
8981}
8982.radio {
8983 position: relative;
8984 display: inline-block;
8985 vertical-align: middle;
8986 z-index: 1;
8987 --f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.5);
8988}
8989.icon-radio {
8990 width: var(--f7-radio-size);
8991 height: var(--f7-radio-size);
8992 border-radius: var(--f7-radio-border-radius);
8993 position: relative;
8994 box-sizing: border-box;
8995 display: block;
8996 flex-shrink: 0;
8997}
8998.radio .icon-radio,
8999.md .icon-radio {
9000 border: var(--f7-radio-border-width) solid var(--f7-radio-inactive-color);
9001}
9002label.item-radio,
9003.radio {
9004 cursor: pointer;
9005}
9006label.item-radio input[type="checkbox"],
9007.radio input[type="checkbox"],
9008label.item-radio input[type="radio"],
9009.radio input[type="radio"] {
9010 display: none;
9011}
9012label.item-radio {
9013 transition-duration: 300ms;
9014}
9015label.item-radio .item-content .item-media,
9016label.item-radio.item-content .item-media {
9017 align-self: center;
9018}
9019label.item-radio.active-state {
9020 background-color: var(--f7-list-link-pressed-bg-color);
9021}
9022label.item-radio.active-state:after {
9023 background-color: transparent;
9024}
9025label.item-radio.disabled,
9026.disabled label.item-radio {
9027 opacity: 0.55;
9028 pointer-events: none;
9029 opacity: 0.55 !important;
9030 pointer-events: none !important;
9031}
9032.ios .icon-radio:after {
9033 font-family: 'framework7-core-icons';
9034 font-weight: normal;
9035 font-style: normal;
9036 line-height: 1;
9037 letter-spacing: normal;
9038 text-transform: none;
9039 white-space: nowrap;
9040 word-wrap: normal;
9041 direction: ltr;
9042 -webkit-font-smoothing: antialiased;
9043 text-rendering: optimizeLegibility;
9044 -moz-osx-font-smoothing: grayscale;
9045 -moz-font-feature-settings: "liga";
9046 font-feature-settings: "liga";
9047 text-align: center;
9048 display: block;
9049 width: 100%;
9050 height: 100%;
9051 width: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
9052 height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2);
9053 line-height: calc(var(--f7-radio-size) - var(--f7-radio-border-width) * 2 + 1px);
9054 font-size: 20px;
9055 content: 'radio_ios';
9056 color: var(--f7-radio-active-color, var(--f7-theme-color));
9057 opacity: 0;
9058}
9059.ios label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
9060.ios label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
9061.ios .radio input[type="radio"]:checked ~ .icon-radio:after {
9062 opacity: 1;
9063}
9064.ios .radio input[type="radio"]:checked ~ .icon-radio {
9065 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
9066}
9067.ios label.item-radio input[type="radio"] ~ .icon-radio {
9068 position: absolute;
9069 top: 50%;
9070 margin-top: -11px;
9071 left: calc(var(--f7-safe-area-left) + 10px);
9072}
9073.ios label.item-radio .item-inner {
9074 padding-left: calc(var(--f7-safe-area-left) + 35px);
9075}
9076.ios label.item-radio.active-state {
9077 transition-duration: 0ms;
9078}
9079.md .icon-radio {
9080 transition-duration: 200ms;
9081}
9082.md .icon-radio:after {
9083 content: '';
9084 position: absolute;
9085 width: 10px;
9086 height: 10px;
9087 left: 50%;
9088 top: 50%;
9089 margin-left: -5px;
9090 margin-top: -5px;
9091 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
9092 border-radius: 50%;
9093 transform: scale(0);
9094 transition-duration: 200ms;
9095}
9096.md label.item-radio input[type="radio"]:checked ~ .icon-radio,
9097.md label.item-radio input[type="radio"]:checked ~ * .icon-radio,
9098.md .radio input[type="radio"]:checked ~ .icon-radio {
9099 border-color: var(--f7-radio-active-color, var(--f7-theme-color));
9100}
9101.md label.item-radio input[type="radio"]:checked ~ .icon-radio:after,
9102.md label.item-radio input[type="radio"]:checked ~ * .icon-radio:after,
9103.md .radio input[type="radio"]:checked ~ .icon-radio:after {
9104 background-color: var(--f7-radio-active-color, var(--f7-theme-color));
9105 transform: scale(1);
9106}
9107.md label.item-radio {
9108 position: relative;
9109 overflow: hidden;
9110 z-index: 0;
9111}
9112.md label.item-radio > .icon-radio {
9113 margin-left: calc(var(--f7-list-item-media-margin) + var(--f7-radio-extra-margin));
9114}
9115/* === Toggle === */
9116.ios {
9117 --f7-toggle-handle-color: #fff;
9118 --f7-toggle-width: 52px;
9119 --f7-toggle-height: 32px;
9120 --f7-toggle-border-color-ios: #e5e5e5;
9121 --f7-toggle-inactive-color: #fff;
9122}
9123.ios .theme-dark,
9124.ios.theme-dark {
9125 --f7-toggle-border-color-ios: #555;
9126 --f7-toggle-inactive-color: #222;
9127}
9128.md {
9129 --f7-toggle-handle-color: #fff;
9130 --f7-toggle-width: 36px;
9131 --f7-toggle-height: 14px;
9132 --f7-toggle-inactive-color: #b0afaf;
9133}
9134.md .theme-dark,
9135.md.theme-dark {
9136 --f7-toggle-inactive-color: #555;
9137}
9138.toggle,
9139.toggle-icon {
9140 width: var(--f7-toggle-width);
9141 height: var(--f7-toggle-height);
9142 border-radius: var(--f7-toggle-height);
9143}
9144.toggle {
9145 display: inline-block;
9146 vertical-align: middle;
9147 position: relative;
9148 box-sizing: border-box;
9149 align-self: center;
9150 -webkit-user-select: none;
9151 -moz-user-select: none;
9152 -ms-user-select: none;
9153 user-select: none;
9154}
9155.toggle input[type="checkbox"] {
9156 display: none;
9157}
9158.toggle input[disabled] ~ .toggle-icon {
9159 pointer-events: none;
9160}
9161.toggle-icon {
9162 z-index: 0;
9163 margin: 0;
9164 padding: 0;
9165 -webkit-appearance: none;
9166 -moz-appearance: none;
9167 appearance: none;
9168 border: none;
9169 position: relative;
9170 transition: 300ms;
9171 box-sizing: border-box;
9172 display: block;
9173 cursor: pointer;
9174}
9175.toggle-icon:before,
9176.toggle-icon:after {
9177 content: '';
9178 will-change: transform;
9179}
9180.toggle-icon:after {
9181 background: var(--f7-toggle-handle-color);
9182 position: absolute;
9183 z-index: 2;
9184 transform: translateX(0px);
9185 transition-duration: 300ms;
9186}
9187.ios .toggle input[type="checkbox"]:checked + .toggle-icon {
9188 background: var(--f7-toggle-active-color, var(--f7-theme-color));
9189}
9190.ios .toggle input[type="checkbox"]:checked + .toggle-icon:before {
9191 transform: scale(0);
9192}
9193.ios .toggle input[type="checkbox"]:checked + .toggle-icon:after {
9194 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
9195}
9196.ios .toggle-icon {
9197 background: var(--f7-toggle-border-color-ios);
9198}
9199.ios .toggle-icon:before {
9200 position: absolute;
9201 right: 2px;
9202 top: 2px;
9203 width: calc(var(--f7-toggle-width) - 4px);
9204 height: calc(var(--f7-toggle-height) - 4px);
9205 border-radius: var(--f7-toggle-height);
9206 box-sizing: border-box;
9207 background: var(--f7-toggle-inactive-color);
9208 z-index: 1;
9209 transition-duration: 300ms;
9210 transform: scale(1);
9211}
9212.ios .toggle-icon:after {
9213 height: calc(var(--f7-toggle-height) - 4px);
9214 width: calc(var(--f7-toggle-height) - 4px);
9215 top: 2px;
9216 right: 2px;
9217 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
9218 border-radius: calc(var(--f7-toggle-height) - 4px);
9219}
9220.ios .toggle-active-state input[type="checkbox"]:not(:checked) + .toggle-icon:before {
9221 transform: scale(0);
9222}
9223.ios .toggle-active-state input[type="checkbox"] + .toggle-icon:after {
9224 width: calc(var(--f7-toggle-height) + 4px);
9225}
9226.ios .toggle-active-state input[type="checkbox"]:checked + .toggle-icon:after {
9227 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
9228}
9229.md .toggle input[type="checkbox"]:checked + .toggle-icon {
9230 background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
9231}
9232.md .toggle input[type="checkbox"]:checked + .toggle-icon:after {
9233 transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));
9234 background: var(--f7-toggle-active-color, var(--f7-theme-color));
9235}
9236.md .toggle-icon {
9237 background: var(--f7-toggle-inactive-color);
9238}
9239.md .toggle-icon:after {
9240 height: calc(var(--f7-toggle-height) + 6px);
9241 width: calc(var(--f7-toggle-height) + 6px);
9242 top: -3px;
9243 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
9244 border-radius: var(--f7-toggle-height);
9245 right: 0;
9246}
9247/* === Range Slider === */
9248.ios {
9249 --f7-range-size: 28px;
9250 --f7-range-bar-bg-color: #b7b8b7;
9251 /*
9252 --f7-range-bar-active-bg-color: var(--f7-theme-color);
9253 */
9254 --f7-range-bar-size: 1px;
9255 --f7-range-bar-border-radius: 2px;
9256 --f7-range-knob-size: 28px;
9257 --f7-range-knob-color: #fff;
9258 --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
9259 --f7-range-label-size: 20px;
9260 --f7-range-label-text-color: #000;
9261 --f7-range-label-bg-color: #fff;
9262 --f7-range-label-font-size: 12px;
9263 --f7-range-label-border-radius: 5px;
9264 /*
9265 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
9266 */
9267 --f7-range-scale-step-width: 1px;
9268 --f7-range-scale-step-height: 5px;
9269 --f7-range-scale-font-size: 12px;
9270 --f7-range-scale-font-weight: 400;
9271 --f7-range-scale-text-color: #666;
9272 --f7-range-scale-label-offset: 4px;
9273 /*
9274 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
9275 */
9276 --f7-range-scale-substep-width: 1px;
9277 --f7-range-scale-substep-height: 4px;
9278}
9279.md {
9280 --f7-range-size: 20px;
9281 --f7-range-bar-bg-color: #b9b9b9;
9282 /*
9283 --f7-range-bar-active-bg-color: var(--f7-theme-color);
9284 */
9285 --f7-range-bar-size: 2px;
9286 --f7-range-bar-border-radius: 0px;
9287 --f7-range-knob-size: 12px;
9288 /*
9289 --f7-range-knob-color: var(--f7-theme-color);
9290 */
9291 --f7-range-knob-box-shadow: none;
9292 --f7-range-label-size: 26px;
9293 --f7-range-label-text-color: #fff;
9294 /*
9295 --f7-range-label-bg-color: var(--f7-theme-color);
9296 */
9297 --f7-range-label-font-size: 10px;
9298 --f7-range-label-border-radius: 50%;
9299 /*
9300 --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
9301 */
9302 --f7-range-scale-step-width: 2px;
9303 --f7-range-scale-step-height: 5px;
9304 --f7-range-scale-font-size: 12px;
9305 --f7-range-scale-font-weight: 400;
9306 --f7-range-scale-text-color: #666;
9307 --f7-range-scale-label-offset: 4px;
9308 /*
9309 --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
9310 */
9311 --f7-range-scale-substep-width: 1px;
9312 --f7-range-scale-substep-height: 4px;
9313}
9314.range-slider {
9315 display: block;
9316 position: relative;
9317 align-self: center;
9318 cursor: pointer;
9319 -webkit-user-select: none;
9320 -moz-user-select: none;
9321 -ms-user-select: none;
9322 user-select: none;
9323}
9324.range-slider input[type="range"] {
9325 display: none;
9326}
9327.range-slider.range-slider-horizontal {
9328 width: 100%;
9329 height: var(--f7-range-size);
9330}
9331.range-slider.range-slider-vertical {
9332 height: 100%;
9333 width: var(--f7-range-size);
9334}
9335.range-bar {
9336 position: absolute;
9337 overflow: hidden;
9338 background: var(--f7-range-bar-bg-color);
9339 border-radius: var(--f7-range-bar-border-radius);
9340}
9341.range-slider-vertical .range-bar {
9342 left: 50%;
9343 top: 0;
9344 height: 100%;
9345 width: var(--f7-range-bar-size);
9346 margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
9347}
9348.range-slider-horizontal .range-bar {
9349 left: 0;
9350 top: 50%;
9351 width: 100%;
9352 height: var(--f7-range-bar-size);
9353 margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
9354}
9355.range-bar-active {
9356 position: absolute;
9357 background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
9358}
9359.range-slider-horizontal .range-bar-active {
9360 right: 0;
9361 top: 0;
9362 height: 100%;
9363}
9364.range-slider-vertical .range-bar-active {
9365 left: 0;
9366 bottom: 0;
9367 width: 100%;
9368}
9369.range-slider-vertical-reversed .range-bar-active {
9370 top: 0;
9371 bottom: auto;
9372}
9373.range-knob-wrap {
9374 z-index: 20;
9375 position: absolute;
9376 height: var(--f7-range-knob-size);
9377 width: var(--f7-range-knob-size);
9378}
9379.range-slider-horizontal .range-knob-wrap {
9380 top: 50%;
9381 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
9382 margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
9383 right: 0;
9384}
9385.range-slider-vertical .range-knob-wrap {
9386 left: 50%;
9387 margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
9388 bottom: 0;
9389 margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
9390}
9391.range-slider-vertical-reversed .range-knob-wrap {
9392 bottom: auto;
9393 top: 0;
9394 margin-bottom: 0;
9395 margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
9396}
9397.range-knob {
9398 box-sizing: border-box;
9399 border-radius: 50%;
9400 position: absolute;
9401 left: 0;
9402 top: 0;
9403 width: 100%;
9404 height: 100%;
9405 z-index: 1;
9406 background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
9407 box-shadow: var(--f7-range-knob-box-shadow);
9408}
9409.range-knob:after {
9410 content: '';
9411 position: absolute;
9412 left: 50%;
9413 top: 50%;
9414 width: 44px;
9415 height: 44px;
9416 margin-left: -22px;
9417 margin-top: -22px;
9418}
9419.range-knob-label {
9420 position: absolute;
9421 left: 50%;
9422 bottom: 100%;
9423 text-align: center;
9424 transition-duration: 120ms;
9425 transition-property: transform;
9426 transform: translateY(100%) scale(0);
9427 height: var(--f7-range-label-size);
9428 line-height: var(--f7-range-label-size);
9429 min-width: var(--f7-range-label-size);
9430 color: var(--f7-range-label-text-color);
9431 background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
9432 font-size: var(--f7-range-label-font-size);
9433 border-radius: var(--f7-range-label-border-radius);
9434}
9435.range-knob-active-state .range-knob-label {
9436 transform: translateY(0%) scale(1);
9437}
9438.range-scale {
9439 position: absolute;
9440}
9441.range-slider-horizontal .range-scale {
9442 top: 50%;
9443 left: 0;
9444 width: 100%;
9445 margin-top: calc(var(--f7-range-bar-size) / 2);
9446}
9447.range-slider-vertical .range-scale {
9448 right: 50%;
9449 top: 0;
9450 height: 100%;
9451 margin-right: calc(var(--f7-range-bar-size) / 2);
9452}
9453.range-scale-step {
9454 position: absolute;
9455 box-sizing: border-box;
9456 display: flex;
9457 font-size: var(--f7-range-scale-font-size);
9458 font-weight: var(--f7-range-scale-font-weight);
9459 color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
9460 line-height: 1;
9461}
9462.range-scale-step:before {
9463 content: '';
9464 position: absolute;
9465 background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
9466}
9467.range-slider-horizontal .range-scale-step {
9468 justify-content: center;
9469 align-items: flex-start;
9470 width: var(--f7-range-scale-step-width);
9471 height: var(--f7-range-scale-step-height);
9472 padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
9473 top: 0;
9474 margin-right: calc(-1 * var(--f7-range-scale-step-width) / 2);
9475}
9476.range-slider-horizontal .range-scale-step:before {
9477 left: 0;
9478 top: 0;
9479 width: 100%;
9480 height: var(--f7-range-scale-step-height);
9481}
9482.range-slider-horizontal .range-scale-step:first-child {
9483 margin-right: 0;
9484}
9485.range-slider-horizontal .range-scale-step:last-child {
9486 margin-right: calc(-1 * var(--f7-range-scale-step-width));
9487}
9488.range-slider-vertical .range-scale-step {
9489 line-height: 1;
9490 justify-content: flex-end;
9491 align-items: center;
9492 height: var(--f7-range-scale-step-width);
9493 width: var(--f7-range-scale-step-height);
9494 padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
9495 right: 0;
9496 margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
9497}
9498.range-slider-vertical .range-scale-step:first-child {
9499 margin-bottom: 0;
9500}
9501.range-slider-vertical .range-scale-step:last-child {
9502 margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
9503}
9504.range-slider-vertical .range-scale-step:before {
9505 right: 0;
9506 top: 0;
9507 height: 100%;
9508 width: var(--f7-range-scale-step-height);
9509}
9510.range-scale-substep {
9511 --f7-range-scale-step-bg-color: var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));
9512 --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
9513 --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
9514}
9515.ios .range-knob-label {
9516 margin-bottom: 6px;
9517 transform: translateX(-50%) translateY(100%) scale(0);
9518}
9519.ios .range-knob-active-state .range-knob-label {
9520 transform: translateX(-50%) translateY(0%) scale(1);
9521}
9522.md .range-knob {
9523 transition-duration: 200ms;
9524 transition-property: transform, background-color;
9525}
9526.md .range-knob-active-state .range-knob {
9527 transform: scale(1.5);
9528}
9529.md .range-slider-min:not(.range-slider-dual) .range-knob {
9530 background: #fff !important;
9531 border: 2px solid var(--f7-range-bar-bg-color);
9532}
9533.md .range-knob-label {
9534 width: var(--f7-range-label-size);
9535 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
9536 margin-bottom: 8px;
9537}
9538.md .range-knob-label:before {
9539 content: '';
9540 left: 50%;
9541 top: 0px;
9542 margin-left: calc(-1 * var(--f7-range-label-size) / 2);
9543 position: absolute;
9544 z-index: -1;
9545 width: var(--f7-range-label-size);
9546 height: var(--f7-range-label-size);
9547 background: var(--f7-range-label-bg-color, var(--f7-theme-color));
9548 transform: rotate(-45deg);
9549 border-radius: 50% 50% 50% 0;
9550}
9551.md .range-knob-active-state .range-knob-label {
9552 transform: translateY(0%) scale(1);
9553}
9554.md .range-slider-label .range-knob-active-state .range-knob {
9555 transform: scale(0);
9556}
9557/* === Stepper === */
9558:root {
9559 /*
9560 --f7-stepper-button-text-color: var(--f7-theme-color);
9561 --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
9562 */
9563 --f7-stepper-fill-button-text-color: #fff;
9564 /*
9565 --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
9566 */
9567 --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
9568}
9569.ios {
9570 --f7-stepper-height: 29px;
9571 --f7-stepper-border-radius: 5px;
9572 /*
9573 --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
9574 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
9575 */
9576 --f7-stepper-border-width: 1px;
9577 --f7-stepper-large-height: 44px;
9578 --f7-stepper-small-height: 26px;
9579 --f7-stepper-small-border-width: 2px;
9580 --f7-stepper-value-font-size: 17px;
9581 --f7-stepper-value-font-weight: 400;
9582}
9583.md {
9584 --f7-stepper-height: 36px;
9585 --f7-stepper-border-radius: 4px;
9586 --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
9587 /*
9588 --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
9589 */
9590 --f7-stepper-border-width: 2px;
9591 --f7-stepper-large-height: 48px;
9592 --f7-stepper-small-border-width: 2px;
9593 --f7-stepper-small-height: 28px;
9594 --f7-stepper-value-font-size: 14px;
9595 --f7-stepper-value-font-weight: 500;
9596}
9597.md .theme-dark,
9598.md.theme-dark {
9599 --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
9600}
9601.stepper {
9602 display: inline-flex;
9603 align-items: stretch;
9604 height: var(--f7-stepper-height);
9605 border-radius: var(--f7-stepper-border-radius);
9606}
9607.stepper-button,
9608.stepper-button-minus,
9609.stepper-button-plus {
9610 background-color: var(--f7-stepper-button-bg-color);
9611 width: 40px;
9612 border-radius: var(--f7-stepper-border-radius);
9613 border: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9614 color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
9615 line-height: calc(var(--f7-stepper-height) - var(--f7-stepper-border-width, 0px));
9616 text-align: center;
9617 display: flex;
9618 justify-content: center;
9619 align-content: center;
9620 align-items: center;
9621 flex-shrink: 0;
9622 box-sizing: border-box;
9623 position: relative;
9624 cursor: pointer;
9625}
9626.stepper-button.active-state,
9627.stepper-button-minus.active-state,
9628.stepper-button-plus.active-state {
9629 background-color: var(--f7-stepper-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
9630 color: var(--f7-stepper-button-pressed-text-color, var(--f7-stepper-button-text-color, var(--f7-theme-color)));
9631}
9632.stepper-button:first-child,
9633.stepper-button-minus:first-child,
9634.stepper-button-plus:first-child {
9635 border-radius: 0 var(--f7-stepper-border-radius) var(--f7-stepper-border-radius) 0;
9636}
9637.stepper-button:last-child,
9638.stepper-button-minus:last-child,
9639.stepper-button-plus:last-child {
9640 border-radius: var(--f7-stepper-border-radius) 0 0 var(--f7-stepper-border-radius);
9641}
9642.stepper-button .icon,
9643.stepper-button-minus .icon,
9644.stepper-button-plus .icon {
9645 pointer-events: none;
9646}
9647.stepper-button + .stepper-button,
9648.stepper-button-minus + .stepper-button,
9649.stepper-button-plus + .stepper-button,
9650.stepper-button + .stepper-button-minus,
9651.stepper-button-minus + .stepper-button-minus,
9652.stepper-button-plus + .stepper-button-minus,
9653.stepper-button + .stepper-button-plus,
9654.stepper-button-minus + .stepper-button-plus,
9655.stepper-button-plus + .stepper-button-plus {
9656 border-right: none;
9657}
9658.stepper-button-plus,
9659.stepper-button-minus {
9660 -webkit-user-select: none;
9661 -moz-user-select: none;
9662 -ms-user-select: none;
9663 user-select: none;
9664}
9665.stepper-button-plus:after,
9666.stepper-button-minus:after,
9667.stepper-button-plus:before,
9668.stepper-button-minus:before {
9669 content: '';
9670 position: absolute;
9671 left: 50%;
9672 top: 50%;
9673 transform: translate(-50%, -50%);
9674 background-color: var(--f7-stepper-button-text-color, var(--f7-theme-color));
9675}
9676.stepper-button-plus:after,
9677.stepper-button-minus:after {
9678 width: 15px;
9679 height: 2px;
9680}
9681.stepper-button-plus:before {
9682 height: 15px;
9683 width: 2px;
9684}
9685.stepper-value {
9686 display: flex;
9687 align-content: center;
9688 align-items: center;
9689 justify-content: center;
9690}
9691.stepper-input-wrap,
9692.stepper-value {
9693 flex-shrink: 1;
9694 text-align: center;
9695 border-top: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9696 border-bottom: var(--f7-stepper-border-width) solid var(--f7-theme-color);
9697}
9698.stepper-input-wrap input,
9699.stepper-value {
9700 width: 45px;
9701 color: var(--f7-theme-color);
9702 font-size: var(--f7-stepper-value-font-size);
9703 font-weight: var(--f7-stepper-value-font-weight);
9704 text-align: center;
9705}
9706.stepper-input-wrap input {
9707 height: 100%;
9708}
9709.stepper-round,
9710.ios .stepper-round-ios,
9711.md .stepper-round-md {
9712 --f7-stepper-border-radius: var(--f7-stepper-height);
9713}
9714.stepper-fill,
9715.ios .stepper-fill-ios,
9716.md .stepper-fill-md {
9717 --f7-stepper-button-bg-color: var(--f7-stepper-fill-button-bg-color, var(--f7-theme-color));
9718 --f7-stepper-button-text-color: var(--f7-stepper-fill-button-text-color);
9719 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
9720}
9721.stepper-fill .stepper-button + .stepper-button,
9722.ios .stepper-fill-ios .stepper-button + .stepper-button,
9723.md .stepper-fill-md .stepper-button + .stepper-button,
9724.stepper-raised .stepper-button + .stepper-button,
9725.ios .stepper-raised-ios .stepper-button + .stepper-button,
9726.md .stepper-raised-md .stepper-button + .stepper-button,
9727.stepper-fill .stepper-button-minus + .stepper-button-plus,
9728.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus,
9729.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus,
9730.stepper-raised .stepper-button-minus + .stepper-button-plus,
9731.ios .stepper-raised-ios .stepper-button-minus + .stepper-button-plus,
9732.md .stepper-raised-md .stepper-button-minus + .stepper-button-plus {
9733 border-right: 1px solid rgba(0, 0, 0, 0.1);
9734}
9735.stepper-fill .stepper-button + .stepper-button.active-state,
9736.ios .stepper-fill-ios .stepper-button + .stepper-button.active-state,
9737.md .stepper-fill-md .stepper-button + .stepper-button.active-state,
9738.stepper-fill .stepper-button-minus + .stepper-button-plus.active-state,
9739.ios .stepper-fill-ios .stepper-button-minus + .stepper-button-plus.active-state,
9740.md .stepper-fill-md .stepper-button-minus + .stepper-button-plus.active-state {
9741 border-right-color: var(--f7-stepper-button-pressed-bg-color);
9742}
9743.stepper-raised:not(.stepper-fill) .stepper-input-wrap,
9744.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-input-wrap,
9745.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-input-wrap,
9746.stepper-raised:not(.stepper-fill) .stepper-value,
9747.ios .stepper-raised-ios:not(.stepper-fill-ios):not(.stepper-fill) .stepper-value,
9748.md .stepper-raised-md:not(.stepper-fill-md):not(.stepper-fill) .stepper-value {
9749 border-left: 1px solid rgba(0, 0, 0, 0.1);
9750 border-right: 1px solid rgba(0, 0, 0, 0.1);
9751}
9752.stepper-large,
9753.ios .stepper-large-ios,
9754.md .stepper-large-md {
9755 --f7-stepper-height: var(--f7-stepper-large-height);
9756}
9757.stepper-small,
9758.ios .stepper-small-ios,
9759.md .stepper-small-md {
9760 --f7-stepper-border-width: var(--f7-stepper-small-border-width);
9761 --f7-stepper-height: var(--f7-stepper-small-height);
9762}
9763.ios .stepper-fill.stepper-small-ios,
9764.ios .stepper-fill.stepper-small {
9765 --f7-stepper-button-pressed-bg-color: transparent;
9766 --f7-stepper-button-pressed-text-color: var(--f7-theme-color);
9767}
9768.stepper-raised,
9769.ios .stepper-raised-ios,
9770.md .stepper-raised-md {
9771 --f7-stepper-border-width: 0;
9772 box-shadow: var(--f7-stepper-raised-box-shadow);
9773}
9774.ios .stepper-button .f7-icons,
9775.ios .stepper-button-minus .f7-icons,
9776.ios .stepper-button-plus .f7-icons {
9777 font-size: 22px;
9778}
9779.ios .stepper-fill,
9780.ios .stepper-fill-ios {
9781 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-tint));
9782}
9783.ios .stepper-small.stepper-raised,
9784.ios .stepper-small-ios.stepper-raised,
9785.ios .stepper-small.stepper-raised-ios,
9786.ios .stepper-small-ios.stepper-raised-ios {
9787 --f7-stepper-border-width: 0px;
9788}
9789.ios .stepper-small .stepper-button,
9790.ios .stepper-small-ios .stepper-button,
9791.ios .stepper-small .stepper-button-minus,
9792.ios .stepper-small-ios .stepper-button-minus,
9793.ios .stepper-small .stepper-button-plus,
9794.ios .stepper-small-ios .stepper-button-plus {
9795 transition-duration: 200ms;
9796}
9797.ios .stepper-small .stepper-button.active-state:after,
9798.ios .stepper-small-ios .stepper-button.active-state:after,
9799.ios .stepper-small .stepper-button-minus.active-state:after,
9800.ios .stepper-small-ios .stepper-button-minus.active-state:after,
9801.ios .stepper-small .stepper-button-plus.active-state:after,
9802.ios .stepper-small-ios .stepper-button-plus.active-state:after,
9803.ios .stepper-small .stepper-button.active-state:before,
9804.ios .stepper-small-ios .stepper-button.active-state:before,
9805.ios .stepper-small .stepper-button-minus.active-state:before,
9806.ios .stepper-small-ios .stepper-button-minus.active-state:before,
9807.ios .stepper-small .stepper-button-plus.active-state:before,
9808.ios .stepper-small-ios .stepper-button-plus.active-state:before {
9809 transition-duration: 200ms;
9810 background-color: var(--f7-theme-color);
9811}
9812.md .stepper-button,
9813.md .stepper-button-minus,
9814.md .stepper-button-plus {
9815 transition-duration: 300ms;
9816 transform: translate3d(0, 0, 0);
9817 overflow: hidden;
9818}
9819.md .stepper-fill,
9820.md .stepper-fill-md {
9821 --f7-stepper-button-pressed-bg-color: var(--f7-stepper-fill-button-pressed-bg-color, var(--f7-theme-color-shade));
9822}
9823/* === Smart Select === */
9824.smart-select :root {
9825 /*
9826 --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
9827 --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
9828 */
9829}
9830.smart-select select {
9831 display: none;
9832}
9833.smart-select .item-after {
9834 max-width: 70%;
9835 overflow: hidden;
9836 text-overflow: ellipsis;
9837 position: relative;
9838 display: block;
9839}
9840.smart-select-sheet .page,
9841.smart-select-sheet .sheet-modal-inner,
9842.smart-select-sheet .list ul {
9843 background: var(--f7-smart-select-sheet-bg, var(--f7-list-bg-color));
9844}
9845.smart-select-sheet .toolbar:after {
9846 content: '';
9847 position: absolute;
9848 background-color: var(--f7-smart-select-sheet-toolbar-border-color, var(--f7-bars-border-color));
9849 display: block;
9850 z-index: 15;
9851 top: auto;
9852 right: auto;
9853 bottom: 0;
9854 left: 0;
9855 height: 1px;
9856 width: 100%;
9857 transform-origin: 50% 100%;
9858 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
9859}
9860.smart-select-sheet .toolbar:after {
9861 display: block;
9862}
9863.smart-select-sheet .list {
9864 margin: 0;
9865}
9866.smart-select-sheet .list ul:before {
9867 display: none !important;
9868}
9869.smart-select-sheet .list ul:after {
9870 display: none !important;
9871}
9872.smart-select-popover .popover-inner {
9873 max-height: 40vh;
9874}
9875/* === Grid === */
9876.ios {
9877 --f7-grid-gap: 15px;
9878}
9879.md {
9880 --f7-grid-gap: 16px;
9881}
9882.row {
9883 display: flex;
9884 justify-content: space-between;
9885 flex-wrap: wrap;
9886 align-items: flex-start;
9887 --f7-cols-per-row: 1;
9888}
9889.row > [class*="col-"],
9890.row > .col {
9891 box-sizing: border-box;
9892 width: calc((100% - var(--f7-grid-gap) * (var(--f7-cols-per-row) - 1)) / var(--f7-cols-per-row));
9893}
9894.row.no-gap {
9895 --f7-grid-gap: 0px;
9896}
9897.row .col-5 {
9898 --f7-cols-per-row: 20;
9899}
9900.row .col-10 {
9901 --f7-cols-per-row: 10;
9902}
9903.row .col-15 {
9904 --f7-cols-per-row: 6.66666667;
9905}
9906.row .col-20 {
9907 --f7-cols-per-row: 5;
9908}
9909.row .col-25 {
9910 --f7-cols-per-row: 4;
9911}
9912.row .col-30 {
9913 --f7-cols-per-row: 3.33333333;
9914}
9915.row .col-33 {
9916 --f7-cols-per-row: 3;
9917}
9918.row .col-35 {
9919 --f7-cols-per-row: 2.85714286;
9920}
9921.row .col-40 {
9922 --f7-cols-per-row: 2.5;
9923}
9924.row .col-45 {
9925 --f7-cols-per-row: 2.22222222;
9926}
9927.row .col-50 {
9928 --f7-cols-per-row: 2;
9929}
9930.row .col-55 {
9931 --f7-cols-per-row: 1.81818182;
9932}
9933.row .col-60 {
9934 --f7-cols-per-row: 1.66666667;
9935}
9936.row .col-65 {
9937 --f7-cols-per-row: 1.53846154;
9938}
9939.row .col-66 {
9940 --f7-cols-per-row: 1.5;
9941}
9942.row .col-70 {
9943 --f7-cols-per-row: 1.42857143;
9944}
9945.row .col-75 {
9946 --f7-cols-per-row: 1.33333333;
9947}
9948.row .col-80 {
9949 --f7-cols-per-row: 1.25;
9950}
9951.row .col-85 {
9952 --f7-cols-per-row: 1.17647059;
9953}
9954.row .col-90 {
9955 --f7-cols-per-row: 1.11111111;
9956}
9957.row .col-95 {
9958 --f7-cols-per-row: 1.05263158;
9959}
9960.row .col-100 {
9961 --f7-cols-per-row: 1;
9962}
9963.row .col:nth-last-child(1),
9964.row .col:nth-last-child(1) ~ .col {
9965 --f7-cols-per-row: 1;
9966}
9967.row .col:nth-last-child(2),
9968.row .col:nth-last-child(2) ~ .col {
9969 --f7-cols-per-row: 2;
9970}
9971.row .col:nth-last-child(3),
9972.row .col:nth-last-child(3) ~ .col {
9973 --f7-cols-per-row: 3;
9974}
9975.row .col:nth-last-child(4),
9976.row .col:nth-last-child(4) ~ .col {
9977 --f7-cols-per-row: 4;
9978}
9979.row .col:nth-last-child(5),
9980.row .col:nth-last-child(5) ~ .col {
9981 --f7-cols-per-row: 5;
9982}
9983.row .col:nth-last-child(6),
9984.row .col:nth-last-child(6) ~ .col {
9985 --f7-cols-per-row: 6;
9986}
9987.row .col:nth-last-child(7),
9988.row .col:nth-last-child(7) ~ .col {
9989 --f7-cols-per-row: 7;
9990}
9991.row .col:nth-last-child(8),
9992.row .col:nth-last-child(8) ~ .col {
9993 --f7-cols-per-row: 8;
9994}
9995.row .col:nth-last-child(9),
9996.row .col:nth-last-child(9) ~ .col {
9997 --f7-cols-per-row: 9;
9998}
9999.row .col:nth-last-child(10),
10000.row .col:nth-last-child(10) ~ .col {
10001 --f7-cols-per-row: 10;
10002}
10003.row .col:nth-last-child(11),
10004.row .col:nth-last-child(11) ~ .col {
10005 --f7-cols-per-row: 11;
10006}
10007.row .col:nth-last-child(12),
10008.row .col:nth-last-child(12) ~ .col {
10009 --f7-cols-per-row: 12;
10010}
10011.row .col:nth-last-child(13),
10012.row .col:nth-last-child(13) ~ .col {
10013 --f7-cols-per-row: 13;
10014}
10015.row .col:nth-last-child(14),
10016.row .col:nth-last-child(14) ~ .col {
10017 --f7-cols-per-row: 14;
10018}
10019.row .col:nth-last-child(15),
10020.row .col:nth-last-child(15) ~ .col {
10021 --f7-cols-per-row: 15;
10022}
10023.row .col:nth-last-child(16),
10024.row .col:nth-last-child(16) ~ .col {
10025 --f7-cols-per-row: 16;
10026}
10027.row .col:nth-last-child(17),
10028.row .col:nth-last-child(17) ~ .col {
10029 --f7-cols-per-row: 17;
10030}
10031.row .col:nth-last-child(18),
10032.row .col:nth-last-child(18) ~ .col {
10033 --f7-cols-per-row: 18;
10034}
10035.row .col:nth-last-child(19),
10036.row .col:nth-last-child(19) ~ .col {
10037 --f7-cols-per-row: 19;
10038}
10039.row .col:nth-last-child(20),
10040.row .col:nth-last-child(20) ~ .col {
10041 --f7-cols-per-row: 20;
10042}
10043.row .col:nth-last-child(21),
10044.row .col:nth-last-child(21) ~ .col {
10045 --f7-cols-per-row: 21;
10046}
10047.row .col:nth-last-child(22),
10048.row .col:nth-last-child(22) ~ .col {
10049 --f7-cols-per-row: 22;
10050}
10051@media (min-width: 768px) {
10052 .row .tablet-5 {
10053 --f7-cols-per-row: 20;
10054 }
10055 .row .tablet-10 {
10056 --f7-cols-per-row: 10;
10057 }
10058 .row .tablet-15 {
10059 --f7-cols-per-row: 6.66666667;
10060 }
10061 .row .tablet-20 {
10062 --f7-cols-per-row: 5;
10063 }
10064 .row .tablet-25 {
10065 --f7-cols-per-row: 4;
10066 }
10067 .row .tablet-30 {
10068 --f7-cols-per-row: 3.33333333;
10069 }
10070 .row .tablet-33 {
10071 --f7-cols-per-row: 3;
10072 }
10073 .row .tablet-35 {
10074 --f7-cols-per-row: 2.85714286;
10075 }
10076 .row .tablet-40 {
10077 --f7-cols-per-row: 2.5;
10078 }
10079 .row .tablet-45 {
10080 --f7-cols-per-row: 2.22222222;
10081 }
10082 .row .tablet-50 {
10083 --f7-cols-per-row: 2;
10084 }
10085 .row .tablet-55 {
10086 --f7-cols-per-row: 1.81818182;
10087 }
10088 .row .tablet-60 {
10089 --f7-cols-per-row: 1.66666667;
10090 }
10091 .row .tablet-65 {
10092 --f7-cols-per-row: 1.53846154;
10093 }
10094 .row .tablet-66 {
10095 --f7-cols-per-row: 1.5;
10096 }
10097 .row .tablet-70 {
10098 --f7-cols-per-row: 1.42857143;
10099 }
10100 .row .tablet-75 {
10101 --f7-cols-per-row: 1.33333333;
10102 }
10103 .row .tablet-80 {
10104 --f7-cols-per-row: 1.25;
10105 }
10106 .row .tablet-85 {
10107 --f7-cols-per-row: 1.17647059;
10108 }
10109 .row .tablet-90 {
10110 --f7-cols-per-row: 1.11111111;
10111 }
10112 .row .tablet-95 {
10113 --f7-cols-per-row: 1.05263158;
10114 }
10115 .row .tablet-100 {
10116 --f7-cols-per-row: 1;
10117 }
10118 .row .tablet-auto:nth-last-child(1),
10119 .row .tablet-auto:nth-last-child(1) ~ .tablet-auto {
10120 --f7-cols-per-row: 1;
10121 }
10122 .row .tablet-auto:nth-last-child(2),
10123 .row .tablet-auto:nth-last-child(2) ~ .tablet-auto {
10124 --f7-cols-per-row: 2;
10125 }
10126 .row .tablet-auto:nth-last-child(3),
10127 .row .tablet-auto:nth-last-child(3) ~ .tablet-auto {
10128 --f7-cols-per-row: 3;
10129 }
10130 .row .tablet-auto:nth-last-child(4),
10131 .row .tablet-auto:nth-last-child(4) ~ .tablet-auto {
10132 --f7-cols-per-row: 4;
10133 }
10134 .row .tablet-auto:nth-last-child(5),
10135 .row .tablet-auto:nth-last-child(5) ~ .tablet-auto {
10136 --f7-cols-per-row: 5;
10137 }
10138 .row .tablet-auto:nth-last-child(6),
10139 .row .tablet-auto:nth-last-child(6) ~ .tablet-auto {
10140 --f7-cols-per-row: 6;
10141 }
10142 .row .tablet-auto:nth-last-child(7),
10143 .row .tablet-auto:nth-last-child(7) ~ .tablet-auto {
10144 --f7-cols-per-row: 7;
10145 }
10146 .row .tablet-auto:nth-last-child(8),
10147 .row .tablet-auto:nth-last-child(8) ~ .tablet-auto {
10148 --f7-cols-per-row: 8;
10149 }
10150 .row .tablet-auto:nth-last-child(9),
10151 .row .tablet-auto:nth-last-child(9) ~ .tablet-auto {
10152 --f7-cols-per-row: 9;
10153 }
10154 .row .tablet-auto:nth-last-child(10),
10155 .row .tablet-auto:nth-last-child(10) ~ .tablet-auto {
10156 --f7-cols-per-row: 10;
10157 }
10158 .row .tablet-auto:nth-last-child(11),
10159 .row .tablet-auto:nth-last-child(11) ~ .tablet-auto {
10160 --f7-cols-per-row: 11;
10161 }
10162 .row .tablet-auto:nth-last-child(12),
10163 .row .tablet-auto:nth-last-child(12) ~ .tablet-auto {
10164 --f7-cols-per-row: 12;
10165 }
10166 .row .tablet-auto:nth-last-child(13),
10167 .row .tablet-auto:nth-last-child(13) ~ .tablet-auto {
10168 --f7-cols-per-row: 13;
10169 }
10170 .row .tablet-auto:nth-last-child(14),
10171 .row .tablet-auto:nth-last-child(14) ~ .tablet-auto {
10172 --f7-cols-per-row: 14;
10173 }
10174 .row .tablet-auto:nth-last-child(15),
10175 .row .tablet-auto:nth-last-child(15) ~ .tablet-auto {
10176 --f7-cols-per-row: 15;
10177 }
10178 .row .tablet-auto:nth-last-child(16),
10179 .row .tablet-auto:nth-last-child(16) ~ .tablet-auto {
10180 --f7-cols-per-row: 16;
10181 }
10182 .row .tablet-auto:nth-last-child(17),
10183 .row .tablet-auto:nth-last-child(17) ~ .tablet-auto {
10184 --f7-cols-per-row: 17;
10185 }
10186 .row .tablet-auto:nth-last-child(18),
10187 .row .tablet-auto:nth-last-child(18) ~ .tablet-auto {
10188 --f7-cols-per-row: 18;
10189 }
10190 .row .tablet-auto:nth-last-child(19),
10191 .row .tablet-auto:nth-last-child(19) ~ .tablet-auto {
10192 --f7-cols-per-row: 19;
10193 }
10194 .row .tablet-auto:nth-last-child(20),
10195 .row .tablet-auto:nth-last-child(20) ~ .tablet-auto {
10196 --f7-cols-per-row: 20;
10197 }
10198 .row .tablet-auto:nth-last-child(21),
10199 .row .tablet-auto:nth-last-child(21) ~ .tablet-auto {
10200 --f7-cols-per-row: 21;
10201 }
10202 .row .tablet-auto:nth-last-child(22),
10203 .row .tablet-auto:nth-last-child(22) ~ .tablet-auto {
10204 --f7-cols-per-row: 22;
10205 }
10206}
10207@media (min-width: 1025px) {
10208 .row .desktop-5 {
10209 --f7-cols-per-row: 20;
10210 }
10211 .row .desktop-10 {
10212 --f7-cols-per-row: 10;
10213 }
10214 .row .desktop-15 {
10215 --f7-cols-per-row: 6.66666667;
10216 }
10217 .row .desktop-20 {
10218 --f7-cols-per-row: 5;
10219 }
10220 .row .desktop-25 {
10221 --f7-cols-per-row: 4;
10222 }
10223 .row .desktop-30 {
10224 --f7-cols-per-row: 3.33333333;
10225 }
10226 .row .desktop-33 {
10227 --f7-cols-per-row: 3;
10228 }
10229 .row .desktop-35 {
10230 --f7-cols-per-row: 2.85714286;
10231 }
10232 .row .desktop-40 {
10233 --f7-cols-per-row: 2.5;
10234 }
10235 .row .desktop-45 {
10236 --f7-cols-per-row: 2.22222222;
10237 }
10238 .row .desktop-50 {
10239 --f7-cols-per-row: 2;
10240 }
10241 .row .desktop-55 {
10242 --f7-cols-per-row: 1.81818182;
10243 }
10244 .row .desktop-60 {
10245 --f7-cols-per-row: 1.66666667;
10246 }
10247 .row .desktop-65 {
10248 --f7-cols-per-row: 1.53846154;
10249 }
10250 .row .desktop-66 {
10251 --f7-cols-per-row: 1.5;
10252 }
10253 .row .desktop-70 {
10254 --f7-cols-per-row: 1.42857143;
10255 }
10256 .row .desktop-75 {
10257 --f7-cols-per-row: 1.33333333;
10258 }
10259 .row .desktop-80 {
10260 --f7-cols-per-row: 1.25;
10261 }
10262 .row .desktop-85 {
10263 --f7-cols-per-row: 1.17647059;
10264 }
10265 .row .desktop-90 {
10266 --f7-cols-per-row: 1.11111111;
10267 }
10268 .row .desktop-95 {
10269 --f7-cols-per-row: 1.05263158;
10270 }
10271 .row .desktop-100 {
10272 --f7-cols-per-row: 1;
10273 }
10274 .row .desktop-auto:nth-last-child(1),
10275 .row .desktop-auto:nth-last-child(1) ~ .desktop-auto {
10276 --f7-cols-per-row: 1;
10277 }
10278 .row .desktop-auto:nth-last-child(2),
10279 .row .desktop-auto:nth-last-child(2) ~ .desktop-auto {
10280 --f7-cols-per-row: 2;
10281 }
10282 .row .desktop-auto:nth-last-child(3),
10283 .row .desktop-auto:nth-last-child(3) ~ .desktop-auto {
10284 --f7-cols-per-row: 3;
10285 }
10286 .row .desktop-auto:nth-last-child(4),
10287 .row .desktop-auto:nth-last-child(4) ~ .desktop-auto {
10288 --f7-cols-per-row: 4;
10289 }
10290 .row .desktop-auto:nth-last-child(5),
10291 .row .desktop-auto:nth-last-child(5) ~ .desktop-auto {
10292 --f7-cols-per-row: 5;
10293 }
10294 .row .desktop-auto:nth-last-child(6),
10295 .row .desktop-auto:nth-last-child(6) ~ .desktop-auto {
10296 --f7-cols-per-row: 6;
10297 }
10298 .row .desktop-auto:nth-last-child(7),
10299 .row .desktop-auto:nth-last-child(7) ~ .desktop-auto {
10300 --f7-cols-per-row: 7;
10301 }
10302 .row .desktop-auto:nth-last-child(8),
10303 .row .desktop-auto:nth-last-child(8) ~ .desktop-auto {
10304 --f7-cols-per-row: 8;
10305 }
10306 .row .desktop-auto:nth-last-child(9),
10307 .row .desktop-auto:nth-last-child(9) ~ .desktop-auto {
10308 --f7-cols-per-row: 9;
10309 }
10310 .row .desktop-auto:nth-last-child(10),
10311 .row .desktop-auto:nth-last-child(10) ~ .desktop-auto {
10312 --f7-cols-per-row: 10;
10313 }
10314 .row .desktop-auto:nth-last-child(11),
10315 .row .desktop-auto:nth-last-child(11) ~ .desktop-auto {
10316 --f7-cols-per-row: 11;
10317 }
10318 .row .desktop-auto:nth-last-child(12),
10319 .row .desktop-auto:nth-last-child(12) ~ .desktop-auto {
10320 --f7-cols-per-row: 12;
10321 }
10322 .row .desktop-auto:nth-last-child(13),
10323 .row .desktop-auto:nth-last-child(13) ~ .desktop-auto {
10324 --f7-cols-per-row: 13;
10325 }
10326 .row .desktop-auto:nth-last-child(14),
10327 .row .desktop-auto:nth-last-child(14) ~ .desktop-auto {
10328 --f7-cols-per-row: 14;
10329 }
10330 .row .desktop-auto:nth-last-child(15),
10331 .row .desktop-auto:nth-last-child(15) ~ .desktop-auto {
10332 --f7-cols-per-row: 15;
10333 }
10334 .row .desktop-auto:nth-last-child(16),
10335 .row .desktop-auto:nth-last-child(16) ~ .desktop-auto {
10336 --f7-cols-per-row: 16;
10337 }
10338 .row .desktop-auto:nth-last-child(17),
10339 .row .desktop-auto:nth-last-child(17) ~ .desktop-auto {
10340 --f7-cols-per-row: 17;
10341 }
10342 .row .desktop-auto:nth-last-child(18),
10343 .row .desktop-auto:nth-last-child(18) ~ .desktop-auto {
10344 --f7-cols-per-row: 18;
10345 }
10346 .row .desktop-auto:nth-last-child(19),
10347 .row .desktop-auto:nth-last-child(19) ~ .desktop-auto {
10348 --f7-cols-per-row: 19;
10349 }
10350 .row .desktop-auto:nth-last-child(20),
10351 .row .desktop-auto:nth-last-child(20) ~ .desktop-auto {
10352 --f7-cols-per-row: 20;
10353 }
10354 .row .desktop-auto:nth-last-child(21),
10355 .row .desktop-auto:nth-last-child(21) ~ .desktop-auto {
10356 --f7-cols-per-row: 21;
10357 }
10358 .row .desktop-auto:nth-last-child(22),
10359 .row .desktop-auto:nth-last-child(22) ~ .desktop-auto {
10360 --f7-cols-per-row: 22;
10361 }
10362}
10363/* === Calendar/Datepicker === */
10364:root {
10365 --f7-calendar-height: 320px;
10366 --f7-calendar-sheet-landscape-height: 220px;
10367 --f7-calendar-sheet-bg-color: #fff;
10368 --f7-calendar-popover-width: 320px;
10369 --f7-calendar-popover-height: 320px;
10370 --f7-calendar-modal-height: 420px;
10371 --f7-calendar-modal-max-width: 380px;
10372 --f7-calendar-modal-border-radius: 4px;
10373 --f7-calendar-modal-bg-color: #fff;
10374 /*
10375 --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
10376 --f7-calendar-header-link-color: var(--f7-bars-link-color);
10377 --f7-calendar-header-text-color: var(--f7-bars-text-color);
10378 --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
10379 --f7-calendar-footer-border-color: var(--f7-bars-border-color);
10380 --f7-calendar-footer-link-color: var(--f7-bars-link-color);
10381 --f7-calendar-footer-text-color: var(--f7-bars-text-color);
10382 --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
10383 --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
10384 */
10385 --f7-calendar-prev-next-text-color: #b8b8b8;
10386 --f7-calendar-disabled-text-color: #d4d4d4;
10387 --f7-calendar-event-dot-size: 4px;
10388 /*
10389 --f7-calendar-event-bg-color: var(--f7-theme-color);
10390 */
10391}
10392.ios {
10393 --f7-calendar-sheet-border-color: #929499;
10394 --f7-calendar-header-height: 44px;
10395 --f7-calendar-header-font-size: 17px;
10396 --f7-calendar-header-font-weight: 600;
10397 --f7-calendar-header-padding: 0 8px;
10398 --f7-calendar-footer-height: 44px;
10399 --f7-calendar-footer-font-size: 17px;
10400 --f7-calendar-footer-padding: 0 8px;
10401 --f7-calendar-week-header-height: 18px;
10402 --f7-calendar-week-header-font-size: 11px;
10403 --f7-calendar-row-border-color: #c4c4c4;
10404 --f7-calendar-day-font-size: 15px;
10405 --f7-calendar-day-text-color: #000;
10406 --f7-calendar-today-text-color: #000;
10407 --f7-calendar-today-bg-color: #e3e3e3;
10408 --f7-calendar-selected-text-color: #fff;
10409 /*
10410 --f7-calendar-selected-bg-color: var(--f7-theme-color);
10411 */
10412 --f7-calendar-day-size: 30px;
10413}
10414.ios .theme-dark,
10415.ios.theme-dark {
10416 --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
10417 --f7-calendar-row-border-color: var(--f7-bars-border-color);
10418 --f7-calendar-modal-bg-color: #171717;
10419 --f7-calendar-sheet-bg-color: #171717;
10420 --f7-calendar-day-text-color: #fff;
10421 --f7-calendar-today-text-color: #fff;
10422 --f7-calendar-today-bg-color: #333;
10423}
10424.md {
10425 --f7-calendar-sheet-border-color: #ccc;
10426 --f7-calendar-header-height: 56px;
10427 --f7-calendar-header-font-size: 20px;
10428 --f7-calendar-header-font-weight: 400;
10429 --f7-calendar-header-padding: 0 24px;
10430 --f7-calendar-footer-height: 48px;
10431 --f7-calendar-footer-font-size: 14px;
10432 --f7-calendar-footer-padding: 0 8px;
10433 --f7-calendar-week-header-height: 24px;
10434 --f7-calendar-week-header-font-size: 11px;
10435 --f7-calendar-row-border-color: transparent;
10436 --f7-calendar-day-font-size: 14px;
10437 --f7-calendar-day-text-color: #000;
10438 /*
10439 --f7-calendar-today-text-color: var(--f7-theme-color);
10440 */
10441 --f7-calendar-today-bg-color: none;
10442 --f7-calendar-selected-text-color: #fff;
10443 /*
10444 --f7-calendar-selected-bg-color: var(--f7-theme-color);
10445 */
10446 --f7-calendar-day-size: 32px;
10447}
10448.md .theme-dark,
10449.md.theme-dark {
10450 --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
10451 --f7-calendar-modal-bg-color: #171717;
10452 --f7-calendar-sheet-bg-color: #171717;
10453 --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
10454}
10455.calendar {
10456 overflow: hidden;
10457 height: var(--f7-calendar-height);
10458 width: 100%;
10459 display: flex;
10460 flex-direction: column;
10461}
10462.calendar.modal-in {
10463 display: flex;
10464}
10465@media (orientation: landscape) and (max-height: 415px) {
10466 .calendar.calendar-sheet {
10467 height: var(--f7-calendar-sheet-landscape-height);
10468 }
10469 .calendar.calendar-modal {
10470 height: calc(100vh - var(--f7-navbar-height));
10471 }
10472}
10473.calendar.calendar-inline,
10474.calendar.calendar-popover .calendar {
10475 position: relative;
10476}
10477.calendar-sheet {
10478 --f7-sheet-border-color: var(--f7-calendar-sheet-border-color);
10479 background: var(--f7-calendar-sheet-bg-color);
10480}
10481.calendar-sheet:before {
10482 z-index: 600;
10483}
10484.calendar-sheet .sheet-modal-inner {
10485 margin-bottom: var(--f7-safe-area-bottom);
10486}
10487.calendar-sheet .toolbar:before,
10488.calendar-modal .toolbar:before,
10489.calendar-popover .toolbar:before {
10490 display: none;
10491}
10492.calendar-popover {
10493 width: var(--f7-calendar-popover-width);
10494}
10495.calendar-popover .calendar {
10496 height: var(--f7-calendar-popover-height);
10497 border-radius: var(--f7-popover-border-radius);
10498}
10499.calendar-header {
10500 width: 100%;
10501 position: relative;
10502 overflow: hidden;
10503 flex-shrink: 0;
10504 white-space: nowrap;
10505 text-overflow: ellipsis;
10506 box-sizing: border-box;
10507 padding: var(--f7-calendar-header-padding);
10508 background-color: var(--f7-calendar-header-bg-color, var(--f7-bars-bg-color));
10509 color: var(--f7-calendar-header-text-color, var(--f7-bars-text-color));
10510 height: var(--f7-calendar-header-height);
10511 line-height: var(--f7-calendar-header-height);
10512 font-size: var(--f7-calendar-header-font-size);
10513 font-weight: var(--f7-calendar-header-font-weight);
10514}
10515.calendar-header a {
10516 color: var(--f7-calendar-header-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
10517}
10518.calendar-footer {
10519 width: 100%;
10520 flex-shrink: 0;
10521 padding: var(--f7-calendar-footer-padding);
10522 background-color: var(--f7-calendar-footer-bg-color, var(--f7-bars-bg-color));
10523 color: var(--f7-calendar-footer-text-color, var(--f7-bars-text-color));
10524 height: var(--f7-calendar-footer-height);
10525 font-size: var(--f7-calendar-header-font-size);
10526 display: flex;
10527 justify-content: flex-end;
10528 box-sizing: border-box;
10529 align-items: center;
10530 position: relative;
10531}
10532.calendar-footer a {
10533 color: var(--f7-calendar-footer-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
10534}
10535.calendar-footer:before {
10536 content: '';
10537 position: absolute;
10538 background-color: var(--f7-calendar-footer-border-color, var(--f7-bars-border-color));
10539 display: block;
10540 z-index: 15;
10541 top: 0;
10542 right: auto;
10543 bottom: auto;
10544 left: 0;
10545 height: 1px;
10546 width: 100%;
10547 transform-origin: 50% 0%;
10548 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10549}
10550.calendar-modal {
10551 position: absolute;
10552 height: var(--f7-calendar-modal-height);
10553 overflow: hidden;
10554 top: 50%;
10555 left: 50%;
10556 min-width: 300px;
10557 max-width: var(--f7-calendar-modal-max-width);
10558 transform: translate3d(-50%, 100%, 0);
10559 transition-property: transform;
10560 display: flex;
10561 z-index: 12000;
10562 background: var(--f7-calendar-modal-bg-color);
10563 width: 90%;
10564 border-radius: var(--f7-calendar-modal-border-radius);
10565 box-shadow: var(--f7-elevation-24);
10566}
10567.calendar-modal.modal-in,
10568.calendar-modal.modal-out {
10569 transition-duration: 400ms;
10570}
10571.calendar-modal.modal-in {
10572 transform: translate3d(-50%, -50%, 0);
10573}
10574.calendar-modal.modal-out {
10575 transform: translate3d(-50%, 100%, 0);
10576}
10577.calendar-week-header {
10578 display: flex;
10579 box-sizing: border-box;
10580 position: relative;
10581 font-size: var(--f7-calendar-week-header-font-size);
10582 background-color: var(--f7-calendar-week-header-bg-color, var(--f7-bars-bg-color));
10583 color: var(--f7-calendar-week-header-text-color, var(--f7-bars-text-color));
10584 height: var(--f7-calendar-week-header-height);
10585 padding-left: var(--f7-safe-area-left);
10586 padding-right: var(--f7-safe-area-right);
10587}
10588.calendar-week-header .calendar-week-day {
10589 flex-shrink: 1;
10590 width: calc(100% / 7);
10591 text-align: center;
10592 line-height: var(--f7-calendar-week-header-height);
10593}
10594.calendar-months {
10595 width: 100%;
10596 height: 100%;
10597 overflow: hidden;
10598 position: relative;
10599 flex-shrink: 10;
10600}
10601.calendar-months-wrapper {
10602 position: relative;
10603 width: 100%;
10604 height: 100%;
10605 transition: 300ms;
10606}
10607.calendar-month {
10608 display: flex;
10609 flex-direction: column;
10610 width: 100%;
10611 height: 100%;
10612 position: absolute;
10613 left: 0;
10614 top: 0;
10615}
10616.calendar-row {
10617 height: 16.66666667%;
10618 height: calc(100% / 6);
10619 display: flex;
10620 flex-shrink: 1;
10621 width: 100%;
10622 position: relative;
10623 box-sizing: border-box;
10624 padding-left: var(--f7-safe-area-left);
10625 padding-right: var(--f7-safe-area-right);
10626}
10627.calendar-row:before {
10628 content: '';
10629 position: absolute;
10630 background-color: var(--f7-calendar-row-border-color);
10631 display: block;
10632 z-index: 15;
10633 top: 0;
10634 right: auto;
10635 bottom: auto;
10636 left: 0;
10637 height: 1px;
10638 width: 100%;
10639 transform-origin: 50% 0%;
10640 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10641}
10642.calendar-modal .calendar-months:first-child .calendar-row:first-child:before,
10643.calendar-popover .calendar-months:first-child .calendar-row:first-child:before {
10644 display: none !important;
10645}
10646.calendar-day {
10647 flex-shrink: 1;
10648 display: flex;
10649 justify-content: center;
10650 align-items: center;
10651 box-sizing: border-box;
10652 width: 14.28571429%;
10653 width: calc(100% / 7);
10654 text-align: center;
10655 cursor: pointer;
10656 z-index: 20;
10657 color: var(--f7-calendar-day-text-color);
10658 height: 100%;
10659 font-size: var(--f7-calendar-day-font-size);
10660}
10661.calendar-day.calendar-day-today .calendar-day-number {
10662 color: var(--f7-calendar-today-text-color, var(--f7-theme-color));
10663 background-color: var(--f7-calendar-today-bg-color);
10664}
10665.calendar-day.calendar-day-prev,
10666.calendar-day.calendar-day-next {
10667 color: var(--f7-calendar-prev-next-text-color);
10668}
10669.calendar-day.calendar-day-disabled {
10670 color: var(--f7-calendar-disabled-text-color);
10671 cursor: auto;
10672}
10673.calendar-day.calendar-day-selected .calendar-day-number {
10674 color: var(--f7-calendar-selected-text-color);
10675 background-color: var(--f7-calendar-selected-bg-color, var(--f7-theme-color));
10676}
10677.calendar-day .calendar-day-number {
10678 display: inline-block;
10679 border-radius: 50%;
10680 position: relative;
10681 width: var(--f7-calendar-day-size);
10682 height: var(--f7-calendar-day-size);
10683 line-height: var(--f7-calendar-day-size);
10684}
10685.calendar-day .calendar-day-events {
10686 position: absolute;
10687 display: flex;
10688 left: 0;
10689 width: 100%;
10690 top: 100%;
10691 align-items: center;
10692 justify-content: center;
10693 margin-top: 1px;
10694}
10695.calendar-day .calendar-day-event {
10696 width: var(--f7-calendar-event-dot-size);
10697 height: var(--f7-calendar-event-dot-size);
10698 border-radius: calc(var(--f7-calendar-event-dot-size) / 2);
10699 background-color: var(--f7-calendar-event-bg-color);
10700}
10701.calendar-day .calendar-day-event + .calendar-day-event {
10702 margin-left: 2px;
10703}
10704.calendar-range .calendar-day.calendar-day-selected {
10705 align-items: stretch;
10706 align-content: stretch;
10707}
10708.calendar-range .calendar-day.calendar-day-selected .calendar-day-number {
10709 width: 100%;
10710 border-radius: 0;
10711 height: auto;
10712 text-align: center;
10713 display: flex;
10714 align-items: center;
10715 justify-content: center;
10716}
10717.calendar-month-selector,
10718.calendar-year-selector {
10719 display: flex;
10720 justify-content: space-between;
10721 align-items: center;
10722 width: 50%;
10723 max-width: 200px;
10724 flex-shrink: 10;
10725}
10726.calendar-month-selector .calendar-day-number,
10727.calendar-year-selector .calendar-day-number {
10728 flex-shrink: 1;
10729 position: relative;
10730 overflow: hidden;
10731 text-overflow: ellipsis;
10732}
10733.calendar-month-selector a.icon-only,
10734.calendar-year-selector a.icon-only {
10735 min-width: 36px;
10736}
10737/* === Picker === */
10738:root {
10739 --f7-picker-height: 260px;
10740 --f7-picker-inline-height: 200px;
10741 --f7-picker-popover-height: 200px;
10742 --f7-picker-popover-width: 280px;
10743 --f7-picker-landscape-height: 200px;
10744 --f7-picker-item-height: 36px;
10745}
10746.ios {
10747 --f7-picker-column-font-size: 24px;
10748 --f7-picker-divider-text-color: #000;
10749 --f7-picker-item-text-color: #707274;
10750 --f7-picker-item-selected-text-color: #000;
10751 --f7-picker-item-selected-border-color: #a8abb0;
10752}
10753.ios .theme-dark,
10754.ios.theme-dark {
10755 --f7-picker-divider-text-color: #fff;
10756 --f7-picker-item-selected-text-color: #fff;
10757 --f7-picker-item-selected-border-color: #282829;
10758}
10759.md {
10760 --f7-picker-column-font-size: 20px;
10761 --f7-picker-divider-text-color: rgba(0, 0, 0, 0.87);
10762 --f7-picker-item-text-color: inherit;
10763 --f7-picker-item-selected-text-color: inherit;
10764 --f7-picker-item-selected-border-color: rgba(0, 0, 0, 0.15);
10765}
10766.md .theme-dark,
10767.md.theme-dark {
10768 --f7-picker-divider-text-color: rgba(255, 255, 255, 0.87);
10769 --f7-picker-item-selected-border-color: rgba(255, 255, 255, 0.15);
10770}
10771.picker {
10772 width: 100%;
10773 height: var(--f7-picker-height);
10774}
10775.picker.picker-inline {
10776 height: var(--f7-picker-inline-height);
10777}
10778.popover .picker {
10779 height: var(--f7-picker-popover-height);
10780}
10781@media (orientation: landscape) and (max-height: 415px) {
10782 .picker:not(.picker-inline) {
10783 height: var(--f7-picker-landscape-height);
10784 }
10785}
10786.picker-popover {
10787 width: var(--f7-picker-popover-width);
10788}
10789.picker-popover .toolbar {
10790 background: none;
10791 border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
10792}
10793.picker-popover .toolbar:before {
10794 display: none !important;
10795}
10796.picker-popover .toolbar + .picker-columns {
10797 height: calc(100% - var(--f7-toolbar-height));
10798}
10799.picker-columns {
10800 display: flex;
10801 overflow: hidden;
10802 justify-content: center;
10803 padding: 0;
10804 text-align: right;
10805 height: 100%;
10806 position: relative;
10807 -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
10808 font-size: var(--f7-picker-column-font-size);
10809}
10810.picker-column {
10811 position: relative;
10812 max-height: 100%;
10813}
10814.picker-column.picker-column-first:before,
10815.picker-column.picker-column-last:after {
10816 height: 100%;
10817 width: 100vw;
10818 position: absolute;
10819 content: '';
10820 top: 0;
10821}
10822.picker-column.picker-column-first:before {
10823 left: 100%;
10824}
10825.picker-column.picker-column-last:after {
10826 right: 100%;
10827}
10828.picker-column.picker-column-left {
10829 text-align: left;
10830}
10831.picker-column.picker-column-center {
10832 text-align: center;
10833}
10834.picker-column.picker-column-right {
10835 text-align: right;
10836}
10837.picker-column.picker-column-divider {
10838 display: flex;
10839 align-items: center;
10840 color: var(--f7-picker-divider-text-color);
10841}
10842.picker-items {
10843 transition: 300ms;
10844 transition-timing-function: ease-out;
10845}
10846.picker-item {
10847 height: var(--f7-picker-item-height);
10848 line-height: var(--f7-picker-item-height);
10849 white-space: nowrap;
10850 position: relative;
10851 overflow: hidden;
10852 text-overflow: ellipsis;
10853 left: 0;
10854 top: 0;
10855 width: 100%;
10856 box-sizing: border-box;
10857 transition: 300ms;
10858 color: var(--f7-picker-item-text-color);
10859}
10860.picker-item span {
10861 padding: 0 10px;
10862}
10863.picker-column-absolute .picker-item {
10864 position: absolute;
10865}
10866.picker-item.picker-item-far {
10867 pointer-events: none;
10868}
10869.picker-item.picker-item-selected {
10870 color: var(--f7-picker-item-selected-text-color);
10871 transform: translate3d(0, 0, 0) rotateX(0deg);
10872}
10873.picker-center-highlight {
10874 height: var(--f7-picker-item-height);
10875 box-sizing: border-box;
10876 position: absolute;
10877 left: 0;
10878 width: 100%;
10879 top: 50%;
10880 margin-top: calc(-1 * var(--f7-picker-item-height) / 2);
10881 pointer-events: none;
10882}
10883.picker-center-highlight:before {
10884 content: '';
10885 position: absolute;
10886 background-color: var(--f7-picker-item-selected-border-color);
10887 display: block;
10888 z-index: 15;
10889 top: 0;
10890 right: auto;
10891 bottom: auto;
10892 left: 0;
10893 height: 1px;
10894 width: 100%;
10895 transform-origin: 50% 0%;
10896 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10897}
10898.picker-center-highlight:after {
10899 content: '';
10900 position: absolute;
10901 background-color: var(--f7-picker-item-selected-border-color);
10902 display: block;
10903 z-index: 15;
10904 top: auto;
10905 right: auto;
10906 bottom: 0;
10907 left: 0;
10908 height: 1px;
10909 width: 100%;
10910 transform-origin: 50% 100%;
10911 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
10912}
10913.picker-3d .picker-columns {
10914 overflow: hidden;
10915 perspective: 1200px;
10916}
10917.picker-3d .picker-column,
10918.picker-3d .picker-items,
10919.picker-3d .picker-item {
10920 transform-style: preserve-3d;
10921}
10922.picker-3d .picker-column {
10923 overflow: visible;
10924}
10925.picker-3d .picker-item {
10926 transform-origin: center center -110px;
10927 -webkit-backface-visibility: hidden;
10928 backface-visibility: hidden;
10929 transition-timing-function: ease-out;
10930}
10931/* === Infinite === */
10932.infinite-scroll-preloader {
10933 margin-left: auto;
10934 margin-right: auto;
10935 text-align: center;
10936}
10937.infinite-scroll-preloader.preloader {
10938 display: block;
10939}
10940.ios .infinite-scroll-preloader {
10941 margin-top: 35px;
10942 margin-bottom: 35px;
10943}
10944.ios .infinite-scroll-preloader .preloader,
10945.ios .infinite-scroll-preloader.preloader {
10946 width: 27px;
10947 height: 27px;
10948}
10949.md .infinite-scroll-preloader {
10950 margin-top: 32px;
10951 margin-bottom: 32px;
10952}
10953/* === PTR === */
10954.ios {
10955 --f7-ptr-preloader-size: 20px;
10956 --f7-ptr-size: 44px;
10957}
10958.md {
10959 --f7-ptr-preloader-size: 22px;
10960 --f7-ptr-size: 40px;
10961}
10962.ptr-preloader {
10963 position: relative;
10964 top: var(--f7-ptr-top, 0);
10965 height: var(--f7-ptr-size);
10966}
10967.ptr-preloader .preloader {
10968 position: absolute;
10969 left: 50%;
10970 width: var(--f7-ptr-preloader-size);
10971 height: var(--f7-ptr-preloader-size);
10972 margin-left: calc(-1 * var(--f7-ptr-preloader-size) / 2);
10973 margin-top: calc(-1 * var(--f7-ptr-preloader-size) / 2);
10974 top: 50%;
10975 visibility: hidden;
10976}
10977.ptr-bottom .ptr-preloader {
10978 top: auto;
10979 bottom: 0;
10980 position: fixed;
10981}
10982.ios .ptr-preloader {
10983 margin-top: calc(-1 * var(--f7-ptr-size));
10984 width: 100%;
10985 left: 0;
10986}
10987.ios .ptr-arrow {
10988 position: absolute;
10989 left: 50%;
10990 top: 50%;
10991 background: no-repeat center;
10992 z-index: 10;
10993 transform: rotate(0deg) translate3d(0, 0, 0);
10994 transition-duration: 300ms;
10995 transition-property: transform;
10996 width: 12px;
10997 height: 20px;
10998 margin-left: -6px;
10999 margin-top: -10px;
11000 visibility: visible;
11001 color: var(--f7-preloader-color);
11002}
11003.ios .ptr-arrow:after {
11004 font-family: 'framework7-core-icons';
11005 font-weight: normal;
11006 font-style: normal;
11007 line-height: 1;
11008 letter-spacing: normal;
11009 text-transform: none;
11010 white-space: nowrap;
11011 word-wrap: normal;
11012 direction: ltr;
11013 -webkit-font-smoothing: antialiased;
11014 text-rendering: optimizeLegibility;
11015 -moz-osx-font-smoothing: grayscale;
11016 -moz-font-feature-settings: "liga";
11017 font-feature-settings: "liga";
11018 text-align: center;
11019 display: block;
11020 width: 100%;
11021 height: 100%;
11022 font-size: 20px;
11023 width: 12px;
11024 height: 20px;
11025 line-height: 20px;
11026 font-size: 10px;
11027 content: 'ptr_arrow_ios';
11028}
11029.ios .ptr-content:not(.ptr-refreshing) .ptr-preloader .preloader {
11030 animation: none;
11031}
11032.ios .ptr-transitioning,
11033.ios .ptr-refreshing {
11034 transition-duration: 300ms;
11035 transition-property: transform;
11036}
11037.ios .ptr-refreshing {
11038 transform: translate3d(0, var(--f7-ptr-size), 0);
11039}
11040.ios .ptr-refreshing .ptr-arrow {
11041 visibility: hidden;
11042}
11043.ios .ptr-refreshing .ptr-preloader .preloader {
11044 visibility: visible;
11045}
11046.ios .ptr-pull-up .ptr-arrow {
11047 transform: rotate(180deg) translate3d(0, 0, 0);
11048}
11049.ios .ptr-no-navbar {
11050 margin-top: calc(-1 * var(--f7-ptr-size));
11051 height: calc(100% + var(--f7-ptr-size));
11052}
11053.ios .ptr-no-navbar .ptr-preloader {
11054 margin-top: 0;
11055}
11056.ios .ptr-bottom .ptr-preloader {
11057 margin-top: 0;
11058 margin-bottom: calc(-1 * var(--f7-ptr-size));
11059}
11060.ios .ptr-bottom.ptr-transitioning > *,
11061.ios .ptr-bottom.ptr-refreshing > * {
11062 transition-duration: 300ms;
11063 transition-property: transform;
11064}
11065.ios .ptr-bottom.ptr-refreshing {
11066 transform: none;
11067}
11068.ios .ptr-bottom.ptr-refreshing > * {
11069 transform: translate3d(0, calc(-1 * var(--f7-ptr-size)), 0);
11070}
11071.ios .ptr-bottom .ptr-arrow {
11072 transform: rotate(180deg) translate3d(0, 0, 0);
11073}
11074.ios .ptr-bottom.ptr-pull-up .ptr-arrow {
11075 transform: rotate(0deg) translate3d(0, 0, 0);
11076}
11077.md {
11078 --f7-ptr-top: -4px;
11079}
11080.md .ptr-preloader {
11081 left: 50%;
11082 width: var(--f7-ptr-size);
11083 border-radius: 50%;
11084 background: #fff;
11085 margin-left: calc(-1 * var(--f7-ptr-size) / 2);
11086 margin-top: calc(-1 * var(--f7-ptr-size));
11087 z-index: 100;
11088 box-shadow: var(--f7-elevation-1);
11089}
11090.md .ptr-preloader .preloader .preloader-inner-gap,
11091.md .ptr-preloader .preloader .preloader-inner-half-circle {
11092 border-width: 3px;
11093}
11094.md .ptr-arrow {
11095 width: 22px;
11096 height: 22px;
11097 box-sizing: border-box;
11098 border: 3px solid var(--f7-preloader-color);
11099 position: absolute;
11100 left: 50%;
11101 top: 50%;
11102 margin-left: -11px;
11103 margin-top: -11px;
11104 border-left-color: transparent;
11105 border-radius: 50%;
11106 opacity: 1;
11107 transform: rotate(150deg);
11108}
11109.md .ptr-arrow:after {
11110 content: '';
11111 width: 0px;
11112 height: 0px;
11113 position: absolute;
11114 left: -5px;
11115 bottom: 0px;
11116 border-bottom-width: 6px;
11117 border-bottom-style: solid;
11118 border-bottom-color: inherit;
11119 border-left: 5px solid transparent;
11120 border-right: 5px solid transparent;
11121 transform: rotate(-40deg);
11122}
11123.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader,
11124.md .ptr-content:not(.ptr-refreshing):not(.ptr-pull-up) .ptr-preloader .preloader * {
11125 animation: none;
11126}
11127.md .ptr-refreshing .ptr-preloader .preloader,
11128.md .ptr-pull-up .ptr-preloader .preloader {
11129 visibility: visible;
11130}
11131.md .ptr-refreshing .ptr-arrow,
11132.md .ptr-pull-up .ptr-arrow {
11133 visibility: hidden;
11134}
11135.md .ptr-refreshing .ptr-preloader {
11136 transform: translate3d(0, 66px, 0);
11137}
11138.md .ptr-transitioning .ptr-arrow {
11139 transition: 300ms;
11140}
11141.md .ptr-pull-up .ptr-arrow {
11142 transition: 400ms;
11143 transform: rotate(620deg) !important;
11144 opacity: 0;
11145}
11146.md .ptr-transitioning .ptr-preloader,
11147.md .ptr-refreshing .ptr-preloader {
11148 transition-duration: 300ms;
11149 transition-property: transform;
11150}
11151.md .ptr-bottom .ptr-preloader {
11152 margin-top: 0;
11153 margin-bottom: calc(-1 * var(--f7-ptr-size) - 4px);
11154}
11155.md .ptr-bottom.ptr-refreshing .ptr-preloader {
11156 transform: translate3d(0, -66px, 0);
11157}
11158/* === Images Lazy Loading === */
11159.lazy-loaded.lazy-fade-in {
11160 animation: lazyFadeIn 600ms;
11161}
11162@keyframes lazyFadeIn {
11163 from {
11164 opacity: 0;
11165 }
11166 to {
11167 opacity: 1;
11168 }
11169}
11170/* === Data Table === */
11171:root {
11172 --f7-table-head-font-size: 12px;
11173 --f7-table-body-font-size: 14px;
11174 --f7-table-footer-font-size: 12px;
11175 --f7-table-input-height: 24px;
11176 --f7-table-input-font-size: 14px;
11177 --f7-table-collapsible-cell-padding: 15px;
11178}
11179.ios {
11180 --f7-table-head-font-weight: 600;
11181 --f7-table-head-text-color: #8e8e93;
11182 --f7-table-head-cell-height: 44px;
11183 --f7-table-head-icon-size: 18px;
11184 --f7-table-body-cell-height: 44px;
11185 --f7-table-cell-border-color: #c8c7cc;
11186 --f7-table-cell-padding-vertical: 0px;
11187 --f7-table-cell-padding-horizontal: 15px;
11188 --f7-table-edge-cell-padding-horizontal: 15px;
11189 --f7-table-label-cell-padding-horizontal: 15px;
11190 --f7-table-checkbox-cell-width: 22px;
11191 /* --f7-table-actions-cell-link-color: var(--f7-theme-color); */
11192 --f7-table-selected-row-bg-color: #f7f7f8;
11193 /* --f7-table-actions-link-color: var(--f7-theme-color); */
11194 --f7-table-title-font-size: 17px;
11195 --f7-table-title-font-weight: 600;
11196 --f7-table-card-header-height: 64px;
11197 --f7-table-footer-height: 44px;
11198 --f7-table-footer-text-color: #8e8e93;
11199 --f7-table-sortable-icon-color: #000;
11200 --f7-table-input-text-color: #000;
11201}
11202.ios .theme-dark,
11203.ios.theme-dark {
11204 --f7-table-cell-border-color: #282829;
11205 --f7-table-selected-row-bg-color: #363636;
11206 --f7-table-sortable-icon-color: #fff;
11207 --f7-table-input-text-color: #fff;
11208}
11209.md {
11210 --f7-table-head-font-weight: 500;
11211 --f7-table-head-text-color: rgba(0, 0, 0, 0.54);
11212 --f7-table-head-cell-height: 56px;
11213 --f7-table-head-icon-size: 16px;
11214 --f7-table-body-cell-height: 48px;
11215 --f7-table-cell-border-color: rgba(0, 0, 0, 0.12);
11216 --f7-table-cell-padding-vertical: 0px;
11217 --f7-table-cell-padding-horizontal: 28px;
11218 --f7-table-edge-cell-padding-horizontal: 24px;
11219 --f7-table-label-cell-padding-horizontal: 24px;
11220 --f7-table-checkbox-cell-width: 18px;
11221 --f7-table-actions-cell-link-color: rgba(0, 0, 0, 0.54);
11222 --f7-table-selected-row-bg-color: #f5f5f5;
11223 --f7-table-actions-link-color: rgba(0, 0, 0, 0.54);
11224 --f7-table-title-font-size: 20px;
11225 --f7-table-title-font-weight: 400;
11226 --f7-table-card-header-height: 64px;
11227 --f7-table-footer-height: 56px;
11228 --f7-table-footer-text-color: rgba(0, 0, 0, 0.54);
11229 --f7-table-sortable-icon-color: #000;
11230 --f7-table-input-text-color: #212121;
11231}
11232.md .theme-dark,
11233.md.theme-dark {
11234 --f7-table-head-text-color: rgba(255, 255, 255, 0.54);
11235 --f7-table-footer-text-color: rgba(255, 255, 255, 0.54);
11236 --f7-table-cell-border-color: #282829;
11237 --f7-table-selected-row-bg-color: rgba(255, 255, 255, 0.05);
11238 --f7-table-sortable-icon-color: #fff;
11239 --f7-table-actions-cell-link-color: rgba(255, 255, 255, 0.54);
11240 --f7-table-actions-link-color: rgba(255, 255, 255, 0.54);
11241 --f7-table-input-text-color: #fff;
11242}
11243.data-table {
11244 overflow-x: auto;
11245}
11246.data-table table {
11247 width: 100%;
11248 border: none;
11249 padding: 0;
11250 margin: 0;
11251 border-collapse: collapse;
11252 text-align: right;
11253}
11254.data-table thead th,
11255.data-table thead td {
11256 font-size: var(--f7-table-head-font-size);
11257 font-weight: var(--f7-table-head-font-weight);
11258 overflow: hidden;
11259 white-space: nowrap;
11260 text-overflow: ellipsis;
11261 line-height: 16px;
11262 height: var(--f7-table-head-cell-height);
11263}
11264.data-table thead th:not(.sortable-cell-active),
11265.data-table thead td:not(.sortable-cell-active) {
11266 color: var(--f7-table-head-text-color);
11267}
11268.data-table thead i.icon,
11269.data-table thead i.f7-icons,
11270.data-table thead i.material-icons {
11271 vertical-align: top;
11272 font-size: var(--f7-table-head-icon-size);
11273 width: var(--f7-table-head-icon-size);
11274 height: var(--f7-table-head-icon-size);
11275}
11276.data-table tbody {
11277 font-size: var(--f7-table-body-font-size);
11278}
11279.data-table tbody th,
11280.data-table tbody td {
11281 height: var(--f7-table-body-cell-height);
11282}
11283.data-table tbody tr.data-table-row-selected,
11284.device-desktop .data-table tbody tr:hover {
11285 background: var(--f7-table-selected-row-bg-color);
11286}
11287.data-table tbody td:before {
11288 content: '';
11289 position: absolute;
11290 background-color: var(--f7-table-cell-border-color);
11291 display: block;
11292 z-index: 15;
11293 top: 0;
11294 right: auto;
11295 bottom: auto;
11296 left: 0;
11297 height: 1px;
11298 width: 100%;
11299 transform-origin: 50% 0%;
11300 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11301}
11302.data-table th,
11303.data-table td {
11304 --f7-table-cell-padding-left: var(--f7-table-cell-padding-horizontal);
11305 --f7-table-cell-padding-right: var(--f7-table-cell-padding-horizontal);
11306 padding-top: var(--f7-table-cell-padding-vertical);
11307 padding-bottom: var(--f7-table-cell-padding-vertical);
11308 padding-left: var(--f7-table-cell-padding-left);
11309 padding-right: var(--f7-table-cell-padding-right);
11310 position: relative;
11311 box-sizing: border-box;
11312}
11313.data-table th:first-child,
11314.data-table td:first-child {
11315 --f7-table-cell-padding-right: var(--f7-table-edge-cell-padding-horizontal);
11316}
11317.data-table th:last-child,
11318.data-table td:last-child {
11319 --f7-table-cell-padding-left: var(--f7-table-edge-cell-padding-horizontal);
11320}
11321.data-table th.label-cell,
11322.data-table td.label-cell {
11323 --f7-table-cell-padding-left: var(--f7-table-label-cell-padding-horizontal);
11324 --f7-table-cell-padding-right: var(--f7-table-label-cell-padding-horizontal);
11325}
11326.data-table th.numeric-cell,
11327.data-table td.numeric-cell {
11328 text-align: left;
11329}
11330.data-table th.checkbox-cell,
11331.data-table td.checkbox-cell {
11332 overflow: visible;
11333 width: var(--f7-table-checkbox-cell-width);
11334}
11335.data-table th.checkbox-cell label + span,
11336.data-table td.checkbox-cell label + span {
11337 margin-right: 8px;
11338}
11339.data-table th.checkbox-cell:first-child,
11340.data-table td.checkbox-cell:first-child {
11341 padding-left: calc(var(--f7-table-cell-padding-left) / 2);
11342}
11343.data-table th.checkbox-cell:first-child + td,
11344.data-table td.checkbox-cell:first-child + td,
11345.data-table th.checkbox-cell:first-child + th,
11346.data-table td.checkbox-cell:first-child + th {
11347 padding-right: calc(var(--f7-table-cell-padding-right) / 2);
11348}
11349.data-table th.checkbox-cell:last-child,
11350.data-table td.checkbox-cell:last-child {
11351 padding-right: calc(var(--f7-table-cell-padding-right) / 2);
11352}
11353.data-table th.actions-cell,
11354.data-table td.actions-cell {
11355 text-align: left;
11356 white-space: nowrap;
11357}
11358.data-table th.actions-cell a.link,
11359.data-table td.actions-cell a.link {
11360 color: var(--f7-table-actions-cell-link-color, var(--f7-theme-color));
11361}
11362.data-table th a.icon-only,
11363.data-table td a.icon-only,
11364.card .data-table th a.icon-only,
11365.card .data-table td a.icon-only,
11366.card.data-table th a.icon-only,
11367.card.data-table td a.icon-only {
11368 display: inline-block;
11369 vertical-align: middle;
11370 text-align: center;
11371 font-size: 0;
11372 min-width: 0;
11373}
11374.data-table th a.icon-only i,
11375.data-table td a.icon-only i,
11376.card .data-table th a.icon-only i,
11377.card .data-table td a.icon-only i,
11378.card.data-table th a.icon-only i,
11379.card.data-table td a.icon-only i {
11380 font-size: 20px;
11381 vertical-align: middle;
11382}
11383.data-table .sortable-cell:not(.input-cell) {
11384 cursor: pointer;
11385 position: relative;
11386}
11387.data-table .sortable-cell.input-cell .table-head-label {
11388 cursor: pointer;
11389 position: relative;
11390}
11391.data-table .sortable-cell:not(.numeric-cell):not(.input-cell):after,
11392.data-table .sortable-cell.numeric-cell:not(.input-cell):before,
11393.data-table .sortable-cell:not(.numeric-cell).input-cell > .table-head-label:after,
11394.data-table .sortable-cell.numeric-cell.input-cell > .table-head-label:before {
11395 content: 'arrow_bottom_md';
11396 font-family: 'framework7-core-icons';
11397 font-weight: normal;
11398 font-style: normal;
11399 line-height: 1;
11400 letter-spacing: normal;
11401 text-transform: none;
11402 white-space: nowrap;
11403 word-wrap: normal;
11404 direction: ltr;
11405 -webkit-font-smoothing: antialiased;
11406 text-rendering: optimizeLegibility;
11407 -moz-osx-font-smoothing: grayscale;
11408 -moz-font-feature-settings: "liga";
11409 font-feature-settings: "liga";
11410 text-align: center;
11411 display: block;
11412 width: 100%;
11413 height: 100%;
11414 font-size: 20px;
11415 display: inline-block;
11416 vertical-align: top;
11417 width: 16px;
11418 height: 16px;
11419 color: var(--f7-table-sortable-icon-color);
11420 font-size: 13px;
11421 line-height: 16px;
11422 transition-duration: 300ms;
11423 transform: rotate(0);
11424 opacity: 0;
11425}
11426.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:after,
11427.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:after,
11428.device-desktop .data-table .sortable-cell:not(.sortable-cell-active):hover:before,
11429.device-desktop .data-table .sortable-cell:not(.sortable-cell-active) .table-head-label:hover:before {
11430 opacity: 0.54;
11431}
11432.data-table .sortable-cell.sortable-cell-active:after,
11433.data-table .sortable-cell.sortable-cell-active .table-head-label:after,
11434.data-table .sortable-cell.sortable-cell-active:before,
11435.data-table .sortable-cell.sortable-cell-active .table-head-label:before {
11436 opacity: 0.87 !important;
11437}
11438.data-table .sortable-cell.sortable-desc:after,
11439.data-table .sortable-cell.sortable-desc:after,
11440.data-table .table-head-label:after,
11441.data-table .sortable-cell.sortable-desc:before,
11442.data-table .sortable-cell.sortable-desc:before,
11443.data-table .table-head-label:before {
11444 transform: rotate(180deg) !important;
11445}
11446.data-table.card .card-header,
11447.card .data-table .card-header,
11448.data-table.card .card-footer,
11449.card .data-table .card-footer {
11450 padding-left: var(--f7-table-edge-cell-padding-horizontal);
11451 padding-right: var(--f7-table-edge-cell-padding-horizontal);
11452}
11453.data-table.card .card-header,
11454.card .data-table .card-header {
11455 height: var(--f7-table-card-header-height);
11456}
11457.data-table.card .card-content,
11458.card .data-table .card-content {
11459 overflow-x: auto;
11460}
11461.data-table.card .card-footer,
11462.card .data-table .card-footer {
11463 height: var(--f7-table-footer-height);
11464}
11465.data-table .data-table-title {
11466 font-size: var(--f7-table-title-font-size);
11467 font-weight: var(--f7-table-title-font-weight);
11468}
11469.data-table .data-table-links,
11470.data-table .data-table-actions {
11471 display: flex;
11472}
11473.data-table .data-table-links .button {
11474 min-width: 64px;
11475}
11476.data-table .data-table-actions {
11477 margin-right: auto;
11478 align-items: center;
11479}
11480.data-table .data-table-actions a.link {
11481 color: var(--f7-table-actions-link-color, var(--f7-theme-color));
11482 min-width: 0;
11483}
11484.data-table .data-table-actions a.link.icon-only {
11485 line-height: 1;
11486 justify-content: center;
11487 padding: 0;
11488}
11489.data-table .data-table-header,
11490.data-table .data-table-header-selected {
11491 display: flex;
11492 justify-content: space-between;
11493 align-items: center;
11494 width: 100%;
11495}
11496.data-table .card-header > .data-table-header,
11497.data-table .card-header > .data-table-header-selected {
11498 padding-top: var(--f7-card-header-padding-vertical);
11499 padding-bottom: var(--f7-card-header-padding-vertical);
11500 height: 100%;
11501 padding-right: var(--f7-table-edge-cell-padding-horizontal);
11502 padding-left: var(--f7-table-edge-cell-padding-horizontal);
11503 margin-right: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
11504 margin-left: calc(-1 * var(--f7-table-edge-cell-padding-horizontal));
11505}
11506.data-table .data-table-header-selected {
11507 background: rgba(var(--f7-theme-color-rgb), 0.1);
11508 display: none;
11509}
11510.data-table.data-table-has-checked .data-table-header {
11511 display: none;
11512}
11513.data-table.data-table-has-checked .data-table-header-selected {
11514 display: flex;
11515}
11516.data-table .data-table-title-selected {
11517 font-size: 14px;
11518 color: var(--f7-theme-color);
11519}
11520.data-table .data-table-footer {
11521 display: flex;
11522 align-items: center;
11523 box-sizing: border-box;
11524 position: relative;
11525 font-size: var(--f7-table-footer-font-size);
11526 overflow: hidden;
11527 height: var(--f7-table-footer-height);
11528 color: var(--f7-table-footer-text-color);
11529 justify-content: flex-start;
11530}
11531.data-table .data-table-footer:before {
11532 content: '';
11533 position: absolute;
11534 background-color: var(--f7-table-cell-border-color);
11535 display: block;
11536 z-index: 15;
11537 top: 0;
11538 right: auto;
11539 bottom: auto;
11540 left: 0;
11541 height: 1px;
11542 width: 100%;
11543 transform-origin: 50% 0%;
11544 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11545}
11546.data-table .data-table-rows-select,
11547.data-table .data-table-pagination {
11548 display: flex;
11549 align-items: center;
11550}
11551.data-table .input-cell {
11552 padding-top: 8px;
11553 padding-bottom: 8px;
11554 height: auto;
11555 vertical-align: top;
11556}
11557.data-table .input-cell .table-head-label + .input {
11558 margin-top: 4px;
11559}
11560.data-table .input-cell .input {
11561 height: var(--f7-table-input-height);
11562}
11563.data-table .input-cell .input input,
11564.data-table .input-cell .input textarea,
11565.data-table .input-cell .input select {
11566 height: var(--f7-table-input-height);
11567 color: var(--f7-table-input-text-color);
11568 font-size: var(--f7-table-input-font-size);
11569}
11570@media (max-width: 480px) and (orientation: portrait) {
11571 .data-table.data-table-collapsible thead {
11572 display: none;
11573 }
11574 .data-table.data-table-collapsible tbody,
11575 .data-table.data-table-collapsible tr,
11576 .data-table.data-table-collapsible td {
11577 display: block;
11578 }
11579 .data-table.data-table-collapsible tr {
11580 position: relative;
11581 }
11582 .data-table.data-table-collapsible tr:before {
11583 content: '';
11584 position: absolute;
11585 background-color: var(--f7-table-cell-border-color);
11586 display: block;
11587 z-index: 15;
11588 top: 0;
11589 right: auto;
11590 bottom: auto;
11591 left: 0;
11592 height: 1px;
11593 width: 100%;
11594 transform-origin: 50% 0%;
11595 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
11596 }
11597 .data-table.data-table-collapsible tr:hover {
11598 background-color: inherit;
11599 }
11600 .data-table.data-table-collapsible td {
11601 --f7-table-cell-padding-left: var(--f7-table-collapsible-cell-padding);
11602 --f7-table-cell-padding-right: var(--f7-table-collapsible-cell-padding);
11603 display: flex;
11604 align-content: center;
11605 align-items: center;
11606 justify-content: flex-start;
11607 text-align: right;
11608 }
11609 .data-table.data-table-collapsible td:before {
11610 display: none !important;
11611 }
11612 .data-table.data-table-collapsible td:not(.checkbox-cell):before {
11613 width: 40%;
11614 display: block !important;
11615 content: attr(data-collapsible-title);
11616 position: relative;
11617 height: auto;
11618 background: none !important;
11619 transform: none !important;
11620 font-size: var(--f7-table-head-font-size);
11621 font-weight: var(--f7-table-head-font-weight);
11622 color: var(--f7-table-head-text-color);
11623 margin-left: 16px;
11624 flex-shrink: 0;
11625 }
11626 .data-table.data-table-collapsible td.checkbox-cell {
11627 position: absolute;
11628 top: 0;
11629 right: 0;
11630 }
11631 .data-table.data-table-collapsible td.checkbox-cell + td {
11632 padding-right: 16px;
11633 }
11634 .data-table.data-table-collapsible td.checkbox-cell ~ td {
11635 margin-right: 32px;
11636 }
11637}
11638.data-table .tablet-only,
11639.data-table .tablet-landscape-only {
11640 display: none;
11641}
11642@media (min-width: 768px) {
11643 .data-table .tablet-only {
11644 display: table-cell;
11645 }
11646}
11647@media (min-width: 768px) and (orientation: landscape) {
11648 .data-table .tablet-landscape-only {
11649 display: table-cell;
11650 }
11651}
11652.ios .data-table th.actions-cell a.link + a.link,
11653.ios .data-table td.actions-cell a.link + a.link {
11654 margin-right: 15px;
11655}
11656.ios .sortable-cell:not(.numeric-cell):after {
11657 margin-right: 5px;
11658}
11659.ios .sortable-cell.numeric-cell:before {
11660 margin-left: 5px;
11661}
11662.ios .data-table-links a.link + a.link,
11663.ios .data-table-actions a.link + a.link,
11664.ios .data-table-links .button + .button,
11665.ios .data-table-actions .button + .button {
11666 margin-right: 15px;
11667}
11668.ios .data-table-actions a.link.icon-only {
11669 width: 44px;
11670 height: 44px;
11671}
11672.ios .data-table-rows-select a.link,
11673.ios .data-table-pagination a.link {
11674 width: 44px;
11675 height: 44px;
11676}
11677.ios .data-table-rows-select + .data-table-pagination {
11678 margin-right: 30px;
11679}
11680.ios .data-table-rows-select .input {
11681 margin-right: 20px;
11682}
11683.ios .data-table-pagination-label {
11684 margin-left: 15px;
11685}
11686.md .data-table th.actions-cell a.link + a.link,
11687.md .data-table td.actions-cell a.link + a.link {
11688 margin-right: 24px;
11689}
11690.md .data-table th.actions-cell a.icon-only,
11691.md .data-table td.actions-cell a.icon-only {
11692 width: 24px;
11693 height: 24px;
11694 line-height: 24px;
11695}
11696.md .sortable-cell:not(.numeric-cell):after {
11697 margin-right: 8px;
11698}
11699.md .sortable-cell.numeric-cell:before {
11700 margin-left: 8px;
11701}
11702.md .data-table-links a.link + a.link,
11703.md .data-table-actions a.link + a.link,
11704.md .data-table-links .button + .button,
11705.md .data-table-actions .button + .button {
11706 margin-right: 24px;
11707}
11708.md .data-table-actions a.link.icon-only {
11709 width: 24px;
11710 height: 24px;
11711 overflow: visible;
11712}
11713.md .data-table-actions a.link.icon-only.active-state {
11714 background: none;
11715}
11716.md .data-table-rows-select a.link,
11717.md .data-table-pagination a.link {
11718 width: 48px;
11719 height: 48px;
11720}
11721.md .data-table-rows-select a.link:before,
11722.md .data-table-pagination a.link:before {
11723 content: '';
11724 width: 152%;
11725 height: 152%;
11726 position: absolute;
11727 left: -26%;
11728 top: -26%;
11729 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
11730 background-repeat: no-repeat;
11731 background-position: center;
11732 background-size: 100% 100%;
11733 opacity: 0;
11734 pointer-events: none;
11735 transition-duration: 600ms;
11736}
11737.md .data-table-rows-select a.link.active-state:before,
11738.md .data-table-pagination a.link.active-state:before {
11739 opacity: 1;
11740 transition-duration: 150ms;
11741}
11742.md .data-table-rows-select + .data-table-pagination {
11743 margin-right: 32px;
11744}
11745.md .data-table-rows-select .input {
11746 margin-right: 24px;
11747}
11748.md .data-table-pagination-label {
11749 margin-left: 20px;
11750}
11751.md .input-cell .input-clear-button {
11752 transform: scale(0.8);
11753}
11754/* === FAB === */
11755:root {
11756 --f7-fab-text-color: #fff;
11757 --f7-fab-extended-text-font-size: 14px;
11758 --f7-fab-extended-text-padding: 0 20px;
11759 --f7-fab-label-bg-color: #fff;
11760 --f7-fab-label-text-color: #333;
11761 --f7-fab-label-border-radius: 4px;
11762 --f7-fab-label-padding: 4px 12px;
11763 --f7-fab-button-size: 40px;
11764}
11765.ios {
11766 --f7-fab-size: 50px;
11767 --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
11768 --f7-fab-margin: 15px;
11769 --f7-fab-extended-size: 50px;
11770 --f7-fab-extended-text-font-weight: 400;
11771 --f7-fab-extended-text-letter-spacing: 0;
11772 --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
11773 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
11774}
11775.md {
11776 --f7-fab-size: 56px;
11777 --f7-fab-box-shadow: var(--f7-elevation-6);
11778 --f7-fab-margin: 16px;
11779 --f7-fab-extended-size: 48px;
11780 --f7-fab-extended-text-font-weight: 500;
11781 --f7-fab-extended-text-letter-spacing: 0.03em;
11782 --f7-fab-label-box-shadow: var(--f7-elevation-3);
11783 /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
11784}
11785.fab {
11786 position: absolute;
11787 z-index: 1500;
11788}
11789.fab a {
11790 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
11791}
11792.fab[class*="fab-left"] {
11793 left: calc(var(--f7-fab-margin) + var(--f7-safe-area-left));
11794}
11795.fab[class*="fab-right"] {
11796 right: calc(var(--f7-fab-margin) + var(--f7-safe-area-right));
11797}
11798.fab[class*="-top"] {
11799 top: var(--f7-fab-margin);
11800}
11801.fab[class*="-bottom"] {
11802 bottom: calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom));
11803}
11804.fab[class*="fab-center"] {
11805 left: 50%;
11806 transform: translateX(-50%);
11807}
11808.fab[class*="left-center"],
11809.fab[class*="right-center"] {
11810 top: 50%;
11811 transform: translateY(-50%);
11812}
11813.fab[class*="center-center"] {
11814 top: 50%;
11815 left: 50%;
11816 transform: translateX(-50%) translateY(-50%);
11817}
11818.fab > a,
11819.fab-buttons a {
11820 background-color: var(--f7-fab-bg-color, var(--f7-theme-color));
11821 width: var(--f7-fab-size);
11822 height: var(--f7-fab-size);
11823 box-shadow: var(--f7-fab-box-shadow);
11824 border-radius: calc(var(--f7-fab-size) / 2);
11825 position: relative;
11826 transition-duration: 300ms;
11827 display: flex;
11828 align-items: center;
11829 justify-content: center;
11830 overflow: hidden;
11831 z-index: 1;
11832 color: var(--f7-fab-text-color);
11833}
11834.fab > a.active-state,
11835.fab-buttons a.active-state {
11836 background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
11837}
11838.fab > a i {
11839 position: absolute;
11840 left: 50%;
11841 top: 50%;
11842 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
11843 transition: 300ms;
11844}
11845.fab > a i + i {
11846 transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5);
11847 opacity: 0;
11848}
11849.fab-buttons a {
11850 border-radius: calc(var(--f7-fab-button-size) / 2);
11851 width: var(--f7-fab-button-size);
11852 height: var(--f7-fab-button-size);
11853}
11854.fab-buttons {
11855 display: flex;
11856 visibility: hidden;
11857 pointer-events: none;
11858 position: absolute;
11859}
11860.fab-buttons a {
11861 opacity: 0;
11862}
11863.fab-opened:not(.fab-morph) > a i {
11864 transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5);
11865 opacity: 0;
11866}
11867.fab-opened:not(.fab-morph) > a i + i {
11868 transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
11869 opacity: 1;
11870}
11871.fab-opened .fab-buttons {
11872 visibility: visible;
11873 pointer-events: auto;
11874}
11875.fab-opened .fab-buttons a {
11876 opacity: 1;
11877 transform: translate3d(0, 0px, 0) scale(1) !important;
11878}
11879.fab-opened .fab-buttons a:nth-child(2) {
11880 transition-delay: 50ms;
11881}
11882.fab-opened .fab-buttons a:nth-child(3) {
11883 transition-delay: 100ms;
11884}
11885.fab-opened .fab-buttons a:nth-child(4) {
11886 transition-delay: 150ms;
11887}
11888.fab-opened .fab-buttons a:nth-child(5) {
11889 transition-delay: 200ms;
11890}
11891.fab-opened .fab-buttons a:nth-child(6) {
11892 transition-delay: 250ms;
11893}
11894.fab-buttons-top,
11895.fab-buttons-bottom {
11896 left: 50%;
11897 width: var(--f7-fab-button-size);
11898 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11899}
11900.fab-buttons-top {
11901 bottom: 100%;
11902 margin-bottom: 16px;
11903 flex-direction: column-reverse;
11904}
11905.fab-buttons-top a {
11906 transform: translate3d(0, 8px, 0) scale(0.3);
11907 transform-origin: center bottom;
11908}
11909.fab-buttons-top a + a {
11910 margin-bottom: 16px;
11911}
11912.fab-buttons-bottom {
11913 top: 100%;
11914 margin-top: 16px;
11915 flex-direction: column;
11916}
11917.fab-buttons-bottom a {
11918 transform: translate3d(0, -8px, 0) scale(0.3);
11919 transform-origin: center top;
11920}
11921.fab-buttons-bottom a + a {
11922 margin-top: 16px;
11923}
11924.fab-buttons-left,
11925.fab-buttons-right {
11926 top: 50%;
11927 height: var(--f7-fab-button-size);
11928 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11929}
11930.fab-buttons-left {
11931 right: 100%;
11932 margin-right: 16px;
11933}
11934.fab-buttons-left a {
11935 transform: translate3d(8px, 0px, 0) scale(0.3);
11936 transform-origin: right center;
11937}
11938.fab-buttons-left a + a {
11939 margin-right: 16px;
11940}
11941.fab-buttons-right {
11942 left: 100%;
11943 margin-left: 16px;
11944 flex-direction: row-reverse;
11945}
11946.fab-buttons-right a {
11947 transform: translate3d(-8px, 0, 0) scale(0.3);
11948 transform-origin: left center;
11949}
11950.fab-buttons-right a + a {
11951 margin-left: 16px;
11952}
11953.fab-buttons-center {
11954 left: 0%;
11955 top: 0%;
11956 width: 100%;
11957 height: 100%;
11958}
11959.fab-buttons-center a {
11960 position: absolute;
11961}
11962.fab-buttons-center a:nth-child(1) {
11963 left: 50%;
11964 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11965 bottom: 100%;
11966 margin-bottom: 16px;
11967 transform: translateY(-8px) scale(0.3);
11968 transform-origin: center bottom;
11969}
11970.fab-buttons-center a:nth-child(2) {
11971 left: 100%;
11972 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11973 top: 50%;
11974 margin-left: 16px;
11975 transform: translateX(-8px) scale(0.3);
11976 transform-origin: left center;
11977}
11978.fab-buttons-center a:nth-child(3) {
11979 left: 50%;
11980 margin-left: calc(-1 * var(--f7-fab-button-size) / 2);
11981 top: 100%;
11982 margin-top: 16px;
11983 transform: translateY(8px) scale(0.3);
11984 transform-origin: center top;
11985}
11986.fab-buttons-center a:nth-child(4) {
11987 right: 100%;
11988 margin-top: calc(-1 * var(--f7-fab-button-size) / 2);
11989 top: 50%;
11990 margin-right: 16px;
11991 transform: translateX(8px) scale(0.3);
11992 transform-origin: right center;
11993}
11994.fab-morph {
11995 border-radius: calc(var(--f7-fab-size) / 2);
11996 background: var(--f7-fab-bg-color, var(--f7-theme-color));
11997 box-shadow: var(--f7-fab-box-shadow);
11998}
11999.fab-morph > a {
12000 box-shadow: none;
12001 background: none !important;
12002}
12003.fab-opened.fab-morph > a i {
12004 opacity: 0;
12005}
12006.fab-morph,
12007.fab-morph > a,
12008.fab-morph-target {
12009 transition-duration: 250ms;
12010}
12011.fab-morph-target:not(.fab-morph-target-visible) {
12012 display: none;
12013}
12014.fab-extended {
12015 width: auto;
12016 min-width: var(--f7-fab-extended-size);
12017}
12018.fab-extended > a {
12019 width: 100%;
12020 height: var(--f7-fab-extended-size);
12021}
12022.fab-extended > a i {
12023 left: calc(var(--f7-fab-extended-size) / 2);
12024}
12025.fab-extended i ~ .fab-text {
12026 padding-left: var(--f7-fab-extended-size);
12027}
12028.fab-extended > a {
12029 width: 100% !important;
12030}
12031.fab-text {
12032 box-sizing: border-box;
12033 font-size: var(--f7-fab-extended-text-font-size);
12034 padding: var(--f7-fab-extended-text-padding);
12035 font-weight: var(--f7-fab-extended-text-font-weight);
12036 letter-spacing: var(--f7-fab-extended-text-letter-spacing);
12037 text-transform: uppercase;
12038}
12039.fab-label-button {
12040 overflow: visible !important;
12041}
12042.fab-label {
12043 position: absolute;
12044 top: 50%;
12045 padding: var(--f7-fab-label-padding);
12046 border-radius: var(--f7-fab-label-border-radius);
12047 background: var(--f7-fab-label-bg-color);
12048 color: var(--f7-fab-label-text-color);
12049 box-shadow: var(--f7-fab-label-box-shadow);
12050 white-space: nowrap;
12051 transform: translateY(-50%);
12052 pointer-events: none;
12053}
12054.fab[class*="fab-right-"] .fab-label {
12055 right: 100%;
12056 margin-right: 8px;
12057}
12058.fab[class*="fab-left-"] .fab-label {
12059 left: 100%;
12060 margin-left: 8px;
12061}
12062.navbar ~ * .fab[class*="-top"],
12063.navbar ~ .fab[class*="-top"] {
12064 margin-top: var(--f7-navbar-height);
12065}
12066.toolbar-top ~ * .fab[class*="-top"],
12067.toolbar-top ~ .fab[class*="-top"],
12068.ios .toolbar-top-ios ~ * .fab[class*="-top"],
12069.ios .toolbar-top-ios ~ .fab[class*="-top"],
12070.md .toolbar-top-md ~ * .fab[class*="-top"],
12071.md .toolbar-top-md ~ .fab[class*="-top"] {
12072 margin-top: var(--f7-toolbar-height);
12073}
12074.toolbar-bottom ~ * .fab[class*="-bottom"],
12075.toolbar-bottom ~ .fab[class*="-bottom"],
12076.ios .toolbar-bottom-ios ~ * .fab[class*="-bottom"],
12077.ios .toolbar-bottom-ios ~ .fab[class*="-bottom"],
12078.md .toolbar-bottom-md ~ * .fab[class*="-bottom"],
12079.md .toolbar-bottom-md ~ .fab[class*="-bottom"] {
12080 margin-bottom: var(--f7-toolbar-height);
12081}
12082.tabbar-labels.toolbar-bottom ~ * .fab[class*="-bottom"],
12083.tabbar-labels.toolbar-bottom ~ .fab[class*="-bottom"],
12084.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab[class*="-bottom"],
12085.ios .tabbar-labels.toolbar-bottom-ios ~ .fab[class*="-bottom"],
12086.md .tabbar-labels.toolbar-bottom-md ~ * .fab[class*="-bottom"],
12087.md .tabbar-labels.toolbar-bottom-md ~ .fab[class*="-bottom"] {
12088 margin-bottom: var(--f7-tabbar-labels-height);
12089}
12090.tabbar-labels.toolbar-top ~ * .fab[class*="-bottom"],
12091.tabbar-labels.toolbar-top ~ .fab[class*="-bottom"],
12092.ios .tabbar-labels.toolbar-top-ios ~ * .fab[class*="-bottom"],
12093.ios .tabbar-labels.toolbar-top-ios ~ .fab[class*="-bottom"],
12094.md .tabbar-labels.toolbar-top-md ~ * .fab[class*="-bottom"],
12095.md .tabbar-labels.toolbar-top-md ~ .fab[class*="-bottom"] {
12096 margin-top: var(--f7-tabbar-labels-height);
12097}
12098.messagebar ~ * .fab[class*="-bottom"],
12099.messagebar ~ .fab[class*="-bottom"] {
12100 margin-bottom: var(--f7-messagebar-height);
12101}
12102.navbar + .toolbar-top ~ * .fab[class*="-top"],
12103.ios .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
12104.md .navbar + .toolbar-top-ios ~ * .fab[class*="-top"],
12105.navbar + .toolbar-top ~ .fab[class*="-top"],
12106.ios .navbar + .toolbar-top-ios ~ .fab[class*="-top"],
12107.md .navbar + .toolbar-top-ios ~ .fab[class*="-top"] {
12108 margin-top: calc(var(--f7-toolbar-height) + var(--f7-navbar-height));
12109}
12110.navbar + .toolbar-top.tabbar-labels ~ * .fab[class*="-top"],
12111.ios .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
12112.md .navbar + .toolbar-top-ios.tabbar-labels ~ * .fab[class*="-top"],
12113.navbar + .toolbar-top.tabbar-labels ~ .fab[class*="-top"],
12114.ios .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"],
12115.md .navbar + .toolbar-top-ios.tabbar-labels ~ .fab[class*="-top"] {
12116 margin-top: calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height));
12117}
12118.ios .fab > a.active-state,
12119.ios .fab-buttons a.active-state {
12120 transition-duration: 0ms;
12121}
12122/* === Searchbar === */
12123:root {
12124 /*
12125 --f7-searchbar-link-color: var(--f7-bars-link-color);
12126 */
12127}
12128.ios {
12129 /*
12130 --f7-searchbar-bg-image: var(--f7-bars-bg-image);
12131 --f7-searchbar-bg-color: var(--f7-bars-bg-color);
12132 --f7-searchbar-border-color: var(--f7-bars-border-color);
12133 */
12134 --f7-searchbar-height: 44px;
12135 /*
12136 --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
12137 */
12138 --f7-searchbar-search-icon-color: #939398;
12139 --f7-searchbar-placeholder-color: #939398;
12140 --f7-searchbar-input-text-color: #000;
12141 --f7-searchbar-input-font-size: 17px;
12142 --f7-searchbar-input-bg-color: #e8e8ea;
12143 --f7-searchbar-input-border-radius: 8px;
12144 --f7-searchbar-input-height: 32px;
12145 --f7-searchbar-input-padding-horizontal: 28px;
12146 /*
12147 --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
12148 */
12149 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.4);
12150 --f7-searchbar-shadow-image: none;
12151 --f7-searchbar-in-page-content-margin: 0px;
12152 --f7-searchbar-in-page-content-box-shadow: none;
12153 --f7-searchbar-in-page-content-border-radius: 0;
12154}
12155.ios .theme-dark,
12156.ios.theme-dark {
12157 --f7-searchbar-bg-color: #303030;
12158 --f7-searchbar-input-bg-color: #171717;
12159 --f7-searchbar-input-text-color: #fff;
12160}
12161.md {
12162 --f7-searchbar-bg-color: #fff;
12163 --f7-searchbar-border-color: transparent;
12164 --f7-searchbar-height: 48px;
12165 --f7-searchbar-link-color: #737373;
12166 --f7-searchbar-search-icon-color: #737373;
12167 --f7-searchbar-placeholder-color: #939398;
12168 --f7-searchbar-input-text-color: #000;
12169 --f7-searchbar-input-font-size: 20px;
12170 --f7-searchbar-input-bg-color: #fff;
12171 --f7-searchbar-input-border-radius: 0px;
12172 --f7-searchbar-input-height: 100%;
12173 --f7-searchbar-input-padding-horizontal: 48px;
12174 --f7-searchbar-input-clear-button-color: #737373;
12175 --f7-searchbar-backdrop-bg-color: rgba(0, 0, 0, 0.25);
12176 --f7-searchbar-shadow-image: var(--f7-bars-shadow-bottom-image);
12177 --f7-searchbar-in-page-content-margin: 8px;
12178 --f7-searchbar-in-page-content-box-shadow: var(--f7-elevation-1);
12179 --f7-searchbar-in-page-content-border-radius: 4px;
12180}
12181.searchbar {
12182 width: 100%;
12183 position: relative;
12184 z-index: 200;
12185 height: var(--f7-searchbar-height);
12186 background-image: var(--f7-searchbar-bg-image, var(--f7-bars-bg-image));
12187 background-color: var(--f7-searchbar-bg-color, var(--f7-bars-bg-color, var(--f7-theme-color)));
12188 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
12189}
12190.searchbar.no-hairline:after,
12191.searchbar.no-border:after {
12192 display: none !important;
12193}
12194.searchbar.no-shadow:before {
12195 display: none !important;
12196}
12197.searchbar:after {
12198 content: '';
12199 position: absolute;
12200 background-color: var(--f7-searchbar-border-color, var(--f7-bars-border-color));
12201 display: block;
12202 z-index: 15;
12203 top: auto;
12204 right: auto;
12205 bottom: 0;
12206 left: 0;
12207 height: 1px;
12208 width: 100%;
12209 transform-origin: 50% 100%;
12210 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
12211}
12212.page > .searchbar {
12213 z-index: 510;
12214}
12215.page > .searchbar:before {
12216 content: '';
12217 position: absolute;
12218 right: 0;
12219 width: 100%;
12220 top: 100%;
12221 bottom: auto;
12222 height: 8px;
12223 pointer-events: none;
12224 background: var(--f7-searchbar-shadow-image, var(--f7-bars-shadow-bottom-image));
12225}
12226.searchbar input[type="text"],
12227.searchbar input[type="search"] {
12228 box-sizing: border-box;
12229 width: 100%;
12230 height: 100%;
12231 display: block;
12232 border: none;
12233 -webkit-appearance: none;
12234 -moz-appearance: none;
12235 appearance: none;
12236 font-family: inherit;
12237 font-weight: normal;
12238 color: var(--f7-searchbar-input-text-color);
12239 font-size: var(--f7-searchbar-input-font-size);
12240 background-color: var(--f7-searchbar-input-bg-color);
12241 border-radius: var(--f7-searchbar-input-border-radius);
12242 position: relative;
12243 padding: 0;
12244 padding-left: var(--f7-searchbar-input-padding-right);
12245 padding-right: var(--f7-searchbar-input-padding-left);
12246}
12247.searchbar input[type="text"]::-webkit-input-placeholder,
12248.searchbar input[type="search"]::-webkit-input-placeholder {
12249 color: var(--f7-searchbar-placeholder-color);
12250 opacity: 1;
12251}
12252.searchbar input[type="text"]::-moz-placeholder,
12253.searchbar input[type="search"]::-moz-placeholder {
12254 color: var(--f7-searchbar-placeholder-color);
12255 opacity: 1;
12256}
12257.searchbar input[type="text"]::-ms-input-placeholder,
12258.searchbar input[type="search"]::-ms-input-placeholder {
12259 color: var(--f7-searchbar-placeholder-color);
12260 opacity: 1;
12261}
12262.searchbar input[type="text"]::placeholder,
12263.searchbar input[type="search"]::placeholder {
12264 color: var(--f7-searchbar-placeholder-color);
12265 opacity: 1;
12266}
12267.searchbar input::-webkit-search-cancel-button {
12268 -webkit-appearance: none;
12269 appearance: none;
12270}
12271.searchbar .searchbar-input-wrap {
12272 flex-shrink: 1;
12273 width: 100%;
12274 height: var(--f7-searchbar-input-height);
12275 position: relative;
12276}
12277.searchbar a {
12278 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12279}
12280.page > .searchbar {
12281 position: absolute;
12282 left: 0;
12283 top: 0;
12284}
12285.page-content .searchbar {
12286 border-radius: var(--f7-searchbar-in-page-content-border-radius);
12287 margin: var(--f7-searchbar-in-page-content-margin);
12288 width: auto;
12289 box-shadow: var(--f7-searchbar-in-page-content-box-shadow);
12290}
12291.page-content .searchbar .searchbar-inner,
12292.page-content .searchbar input[type="text"],
12293.page-content .searchbar input[type="search"] {
12294 border-radius: var(--f7-searchbar-in-page-content-border-radius);
12295}
12296.searchbar .input-clear-button {
12297 color: var(--f7-searchbar-input-clear-button-color, var(--f7-input-clear-button-color));
12298}
12299.searchbar-expandable {
12300 position: absolute;
12301 transition-duration: 300ms;
12302 pointer-events: none;
12303}
12304.navbar-inner-large .searchbar-expandable:after {
12305 display: none !important;
12306}
12307.navbar .searchbar.searchbar-expandable {
12308 --f7-searchbar-expandable-size: var(--f7-navbar-height);
12309}
12310.toolbar .searchbar.searchbar-expandable {
12311 --f7-searchbar-expandable-size: var(--f7-toolbar-height);
12312}
12313.subnavbar .searchbar.searchbar-expandable {
12314 --f7-searchbar-expandable-size: var(--f7-subnavbar-height);
12315}
12316.tabbar-labels .searchbar.searchbar-expandable {
12317 --f7-searchbar-expandable-size: var(--f7-tabbar-labels-height);
12318}
12319.searchbar-inner {
12320 position: absolute;
12321 left: 0;
12322 top: 0;
12323 width: 100%;
12324 height: 100%;
12325 display: flex;
12326 align-items: center;
12327 box-sizing: border-box;
12328}
12329.searchbar-disable-button {
12330 cursor: pointer;
12331 pointer-events: none;
12332 -webkit-appearance: none;
12333 -moz-appearance: none;
12334 appearance: none;
12335 background: none;
12336 border: none;
12337 outline: 0;
12338 padding: 0;
12339 margin: 0;
12340 width: auto;
12341 opacity: 0;
12342}
12343.searchbar-icon {
12344 pointer-events: none;
12345 background-position: center;
12346 background-repeat: no-repeat;
12347}
12348.searchbar-icon:after {
12349 color: var(--f7-searchbar-search-icon-color);
12350 font-family: 'framework7-core-icons';
12351 font-weight: normal;
12352 font-style: normal;
12353 line-height: 1;
12354 letter-spacing: normal;
12355 text-transform: none;
12356 white-space: nowrap;
12357 word-wrap: normal;
12358 direction: ltr;
12359 -webkit-font-smoothing: antialiased;
12360 text-rendering: optimizeLegibility;
12361 -moz-osx-font-smoothing: grayscale;
12362 -moz-font-feature-settings: "liga";
12363 font-feature-settings: "liga";
12364 text-align: center;
12365 display: block;
12366 width: 100%;
12367 height: 100%;
12368 font-size: 20px;
12369}
12370.searchbar-backdrop {
12371 position: absolute;
12372 left: 0;
12373 top: 0;
12374 width: 100%;
12375 height: 100%;
12376 z-index: 100;
12377 opacity: 0;
12378 pointer-events: none;
12379 transition-duration: 300ms;
12380 transform: translate3d(0, 0, 0);
12381 background: var(--f7-searchbar-backdrop-bg-color);
12382}
12383.searchbar-backdrop.searchbar-backdrop-in {
12384 opacity: 1;
12385 pointer-events: auto;
12386}
12387.page-content > .searchbar-backdrop {
12388 position: fixed;
12389}
12390.searchbar-not-found {
12391 display: none;
12392}
12393.hidden-by-searchbar,
12394.list .hidden-by-searchbar,
12395.list.li.hidden-by-searchbar,
12396.list li.hidden-by-searchbar {
12397 display: none !important;
12398}
12399.navbar.with-searchbar-expandable-enabled,
12400.navbar-inner.with-searchbar-expandable-enabled {
12401 --f7-navbar-large-collapse-progress: 1;
12402}
12403.navbar.with-searchbar-expandable-enabled .title-large,
12404.navbar-inner.with-searchbar-expandable-enabled .title-large,
12405.navbar.with-searchbar-expandable-enabled .title-large-text,
12406.navbar-inner.with-searchbar-expandable-enabled .title-large-text,
12407.navbar.with-searchbar-expandable-enabled .title-large-inner,
12408.navbar-inner.with-searchbar-expandable-enabled .title-large-inner {
12409 transition-duration: 300ms;
12410}
12411.page-content.with-searchbar-expandable-enabled {
12412 height: calc(100% + var(--f7-navbar-large-title-height));
12413 transform: translateY(calc(-1 * var(--f7-navbar-large-title-height)));
12414 transition-duration: 300ms;
12415 transition-property: transform;
12416}
12417.navbar ~ .page:not(.no-navbar) > .searchbar,
12418.page > .navbar ~ .searchbar {
12419 top: var(--f7-navbar-height);
12420}
12421.navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
12422.page-with-navbar-large .navbar ~ .searchbar,
12423.page-with-navbar-large .navbar ~ * .searchbar {
12424 top: calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height));
12425 transform: translate3d(0, calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)), 0);
12426}
12427.page > .searchbar ~ * .page-content,
12428.page > .searchbar ~ .page-content {
12429 padding-top: var(--f7-searchbar-height);
12430}
12431.page > .navbar ~ .searchbar ~ * .page-content,
12432.page > .navbar ~ .searchbar ~ .page-content,
12433.navbar ~ .page:not(.no-navbar) > .searchbar ~ .page-content,
12434.navbar ~ .page:not(.no-navbar) > .searchbar ~ * .page-content {
12435 padding-top: calc(var(--f7-navbar-height) + var(--f7-searchbar-height));
12436}
12437.page-with-navbar-large > .navbar ~ .searchbar ~ * .page-content,
12438.page-with-navbar-large > .navbar ~ .searchbar ~ .page-content,
12439.navbar ~ .page-with-navbar-large:not(.no-navbar) > .searchbar ~ .page-content,
12440.navbar ~ .page-with-navbar-large:not(.no-navbar) > .searchbar ~ * .page-content {
12441 padding-top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height) + var(--f7-navbar-large-title-height));
12442}
12443.page > .toolbar-top ~ .searchbar,
12444.ios .page > .toolbar-top-ios ~ .searchbar,
12445.md .page > .toolbar-top-md ~ .searchbar {
12446 top: var(--f7-toolbar-height);
12447}
12448.page > .toolbar-top ~ .searchbar ~ * .page-content,
12449.ios .page > .toolbar-top-ios ~ .searchbar ~ * .page-content,
12450.md .page > .toolbar-top-md ~ .searchbar ~ * .page-content,
12451.page > .toolbar-top ~ .searchbar ~ .page-content,
12452.ios .page > .toolbar-top-ios ~ .searchbar ~ .page-content,
12453.md .page > .toolbar-top-md ~ .searchbar ~ .page-content {
12454 padding-top: calc(var(--f7-toolbar-height) + var(--f7-searchbar-height));
12455}
12456.page > .tabbar-labels.toolbar-top ~ .searchbar,
12457.ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar,
12458.md .page > .tabbar-labels.toolbar-top-md ~ .searchbar {
12459 top: var(--f7-tabbar-labels-height);
12460}
12461.page > .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content,
12462.ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content,
12463.md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content,
12464.page > .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content,
12465.ios .page > .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content,
12466.md .page > .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content {
12467 padding-top: calc(var(--f7-tabbar-labels-height) + var(--f7-searchbar-height));
12468}
12469.page > .navbar ~ .toolbar-top ~ .searchbar,
12470.ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar,
12471.md .page > .navbar ~ .toolbar-top-md ~ .searchbar {
12472 top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
12473}
12474.page > .navbar ~ .toolbar-top ~ .searchbar ~ * .page-content,
12475.ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ * .page-content,
12476.md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ * .page-content,
12477.page > .navbar ~ .toolbar-top ~ .searchbar ~ .page-content,
12478.ios .page > .navbar ~ .toolbar-top-ios ~ .searchbar ~ .page-content,
12479.md .page > .navbar ~ .toolbar-top-md ~ .searchbar ~ .page-content {
12480 padding-top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-searchbar-height));
12481}
12482.page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar,
12483.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar,
12484.md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar {
12485 top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
12486}
12487.page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ * .page-content,
12488.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ * .page-content,
12489.md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ * .page-content,
12490.page > .navbar ~ .tabbar-labels.toolbar-top ~ .searchbar ~ .page-content,
12491.ios .page > .navbar ~ .tabbar-labels.toolbar-top-ios ~ .searchbar ~ .page-content,
12492.md .page > .navbar ~ .tabbar-labels.toolbar-top-md ~ .searchbar ~ .page-content {
12493 padding-top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-searchbar-height));
12494}
12495.ios {
12496 --f7-searchbar-input-padding-left: var(--f7-searchbar-input-padding-horizontal);
12497 --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal);
12498}
12499.ios .searchbar input[type="search"],
12500.ios .searchbar input[type="text"] {
12501 z-index: 30;
12502}
12503.ios .searchbar .input-clear-button {
12504 z-index: 40;
12505 left: 7px;
12506}
12507.ios .searchbar-inner {
12508 padding: 0 calc(8px + var(--f7-safe-area-right)) 0 calc(8px + var(--f7-safe-area-left));
12509}
12510.ios .searchbar-icon {
12511 width: 13px;
12512 height: 13px;
12513 position: absolute;
12514 top: 50%;
12515 margin-top: -6px;
12516 z-index: 40;
12517 right: 8px;
12518}
12519.ios .searchbar-icon:after {
12520 content: 'search_ios';
12521 line-height: 13px;
12522}
12523.ios .searchbar-disable-button {
12524 font-size: 17px;
12525 flex-shrink: 0;
12526 transform: translate3d(0, 0, 0);
12527 transition-duration: 300ms;
12528 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12529 display: none;
12530}
12531.ios .searchbar-disable-button.active-state {
12532 transition-duration: 0ms;
12533 opacity: 0.3 !important;
12534}
12535.ios .searchbar-enabled .searchbar-disable-button {
12536 pointer-events: auto;
12537 opacity: 1;
12538 margin-right: 8px;
12539}
12540.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button {
12541 transition-duration: 300ms !important;
12542}
12543.ios .searchbar-expandable {
12544 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
12545 right: 0;
12546 bottom: 0;
12547 opacity: 1;
12548 width: 100%;
12549 height: 0%;
12550 transform: translate3d(0, 0, 0);
12551 overflow: hidden;
12552}
12553.ios .searchbar-expandable .searchbar-disable-button {
12554 margin-right: 8px;
12555 opacity: 1;
12556 display: block;
12557}
12558.ios .searchbar-expandable .searchbar-inner {
12559 height: var(--f7-searchbar-expandable-size);
12560}
12561.ios .navbar-inner.with-searchbar-expandable-enabled .left,
12562.ios .navbar-inner.with-searchbar-expandable-enabled .title,
12563.ios .navbar-inner.with-searchbar-expandable-enabled .right {
12564 transform: translateY(calc(-1 * var(--f7-navbar-height)));
12565 transition: 300ms;
12566 opacity: 0;
12567}
12568.ios .searchbar-expandable.searchbar-enabled {
12569 opacity: 1;
12570 height: var(--f7-searchbar-expandable-size);
12571 pointer-events: auto;
12572}
12573.md {
12574 --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px);
12575 --f7-searchbar-input-padding-right: var(--f7-searchbar-input-padding-horizontal);
12576}
12577.md .searchbar-inner {
12578 padding: 0 var(--f7-safe-area-right) 0 var(--f7-safe-area-left);
12579}
12580.md .searchbar-icon,
12581.md .searchbar-disable-button {
12582 position: absolute;
12583 right: calc(-4px + var(--f7-safe-area-right));
12584 top: 50%;
12585 transition-duration: 300ms;
12586}
12587.md .searchbar-icon {
12588 width: 24px;
12589 height: 24px;
12590 margin-left: 12px;
12591 margin-top: -12px;
12592}
12593.md .searchbar-icon:after {
12594 content: 'search_md';
12595 line-height: 1.2;
12596}
12597.md .searchbar-disable-button {
12598 width: 48px;
12599 height: 48px;
12600 transform: rotate(-90deg) scale(0.5);
12601 font-size: 0 !important;
12602 display: block;
12603 margin-top: -24px;
12604 color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
12605 --f7-link-highlight-color: var(--f7-link-highlight-black);
12606}
12607.md .searchbar-disable-button:before {
12608 content: '';
12609 width: 152%;
12610 height: 152%;
12611 position: absolute;
12612 left: -26%;
12613 top: -26%;
12614 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
12615 background-repeat: no-repeat;
12616 background-position: center;
12617 background-size: 100% 100%;
12618 opacity: 0;
12619 pointer-events: none;
12620 transition-duration: 600ms;
12621}
12622.md .searchbar-disable-button.active-state:before {
12623 opacity: 1;
12624 transition-duration: 150ms;
12625}
12626.md .searchbar-disable-button:after {
12627 font-family: 'framework7-core-icons';
12628 font-weight: normal;
12629 font-style: normal;
12630 line-height: 1;
12631 letter-spacing: normal;
12632 text-transform: none;
12633 white-space: nowrap;
12634 word-wrap: normal;
12635 direction: ltr;
12636 -webkit-font-smoothing: antialiased;
12637 text-rendering: optimizeLegibility;
12638 -moz-osx-font-smoothing: grayscale;
12639 -moz-font-feature-settings: "liga";
12640 font-feature-settings: "liga";
12641 text-align: center;
12642 display: block;
12643 width: 100%;
12644 height: 100%;
12645 font-size: 20px;
12646 line-height: 48px;
12647 content: "arrow_right_md";
12648}
12649.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button {
12650 transform: rotate(0deg) scale(1);
12651 pointer-events: auto;
12652 opacity: 1;
12653}
12654.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon {
12655 opacity: 0;
12656 transform: rotate(90deg) scale(0.5);
12657}
12658.md .searchbar .input-clear-button {
12659 width: 48px;
12660 height: 48px;
12661 margin-top: -24px;
12662 left: 0;
12663 --f7-link-highlight-color: var(--f7-link-highlight-black);
12664}
12665.md .searchbar .input-clear-button:before {
12666 content: '';
12667 width: 152%;
12668 height: 152%;
12669 position: absolute;
12670 left: -26%;
12671 top: -26%;
12672 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
12673 background-repeat: no-repeat;
12674 background-position: center;
12675 background-size: 100% 100%;
12676 opacity: 0;
12677 pointer-events: none;
12678 transition-duration: 600ms;
12679}
12680.md .searchbar .input-clear-button.active-state:before {
12681 opacity: 1;
12682 transition-duration: 150ms;
12683}
12684.md .searchbar .input-clear-button:after {
12685 line-height: 48px;
12686 content: 'delete_md';
12687 opacity: 1;
12688}
12689.md .searchbar .input-clear-button:before {
12690 margin-left: 0;
12691 margin-top: 0;
12692}
12693.md .page > .searchbar,
12694.md .subnavbar .searchbar,
12695.md .searchbar-expandable {
12696 --f7-searchbar-input-padding-left: calc(var(--f7-searchbar-input-padding-horizontal) + 17px + 8px);
12697}
12698.md .page > .searchbar .searchbar-icon,
12699.md .subnavbar .searchbar .searchbar-icon,
12700.md .searchbar-expandable .searchbar-icon,
12701.md .page > .searchbar .searchbar-disable-button,
12702.md .subnavbar .searchbar .searchbar-disable-button,
12703.md .searchbar-expandable .searchbar-disable-button {
12704 right: calc(-4px + 8px + var(--f7-safe-area-right));
12705}
12706.md .searchbar-expandable {
12707 --f7-searchbar-expandable-size: var(--f7-searchbar-height);
12708 height: 100%;
12709 opacity: 0;
12710 top: 50%;
12711 border-radius: calc(var(--f7-searchbar-expandable-size));
12712 width: calc(var(--f7-searchbar-expandable-size));
12713 margin-top: calc(var(--f7-searchbar-expandable-size) * -1 / 2);
12714 transform: translate3d(0px, 0px, 0px);
12715 right: 100%;
12716 margin-right: calc(var(--f7-searchbar-expandable-size) * -1);
12717}
12718.md .searchbar-expandable.searchbar-enabled {
12719 width: 100%;
12720 border-radius: 0;
12721 opacity: 1;
12722 pointer-events: auto;
12723 top: 0;
12724 margin-top: 0;
12725 right: 0;
12726 margin-right: 0;
12727}
12728/* === Messages === */
12729:root {
12730 --f7-messages-content-bg-color: #fff;
12731 --f7-message-text-header-text-color: inherit;
12732 --f7-message-text-header-opacity: 0.65;
12733 --f7-message-text-header-font-size: 12px;
12734 --f7-message-text-footer-text-color: inherit;
12735 --f7-message-text-footer-opacity: 0.65;
12736 --f7-message-text-footer-font-size: 12px;
12737 --f7-message-bubble-line-height: 1.2;
12738 --f7-message-header-font-size: 12px;
12739 --f7-message-footer-font-size: 11px;
12740 --f7-message-name-font-size: 12px;
12741 --f7-message-typing-indicator-bg-color: #000;
12742 /*
12743 --f7-message-sent-bg-color: var(--f7-theme-color);
12744 */
12745 --f7-message-sent-text-color: #fff;
12746 --f7-message-received-bg-color: #e5e5ea;
12747 --f7-message-received-text-color: #000;
12748}
12749.ios {
12750 --f7-messages-title-text-color: #8e8e93;
12751 --f7-messages-title-font-size: 11px;
12752 --f7-message-header-text-color: #8e8e93;
12753 --f7-message-footer-text-color: #8e8e93;
12754 --f7-message-name-text-color: #8e8e93;
12755 --f7-message-avatar-size: 29px;
12756 --f7-message-margin: 10px;
12757 --f7-message-bubble-font-size: 17px;
12758 --f7-message-bubble-border-radius: 16px;
12759 --f7-message-bubble-padding-vertical: 6px;
12760 --f7-message-bubble-padding-horizontal: 16px;
12761 --f7-message-typing-indicator-opacity: 0.35;
12762}
12763.ios .theme-dark,
12764.ios.theme-dark {
12765 --f7-messages-content-bg-color: transparent;
12766 --f7-message-received-bg-color: #333;
12767 --f7-message-received-text-color: #fff;
12768 --f7-message-typing-indicator-bg-color: #fff;
12769}
12770.md {
12771 --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
12772 --f7-messages-title-font-size: 12px;
12773 --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
12774 --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
12775 --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
12776 --f7-message-avatar-size: 32px;
12777 --f7-message-margin: 16px;
12778 --f7-message-bubble-font-size: 16px;
12779 --f7-message-bubble-border-radius: 4px;
12780 --f7-message-bubble-padding-vertical: 6px;
12781 --f7-message-bubble-padding-horizontal: 8px;
12782 --f7-message-typing-indicator-opacity: 0.6;
12783}
12784.md .theme-dark,
12785.md.theme-dark {
12786 --f7-messages-content-bg-color: transparent;
12787 --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
12788 --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
12789 --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
12790 --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
12791 --f7-message-received-bg-color: #333;
12792 --f7-message-received-text-color: #fff;
12793 --f7-message-typing-indicator-bg-color: #fff;
12794}
12795.messages-content,
12796.messages {
12797 background: var(--f7-messages-content-bg-color);
12798}
12799.messages {
12800 display: flex;
12801 flex-direction: column;
12802 min-height: 100%;
12803 position: relative;
12804 z-index: 1;
12805}
12806.messages-title,
12807.message {
12808 margin-top: var(--f7-message-margin);
12809}
12810.messages-title:last-child,
12811.message:last-child {
12812 margin-bottom: var(--f7-message-margin);
12813}
12814.messages-title {
12815 text-align: center;
12816 width: 100%;
12817 line-height: 1;
12818 color: var(--f7-messages-title-text-color);
12819 font-size: var(--f7-messages-title-font-size);
12820}
12821.message {
12822 max-width: 70%;
12823 box-sizing: border-box;
12824 display: flex;
12825 align-items: flex-end;
12826 position: relative;
12827 z-index: 1;
12828 transform: translate3d(0, 0, 0);
12829}
12830.message-avatar {
12831 border-radius: 50%;
12832 position: relative;
12833 background-size: cover;
12834 align-self: flex-end;
12835 flex-shrink: 0;
12836 width: var(--f7-message-avatar-size);
12837 height: var(--f7-message-avatar-size);
12838}
12839.message-content {
12840 position: relative;
12841 display: flex;
12842 flex-direction: column;
12843}
12844.message-header,
12845.message-footer,
12846.message-name {
12847 line-height: 1;
12848}
12849.message-header {
12850 color: var(--f7-message-header-text-color);
12851 font-size: var(--f7-message-header-font-size);
12852}
12853.message-footer {
12854 color: var(--f7-message-footer-text-color);
12855 font-size: var(--f7-message-footer-font-size);
12856 margin-bottom: -1em;
12857}
12858.message-name {
12859 color: var(--f7-message-name-text-color);
12860 font-size: var(--f7-message-name-font-size);
12861}
12862.message-bubble {
12863 box-sizing: border-box;
12864 word-break: break-word;
12865 display: flex;
12866 flex-direction: column;
12867 position: relative;
12868 line-height: var(--f7-message-bubble-line-height);
12869 font-size: var(--f7-message-bubble-font-size);
12870 border-radius: var(--f7-message-bubble-border-radius);
12871 padding: var(--f7-message-bubble-padding-vertical) var(--f7-message-bubble-padding-horizontal);
12872 min-height: 32px;
12873}
12874.message-image img {
12875 display: block;
12876 max-width: 100%;
12877 height: auto;
12878 width: auto;
12879}
12880.message-text-header,
12881.message-text-footer {
12882 line-height: 1;
12883}
12884.message-text-header {
12885 color: var(--f7-message-text-header-text-color);
12886 opacity: var(--f7-message-text-header-opacity);
12887 font-size: var(--f7-message-text-header-font-size);
12888}
12889.message-text-footer {
12890 color: var(--f7-message-text-footer-text-color);
12891 opacity: var(--f7-message-text-footer-opacity);
12892 font-size: var(--f7-message-text-footer-font-size);
12893}
12894.message-text {
12895 text-align: left;
12896}
12897.message-sent {
12898 text-align: right;
12899 flex-direction: row;
12900 align-self: flex-start;
12901}
12902.message-sent .message-bubble {
12903 color: var(--f7-message-sent-text-color);
12904 background: var(--f7-message-sent-bg-color, var(--f7-theme-color));
12905}
12906.message-sent .message-content {
12907 align-items: flex-start;
12908}
12909.message-sent.message-tail .message-bubble {
12910 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0 var(--f7-message-bubble-border-radius);
12911}
12912.message-received {
12913 flex-direction: row-reverse;
12914 align-self: flex-end;
12915}
12916.message-received .message-bubble {
12917 color: var(--f7-message-received-text-color);
12918 background: var(--f7-message-received-bg-color);
12919}
12920.message-received .message-content {
12921 align-items: flex-end;
12922}
12923.message-received.message-tail .message-bubble {
12924 border-radius: var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) var(--f7-message-bubble-border-radius) 0;
12925}
12926.message:not(.message-last) .message-avatar {
12927 opacity: 0;
12928}
12929.message:not(.message-first) .message-name {
12930 display: none;
12931}
12932.message.message-same-name .message-name {
12933 display: none;
12934}
12935.message.message-same-header .message-header {
12936 display: none;
12937}
12938.message.message-same-footer .message-footer {
12939 display: none;
12940}
12941.message-appear-from-bottom {
12942 animation: message-appear-from-bottom 300ms;
12943}
12944.message-appear-from-top {
12945 animation: message-appear-from-top 300ms;
12946}
12947.message-typing-indicator {
12948 display: inline-block;
12949 font-size: 0;
12950 vertical-align: middle;
12951}
12952.message-typing-indicator > div {
12953 display: inline-block;
12954 position: relative;
12955 background: var(--f7-message-typing-indicator-bg-color);
12956 opacity: var(--f7-message-typing-indicator-opacity);
12957 vertical-align: middle;
12958 border-radius: 50%;
12959}
12960@keyframes message-appear-from-bottom {
12961 from {
12962 transform: translate3d(0, 100%, 0);
12963 }
12964 to {
12965 transform: translate3d(0, 0, 0);
12966 }
12967}
12968@keyframes message-appear-from-top {
12969 from {
12970 transform: translate3d(0, -100%, 0);
12971 }
12972 to {
12973 transform: translate3d(0, 0, 0);
12974 }
12975}
12976.ios .messages-title b,
12977.ios .message-header b,
12978.ios .message-footer b,
12979.ios .message-name b {
12980 font-weight: 600;
12981}
12982.ios .message-header,
12983.ios .message-name {
12984 margin-bottom: 3px;
12985}
12986.ios .message-footer {
12987 margin-top: 3px;
12988}
12989.ios .message-bubble {
12990 min-width: 48px;
12991}
12992.ios .message-image {
12993 margin: var(--f7-message-bubble-padding-vertical) calc(-1 * var(--f7-message-bubble-padding-horizontal));
12994}
12995.ios .message-image:first-child {
12996 margin-top: calc(-1 * var(--f7-message-bubble-padding-vertical));
12997}
12998.ios .message-image:first-child img {
12999 border-top-left-radius: var(--f7-message-bubble-border-radius);
13000 border-top-right-radius: var(--f7-message-bubble-border-radius);
13001}
13002.ios .message-image:last-child {
13003 margin-bottom: calc(-1 * var(--f7-message-bubble-padding-vertical));
13004}
13005.ios .message-image:last-child img {
13006 border-bottom-left-radius: var(--f7-message-bubble-border-radius);
13007 border-bottom-right-radius: var(--f7-message-bubble-border-radius);
13008}
13009.ios .message-text-header {
13010 margin-bottom: 3px;
13011}
13012.ios .message-text-footer {
13013 margin-top: 3px;
13014}
13015.ios .message-received {
13016 margin-left: calc(10px + var(--f7-safe-area-left));
13017}
13018.ios .message-received .message-header,
13019.ios .message-received .message-footer,
13020.ios .message-received .message-name {
13021 margin-left: var(--f7-message-bubble-padding-horizontal);
13022}
13023.ios .message-received .message-bubble {
13024 padding-left: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
13025 -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%;
13026}
13027.ios .message-received .message-image {
13028 margin-left: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
13029}
13030.ios .message-received.message-tail:not(.message-typing) .message-bubble {
13031 -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%;
13032}
13033.ios .message-received.message-tail:not(.message-typing) .message-bubble .message-image:last-child img {
13034 border-bottom-left-radius: 0px;
13035}
13036.ios .message-sent {
13037 margin-right: calc(10px + var(--f7-safe-area-right));
13038}
13039.ios .message-sent .message-header,
13040.ios .message-sent .message-footer,
13041.ios .message-sent .message-name {
13042 margin-right: var(--f7-message-bubble-padding-horizontal);
13043}
13044.ios .message-sent .message-bubble {
13045 padding-right: calc(var(--f7-message-bubble-padding-horizontal) + 6px);
13046 -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%;
13047}
13048.ios .message-sent .message-image {
13049 margin-right: calc(-1 * (var(--f7-message-bubble-padding-horizontal) + 6px));
13050}
13051.ios .message-sent.message-tail .message-bubble {
13052 -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%;
13053}
13054.ios .message-sent.message-tail .message-bubble .message-image:last-child img {
13055 border-bottom-right-radius: 0px;
13056}
13057.ios .message + .message:not(.message-first) {
13058 margin-top: 1px;
13059}
13060.ios .message-received.message-typing .message-content:after,
13061.ios .message-received.message-typing .message-content:before {
13062 content: '';
13063 position: absolute;
13064 background: var(--f7-message-received-bg-color);
13065 border-radius: 50%;
13066}
13067.ios .message-received.message-typing .message-content:after {
13068 width: 11px;
13069 height: 11px;
13070 left: 4px;
13071 bottom: 0px;
13072}
13073.ios .message-received.message-typing .message-content:before {
13074 width: 6px;
13075 height: 6px;
13076 left: -1px;
13077 bottom: -4px;
13078}
13079.ios .message-typing-indicator > div {
13080 width: 9px;
13081 height: 9px;
13082}
13083.ios .message-typing-indicator > div + div {
13084 margin-right: 4px;
13085}
13086.ios .message-typing-indicator > div:nth-child(1) {
13087 animation: ios-message-typing-indicator 900ms infinite;
13088}
13089.ios .message-typing-indicator > div:nth-child(2) {
13090 animation: ios-message-typing-indicator 900ms 150ms infinite;
13091}
13092.ios .message-typing-indicator > div:nth-child(3) {
13093 animation: ios-message-typing-indicator 900ms 300ms infinite;
13094}
13095@keyframes ios-message-typing-indicator {
13096 0% {
13097 opacity: 0.35;
13098 }
13099 25% {
13100 opacity: 0.2;
13101 }
13102 50% {
13103 opacity: 0.2;
13104 }
13105}
13106.md .messages-title b,
13107.md .message-header b,
13108.md .message-footer b,
13109.md .message-name b {
13110 font-weight: 500;
13111}
13112.md .message-header,
13113.md .message-name {
13114 margin-bottom: 2px;
13115}
13116.md .message-footer {
13117 margin-top: 2px;
13118}
13119.md .message-text-header {
13120 margin-bottom: 4px;
13121}
13122.md .message-text-footer {
13123 margin-top: 4px;
13124}
13125.md .message-received.message-tail .message-bubble:before,
13126.md .message-sent.message-tail .message-bubble:before {
13127 position: absolute;
13128 content: '';
13129 bottom: 0;
13130 width: 0;
13131 height: 0;
13132}
13133.md .message-received {
13134 margin-left: calc(8px + var(--f7-safe-area-left));
13135}
13136.md .message-received .message-avatar + .message-content {
13137 margin-left: var(--f7-message-bubble-padding-horizontal);
13138}
13139.md .message-received.message-tail .message-bubble:before {
13140 border-left: 8px solid transparent;
13141 border-right: 0 solid transparent;
13142 border-bottom: 8px solid var(--f7-message-received-bg-color);
13143 right: 100%;
13144}
13145.md .message-sent {
13146 margin-right: calc(8px + var(--f7-safe-area-right));
13147}
13148.md .message-sent .message-avatar + .message-content {
13149 margin-right: var(--f7-message-bubble-padding-horizontal);
13150}
13151.md .message-sent.message-tail .message-bubble:before {
13152 border-left: 0 solid transparent;
13153 border-right: 8px solid transparent;
13154 border-bottom: 8px solid var(--f7-message-sent-bg-color, var(--f7-theme-color));
13155 left: 100%;
13156}
13157.md .message + .message:not(.message-first) {
13158 margin-top: 8px;
13159}
13160.md .message-typing-indicator > div {
13161 width: 6px;
13162 height: 6px;
13163}
13164.md .message-typing-indicator > div + div {
13165 margin-right: 6px;
13166}
13167.md .message-typing-indicator > div:nth-child(1) {
13168 animation: md-message-typing-indicator 900ms infinite;
13169}
13170.md .message-typing-indicator > div:nth-child(2) {
13171 animation: md-message-typing-indicator 900ms 150ms infinite;
13172}
13173.md .message-typing-indicator > div:nth-child(3) {
13174 animation: md-message-typing-indicator 900ms 300ms infinite;
13175}
13176@keyframes md-message-typing-indicator {
13177 0% {
13178 transform: translateY(0%);
13179 }
13180 25% {
13181 transform: translateY(-5px);
13182 }
13183 50% {
13184 transform: translateY(0%);
13185 }
13186}
13187/* === Messagebar === */
13188:root {
13189 --f7-messagebar-bg-color: #fff;
13190 --f7-messagebar-textarea-bg-color: transparent;
13191 --f7-messagebar-attachments-height: 155px;
13192 --f7-messagebar-attachment-height: 155px;
13193 --f7-messagebar-attachment-landscape-height: 120px;
13194 --f7-messagebar-sheet-height: 252px;
13195 --f7-messagebar-sheet-landscape-height: 192px;
13196}
13197.ios {
13198 --f7-messagebar-height: 44px;
13199 --f7-messagebar-font-size: 17px;
13200 /*
13201 --f7-messagebar-link-color: var(--f7-theme-color);
13202 */
13203 --f7-messagebar-border-color: transparent;
13204 --f7-messagebar-shadow-image: none;
13205 --f7-messagebar-textarea-border-radius: 17px;
13206 --f7-messagebar-textarea-padding: 6px 15px;
13207 --f7-messagebar-textarea-height: 34px;
13208 --f7-messagebar-textarea-text-color: #000;
13209 --f7-messagebar-textarea-font-size: 17px;
13210 --f7-messagebar-textarea-line-height: 20px;
13211 --f7-messagebar-textarea-border: 1px solid #c8c8cd;
13212 --f7-messagebar-sheet-bg-color: #d1d5da;
13213 --f7-messagebar-attachments-border-color: #c8c8cd;
13214 --f7-messagebar-attachment-border-radius: 12px;
13215}
13216.ios .theme-dark,
13217.ios.theme-dark {
13218 --f7-messagebar-bg-color: var(--f7-bars-bg-color);
13219 --f7-messagebar-textarea-text-color: #fff;
13220 --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
13221 --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
13222}
13223.md {
13224 --f7-messagebar-height: 48px;
13225 --f7-messagebar-font-size: 16px;
13226 --f7-messagebar-link-color: #333;
13227 --f7-messagebar-border-color: #d1d1d1;
13228 --f7-messagebar-shadow-image: none;
13229 --f7-messagebar-textarea-border-radius: 0px;
13230 --f7-messagebar-textarea-padding: 5px 8px;
13231 --f7-messagebar-textarea-height: 32px;
13232 --f7-messagebar-textarea-text-color: #333;
13233 --f7-messagebar-textarea-font-size: 16px;
13234 --f7-messagebar-textarea-line-height: 22px;
13235 --f7-messagebar-textarea-border: 1px solid transparent;
13236 --f7-messagebar-sheet-bg-color: #fff;
13237 --f7-messagebar-attachments-border-color: #ddd;
13238 --f7-messagebar-attachment-border-radius: 4px;
13239}
13240.md .theme-dark,
13241.md.theme-dark {
13242 --f7-messagebar-bg-color: var(--f7-bars-bg-color);
13243 --f7-messagebar-border-color: #282829;
13244 --f7-messagebar-link-color: rgba(255, 255, 255, 0.87);
13245 --f7-messagebar-textarea-text-color: rgba(255, 255, 255, 0.87);
13246 --f7-messagebar-attachments-border-color: rgba(255, 255, 255, 0.2);
13247}
13248.messagebar {
13249 transform: translate3d(0, 0, 0);
13250 background: var(--f7-messagebar-bg-color);
13251 height: auto;
13252 min-height: var(--f7-messagebar-height);
13253 font-size: var(--f7-messagebar-font-size);
13254 padding-bottom: var(--f7-safe-area-bottom);
13255 bottom: 0;
13256}
13257.messagebar:before {
13258 content: '';
13259 position: absolute;
13260 background-color: var(--f7-messagebar-border-color);
13261 display: block;
13262 z-index: 15;
13263 top: 0;
13264 right: auto;
13265 bottom: auto;
13266 left: 0;
13267 height: 1px;
13268 width: 100%;
13269 transform-origin: 50% 0%;
13270 transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
13271}
13272.messagebar:after {
13273 content: '';
13274 position: absolute;
13275 right: 0;
13276 width: 100%;
13277 bottom: 100%;
13278 height: 8px;
13279 top: auto;
13280 pointer-events: none;
13281 background: var(--f7-messagebar-shadow-image);
13282}
13283.messagebar.no-hairline:before,
13284.messagebar.no-border:before {
13285 display: none !important;
13286}
13287.messagebar.no-shadow:after,
13288.messagebar.toolbar-hidden:after {
13289 display: none !important;
13290}
13291.messagebar .toolbar-inner {
13292 top: auto;
13293 position: relative;
13294 height: auto;
13295 bottom: auto;
13296 flex-direction: row-reverse;
13297}
13298.messagebar.messagebar-sheet-visible > .toolbar-inner {
13299 bottom: 0;
13300}
13301.messagebar .messagebar-area {
13302 width: 100%;
13303 flex-shrink: 1;
13304 overflow: hidden;
13305 position: relative;
13306}
13307.messagebar textarea {
13308 width: 100%;
13309 flex-shrink: 1;
13310 background-color: var(--f7-messagebar-textarea-bg-color);
13311 border-radius: var(--f7-messagebar-textarea-border-radius);
13312 padding: var(--f7-messagebar-textarea-padding);
13313 height: var(--f7-messagebar-textarea-height);
13314 color: var(--f7-messagebar-textarea-text-color);
13315 font-size: var(--f7-messagebar-textarea-font-size);
13316 line-height: var(--f7-messagebar-textarea-line-height);
13317 border: var(--f7-messagebar-textarea-border);
13318}
13319.messagebar a.link {
13320 align-self: flex-end;
13321 flex-shrink: 0;
13322 color: var(--f7-messagebar-link-color, var(--f7-theme-color));
13323}
13324.messagebar-attachments {
13325 width: 100%;
13326 will-change: scroll-position;
13327 overflow: auto;
13328 -webkit-overflow-scrolling: touch;
13329 font-size: 0;
13330 white-space: nowrap;
13331 box-sizing: border-box;
13332 position: relative;
13333}
13334.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments {
13335 display: none;
13336}
13337.messagebar-attachment {
13338 background-size: cover;
13339 background-position: center;
13340 background-repeat: no-repeat;
13341 display: inline-block;
13342 vertical-align: middle;
13343 white-space: normal;
13344 height: var(--f7-messagebar-attachment-height);
13345 position: relative;
13346 border-radius: var(--f7-messagebar-attachment-border-radius);
13347}
13348@media (orientation: landscape) {
13349 .messagebar-attachment {
13350 height: var(--f7-messagebar-attachment-landscape-height);
13351 }
13352}
13353.messagebar-attachment img {
13354 display: block;
13355 width: auto;
13356 height: 100%;
13357 border-radius: var(--f7-messagebar-attachment-border-radius);
13358}
13359.messagebar-attachment + .messagebar-attachment {
13360 margin-right: 8px;
13361}
13362.messagebar-sheet {
13363 will-change: scroll-position;
13364 overflow: auto;
13365 -webkit-overflow-scrolling: touch;
13366 display: flex;
13367 flex-wrap: wrap;
13368 flex-direction: column;
13369 align-content: flex-start;
13370 height: var(--f7-messagebar-sheet-height);
13371 background-color: var(--f7-messagebar-sheet-bg-color);
13372 padding-left: var(--f7-safe-area-left);
13373 padding-right: var(--f7-safe-area-right);
13374}
13375@media (orientation: landscape) {
13376 .messagebar-sheet {
13377 height: var(--f7-messagebar-sheet-landscape-height);
13378 }
13379}
13380.messagebar-sheet-image,
13381.messagebar-sheet-item {
13382 box-sizing: border-box;
13383 flex-shrink: 0;
13384 margin-top: 1px;
13385 position: relative;
13386 overflow: hidden;
13387 height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
13388 width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
13389 margin-right: 1px;
13390}
13391@media (orientation: landscape) {
13392 .messagebar-sheet-image,
13393 .messagebar-sheet-item {
13394 width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
13395 height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
13396 }
13397}
13398.messagebar-sheet-image .icon-checkbox,
13399.messagebar-sheet-item .icon-checkbox,
13400.messagebar-sheet-image .icon-radio,
13401.messagebar-sheet-item .icon-radio {
13402 position: absolute;
13403 right: 8px;
13404 bottom: 8px;
13405}
13406.messagebar-sheet-image {
13407 background-size: cover;
13408 background-position: center;
13409 background-repeat: no-repeat;
13410}
13411.messagebar-attachment-delete {
13412 display: block;
13413 position: absolute;
13414 border-radius: 50%;
13415 box-sizing: border-box;
13416 cursor: pointer;
13417 box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
13418}
13419.messagebar-attachment-delete:after,
13420.messagebar-attachment-delete:before {
13421 position: absolute;
13422 content: '';
13423 left: 50%;
13424 top: 50%;
13425}
13426.messagebar-attachment-delete:after {
13427 transform: rotate(45deg);
13428}
13429.messagebar-attachment-delete:before {
13430 transform: rotate(-45deg);
13431}
13432.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet {
13433 display: none;
13434}
13435.messagebar ~ .page-content,
13436.messagebar ~ * .page-content {
13437 padding-bottom: calc(var(--f7-messagebar-height) + var(--f7-safe-area-bottom));
13438}
13439.ios .messagebar a.link.icon-only:first-child {
13440 margin-left: -8px;
13441}
13442.ios .messagebar a.link.icon-only:last-child {
13443 margin-right: -8px;
13444}
13445.ios .messagebar a.link:not(.icon-only) + .messagebar-area {
13446 margin-left: 8px;
13447}
13448.ios .messagebar .messagebar-area + a.link:not(.icon-only) {
13449 margin-left: 8px;
13450}
13451.ios .messagebar-area {
13452 margin-top: 5px;
13453 margin-bottom: 5px;
13454}
13455.ios .messagebar-attachments {
13456 padding: 5px;
13457 border-radius: var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;
13458 border: 1px solid var(--f7-messagebar-attachments-border-color);
13459 border-bottom: none;
13460}
13461.ios .messagebar-attachments-visible .messagebar-attachments + textarea {
13462 border-radius: 0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);
13463}
13464.ios .messagebar-attachment {
13465 font-size: 14px;
13466}
13467.ios .messagebar-attachment-delete {
13468 right: 5px;
13469 top: 5px;
13470 width: 20px;
13471 height: 20px;
13472 background: #7d7e80;
13473 border: 2px solid #fff;
13474}
13475.ios .messagebar-attachment-delete:after,
13476.ios .messagebar-attachment-delete:before {
13477 width: 10px;
13478 height: 2px;
13479 background: #fff;
13480 margin-left: -5px;
13481 margin-top: -1px;
13482}
13483.md .messagebar-attachments {
13484 padding: 8px;
13485 border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
13486}
13487.md .messagebar-area {
13488 margin-top: 8px;
13489 margin-bottom: 8px;
13490}
13491.md .messagebar-sheet-image .icon-checkbox,
13492.md .messagebar-sheet-item .icon-checkbox {
13493 border-color: #fff;
13494 background: rgba(255, 255, 255, 0.25);
13495 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
13496}
13497.md .messagebar-attachment-delete {
13498 right: 8px;
13499 top: 8px;
13500 width: 24px;
13501 height: 24px;
13502 background-color: var(--f7-theme-color);
13503 border-radius: 4px;
13504}
13505.md .messagebar-attachment-delete:after,
13506.md .messagebar-attachment-delete:before {
13507 width: 14px;
13508 height: 2px;
13509 background: #fff;
13510 margin-left: -7px;
13511 margin-top: -1px;
13512}
13513/* === Swiper === */
13514.swiper-container {
13515 margin: 0 auto;
13516 position: relative;
13517 overflow: hidden;
13518 list-style: none;
13519 padding: 0;
13520 /* Fix of Webkit flickering */
13521 z-index: 1;
13522}
13523.swiper-container-no-flexbox .swiper-slide {
13524 float: left;
13525}
13526.swiper-container-vertical > .swiper-wrapper {
13527 flex-direction: column;
13528}
13529.swiper-wrapper {
13530 position: relative;
13531 width: 100%;
13532 height: 100%;
13533 z-index: 1;
13534 display: flex;
13535 transition-property: transform;
13536 box-sizing: content-box;
13537}
13538.swiper-container-android .swiper-slide,
13539.swiper-wrapper {
13540 transform: translate3d(0px, 0, 0);
13541}
13542.swiper-container-multirow > .swiper-wrapper {
13543 flex-wrap: wrap;
13544}
13545.swiper-container-free-mode > .swiper-wrapper {
13546 transition-timing-function: ease-out;
13547 margin: 0 auto;
13548}
13549.swiper-slide {
13550 flex-shrink: 0;
13551 width: 100%;
13552 height: 100%;
13553 position: relative;
13554 transition-property: transform;
13555}
13556.swiper-slide-invisible-blank {
13557 visibility: hidden;
13558}
13559/* Auto Height */
13560.swiper-container-autoheight,
13561.swiper-container-autoheight .swiper-slide {
13562 height: auto;
13563}
13564.swiper-container-autoheight .swiper-wrapper {
13565 align-items: flex-start;
13566 transition-property: transform, height;
13567}
13568/* 3D Effects */
13569.swiper-container-3d {
13570 perspective: 1200px;
13571}
13572.swiper-container-3d .swiper-wrapper,
13573.swiper-container-3d .swiper-slide,
13574.swiper-container-3d .swiper-slide-shadow-left,
13575.swiper-container-3d .swiper-slide-shadow-right,
13576.swiper-container-3d .swiper-slide-shadow-top,
13577.swiper-container-3d .swiper-slide-shadow-bottom,
13578.swiper-container-3d .swiper-cube-shadow {
13579 transform-style: preserve-3d;
13580}
13581.swiper-container-3d .swiper-slide-shadow-left,
13582.swiper-container-3d .swiper-slide-shadow-right,
13583.swiper-container-3d .swiper-slide-shadow-top,
13584.swiper-container-3d .swiper-slide-shadow-bottom {
13585 position: absolute;
13586 left: 0;
13587 top: 0;
13588 width: 100%;
13589 height: 100%;
13590 pointer-events: none;
13591 z-index: 10;
13592}
13593.swiper-container-3d .swiper-slide-shadow-left {
13594 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13595}
13596.swiper-container-3d .swiper-slide-shadow-right {
13597 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13598}
13599.swiper-container-3d .swiper-slide-shadow-top {
13600 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13601}
13602.swiper-container-3d .swiper-slide-shadow-bottom {
13603 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
13604}
13605/* IE10 Windows Phone 8 Fixes */
13606.swiper-container-wp8-horizontal,
13607.swiper-container-wp8-horizontal > .swiper-wrapper {
13608 touch-action: pan-y;
13609}
13610.swiper-container-wp8-vertical,
13611.swiper-container-wp8-vertical > .swiper-wrapper {
13612 touch-action: pan-x;
13613}
13614/* a11y */
13615.swiper-container .swiper-notification {
13616 position: absolute;
13617 left: 0;
13618 top: 0;
13619 pointer-events: none;
13620 opacity: 0;
13621 z-index: -1000;
13622}
13623.swiper-container-coverflow .swiper-wrapper {
13624 /* Windows 8 IE 10 fix */
13625 -ms-perspective: 1200px;
13626}
13627.swiper-container-cube {
13628 overflow: visible;
13629}
13630.swiper-container-cube .swiper-slide {
13631 pointer-events: none;
13632 -webkit-backface-visibility: hidden;
13633 backface-visibility: hidden;
13634 z-index: 1;
13635 visibility: hidden;
13636 transform-origin: 0 0;
13637 width: 100%;
13638 height: 100%;
13639}
13640.swiper-container-cube .swiper-slide .swiper-slide {
13641 pointer-events: none;
13642}
13643.swiper-container-cube.swiper-container-rtl .swiper-slide {
13644 transform-origin: 100% 0;
13645}
13646.swiper-container-cube .swiper-slide-active,
13647.swiper-container-cube .swiper-slide-active .swiper-slide-active {
13648 pointer-events: auto;
13649}
13650.swiper-container-cube .swiper-slide-active,
13651.swiper-container-cube .swiper-slide-next,
13652.swiper-container-cube .swiper-slide-prev,
13653.swiper-container-cube .swiper-slide-next + .swiper-slide {
13654 pointer-events: auto;
13655 visibility: visible;
13656}
13657.swiper-container-cube .swiper-slide-shadow-top,
13658.swiper-container-cube .swiper-slide-shadow-bottom,
13659.swiper-container-cube .swiper-slide-shadow-left,
13660.swiper-container-cube .swiper-slide-shadow-right {
13661 z-index: 0;
13662 -webkit-backface-visibility: hidden;
13663 backface-visibility: hidden;
13664}
13665.swiper-container-cube .swiper-cube-shadow {
13666 position: absolute;
13667 left: 0;
13668 bottom: 0px;
13669 width: 100%;
13670 height: 100%;
13671 background: #000;
13672 opacity: 0.6;
13673 -webkit-filter: blur(50px);
13674 filter: blur(50px);
13675 z-index: 0;
13676}
13677.swiper-container-fade.swiper-container-free-mode .swiper-slide {
13678 transition-timing-function: ease-out;
13679}
13680.swiper-container-fade .swiper-slide {
13681 pointer-events: none;
13682 transition-property: opacity;
13683}
13684.swiper-container-fade .swiper-slide .swiper-slide {
13685 pointer-events: none;
13686}
13687.swiper-container-fade .swiper-slide-active,
13688.swiper-container-fade .swiper-slide-active .swiper-slide-active {
13689 pointer-events: auto;
13690}
13691.swiper-container-flip {
13692 overflow: visible;
13693}
13694.swiper-container-flip .swiper-slide {
13695 pointer-events: none;
13696 -webkit-backface-visibility: hidden;
13697 backface-visibility: hidden;
13698 z-index: 1;
13699}
13700.swiper-container-flip .swiper-slide .swiper-slide {
13701 pointer-events: none;
13702}
13703.swiper-container-flip .swiper-slide-active,
13704.swiper-container-flip .swiper-slide-active .swiper-slide-active {
13705 pointer-events: auto;
13706}
13707.swiper-container-flip .swiper-slide-shadow-top,
13708.swiper-container-flip .swiper-slide-shadow-bottom,
13709.swiper-container-flip .swiper-slide-shadow-left,
13710.swiper-container-flip .swiper-slide-shadow-right {
13711 z-index: 0;
13712 -webkit-backface-visibility: hidden;
13713 backface-visibility: hidden;
13714}
13715/* Scrollbar */
13716.swiper-scrollbar {
13717 border-radius: 10px;
13718 position: relative;
13719 -ms-touch-action: none;
13720 background: rgba(0, 0, 0, 0.1);
13721}
13722.swiper-container-horizontal > .swiper-scrollbar {
13723 position: absolute;
13724 left: 1%;
13725 bottom: 3px;
13726 z-index: 50;
13727 height: 5px;
13728 width: 98%;
13729}
13730.swiper-container-vertical > .swiper-scrollbar {
13731 position: absolute;
13732 right: 3px;
13733 top: 1%;
13734 z-index: 50;
13735 width: 5px;
13736 height: 98%;
13737}
13738.swiper-scrollbar-drag {
13739 height: 100%;
13740 width: 100%;
13741 position: relative;
13742 background: rgba(0, 0, 0, 0.5);
13743 border-radius: 10px;
13744 left: 0;
13745 top: 0;
13746}
13747.swiper-scrollbar-cursor-drag {
13748 cursor: move;
13749}
13750.swiper-scrollbar-lock {
13751 display: none;
13752}
13753.swiper-zoom-container {
13754 width: 100%;
13755 height: 100%;
13756 display: flex;
13757 justify-content: center;
13758 align-items: center;
13759 text-align: center;
13760}
13761.swiper-zoom-container > img,
13762.swiper-zoom-container > svg,
13763.swiper-zoom-container > canvas {
13764 max-width: 100%;
13765 max-height: 100%;
13766 object-fit: contain;
13767}
13768.swiper-slide-zoomed {
13769 cursor: move;
13770}
13771.swiper-button-prev,
13772.swiper-button-next {
13773 position: absolute;
13774 top: 50%;
13775 width: 27px;
13776 height: 44px;
13777 line-height: 44px;
13778 text-align: center;
13779 margin-top: -22px;
13780 z-index: 10;
13781 cursor: pointer;
13782 color: var(--f7-theme-color);
13783}
13784.swiper-button-prev:after,
13785.swiper-button-next:after {
13786 font-family: 'framework7-core-icons';
13787 font-weight: normal;
13788 font-style: normal;
13789 line-height: 1;
13790 letter-spacing: normal;
13791 text-transform: none;
13792 white-space: nowrap;
13793 word-wrap: normal;
13794 direction: ltr;
13795 -webkit-font-smoothing: antialiased;
13796 text-rendering: optimizeLegibility;
13797 -moz-osx-font-smoothing: grayscale;
13798 -moz-font-feature-settings: "liga";
13799 font-feature-settings: "liga";
13800 text-align: center;
13801 display: block;
13802 width: 100%;
13803 height: 100%;
13804 font-size: 20px;
13805 font-size: 44px;
13806}
13807.swiper-button-prev.swiper-button-disabled,
13808.swiper-button-next.swiper-button-disabled {
13809 opacity: 0.35;
13810 cursor: auto;
13811 pointer-events: none;
13812}
13813.swiper-button-prev,
13814.swiper-container-rtl .swiper-button-next {
13815 left: 10px;
13816 right: auto;
13817}
13818.swiper-button-prev:after,
13819.swiper-container-rtl .swiper-button-next:after {
13820 content: 'swiper_prev';
13821}
13822.swiper-button-next,
13823.swiper-container-rtl .swiper-button-prev {
13824 right: 10px;
13825 left: auto;
13826}
13827.swiper-button-next:after,
13828.swiper-container-rtl .swiper-button-prev:after {
13829 content: 'swiper_next';
13830}
13831.swiper-pagination {
13832 position: absolute;
13833 text-align: center;
13834 transition: 300ms opacity;
13835 transform: translate3d(0, 0, 0);
13836 z-index: 10;
13837}
13838.swiper-pagination.swiper-pagination-hidden {
13839 opacity: 0;
13840}
13841.swiper-pagination-fraction,
13842.swiper-pagination-custom,
13843.swiper-container-horizontal > .swiper-pagination-bullets {
13844 bottom: 10px;
13845 left: 0;
13846 width: 100%;
13847}
13848.swiper-pagination-bullets-dynamic {
13849 overflow: hidden;
13850 font-size: 0;
13851}
13852.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13853 transform: scale(0.33);
13854 position: relative;
13855}
13856.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
13857 transform: scale(1);
13858}
13859.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
13860 transform: scale(0.66);
13861}
13862.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
13863 transform: scale(0.33);
13864}
13865.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
13866 transform: scale(0.66);
13867}
13868.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
13869 transform: scale(0.33);
13870}
13871.swiper-pagination-bullet {
13872 width: 8px;
13873 height: 8px;
13874 display: inline-block;
13875 border-radius: 100%;
13876 background: #000;
13877 opacity: 0.2;
13878}
13879button.swiper-pagination-bullet {
13880 border: none;
13881 margin: 0;
13882 padding: 0;
13883 box-shadow: none;
13884 -webkit-appearance: none;
13885 -moz-appearance: none;
13886 appearance: none;
13887}
13888.swiper-pagination-clickable .swiper-pagination-bullet {
13889 cursor: pointer;
13890}
13891.swiper-pagination-bullet-active {
13892 opacity: 1;
13893 background: var(--f7-theme-color);
13894}
13895.swiper-container-vertical > .swiper-pagination-bullets {
13896 right: 10px;
13897 top: 50%;
13898 transform: translate3d(0px, -50%, 0);
13899}
13900.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
13901 margin: 6px 0;
13902 display: block;
13903}
13904.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
13905 top: 50%;
13906 transform: translateY(-50%);
13907 width: 8px;
13908}
13909.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13910 display: inline-block;
13911 transition: 200ms transform, 200ms top;
13912}
13913.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
13914 margin: 0 4px;
13915}
13916.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
13917 left: 50%;
13918 transform: translateX(-50%);
13919 white-space: nowrap;
13920}
13921.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
13922 transition: 200ms transform, 200ms left;
13923}
13924.swiper-pagination-progressbar {
13925 background: rgba(0, 0, 0, 0.25);
13926 position: absolute;
13927}
13928.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
13929 background: var(--f7-theme-color);
13930 position: absolute;
13931 left: 0;
13932 top: 0;
13933 width: 100%;
13934 height: 100%;
13935 transform: scale(0);
13936 transform-origin: left top;
13937}
13938.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
13939 transform-origin: right top;
13940}
13941.swiper-container-horizontal > .swiper-pagination-progressbar,
13942.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
13943 width: 100%;
13944 height: 4px;
13945 left: 0;
13946 top: 0;
13947}
13948.swiper-container-vertical > .swiper-pagination-progressbar,
13949.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
13950 width: 4px;
13951 height: 100%;
13952 left: 0;
13953 top: 0;
13954}
13955.preloader.swiper-lazy-preloader {
13956 position: absolute;
13957 left: 50%;
13958 top: 50%;
13959 z-index: 10;
13960 width: 32px;
13961 height: 32px;
13962 margin-left: -16px;
13963 margin-top: -16px;
13964}
13965/* === Photo Browser === */
13966:root {
13967 --f7-photobrowser-bg-color: #fff;
13968 --f7-photobrowser-bars-bg-image: none;
13969 /*
13970 --f7-photobrowser-bars-bg-color: rgba(var(--f7-bars-bg-color-rgb), 0.95);
13971 --f7-photobrowser-bars-text-color: var(--f7-bars-text-color);
13972 --f7-photobrowser-bars-link-color: var(--f7-bars-link-color);
13973 */
13974 --f7-photobrowser-caption-font-size: 14px;
13975 --f7-photobrowser-caption-light-text-color: #000;
13976 --f7-photobrowser-caption-light-bg-color: rgba(255, 255, 255, 0.8);
13977 --f7-photobrowser-caption-dark-text-color: #fff;
13978 --f7-photobrowser-caption-dark-bg-color: rgba(0, 0, 0, 0.8);
13979 --f7-photobrowser-exposed-bg-color: #000;
13980 --f7-photobrowser-dark-bg-color: #000;
13981 --f7-photobrowser-dark-bars-bg-color: rgba(27, 27, 27, 0.8);
13982 --f7-photobrowser-dark-bars-text-color: #fff;
13983 --f7-photobrowser-dark-bars-link-color: #fff;
13984}
13985.photo-browser {
13986 position: absolute;
13987 left: 0;
13988 top: 0;
13989 width: 100%;
13990 height: 100%;
13991 z-index: 400;
13992}
13993.photo-browser-standalone.modal-in {
13994 transition-duration: 0ms;
13995 animation: photo-browser-in 400ms;
13996}
13997.photo-browser-standalone.modal-out {
13998 transition-duration: 0ms;
13999 animation: photo-browser-out 400ms;
14000}
14001.photo-browser-standalone.modal-out.swipe-close-to-bottom,
14002.photo-browser-standalone.modal-out.swipe-close-to-top {
14003 animation: none;
14004}
14005.photo-browser-popup.modal-out.swipe-close-to-bottom,
14006.photo-browser-popup.modal-out.swipe-close-to-top {
14007 transition-duration: 300ms;
14008}
14009.photo-browser-popup.modal-out.swipe-close-to-bottom {
14010 transform: translate3d(0, 100%, 0);
14011}
14012.photo-browser-popup.modal-out.swipe-close-to-top {
14013 transform: translate3d(0, -100vh, 0);
14014}
14015.photo-browser-page {
14016 background: none;
14017}
14018.photo-browser-page .toolbar {
14019 transform: none;
14020}
14021.photo-browser-popup {
14022 background: none;
14023}
14024.photo-browser-of {
14025 margin: 0 5px;
14026}
14027.photo-browser-captions {
14028 pointer-events: none;
14029 position: absolute;
14030 left: 0;
14031 width: 100%;
14032 bottom: var(--f7-safe-area-bottom);
14033 z-index: 10;
14034 opacity: 1;
14035 transition: 400ms;
14036}
14037.photo-browser-captions.photo-browser-captions-exposed {
14038 opacity: 0;
14039}
14040.toolbar ~ .photo-browser-captions {
14041 bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
14042 transform: translate3d(0, 0px, 0);
14043}
14044.toolbar ~ .photo-browser-captions.photo-browser-captions-exposed {
14045 transform: translate3d(0, 0px, 0);
14046}
14047.photo-browser-caption {
14048 box-sizing: border-box;
14049 transition: 300ms;
14050 position: absolute;
14051 bottom: 0;
14052 left: 0;
14053 opacity: 0;
14054 padding: 4px 5px;
14055 width: 100%;
14056 text-align: center;
14057 font-size: var(--f7-photobrowser-caption-font-size);
14058}
14059.photo-browser-caption:empty {
14060 display: none;
14061}
14062.photo-browser-caption.photo-browser-caption-active {
14063 opacity: 1;
14064}
14065.photo-browser-captions-light .photo-browser-caption {
14066 color: var(--f7-photobrowser-caption-light-text-color);
14067 background: var(--f7-photobrowser-caption-light-bg-color);
14068}
14069.photo-browser-captions-dark .photo-browser-caption {
14070 color: var(--f7-photobrowser-caption-dark-text-color);
14071 background: var(--f7-photobrowser-caption-dark-bg-color);
14072}
14073.photo-browser-swiper-container {
14074 position: absolute;
14075 left: 0;
14076 top: 0;
14077 width: 100%;
14078 height: 100%;
14079 overflow: hidden;
14080 background: var(--f7-photobrowser-bg-color);
14081 transition: 400ms;
14082 transition-property: background-color;
14083}
14084.photo-browser-prev.swiper-button-disabled,
14085.photo-browser-next.swiper-button-disabled {
14086 opacity: 0.3;
14087 pointer-events: none;
14088}
14089.photo-browser-slide {
14090 width: 100%;
14091 height: 100%;
14092 position: relative;
14093 overflow: hidden;
14094 display: flex;
14095 justify-content: center;
14096 align-items: center;
14097 flex-shrink: 0;
14098 box-sizing: border-box;
14099}
14100.photo-browser-slide.photo-browser-transitioning {
14101 transition: 400ms;
14102 transition-property: transform;
14103}
14104.photo-browser-slide span.swiper-zoom-container {
14105 display: none;
14106}
14107.photo-browser-slide img {
14108 width: auto;
14109 height: auto;
14110 max-width: 100%;
14111 max-height: 100%;
14112 display: none;
14113}
14114.photo-browser-slide.swiper-slide-active span.swiper-zoom-container,
14115.photo-browser-slide.swiper-slide-next span.swiper-zoom-container,
14116.photo-browser-slide.swiper-slide-prev span.swiper-zoom-container {
14117 display: flex;
14118}
14119.photo-browser-slide.swiper-slide-active img,
14120.photo-browser-slide.swiper-slide-next img,
14121.photo-browser-slide.swiper-slide-prev img {
14122 display: inline;
14123}
14124.photo-browser-slide.swiper-slide-active.photo-browser-slide-lazy .preloader,
14125.photo-browser-slide.swiper-slide-next.photo-browser-slide-lazy .preloader,
14126.photo-browser-slide.swiper-slide-prev.photo-browser-slide-lazy .preloader {
14127 display: block;
14128}
14129.photo-browser-slide iframe {
14130 width: 100%;
14131 height: 100%;
14132}
14133.photo-browser-slide .preloader {
14134 display: none;
14135 position: absolute;
14136 width: 42px;
14137 height: 42px;
14138 margin-left: -21px;
14139 margin-top: -21px;
14140 left: 50%;
14141 top: 50%;
14142}
14143.photo-browser-page .navbar,
14144.view.with-photo-browser-page .navbar,
14145.photo-browser-page .toolbar,
14146.view.with-photo-browser-page .toolbar {
14147 background-color: var(--f7-photobrowser-bars-bg-color, rgba(var(--f7-bars-bg-color-rgb), 0.95));
14148 background-image: var(--f7-photobrowser-bars-bg-image);
14149 transition: 400ms;
14150 color: var(--f7-photobrowser-bars-text-color, var(--f7-bars-text-color));
14151}
14152.photo-browser-page .navbar a,
14153.view.with-photo-browser-page .navbar a,
14154.photo-browser-page .toolbar a,
14155.view.with-photo-browser-page .toolbar a {
14156 color: var(--f7-photobrowser-bars-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
14157}
14158.photo-browser-exposed .navbar,
14159.photo-browser-exposed .toolbar {
14160 opacity: 0;
14161 visibility: hidden;
14162 pointer-events: none;
14163}
14164.photo-browser-exposed .toolbar ~ .photo-browser-captions {
14165 transform: translate3d(0, var(--f7-toolbar-height), 0);
14166}
14167.photo-browser-exposed .photo-browser-swiper-container {
14168 background: var(--f7-photobrowser-exposed-bg-color);
14169}
14170.photo-browser-exposed .photo-browser-caption {
14171 color: var(--f7-photobrowser-caption-dark-text-color);
14172 background: var(--f7-photobrowser-caption-dark-bg-color);
14173}
14174.view.with-photo-browser-page-exposed .navbar {
14175 opacity: 0;
14176}
14177.photo-browser-dark .photo-browser-swiper-container,
14178.photo-browser-page-dark .photo-browser-swiper-container,
14179.view.with-photo-browser-page-dark .photo-browser-swiper-container {
14180 background: var(--f7-photobrowser-dark-bg-color);
14181}
14182.photo-browser-dark .navbar,
14183.photo-browser-page-dark .navbar,
14184.view.with-photo-browser-page-dark .navbar,
14185.photo-browser-dark .toolbar,
14186.photo-browser-page-dark .toolbar,
14187.view.with-photo-browser-page-dark .toolbar {
14188 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
14189 --f7-link-highlight-color: var(--f7-link-highlight-white);
14190 background: var(--f7-photobrowser-dark-bars-bg-color);
14191 color: var(--f7-photobrowser-dark-bars-text-color);
14192}
14193.photo-browser-dark .navbar:before,
14194.photo-browser-page-dark .navbar:before,
14195.view.with-photo-browser-page-dark .navbar:before,
14196.photo-browser-dark .toolbar:before,
14197.photo-browser-page-dark .toolbar:before,
14198.view.with-photo-browser-page-dark .toolbar:before {
14199 display: none !important;
14200}
14201.photo-browser-dark .navbar:after,
14202.photo-browser-page-dark .navbar:after,
14203.view.with-photo-browser-page-dark .navbar:after,
14204.photo-browser-dark .toolbar:after,
14205.photo-browser-page-dark .toolbar:after,
14206.view.with-photo-browser-page-dark .toolbar:after {
14207 display: none !important;
14208}
14209.photo-browser-dark .navbar a,
14210.photo-browser-page-dark .navbar a,
14211.view.with-photo-browser-page-dark .navbar a,
14212.photo-browser-dark .toolbar a,
14213.photo-browser-page-dark .toolbar a,
14214.view.with-photo-browser-page-dark .toolbar a {
14215 color: var(--f7-photobrowser-dark-bars-link-color);
14216}
14217@keyframes photo-browser-in {
14218 0% {
14219 transform: translate3d(0, 0, 0) scale(0.5);
14220 opacity: 0;
14221 }
14222 50% {
14223 transform: translate3d(0, 0, 0) scale(1.05);
14224 opacity: 1;
14225 }
14226 100% {
14227 transform: translate3d(0, 0, 0) scale(1);
14228 opacity: 1;
14229 }
14230}
14231@keyframes photo-browser-out {
14232 0% {
14233 transform: translate3d(0, 0, 0) scale(1);
14234 opacity: 1;
14235 }
14236 50% {
14237 transform: translate3d(0, 0, 0) scale(1.05);
14238 opacity: 1;
14239 }
14240 100% {
14241 transform: translate3d(0, 0, 0) scale(0.5);
14242 opacity: 0;
14243 }
14244}
14245/* === Notifications === */
14246:root {
14247 --f7-notification-max-width: 568px;
14248}
14249.ios {
14250 --f7-notification-margin: 8px;
14251 --f7-notification-padding: 10px;
14252 --f7-notification-border-radius: 12px;
14253 --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
14254 --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
14255 --f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
14256 --f7-notification-icon-size: 20px;
14257 --f7-notification-title-color: #000;
14258 --f7-notification-title-font-size: 13px;
14259 --f7-notification-title-text-transform: uppercase;
14260 --f7-notification-title-line-height: 1.4;
14261 --f7-notification-title-font-weight: 400;
14262 --f7-notification-title-letter-spacing: 0.02em;
14263 --f7-notification-title-right-color: #444a51;
14264 --f7-notification-title-right-font-size: 13px;
14265 --f7-notification-subtitle-color: #000;
14266 --f7-notification-subtitle-font-size: 15px;
14267 --f7-notification-subtitle-text-transform: none;
14268 --f7-notification-subtitle-line-height: 1.35;
14269 --f7-notification-subtitle-font-weight: 600;
14270 --f7-notification-text-color: #000;
14271 --f7-notification-text-font-size: 15px;
14272 --f7-notification-text-text-transform: none;
14273 --f7-notification-text-line-height: 1.2;
14274 --f7-notification-text-font-weight: 400;
14275}
14276.md {
14277 --f7-notification-margin: 0px;
14278 --f7-notification-padding: 16px;
14279 --f7-notification-border-radius: 0px;
14280 --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
14281 --f7-notification-bg-color: #fff;
14282 --f7-notification-icon-size: 16px;
14283 --f7-notification-title-color: var(--f7-theme-color);
14284 --f7-notification-title-font-size: 12px;
14285 --f7-notification-title-text-transform: none;
14286 --f7-notification-title-line-height: 1;
14287 --f7-notification-title-font-weight: 400;
14288 --f7-notification-title-right-color: #757575;
14289 --f7-notification-title-right-font-size: 12px;
14290 --f7-notification-subtitle-color: #212121;
14291 --f7-notification-subtitle-font-size: 14px;
14292 --f7-notification-subtitle-text-transform: none;
14293 --f7-notification-subtitle-line-height: 1.35;
14294 --f7-notification-subtitle-font-weight: 400;
14295 --f7-notification-text-color: #757575;
14296 --f7-notification-text-font-size: 14px;
14297 --f7-notification-text-text-transform: none;
14298 --f7-notification-text-line-height: 1.35;
14299 --f7-notification-text-font-weight: 400;
14300}
14301.notification {
14302 position: absolute;
14303 left: var(--f7-notification-margin);
14304 top: var(--f7-notification-margin);
14305 width: calc(100% - var(--f7-notification-margin) * 2);
14306 z-index: 20000;
14307 font-size: 14px;
14308 margin: 0;
14309 border: none;
14310 display: none;
14311 box-sizing: border-box;
14312 transition-property: transform;
14313 direction: ltr;
14314 max-width: var(--f7-notification-max-width);
14315 padding: var(--f7-notification-padding);
14316 border-radius: var(--f7-notification-border-radius);
14317 box-shadow: var(--f7-notification-box-shadow);
14318 background: var(--f7-notification-bg-color);
14319 margin-top: var(--f7-statusbar-height);
14320 --f7-link-highlight-color: var(--f7-link-highlight-black);
14321 --f7-touch-ripple-color: var(--f7-touch-ripple-black);
14322}
14323@media (min-width: 568px) {
14324 .notification {
14325 left: 50%;
14326 width: var(--f7-notification-max-width);
14327 margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
14328 }
14329}
14330.notification-title {
14331 color: var(--f7-notification-title-color, var(--f7-theme-color));
14332 font-size: var(--f7-notification-title-font-size);
14333 text-transform: var(--f7-notification-title-text-transform);
14334 line-height: var(--f7-notification-title-line-height);
14335 font-weight: var(--f7-notification-title-font-weight);
14336 letter-spacing: var(--f7-notification-title-letter-spacing);
14337}
14338.notification-subtitle {
14339 color: var(--f7-notification-subtitle-color);
14340 font-size: var(--f7-notification-subtitle-font-size);
14341 text-transform: var(--f7-notification-subtitle-text-transform);
14342 line-height: var(--f7-notification-subtitle-line-height);
14343 font-weight: var(--f7-notification-subtitle-font-weight);
14344}
14345.notification-text {
14346 color: var(--f7-notification-text-color);
14347 font-size: var(--f7-notification-text-font-size);
14348 text-transform: var(--f7-notification-text-text-transform);
14349 line-height: var(--f7-notification-text-line-height);
14350 font-weight: var(--f7-notification-text-font-weight);
14351}
14352.notification-title-right-text {
14353 color: var(--f7-notification-title-right-color);
14354 font-size: var(--f7-notification-title-right-font-size);
14355}
14356.notification-icon {
14357 font-size: 0;
14358 line-height: var(--f7-notification-icon-size);
14359}
14360.notification-icon i,
14361.notification-icon {
14362 width: var(--f7-notification-icon-size) !important;
14363 height: var(--f7-notification-icon-size) !important;
14364}
14365.notification-icon i {
14366 font-size: var(--f7-notification-icon-size);
14367}
14368.notification-header {
14369 display: flex;
14370 justify-content: flex-start;
14371 align-items: center;
14372}
14373.notification-close-button {
14374 margin-left: auto;
14375 cursor: pointer;
14376 position: relative;
14377}
14378.notification-close-button:after {
14379 font-family: 'framework7-core-icons';
14380 font-weight: normal;
14381 font-style: normal;
14382 line-height: 1;
14383 letter-spacing: normal;
14384 text-transform: none;
14385 white-space: nowrap;
14386 word-wrap: normal;
14387 direction: ltr;
14388 -webkit-font-smoothing: antialiased;
14389 text-rendering: optimizeLegibility;
14390 -moz-osx-font-smoothing: grayscale;
14391 -moz-font-feature-settings: "liga";
14392 font-feature-settings: "liga";
14393 display: block;
14394 width: 100%;
14395 height: 100%;
14396 font-size: 20px;
14397 position: absolute;
14398 left: 50%;
14399 top: 50%;
14400 text-align: center;
14401}
14402.ios .notification {
14403 transition-duration: 450ms;
14404 transform: translate3d(0%, -200%, 0);
14405}
14406@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
14407 .ios .notification {
14408 background: var(--f7-notification-translucent-bg-color-ios);
14409 -webkit-backdrop-filter: blur(10px);
14410 backdrop-filter: blur(10px);
14411 }
14412}
14413.ios .notification.modal-in {
14414 transform: translate3d(0%, 0%, 0);
14415 opacity: 1;
14416}
14417.ios .notification.modal-out {
14418 transform: translate3d(0%, -200%, 0);
14419}
14420.ios .notification-icon {
14421 margin-right: 8px;
14422}
14423.ios .notification-header + .notification-content {
14424 margin-top: 10px;
14425}
14426.ios .notification-title-right-text {
14427 margin-right: 6px;
14428 margin-left: auto;
14429}
14430.ios .notification-title-right-text + .notification-close-button {
14431 margin-left: 10px;
14432}
14433.ios .notification-close-button {
14434 font-size: 14px;
14435 width: 20px;
14436 height: 20px;
14437 opacity: 0.3;
14438 transition-duration: 300ms;
14439}
14440.ios .notification-close-button.active-state {
14441 transition-duration: 0ms;
14442 opacity: 0.1;
14443}
14444.ios .notification-close-button:after {
14445 color: #000;
14446 content: 'notification_close_ios';
14447 font-size: 0.65em;
14448 line-height: 44px;
14449 width: 44px;
14450 height: 44px;
14451 margin-left: -22px;
14452 margin-top: -22px;
14453}
14454.md .notification {
14455 transform: translate3d(0, -150%, 0);
14456}
14457.md .notification.modal-in {
14458 transition-duration: 0ms;
14459 animation: notification-md-in 400ms ease-out;
14460 transform: translate3d(0, 0%, 0);
14461}
14462.md .notification.modal-in.notification-transitioning {
14463 transition-duration: 200ms;
14464}
14465.md .notification.modal-out {
14466 animation: none;
14467 transition-duration: 200ms;
14468 transition-timing-function: ease-in;
14469 transform: translate3d(0, -150%, 0);
14470}
14471.md .notification-icon {
14472 margin-right: 8px;
14473}
14474.md .notification-subtitle + .notification-text {
14475 margin-top: 2px;
14476}
14477.md .notification-header + .notification-content {
14478 margin-top: 6px;
14479}
14480.md .notification-title-right-text {
14481 margin-left: 4px;
14482}
14483.md .notification-title-right-text:before {
14484 content: '';
14485 width: 3px;
14486 height: 3px;
14487 border-radius: 50%;
14488 display: inline-block;
14489 vertical-align: middle;
14490 margin-right: 4px;
14491 background: var(--f7-notification-title-right-color);
14492}
14493.md .notification-close-button {
14494 width: 16px;
14495 height: 16px;
14496 transition-duration: 300ms;
14497}
14498.md .notification-close-button:before {
14499 content: '';
14500 width: 152%;
14501 height: 152%;
14502 position: absolute;
14503 left: -26%;
14504 top: -26%;
14505 background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
14506 background-repeat: no-repeat;
14507 background-position: center;
14508 background-size: 100% 100%;
14509 opacity: 0;
14510 pointer-events: none;
14511 transition-duration: 600ms;
14512}
14513.md .notification-close-button.active-state:before {
14514 opacity: 1;
14515 transition-duration: 150ms;
14516}
14517.md .notification-close-button:before,
14518.md .notification-close-button:after {
14519 width: 48px;
14520 height: 48px;
14521 left: 50%;
14522 top: 50%;
14523 margin-left: -24px;
14524 margin-top: -24px;
14525}
14526.md .notification-close-button:after {
14527 color: #737373;
14528 content: 'delete_md';
14529 line-height: 48px;
14530 font-size: 14px;
14531}
14532@keyframes notification-md-in {
14533 0% {
14534 transform: translate3d(0, -150%, 0);
14535 }
14536 50% {
14537 transform: translate3d(0, 10%, 0);
14538 }
14539 100% {
14540 transform: translate3d(0, 0%, 0);
14541 }
14542}
14543/* === Autocomplete === */
14544:root {
14545 --f7-autocomplete-dropdown-bg-color: #fff;
14546 --f7-autocomplete-dropdown-placeholder-color: #a9a9a9;
14547 --f7-autocomplete-dropdown-preloader-size: 20px;
14548}
14549.ios {
14550 --f7-autocomplete-dropdown-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
14551 --f7-autocomplete-dropdown-text-color: #000;
14552 --f7-autocomplete-dropdown-text-matching-color: #000;
14553 --f7-autocomplete-dropdown-text-matching-font-weight: 600;
14554}
14555.ios .theme-dark,
14556.ios.theme-dark {
14557 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
14558 --f7-autocomplete-dropdown-text-color: #fff;
14559 --f7-autocomplete-dropdown-text-matching-color: #fff;
14560}
14561.md {
14562 --f7-autocomplete-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
14563 --f7-autocomplete-dropdown-text-color: rgba(0, 0, 0, 0.54);
14564 --f7-autocomplete-dropdown-text-matching-color: #212121;
14565 --f7-autocomplete-dropdown-text-matching-font-weight: 400;
14566}
14567.md .theme-dark,
14568.md.theme-dark {
14569 --f7-autocomplete-dropdown-bg-color: #1c1c1d;
14570 --f7-autocomplete-dropdown-text-color: rgba(255, 255, 255, 0.54);
14571 --f7-autocomplete-dropdown-text-matching-color: rgba(255, 255, 255, 0.87);
14572}
14573.autocomplete-page .autocomplete-found {
14574 display: block;
14575}
14576.autocomplete-page .autocomplete-not-found {
14577 display: none;
14578}
14579.autocomplete-page .autocomplete-values {
14580 display: block;
14581}
14582.autocomplete-page .list ul:empty {
14583 display: none;
14584}
14585.autocomplete-preloader:not(.autocomplete-preloader-visible) {
14586 visibility: hidden;
14587}
14588.autocomplete-preloader:not(.autocomplete-preloader-visible),
14589.autocomplete-preloader:not(.autocomplete-preloader-visible) * {
14590 animation: none;
14591}
14592.autocomplete-dropdown {
14593 background: var(--f7-autocomplete-dropdown-bg-color);
14594 box-shadow: var(--f7-autocomplete-dropdown-box-shadow);
14595 box-sizing: border-box;
14596 position: absolute;
14597 z-index: 500;
14598 width: 100%;
14599 right: 0;
14600}
14601.autocomplete-dropdown .autocomplete-dropdown-inner {
14602 position: relative;
14603 will-change: scroll-position;
14604 overflow: auto;
14605 -webkit-overflow-scrolling: touch;
14606 height: 100%;
14607 z-index: 1;
14608}
14609.autocomplete-dropdown .autocomplete-preloader {
14610 display: none;
14611 position: absolute;
14612 bottom: 100%;
14613 width: var(--f7-autocomplete-dropdown-preloader-size);
14614 height: var(--f7-autocomplete-dropdown-preloader-size);
14615}
14616.autocomplete-dropdown .autocomplete-preloader-visible {
14617 display: block;
14618}
14619.autocomplete-dropdown .autocomplete-dropdown-placeholder {
14620 color: var(--f7-autocomplete-dropdown-placeholder-color);
14621}
14622.autocomplete-dropdown .list {
14623 margin: 0;
14624 color: var(--f7-autocomplete-dropdown-text-color);
14625}
14626.autocomplete-dropdown .list b {
14627 color: var(--f7-autocomplete-dropdown-text-matching-color);
14628 font-weight: var(--f7-autocomplete-dropdown-text-matching-font-weight);
14629}
14630.autocomplete-dropdown .list ul {
14631 background: none !important;
14632}
14633.autocomplete-dropdown .list ul:before {
14634 display: none !important;
14635}
14636.autocomplete-dropdown .list ul:after {
14637 display: none !important;
14638}
14639.searchbar-input-wrap .autocomplete-dropdown {
14640 background-color: var(--f7-searchbar-input-bg-color, var(--f7-searchbar-bg-color));
14641 border-radius: var(--f7-searchbar-input-border-radius);
14642}
14643.searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-placeholder {
14644 color: var(--f7-searchbar-placeholder-color);
14645}
14646.searchbar-input-wrap .autocomplete-dropdown li:last-child {
14647 border-radius: 0 0 var(--f7-searchbar-input-border-radius) var(--f7-searchbar-input-border-radius);
14648 position: relative;
14649 overflow: hidden;
14650}
14651.searchbar-input-wrap .autocomplete-dropdown .item-content {
14652 padding-right: var(--f7-searchbar-input-padding-left);
14653}
14654.list .item-content-dropdown-expanded .item-title.item-label {
14655 width: 0;
14656 flex-shrink: 10;
14657 overflow: hidden;
14658}
14659.list .item-content-dropdown-expanded .item-title.item-label + .item-input-wrap {
14660 margin-right: 0;
14661}
14662.list .item-content-dropdown-expanded .item-input-wrap {
14663 width: 100%;
14664}
14665.ios .autocomplete-dropdown .autocomplete-preloader {
14666 left: 15px;
14667 margin-bottom: 12px;
14668}
14669.ios .searchbar-input-wrap .autocomplete-dropdown {
14670 margin-top: calc(-1 * var(--f7-searchbar-input-height));
14671 top: 100%;
14672 z-index: 20;
14673}
14674.ios .searchbar-input-wrap .autocomplete-dropdown .autocomplete-dropdown-inner {
14675 padding-top: var(--f7-searchbar-input-height);
14676}
14677.md .autocomplete-page .navbar .autocomplete-preloader {
14678 margin-left: 8px;
14679}
14680.md .autocomplete-dropdown .autocomplete-preloader {
14681 left: 16px;
14682 margin-bottom: 8px;
14683}
14684.md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-gap,
14685.md .autocomplete-dropdown .autocomplete-preloader .preloader-inner-half-circle {
14686 border-width: 3px;
14687}
14688/* === Tooltip === */
14689:root {
14690 --f7-tooltip-bg-color: rgba(0, 0, 0, 0.87);
14691 --f7-tooltip-text-color: #fff;
14692 --f7-tooltip-border-radius: 4px;
14693 --f7-tooltip-padding: 8px 16px;
14694 --f7-tooltip-font-size: 14px;
14695 --f7-tooltip-font-weight: 500;
14696 --f7-tooltip-desktop-padding: 6px 8px;
14697 --f7-tooltip-desktop-font-size: 12px;
14698}
14699.tooltip {
14700 position: absolute;
14701 z-index: 20000;
14702 background: var(--f7-tooltip-bg-color);
14703 border-radius: var(--f7-tooltip-border-radius);
14704 padding: var(--f7-tooltip-padding);
14705 color: var(--f7-tooltip-text-color);
14706 font-size: var(--f7-tooltip-font-size);
14707 font-weight: var(--f7-tooltip-font-weight);
14708 box-sizing: border-box;
14709 line-height: 1.2;
14710 opacity: 0;
14711 transform: scale(0.9);
14712 transition-duration: 150ms;
14713 transition-property: opacity, transform;
14714 z-index: 99000;
14715}
14716.tooltip.tooltip-in {
14717 transform: scale(1);
14718 opacity: 1;
14719}
14720.tooltip.tooltip-out {
14721 opacity: 0;
14722 transform: scale(1);
14723}
14724.device-desktop .tooltip {
14725 font-size: var(--f7-tooltip-desktop-font-size);
14726 padding: var(--f7-tooltip-desktop-padding);
14727}
14728/* === Gauge === */
14729.gauge {
14730 position: relative;
14731 text-align: center;
14732 margin-left: auto;
14733 margin-right: auto;
14734 display: inline-block;
14735}
14736.gauge-svg,
14737.gauge svg {
14738 max-width: 100%;
14739 height: auto;
14740}
14741.gauge-svg circle,
14742.gauge svg circle,
14743.gauge-svg path,
14744.gauge svg path {
14745 transition-duration: 400ms;
14746}
14747/* === Skeleton === */
14748:root {
14749 --f7-skeleton-color: #ccc;
14750}
14751.theme-dark {
14752 --f7-skeleton-color: #515151;
14753}
14754.skeleton-text {
14755 font-family: 'framework7-skeleton' !important;
14756}
14757.skeleton-text,
14758.skeleton-text * {
14759 color: var(--f7-skeleton-color) !important;
14760 font-weight: normal !important;
14761 font-style: normal !important;
14762 letter-spacing: -0.015em !important;
14763}
14764.skeleton-block {
14765 height: 1em;
14766 background: var(--f7-skeleton-color) !important;
14767 width: 100%;
14768}
14769.skeleton-effect-fade {
14770 animation: skeleton-effect-fade 1s infinite;
14771}
14772.skeleton-effect-blink {
14773 -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
14774 mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
14775 -webkit-mask-size: 200% 100%;
14776 mask-size: 200% 100%;
14777 -webkit-mask-repeat: repeat;
14778 mask-repeat: repeat;
14779 -webkit-mask-position: 50% top;
14780 mask-position: 50% top;
14781 animation: skeleton-effect-blink 1s infinite;
14782}
14783.skeleton-effect-pulse {
14784 animation: skeleton-effect-pulse 1s infinite;
14785}
14786@keyframes skeleton-effect-fade {
14787 0% {
14788 opacity: 1;
14789 }
14790 50% {
14791 opacity: 0.2;
14792 }
14793 100% {
14794 opacity: 1;
14795 }
14796}
14797@keyframes skeleton-effect-blink {
14798 0% {
14799 -webkit-mask-position: 50% top;
14800 mask-position: 50% top;
14801 }
14802 100% {
14803 -webkit-mask-position: -150% top;
14804 mask-position: -150% top;
14805 }
14806}
14807@keyframes skeleton-effect-pulse {
14808 0% {
14809 transform: scale(1);
14810 }
14811 40% {
14812 transform: scale(1);
14813 }
14814 50% {
14815 transform: scale(0.975);
14816 }
14817 100% {
14818 transform: scale(1);
14819 }
14820}
14821/* === Menu === */
14822:root {
14823 --f7-menu-text-color: #fff;
14824 --f7-menu-font-size: 16px;
14825 --f7-menu-font-weight: 500;
14826 --f7-menu-line-height: 1.2;
14827 --f7-menu-bg-color: rgba(0, 0, 0, 0.9);
14828 --f7-menu-item-pressed-bg-color: rgba(20, 20, 20, 0.9);
14829 --f7-menu-item-padding-horizontal: 12px;
14830 --f7-menu-item-spacing: 6px;
14831 --f7-menu-item-height: 40px;
14832 --f7-menu-item-dropdown-icon-color: rgba(255, 255, 255, 0.4);
14833 --f7-menu-item-border-radius: 8px;
14834 /*
14835 --f7-menu-dropdown-pressed-bg-color: var(--f7-theme-color);
14836 */
14837 --f7-menu-dropdown-item-height: 28px;
14838 --f7-menu-dropdown-divider-color: rgba(255, 255, 255, 0.2);
14839 --f7-menu-dropdown-padding-vertical: 6px;
14840 /*
14841 --f7-menu-dropdown-border-radius: var(--f7-menu-item-border-radius);
14842 */
14843}
14844.menu {
14845 z-index: 1000;
14846 position: relative;
14847 --f7-touch-ripple-color: var(--f7-touch-ripple-white);
14848}
14849.menu-inner {
14850 display: flex;
14851 justify-content: flex-start;
14852 align-items: flex-start;
14853 padding-left: var(--f7-menu-item-spacing);
14854 padding-right: var(--f7-menu-item-spacing);
14855}
14856.menu-inner:after {
14857 content: '';
14858 width: var(--f7-menu-item-spacing);
14859 height: 100%;
14860 flex-shrink: 0;
14861}
14862.menu-item {
14863 height: var(--f7-menu-item-height);
14864 min-width: var(--f7-menu-item-height);
14865 flex-shrink: 0;
14866 background: var(--f7-menu-bg-color);
14867 color: var(--f7-menu-text-color);
14868 border-radius: var(--f7-menu-item-border-radius);
14869 position: relative;
14870 box-sizing: border-box;
14871 font-size: var(--f7-menu-font-size);
14872 font-weight: var(--f7-menu-font-weight);
14873 cursor: pointer;
14874 margin-right: var(--f7-menu-item-spacing);
14875}
14876.menu-item:first-child {
14877 margin-right: 0;
14878}
14879.menu-item.active-state:not(.menu-item-dropdown-opened) {
14880 background-color: rgba(0, 0, 0, 0.7);
14881}
14882.menu-item.icon-only {
14883 padding-left: 0;
14884 padding-right: 0;
14885}
14886.menu-item-content {
14887 display: flex;
14888 justify-content: center;
14889 align-items: center;
14890 padding: 0 var(--f7-menu-item-padding-horizontal);
14891 height: 100%;
14892 box-sizing: border-box;
14893 width: 100%;
14894 overflow: hidden;
14895 border-radius: var(--f7-menu-item-border-radius);
14896 position: relative;
14897}
14898.menu-item-content.icon-only,
14899.icon-only .menu-item-content {
14900 padding-left: 0;
14901 padding-right: 0;
14902}
14903.menu-item-dropdown .menu-item-content:after {
14904 content: '';
14905 position: absolute;
14906 width: 20px;
14907 height: 2px;
14908 left: 50%;
14909 transform: translateX(-50%);
14910 bottom: 4px;
14911 background: var(--f7-menu-item-dropdown-icon-color);
14912 border-radius: 4px;
14913}
14914.menu-dropdown {
14915 opacity: 0;
14916 visibility: hidden;
14917 pointer-events: none;
14918 cursor: auto;
14919 height: 10px;
14920 background: var(--f7-menu-bg-color);
14921 position: relative;
14922}
14923.menu-dropdown-content {
14924 position: absolute;
14925 top: 100%;
14926 border-radius: var(--f7-menu-dropdown-border-radius, var(--f7-menu-item-border-radius));
14927 padding-top: var(--f7-menu-dropdown-padding-vertical);
14928 padding-bottom: var(--f7-menu-dropdown-padding-vertical);
14929 box-sizing: border-box;
14930 background: var(--f7-menu-bg-color);
14931 will-change: scroll-position;
14932 overflow: auto;
14933 -webkit-overflow-scrolling: touch;
14934 min-width: calc(100% + 24px);
14935}
14936.menu-dropdown-link,
14937.menu-dropdown-item {
14938 display: flex;
14939 justify-content: space-between;
14940 align-items: center;
14941 padding-left: var(--f7-menu-item-padding-horizontal);
14942 padding-right: var(--f7-menu-item-padding-horizontal);
14943 min-height: var(--f7-menu-dropdown-item-height);
14944 line-height: var(--f7-menu-line-height);
14945 font-size: var(--f7-menu-font-size);
14946 color: var(--f7-menu-text-color);
14947 font-weight: var(--f7-menu-font-weight);
14948 white-space: nowrap;
14949 min-width: 100px;
14950}
14951.menu-dropdown-link i,
14952.menu-dropdown-item i,
14953.menu-dropdown-link i.icon,
14954.menu-dropdown-item i.icon,
14955.menu-dropdown-link i.f7-icons,
14956.menu-dropdown-item i.f7-icons,
14957.menu-dropdown-link i.material-icons,
14958.menu-dropdown-item i.material-icons {
14959 font-size: 20px;
14960}
14961.menu-dropdown-link.active-state {
14962 background: var(--f7-menu-dropdown-pressed-bg-color, var(--f7-theme-color));
14963 color: var(--f7-menu-text-color);
14964}
14965.menu-dropdown-divider {
14966 height: 1px;
14967 margin-top: 2px;
14968 margin-bottom: 2px;
14969 background: var(--f7-menu-dropdown-divider-color);
14970}
14971.menu-item-dropdown-opened {
14972 border-bottom-left-radius: 0px;
14973 border-bottom-right-radius: 0px;
14974}
14975.menu-item-dropdown-opened .menu-item-content:after {
14976 opacity: 0;
14977}
14978.menu-item-dropdown-opened .menu-dropdown {
14979 opacity: 1;
14980 visibility: visible;
14981 pointer-events: auto;
14982}
14983.menu-item-dropdown-left .menu-dropdown:after,
14984.menu-item-dropdown-center .menu-dropdown:after,
14985.menu-dropdown-left:after .menu-dropdown-center:after {
14986 content: '';
14987 position: absolute;
14988 left: 100%;
14989 bottom: 0;
14990 width: 8px;
14991 height: 8px;
14992 background-image: radial-gradient(ellipse at 100% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
14993}
14994.menu-item-dropdown-right .menu-dropdown:before,
14995.menu-item-dropdown-center .menu-dropdown:before,
14996.menu-dropdown-right:before,
14997.menu-dropdown-center:before {
14998 content: '';
14999 position: absolute;
15000 right: 100%;
15001 bottom: 0;
15002 width: 8px;
15003 height: 8px;
15004 background-image: radial-gradient(ellipse at 0% 0%, transparent 0%, transparent 70%, var(--f7-menu-bg-color) 72%);
15005}
15006.menu-item-dropdown-left .menu-dropdown-content,
15007.menu-dropdown-left .menu-dropdown-content {
15008 left: 0;
15009 border-top-left-radius: 0px;
15010}
15011.menu-item-dropdown-right .menu-dropdown-content,
15012.menu-dropdown-right .menu-dropdown-content {
15013 right: 0;
15014 border-top-right-radius: 0px;
15015}
15016.menu-item-dropdown-center .menu-dropdown-content,
15017.menu-dropdown-center .menu-dropdown-content {
15018 left: 50%;
15019 min-width: calc(100% + 24px + 24px);
15020 transform: translateX(-50%);
15021}
15022iframe#viAd {
15023 z-index: 12900 !important;
15024 background: #000 !important;
15025}
15026.vi-overlay {
15027 background: rgba(0, 0, 0, 0.85);
15028 z-index: 13100;
15029 position: absolute;
15030 left: 0%;
15031 top: 0%;
15032 width: 100%;
15033 height: 100%;
15034 border-radius: 3px;
15035 display: flex;
15036 justify-content: center;
15037 flex-direction: column;
15038 align-items: center;
15039 align-content: center;
15040 text-align: center;
15041 -webkit-user-select: none;
15042 -moz-user-select: none;
15043 -ms-user-select: none;
15044 user-select: none;
15045}
15046@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
15047 .vi-overlay {
15048 background: rgba(0, 0, 0, 0.65);
15049 -webkit-backdrop-filter: blur(10px);
15050 backdrop-filter: blur(10px);
15051 }
15052}
15053.vi-overlay .vi-overlay-text {
15054 text-align: center;
15055 color: #fff;
15056 max-width: 80%;
15057}
15058.vi-overlay .vi-overlay-text + .vi-overlay-play-button {
15059 margin-top: 15px;
15060}
15061.vi-overlay .vi-overlay-play-button {
15062 width: 44px;
15063 height: 44px;
15064 border-radius: 50%;
15065 border: 2px solid #fff;
15066 position: relative;
15067}
15068.vi-overlay .vi-overlay-play-button.active-state {
15069 opacity: 0.55;
15070}
15071.vi-overlay .vi-overlay-play-button:before {
15072 content: '';
15073 width: 0;
15074 height: 0;
15075 border-top: 8px solid transparent;
15076 border-bottom: 8px solid transparent;
15077 border-left: 14px solid #fff;
15078 position: absolute;
15079 left: 50%;
15080 top: 50%;
15081 margin-left: 2px;
15082 transform: translate(-50%, -50%);
15083}
15084/* === Elevation === */
15085:root {
15086 --f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
15087 --f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
15088 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
15089 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
15090 --f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
15091 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
15092 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
15093 --f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
15094 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
15095 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
15096 --f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
15097 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
15098 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
15099 --f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
15100 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
15101 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
15102 --f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
15103 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
15104 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
15105 --f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
15106 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
15107 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
15108 --f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
15109 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
15110 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
15111 --f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
15112 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
15113 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
15114 --f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
15115 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
15116 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
15117 --f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
15118 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
15119 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
15120 --f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
15121 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
15122 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
15123 --f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
15124 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
15125 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
15126 --f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
15127 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
15128 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
15129 --f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
15130 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
15131 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
15132 --f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
15133 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
15134 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
15135 --f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
15136 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
15137 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
15138 --f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
15139 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
15140 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
15141 --f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
15142 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
15143 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
15144 --f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
15145 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
15146 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
15147 --f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
15148 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
15149 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
15150 --f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
15151 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
15152 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
15153 --f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
15154 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
15155 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
15156 --f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
15157 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
15158 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
15159}
15160.elevation-0 {
15161 box-shadow: var(--f7-elevation-0) !important;
15162}
15163.elevation-1 {
15164 box-shadow: var(--f7-elevation-1) !important;
15165}
15166.elevation-2 {
15167 box-shadow: var(--f7-elevation-2) !important;
15168}
15169.elevation-3 {
15170 box-shadow: var(--f7-elevation-3) !important;
15171}
15172.elevation-4 {
15173 box-shadow: var(--f7-elevation-4) !important;
15174}
15175.elevation-5 {
15176 box-shadow: var(--f7-elevation-5) !important;
15177}
15178.elevation-6 {
15179 box-shadow: var(--f7-elevation-6) !important;
15180}
15181.elevation-7 {
15182 box-shadow: var(--f7-elevation-7) !important;
15183}
15184.elevation-8 {
15185 box-shadow: var(--f7-elevation-8) !important;
15186}
15187.elevation-9 {
15188 box-shadow: var(--f7-elevation-9) !important;
15189}
15190.elevation-10 {
15191 box-shadow: var(--f7-elevation-10) !important;
15192}
15193.elevation-11 {
15194 box-shadow: var(--f7-elevation-11) !important;
15195}
15196.elevation-12 {
15197 box-shadow: var(--f7-elevation-12) !important;
15198}
15199.elevation-13 {
15200 box-shadow: var(--f7-elevation-13) !important;
15201}
15202.elevation-14 {
15203 box-shadow: var(--f7-elevation-14) !important;
15204}
15205.elevation-15 {
15206 box-shadow: var(--f7-elevation-15) !important;
15207}
15208.elevation-16 {
15209 box-shadow: var(--f7-elevation-16) !important;
15210}
15211.elevation-17 {
15212 box-shadow: var(--f7-elevation-17) !important;
15213}
15214.elevation-18 {
15215 box-shadow: var(--f7-elevation-18) !important;
15216}
15217.elevation-19 {
15218 box-shadow: var(--f7-elevation-19) !important;
15219}
15220.elevation-20 {
15221 box-shadow: var(--f7-elevation-20) !important;
15222}
15223.elevation-21 {
15224 box-shadow: var(--f7-elevation-21) !important;
15225}
15226.elevation-22 {
15227 box-shadow: var(--f7-elevation-22) !important;
15228}
15229.elevation-23 {
15230 box-shadow: var(--f7-elevation-23) !important;
15231}
15232.elevation-24 {
15233 box-shadow: var(--f7-elevation-24) !important;
15234}
15235.device-desktop .elevation-hover-0:hover {
15236 box-shadow: var(--f7-elevation-0) !important;
15237}
15238.device-desktop .elevation-hover-1:hover {
15239 box-shadow: var(--f7-elevation-1) !important;
15240}
15241.device-desktop .elevation-hover-2:hover {
15242 box-shadow: var(--f7-elevation-2) !important;
15243}
15244.device-desktop .elevation-hover-3:hover {
15245 box-shadow: var(--f7-elevation-3) !important;
15246}
15247.device-desktop .elevation-hover-4:hover {
15248 box-shadow: var(--f7-elevation-4) !important;
15249}
15250.device-desktop .elevation-hover-5:hover {
15251 box-shadow: var(--f7-elevation-5) !important;
15252}
15253.device-desktop .elevation-hover-6:hover {
15254 box-shadow: var(--f7-elevation-6) !important;
15255}
15256.device-desktop .elevation-hover-7:hover {
15257 box-shadow: var(--f7-elevation-7) !important;
15258}
15259.device-desktop .elevation-hover-8:hover {
15260 box-shadow: var(--f7-elevation-8) !important;
15261}
15262.device-desktop .elevation-hover-9:hover {
15263 box-shadow: var(--f7-elevation-9) !important;
15264}
15265.device-desktop .elevation-hover-10:hover {
15266 box-shadow: var(--f7-elevation-10) !important;
15267}
15268.device-desktop .elevation-hover-11:hover {
15269 box-shadow: var(--f7-elevation-11) !important;
15270}
15271.device-desktop .elevation-hover-12:hover {
15272 box-shadow: var(--f7-elevation-12) !important;
15273}
15274.device-desktop .elevation-hover-13:hover {
15275 box-shadow: var(--f7-elevation-13) !important;
15276}
15277.device-desktop .elevation-hover-14:hover {
15278 box-shadow: var(--f7-elevation-14) !important;
15279}
15280.device-desktop .elevation-hover-15:hover {
15281 box-shadow: var(--f7-elevation-15) !important;
15282}
15283.device-desktop .elevation-hover-16:hover {
15284 box-shadow: var(--f7-elevation-16) !important;
15285}
15286.device-desktop .elevation-hover-17:hover {
15287 box-shadow: var(--f7-elevation-17) !important;
15288}
15289.device-desktop .elevation-hover-18:hover {
15290 box-shadow: var(--f7-elevation-18) !important;
15291}
15292.device-desktop .elevation-hover-19:hover {
15293 box-shadow: var(--f7-elevation-19) !important;
15294}
15295.device-desktop .elevation-hover-20:hover {
15296 box-shadow: var(--f7-elevation-20) !important;
15297}
15298.device-desktop .elevation-hover-21:hover {
15299 box-shadow: var(--f7-elevation-21) !important;
15300}
15301.device-desktop .elevation-hover-22:hover {
15302 box-shadow: var(--f7-elevation-22) !important;
15303}
15304.device-desktop .elevation-hover-23:hover {
15305 box-shadow: var(--f7-elevation-23) !important;
15306}
15307.device-desktop .elevation-hover-24:hover {
15308 box-shadow: var(--f7-elevation-24) !important;
15309}
15310.active-state.elevation-pressed-0,
15311.device-desktop .active-state.elevation-pressed-0 {
15312 box-shadow: var(--f7-elevation-0) !important;
15313}
15314.active-state.elevation-pressed-1,
15315.device-desktop .active-state.elevation-pressed-1 {
15316 box-shadow: var(--f7-elevation-1) !important;
15317}
15318.active-state.elevation-pressed-2,
15319.device-desktop .active-state.elevation-pressed-2 {
15320 box-shadow: var(--f7-elevation-2) !important;
15321}
15322.active-state.elevation-pressed-3,
15323.device-desktop .active-state.elevation-pressed-3 {
15324 box-shadow: var(--f7-elevation-3) !important;
15325}
15326.active-state.elevation-pressed-4,
15327.device-desktop .active-state.elevation-pressed-4 {
15328 box-shadow: var(--f7-elevation-4) !important;
15329}
15330.active-state.elevation-pressed-5,
15331.device-desktop .active-state.elevation-pressed-5 {
15332 box-shadow: var(--f7-elevation-5) !important;
15333}
15334.active-state.elevation-pressed-6,
15335.device-desktop .active-state.elevation-pressed-6 {
15336 box-shadow: var(--f7-elevation-6) !important;
15337}
15338.active-state.elevation-pressed-7,
15339.device-desktop .active-state.elevation-pressed-7 {
15340 box-shadow: var(--f7-elevation-7) !important;
15341}
15342.active-state.elevation-pressed-8,
15343.device-desktop .active-state.elevation-pressed-8 {
15344 box-shadow: var(--f7-elevation-8) !important;
15345}
15346.active-state.elevation-pressed-9,
15347.device-desktop .active-state.elevation-pressed-9 {
15348 box-shadow: var(--f7-elevation-9) !important;
15349}
15350.active-state.elevation-pressed-10,
15351.device-desktop .active-state.elevation-pressed-10 {
15352 box-shadow: var(--f7-elevation-10) !important;
15353}
15354.active-state.elevation-pressed-11,
15355.device-desktop .active-state.elevation-pressed-11 {
15356 box-shadow: var(--f7-elevation-11) !important;
15357}
15358.active-state.elevation-pressed-12,
15359.device-desktop .active-state.elevation-pressed-12 {
15360 box-shadow: var(--f7-elevation-12) !important;
15361}
15362.active-state.elevation-pressed-13,
15363.device-desktop .active-state.elevation-pressed-13 {
15364 box-shadow: var(--f7-elevation-13) !important;
15365}
15366.active-state.elevation-pressed-14,
15367.device-desktop .active-state.elevation-pressed-14 {
15368 box-shadow: var(--f7-elevation-14) !important;
15369}
15370.active-state.elevation-pressed-15,
15371.device-desktop .active-state.elevation-pressed-15 {
15372 box-shadow: var(--f7-elevation-15) !important;
15373}
15374.active-state.elevation-pressed-16,
15375.device-desktop .active-state.elevation-pressed-16 {
15376 box-shadow: var(--f7-elevation-16) !important;
15377}
15378.active-state.elevation-pressed-17,
15379.device-desktop .active-state.elevation-pressed-17 {
15380 box-shadow: var(--f7-elevation-17) !important;
15381}
15382.active-state.elevation-pressed-18,
15383.device-desktop .active-state.elevation-pressed-18 {
15384 box-shadow: var(--f7-elevation-18) !important;
15385}
15386.active-state.elevation-pressed-19,
15387.device-desktop .active-state.elevation-pressed-19 {
15388 box-shadow: var(--f7-elevation-19) !important;
15389}
15390.active-state.elevation-pressed-20,
15391.device-desktop .active-state.elevation-pressed-20 {
15392 box-shadow: var(--f7-elevation-20) !important;
15393}
15394.active-state.elevation-pressed-21,
15395.device-desktop .active-state.elevation-pressed-21 {
15396 box-shadow: var(--f7-elevation-21) !important;
15397}
15398.active-state.elevation-pressed-22,
15399.device-desktop .active-state.elevation-pressed-22 {
15400 box-shadow: var(--f7-elevation-22) !important;
15401}
15402.active-state.elevation-pressed-23,
15403.device-desktop .active-state.elevation-pressed-23 {
15404 box-shadow: var(--f7-elevation-23) !important;
15405}
15406.active-state.elevation-pressed-24,
15407.device-desktop .active-state.elevation-pressed-24 {
15408 box-shadow: var(--f7-elevation-24) !important;
15409}
15410.elevation-transition-100 {
15411 transition-duration: 100ms;
15412 transition-property: box-shadow;
15413}
15414.elevation-transition,
15415.elevation-transition-200 {
15416 transition-duration: 200ms;
15417 transition-property: box-shadow;
15418}
15419.elevation-transition-300 {
15420 transition-duration: 300ms;
15421 transition-property: box-shadow;
15422}
15423.elevation-transition-400 {
15424 transition-duration: 400ms;
15425 transition-property: box-shadow;
15426}
15427.elevation-transition-500 {
15428 transition-duration: 500ms;
15429 transition-property: box-shadow;
15430}
15431/* === Typography === */
15432.ios {
15433 --f7-typography-padding: 15px;
15434 --f7-typography-margin: 15px;
15435}
15436.md {
15437 --f7-typography-padding: 16px;
15438 --f7-typography-margin: 16px;
15439}
15440.display-flex {
15441 display: flex !important;
15442}
15443.display-block {
15444 display: block !important;
15445}
15446.display-inline-flex {
15447 display: inline-flex !important;
15448}
15449.display-inline-block {
15450 display: inline-block !important;
15451}
15452.display-inline {
15453 display: inline !important;
15454}
15455.display-none {
15456 display: none !important;
15457}
15458.flex-shrink-0 {
15459 flex-shrink: 0 !important;
15460}
15461.flex-shrink-1 {
15462 flex-shrink: 1 !important;
15463}
15464.flex-shrink-2 {
15465 flex-shrink: 2 !important;
15466}
15467.flex-shrink-3 {
15468 flex-shrink: 3 !important;
15469}
15470.flex-shrink-4 {
15471 flex-shrink: 4 !important;
15472}
15473.flex-shrink-5 {
15474 flex-shrink: 5 !important;
15475}
15476.flex-shrink-6 {
15477 flex-shrink: 6 !important;
15478}
15479.flex-shrink-7 {
15480 flex-shrink: 7 !important;
15481}
15482.flex-shrink-8 {
15483 flex-shrink: 8 !important;
15484}
15485.flex-shrink-9 {
15486 flex-shrink: 9 !important;
15487}
15488.flex-shrink-10 {
15489 flex-shrink: 10 !important;
15490}
15491.justify-content-flex-start {
15492 justify-content: flex-start !important;
15493}
15494.justify-content-center {
15495 justify-content: center !important;
15496}
15497.justify-content-flex-end {
15498 justify-content: flex-end !important;
15499}
15500.justify-content-space-between {
15501 justify-content: space-between !important;
15502}
15503.justify-content-space-around {
15504 justify-content: space-around !important;
15505}
15506.justify-content-space-evenly {
15507 justify-content: space-evenly !important;
15508}
15509.justify-content-stretch {
15510 justify-content: stretch !important;
15511}
15512.justify-content-start {
15513 justify-content: start !important;
15514}
15515.justify-content-end {
15516 justify-content: end !important;
15517}
15518.justify-content-left {
15519 justify-content: left !important;
15520}
15521.justify-content-right {
15522 justify-content: right !important;
15523}
15524.align-content-flex-start {
15525 align-content: flex-start !important;
15526}
15527.align-content-flex-end {
15528 align-content: flex-end !important;
15529}
15530.align-content-center {
15531 align-content: center !important;
15532}
15533.align-content-space-between {
15534 align-content: space-between !important;
15535}
15536.align-content-space-around {
15537 align-content: space-around !important;
15538}
15539.align-content-stretch {
15540 align-content: stretch !important;
15541}
15542.align-items-flex-start {
15543 align-items: flex-start !important;
15544}
15545.align-items-flex-end {
15546 align-items: flex-end !important;
15547}
15548.align-items-center {
15549 align-items: center !important;
15550}
15551.align-items-stretch {
15552 align-items: stretch !important;
15553}
15554.align-self-flex-start {
15555 align-self: flex-start !important;
15556}
15557.align-self-flex-end {
15558 align-self: flex-end !important;
15559}
15560.align-self-center {
15561 align-self: center !important;
15562}
15563.align-self-stretch {
15564 align-self: stretch !important;
15565}
15566.text-align-left {
15567 text-align: left !important;
15568}
15569.text-align-center {
15570 text-align: center !important;
15571}
15572.text-align-right {
15573 text-align: right !important;
15574}
15575.text-align-justify {
15576 text-align: justify !important;
15577}
15578.float-left {
15579 float: left !important;
15580}
15581.float-right {
15582 float: right !important;
15583}
15584.float-none {
15585 float: none !important;
15586}
15587.vertical-align-bottom {
15588 vertical-align: bottom !important;
15589}
15590.vertical-align-middle {
15591 vertical-align: middle !important;
15592}
15593.vertical-align-top {
15594 vertical-align: top !important;
15595}
15596.no-padding {
15597 padding: 0 !important;
15598}
15599.no-padding-left {
15600 padding-left: 0 !important;
15601}
15602.no-padding-right {
15603 padding-right: 0 !important;
15604}
15605.no-padding-horizontal {
15606 padding-left: 0 !important;
15607 padding-right: 0 !important;
15608}
15609.no-padding-top {
15610 padding-top: 0 !important;
15611}
15612.no-padding-bottom {
15613 padding-bottom: 0 !important;
15614}
15615.no-padding-vertical {
15616 padding-top: 0 !important;
15617 padding-bottom: 0 !important;
15618}
15619.no-margin {
15620 margin: 0 !important;
15621}
15622.no-margin-left {
15623 margin-left: 0 !important;
15624}
15625.no-margin-right {
15626 margin-right: 0 !important;
15627}
15628.no-margin-horizontal {
15629 margin-left: 0 !important;
15630 margin-right: 0 !important;
15631}
15632.no-margin-top {
15633 margin-top: 0 !important;
15634}
15635.no-margin-bottom {
15636 margin-bottom: 0 !important;
15637}
15638.no-margin-vertical {
15639 margin-top: 0 !important;
15640 margin-bottom: 0 !important;
15641}
15642.width-auto {
15643 width: auto !important;
15644}
15645.width-100 {
15646 width: 100% !important;
15647}
15648.padding {
15649 padding: var(--f7-typography-padding) !important;
15650}
15651.padding-top {
15652 padding-top: var(--f7-typography-padding) !important;
15653}
15654.padding-bottom {
15655 padding-bottom: var(--f7-typography-padding) !important;
15656}
15657.padding-left {
15658 padding-left: var(--f7-typography-padding) !important;
15659}
15660.padding-right {
15661 padding-right: var(--f7-typography-padding) !important;
15662}
15663.padding-vertical {
15664 padding-top: var(--f7-typography-padding) !important;
15665 padding-bottom: var(--f7-typography-padding) !important;
15666}
15667.padding-horizontal {
15668 padding-left: var(--f7-typography-padding) !important;
15669 padding-right: var(--f7-typography-padding) !important;
15670}
15671.margin {
15672 margin: var(--f7-typography-margin) !important;
15673}
15674.margin-top {
15675 margin-top: var(--f7-typography-margin) !important;
15676}
15677.margin-bottom {
15678 margin-bottom: var(--f7-typography-margin) !important;
15679}
15680.margin-left {
15681 margin-left: var(--f7-typography-margin) !important;
15682}
15683.margin-right {
15684 margin-right: var(--f7-typography-margin) !important;
15685}
15686.margin-vertical {
15687 margin-top: var(--f7-typography-margin) !important;
15688 margin-bottom: var(--f7-typography-margin) !important;
15689}
15690.margin-horizontal {
15691 margin-left: var(--f7-typography-margin) !important;
15692 margin-right: var(--f7-typography-margin) !important;
15693}
15694[class*="text-color-"] {
15695 color: var(--f7-theme-color-text-color) !important;
15696}
15697[class*="bg-color-"] {
15698 background-color: var(--f7-theme-color-bg-color) !important;
15699}
15700[class*="border-color-"] {
15701 border-color: var(--f7-theme-color-border-color) !important;
15702}
framework7 JS lib