PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / 1.2.5
Forumax – AI Powered Advanced Community Forum Plugin v1.2.5
2.4.4 2.4.3 2.4.2 2.4.1 2.4.0 trunk 1.0.8 1.1.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 2.0.0 2.1.0 All 29 releases
bbp-core / includes / admin / settings / csf / assets / css / style.css

style.css in Forumax – AI Powered Advanced Community Forum Plugin 1.2.5, at includes/admin/settings/csf/assets/css/style.css

5,182 lines 107.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 *
3 * ---------------------------------------------------------
4 * CODESTAR FRAMEWORK CSS MAP
5 * ---------------------------------------------------------
6 *
7 * 01. Base
8 * 01. 01. Header
9 * 01. 02. Sticky
10 * 01. 03. Header Buttons
11 * 01. 04. Navigation
12 * 01. 05. Wrapper
13 * 01. 06. Content
14 * 01. 07. Section
15 * 01. 08. Footer
16 * 01. 09. Copyright
17 * 01. 10. Show All Settings
18 * 01. 11. Search Input
19 * 01. 12. Metabox
20 * 01. 13. Comment Metabox
21 * 01. 14. Help Tooltip
22 * 02. Themes
23 * 02. 01. Theme Dark
24 * 02. 02. Theme Light
25 * 03. Fields
26 * 03. 01. Field
27 * 03. 02. Field: accordion
28 * 03. 03. Field: background
29 * 03. 04. Field: backup
30 * 03. 05. Field: border, spacing, dimensions
31 * 03. 06. Field: button_set
32 * 03. 07. Field: checkbox, radio
33 * 03. 08. Field: code_editor
34 * 03. 09. Field: color
35 * 03. 10. Field: color_group
36 * 03. 11. Field: fieldset
37 * 03. 12. Field: date
38 * 03. 13. Field: datetime
39 * 03. 14. Field: gallery
40 * 03. 15. Field: group
41 * 03. 16. Field: icon
42 * 03. 17. Field: image_select
43 * 03. 18. Field: link_color
44 * 03. 19. Field: map
45 * 03. 20. Field: media
46 * 03. 21. Field: palette
47 * 03. 22. Field: repeater
48 * 03. 23. Field: select
49 * 03. 24. Field: slider
50 * 03. 25. Field: sortable
51 * 03. 26. Field: sorter
52 * 03. 27. Field: spinner
53 * 03. 28. Field: switcher
54 * 03. 29. Field: tabbed
55 * 03. 30. Field: text
56 * 03. 31. Field: textarea
57 * 03. 32. Field: typography
58 * 03. 33. Field: upload
59 * 03. 34. Field: wp_editor
60 * 03. 35. Field: heading
61 * 03. 36. Field: subheading
62 * 03. 37. Field: submessage
63 * 03. 38. Field: notice
64 * 03. 39. Field: number
65 * 03. 40. Field: link
66 * 03. 41. Field: others
67 * 04. Widget
68 * 05. Customizer
69 * 06. Taxonomy
70 * 07. Profile
71 * 08. Nav Menu
72 * 09. Modal
73 * 09. 01. Shortcode Modal
74 * 09. 02. Gutenberg Modal
75 * 09. 03. Icon Modal
76 * 10. Helper
77 * 11. Welcome Page
78 * 12. Responsive
79 * 13. Others
80 *
81 * ---------------------------------------------------------
82 *
83 */
84 /**
85 * 01. Base
86 */
87 .csf {
88 position: relative;
89 }
90 .csf label {
91 padding: 0;
92 margin: 0;
93 display: inline-block;
94 }
95
96 .csf-ab-icon {
97 top: 2px;
98 }
99
100 #screen-meta-links + .csf-options {
101 margin-top: 40px;
102 }
103
104 .csf-options {
105 margin-top: 20px;
106 margin-right: 20px;
107 }
108
109 /**
110 * 01. 01. Header
111 */
112 .csf-header {
113 position: relative;
114 }
115
116 .csf-header-inner {
117 padding: 25px;
118 transition: box-shadow 0.3s ease;
119 }
120 .csf-header-inner h1 {
121 float: left;
122 font-size: 1.5em;
123 line-height: 26px;
124 font-weight: 400;
125 margin: 0;
126 }
127 .csf-header-inner h1 small {
128 font-size: 11px;
129 font-weight: 500;
130 }
131
132 /**
133 * 01. 02. Sticky
134 */
135 .csf-sticky .csf-header-inner {
136 position: fixed;
137 z-index: 99;
138 top: 32px;
139 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
140 }
141
142 /**
143 * 01. 03. Header Buttons
144 */
145 .csf-buttons {
146 float: right;
147 }
148 .csf-buttons .button {
149 margin: 0 2px;
150 line-height: 26px;
151 }
152 .csf-buttons .button:focus {
153 outline: none !important;
154 box-shadow: none !important;
155 }
156 .csf-buttons .csf-save {
157 min-width: 72px;
158 }
159
160 .csf-header-left {
161 float: left;
162 }
163
164 .csf-header-right {
165 float: right;
166 }
167
168 /**
169 * 01. 04. Navigation
170 */
171 .csf-nav {
172 display: block;
173 position: relative;
174 z-index: 10;
175 float: left;
176 }
177 .csf-nav ul {
178 clear: left;
179 margin: 0;
180 list-style-type: none;
181 }
182 .csf-nav ul li {
183 margin-bottom: 0;
184 }
185 .csf-nav ul li a {
186 font-size: 13px;
187 position: relative;
188 display: block;
189 padding: 14px 12px;
190 text-decoration: none;
191 transition-property: color, background;
192 transition-duration: 0.2s;
193 transition-timing-function: ease;
194 }
195 .csf-nav ul li a:focus {
196 outline: none;
197 box-shadow: none;
198 }
199 .csf-nav ul li .csf-arrow:after {
200 content: "\f054";
201 display: inline-block;
202 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
203 font-weight: 900;
204 font-size: 9px;
205 line-height: 1;
206 position: absolute;
207 right: 10px;
208 top: 50%;
209 margin-top: -4px;
210 }
211 .csf-nav ul li.csf-tab-expanded .csf-arrow:after {
212 transform: rotate(90deg);
213 }
214 .csf-nav ul li.csf-tab-expanded ul {
215 display: block;
216 }
217 .csf-nav ul ul {
218 display: none;
219 position: relative;
220 }
221 .csf-nav ul ul li a {
222 font-size: 12px;
223 padding: 12px 14px 12px 24px;
224 }
225 .csf-nav .csf-tab-icon {
226 width: 20px;
227 margin-right: 5px;
228 font-size: 13px;
229 text-align: center;
230 }
231 .csf-nav .csf-label-error {
232 margin-left: 4px;
233 vertical-align: top;
234 }
235
236 .csf-nav-normal {
237 width: 225px;
238 }
239 .csf-nav-normal + .csf-content {
240 margin-left: 225px;
241 }
242
243 .csf-nav-inline {
244 width: 100%;
245 }
246 .csf-nav-inline ul li {
247 display: inline-block;
248 vertical-align: top;
249 }
250
251 .csf-nav-background {
252 position: absolute;
253 top: 0;
254 left: 0;
255 bottom: 0;
256 z-index: 9;
257 width: 225px;
258 }
259
260 /**
261 * 01. 05. Wrapper
262 */
263 .csf-wrapper {
264 position: relative;
265 }
266
267 /**
268 * 01. 06. Content
269 */
270 .csf-content {
271 position: relative;
272 background-color: #fff;
273 }
274
275 /**
276 * 01. 07. Section
277 */
278 .csf-sections {
279 float: left;
280 width: 100%;
281 }
282
283 .csf-section-title {
284 display: none;
285 padding: 20px 30px;
286 background-color: #f5f5f5;
287 border-top: 1px solid #eee;
288 border-bottom: 1px solid #eee;
289 }
290 .csf-section-title h3 {
291 margin: 0;
292 padding: 0;
293 font-size: 13px;
294 font-weight: bold;
295 text-transform: uppercase;
296 }
297 .csf-section-title .csf-section-icon {
298 margin-right: 5px;
299 }
300
301 /**
302 * 01. 08. Footer
303 */
304 .csf-footer {
305 padding: 20px;
306 font-size: 11px;
307 }
308
309 /**
310 * 01. 09. Copyright
311 */
312 .csf-copyright {
313 float: left;
314 margin-top: 5px;
315 }
316
317 /**
318 * 01. 10. Show All Settings
319 */
320 .csf-search-all .csf-nav-background,
321 .csf-search-all .csf-nav,
322 .csf-show-all .csf-nav-background,
323 .csf-show-all .csf-nav {
324 display: none;
325 }
326 .csf-search-all .csf-content,
327 .csf-show-all .csf-content {
328 margin-left: 0;
329 }
330 .csf-search-all .csf-section-title,
331 .csf-search-all .csf-section,
332 .csf-show-all .csf-section-title,
333 .csf-show-all .csf-section {
334 display: block !important;
335 }
336
337 .csf-search-all .csf-section-title {
338 display: none !important;
339 }
340
341 .csf-expand-all {
342 float: left;
343 padding: 0 8px;
344 margin-right: 4px;
345 z-index: 1;
346 font-size: 13px;
347 line-height: 30px;
348 cursor: pointer;
349 user-select: none;
350 border-radius: 2px;
351 transition: all 0.2s;
352 }
353 .csf-expand-all span {
354 font-size: 11px;
355 vertical-align: middle;
356 }
357
358 /**
359 * 01. 11. Search Input
360 */
361 .csf-search {
362 float: left;
363 }
364 .csf-search input {
365 margin: 0 2px 0 0;
366 border: none;
367 font-size: 12px;
368 line-height: 30px;
369 min-height: 30px;
370 text-align: inherit;
371 padding: 0 10px;
372 border-radius: 2px;
373 box-shadow: none;
374 }
375 .csf-search input:focus {
376 box-shadow: none;
377 }
378
379 .csf-saving .csf-buttons,
380 .csf-saving .csf-content {
381 cursor: default;
382 pointer-events: none;
383 opacity: 0.5;
384 }
385
386 /**
387 * 01. 12. Metabox
388 */
389 .csf-metabox {
390 margin: -6px -12px -12px -12px;
391 }
392 .csf-metabox .csf-field {
393 padding: 20px;
394 }
395 .csf-metabox .csf-section-title {
396 padding: 20px;
397 }
398
399 .block-editor-page .csf-metabox {
400 margin: -6px -14px -14px -14px;
401 }
402
403 .block-editor-editor-skeleton__content .csf-metabox {
404 border-left: 1px solid #e2e4e7;
405 border-right: 1px solid #e2e4e7;
406 }
407
408 .csf-sections-reset {
409 float: left;
410 width: 100%;
411 text-align: right;
412 border-top: 1px solid #eee;
413 }
414 .csf-sections-reset .csf-button-cancel,
415 .csf-sections-reset input {
416 display: none;
417 }
418 .csf-sections-reset label {
419 padding: 10px;
420 }
421 .csf-sections-reset span {
422 -webkit-user-select: none;
423 user-select: none;
424 }
425 .csf-sections-reset input:checked ~ .csf-button-reset {
426 display: none;
427 }
428 .csf-sections-reset input:checked ~ .csf-button-cancel {
429 display: inline-block;
430 }
431
432 #side-sortables .csf-section-title {
433 padding: 12px;
434 }
435 #side-sortables .csf-field {
436 padding: 10px 15px;
437 }
438 #side-sortables .csf-field .csf-title {
439 float: none;
440 width: 100%;
441 margin-bottom: 6px;
442 }
443 #side-sortables .csf-field .csf-fieldset {
444 float: none;
445 width: 100%;
446 }
447 #side-sortables .csf-field-text input {
448 width: 100%;
449 }
450 #side-sortables .csf-notice {
451 padding: 10px 15px;
452 }
453
454 /**
455 * 01. 13. Comment Metabox
456 */
457 .csf-comment-metabox {
458 margin: -6px -12px -12px -12px;
459 }
460 .csf-comment-metabox .csf-field {
461 padding: 20px;
462 }
463 .csf-comment-metabox .csf-section-title {
464 padding: 20px;
465 }
466
467 /**
468 * 01. 14. Help Tooltip
469 */
470 .csf-tooltip {
471 position: absolute;
472 z-index: 5000001;
473 font-size: 12px;
474 line-height: 1.4;
475 text-align: center;
476 text-decoration: none;
477 padding: 6px 12px;
478 max-width: 200px;
479 color: #fff;
480 background-color: #000;
481 background-color: rgba(0, 0, 0, 0.85);
482 border-radius: 4px;
483 }
484
485 /**
486 * 02. Themes
487 */
488 /**
489 * 02. 01. Theme Dark
490 */
491 .csf-theme-dark .csf-header-inner {
492 background-color: #050505;
493 }
494 .csf-theme-dark .csf-header-inner h1 {
495 color: #fff;
496 }
497 .csf-theme-dark .csf-header-inner h1 small {
498 color: #555;
499 }
500 .csf-theme-dark .csf-expand-all {
501 color: #999;
502 background-color: #222;
503 }
504 .csf-theme-dark .csf-expand-all:hover {
505 color: #fff;
506 background-color: #333;
507 }
508 .csf-theme-dark .csf-search input {
509 color: #fff;
510 background-color: #222;
511 }
512 .csf-theme-dark .csf-search:focus {
513 background-color: #444;
514 }
515 .csf-theme-dark .csf-search::-webkit-input-placeholder {
516 color: #666;
517 }
518 .csf-theme-dark .csf-nav ul li a {
519 color: #999;
520 border-color: #2f2f2f;
521 background-color: #222;
522 }
523 .csf-theme-dark .csf-nav ul li a:hover {
524 color: #fff;
525 }
526 .csf-theme-dark .csf-nav ul li .csf-active {
527 color: #fff;
528 background-color: #111;
529 }
530 .csf-theme-dark .csf-nav ul ul li a {
531 border-color: #2f2f2f;
532 background-color: #191919;
533 }
534 .csf-theme-dark .csf-nav ul ul li .csf-active {
535 background-color: #101010;
536 }
537 .csf-theme-dark .csf-nav ul ul:before {
538 background-color: rgba(34, 34, 34, 0.75);
539 }
540 .csf-theme-dark .csf-nav > ul > li:last-child > a {
541 border: none;
542 }
543 .csf-theme-dark .csf-nav-normal ul li a {
544 border-bottom-width: 1px;
545 border-bottom-style: solid;
546 }
547 .csf-theme-dark .csf-nav-normal ul li .csf-active:after {
548 content: " ";
549 position: absolute;
550 right: 0;
551 top: 50%;
552 height: 0;
553 width: 0;
554 pointer-events: none;
555 border: solid transparent;
556 border-right-color: #fff;
557 border-width: 4px;
558 margin-top: -4px;
559 }
560 .csf-theme-dark .csf-nav-inline {
561 background-color: #222;
562 }
563 .csf-theme-dark .csf-nav-inline ul li a {
564 text-align: center;
565 border-right-width: 1px;
566 border-right-style: solid;
567 }
568 .csf-theme-dark .csf-nav-inline ul li .csf-active:after {
569 content: " ";
570 position: absolute;
571 left: 50%;
572 bottom: 0;
573 height: 0;
574 width: 0;
575 pointer-events: none;
576 border: solid transparent;
577 border-bottom-color: #fff;
578 border-width: 4px;
579 margin-left: -4px;
580 }
581 .csf-theme-dark .csf-nav-background {
582 background-color: #222;
583 }
584 .csf-theme-dark .csf-footer {
585 color: #555;
586 background-color: #050505;
587 }
588
589 /**
590 * 02. 02. Theme Light
591 */
592 .csf-theme-light .csf-container {
593 border: 1px solid #ccd0d4;
594 box-shadow: 0 0 15 rgba(0, 0, 0, 0.04);
595 }
596 .csf-theme-light .csf-header-inner {
597 border-bottom: 1px solid #ccd0d4;
598 background-color: #f5f5f5;
599 background: linear-gradient(#fefefe, #f5f5f5);
600 }
601 .csf-theme-light .csf-header-inner h1 small {
602 color: #999;
603 }
604 .csf-theme-light .csf-expand-all {
605 color: #999;
606 background-color: #eee;
607 }
608 .csf-theme-light .csf-expand-all:hover {
609 color: #555;
610 }
611 .csf-theme-light .csf-search input {
612 color: #555;
613 background-color: #eee;
614 }
615 .csf-theme-light .csf-search input::-webkit-input-placeholder {
616 color: #999;
617 }
618 .csf-theme-light .csf-nav ul li a {
619 font-weight: 500;
620 color: #444;
621 background-color: #f5f5f5;
622 }
623 .csf-theme-light .csf-nav ul li a:hover {
624 color: #111;
625 background-color: #fff;
626 }
627 .csf-theme-light .csf-nav ul li .csf-active {
628 color: #111;
629 background-color: #fff;
630 }
631 .csf-theme-light .csf-nav ul ul li a {
632 background-color: #eee;
633 }
634 .csf-theme-light .csf-nav-normal > ul {
635 margin-right: -1px;
636 margin-bottom: -1px;
637 }
638 .csf-theme-light .csf-nav-normal > ul li a {
639 border-bottom: 1px solid #ccd0d4;
640 border-right: 1px solid #ccd0d4;
641 }
642 .csf-theme-light .csf-nav-normal > ul li .csf-active {
643 border-right-color: #fff;
644 }
645 .csf-theme-light .csf-nav-inline {
646 background-color: #f5f5f5;
647 border-bottom: 1px solid #ccd0d4;
648 }
649 .csf-theme-light .csf-nav-inline > ul {
650 margin-bottom: -1px;
651 }
652 .csf-theme-light .csf-nav-inline > ul li a {
653 text-align: center;
654 border-right: 1px solid #ccd0d4;
655 border-bottom: 1px solid #ccd0d4;
656 }
657 .csf-theme-light .csf-nav-inline > ul li .csf-active {
658 border-bottom-color: #fff;
659 }
660 .csf-theme-light .csf-nav-inline > ul ul {
661 display: none !important;
662 }
663 .csf-theme-light .csf-nav-inline .csf-arrow:after {
664 display: none;
665 }
666 .csf-theme-light .csf-nav-background {
667 background-color: #f5f5f5;
668 border-right: 1px solid #ccd0d4;
669 }
670 .csf-theme-light .csf-footer {
671 color: #555;
672 border-top: 1px solid #ccd0d4;
673 background-color: #f5f5f5;
674 background: linear-gradient(#fafafa, #f5f5f5);
675 }
676
677 /**
678 * 03. Fields
679 */
680 .csf-field {
681 position: relative;
682 padding: 30px;
683 }
684 .csf-field + .csf-field {
685 border-top: 1px solid #eee;
686 }
687 .csf-field p:first-child {
688 margin-top: 0;
689 }
690 .csf-field p:last-child {
691 margin-bottom: 0;
692 }
693 .csf-field:after, .csf-field:before {
694 content: " ";
695 display: table;
696 }
697 .csf-field:after {
698 clear: both;
699 }
700 .csf-field h4 {
701 margin-top: 0;
702 }
703 .csf-field .csf-title {
704 position: relative;
705 width: 20%;
706 float: left;
707 }
708 .csf-field .csf-title h4 {
709 margin: 0;
710 color: #23282d;
711 }
712 .csf-field .csf-fieldset {
713 float: right;
714 width: calc(80% - 20px);
715 }
716
717 .csf-pseudo-field {
718 padding: 0 5px 0 0 !important;
719 display: inline-block;
720 }
721 .csf-pseudo-field + .csf-pseudo-field {
722 border: 0;
723 }
724 .csf-pseudo-field pre {
725 display: none;
726 }
727
728 /**
729 * 03. 02. Field: accordion
730 */
731 .csf-field-accordion .csf-accordion-item {
732 position: relative;
733 margin-bottom: 5px;
734 }
735 .csf-field-accordion .csf-accordion-item:last-child {
736 margin-bottom: 0;
737 }
738 .csf-field-accordion .csf-accordion-item h4 {
739 font-size: 1em;
740 }
741 .csf-field-accordion .csf-accordion-title {
742 display: block;
743 cursor: pointer;
744 position: relative;
745 margin: 0;
746 padding: 15px;
747 min-height: 0;
748 font-size: 100%;
749 user-select: none;
750 border: 1px solid #ccd0d4;
751 background-color: #fafafa;
752 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
753 transition: border-color 0.15s;
754 }
755 .csf-field-accordion .csf-accordion-title:active, .csf-field-accordion .csf-accordion-title:hover, .csf-field-accordion .csf-accordion-title:focus {
756 outline: none;
757 border-color: #999;
758 }
759 .csf-field-accordion .csf-accordion-title .csf--icon {
760 width: 20px;
761 text-align: center;
762 margin-right: 2px;
763 }
764 .csf-field-accordion .csf-accordion-icon {
765 width: 16px;
766 text-align: center;
767 }
768 .csf-field-accordion .csf-accordion-content {
769 display: none;
770 padding: 0;
771 border: 1px solid #ccd0d4;
772 border-top: none;
773 background-color: #fff;
774 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
775 }
776 .csf-field-accordion .csf-accordion-content > .csf-field {
777 padding: 15px;
778 }
779 .csf-field-accordion .csf-accordion-open {
780 display: block;
781 }
782
783 /**
784 * 03. 03. Field: background
785 */
786 .csf-field-background .csf-field {
787 border: 0 !important;
788 padding: 0;
789 margin-bottom: 6px;
790 margin-right: 6px;
791 }
792 .csf-field-background .csf--title {
793 color: #777;
794 font-size: 12px;
795 }
796 .csf-field-background .csf--background-colors {
797 display: flex;
798 flex-wrap: wrap;
799 }
800 .csf-field-background .csf--background-attributes {
801 display: flex;
802 flex-wrap: wrap;
803 }
804 .csf-field-background .csf--background-attributes select {
805 min-width: 100%;
806 margin: 0;
807 }
808 .csf-field-background .csf--background-attributes .csf-field {
809 flex: 1;
810 }
811 .csf-field-background .csf--attributes-hidden {
812 display: none;
813 }
814
815 /**
816 * 03. 04. Field: backup
817 */
818 .csf-field-backup textarea {
819 width: 100%;
820 min-height: 200px;
821 margin-bottom: 5px;
822 }
823 .csf-field-backup small {
824 display: inline-block;
825 margin: 5px;
826 }
827 .csf-field-backup hr {
828 margin: 20px 0;
829 border: none;
830 border-bottom: 1px solid #e5e5e5;
831 }
832
833 /**
834 * 03. 05. Field: border, spacing, dimensions
835 */
836 .csf-field-border .csf--inputs,
837 .csf-field-spacing .csf--inputs,
838 .csf-field-dimensions .csf--inputs {
839 float: left;
840 display: flex;
841 flex-wrap: wrap;
842 }
843 .csf-field-border .csf--input,
844 .csf-field-spacing .csf--input,
845 .csf-field-dimensions .csf--input {
846 display: flex;
847 padding-right: 6px;
848 padding-bottom: 4px;
849 box-sizing: border-box;
850 }
851 .csf-field-border .csf--input select,
852 .csf-field-spacing .csf--input select,
853 .csf-field-dimensions .csf--input select {
854 margin: 0;
855 }
856 .csf-field-border .csf--input input,
857 .csf-field-spacing .csf--input input,
858 .csf-field-dimensions .csf--input input {
859 position: relative;
860 z-index: 1;
861 margin: 0;
862 width: 65px;
863 max-width: 100%;
864 text-align: center;
865 }
866 .csf-field-border .csf--color,
867 .csf-field-spacing .csf--color,
868 .csf-field-dimensions .csf--color {
869 float: left;
870 }
871 .csf-field-border .csf--label,
872 .csf-field-spacing .csf--label,
873 .csf-field-dimensions .csf--label {
874 display: flex;
875 flex-direction: column;
876 justify-content: center;
877 user-select: none;
878 min-width: 20px;
879 max-width: 100%;
880 padding: 0 4px;
881 font-size: 12px;
882 text-align: center;
883 color: #555;
884 border: 1px solid #7B776C;
885 background-color: #f5f5f5;
886 }
887 .csf-field-border .csf--icon,
888 .csf-field-spacing .csf--icon,
889 .csf-field-dimensions .csf--icon {
890 border-right: 0;
891 border-radius: 4px 0 0 4px;
892 }
893 .csf-field-border .csf--icon + input,
894 .csf-field-spacing .csf--icon + input,
895 .csf-field-dimensions .csf--icon + input {
896 border-top-left-radius: 0 !important;
897 border-bottom-left-radius: 0 !important;
898 }
899 .csf-field-border .csf--unit,
900 .csf-field-spacing .csf--unit,
901 .csf-field-dimensions .csf--unit {
902 border-left: 0;
903 border-radius: 0 4px 4px 0;
904 }
905 .csf-field-border .csf--is-unit,
906 .csf-field-spacing .csf--is-unit,
907 .csf-field-dimensions .csf--is-unit {
908 border-top-right-radius: 0 !important;
909 border-bottom-right-radius: 0 !important;
910 }
911
912 /**
913 * 03. 06. Field: button_set
914 */
915 .csf-field-button_set .csf--buttons {
916 display: inline-block;
917 }
918 .csf-field-button_set .csf--button {
919 position: relative;
920 z-index: 1;
921 float: left;
922 cursor: pointer;
923 padding: 7px 14px;
924 min-width: 16px;
925 text-align: center;
926 color: #555;
927 border: 1px solid #cccccc;
928 background-color: #f7f7f7;
929 user-select: none;
930 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
931 }
932 .csf-field-button_set .csf--button:first-child {
933 border-radius: 4px 0 0 4px;
934 }
935 .csf-field-button_set .csf--button:last-child {
936 border-radius: 0 4px 4px 0;
937 }
938 .csf-field-button_set .csf--button:not(:first-child) {
939 margin-left: -1px;
940 }
941 .csf-field-button_set .csf--button:hover {
942 background-color: #eee;
943 }
944 .csf-field-button_set .csf--active:hover,
945 .csf-field-button_set .csf--active {
946 z-index: 2;
947 color: #fff;
948 border-color: #006799;
949 background-color: #0085ba;
950 }
951 .csf-field-button_set input {
952 display: none;
953 }
954
955 /**
956 * 03. 07. Field: checkbox, radio
957 */
958 .csf-field-checkbox ul,
959 .csf-field-radio ul {
960 margin: 0;
961 padding: 0;
962 list-style-type: none;
963 overflow-y: auto;
964 max-height: 305px;
965 }
966 .csf-field-checkbox ul li,
967 .csf-field-radio ul li {
968 margin-bottom: 6px;
969 }
970 .csf-field-checkbox ul ul,
971 .csf-field-radio ul ul {
972 max-height: none;
973 }
974 .csf-field-checkbox ul ul li,
975 .csf-field-radio ul ul li {
976 margin-left: 8px;
977 }
978 .csf-field-checkbox ul ul li:first-child,
979 .csf-field-radio ul ul li:first-child {
980 margin-left: 0;
981 }
982 .csf-field-checkbox input,
983 .csf-field-radio input {
984 margin: 0 1px;
985 }
986 .csf-field-checkbox .csf--inline-list li,
987 .csf-field-radio .csf--inline-list li {
988 display: inline-block;
989 margin-right: 15px;
990 }
991 .csf-field-checkbox .csf--text,
992 .csf-field-radio .csf--text {
993 margin-left: 5px;
994 vertical-align: middle;
995 }
996 .csf-field-checkbox .csf-checker,
997 .csf-field-radio .csf-checker {
998 cursor: pointer;
999 }
1000 .csf-field-checkbox .csf-checkbox-all,
1001 .csf-field-radio .csf-checkbox-all {
1002 user-select: none;
1003 cursor: pointer;
1004 margin-top: 5px;
1005 font-weight: 500;
1006 text-decoration: none;
1007 }
1008
1009 /**
1010 * 03. 08. Field: code_editor
1011 */
1012 .csf-field-code_editor .CodeMirror {
1013 width: 100%;
1014 height: 400px;
1015 }
1016 .csf-field-code_editor .cm-s-default {
1017 border: 1px solid #ccd0d4;
1018 }
1019 .csf-field-code_editor textarea {
1020 width: 100%;
1021 height: 400px;
1022 }
1023
1024 /**
1025 * 03. 09. Field: color
1026 */
1027 .csf-field-color > input {
1028 opacity: 0.75;
1029 width: 115px;
1030 max-width: 100%;
1031 }
1032 .csf-field-color .button.wp-picker-clear {
1033 padding: 0 8px;
1034 margin-left: 6px;
1035 line-height: 2.54545455;
1036 min-height: 30px;
1037 }
1038
1039 /**
1040 * 03. 10. Field: color_group
1041 */
1042 .csf-field-color_group .csf--left {
1043 float: left;
1044 margin-right: 10px;
1045 margin-bottom: 5px;
1046 }
1047 .csf-field-color_group .csf--title {
1048 color: #999;
1049 margin-bottom: 5px;
1050 }
1051
1052 /**
1053 * 03. 11. Field: fieldset
1054 */
1055 .csf-field-fieldset .csf-fieldset-content {
1056 border: 1px solid #ccd0d4;
1057 background-color: #fff;
1058 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1059 }
1060 .csf-field-fieldset .csf-fieldset-content > .csf-field {
1061 padding: 15px;
1062 }
1063 .csf-field-fieldset .csf-field-subheading {
1064 font-size: 13px;
1065 }
1066
1067 /**
1068 * 03. 12. Field: date
1069 */
1070 .csf-field-date input {
1071 margin: 0;
1072 }
1073 .csf-field-date .csf--to {
1074 margin-left: 7px;
1075 }
1076
1077 .csf-datepicker-wrapper {
1078 margin-top: 5px;
1079 width: auto;
1080 background-color: #fff;
1081 z-index: 9999999 !important;
1082 box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
1083 }
1084 .csf-datepicker-wrapper * {
1085 float: none;
1086 margin: 0;
1087 padding: 0;
1088 font-family: inherit;
1089 font-weight: normal;
1090 font-style: normal;
1091 text-decoration: none;
1092 border: 0;
1093 border-radius: 0;
1094 box-shadow: none;
1095 }
1096 .csf-datepicker-wrapper .ui-widget-header,
1097 .csf-datepicker-wrapper .ui-datepicker-header {
1098 color: #fff;
1099 background: #00a0d2;
1100 }
1101 .csf-datepicker-wrapper .ui-datepicker-header .ui-state-hover {
1102 cursor: pointer;
1103 }
1104 .csf-datepicker-wrapper .ui-datepicker-title {
1105 font-size: 14px;
1106 line-height: 40px;
1107 text-align: center;
1108 }
1109 .csf-datepicker-wrapper .ui-datepicker-prev,
1110 .csf-datepicker-wrapper .ui-datepicker-next {
1111 position: static;
1112 top: auto;
1113 left: auto;
1114 right: auto;
1115 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1116 font-weight: 900;
1117 font-size: 12px;
1118 text-align: center;
1119 width: 41px;
1120 height: 40px;
1121 line-height: 40px;
1122 color: #fff;
1123 background-color: rgba(255, 255, 255, 0.1);
1124 text-rendering: auto;
1125 -webkit-font-smoothing: antialiased;
1126 -moz-osx-font-smoothing: grayscale;
1127 }
1128 .csf-datepicker-wrapper .ui-datepicker-next span,
1129 .csf-datepicker-wrapper .ui-datepicker-prev span {
1130 display: none;
1131 }
1132 .csf-datepicker-wrapper .ui-datepicker-prev {
1133 float: left;
1134 }
1135 .csf-datepicker-wrapper .ui-datepicker-next {
1136 float: right;
1137 }
1138 .csf-datepicker-wrapper .ui-datepicker-prev:before {
1139 content: "\f053";
1140 }
1141 .csf-datepicker-wrapper .ui-datepicker-next:before {
1142 content: "\f054";
1143 }
1144 .csf-datepicker-wrapper .ui-datepicker-prev-hover,
1145 .csf-datepicker-wrapper .ui-datepicker-next-hover {
1146 opacity: 0.75;
1147 }
1148 .csf-datepicker-wrapper tbody .ui-datepicker-week-col {
1149 background-color: #f7f7f7;
1150 }
1151 .csf-datepicker-wrapper .ui-datepicker-buttonpane {
1152 padding: 10px;
1153 text-align: center;
1154 background-color: #f7f7f7;
1155 }
1156 .csf-datepicker-wrapper .ui-datepicker-buttonpane button {
1157 cursor: pointer;
1158 margin: 0 5px;
1159 padding: 7px 14px;
1160 border: 1px solid #eee;
1161 background-color: #fff;
1162 }
1163 .csf-datepicker-wrapper select {
1164 margin: 0 4px;
1165 }
1166 .csf-datepicker-wrapper select option {
1167 color: #555;
1168 }
1169 .csf-datepicker-wrapper table {
1170 font-size: 13px;
1171 border-collapse: collapse;
1172 width: 100%;
1173 }
1174 .csf-datepicker-wrapper thead {
1175 color: #fff;
1176 background: #32373c;
1177 }
1178 .csf-datepicker-wrapper th {
1179 text-align: center;
1180 padding: 7px;
1181 border: 1px solid #444;
1182 }
1183 .csf-datepicker-wrapper td {
1184 text-align: center;
1185 border: 1px solid #f4f4f4;
1186 }
1187 .csf-datepicker-wrapper td.ui-datepicker-other-month {
1188 border: transparent;
1189 }
1190 .csf-datepicker-wrapper td .ui-state-default {
1191 color: #555;
1192 width: auto;
1193 display: block;
1194 padding: 6px 12px;
1195 }
1196 .csf-datepicker-wrapper td .ui-state-active,
1197 .csf-datepicker-wrapper td .ui-state-hover {
1198 color: #fff;
1199 background-color: #0073aa;
1200 }
1201 .csf-datepicker-wrapper td.ui-state-disabled .ui-state-default {
1202 opacity: 0.5;
1203 }
1204
1205 /**
1206 * 03. 13. Field: datetime
1207 */
1208 .csf-field-datetime input {
1209 margin: 0;
1210 }
1211 .csf-field-datetime .csf--to {
1212 margin-left: 7px;
1213 }
1214
1215 .csf-flatpickr select,
1216 .csf-flatpickr input {
1217 min-height: auto;
1218 }
1219 .csf-flatpickr select:focus,
1220 .csf-flatpickr input:focus {
1221 box-shadow: none;
1222 }
1223 .csf-flatpickr.open {
1224 z-index: 9999999 !important;
1225 }
1226
1227 /**
1228 * 03. 14. Field: gallery
1229 */
1230 .csf-field-gallery ul {
1231 margin: 0;
1232 padding: 0;
1233 list-style-type: none;
1234 }
1235 .csf-field-gallery ul li {
1236 display: inline-block;
1237 position: relative;
1238 padding: 4px;
1239 margin: 0 5px 10px 0;
1240 border: 1px solid #ccc;
1241 background-color: #f9f9f9;
1242 border-radius: 2px;
1243 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1244 }
1245 .csf-field-gallery ul li img {
1246 max-height: 60px;
1247 display: inline-block;
1248 vertical-align: middle;
1249 }
1250 .csf-field-gallery .button {
1251 margin-right: 5px;
1252 margin-bottom: 5px;
1253 }
1254
1255 /**
1256 * 03. 15. Field: group
1257 */
1258 .csf-field-group .csf-cloneable-hidden {
1259 display: none !important;
1260 }
1261 .csf-field-group .csf-cloneable-wrapper {
1262 position: relative;
1263 }
1264 .csf-field-group .csf-cloneable-item {
1265 display: none;
1266 position: relative;
1267 margin-bottom: 5px;
1268 }
1269 .csf-field-group .csf-cloneable-item h4 {
1270 font-size: 1em;
1271 }
1272 .csf-field-group .ui-accordion .csf-cloneable-item {
1273 display: block;
1274 }
1275 .csf-field-group .csf-cloneable-content {
1276 border: 1px solid #ccd0d4;
1277 background-color: #fff;
1278 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1279 }
1280 .csf-field-group .csf-cloneable-content > .csf-field {
1281 padding: 15px;
1282 }
1283 .csf-field-group .csf-cloneable-title {
1284 display: block;
1285 cursor: pointer;
1286 position: relative;
1287 user-select: none;
1288 margin: 0;
1289 padding: 15px 65px 15px 10px;
1290 min-height: 0;
1291 font-size: 100%;
1292 border: 1px solid #ccd0d4;
1293 background-color: #fafafa;
1294 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1295 transition: border-color 0.15s;
1296 }
1297 .csf-field-group .csf-cloneable-title:active, .csf-field-group .csf-cloneable-title:hover, .csf-field-group .csf-cloneable-title:focus {
1298 border-color: #999;
1299 outline: none;
1300 }
1301 .csf-field-group .csf-cloneable-helper {
1302 position: absolute;
1303 top: 12px;
1304 right: 10px;
1305 z-index: 1;
1306 font-size: 14px;
1307 line-height: 1em;
1308 }
1309 .csf-field-group .csf-cloneable-helper i {
1310 display: inline-block;
1311 cursor: pointer;
1312 padding: 5px;
1313 color: #999;
1314 }
1315 .csf-field-group .csf-cloneable-helper i:hover {
1316 color: #555;
1317 }
1318 .csf-field-group .csf-cloneable-content {
1319 padding: 0;
1320 border-top: 0;
1321 }
1322 .csf-field-group .csf-cloneable-title-prefix,
1323 .csf-field-group .csf-cloneable-title-number {
1324 margin-right: 5px;
1325 }
1326 .csf-field-group .csf-cloneable-alert {
1327 display: none;
1328 margin-bottom: 5px;
1329 padding: 10px 20px;
1330 color: #a94442;
1331 border: 1px solid #ebccd1;
1332 background-color: #f2dede;
1333 }
1334 .csf-field-group .widget-placeholder {
1335 margin-bottom: 10px;
1336 border: 1px dashed #f1c40f;
1337 background-color: #fffae4;
1338 }
1339 .csf-field-group .csf-cloneable-header-icon {
1340 display: inline-block;
1341 text-align: center;
1342 font-size: 14px;
1343 width: 17px;
1344 text-indent: 0;
1345 vertical-align: text-top;
1346 }
1347 .csf-field-group .csf-cloneable-placeholder {
1348 background-color: #ddd;
1349 margin-top: 4px;
1350 width: 100px;
1351 height: 10px;
1352 font-size: 10px;
1353 line-height: 10px;
1354 display: inline-block;
1355 vertical-align: top;
1356 border-radius: 2px;
1357 }
1358
1359 /**
1360 * 03. 16. Field: icon
1361 */
1362 .csf-field-icon .csf-icon-select {
1363 display: flex;
1364 grid-gap: 5px;
1365 }
1366 .csf-field-icon .csf-icon-preview:not(.hidden) {
1367 display: flex;
1368 }
1369 .csf-field-icon .csf-icon-preview i {
1370 display: flex;
1371 justify-content: center;
1372 align-items: center;
1373 width: 30px;
1374 font-size: 14px;
1375 text-align: center;
1376 vertical-align: top;
1377 color: #555;
1378 border: 1px solid #ccc;
1379 background-color: #f7f7f7;
1380 border-radius: 3px;
1381 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1382 }
1383
1384 /**
1385 * 03. 17. Field: image_select
1386 */
1387 .csf-field-image_select .csf--image {
1388 display: inline-block;
1389 margin: 0 5px 5px 0;
1390 }
1391 .csf-field-image_select .csf--inline-list .csf--image {
1392 display: block;
1393 }
1394 .csf-field-image_select figure {
1395 cursor: pointer;
1396 position: relative;
1397 display: inline-block;
1398 max-width: 100%;
1399 margin: 0;
1400 vertical-align: bottom;
1401 border: 2px solid transparent;
1402 background-color: #fff;
1403 user-select: none;
1404 transition: all 0.2s;
1405 }
1406 .csf-field-image_select figure:before {
1407 position: absolute;
1408 top: 0;
1409 left: 0;
1410 text-align: center;
1411 font-size: 10px;
1412 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1413 font-weight: 900;
1414 content: "\f00c";
1415 width: 16px;
1416 height: 16px;
1417 line-height: 14px;
1418 opacity: 0;
1419 color: #fff;
1420 background-color: #222;
1421 transition: opacity 0.2s;
1422 }
1423 .csf-field-image_select .csf--active figure {
1424 border-color: #222;
1425 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
1426 }
1427 .csf-field-image_select .csf--active figure:before {
1428 opacity: 1;
1429 }
1430 .csf-field-image_select img {
1431 max-width: 100%;
1432 height: auto;
1433 vertical-align: top;
1434 }
1435 .csf-field-image_select input {
1436 display: none;
1437 }
1438
1439 /**
1440 * 03. 18. Field: link_color
1441 */
1442 .csf-field-link_color .csf--left {
1443 float: left;
1444 margin-right: 10px;
1445 margin-bottom: 5px;
1446 }
1447 .csf-field-link_color .csf--title {
1448 color: #777;
1449 margin-bottom: 5px;
1450 }
1451
1452 /**
1453 * 03. 19. Field: map
1454 */
1455 .csf-field-map input {
1456 width: 100%;
1457 }
1458 .csf-field-map input[type=text].ui-autocomplete-loading {
1459 background-position-x: calc(100% - 5px);
1460 }
1461 .csf-field-map .csf--map-search + .csf--map-osm-wrap {
1462 margin-top: 10px;
1463 }
1464 .csf-field-map .csf--map-osm-wrap {
1465 position: relative;
1466 padding: 5px;
1467 border: 1px solid #eee;
1468 background-color: #fff;
1469 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1470 }
1471 .csf-field-map .csf--map-osm {
1472 position: relative;
1473 z-index: 1;
1474 min-height: 250px;
1475 }
1476 .csf-field-map .csf--map-inputs {
1477 margin-top: 10px;
1478 display: flex;
1479 justify-content: space-between;
1480 }
1481 .csf-field-map .csf--map-input {
1482 flex: 1;
1483 }
1484 .csf-field-map .csf--map-input:last-child {
1485 padding-left: 10px;
1486 }
1487 .csf-field-map label {
1488 display: block;
1489 color: #777;
1490 font-size: 12px;
1491 margin: 0 0 2px 0;
1492 }
1493
1494 .csf-map-ui-autocomplate {
1495 z-index: 999999;
1496 border-radius: 4px;
1497 overflow: hidden;
1498 }
1499
1500 /**
1501 * 03. 20. Field: media
1502 */
1503 .csf-field-media .csf--placeholder {
1504 display: flex;
1505 align-items: flex-start;
1506 }
1507 .csf-field-media .csf--placeholder input {
1508 width: 100%;
1509 margin: 0;
1510 }
1511 .csf-field-media .button {
1512 margin-left: 5px;
1513 }
1514 .csf-field-media .hidden + .button {
1515 margin-left: 0;
1516 }
1517 .csf-field-media .csf--preview {
1518 position: relative;
1519 }
1520
1521 /**
1522 * 03. 21. Field: palette
1523 */
1524 .csf-field-palette .csf--palette {
1525 position: relative;
1526 display: inline-block;
1527 cursor: pointer;
1528 border: 2px solid #ddd;
1529 margin-right: 10px;
1530 margin-bottom: 10px;
1531 user-select: none;
1532 -webkit-user-select: none;
1533 transition: all 0.2s;
1534 }
1535 .csf-field-palette .csf--palette span {
1536 vertical-align: middle;
1537 display: inline-block;
1538 width: 22px;
1539 height: 60px;
1540 line-height: 60px;
1541 overflow: hidden;
1542 text-indent: -999px;
1543 }
1544 .csf-field-palette .csf--palette:before {
1545 position: absolute;
1546 top: 0;
1547 left: 0;
1548 text-align: center;
1549 font-size: 10px;
1550 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1551 font-weight: 900;
1552 content: "\f00c";
1553 width: 16px;
1554 height: 16px;
1555 line-height: 14px;
1556 opacity: 0;
1557 color: #fff;
1558 background-color: #222;
1559 transition: opacity 0.2s;
1560 }
1561 .csf-field-palette .csf--active {
1562 border-color: #222;
1563 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
1564 }
1565 .csf-field-palette .csf--active:before {
1566 opacity: 1;
1567 }
1568 .csf-field-palette input {
1569 display: none;
1570 }
1571
1572 /**
1573 * 03. 22. Field: repeater
1574 */
1575 .csf-field-repeater .csf-field-text input {
1576 width: 100%;
1577 }
1578 .csf-field-repeater .csf-repeater-hidden {
1579 display: none !important;
1580 }
1581 .csf-field-repeater .csf-repeater-wrapper .csf-repeater-item {
1582 display: table;
1583 width: 100%;
1584 margin-bottom: 5px;
1585 border: 1px solid #eee;
1586 }
1587 .csf-field-repeater .csf-repeater-wrapper .csf-repeater-item h4 {
1588 font-size: 1em;
1589 }
1590 .csf-field-repeater .csf-repeater-content {
1591 width: 100%;
1592 display: table-cell;
1593 vertical-align: middle;
1594 background-color: #fff;
1595 }
1596 .csf-field-repeater .csf-repeater-content > .csf-field {
1597 padding: 15px;
1598 }
1599 .csf-field-repeater .csf-repeater-helper {
1600 width: 100%;
1601 display: table-cell;
1602 vertical-align: middle;
1603 text-align: center;
1604 font-size: 14px;
1605 line-height: 1em;
1606 border-left: 1px solid #eee;
1607 background-color: #f7f7f7;
1608 }
1609 .csf-field-repeater .csf-repeater-helper i {
1610 display: inline-block;
1611 cursor: pointer;
1612 color: #999;
1613 padding: 5px;
1614 }
1615 .csf-field-repeater .csf-repeater-helper i:hover {
1616 color: #555;
1617 }
1618 .csf-field-repeater .csf-repeater-helper-inner {
1619 width: 75px;
1620 }
1621 .csf-field-repeater .csf-repeater-alert {
1622 display: none;
1623 margin-bottom: 5px;
1624 padding: 10px 20px;
1625 color: #a94442;
1626 border: 1px solid #ebccd1;
1627 background-color: #f2dede;
1628 }
1629 .csf-field-repeater .widget-placeholder {
1630 height: 50px;
1631 margin-bottom: 3px;
1632 border: 1px dashed #f1c40f;
1633 background-color: #fffae4;
1634 }
1635 .csf-field-repeater .ui-sortable-helper {
1636 height: 50px !important;
1637 overflow: hidden !important;
1638 border-color: #ccc !important;
1639 background-color: #eee !important;
1640 opacity: 0.5;
1641 }
1642 .csf-field-repeater .ui-sortable-helper .csf-repeater-helper,
1643 .csf-field-repeater .ui-sortable-helper .csf-repeater-content {
1644 display: none;
1645 }
1646
1647 /**
1648 * 03. 23. Field: select
1649 */
1650 .csf-field-select .csf-fieldset {
1651 min-height: 30px;
1652 }
1653 .csf-field-select .csf-chosen {
1654 display: none;
1655 }
1656 .csf-field-select select {
1657 max-width: 100%;
1658 margin: 0;
1659 }
1660 .csf-field-select .csf-hide-select {
1661 display: none !important;
1662 }
1663
1664 /**
1665 * 03. 24. Field: slider
1666 */
1667 .csf-field-slider .csf--wrap {
1668 display: flex;
1669 align-items: center;
1670 }
1671 .csf-field-slider .csf--input {
1672 display: flex;
1673 }
1674 .csf-field-slider .csf--unit {
1675 display: flex;
1676 justify-content: center;
1677 flex-direction: column;
1678 user-select: none;
1679 padding: 0 6px;
1680 font-size: 11px;
1681 line-height: 1;
1682 border-radius: 0 4px 4px 0;
1683 color: #555;
1684 border: 1px solid #7e8993;
1685 border-left: 0;
1686 background-color: #f5f5f5;
1687 }
1688 .csf-field-slider .csf-slider-ui {
1689 margin-right: 15px;
1690 }
1691 .csf-field-slider input[type=number] {
1692 position: relative;
1693 z-index: 1;
1694 margin: 0;
1695 width: 50px;
1696 text-align: center;
1697 }
1698 .csf-field-slider .csf--is-unit {
1699 border-top-right-radius: 0 !important;
1700 border-bottom-right-radius: 0 !important;
1701 }
1702 .csf-field-slider .ui-slider {
1703 position: relative;
1704 width: 100%;
1705 height: 3px;
1706 border: none;
1707 background: #ddd;
1708 border-radius: 2px;
1709 }
1710 .csf-field-slider .ui-slider-range {
1711 height: 3px;
1712 border: none;
1713 background: #333;
1714 border-radius: 2px;
1715 }
1716 .csf-field-slider .ui-slider-handle {
1717 position: absolute;
1718 width: 16px;
1719 height: 16px;
1720 top: -7px;
1721 margin-left: -8px;
1722 border: none;
1723 background: #333;
1724 border-radius: 2px;
1725 }
1726 .csf-field-slider .ui-state-active,
1727 .csf-field-slider .ui-slider-handle:hover {
1728 cursor: pointer;
1729 background: #111;
1730 }
1731
1732 /**
1733 * 03. 25. Field: sortable
1734 */
1735 .csf-field-sortable .csf-field-text input {
1736 width: 100%;
1737 max-width: 100%;
1738 }
1739 .csf-field-sortable .csf-sortable .csf-sortable-item {
1740 display: table;
1741 width: 100%;
1742 margin-bottom: 5px;
1743 border: 1px solid #eee;
1744 }
1745 .csf-field-sortable .csf-sortable .csf-sortable-item h4 {
1746 font-size: 1em;
1747 }
1748 .csf-field-sortable .csf-sortable-content {
1749 width: 100%;
1750 display: table-cell;
1751 vertical-align: middle;
1752 background-color: #fff;
1753 }
1754 .csf-field-sortable .csf-sortable-content > .csf-field {
1755 padding: 15px;
1756 }
1757 .csf-field-sortable .csf-sortable-helper {
1758 width: 100%;
1759 display: table-cell;
1760 vertical-align: middle;
1761 text-align: center;
1762 font-size: 14px;
1763 line-height: 1em;
1764 border-left: 1px solid #eee;
1765 background-color: #f7f7f7;
1766 }
1767 .csf-field-sortable .csf-sortable-helper i {
1768 display: inline-block;
1769 cursor: pointer;
1770 width: 50px;
1771 color: #555;
1772 }
1773 .csf-field-sortable .csf-sortable-helper i:hover {
1774 opacity: 0.5;
1775 }
1776 .csf-field-sortable .widget-placeholder {
1777 height: 50px;
1778 margin-bottom: 3px;
1779 border: 1px dashed #f1c40f;
1780 background-color: #fffae4;
1781 }
1782 .csf-field-sortable .ui-sortable-helper {
1783 height: 50px !important;
1784 overflow: hidden !important;
1785 border-color: #ccc !important;
1786 background-color: #eee !important;
1787 opacity: 0.5;
1788 }
1789 .csf-field-sortable .ui-sortable-helper .csf-sortable-helper,
1790 .csf-field-sortable .ui-sortable-helper .csf-sortable-content {
1791 display: none;
1792 }
1793
1794 /**
1795 * 03. 26. Field: sorter
1796 */
1797 .csf-field-sorter .ui-sortable-placeholder {
1798 height: 20px;
1799 border: 1px dashed #f1c40f;
1800 background-color: #fffae4;
1801 }
1802 .csf-field-sorter .csf-modules {
1803 float: left;
1804 width: 50%;
1805 box-sizing: border-box;
1806 }
1807 .csf-field-sorter .csf-modules:first-child {
1808 padding-right: 15px;
1809 }
1810 .csf-field-sorter .csf-modules:last-child {
1811 padding-left: 15px;
1812 }
1813 .csf-field-sorter .csf-disabled,
1814 .csf-field-sorter .csf-enabled {
1815 padding: 5px 15px;
1816 border: 1px dashed #ddd;
1817 background-color: #fff;
1818 }
1819 .csf-field-sorter .csf-disabled li {
1820 opacity: 0.5;
1821 transition: opacity 0.15s;
1822 }
1823 .csf-field-sorter .csf-disabled .ui-sortable-helper {
1824 opacity: 1;
1825 }
1826 .csf-field-sorter .csf-sorter-title {
1827 font-size: 13px;
1828 font-weight: 600;
1829 padding: 10px;
1830 text-align: center;
1831 border: 1px dashed #ddd;
1832 border-bottom: none;
1833 background-color: #f8f8f8;
1834 text-transform: uppercase;
1835 }
1836 .csf-field-sorter ul {
1837 list-style-type: none;
1838 margin: 0;
1839 padding: 0;
1840 min-height: 62px;
1841 }
1842 .csf-field-sorter ul li {
1843 margin: 10px 0;
1844 padding: 10px 15px;
1845 cursor: move;
1846 font-weight: bold;
1847 text-align: center;
1848 border: 1px solid #e5e5e5;
1849 background-color: #fafafa;
1850 transition: border-color 0.15s;
1851 }
1852 .csf-field-sorter ul li:hover {
1853 border-color: #bbb;
1854 }
1855
1856 /**
1857 * 03. 27. Field: spinner
1858 */
1859 .csf-field-spinner .csf--spin {
1860 display: flex;
1861 }
1862 .csf-field-spinner .ui-widget {
1863 font-family: inherit;
1864 }
1865 .csf-field-spinner .ui-spinner {
1866 display: flex;
1867 align-items: stretch;
1868 overflow: unset;
1869 border: none;
1870 background: none;
1871 border-radius: 0;
1872 }
1873 .csf-field-spinner .ui-spinner .ui-button {
1874 display: flex;
1875 flex-direction: column;
1876 justify-content: center;
1877 text-align: center;
1878 min-width: 20px;
1879 padding: 0 4px;
1880 margin: 0;
1881 color: #555;
1882 background-color: #f5f5f5;
1883 border: 1px solid #7e8993;
1884 }
1885 .csf-field-spinner .ui-spinner .ui-spinner-button {
1886 position: relative;
1887 cursor: pointer;
1888 height: auto;
1889 }
1890 .csf-field-spinner .ui-spinner .ui-spinner-button:hover {
1891 background-color: #e7e7e7;
1892 }
1893 .csf-field-spinner .ui-spinner .ui-spinner-button:active {
1894 background-color: #ddd;
1895 }
1896 .csf-field-spinner .ui-spinner .ui-spinner-button:before {
1897 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1898 font-weight: 900;
1899 font-size: 14px;
1900 line-height: 14px;
1901 }
1902 .csf-field-spinner .ui-spinner .ui-spinner-down {
1903 border-right: 0;
1904 border-radius: 4px 0 0 4px;
1905 }
1906 .csf-field-spinner .ui-spinner .ui-spinner-down:before {
1907 content: "\f0d9";
1908 }
1909 .csf-field-spinner .ui-spinner .ui-spinner-up {
1910 border-left: 0;
1911 border-radius: 0 4px 4px 0;
1912 }
1913 .csf-field-spinner .ui-spinner .ui-spinner-up:before {
1914 content: "\f0da";
1915 }
1916 .csf-field-spinner .ui-spinner .csf--unit {
1917 border-left: 0;
1918 user-select: none;
1919 }
1920 .csf-field-spinner .ui-spinner .ui-button-text,
1921 .csf-field-spinner .ui-spinner .ui-button-icon,
1922 .csf-field-spinner .ui-spinner .ui-button-icon-space {
1923 display: none;
1924 }
1925 .csf-field-spinner .ui-spinner input {
1926 font-family: inherit;
1927 font-size: inherit;
1928 position: relative;
1929 z-index: 1;
1930 width: 50px;
1931 text-align: center;
1932 margin: 0;
1933 padding: 0 8px;
1934 border-radius: 0;
1935 }
1936 .csf-field-spinner .ui-spinner-down {
1937 order: 1;
1938 }
1939 .csf-field-spinner .ui-spinner-input {
1940 order: 2;
1941 }
1942 .csf-field-spinner .csf--unit {
1943 order: 3;
1944 }
1945 .csf-field-spinner .ui-spinner-up {
1946 order: 4;
1947 }
1948
1949 /**
1950 * 03. 28. Field: switcher
1951 */
1952 .csf-field-switcher .csf--switcher {
1953 float: left;
1954 cursor: pointer;
1955 position: relative;
1956 width: 60px;
1957 height: 26px;
1958 padding: 0;
1959 margin: 0;
1960 overflow: hidden;
1961 border-radius: 4px;
1962 background-color: #ed6f6f;
1963 user-select: none;
1964 -webkit-user-select: none;
1965 }
1966 .csf-field-switcher .csf--ball {
1967 position: absolute;
1968 top: 4px;
1969 left: 4px;
1970 width: 24px;
1971 height: 18px;
1972 background-color: #fff;
1973 border-radius: 4px;
1974 transition: all 0.1s;
1975 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
1976 }
1977 .csf-field-switcher .csf--on,
1978 .csf-field-switcher .csf--off {
1979 position: absolute;
1980 top: 0;
1981 left: 0;
1982 right: 0;
1983 font-size: 11px;
1984 line-height: 26px;
1985 font-weight: 500;
1986 font-style: normal;
1987 text-align: center;
1988 text-transform: uppercase;
1989 color: #fff;
1990 padding-right: 28px;
1991 opacity: 0;
1992 transition: all 0.1s;
1993 }
1994 .csf-field-switcher .csf--off {
1995 padding-right: 0;
1996 padding-left: 28px;
1997 opacity: 1;
1998 }
1999 .csf-field-switcher .csf--active {
2000 background: #4fb845;
2001 }
2002 .csf-field-switcher .csf--active .csf--on {
2003 opacity: 1;
2004 }
2005 .csf-field-switcher .csf--active .csf--off {
2006 opacity: 0;
2007 }
2008 .csf-field-switcher .csf--active .csf--ball {
2009 left: 100%;
2010 margin-left: -28px;
2011 }
2012 .csf-field-switcher .csf--label {
2013 float: left;
2014 margin-top: 4px;
2015 margin-left: 8px;
2016 font-weight: 400;
2017 color: #999;
2018 }
2019
2020 /**
2021 * 03. 29. Field: tabbed
2022 */
2023 .csf-field-tabbed .csf-tabbed-content {
2024 border: 1px solid #ccd0d4;
2025 background-color: #fff;
2026 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2027 }
2028 .csf-field-tabbed .csf-tabbed-content > .csf-field {
2029 padding: 15px;
2030 }
2031 .csf-field-tabbed .csf-tabbed-nav .csf--icon {
2032 padding-right: 5px;
2033 }
2034 .csf-field-tabbed .csf-tabbed-nav a {
2035 display: inline-block;
2036 padding: 12px 15px;
2037 margin-top: 1px;
2038 margin-right: 5px;
2039 margin-bottom: -1px;
2040 position: relative;
2041 text-decoration: none;
2042 color: #444;
2043 font-weight: 600;
2044 border: 1px solid #ccd0d4;
2045 background-color: #f3f3f3;
2046 transition: all 0.2s;
2047 }
2048 .csf-field-tabbed .csf-tabbed-nav a:hover {
2049 background-color: #f9f9f9;
2050 }
2051 .csf-field-tabbed .csf-tabbed-nav a.csf-tabbed-active {
2052 background-color: #fff;
2053 border-bottom-color: #fff;
2054 }
2055 .csf-field-tabbed .csf-tabbed-nav a:focus {
2056 outline: none;
2057 box-shadow: none;
2058 }
2059
2060 /**
2061 * 03. 30. Field: text
2062 */
2063 .csf-field-text input {
2064 width: 50%;
2065 max-width: 100%;
2066 margin: 0;
2067 }
2068
2069 /**
2070 * 03. 31. Field: textarea
2071 */
2072 .csf-field-textarea textarea {
2073 width: 100%;
2074 max-width: 100%;
2075 min-height: 125px;
2076 }
2077 .csf-field-textarea .csf-shortcode-button {
2078 margin-bottom: 10px;
2079 margin-right: 5px;
2080 }
2081
2082 /**
2083 * 03. 32. Field: typography
2084 */
2085 .csf-field-typography textarea,
2086 .csf-field-typography select {
2087 margin: 0;
2088 min-width: 100%;
2089 max-width: 100%;
2090 }
2091 .csf-field-typography .csf--title {
2092 color: #777;
2093 margin: 0 0 2px 0;
2094 font-size: 12px;
2095 }
2096 .csf-field-typography .csf--title small {
2097 vertical-align: top;
2098 }
2099 .csf-field-typography .csf--blocks {
2100 display: flex;
2101 flex-wrap: wrap;
2102 }
2103 .csf-field-typography .csf--block {
2104 flex: 1;
2105 max-width: 100%;
2106 padding-right: 6px;
2107 padding-bottom: 6px;
2108 }
2109 .csf-field-typography .csf--input {
2110 margin: 0;
2111 min-width: 100%;
2112 }
2113 .csf-field-typography .csf--input-wrap {
2114 position: relative;
2115 }
2116 .csf-field-typography .csf--unit {
2117 position: absolute;
2118 z-index: 1;
2119 right: 4px;
2120 top: 4px;
2121 bottom: 4px;
2122 padding: 2px 6px;
2123 color: #666;
2124 font-size: 11px;
2125 line-height: 1;
2126 border-radius: 2px;
2127 background: #eee;
2128 user-select: none;
2129 display: flex;
2130 justify-content: center;
2131 flex-direction: column;
2132 }
2133 .csf-field-typography .csf--preview {
2134 font-size: 16px;
2135 line-height: 20px;
2136 padding: 20px;
2137 color: #222;
2138 border: 1px solid #eee;
2139 background-color: #fff;
2140 border-radius: 2.5px;
2141 user-select: none;
2142 -webkit-user-select: none;
2143 transition: background-color 0.2s, border-color 0.2s;
2144 }
2145 .csf-field-typography .csf--block-preview {
2146 cursor: pointer;
2147 position: relative;
2148 overflow: hidden;
2149 margin-top: 10px;
2150 max-width: 100%;
2151 }
2152 .csf-field-typography .csf--black-background {
2153 border-color: #000;
2154 background-color: #000;
2155 }
2156 .csf-field-typography .csf--toggle {
2157 position: absolute;
2158 top: 5px;
2159 right: 10px;
2160 color: #999;
2161 }
2162 .csf-field-typography .csf--block-extra-styles {
2163 margin-top: 5px;
2164 }
2165
2166 /**
2167 * 03. 33. Field: upload
2168 */
2169 .csf-field-upload input {
2170 width: 100%;
2171 margin: 0;
2172 }
2173 .csf-field-upload .csf--wrap {
2174 display: flex;
2175 align-items: flex-start;
2176 }
2177 .csf-field-upload .button {
2178 margin-left: 5px;
2179 }
2180 .csf-field-upload .csf--preview {
2181 position: relative;
2182 }
2183
2184 /**
2185 * 03. 34. Field: wp_editor
2186 */
2187 .csf-field-wp_editor .csf-wp-editor {
2188 float: left;
2189 width: 100%;
2190 }
2191 .csf-field-wp_editor .mce-toolbar-grp {
2192 border: none;
2193 }
2194 .csf-field-wp_editor .mce-btn.mce-active button,
2195 .csf-field-wp_editor .mce-btn.mce-active:hover button,
2196 .csf-field-wp_editor .mce-btn.mce-active i,
2197 .csf-field-wp_editor .mce-btn.mce-active:hover i {
2198 color: #23282d;
2199 }
2200 .csf-field-wp_editor .wp-media-buttons {
2201 position: relative;
2202 z-index: 2;
2203 }
2204 .csf-field-wp_editor .wp-editor-tabs {
2205 position: relative;
2206 z-index: 1;
2207 }
2208 .csf-field-wp_editor .csf-no-tinymce {
2209 border: 1px solid #e5e5e5;
2210 }
2211 .csf-field-wp_editor .csf-no-quicktags .wp-media-buttons {
2212 float: none;
2213 display: block;
2214 }
2215 .csf-field-wp_editor .csf-no-quicktags .mce-tinymce {
2216 box-shadow: none;
2217 border: 1px solid #e5e5e5;
2218 }
2219 .csf-field-wp_editor textarea {
2220 width: 100%;
2221 max-width: 100%;
2222 margin: 0;
2223 box-shadow: none;
2224 }
2225
2226 /**
2227 * 03. 35. Field: heading
2228 */
2229 .csf-field-heading {
2230 font-size: 1.5em;
2231 font-weight: bold;
2232 color: #23282d;
2233 background-color: #f5f5f5;
2234 }
2235
2236 /**
2237 * 03. 36. Field: subheading
2238 */
2239 .csf-field-subheading {
2240 font-size: 14px;
2241 font-weight: bold;
2242 padding-top: 17px;
2243 padding-bottom: 17px;
2244 color: #23282d;
2245 background-color: #f7f7f7;
2246 }
2247
2248 /**
2249 * 03. 37. Field: submessage
2250 */
2251 .csf-field-submessage {
2252 padding: 0 !important;
2253 border: 0 !important;
2254 }
2255 .csf-field-submessage + .csf-field {
2256 border-top: 0 !important;
2257 }
2258
2259 .csf-submessage {
2260 font-size: 12px;
2261 padding: 17px 30px;
2262 border-top: 1px solid transparent;
2263 border-bottom: 1px solid transparent;
2264 }
2265
2266 .csf-submessage-success {
2267 color: #3c763d;
2268 border-color: #d6e9c6;
2269 background-color: #dff0d8;
2270 }
2271
2272 .csf-submessage-info {
2273 color: #31708f;
2274 border-color: #bce8f1;
2275 background-color: #d9edf7;
2276 }
2277
2278 .csf-submessage-warning {
2279 color: #8a6d3b;
2280 border-color: #faebcc;
2281 background-color: #fcf8e3;
2282 }
2283
2284 .csf-submessage-danger {
2285 color: #a94442;
2286 border-color: #ebccd1;
2287 background-color: #f2dede;
2288 }
2289
2290 .csf-submessage-normal {
2291 color: #23282d;
2292 border-color: #eee;
2293 background-color: #f7f7f7;
2294 }
2295
2296 /**
2297 * 03. 38. Field: notice
2298 */
2299 .csf-field-notice {
2300 background-color: #f7f7f7;
2301 }
2302
2303 .csf-notice {
2304 padding: 12px;
2305 background-color: #fff;
2306 border-left-style: solid;
2307 border-left-width: 4px;
2308 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
2309 }
2310
2311 .csf-notice-success {
2312 border-color: #46b450;
2313 }
2314
2315 .csf-notice-info {
2316 border-color: #339fd4;
2317 }
2318
2319 .csf-notice-warning {
2320 border-color: #ffbc00;
2321 }
2322
2323 .csf-notice-danger {
2324 border-color: #dc3232;
2325 }
2326
2327 .csf-notice-normal {
2328 border-color: #222;
2329 }
2330
2331 /**
2332 * 03. 39. Field: number
2333 */
2334 .csf-field-number input {
2335 width: 100%;
2336 margin: 0;
2337 }
2338 .csf-field-number .csf--wrap {
2339 position: relative;
2340 float: left;
2341 width: 100px;
2342 }
2343 .csf-field-number .csf--unit {
2344 position: absolute;
2345 z-index: 1;
2346 right: 4px;
2347 top: 4px;
2348 bottom: 4px;
2349 padding: 2px 6px;
2350 color: #666;
2351 font-size: 11px;
2352 line-height: 1;
2353 border-radius: 2px;
2354 background: #eee;
2355 user-select: none;
2356 display: flex;
2357 justify-content: center;
2358 flex-direction: column;
2359 }
2360
2361 /**
2362 * 03. 40. Field: link
2363 */
2364 .csf-field-link .csf--result {
2365 display: inline-block;
2366 font-size: 12px;
2367 line-height: 16px;
2368 padding: 7px 10px;
2369 margin-bottom: 7px;
2370 color: #777;
2371 border: 1px solid #e5e5e5;
2372 background-color: #f5f5f5;
2373 border-radius: 2px;
2374 world-break: break-word;
2375 }
2376 .csf-field-link .csf--wrap {
2377 position: relative;
2378 float: left;
2379 width: 100px;
2380 }
2381 .csf-field-link .csf--unit {
2382 position: absolute;
2383 z-index: 1;
2384 right: 4px;
2385 top: 4px;
2386 bottom: 4px;
2387 padding: 2px 6px;
2388 color: #666;
2389 font-size: 11px;
2390 line-height: 1;
2391 border-radius: 2px;
2392 background: #eee;
2393 user-select: none;
2394 display: flex;
2395 justify-content: center;
2396 flex-direction: column;
2397 }
2398
2399 /**
2400 * 03. 41. others
2401 */
2402 .csf-help {
2403 cursor: help;
2404 position: absolute;
2405 top: 0;
2406 right: 0;
2407 padding: 5px;
2408 font-size: 13px;
2409 color: #aaa;
2410 }
2411 .csf-help .csf-help-text {
2412 display: none;
2413 }
2414
2415 .csf--preview {
2416 max-width: 100%;
2417 }
2418
2419 .csf-image-preview {
2420 display: inline-flex;
2421 align-items: center;
2422 justify-content: center;
2423 flex-direction: column;
2424 position: relative;
2425 padding: 6px;
2426 max-width: 120px;
2427 max-height: 120px;
2428 min-width: 40px;
2429 min-height: 40px;
2430 margin-bottom: 10px;
2431 text-align: center;
2432 border-radius: 2px;
2433 border: 1px solid #ccc;
2434 background-color: #f9f9f9;
2435 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2436 }
2437 .csf-image-preview i {
2438 cursor: pointer;
2439 position: absolute;
2440 z-index: 1;
2441 right: 4px;
2442 top: 4px;
2443 font-size: 14px;
2444 width: 22px;
2445 height: 22px;
2446 line-height: 22px;
2447 text-align: center;
2448 text-decoration: none;
2449 color: #fff;
2450 background-color: #dd3333;
2451 opacity: 0.75;
2452 border-radius: 2px;
2453 transition: all 0.2s;
2454 }
2455 .csf-image-preview i:hover {
2456 opacity: 1;
2457 }
2458 .csf-image-preview i:focus {
2459 box-shadow: none;
2460 }
2461 .csf-image-preview span {
2462 position: relative;
2463 overflow: hidden;
2464 display: flex;
2465 height: 100%;
2466 width: 100%;
2467 }
2468 .csf-image-preview img {
2469 max-width: 100%;
2470 height: auto;
2471 object-fit: contain;
2472 }
2473
2474 .csf-field-custom .csf-field {
2475 padding: 0;
2476 }
2477
2478 .csf-field .chosen-container-single .chosen-single {
2479 height: 28px;
2480 line-height: 26px;
2481 }
2482 .csf-field .chosen-container-single .chosen-single abbr {
2483 top: 0;
2484 right: 20px;
2485 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2486 font-weight: 900;
2487 font-size: 12px;
2488 height: 100%;
2489 width: 18px;
2490 color: #aaa;
2491 text-align: center;
2492 background: none;
2493 }
2494 .csf-field .chosen-container-single .chosen-single abbr:before {
2495 content: "\f00d";
2496 }
2497 .csf-field .chosen-container-single .chosen-single abbr:hover {
2498 color: #555;
2499 }
2500 .csf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
2501 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2502 font-weight: 900;
2503 font-size: 12px;
2504 height: 100%;
2505 width: 18px;
2506 color: #aaa;
2507 text-align: center;
2508 background: none;
2509 }
2510 .csf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
2511 content: "\f00d";
2512 display: inline-block;
2513 padding-top: 3px;
2514 }
2515 .csf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
2516 color: #555;
2517 }
2518 .csf-field .chosen-container-single .chosen-single div b {
2519 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2520 font-weight: 900;
2521 font-size: 14px;
2522 color: #aaa;
2523 background: none;
2524 }
2525 .csf-field .chosen-container-single .chosen-single div b:before {
2526 content: "\f107";
2527 }
2528 .csf-field .chosen-container-single .chosen-single div b:hover {
2529 color: #555;
2530 }
2531 .csf-field .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2532 border: 1px dashed #aaa;
2533 margin: 3px 5px 3px 0;
2534 }
2535 .csf-field .chosen-container-multi .ui-sortable li.search-choice span {
2536 cursor: move;
2537 }
2538 .csf-field .chosen-container-active.chosen-with-drop .chosen-single div b:before {
2539 content: "\f106";
2540 }
2541 .csf-field .chosen-container-single .chosen-single-with-deselect span {
2542 margin-right: 40px;
2543 }
2544 .csf-field .chosen-container-single .chosen-search input[type=text] {
2545 background: none;
2546 }
2547 .csf-field .chosen-container-single .chosen-search:before {
2548 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
2549 font-weight: 900;
2550 font-size: 11px;
2551 content: "\f002";
2552 position: absolute;
2553 right: 12px;
2554 top: 10px;
2555 color: #aaa;
2556 }
2557 .csf-field .wp-picker-container {
2558 display: inline-block;
2559 }
2560 .csf-field .wp-picker-container .wp-color-result.button {
2561 margin-bottom: 0;
2562 }
2563 .csf-field .csf--transparent-wrap {
2564 display: none;
2565 position: relative;
2566 top: -1px;
2567 width: 235px;
2568 padding: 9px 10px;
2569 border: 1px solid #dfdfdf;
2570 border-top: none;
2571 background-color: #fff;
2572 }
2573 .csf-field .wp-picker-active .csf--transparent-wrap {
2574 display: block;
2575 }
2576 .csf-field .csf--transparent-slider {
2577 position: absolute;
2578 width: 190px;
2579 margin-left: 2px;
2580 height: 18px;
2581 }
2582 .csf-field .csf--transparent-slider .ui-slider-handle {
2583 position: absolute;
2584 top: -3px;
2585 bottom: -3px;
2586 z-index: 5;
2587 border-color: #aaa;
2588 border-style: solid;
2589 border-width: 4px 3px;
2590 width: 10px;
2591 height: 16px;
2592 margin: 0 -5px;
2593 background: none;
2594 cursor: ew-resize;
2595 opacity: 0.9;
2596 border-radius: 4px;
2597 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2598 }
2599 .csf-field .csf--transparent-slider .ui-slider-handle:before {
2600 content: " ";
2601 position: absolute;
2602 left: -2px;
2603 right: -2px;
2604 top: -3px;
2605 bottom: -3px;
2606 border: 2px solid #fff;
2607 border-radius: 3px;
2608 }
2609 .csf-field .csf--transparent-offset {
2610 height: 18px;
2611 width: 200px;
2612 background: url(../images/checkerboard.png) repeat-y center left scroll #fff;
2613 border-radius: 2px;
2614 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
2615 }
2616 .csf-field .csf--transparent-text {
2617 position: absolute;
2618 top: 12px;
2619 right: 10px;
2620 width: 30px;
2621 font-size: 12px;
2622 line-height: 12px;
2623 text-align: center;
2624 color: #999;
2625 }
2626 .csf-field .csf--transparent-button {
2627 cursor: pointer;
2628 user-select: none;
2629 margin-top: 10px;
2630 font-size: 11px;
2631 text-align: center;
2632 border-radius: 2px;
2633 padding: 3px 7px;
2634 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
2635 letter-spacing: 0.2px;
2636 color: #777;
2637 border: 1px solid #ccc;
2638 background-color: #f7f7f7;
2639 transition: background-color 0.2s, border-color 0.2s, color 0.2s;
2640 }
2641 .csf-field .csf--transparent-active .wp-color-result {
2642 background-image: url(../images/checkerboard.png);
2643 background-size: 135px;
2644 background-position: center left;
2645 background-color: transparent !important;
2646 }
2647 .csf-field .csf--transparent-active .csf--transparent-button {
2648 color: #fff;
2649 border-color: #3ea032;
2650 background-color: #4fb845;
2651 }
2652 .csf-field .csf--transparent-active .fa:before {
2653 content: "\f205";
2654 }
2655
2656 /**
2657 * 04. Widget
2658 */
2659 .csf-widgets > .csf-field {
2660 position: relative;
2661 top: -1px;
2662 margin-left: -15px;
2663 margin-right: -15px;
2664 padding: 12px 15px;
2665 }
2666 .csf-widgets > .csf-field .csf-title {
2667 float: none;
2668 width: 100%;
2669 margin-bottom: 5px;
2670 }
2671 .csf-widgets > .csf-field .csf-fieldset {
2672 float: none;
2673 width: 100%;
2674 }
2675 .csf-widgets .csf-field-text input {
2676 width: 100%;
2677 }
2678 .csf-widgets .csf-field-notice .csf-notice {
2679 padding: 15px;
2680 }
2681
2682 .control-section .csf-widgets > .csf-field {
2683 margin-left: -10px;
2684 margin-right: -10px;
2685 padding: 10px 12px;
2686 }
2687
2688 .wp-block .csf-widgets {
2689 font-size: 13px;
2690 }
2691 .wp-block .csf-widgets > .csf-field {
2692 margin-left: -10px;
2693 margin-right: -10px;
2694 }
2695 .wp-block .csf-widgets > .csf-field .button-primary {
2696 color: #fff;
2697 }
2698 .wp-block .csf-widgets > .csf-field > .csf-title > h4 {
2699 font-size: 13px;
2700 }
2701
2702 /**
2703 * 05. Widget
2704 */
2705 .control-section .csf-field {
2706 padding: 0;
2707 }
2708 .control-section .csf-field .csf-title {
2709 float: none;
2710 width: 100%;
2711 margin-bottom: 6px;
2712 }
2713 .control-section .csf-field .csf-title h4 {
2714 display: block;
2715 font-size: 13px;
2716 line-height: 1;
2717 font-weight: 600;
2718 color: inherit;
2719 }
2720 .control-section .csf-field .csf-fieldset {
2721 float: none;
2722 width: 100%;
2723 }
2724 .control-section .csf-help {
2725 top: -5px;
2726 right: -5px;
2727 }
2728 .control-section .csf-field-select select {
2729 width: 100%;
2730 }
2731 .control-section .csf-field-heading {
2732 color: inherit;
2733 font-size: 14px;
2734 line-height: 1em;
2735 margin-right: -15px;
2736 margin-left: -15px;
2737 padding: 15px;
2738 }
2739 .control-section .csf-field-subheading {
2740 color: inherit;
2741 font-size: 11px;
2742 margin-right: -15px;
2743 margin-left: -15px;
2744 padding: 10px 15px;
2745 }
2746 .control-section .csf-subtitle-text {
2747 margin-top: 4px;
2748 font-size: 12px;
2749 }
2750 .control-section .csf-field-submessage .csf-submessage {
2751 margin-right: -15px;
2752 margin-left: -15px;
2753 padding: 15px;
2754 }
2755 .control-section .csf-fieldset .csf-field-submessage .csf-submessage,
2756 .control-section .csf-fieldset .csf-field-heading,
2757 .control-section .csf-fieldset .csf-field-subheading {
2758 margin-left: 0;
2759 margin-right: 0;
2760 }
2761 .control-section .csf-field-date label,
2762 .control-section .csf-field-datetime label {
2763 display: block;
2764 }
2765 .control-section .csf-field-date .csf--to,
2766 .control-section .csf-field-datetime .csf--to {
2767 margin-top: 4px;
2768 margin-left: 0;
2769 }
2770 .control-section .csf-field-sorter ul li {
2771 padding: 5px;
2772 }
2773 .control-section .csf-field-sorter .csf-modules {
2774 float: none;
2775 width: 100%;
2776 }
2777 .control-section .csf-field-sorter .csf-modules:first-child {
2778 padding-right: 0;
2779 padding-bottom: 15px;
2780 }
2781 .control-section .csf-field-background .csf--background-attributes {
2782 flex-direction: column;
2783 }
2784 .control-section .csf-field-spacing input {
2785 width: 90px;
2786 }
2787 .control-section .csf-field-border .csf--input {
2788 flex: 1 50%;
2789 }
2790 .control-section .csf-field-border input,
2791 .control-section .csf-field-border select {
2792 width: 100%;
2793 }
2794 .control-section .csf-field-spinner input {
2795 width: 50px;
2796 }
2797 .control-section .csf-field-number .csf--wrap {
2798 width: 100%;
2799 }
2800 .control-section .csf-field-backup .csf-export-data {
2801 display: none;
2802 }
2803 .control-section .csf-field-fieldset .csf-fieldset-content {
2804 border-color: #e5e5e5;
2805 }
2806 .control-section .csf-tabbed-content > .csf-field,
2807 .control-section .csf-sortable-content > .csf-field,
2808 .control-section .csf-repeater-content > .csf-field,
2809 .control-section .csf-fieldset-content > .csf-field,
2810 .control-section .csf-cloneable-content > .csf-field,
2811 .control-section .csf-accordion-content > .csf-field {
2812 padding: 10px;
2813 }
2814 .control-section .csf-tabbed-content > .csf-field .csf-title,
2815 .control-section .csf-sortable-content > .csf-field .csf-title,
2816 .control-section .csf-repeater-content > .csf-field .csf-title,
2817 .control-section .csf-fieldset-content > .csf-field .csf-title,
2818 .control-section .csf-cloneable-content > .csf-field .csf-title,
2819 .control-section .csf-accordion-content > .csf-field .csf-title {
2820 margin-bottom: 5px;
2821 }
2822 .control-section .csf-tabbed-content > .csf-field h4,
2823 .control-section .csf-sortable-content > .csf-field h4,
2824 .control-section .csf-repeater-content > .csf-field h4,
2825 .control-section .csf-fieldset-content > .csf-field h4,
2826 .control-section .csf-cloneable-content > .csf-field h4,
2827 .control-section .csf-accordion-content > .csf-field h4 {
2828 font-size: 12px;
2829 }
2830 .control-section .csf-depend-hidden.csf-depend-on {
2831 display: none !important;
2832 }
2833 .control-section .csf-depend-visible.csf-depend-on {
2834 border-top: 0 !important;
2835 }
2836
2837 /**
2838 * 06. Taxonomy
2839 */
2840 .csf-taxonomy {
2841 max-width: 95%;
2842 }
2843 .csf-taxonomy > .csf-field {
2844 border-top: none !important;
2845 }
2846 .csf-taxonomy > .csf-field-heading {
2847 font-size: 1.1em;
2848 padding: 20px !important;
2849 border: 1px solid #ddd;
2850 }
2851 .csf-taxonomy > .csf-field-subheading {
2852 font-size: 12px;
2853 padding: 15px !important;
2854 border: 1px solid #ddd;
2855 }
2856 .csf-taxonomy > .csf-field-submessage .csf-submessage {
2857 padding: 15px;
2858 border-left-width: 1px;
2859 border-left-style: solid;
2860 border-right-width: 1px;
2861 border-right-style: solid;
2862 }
2863 .csf-taxonomy > .csf-field-notice {
2864 background-color: transparent;
2865 }
2866 .csf-taxonomy .csf-section-title {
2867 display: block;
2868 padding: 15px;
2869 background-color: #f9f9f9;
2870 border: 1px solid #e5e5e5;
2871 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2872 }
2873
2874 .csf-taxonomy-add-fields > .csf-field {
2875 padding: 8px 0;
2876 }
2877 .csf-taxonomy-add-fields > .csf-field > .csf-title {
2878 float: none;
2879 width: 100%;
2880 padding: 2px 2px 4px 0;
2881 }
2882 .csf-taxonomy-add-fields > .csf-field > .csf-title h4 {
2883 font-size: 12px;
2884 font-weight: normal;
2885 }
2886 .csf-taxonomy-add-fields > .csf-field > .csf-fieldset {
2887 float: none;
2888 width: 100%;
2889 }
2890 .csf-taxonomy-add-fields > .csf-field > .csf-fieldset > .csf-help {
2891 right: -5px;
2892 }
2893 .csf-taxonomy-add-fields + p.submit {
2894 margin-top: 0;
2895 }
2896
2897 .csf-taxonomy-edit-fields > .csf-field {
2898 padding: 20px 0;
2899 }
2900 .csf-taxonomy-edit-fields > .csf-field > .csf-title {
2901 width: 200px;
2902 }
2903 .csf-taxonomy-edit-fields > .csf-field > .csf-title h4 {
2904 font-size: 14px;
2905 font-weight: 600;
2906 line-height: 1.3;
2907 display: inline-block;
2908 vertical-align: middle;
2909 }
2910 .csf-taxonomy-edit-fields > .csf-field > .csf-fieldset {
2911 width: calc(100% - 220px);
2912 }
2913 .csf-taxonomy-edit-fields > .csf-field > .csf-fieldset > .csf-help {
2914 top: -5px;
2915 right: -5px;
2916 }
2917 .csf-taxonomy-edit-fields > .csf-field-submessage {
2918 margin: 20px 0;
2919 }
2920 .csf-taxonomy-edit-fields > .csf-field-subheading,
2921 .csf-taxonomy-edit-fields > .csf-field-heading {
2922 margin: 20px 0;
2923 border: 1px solid #ddd;
2924 }
2925
2926 /**
2927 * 08. Nav Menu
2928 */
2929 .csf-nav-menu-options {
2930 clear: both;
2931 float: left;
2932 width: 100%;
2933 }
2934 .csf-nav-menu-options > .csf-fields {
2935 margin: 10px -10px;
2936 border-top: 1px solid #eee;
2937 border-bottom: 1px solid #eee;
2938 }
2939 .csf-nav-menu-options > .csf-fields > .csf-field {
2940 padding: 12px;
2941 }
2942 .csf-nav-menu-options > .csf-fields > .csf-field .csf-title {
2943 float: none;
2944 width: 100%;
2945 margin-bottom: 5px;
2946 }
2947 .csf-nav-menu-options > .csf-fields > .csf-field .csf-fieldset {
2948 float: none;
2949 width: 100%;
2950 }
2951 .csf-nav-menu-options .csf-field-text input {
2952 width: 100%;
2953 }
2954 .csf-nav-menu-options .csf-field-notice .csf-notice {
2955 padding: 15px;
2956 }
2957
2958 .csf-nav-menu-title {
2959 padding: 12px;
2960 background-color: #f5f5f5;
2961 border-top: 1px solid #eee;
2962 border-bottom: 1px solid #eee;
2963 }
2964 .csf-nav-menu-title:first-child {
2965 border-top: 0;
2966 }
2967 .csf-nav-menu-title h4 {
2968 margin: 0;
2969 padding: 0;
2970 color: #23282d;
2971 }
2972
2973 .csf-nav-menu-icon {
2974 margin-right: 5px;
2975 }
2976
2977 /**
2978 * 06. Profile
2979 */
2980 .csf-profile-options > h2 > .fa {
2981 padding-right: 7px;
2982 }
2983 .csf-profile-options > .csf-field {
2984 max-width: 750px;
2985 padding: 15px 0;
2986 border-top: none !important;
2987 }
2988 .csf-profile-options > .csf-field > .csf-title {
2989 width: 200px;
2990 }
2991 .csf-profile-options > .csf-field > .csf-title h4 {
2992 font-size: 14px;
2993 font-weight: 600;
2994 line-height: 1.3;
2995 display: inline-block;
2996 vertical-align: middle;
2997 }
2998 .csf-profile-options > .csf-field > .csf-fieldset {
2999 width: calc(100% - 220px);
3000 }
3001 .csf-profile-options > .csf-field > .csf-fieldset > .csf-help {
3002 top: -15px;
3003 right: -5px;
3004 }
3005 .csf-profile-options > .csf-field-heading {
3006 font-size: 1.1em;
3007 }
3008 .csf-profile-options > .csf-field-subheading {
3009 font-size: 12px;
3010 }
3011 .csf-profile-options > .csf-field-subheading,
3012 .csf-profile-options > .csf-field-heading {
3013 margin: 10px 0;
3014 padding: 15px !important;
3015 border: 1px solid #ddd;
3016 }
3017 .csf-profile-options > .csf-field-submessage {
3018 margin: 20px 0;
3019 }
3020 .csf-profile-options > .csf-field-submessage .csf-submessage {
3021 padding: 10px;
3022 border-left-width: 1px;
3023 border-left-style: solid;
3024 border-right-width: 1px;
3025 border-right-style: solid;
3026 }
3027 .csf-profile-options > .csf-field-notice {
3028 background-color: transparent;
3029 }
3030
3031 /**
3032 * 09. Modal
3033 */
3034 .csf-modal {
3035 position: fixed;
3036 z-index: 100101;
3037 top: 0;
3038 left: 0;
3039 width: 100%;
3040 height: 100%;
3041 }
3042 .csf-modal.hidden {
3043 display: none;
3044 }
3045
3046 .csf-modal-icon {
3047 z-index: 100102;
3048 }
3049
3050 .csf-modal-table {
3051 display: table;
3052 width: 100%;
3053 height: 100%;
3054 }
3055
3056 .csf-modal-table-cell {
3057 display: table-cell;
3058 vertical-align: middle;
3059 margin: 100px 0;
3060 }
3061
3062 .csf-modal-inner {
3063 position: relative;
3064 z-index: 10;
3065 width: 760px;
3066 height: 750px;
3067 margin: 0 auto;
3068 background-color: #fff;
3069 }
3070
3071 .csf-modal-content {
3072 position: relative;
3073 overflow: hidden;
3074 overflow-y: auto;
3075 height: 595px;
3076 }
3077 .csf-modal-content .csf-shortcode-button {
3078 display: none;
3079 }
3080 .csf-modal-content .csf-field {
3081 padding: 15px 30px 15px 15px;
3082 }
3083 .csf-modal-content a:active, .csf-modal-content a:focus {
3084 outline: none;
3085 box-shadow: none;
3086 }
3087 .csf-modal-content h4 {
3088 font-size: 13px;
3089 }
3090 .csf-modal-content h4 small {
3091 font-style: italic;
3092 font-weight: 400;
3093 color: #aaa;
3094 }
3095
3096 .csf-modal-title {
3097 position: relative;
3098 background-color: #fcfcfc;
3099 border-bottom: 1px solid #ddd;
3100 height: 36px;
3101 font-size: 16px;
3102 font-weight: 600;
3103 line-height: 36px;
3104 margin: 0;
3105 padding: 0 36px 0 16px;
3106 }
3107
3108 .csf-modal-header {
3109 width: 100%;
3110 padding: 14px 0;
3111 background-color: #f5f5f5;
3112 border-bottom: 1px solid #ddd;
3113 }
3114 .csf-modal-header select {
3115 display: block;
3116 width: 250px;
3117 margin: 0 auto;
3118 font-size: 13px;
3119 line-height: 1;
3120 height: 30px;
3121 min-height: 30px;
3122 background-color: #fff;
3123 }
3124
3125 .csf-modal-close {
3126 color: #666;
3127 padding: 0;
3128 position: absolute;
3129 top: 0;
3130 right: 0;
3131 width: 36px;
3132 height: 36px;
3133 text-align: center;
3134 background: none;
3135 border: none;
3136 cursor: pointer;
3137 }
3138 .csf-modal-close:before {
3139 font: normal 20px/36px dashicons;
3140 content: "\f158";
3141 vertical-align: top;
3142 width: 36px;
3143 height: 36px;
3144 }
3145 .csf-modal-close:hover {
3146 opacity: 0.5;
3147 }
3148
3149 .csf-modal-insert-wrapper {
3150 text-align: center;
3151 width: 100%;
3152 padding: 15px 0;
3153 background-color: #f5f5f5;
3154 border-top: 1px solid #ddd;
3155 }
3156
3157 .csf-modal-overlay {
3158 position: absolute;
3159 top: 0;
3160 left: 0;
3161 width: 100%;
3162 height: 100%;
3163 background-color: #000;
3164 opacity: 0.5;
3165 }
3166
3167 /**
3168 * 09. 01. Shortcode Modal
3169 */
3170 .csf--repeatable {
3171 padding: 15px 15px 0 15px;
3172 }
3173
3174 .csf--repeat-button-block {
3175 text-align: center;
3176 padding-bottom: 15px;
3177 }
3178
3179 .csf--repeat-shortcode {
3180 position: relative;
3181 margin-bottom: 15px;
3182 border: 1px dashed #ddd;
3183 }
3184 .csf--repeat-shortcode:first-child .csf-repeat-remove {
3185 display: none;
3186 }
3187 .csf--repeat-shortcode .csf-repeat-remove {
3188 position: absolute;
3189 right: 10px;
3190 top: 10px;
3191 z-index: 10;
3192 cursor: pointer;
3193 display: inline-block;
3194 font-size: 11px;
3195 width: 18px;
3196 height: 18px;
3197 line-height: 18px;
3198 text-align: center;
3199 border-radius: 2px;
3200 color: #fff;
3201 background-color: #e14d43;
3202 opacity: 0.5;
3203 }
3204 .csf--repeat-shortcode .csf-repeat-remove:hover {
3205 opacity: 0.5;
3206 }
3207
3208 .csf-shortcode-single .csf-modal-inner {
3209 height: 750px;
3210 }
3211 .csf-shortcode-single .csf-modal-content {
3212 height: 652px;
3213 }
3214
3215 .elementor-editor-active .csf-shortcode-button {
3216 margin-left: 5px;
3217 }
3218 .elementor-editor-active .csf-modal .hidden {
3219 display: none !important;
3220 }
3221
3222 /**
3223 * 09. 02. Gutenberg Modal
3224 */
3225 .csf-shortcode-block {
3226 text-align: center;
3227 padding: 14px;
3228 font-size: 13px;
3229 background-color: #f5f5f5;
3230 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3231 }
3232
3233 .csf-shortcode-block .components-button {
3234 margin-bottom: 10px;
3235 }
3236
3237 /**
3238 * 09. 03. Icon Modal
3239 */
3240 .csf-modal-icon .csf-icon-title {
3241 padding: 15px 0;
3242 margin: 4px;
3243 font-size: 14px;
3244 font-weight: bold;
3245 text-align: center;
3246 border: 1px solid #eee;
3247 background-color: #f7f7f7;
3248 }
3249 .csf-modal-icon .csf-modal-header {
3250 text-align: center;
3251 }
3252 .csf-modal-icon .csf-icon-search {
3253 width: 50%;
3254 height: 40px;
3255 line-height: 40px;
3256 }
3257 .csf-modal-icon i {
3258 cursor: pointer;
3259 display: inline-block;
3260 margin: 4px;
3261 width: 35px;
3262 height: 35px;
3263 line-height: 35px;
3264 font-size: 16px;
3265 color: #555;
3266 text-align: center;
3267 border: 1px solid #ccc;
3268 background-color: #f7f7f7;
3269 border-radius: 2px;
3270 box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
3271 }
3272 .csf-modal-icon i:hover {
3273 color: #fff;
3274 border-color: #222;
3275 background-color: #222;
3276 }
3277 .csf-modal-icon .csf-modal-content {
3278 padding: 10px;
3279 height: 618px;
3280 }
3281 .csf-modal-icon .csf-error-text {
3282 padding: 10px;
3283 }
3284
3285 .csf-modal-loading {
3286 display: none;
3287 position: absolute;
3288 left: 15px;
3289 top: 15px;
3290 }
3291
3292 .csf-loading {
3293 position: relative;
3294 width: 20px;
3295 height: 20px;
3296 background: #ccc;
3297 border-radius: 20px;
3298 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3299 }
3300 .csf-loading:after {
3301 position: absolute;
3302 top: 50%;
3303 left: 50%;
3304 width: 4px;
3305 height: 4px;
3306 content: "";
3307 margin-top: -2px;
3308 margin-left: -2px;
3309 background-color: white;
3310 animation-duration: 0.5s;
3311 animation-iteration-count: infinite;
3312 animation-timing-function: linear;
3313 animation-name: csfLoader;
3314 border-radius: 4px;
3315 }
3316
3317 @keyframes csfLoader {
3318 0% {
3319 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3320 }
3321 100% {
3322 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3323 }
3324 }
3325 /**
3326 * 10. Helper
3327 */
3328 .csf-subtitle-text {
3329 margin-top: 6px;
3330 font-weight: 400;
3331 color: #999;
3332 }
3333
3334 .csf-desc-text {
3335 clear: both;
3336 float: left;
3337 width: 100%;
3338 margin-top: 6px;
3339 font-weight: 400;
3340 color: #999;
3341 }
3342
3343 .csf-error-text {
3344 margin-top: 6px;
3345 color: #d02c21;
3346 }
3347
3348 .csf-before-text {
3349 margin-bottom: 6px;
3350 }
3351
3352 .csf-after-text {
3353 margin-top: 6px;
3354 }
3355
3356 .csf-metabox-hide {
3357 display: none !important;
3358 }
3359
3360 .csf-metabox-show {
3361 display: block !important;
3362 }
3363
3364 .csf-depend-hidden.csf-depend-on {
3365 display: none;
3366 }
3367
3368 .csf-depend-visible.csf-depend-on {
3369 display: block;
3370 opacity: 0.75;
3371 filter: grayscale(1);
3372 user-select: none;
3373 border-top: 1px solid #eee;
3374 }
3375 .csf-depend-visible.csf-depend-on .clear:before {
3376 content: "";
3377 left: 0;
3378 top: 0;
3379 right: 0;
3380 bottom: 0;
3381 position: absolute;
3382 background-color: #eee;
3383 opacity: 0.25;
3384 z-index: 10;
3385 }
3386
3387 .csf-warning-primary {
3388 color: #fff !important;
3389 border-color: #dc3545 !important;
3390 background: #dc3545 !important;
3391 }
3392 .csf-warning-primary:hover, .csf-warning-primary:focus {
3393 border-color: #bd2130 !important;
3394 background: #bd2130 !important;
3395 }
3396 .csf-warning-primary:focus {
3397 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #bd2130 !important;
3398 }
3399 .csf-warning-primary:active {
3400 border-color: #bd2130 !important;
3401 background: #bd2130 !important;
3402 }
3403
3404 .csf-form-result {
3405 display: none;
3406 float: left;
3407 padding: 0 8px;
3408 margin-right: 4px;
3409 font-size: 11px;
3410 line-height: 30px;
3411 user-select: none;
3412 border-radius: 2px;
3413 }
3414
3415 .csf-form-show {
3416 display: block;
3417 }
3418
3419 .csf-form-success {
3420 color: #fff;
3421 background-color: #46b450;
3422 }
3423
3424 .csf-form-warning {
3425 color: #8a6d3b;
3426 background-color: #faebcc;
3427 }
3428
3429 .csf-label-error {
3430 position: relative;
3431 top: -2px;
3432 display: inline-block;
3433 font-size: 10px;
3434 line-height: 10px;
3435 height: 10px;
3436 width: 10px;
3437 padding: 1px;
3438 font-style: normal;
3439 text-align: center;
3440 color: #fff;
3441 vertical-align: middle;
3442 background-color: #e10000;
3443 border-radius: 2px;
3444 }
3445
3446 .csf-no-option {
3447 padding: 30px;
3448 }
3449
3450 .csf-input-number {
3451 -moz-appearance: textfield;
3452 }
3453
3454 .csf-input-number::-webkit-inner-spin-button,
3455 .csf-input-number::-webkit-outer-spin-button {
3456 -webkit-appearance: none;
3457 margin: 0;
3458 }
3459
3460 .csf-fa5-shims .csf .fas,
3461 .csf-fa5-shims .csf .far,
3462 .csf-fa5-shims .csf .fab {
3463 font-family: "FontAwesome";
3464 font-style: normal;
3465 }
3466
3467 /**
3468 * 11. Welcome Page
3469 */
3470 .csf-welcome-wrap {
3471 position: relative;
3472 margin: 25px 40px 0 20px;
3473 font-size: 15px;
3474 max-width: 1200px;
3475 }
3476 .csf-welcome-wrap p {
3477 font-size: 14px;
3478 line-height: 1.5;
3479 }
3480 .csf-welcome-wrap h1 {
3481 margin: 0.2em 200px 0 0;
3482 padding: 0;
3483 color: #32373c;
3484 line-height: 1.2em;
3485 font-size: 2.8em;
3486 font-weight: 400;
3487 }
3488 .csf-welcome-wrap .csf-logo {
3489 position: absolute;
3490 overflow: hidden;
3491 top: 0;
3492 right: 0;
3493 height: 160px;
3494 width: 140px;
3495 background-image: linear-gradient(45deg, #2d67cb, #ad19f3);
3496 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgba(0, 0, 0, 0.25);
3497 }
3498 .csf-welcome-wrap .csf-logo .csf--effects i {
3499 position: absolute;
3500 width: 200px;
3501 height: 100px;
3502 background-color: rgba(0, 0, 0, 0.15);
3503 transform: rotate(-45deg);
3504 }
3505 .csf-welcome-wrap .csf-logo .csf--effects i:nth-child(1) {
3506 bottom: -20px;
3507 right: -70px;
3508 }
3509 .csf-welcome-wrap .csf-logo .csf--effects i:nth-child(2) {
3510 bottom: -35px;
3511 right: -80px;
3512 }
3513 .csf-welcome-wrap .csf-logo .csf--effects i:nth-child(3) {
3514 bottom: -50px;
3515 right: -90px;
3516 }
3517 .csf-welcome-wrap .csf-logo .csf--effects i:nth-child(4) {
3518 bottom: -65px;
3519 right: -100px;
3520 }
3521 .csf-welcome-wrap .csf-logo .csf--wp-logos {
3522 position: relative;
3523 padding-top: 25px;
3524 text-align: center;
3525 }
3526 .csf-welcome-wrap .csf-logo .csf--wp-logo {
3527 position: absolute;
3528 left: 20px;
3529 width: 20px;
3530 height: 20px;
3531 background-repeat: no-repeat;
3532 background-position: center center;
3533 background-image: url(../images/wp-logo.svg);
3534 }
3535 .csf-welcome-wrap .csf-logo .csf--wp-plugin-logo {
3536 display: inline-block;
3537 width: 50px;
3538 height: 50px;
3539 border: 3px solid #fff;
3540 background-size: 40px;
3541 background-repeat: no-repeat;
3542 background-position: center center;
3543 background-image: url(../images/wp-plugin-logo.svg);
3544 border-radius: 100%;
3545 vertical-align: middle;
3546 }
3547 .csf-welcome-wrap .csf-logo .csf--text {
3548 position: absolute;
3549 left: 0;
3550 right: 0;
3551 top: 90px;
3552 color: #fff;
3553 font-size: 13px;
3554 line-height: 1.2em;
3555 font-weight: 600;
3556 text-align: center;
3557 text-transform: uppercase;
3558 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
3559 }
3560 .csf-welcome-wrap .csf-logo .csf--version {
3561 top: auto;
3562 left: auto;
3563 right: 8px;
3564 bottom: 4px;
3565 font-size: 11px;
3566 text-transform: lowercase;
3567 }
3568 .csf-welcome-wrap .csf-about-text {
3569 font-weight: 400;
3570 line-height: 1.6em;
3571 font-size: 19px;
3572 margin: 1em 200px 1em 0;
3573 color: #555d66;
3574 }
3575 .csf-welcome-wrap .csf-demo-button {
3576 margin: 1em 200px 2em 0;
3577 }
3578 .csf-welcome-wrap .nav-tab-wrapper {
3579 margin-bottom: 20px;
3580 }
3581 .csf-welcome-wrap ul {
3582 list-style-type: disc;
3583 padding-left: 15px;
3584 }
3585 .csf-welcome-wrap .csf--col {
3586 float: left;
3587 padding-right: 20px;
3588 box-sizing: border-box;
3589 }
3590 .csf-welcome-wrap .csf--col-2 {
3591 width: 50%;
3592 }
3593 .csf-welcome-wrap .csf--col-3 {
3594 width: 33.333%;
3595 }
3596 .csf-welcome-wrap .csf--col-4 {
3597 width: 25%;
3598 }
3599 .csf-welcome-wrap .csf--col-5 {
3600 width: 20%;
3601 }
3602 .csf-welcome-wrap .csf--col-last {
3603 padding-right: 0;
3604 }
3605 .csf-welcome-wrap .csf--col-upgrade {
3606 padding: 10px 0;
3607 text-align: center;
3608 border-top: 1px solid #e5e5e5;
3609 }
3610
3611 .csf--table-compare thead td,
3612 .csf--table-compare tfoot td {
3613 text-align: center;
3614 }
3615 .csf--table-compare td {
3616 font-size: 14px;
3617 text-align: center;
3618 vertical-align: middle;
3619 padding: 10px;
3620 }
3621 .csf--table-compare td:first-child {
3622 text-align: left;
3623 }
3624 .csf--table-compare tfoot td {
3625 padding: 15px 0;
3626 }
3627 .csf--table-compare .fa {
3628 font-size: 18px;
3629 }
3630 .csf--table-compare .fa-check-circle {
3631 color: #46b450;
3632 }
3633 .csf--table-compare .fa-times-circle {
3634 color: #dc3232;
3635 }
3636
3637 .csf-welcome-cols {
3638 clear: both;
3639 margin: 20px 0;
3640 background-color: #fff;
3641 padding: 0 0;
3642 border-radius: 2px;
3643 border: 1px solid #e5e5e5;
3644 }
3645 .csf-welcome-cols .csf--col {
3646 width: 33.333%;
3647 float: left;
3648 padding: 20px;
3649 text-align: center;
3650 box-sizing: border-box;
3651 min-height: 200px;
3652 border-right: 1px solid #e5e5e5;
3653 }
3654 .csf-welcome-cols .csf--left,
3655 .csf-welcome-cols .csf--block {
3656 float: left;
3657 width: 20%;
3658 padding: 0 30px;
3659 text-align: center;
3660 box-sizing: border-box;
3661 }
3662 .csf-welcome-cols .csf--block {
3663 width: 80%;
3664 }
3665 .csf-welcome-cols .csf--col-first {
3666 border-bottom: 1px solid #e5e5e5;
3667 }
3668 .csf-welcome-cols .csf--last {
3669 border-right: none;
3670 }
3671 .csf-welcome-cols .csf--space {
3672 height: 20px;
3673 }
3674 .csf-welcome-cols .csf--icon {
3675 display: inline-block;
3676 font-size: 20px;
3677 width: 30px;
3678 height: 30px;
3679 line-height: 30px;
3680 text-align: center;
3681 margin-bottom: 10px;
3682 color: #fff;
3683 background-color: #555;
3684 border-radius: 30px;
3685 }
3686 .csf-welcome-cols .csf--active {
3687 background-color: #5cb85c;
3688 }
3689 .csf-welcome-cols .csf--deactive {
3690 background-color: #e14d43;
3691 }
3692 .csf-welcome-cols .csf--title {
3693 font-weight: bold;
3694 display: block;
3695 }
3696 .csf-welcome-cols p:last-child {
3697 margin-bottom: 0;
3698 }
3699
3700 .csf-features-cols .csf--key-features {
3701 width: 30%;
3702 }
3703 .csf-features-cols .csf--available-fields {
3704 width: 70%;
3705 }
3706
3707 .csf-code-block {
3708 margin: 20px 0;
3709 padding: 5px 20px;
3710 background-color: #fff;
3711 border-radius: 2px;
3712 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
3713 }
3714 .csf-code-block pre {
3715 font-size: 13px;
3716 color: #0073aa;
3717 }
3718 .csf-code-block pre span {
3719 color: #999;
3720 }
3721
3722 .csf--table-fields td {
3723 font-size: 14px;
3724 }
3725
3726 .csf--upgrade a {
3727 color: #5cb85c;
3728 font-weight: bold;
3729 }
3730 .csf--upgrade a:focus, .csf--upgrade a:hover {
3731 color: #4aa14a;
3732 outline: none;
3733 box-shadow: none;
3734 }
3735
3736 @media only screen and (max-width: 782px) {
3737 .csf-welcome-cols .csf--col {
3738 width: 100%;
3739 min-height: auto;
3740 border-right: none;
3741 border-bottom: 1px solid #e5e5e5;
3742 }
3743
3744 .csf-features-cols .csf--key-features {
3745 width: 100%;
3746 }
3747 .csf-features-cols .csf--available-fields {
3748 width: 100%;
3749 }
3750 }
3751 /**
3752 * 12. Responsive
3753 */
3754 @media only screen and (max-width: 1200px) {
3755 .csf-metabox .csf-field .csf-title {
3756 float: none;
3757 width: 100%;
3758 margin-bottom: 10px;
3759 }
3760 .csf-metabox .csf-field .csf-fieldset {
3761 float: none;
3762 width: 100%;
3763 }
3764 }
3765 @media only screen and (max-width: 782px) {
3766 .csf-header-inner {
3767 text-align: center;
3768 }
3769 .csf-header-inner h1 {
3770 width: 100%;
3771 margin-bottom: 10px;
3772 }
3773
3774 .csf-form-result {
3775 float: none;
3776 margin-right: 0;
3777 margin-bottom: 10px;
3778 }
3779
3780 .csf-search,
3781 .csf-header-right,
3782 .csf-header-left {
3783 width: 100%;
3784 }
3785
3786 .csf-search {
3787 text-align: center;
3788 margin-bottom: 15px;
3789 }
3790
3791 .csf-footer {
3792 text-align: center;
3793 }
3794
3795 .csf-buttons {
3796 float: none;
3797 }
3798
3799 .csf-copyright {
3800 float: none;
3801 margin-top: 10px;
3802 }
3803
3804 .csf-nav,
3805 .csf-expand-all,
3806 .csf-reset-section,
3807 .csf-nav-background {
3808 display: none !important;
3809 }
3810
3811 .csf-nav-normal + .csf-content {
3812 margin-left: 0;
3813 }
3814
3815 .csf-section-title,
3816 .csf-section {
3817 display: block !important;
3818 }
3819
3820 .csf-field .csf-title {
3821 float: none;
3822 width: 100%;
3823 margin-bottom: 10px;
3824 }
3825 .csf-field .csf-fieldset {
3826 float: none;
3827 width: 100%;
3828 }
3829
3830 .csf-field-color .button.wp-picker-clear {
3831 padding: 0 8px;
3832 line-height: 2.14285714;
3833 min-height: 32px;
3834 }
3835
3836 .csf-profile-options > .csf-field > .csf-title,
3837 .csf-taxonomy-edit-fields > .csf-field > .csf-title {
3838 float: none;
3839 width: 100%;
3840 margin-bottom: 10px;
3841 }
3842 .csf-profile-options > .csf-field > .csf-fieldset,
3843 .csf-taxonomy-edit-fields > .csf-field > .csf-fieldset {
3844 float: none;
3845 width: 100%;
3846 }
3847
3848 .csf-nav-menu-options > .csf-fields {
3849 margin-left: -10px;
3850 margin-right: -10px;
3851 }
3852 .csf-nav-menu-options > .csf-fields > .csf-field {
3853 padding: 10px;
3854 }
3855 }
3856 @media only screen and (max-width: 782px) {
3857 .csf-modal .csf-modal-inner {
3858 width: 90%;
3859 }
3860 }
3861 @media only screen and (max-height: 750px) {
3862 .csf-modal .csf-modal-inner {
3863 height: auto;
3864 }
3865 .csf-modal .csf-modal-content {
3866 height: calc(100vh - 200px);
3867 }
3868 }
3869 /**
3870 * Chosen JS Styles
3871 */
3872 .chosen-container {
3873 position: relative;
3874 display: inline-block;
3875 vertical-align: middle;
3876 font-size: 13px;
3877 user-select: none;
3878 }
3879
3880 .chosen-container * {
3881 box-sizing: border-box;
3882 }
3883
3884 .chosen-container .chosen-drop {
3885 position: absolute;
3886 top: 100%;
3887 z-index: 1010;
3888 width: 100%;
3889 border: 1px solid #aaa;
3890 border-top: 0;
3891 background: #fff;
3892 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
3893 clip: rect(0, 0, 0, 0);
3894 clip-path: inset(100% 100%);
3895 }
3896
3897 .chosen-container.chosen-with-drop .chosen-drop {
3898 clip: auto;
3899 clip-path: none;
3900 }
3901
3902 .chosen-container a {
3903 cursor: pointer;
3904 }
3905
3906 .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
3907 margin-right: 4px;
3908 overflow: hidden;
3909 white-space: nowrap;
3910 text-overflow: ellipsis;
3911 font-weight: normal;
3912 color: #999999;
3913 }
3914
3915 .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
3916 content: ":";
3917 padding-left: 2px;
3918 vertical-align: top;
3919 }
3920
3921 .chosen-container-single .chosen-single {
3922 position: relative;
3923 display: block;
3924 overflow: hidden;
3925 padding: 0 0 0 8px;
3926 height: 25px;
3927 border: 1px solid #aaa;
3928 border-radius: 5px;
3929 background-color: #fff;
3930 background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
3931 background-clip: padding-box;
3932 box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
3933 color: #444;
3934 text-decoration: none;
3935 white-space: nowrap;
3936 line-height: 24px;
3937 }
3938
3939 .chosen-container-single .chosen-default {
3940 color: #999;
3941 }
3942
3943 .chosen-container-single .chosen-single span {
3944 display: block;
3945 overflow: hidden;
3946 margin-right: 26px;
3947 text-overflow: ellipsis;
3948 white-space: nowrap;
3949 }
3950
3951 .chosen-container-single .chosen-single-with-deselect span {
3952 margin-right: 38px;
3953 }
3954
3955 .chosen-container-single .chosen-single abbr {
3956 position: absolute;
3957 top: 6px;
3958 right: 26px;
3959 display: block;
3960 width: 12px;
3961 height: 12px;
3962 font-size: 1px;
3963 }
3964
3965 .chosen-container-single .chosen-single div {
3966 position: absolute;
3967 top: 0;
3968 right: 0;
3969 display: block;
3970 width: 18px;
3971 height: 100%;
3972 }
3973
3974 .chosen-container-single .chosen-single div b {
3975 display: block;
3976 width: 100%;
3977 height: 100%;
3978 }
3979
3980 .chosen-container-single .chosen-search {
3981 position: relative;
3982 z-index: 1010;
3983 margin: 0;
3984 padding: 3px 4px;
3985 white-space: nowrap;
3986 }
3987
3988 .chosen-container-single .chosen-search input[type=text] {
3989 margin: 1px 0;
3990 padding: 4px 20px 4px 5px;
3991 width: 100%;
3992 height: auto;
3993 outline: 0;
3994 border: 1px solid #aaa;
3995 font-size: 1em;
3996 font-family: sans-serif;
3997 line-height: normal;
3998 border-radius: 0;
3999 }
4000
4001 .chosen-container-single .chosen-drop {
4002 margin-top: -1px;
4003 border-radius: 0 0 4px 4px;
4004 background-clip: padding-box;
4005 }
4006
4007 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
4008 position: absolute;
4009 clip: rect(0, 0, 0, 0);
4010 clip-path: inset(100% 100%);
4011 }
4012
4013 .chosen-container .chosen-results {
4014 color: #444;
4015 position: relative;
4016 overflow-x: hidden;
4017 overflow-y: auto;
4018 margin: 0 4px 4px 0;
4019 padding: 0 0 0 4px;
4020 max-height: 240px;
4021 -webkit-overflow-scrolling: touch;
4022 }
4023
4024 .chosen-container .chosen-results li {
4025 display: none;
4026 margin: 0;
4027 padding: 5px 6px;
4028 list-style: none;
4029 line-height: 15px;
4030 word-wrap: break-word;
4031 -webkit-touch-callout: none;
4032 }
4033
4034 .chosen-container .chosen-results li.active-result {
4035 display: list-item;
4036 cursor: pointer;
4037 }
4038
4039 .chosen-container .chosen-results li.disabled-result {
4040 display: list-item;
4041 color: #ccc;
4042 cursor: default;
4043 }
4044
4045 .chosen-container .chosen-results li.highlighted {
4046 background-color: #3875d7;
4047 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
4048 color: #fff;
4049 }
4050
4051 .chosen-container .chosen-results li.no-results {
4052 color: #777;
4053 display: list-item;
4054 background: #f4f4f4;
4055 }
4056
4057 .chosen-container .chosen-results li.group-result {
4058 display: list-item;
4059 font-weight: bold;
4060 cursor: default;
4061 }
4062
4063 .chosen-container .chosen-results li.group-option {
4064 padding-left: 15px;
4065 }
4066
4067 .chosen-container .chosen-results li em {
4068 font-style: normal;
4069 text-decoration: underline;
4070 }
4071
4072 .chosen-container-multi .chosen-choices {
4073 position: relative;
4074 overflow: hidden;
4075 margin: 0;
4076 padding: 0 5px;
4077 width: 100%;
4078 height: auto;
4079 border: 1px solid #aaa;
4080 background-color: #fff;
4081 background-image: linear-gradient(#eee 1%, #fff 15%);
4082 cursor: text;
4083 }
4084
4085 .chosen-container-multi .chosen-choices li {
4086 float: left;
4087 list-style: none;
4088 }
4089
4090 .chosen-container-multi .chosen-choices li.search-field {
4091 margin: 0;
4092 padding: 0;
4093 white-space: nowrap;
4094 }
4095
4096 .chosen-container-multi .chosen-choices li.search-field input[type=text] {
4097 margin: 1px 0;
4098 padding: 0;
4099 outline: 0;
4100 border: 0 !important;
4101 background: transparent !important;
4102 box-shadow: none;
4103 color: #999;
4104 font-size: 100%;
4105 font-family: sans-serif;
4106 line-height: normal;
4107 border-radius: 0;
4108 width: 25px;
4109 height: 25px;
4110 min-height: 25px;
4111 }
4112
4113 .chosen-container-multi .chosen-choices li.search-choice {
4114 position: relative;
4115 margin: 3px 5px 3px 0;
4116 padding: 3px 20px 3px 6px;
4117 border: 1px solid #aaa;
4118 max-width: 100%;
4119 border-radius: 3px;
4120 background-color: #eeeeee;
4121 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
4122 background-size: 100% 19px;
4123 background-repeat: repeat-x;
4124 background-clip: padding-box;
4125 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
4126 color: #333;
4127 line-height: 13px;
4128 cursor: default;
4129 }
4130
4131 .chosen-container-multi .chosen-choices li.search-choice span {
4132 word-wrap: break-word;
4133 white-space: nowrap;
4134 }
4135
4136 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
4137 position: absolute;
4138 top: 0;
4139 right: 0;
4140 display: block;
4141 width: 12px;
4142 height: 12px;
4143 font-size: 1px;
4144 }
4145
4146 .chosen-container-multi .chosen-choices li.search-choice-disabled {
4147 padding-right: 5px;
4148 border: 1px solid #ccc;
4149 background-color: #e4e4e4;
4150 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
4151 color: #666;
4152 }
4153
4154 .chosen-container-multi .chosen-choices li.search-choice-focus {
4155 background: #d4d4d4;
4156 }
4157
4158 .chosen-container-multi .chosen-results {
4159 margin: 0;
4160 padding: 0;
4161 }
4162
4163 .chosen-container-multi .chosen-drop .result-selected {
4164 display: list-item;
4165 color: #ccc;
4166 cursor: default;
4167 }
4168
4169 .chosen-container-active .chosen-single {
4170 border: 1px solid #5897fb;
4171 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4172 }
4173
4174 .chosen-container-active.chosen-with-drop .chosen-single {
4175 border: 1px solid #aaa;
4176 border-bottom-right-radius: 0;
4177 border-bottom-left-radius: 0;
4178 background-image: linear-gradient(#eee 20%, #fff 80%);
4179 box-shadow: 0 1px 0 #fff inset;
4180 }
4181
4182 .chosen-container-active.chosen-with-drop .chosen-single div {
4183 border-left: none;
4184 background: transparent;
4185 }
4186
4187 .chosen-container-active .chosen-choices {
4188 border: 1px solid #5897fb;
4189 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4190 }
4191
4192 .chosen-container-active .chosen-choices li.search-field input[type=text] {
4193 color: #222 !important;
4194 }
4195
4196 .chosen-disabled {
4197 opacity: 0.5 !important;
4198 cursor: default;
4199 }
4200
4201 .chosen-disabled .chosen-single {
4202 cursor: default;
4203 }
4204
4205 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
4206 cursor: default;
4207 }
4208
4209 .chosen-rtl {
4210 text-align: right;
4211 }
4212
4213 .chosen-rtl .chosen-single {
4214 overflow: visible;
4215 padding: 0 8px 0 0;
4216 }
4217
4218 .chosen-rtl .chosen-single span {
4219 margin-right: 0;
4220 margin-left: 26px;
4221 direction: rtl;
4222 }
4223
4224 .chosen-rtl .chosen-single-with-deselect span {
4225 margin-left: 38px;
4226 }
4227
4228 .chosen-rtl .chosen-single div {
4229 right: auto;
4230 left: 3px;
4231 }
4232
4233 .chosen-rtl .chosen-single abbr {
4234 right: auto;
4235 left: 26px;
4236 }
4237
4238 .chosen-rtl .chosen-choices li {
4239 float: right;
4240 }
4241
4242 .chosen-rtl .chosen-choices li.search-field input[type=text] {
4243 direction: rtl;
4244 }
4245
4246 .chosen-rtl .chosen-choices li.search-choice {
4247 margin: 3px 5px 3px 0;
4248 padding: 3px 5px 3px 19px;
4249 }
4250
4251 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
4252 right: auto;
4253 left: 4px;
4254 }
4255
4256 .chosen-rtl.chosen-container-single .chosen-results {
4257 margin: 0 0 4px 4px;
4258 padding: 0 4px 0 0;
4259 }
4260
4261 .chosen-rtl .chosen-results li.group-option {
4262 padding-right: 15px;
4263 padding-left: 0;
4264 }
4265
4266 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
4267 border-right: none;
4268 }
4269
4270 .chosen-rtl .chosen-search input[type=text] {
4271 padding: 4px 5px 4px 20px;
4272 direction: rtl;
4273 }
4274
4275 /**
4276 * Flatpickr
4277 */
4278 .flatpickr-calendar {
4279 background: transparent;
4280 opacity: 0;
4281 display: none;
4282 text-align: center;
4283 visibility: hidden;
4284 padding: 0;
4285 -webkit-animation: none;
4286 animation: none;
4287 direction: ltr;
4288 border: 0;
4289 font-size: 14px;
4290 line-height: 24px;
4291 border-radius: 5px;
4292 position: absolute;
4293 width: 307.875px;
4294 -webkit-box-sizing: border-box;
4295 box-sizing: border-box;
4296 -ms-touch-action: manipulation;
4297 touch-action: manipulation;
4298 background: #fff;
4299 -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
4300 box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
4301 }
4302
4303 .flatpickr-calendar.open,
4304 .flatpickr-calendar.inline {
4305 opacity: 1;
4306 max-height: 640px;
4307 visibility: visible;
4308 }
4309
4310 .flatpickr-calendar.open {
4311 display: inline-block;
4312 z-index: 99999;
4313 }
4314
4315 .flatpickr-calendar.animate.open {
4316 -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4317 animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4318 }
4319
4320 .flatpickr-calendar.inline {
4321 display: block;
4322 position: relative;
4323 top: 2px;
4324 }
4325
4326 .flatpickr-calendar.static {
4327 position: absolute;
4328 top: calc(100% + 2px);
4329 }
4330
4331 .flatpickr-calendar.static.open {
4332 z-index: 999;
4333 display: block;
4334 }
4335
4336 .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
4337 -webkit-box-shadow: none !important;
4338 box-shadow: none !important;
4339 }
4340
4341 .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
4342 -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4343 box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4344 }
4345
4346 .flatpickr-calendar .hasWeeks .dayContainer,
4347 .flatpickr-calendar .hasTime .dayContainer {
4348 border-bottom: 0;
4349 border-bottom-right-radius: 0;
4350 border-bottom-left-radius: 0;
4351 }
4352
4353 .flatpickr-calendar .hasWeeks .dayContainer {
4354 border-left: 0;
4355 }
4356
4357 .flatpickr-calendar.hasTime .flatpickr-time {
4358 height: 40px;
4359 border-top: 1px solid #e6e6e6;
4360 }
4361
4362 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
4363 height: auto;
4364 }
4365
4366 .flatpickr-calendar:before,
4367 .flatpickr-calendar:after {
4368 position: absolute;
4369 display: block;
4370 pointer-events: none;
4371 border: solid transparent;
4372 content: "";
4373 height: 0;
4374 width: 0;
4375 left: 22px;
4376 }
4377
4378 .flatpickr-calendar.rightMost:before,
4379 .flatpickr-calendar.arrowRight:before,
4380 .flatpickr-calendar.rightMost:after,
4381 .flatpickr-calendar.arrowRight:after {
4382 left: auto;
4383 right: 22px;
4384 }
4385
4386 .flatpickr-calendar.arrowCenter:before,
4387 .flatpickr-calendar.arrowCenter:after {
4388 left: 50%;
4389 right: 50%;
4390 }
4391
4392 .flatpickr-calendar:before {
4393 border-width: 5px;
4394 margin: 0 -5px;
4395 }
4396
4397 .flatpickr-calendar:after {
4398 border-width: 4px;
4399 margin: 0 -4px;
4400 }
4401
4402 .flatpickr-calendar.arrowTop:before,
4403 .flatpickr-calendar.arrowTop:after {
4404 bottom: 100%;
4405 }
4406
4407 .flatpickr-calendar.arrowTop:before {
4408 border-bottom-color: #e6e6e6;
4409 }
4410
4411 .flatpickr-calendar.arrowTop:after {
4412 border-bottom-color: #fff;
4413 }
4414
4415 .flatpickr-calendar.arrowBottom:before,
4416 .flatpickr-calendar.arrowBottom:after {
4417 top: 100%;
4418 }
4419
4420 .flatpickr-calendar.arrowBottom:before {
4421 border-top-color: #e6e6e6;
4422 }
4423
4424 .flatpickr-calendar.arrowBottom:after {
4425 border-top-color: #fff;
4426 }
4427
4428 .flatpickr-calendar:focus {
4429 outline: 0;
4430 }
4431
4432 .flatpickr-wrapper {
4433 position: relative;
4434 display: inline-block;
4435 }
4436
4437 .flatpickr-months {
4438 display: -webkit-box;
4439 display: -webkit-flex;
4440 display: -ms-flexbox;
4441 display: flex;
4442 }
4443
4444 .flatpickr-months .flatpickr-month {
4445 background: transparent;
4446 color: rgba(0, 0, 0, 0.9);
4447 fill: rgba(0, 0, 0, 0.9);
4448 height: 34px;
4449 line-height: 1;
4450 text-align: center;
4451 position: relative;
4452 -webkit-user-select: none;
4453 -moz-user-select: none;
4454 -ms-user-select: none;
4455 user-select: none;
4456 overflow: hidden;
4457 -webkit-box-flex: 1;
4458 -webkit-flex: 1;
4459 -ms-flex: 1;
4460 flex: 1;
4461 }
4462
4463 .flatpickr-months .flatpickr-prev-month,
4464 .flatpickr-months .flatpickr-next-month {
4465 text-decoration: none;
4466 cursor: pointer;
4467 position: absolute;
4468 top: 0;
4469 height: 34px;
4470 padding: 10px;
4471 z-index: 3;
4472 color: rgba(0, 0, 0, 0.9);
4473 fill: rgba(0, 0, 0, 0.9);
4474 }
4475
4476 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
4477 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
4478 display: none;
4479 }
4480
4481 .flatpickr-months .flatpickr-prev-month i,
4482 .flatpickr-months .flatpickr-next-month i {
4483 position: relative;
4484 }
4485
4486 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
4487 .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
4488 /*
4489 /*rtl:begin:ignore*/
4490 /*
4491 */
4492 left: 0;
4493 /*
4494 /*rtl:end:ignore*/
4495 /*
4496 */
4497 }
4498
4499 /*
4500 /*rtl:begin:ignore*/
4501 /*
4502 /*rtl:end:ignore*/
4503 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
4504 .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
4505 /*
4506 /*rtl:begin:ignore*/
4507 /*
4508 */
4509 right: 0;
4510 /*
4511 /*rtl:end:ignore*/
4512 /*
4513 */
4514 }
4515
4516 /*
4517 /*rtl:begin:ignore*/
4518 /*
4519 /*rtl:end:ignore*/
4520 .flatpickr-months .flatpickr-prev-month:hover,
4521 .flatpickr-months .flatpickr-next-month:hover {
4522 color: #959ea9;
4523 }
4524
4525 .flatpickr-months .flatpickr-prev-month:hover svg,
4526 .flatpickr-months .flatpickr-next-month:hover svg {
4527 fill: #f64747;
4528 }
4529
4530 .flatpickr-months .flatpickr-prev-month svg,
4531 .flatpickr-months .flatpickr-next-month svg {
4532 width: 14px;
4533 height: 14px;
4534 }
4535
4536 .flatpickr-months .flatpickr-prev-month svg path,
4537 .flatpickr-months .flatpickr-next-month svg path {
4538 -webkit-transition: fill 0.1s;
4539 transition: fill 0.1s;
4540 fill: inherit;
4541 }
4542
4543 .numInputWrapper {
4544 position: relative;
4545 height: auto;
4546 }
4547
4548 .numInputWrapper input,
4549 .numInputWrapper span {
4550 display: inline-block;
4551 }
4552
4553 .numInputWrapper input {
4554 width: 100%;
4555 }
4556
4557 .numInputWrapper input::-ms-clear {
4558 display: none;
4559 }
4560
4561 .numInputWrapper input::-webkit-outer-spin-button,
4562 .numInputWrapper input::-webkit-inner-spin-button {
4563 margin: 0;
4564 -webkit-appearance: none;
4565 }
4566
4567 .numInputWrapper span {
4568 position: absolute;
4569 right: 0;
4570 width: 14px;
4571 padding: 0 4px 0 2px;
4572 height: 50%;
4573 line-height: 50%;
4574 opacity: 0;
4575 cursor: pointer;
4576 border: 1px solid rgba(57, 57, 57, 0.15);
4577 -webkit-box-sizing: border-box;
4578 box-sizing: border-box;
4579 }
4580
4581 .numInputWrapper span:hover {
4582 background: rgba(0, 0, 0, 0.1);
4583 }
4584
4585 .numInputWrapper span:active {
4586 background: rgba(0, 0, 0, 0.2);
4587 }
4588
4589 .numInputWrapper span:after {
4590 display: block;
4591 content: "";
4592 position: absolute;
4593 }
4594
4595 .numInputWrapper span.arrowUp {
4596 top: 0;
4597 border-bottom: 0;
4598 }
4599
4600 .numInputWrapper span.arrowUp:after {
4601 border-left: 4px solid transparent;
4602 border-right: 4px solid transparent;
4603 border-bottom: 4px solid rgba(57, 57, 57, 0.6);
4604 top: 26%;
4605 }
4606
4607 .numInputWrapper span.arrowDown {
4608 top: 50%;
4609 }
4610
4611 .numInputWrapper span.arrowDown:after {
4612 border-left: 4px solid transparent;
4613 border-right: 4px solid transparent;
4614 border-top: 4px solid rgba(57, 57, 57, 0.6);
4615 top: 40%;
4616 }
4617
4618 .numInputWrapper span svg {
4619 width: inherit;
4620 height: auto;
4621 }
4622
4623 .numInputWrapper span svg path {
4624 fill: rgba(0, 0, 0, 0.5);
4625 }
4626
4627 .numInputWrapper:hover {
4628 background: rgba(0, 0, 0, 0.05);
4629 }
4630
4631 .numInputWrapper:hover span {
4632 opacity: 1;
4633 }
4634
4635 .flatpickr-current-month {
4636 font-size: 135%;
4637 line-height: inherit;
4638 font-weight: 300;
4639 color: inherit;
4640 position: absolute;
4641 width: 75%;
4642 left: 12.5%;
4643 padding: 7.48px 0 0 0;
4644 line-height: 1;
4645 height: 34px;
4646 display: inline-block;
4647 text-align: center;
4648 -webkit-transform: translate3d(0px, 0px, 0px);
4649 transform: translate3d(0px, 0px, 0px);
4650 }
4651
4652 .flatpickr-current-month span.cur-month {
4653 font-family: inherit;
4654 font-weight: 700;
4655 color: inherit;
4656 display: inline-block;
4657 margin-left: 0.5ch;
4658 padding: 0;
4659 }
4660
4661 .flatpickr-current-month span.cur-month:hover {
4662 background: rgba(0, 0, 0, 0.05);
4663 }
4664
4665 .flatpickr-current-month .numInputWrapper {
4666 width: 6ch;
4667 width: 7ch\0 ;
4668 display: inline-block;
4669 }
4670
4671 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
4672 border-bottom-color: rgba(0, 0, 0, 0.9);
4673 }
4674
4675 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
4676 border-top-color: rgba(0, 0, 0, 0.9);
4677 }
4678
4679 .flatpickr-current-month input.cur-year {
4680 background: transparent;
4681 -webkit-box-sizing: border-box;
4682 box-sizing: border-box;
4683 color: inherit;
4684 cursor: text;
4685 padding: 0 0 0 0.5ch;
4686 margin: 0;
4687 display: inline-block;
4688 font-size: inherit;
4689 font-family: inherit;
4690 font-weight: 300;
4691 line-height: inherit;
4692 height: auto;
4693 border: 0;
4694 border-radius: 0;
4695 vertical-align: initial;
4696 -webkit-appearance: textfield;
4697 -moz-appearance: textfield;
4698 appearance: textfield;
4699 }
4700
4701 .flatpickr-current-month input.cur-year:focus {
4702 outline: 0;
4703 }
4704
4705 .flatpickr-current-month input.cur-year[disabled],
4706 .flatpickr-current-month input.cur-year[disabled]:hover {
4707 font-size: 100%;
4708 color: rgba(0, 0, 0, 0.5);
4709 background: transparent;
4710 pointer-events: none;
4711 }
4712
4713 .flatpickr-current-month .flatpickr-monthDropdown-months {
4714 appearance: menulist;
4715 background: transparent;
4716 border: none;
4717 border-radius: 0;
4718 box-sizing: border-box;
4719 color: inherit;
4720 cursor: pointer;
4721 font-size: inherit;
4722 font-family: inherit;
4723 font-weight: 300;
4724 height: auto;
4725 line-height: inherit;
4726 margin: -1px 0 0 0;
4727 outline: none;
4728 padding: 0 0 0 0.5ch;
4729 position: relative;
4730 vertical-align: initial;
4731 -webkit-box-sizing: border-box;
4732 -webkit-appearance: menulist;
4733 -moz-appearance: menulist;
4734 width: auto;
4735 }
4736
4737 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
4738 .flatpickr-current-month .flatpickr-monthDropdown-months:active {
4739 outline: none;
4740 }
4741
4742 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
4743 background: rgba(0, 0, 0, 0.05);
4744 }
4745
4746 .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
4747 background-color: transparent;
4748 outline: none;
4749 padding: 0;
4750 }
4751
4752 .flatpickr-weekdays {
4753 background: transparent;
4754 text-align: center;
4755 overflow: hidden;
4756 width: 100%;
4757 display: -webkit-box;
4758 display: -webkit-flex;
4759 display: -ms-flexbox;
4760 display: flex;
4761 -webkit-box-align: center;
4762 -webkit-align-items: center;
4763 -ms-flex-align: center;
4764 align-items: center;
4765 height: 28px;
4766 }
4767
4768 .flatpickr-weekdays .flatpickr-weekdaycontainer {
4769 display: -webkit-box;
4770 display: -webkit-flex;
4771 display: -ms-flexbox;
4772 display: flex;
4773 -webkit-box-flex: 1;
4774 -webkit-flex: 1;
4775 -ms-flex: 1;
4776 flex: 1;
4777 }
4778
4779 span.flatpickr-weekday {
4780 cursor: default;
4781 font-size: 90%;
4782 background: transparent;
4783 color: rgba(0, 0, 0, 0.54);
4784 line-height: 1;
4785 margin: 0;
4786 text-align: center;
4787 display: block;
4788 -webkit-box-flex: 1;
4789 -webkit-flex: 1;
4790 -ms-flex: 1;
4791 flex: 1;
4792 font-weight: bolder;
4793 }
4794
4795 .dayContainer,
4796 .flatpickr-weeks {
4797 padding: 1px 0 0 0;
4798 }
4799
4800 .flatpickr-days {
4801 position: relative;
4802 overflow: hidden;
4803 display: -webkit-box;
4804 display: -webkit-flex;
4805 display: -ms-flexbox;
4806 display: flex;
4807 -webkit-box-align: start;
4808 -webkit-align-items: flex-start;
4809 -ms-flex-align: start;
4810 align-items: flex-start;
4811 width: 307.875px;
4812 }
4813
4814 .flatpickr-days:focus {
4815 outline: 0;
4816 }
4817
4818 .dayContainer {
4819 padding: 0;
4820 outline: 0;
4821 text-align: left;
4822 width: 307.875px;
4823 min-width: 307.875px;
4824 max-width: 307.875px;
4825 -webkit-box-sizing: border-box;
4826 box-sizing: border-box;
4827 display: inline-block;
4828 display: -ms-flexbox;
4829 display: -webkit-box;
4830 display: -webkit-flex;
4831 display: flex;
4832 -webkit-flex-wrap: wrap;
4833 flex-wrap: wrap;
4834 -ms-flex-wrap: wrap;
4835 -ms-flex-pack: justify;
4836 -webkit-justify-content: space-around;
4837 justify-content: space-around;
4838 -webkit-transform: translate3d(0px, 0px, 0px);
4839 transform: translate3d(0px, 0px, 0px);
4840 opacity: 1;
4841 }
4842
4843 .dayContainer + .dayContainer {
4844 -webkit-box-shadow: -1px 0 0 #e6e6e6;
4845 box-shadow: -1px 0 0 #e6e6e6;
4846 }
4847
4848 .flatpickr-day {
4849 background: none;
4850 border: 1px solid transparent;
4851 border-radius: 150px;
4852 -webkit-box-sizing: border-box;
4853 box-sizing: border-box;
4854 color: #393939;
4855 cursor: pointer;
4856 font-weight: 400;
4857 width: 14.2857143%;
4858 -webkit-flex-basis: 14.2857143%;
4859 -ms-flex-preferred-size: 14.2857143%;
4860 flex-basis: 14.2857143%;
4861 max-width: 39px;
4862 height: 39px;
4863 line-height: 39px;
4864 margin: 0;
4865 display: inline-block;
4866 position: relative;
4867 -webkit-box-pack: center;
4868 -webkit-justify-content: center;
4869 -ms-flex-pack: center;
4870 justify-content: center;
4871 text-align: center;
4872 }
4873
4874 .flatpickr-day.inRange,
4875 .flatpickr-day.prevMonthDay.inRange,
4876 .flatpickr-day.nextMonthDay.inRange,
4877 .flatpickr-day.today.inRange,
4878 .flatpickr-day.prevMonthDay.today.inRange,
4879 .flatpickr-day.nextMonthDay.today.inRange,
4880 .flatpickr-day:hover,
4881 .flatpickr-day.prevMonthDay:hover,
4882 .flatpickr-day.nextMonthDay:hover,
4883 .flatpickr-day:focus,
4884 .flatpickr-day.prevMonthDay:focus,
4885 .flatpickr-day.nextMonthDay:focus {
4886 cursor: pointer;
4887 outline: 0;
4888 background: #e6e6e6;
4889 border-color: #e6e6e6;
4890 }
4891
4892 .flatpickr-day.today {
4893 border-color: #959ea9;
4894 }
4895
4896 .flatpickr-day.today:hover,
4897 .flatpickr-day.today:focus {
4898 border-color: #959ea9;
4899 background: #959ea9;
4900 color: #fff;
4901 }
4902
4903 .flatpickr-day.selected,
4904 .flatpickr-day.startRange,
4905 .flatpickr-day.endRange,
4906 .flatpickr-day.selected.inRange,
4907 .flatpickr-day.startRange.inRange,
4908 .flatpickr-day.endRange.inRange,
4909 .flatpickr-day.selected:focus,
4910 .flatpickr-day.startRange:focus,
4911 .flatpickr-day.endRange:focus,
4912 .flatpickr-day.selected:hover,
4913 .flatpickr-day.startRange:hover,
4914 .flatpickr-day.endRange:hover,
4915 .flatpickr-day.selected.prevMonthDay,
4916 .flatpickr-day.startRange.prevMonthDay,
4917 .flatpickr-day.endRange.prevMonthDay,
4918 .flatpickr-day.selected.nextMonthDay,
4919 .flatpickr-day.startRange.nextMonthDay,
4920 .flatpickr-day.endRange.nextMonthDay {
4921 background: #569ff7;
4922 -webkit-box-shadow: none;
4923 box-shadow: none;
4924 color: #fff;
4925 border-color: #569ff7;
4926 }
4927
4928 .flatpickr-day.selected.startRange,
4929 .flatpickr-day.startRange.startRange,
4930 .flatpickr-day.endRange.startRange {
4931 border-radius: 50px 0 0 50px;
4932 }
4933
4934 .flatpickr-day.selected.endRange,
4935 .flatpickr-day.startRange.endRange,
4936 .flatpickr-day.endRange.endRange {
4937 border-radius: 0 50px 50px 0;
4938 }
4939
4940 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
4941 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
4942 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
4943 -webkit-box-shadow: -10px 0 0 #569ff7;
4944 box-shadow: -10px 0 0 #569ff7;
4945 }
4946
4947 .flatpickr-day.selected.startRange.endRange,
4948 .flatpickr-day.startRange.startRange.endRange,
4949 .flatpickr-day.endRange.startRange.endRange {
4950 border-radius: 50px;
4951 }
4952
4953 .flatpickr-day.inRange {
4954 border-radius: 0;
4955 -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4956 box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4957 }
4958
4959 .flatpickr-day.flatpickr-disabled,
4960 .flatpickr-day.flatpickr-disabled:hover,
4961 .flatpickr-day.prevMonthDay,
4962 .flatpickr-day.nextMonthDay,
4963 .flatpickr-day.notAllowed,
4964 .flatpickr-day.notAllowed.prevMonthDay,
4965 .flatpickr-day.notAllowed.nextMonthDay {
4966 color: rgba(57, 57, 57, 0.3);
4967 background: transparent;
4968 border-color: transparent;
4969 cursor: default;
4970 }
4971
4972 .flatpickr-day.flatpickr-disabled,
4973 .flatpickr-day.flatpickr-disabled:hover {
4974 cursor: not-allowed;
4975 color: rgba(57, 57, 57, 0.1);
4976 }
4977
4978 .flatpickr-day.week.selected {
4979 border-radius: 0;
4980 -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
4981 box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
4982 }
4983
4984 .flatpickr-day.hidden {
4985 visibility: hidden;
4986 }
4987
4988 .rangeMode .flatpickr-day {
4989 margin-top: 1px;
4990 }
4991
4992 .flatpickr-weekwrapper {
4993 float: left;
4994 }
4995
4996 .flatpickr-weekwrapper .flatpickr-weeks {
4997 padding: 0 12px;
4998 -webkit-box-shadow: 1px 0 0 #e6e6e6;
4999 box-shadow: 1px 0 0 #e6e6e6;
5000 }
5001
5002 .flatpickr-weekwrapper .flatpickr-weekday {
5003 float: none;
5004 width: 100%;
5005 line-height: 28px;
5006 }
5007
5008 .flatpickr-weekwrapper span.flatpickr-day,
5009 .flatpickr-weekwrapper span.flatpickr-day:hover {
5010 display: block;
5011 width: 100%;
5012 max-width: none;
5013 color: rgba(57, 57, 57, 0.3);
5014 background: transparent;
5015 cursor: default;
5016 border: none;
5017 }
5018
5019 .flatpickr-innerContainer {
5020 display: block;
5021 display: -webkit-box;
5022 display: -webkit-flex;
5023 display: -ms-flexbox;
5024 display: flex;
5025 -webkit-box-sizing: border-box;
5026 box-sizing: border-box;
5027 overflow: hidden;
5028 }
5029
5030 .flatpickr-rContainer {
5031 display: inline-block;
5032 padding: 0;
5033 -webkit-box-sizing: border-box;
5034 box-sizing: border-box;
5035 }
5036
5037 .flatpickr-time {
5038 text-align: center;
5039 outline: 0;
5040 display: block;
5041 height: 0;
5042 line-height: 40px;
5043 max-height: 40px;
5044 -webkit-box-sizing: border-box;
5045 box-sizing: border-box;
5046 overflow: hidden;
5047 display: -webkit-box;
5048 display: -webkit-flex;
5049 display: -ms-flexbox;
5050 display: flex;
5051 }
5052
5053 .flatpickr-time:after {
5054 content: "";
5055 display: table;
5056 clear: both;
5057 }
5058
5059 .flatpickr-time .numInputWrapper {
5060 -webkit-box-flex: 1;
5061 -webkit-flex: 1;
5062 -ms-flex: 1;
5063 flex: 1;
5064 width: 40%;
5065 height: 40px;
5066 float: left;
5067 }
5068
5069 .flatpickr-time .numInputWrapper span.arrowUp:after {
5070 border-bottom-color: #393939;
5071 }
5072
5073 .flatpickr-time .numInputWrapper span.arrowDown:after {
5074 border-top-color: #393939;
5075 }
5076
5077 .flatpickr-time.hasSeconds .numInputWrapper {
5078 width: 26%;
5079 }
5080
5081 .flatpickr-time.time24hr .numInputWrapper {
5082 width: 49%;
5083 }
5084
5085 .flatpickr-time input {
5086 background: transparent;
5087 -webkit-box-shadow: none;
5088 box-shadow: none;
5089 border: 0;
5090 border-radius: 0;
5091 text-align: center;
5092 margin: 0;
5093 padding: 0;
5094 height: inherit;
5095 line-height: inherit;
5096 color: #393939;
5097 font-size: 14px;
5098 position: relative;
5099 -webkit-box-sizing: border-box;
5100 box-sizing: border-box;
5101 -webkit-appearance: textfield;
5102 -moz-appearance: textfield;
5103 appearance: textfield;
5104 }
5105
5106 .flatpickr-time input.flatpickr-hour {
5107 font-weight: bold;
5108 }
5109
5110 .flatpickr-time input.flatpickr-minute,
5111 .flatpickr-time input.flatpickr-second {
5112 font-weight: 400;
5113 }
5114
5115 .flatpickr-time input:focus {
5116 outline: 0;
5117 border: 0;
5118 }
5119
5120 .flatpickr-time .flatpickr-time-separator,
5121 .flatpickr-time .flatpickr-am-pm {
5122 height: inherit;
5123 float: left;
5124 line-height: inherit;
5125 color: #393939;
5126 font-weight: bold;
5127 width: 2%;
5128 -webkit-user-select: none;
5129 -moz-user-select: none;
5130 -ms-user-select: none;
5131 user-select: none;
5132 -webkit-align-self: center;
5133 -ms-flex-item-align: center;
5134 align-self: center;
5135 }
5136
5137 .flatpickr-time .flatpickr-am-pm {
5138 outline: 0;
5139 width: 18%;
5140 cursor: pointer;
5141 text-align: center;
5142 font-weight: 400;
5143 }
5144
5145 .flatpickr-time input:hover,
5146 .flatpickr-time .flatpickr-am-pm:hover,
5147 .flatpickr-time input:focus,
5148 .flatpickr-time .flatpickr-am-pm:focus {
5149 background: #eee;
5150 }
5151
5152 .flatpickr-input[readonly] {
5153 cursor: pointer;
5154 }
5155
5156 @-webkit-keyframes fpFadeInDown {
5157 from {
5158 opacity: 0;
5159 -webkit-transform: translate3d(0, -20px, 0);
5160 transform: translate3d(0, -20px, 0);
5161 }
5162 to {
5163 opacity: 1;
5164 -webkit-transform: translate3d(0, 0, 0);
5165 transform: translate3d(0, 0, 0);
5166 }
5167 }
5168 @keyframes fpFadeInDown {
5169 from {
5170 opacity: 0;
5171 -webkit-transform: translate3d(0, -20px, 0);
5172 transform: translate3d(0, -20px, 0);
5173 }
5174 to {
5175 opacity: 1;
5176 -webkit-transform: translate3d(0, 0, 0);
5177 transform: translate3d(0, 0, 0);
5178 }
5179 }
5180
5181 /*# sourceMappingURL=style.css.map */
5182