PluginProbe
StreamCast – bring live radio to your site with a sleek player / 2.3.3
StreamCast – bring live radio to your site with a sleek player v2.3.3
2.4.5 2.4.4 trunk 1.0 1.1 2.0.0 2.1.10 2.1.2 2.1.4 2.1.5 2.1.8 2.2.1 2.2.3 2.2.4 2.2.5 2.3.0 2.3.1 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 All 29 releases
streamcast / admin / codestar-framework / assets / css / style.css

style.css in StreamCast – bring live radio to your site with a sleek player 2.3.3, at admin/codestar-framework/assets/css/style.css

5,166 lines 107.2 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 .csf-features-cols .csf--key-features {
3744 width: 100%;
3745 }
3746 .csf-features-cols .csf--available-fields {
3747 width: 100%;
3748 }
3749 }
3750 /**
3751 * 12. Responsive
3752 */
3753 @media only screen and (max-width: 1200px) {
3754 .csf-metabox .csf-field .csf-title {
3755 float: none;
3756 width: 100%;
3757 margin-bottom: 10px;
3758 }
3759 .csf-metabox .csf-field .csf-fieldset {
3760 float: none;
3761 width: 100%;
3762 }
3763 }
3764 @media only screen and (max-width: 782px) {
3765 .csf-header-inner {
3766 text-align: center;
3767 }
3768 .csf-header-inner h1 {
3769 width: 100%;
3770 margin-bottom: 10px;
3771 }
3772 .csf-form-result {
3773 float: none;
3774 margin-right: 0;
3775 margin-bottom: 10px;
3776 }
3777 .csf-search,
3778 .csf-header-right,
3779 .csf-header-left {
3780 width: 100%;
3781 }
3782 .csf-search {
3783 text-align: center;
3784 margin-bottom: 15px;
3785 }
3786 .csf-footer {
3787 text-align: center;
3788 }
3789 .csf-buttons {
3790 float: none;
3791 }
3792 .csf-copyright {
3793 float: none;
3794 margin-top: 10px;
3795 }
3796 .csf-nav,
3797 .csf-expand-all,
3798 .csf-reset-section,
3799 .csf-nav-background {
3800 display: none !important;
3801 }
3802 .csf-nav-normal + .csf-content {
3803 margin-left: 0;
3804 }
3805 .csf-section-title,
3806 .csf-section {
3807 display: block !important;
3808 }
3809 .csf-field .csf-title {
3810 float: none;
3811 width: 100%;
3812 margin-bottom: 10px;
3813 }
3814 .csf-field .csf-fieldset {
3815 float: none;
3816 width: 100%;
3817 }
3818 .csf-field-color .button.wp-picker-clear {
3819 padding: 0 8px;
3820 line-height: 2.14285714;
3821 min-height: 32px;
3822 }
3823 .csf-profile-options > .csf-field > .csf-title,
3824 .csf-taxonomy-edit-fields > .csf-field > .csf-title {
3825 float: none;
3826 width: 100%;
3827 margin-bottom: 10px;
3828 }
3829 .csf-profile-options > .csf-field > .csf-fieldset,
3830 .csf-taxonomy-edit-fields > .csf-field > .csf-fieldset {
3831 float: none;
3832 width: 100%;
3833 }
3834 .csf-nav-menu-options > .csf-fields {
3835 margin-left: -10px;
3836 margin-right: -10px;
3837 }
3838 .csf-nav-menu-options > .csf-fields > .csf-field {
3839 padding: 10px;
3840 }
3841 }
3842 @media only screen and (max-width: 782px) {
3843 .csf-modal .csf-modal-inner {
3844 width: 90%;
3845 }
3846 }
3847 @media only screen and (max-height: 750px) {
3848 .csf-modal .csf-modal-inner {
3849 height: auto;
3850 }
3851 .csf-modal .csf-modal-content {
3852 height: calc(100vh - 200px);
3853 }
3854 }
3855 /**
3856 * Chosen JS Styles
3857 */
3858 .chosen-container {
3859 position: relative;
3860 display: inline-block;
3861 vertical-align: middle;
3862 font-size: 13px;
3863 user-select: none;
3864 }
3865
3866 .chosen-container * {
3867 box-sizing: border-box;
3868 }
3869
3870 .chosen-container .chosen-drop {
3871 position: absolute;
3872 top: 100%;
3873 z-index: 1010;
3874 width: 100%;
3875 border: 1px solid #aaa;
3876 border-top: 0;
3877 background: #fff;
3878 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
3879 clip: rect(0, 0, 0, 0);
3880 clip-path: inset(100% 100%);
3881 }
3882
3883 .chosen-container.chosen-with-drop .chosen-drop {
3884 clip: auto;
3885 clip-path: none;
3886 }
3887
3888 .chosen-container a {
3889 cursor: pointer;
3890 }
3891
3892 .chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
3893 margin-right: 4px;
3894 overflow: hidden;
3895 white-space: nowrap;
3896 text-overflow: ellipsis;
3897 font-weight: normal;
3898 color: #999999;
3899 }
3900
3901 .chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
3902 content: ":";
3903 padding-left: 2px;
3904 vertical-align: top;
3905 }
3906
3907 .chosen-container-single .chosen-single {
3908 position: relative;
3909 display: block;
3910 overflow: hidden;
3911 padding: 0 0 0 8px;
3912 height: 25px;
3913 border: 1px solid #aaa;
3914 border-radius: 5px;
3915 background-color: #fff;
3916 background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
3917 background-clip: padding-box;
3918 box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
3919 color: #444;
3920 text-decoration: none;
3921 white-space: nowrap;
3922 line-height: 24px;
3923 }
3924
3925 .chosen-container-single .chosen-default {
3926 color: #999;
3927 }
3928
3929 .chosen-container-single .chosen-single span {
3930 display: block;
3931 overflow: hidden;
3932 margin-right: 26px;
3933 text-overflow: ellipsis;
3934 white-space: nowrap;
3935 }
3936
3937 .chosen-container-single .chosen-single-with-deselect span {
3938 margin-right: 38px;
3939 }
3940
3941 .chosen-container-single .chosen-single abbr {
3942 position: absolute;
3943 top: 6px;
3944 right: 26px;
3945 display: block;
3946 width: 12px;
3947 height: 12px;
3948 font-size: 1px;
3949 }
3950
3951 .chosen-container-single .chosen-single div {
3952 position: absolute;
3953 top: 0;
3954 right: 0;
3955 display: block;
3956 width: 18px;
3957 height: 100%;
3958 }
3959
3960 .chosen-container-single .chosen-single div b {
3961 display: block;
3962 width: 100%;
3963 height: 100%;
3964 }
3965
3966 .chosen-container-single .chosen-search {
3967 position: relative;
3968 z-index: 1010;
3969 margin: 0;
3970 padding: 3px 4px;
3971 white-space: nowrap;
3972 }
3973
3974 .chosen-container-single .chosen-search input[type=text] {
3975 margin: 1px 0;
3976 padding: 4px 20px 4px 5px;
3977 width: 100%;
3978 height: auto;
3979 outline: 0;
3980 border: 1px solid #aaa;
3981 font-size: 1em;
3982 font-family: sans-serif;
3983 line-height: normal;
3984 border-radius: 0;
3985 }
3986
3987 .chosen-container-single .chosen-drop {
3988 margin-top: -1px;
3989 border-radius: 0 0 4px 4px;
3990 background-clip: padding-box;
3991 }
3992
3993 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
3994 position: absolute;
3995 clip: rect(0, 0, 0, 0);
3996 clip-path: inset(100% 100%);
3997 }
3998
3999 .chosen-container .chosen-results {
4000 color: #444;
4001 position: relative;
4002 overflow-x: hidden;
4003 overflow-y: auto;
4004 margin: 0 4px 4px 0;
4005 padding: 0 0 0 4px;
4006 max-height: 240px;
4007 -webkit-overflow-scrolling: touch;
4008 }
4009
4010 .chosen-container .chosen-results li {
4011 display: none;
4012 margin: 0;
4013 padding: 5px 6px;
4014 list-style: none;
4015 line-height: 15px;
4016 word-wrap: break-word;
4017 -webkit-touch-callout: none;
4018 }
4019
4020 .chosen-container .chosen-results li.active-result {
4021 display: list-item;
4022 cursor: pointer;
4023 }
4024
4025 .chosen-container .chosen-results li.disabled-result {
4026 display: list-item;
4027 color: #ccc;
4028 cursor: default;
4029 }
4030
4031 .chosen-container .chosen-results li.highlighted {
4032 background-color: #3875d7;
4033 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
4034 color: #fff;
4035 }
4036
4037 .chosen-container .chosen-results li.no-results {
4038 color: #777;
4039 display: list-item;
4040 background: #f4f4f4;
4041 }
4042
4043 .chosen-container .chosen-results li.group-result {
4044 display: list-item;
4045 font-weight: bold;
4046 cursor: default;
4047 }
4048
4049 .chosen-container .chosen-results li.group-option {
4050 padding-left: 15px;
4051 }
4052
4053 .chosen-container .chosen-results li em {
4054 font-style: normal;
4055 text-decoration: underline;
4056 }
4057
4058 .chosen-container-multi .chosen-choices {
4059 position: relative;
4060 overflow: hidden;
4061 margin: 0;
4062 padding: 0 5px;
4063 width: 100%;
4064 height: auto;
4065 border: 1px solid #aaa;
4066 background-color: #fff;
4067 background-image: linear-gradient(#eee 1%, #fff 15%);
4068 cursor: text;
4069 }
4070
4071 .chosen-container-multi .chosen-choices li {
4072 float: left;
4073 list-style: none;
4074 }
4075
4076 .chosen-container-multi .chosen-choices li.search-field {
4077 margin: 0;
4078 padding: 0;
4079 white-space: nowrap;
4080 }
4081
4082 .chosen-container-multi .chosen-choices li.search-field input[type=text] {
4083 margin: 1px 0;
4084 padding: 0;
4085 outline: 0;
4086 border: 0 !important;
4087 background: transparent !important;
4088 box-shadow: none;
4089 color: #999;
4090 font-size: 100%;
4091 font-family: sans-serif;
4092 line-height: normal;
4093 border-radius: 0;
4094 width: 25px;
4095 height: 25px;
4096 min-height: 25px;
4097 }
4098
4099 .chosen-container-multi .chosen-choices li.search-choice {
4100 position: relative;
4101 margin: 3px 5px 3px 0;
4102 padding: 3px 20px 3px 6px;
4103 border: 1px solid #aaa;
4104 max-width: 100%;
4105 border-radius: 3px;
4106 background-color: #eeeeee;
4107 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
4108 background-size: 100% 19px;
4109 background-repeat: repeat-x;
4110 background-clip: padding-box;
4111 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
4112 color: #333;
4113 line-height: 13px;
4114 cursor: default;
4115 }
4116
4117 .chosen-container-multi .chosen-choices li.search-choice span {
4118 word-wrap: break-word;
4119 white-space: nowrap;
4120 }
4121
4122 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
4123 position: absolute;
4124 top: 0;
4125 right: 0;
4126 display: block;
4127 width: 12px;
4128 height: 12px;
4129 font-size: 1px;
4130 }
4131
4132 .chosen-container-multi .chosen-choices li.search-choice-disabled {
4133 padding-right: 5px;
4134 border: 1px solid #ccc;
4135 background-color: #e4e4e4;
4136 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
4137 color: #666;
4138 }
4139
4140 .chosen-container-multi .chosen-choices li.search-choice-focus {
4141 background: #d4d4d4;
4142 }
4143
4144 .chosen-container-multi .chosen-results {
4145 margin: 0;
4146 padding: 0;
4147 }
4148
4149 .chosen-container-multi .chosen-drop .result-selected {
4150 display: list-item;
4151 color: #ccc;
4152 cursor: default;
4153 }
4154
4155 .chosen-container-active .chosen-single {
4156 border: 1px solid #5897fb;
4157 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4158 }
4159
4160 .chosen-container-active.chosen-with-drop .chosen-single {
4161 border: 1px solid #aaa;
4162 border-bottom-right-radius: 0;
4163 border-bottom-left-radius: 0;
4164 background-image: linear-gradient(#eee 20%, #fff 80%);
4165 box-shadow: 0 1px 0 #fff inset;
4166 }
4167
4168 .chosen-container-active.chosen-with-drop .chosen-single div {
4169 border-left: none;
4170 background: transparent;
4171 }
4172
4173 .chosen-container-active .chosen-choices {
4174 border: 1px solid #5897fb;
4175 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4176 }
4177
4178 .chosen-container-active .chosen-choices li.search-field input[type=text] {
4179 color: #222 !important;
4180 }
4181
4182 .chosen-disabled {
4183 opacity: 0.5 !important;
4184 cursor: default;
4185 }
4186
4187 .chosen-disabled .chosen-single {
4188 cursor: default;
4189 }
4190
4191 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
4192 cursor: default;
4193 }
4194
4195 .chosen-rtl {
4196 text-align: right;
4197 }
4198
4199 .chosen-rtl .chosen-single {
4200 overflow: visible;
4201 padding: 0 8px 0 0;
4202 }
4203
4204 .chosen-rtl .chosen-single span {
4205 margin-right: 0;
4206 margin-left: 26px;
4207 direction: rtl;
4208 }
4209
4210 .chosen-rtl .chosen-single-with-deselect span {
4211 margin-left: 38px;
4212 }
4213
4214 .chosen-rtl .chosen-single div {
4215 right: auto;
4216 left: 3px;
4217 }
4218
4219 .chosen-rtl .chosen-single abbr {
4220 right: auto;
4221 left: 26px;
4222 }
4223
4224 .chosen-rtl .chosen-choices li {
4225 float: right;
4226 }
4227
4228 .chosen-rtl .chosen-choices li.search-field input[type=text] {
4229 direction: rtl;
4230 }
4231
4232 .chosen-rtl .chosen-choices li.search-choice {
4233 margin: 3px 5px 3px 0;
4234 padding: 3px 5px 3px 19px;
4235 }
4236
4237 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
4238 right: auto;
4239 left: 4px;
4240 }
4241
4242 .chosen-rtl.chosen-container-single .chosen-results {
4243 margin: 0 0 4px 4px;
4244 padding: 0 4px 0 0;
4245 }
4246
4247 .chosen-rtl .chosen-results li.group-option {
4248 padding-right: 15px;
4249 padding-left: 0;
4250 }
4251
4252 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
4253 border-right: none;
4254 }
4255
4256 .chosen-rtl .chosen-search input[type=text] {
4257 padding: 4px 5px 4px 20px;
4258 direction: rtl;
4259 }
4260
4261 /**
4262 * Flatpickr
4263 */
4264 .flatpickr-calendar {
4265 background: transparent;
4266 opacity: 0;
4267 display: none;
4268 text-align: center;
4269 visibility: hidden;
4270 padding: 0;
4271 -webkit-animation: none;
4272 animation: none;
4273 direction: ltr;
4274 border: 0;
4275 font-size: 14px;
4276 line-height: 24px;
4277 border-radius: 5px;
4278 position: absolute;
4279 width: 307.875px;
4280 -webkit-box-sizing: border-box;
4281 box-sizing: border-box;
4282 -ms-touch-action: manipulation;
4283 touch-action: manipulation;
4284 background: #fff;
4285 -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);
4286 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);
4287 }
4288
4289 .flatpickr-calendar.open,
4290 .flatpickr-calendar.inline {
4291 opacity: 1;
4292 max-height: 640px;
4293 visibility: visible;
4294 }
4295
4296 .flatpickr-calendar.open {
4297 display: inline-block;
4298 z-index: 99999;
4299 }
4300
4301 .flatpickr-calendar.animate.open {
4302 -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4303 animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4304 }
4305
4306 .flatpickr-calendar.inline {
4307 display: block;
4308 position: relative;
4309 top: 2px;
4310 }
4311
4312 .flatpickr-calendar.static {
4313 position: absolute;
4314 top: calc(100% + 2px);
4315 }
4316
4317 .flatpickr-calendar.static.open {
4318 z-index: 999;
4319 display: block;
4320 }
4321
4322 .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
4323 -webkit-box-shadow: none !important;
4324 box-shadow: none !important;
4325 }
4326
4327 .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
4328 -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4329 box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4330 }
4331
4332 .flatpickr-calendar .hasWeeks .dayContainer,
4333 .flatpickr-calendar .hasTime .dayContainer {
4334 border-bottom: 0;
4335 border-bottom-right-radius: 0;
4336 border-bottom-left-radius: 0;
4337 }
4338
4339 .flatpickr-calendar .hasWeeks .dayContainer {
4340 border-left: 0;
4341 }
4342
4343 .flatpickr-calendar.hasTime .flatpickr-time {
4344 height: 40px;
4345 border-top: 1px solid #e6e6e6;
4346 }
4347
4348 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
4349 height: auto;
4350 }
4351
4352 .flatpickr-calendar:before,
4353 .flatpickr-calendar:after {
4354 position: absolute;
4355 display: block;
4356 pointer-events: none;
4357 border: solid transparent;
4358 content: "";
4359 height: 0;
4360 width: 0;
4361 left: 22px;
4362 }
4363
4364 .flatpickr-calendar.rightMost:before,
4365 .flatpickr-calendar.arrowRight:before,
4366 .flatpickr-calendar.rightMost:after,
4367 .flatpickr-calendar.arrowRight:after {
4368 left: auto;
4369 right: 22px;
4370 }
4371
4372 .flatpickr-calendar.arrowCenter:before,
4373 .flatpickr-calendar.arrowCenter:after {
4374 left: 50%;
4375 right: 50%;
4376 }
4377
4378 .flatpickr-calendar:before {
4379 border-width: 5px;
4380 margin: 0 -5px;
4381 }
4382
4383 .flatpickr-calendar:after {
4384 border-width: 4px;
4385 margin: 0 -4px;
4386 }
4387
4388 .flatpickr-calendar.arrowTop:before,
4389 .flatpickr-calendar.arrowTop:after {
4390 bottom: 100%;
4391 }
4392
4393 .flatpickr-calendar.arrowTop:before {
4394 border-bottom-color: #e6e6e6;
4395 }
4396
4397 .flatpickr-calendar.arrowTop:after {
4398 border-bottom-color: #fff;
4399 }
4400
4401 .flatpickr-calendar.arrowBottom:before,
4402 .flatpickr-calendar.arrowBottom:after {
4403 top: 100%;
4404 }
4405
4406 .flatpickr-calendar.arrowBottom:before {
4407 border-top-color: #e6e6e6;
4408 }
4409
4410 .flatpickr-calendar.arrowBottom:after {
4411 border-top-color: #fff;
4412 }
4413
4414 .flatpickr-calendar:focus {
4415 outline: 0;
4416 }
4417
4418 .flatpickr-wrapper {
4419 position: relative;
4420 display: inline-block;
4421 }
4422
4423 .flatpickr-months {
4424 display: -webkit-box;
4425 display: -webkit-flex;
4426 display: -ms-flexbox;
4427 display: flex;
4428 }
4429
4430 .flatpickr-months .flatpickr-month {
4431 background: transparent;
4432 color: rgba(0, 0, 0, 0.9);
4433 fill: rgba(0, 0, 0, 0.9);
4434 height: 34px;
4435 line-height: 1;
4436 text-align: center;
4437 position: relative;
4438 -webkit-user-select: none;
4439 -moz-user-select: none;
4440 -ms-user-select: none;
4441 user-select: none;
4442 overflow: hidden;
4443 -webkit-box-flex: 1;
4444 -webkit-flex: 1;
4445 -ms-flex: 1;
4446 flex: 1;
4447 }
4448
4449 .flatpickr-months .flatpickr-prev-month,
4450 .flatpickr-months .flatpickr-next-month {
4451 text-decoration: none;
4452 cursor: pointer;
4453 position: absolute;
4454 top: 0;
4455 height: 34px;
4456 padding: 10px;
4457 z-index: 3;
4458 color: rgba(0, 0, 0, 0.9);
4459 fill: rgba(0, 0, 0, 0.9);
4460 }
4461
4462 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
4463 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
4464 display: none;
4465 }
4466
4467 .flatpickr-months .flatpickr-prev-month i,
4468 .flatpickr-months .flatpickr-next-month i {
4469 position: relative;
4470 }
4471
4472 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
4473 .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
4474 /*
4475 /*rtl:begin:ignore*/
4476 /*
4477 */
4478 left: 0;
4479 /*
4480 /*rtl:end:ignore*/
4481 /*
4482 */
4483 }
4484
4485 /*
4486 /*rtl:begin:ignore*/
4487 /*
4488 /*rtl:end:ignore*/
4489 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
4490 .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
4491 /*
4492 /*rtl:begin:ignore*/
4493 /*
4494 */
4495 right: 0;
4496 /*
4497 /*rtl:end:ignore*/
4498 /*
4499 */
4500 }
4501
4502 /*
4503 /*rtl:begin:ignore*/
4504 /*
4505 /*rtl:end:ignore*/
4506 .flatpickr-months .flatpickr-prev-month:hover,
4507 .flatpickr-months .flatpickr-next-month:hover {
4508 color: #959ea9;
4509 }
4510
4511 .flatpickr-months .flatpickr-prev-month:hover svg,
4512 .flatpickr-months .flatpickr-next-month:hover svg {
4513 fill: #f64747;
4514 }
4515
4516 .flatpickr-months .flatpickr-prev-month svg,
4517 .flatpickr-months .flatpickr-next-month svg {
4518 width: 14px;
4519 height: 14px;
4520 }
4521
4522 .flatpickr-months .flatpickr-prev-month svg path,
4523 .flatpickr-months .flatpickr-next-month svg path {
4524 -webkit-transition: fill 0.1s;
4525 transition: fill 0.1s;
4526 fill: inherit;
4527 }
4528
4529 .numInputWrapper {
4530 position: relative;
4531 height: auto;
4532 }
4533
4534 .numInputWrapper input,
4535 .numInputWrapper span {
4536 display: inline-block;
4537 }
4538
4539 .numInputWrapper input {
4540 width: 100%;
4541 }
4542
4543 .numInputWrapper input::-ms-clear {
4544 display: none;
4545 }
4546
4547 .numInputWrapper input::-webkit-outer-spin-button,
4548 .numInputWrapper input::-webkit-inner-spin-button {
4549 margin: 0;
4550 -webkit-appearance: none;
4551 }
4552
4553 .numInputWrapper span {
4554 position: absolute;
4555 right: 0;
4556 width: 14px;
4557 padding: 0 4px 0 2px;
4558 height: 50%;
4559 line-height: 50%;
4560 opacity: 0;
4561 cursor: pointer;
4562 border: 1px solid rgba(57, 57, 57, 0.15);
4563 -webkit-box-sizing: border-box;
4564 box-sizing: border-box;
4565 }
4566
4567 .numInputWrapper span:hover {
4568 background: rgba(0, 0, 0, 0.1);
4569 }
4570
4571 .numInputWrapper span:active {
4572 background: rgba(0, 0, 0, 0.2);
4573 }
4574
4575 .numInputWrapper span:after {
4576 display: block;
4577 content: "";
4578 position: absolute;
4579 }
4580
4581 .numInputWrapper span.arrowUp {
4582 top: 0;
4583 border-bottom: 0;
4584 }
4585
4586 .numInputWrapper span.arrowUp:after {
4587 border-left: 4px solid transparent;
4588 border-right: 4px solid transparent;
4589 border-bottom: 4px solid rgba(57, 57, 57, 0.6);
4590 top: 26%;
4591 }
4592
4593 .numInputWrapper span.arrowDown {
4594 top: 50%;
4595 }
4596
4597 .numInputWrapper span.arrowDown:after {
4598 border-left: 4px solid transparent;
4599 border-right: 4px solid transparent;
4600 border-top: 4px solid rgba(57, 57, 57, 0.6);
4601 top: 40%;
4602 }
4603
4604 .numInputWrapper span svg {
4605 width: inherit;
4606 height: auto;
4607 }
4608
4609 .numInputWrapper span svg path {
4610 fill: rgba(0, 0, 0, 0.5);
4611 }
4612
4613 .numInputWrapper:hover {
4614 background: rgba(0, 0, 0, 0.05);
4615 }
4616
4617 .numInputWrapper:hover span {
4618 opacity: 1;
4619 }
4620
4621 .flatpickr-current-month {
4622 font-size: 135%;
4623 line-height: inherit;
4624 font-weight: 300;
4625 color: inherit;
4626 position: absolute;
4627 width: 75%;
4628 left: 12.5%;
4629 padding: 7.48px 0 0 0;
4630 line-height: 1;
4631 height: 34px;
4632 display: inline-block;
4633 text-align: center;
4634 -webkit-transform: translate3d(0px, 0px, 0px);
4635 transform: translate3d(0px, 0px, 0px);
4636 }
4637
4638 .flatpickr-current-month span.cur-month {
4639 font-family: inherit;
4640 font-weight: 700;
4641 color: inherit;
4642 display: inline-block;
4643 margin-left: 0.5ch;
4644 padding: 0;
4645 }
4646
4647 .flatpickr-current-month span.cur-month:hover {
4648 background: rgba(0, 0, 0, 0.05);
4649 }
4650
4651 .flatpickr-current-month .numInputWrapper {
4652 width: 6ch;
4653 width: 7ch\0 ;
4654 display: inline-block;
4655 }
4656
4657 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
4658 border-bottom-color: rgba(0, 0, 0, 0.9);
4659 }
4660
4661 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
4662 border-top-color: rgba(0, 0, 0, 0.9);
4663 }
4664
4665 .flatpickr-current-month input.cur-year {
4666 background: transparent;
4667 -webkit-box-sizing: border-box;
4668 box-sizing: border-box;
4669 color: inherit;
4670 cursor: text;
4671 padding: 0 0 0 0.5ch;
4672 margin: 0;
4673 display: inline-block;
4674 font-size: inherit;
4675 font-family: inherit;
4676 font-weight: 300;
4677 line-height: inherit;
4678 height: auto;
4679 border: 0;
4680 border-radius: 0;
4681 vertical-align: initial;
4682 -webkit-appearance: textfield;
4683 -moz-appearance: textfield;
4684 appearance: textfield;
4685 }
4686
4687 .flatpickr-current-month input.cur-year:focus {
4688 outline: 0;
4689 }
4690
4691 .flatpickr-current-month input.cur-year[disabled],
4692 .flatpickr-current-month input.cur-year[disabled]:hover {
4693 font-size: 100%;
4694 color: rgba(0, 0, 0, 0.5);
4695 background: transparent;
4696 pointer-events: none;
4697 }
4698
4699 .flatpickr-current-month .flatpickr-monthDropdown-months {
4700 appearance: menulist;
4701 background: transparent;
4702 border: none;
4703 border-radius: 0;
4704 box-sizing: border-box;
4705 color: inherit;
4706 cursor: pointer;
4707 font-size: inherit;
4708 font-family: inherit;
4709 font-weight: 300;
4710 height: auto;
4711 line-height: inherit;
4712 margin: -1px 0 0 0;
4713 outline: none;
4714 padding: 0 0 0 0.5ch;
4715 position: relative;
4716 vertical-align: initial;
4717 -webkit-box-sizing: border-box;
4718 -webkit-appearance: menulist;
4719 -moz-appearance: menulist;
4720 width: auto;
4721 }
4722
4723 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
4724 .flatpickr-current-month .flatpickr-monthDropdown-months:active {
4725 outline: none;
4726 }
4727
4728 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
4729 background: rgba(0, 0, 0, 0.05);
4730 }
4731
4732 .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
4733 background-color: transparent;
4734 outline: none;
4735 padding: 0;
4736 }
4737
4738 .flatpickr-weekdays {
4739 background: transparent;
4740 text-align: center;
4741 overflow: hidden;
4742 width: 100%;
4743 display: -webkit-box;
4744 display: -webkit-flex;
4745 display: -ms-flexbox;
4746 display: flex;
4747 -webkit-box-align: center;
4748 -webkit-align-items: center;
4749 -ms-flex-align: center;
4750 align-items: center;
4751 height: 28px;
4752 }
4753
4754 .flatpickr-weekdays .flatpickr-weekdaycontainer {
4755 display: -webkit-box;
4756 display: -webkit-flex;
4757 display: -ms-flexbox;
4758 display: flex;
4759 -webkit-box-flex: 1;
4760 -webkit-flex: 1;
4761 -ms-flex: 1;
4762 flex: 1;
4763 }
4764
4765 span.flatpickr-weekday {
4766 cursor: default;
4767 font-size: 90%;
4768 background: transparent;
4769 color: rgba(0, 0, 0, 0.54);
4770 line-height: 1;
4771 margin: 0;
4772 text-align: center;
4773 display: block;
4774 -webkit-box-flex: 1;
4775 -webkit-flex: 1;
4776 -ms-flex: 1;
4777 flex: 1;
4778 font-weight: bolder;
4779 }
4780
4781 .dayContainer,
4782 .flatpickr-weeks {
4783 padding: 1px 0 0 0;
4784 }
4785
4786 .flatpickr-days {
4787 position: relative;
4788 overflow: hidden;
4789 display: -webkit-box;
4790 display: -webkit-flex;
4791 display: -ms-flexbox;
4792 display: flex;
4793 -webkit-box-align: start;
4794 -webkit-align-items: flex-start;
4795 -ms-flex-align: start;
4796 align-items: flex-start;
4797 width: 307.875px;
4798 }
4799
4800 .flatpickr-days:focus {
4801 outline: 0;
4802 }
4803
4804 .dayContainer {
4805 padding: 0;
4806 outline: 0;
4807 text-align: left;
4808 width: 307.875px;
4809 min-width: 307.875px;
4810 max-width: 307.875px;
4811 -webkit-box-sizing: border-box;
4812 box-sizing: border-box;
4813 display: inline-block;
4814 display: -ms-flexbox;
4815 display: -webkit-box;
4816 display: -webkit-flex;
4817 display: flex;
4818 -webkit-flex-wrap: wrap;
4819 flex-wrap: wrap;
4820 -ms-flex-wrap: wrap;
4821 -ms-flex-pack: justify;
4822 -webkit-justify-content: space-around;
4823 justify-content: space-around;
4824 -webkit-transform: translate3d(0px, 0px, 0px);
4825 transform: translate3d(0px, 0px, 0px);
4826 opacity: 1;
4827 }
4828
4829 .dayContainer + .dayContainer {
4830 -webkit-box-shadow: -1px 0 0 #e6e6e6;
4831 box-shadow: -1px 0 0 #e6e6e6;
4832 }
4833
4834 .flatpickr-day {
4835 background: none;
4836 border: 1px solid transparent;
4837 border-radius: 150px;
4838 -webkit-box-sizing: border-box;
4839 box-sizing: border-box;
4840 color: #393939;
4841 cursor: pointer;
4842 font-weight: 400;
4843 width: 14.2857143%;
4844 -webkit-flex-basis: 14.2857143%;
4845 -ms-flex-preferred-size: 14.2857143%;
4846 flex-basis: 14.2857143%;
4847 max-width: 39px;
4848 height: 39px;
4849 line-height: 39px;
4850 margin: 0;
4851 display: inline-block;
4852 position: relative;
4853 -webkit-box-pack: center;
4854 -webkit-justify-content: center;
4855 -ms-flex-pack: center;
4856 justify-content: center;
4857 text-align: center;
4858 }
4859
4860 .flatpickr-day.inRange,
4861 .flatpickr-day.prevMonthDay.inRange,
4862 .flatpickr-day.nextMonthDay.inRange,
4863 .flatpickr-day.today.inRange,
4864 .flatpickr-day.prevMonthDay.today.inRange,
4865 .flatpickr-day.nextMonthDay.today.inRange,
4866 .flatpickr-day:hover,
4867 .flatpickr-day.prevMonthDay:hover,
4868 .flatpickr-day.nextMonthDay:hover,
4869 .flatpickr-day:focus,
4870 .flatpickr-day.prevMonthDay:focus,
4871 .flatpickr-day.nextMonthDay:focus {
4872 cursor: pointer;
4873 outline: 0;
4874 background: #e6e6e6;
4875 border-color: #e6e6e6;
4876 }
4877
4878 .flatpickr-day.today {
4879 border-color: #959ea9;
4880 }
4881
4882 .flatpickr-day.today:hover,
4883 .flatpickr-day.today:focus {
4884 border-color: #959ea9;
4885 background: #959ea9;
4886 color: #fff;
4887 }
4888
4889 .flatpickr-day.selected,
4890 .flatpickr-day.startRange,
4891 .flatpickr-day.endRange,
4892 .flatpickr-day.selected.inRange,
4893 .flatpickr-day.startRange.inRange,
4894 .flatpickr-day.endRange.inRange,
4895 .flatpickr-day.selected:focus,
4896 .flatpickr-day.startRange:focus,
4897 .flatpickr-day.endRange:focus,
4898 .flatpickr-day.selected:hover,
4899 .flatpickr-day.startRange:hover,
4900 .flatpickr-day.endRange:hover,
4901 .flatpickr-day.selected.prevMonthDay,
4902 .flatpickr-day.startRange.prevMonthDay,
4903 .flatpickr-day.endRange.prevMonthDay,
4904 .flatpickr-day.selected.nextMonthDay,
4905 .flatpickr-day.startRange.nextMonthDay,
4906 .flatpickr-day.endRange.nextMonthDay {
4907 background: #569ff7;
4908 -webkit-box-shadow: none;
4909 box-shadow: none;
4910 color: #fff;
4911 border-color: #569ff7;
4912 }
4913
4914 .flatpickr-day.selected.startRange,
4915 .flatpickr-day.startRange.startRange,
4916 .flatpickr-day.endRange.startRange {
4917 border-radius: 50px 0 0 50px;
4918 }
4919
4920 .flatpickr-day.selected.endRange,
4921 .flatpickr-day.startRange.endRange,
4922 .flatpickr-day.endRange.endRange {
4923 border-radius: 0 50px 50px 0;
4924 }
4925
4926 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
4927 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
4928 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
4929 -webkit-box-shadow: -10px 0 0 #569ff7;
4930 box-shadow: -10px 0 0 #569ff7;
4931 }
4932
4933 .flatpickr-day.selected.startRange.endRange,
4934 .flatpickr-day.startRange.startRange.endRange,
4935 .flatpickr-day.endRange.startRange.endRange {
4936 border-radius: 50px;
4937 }
4938
4939 .flatpickr-day.inRange {
4940 border-radius: 0;
4941 -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4942 box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4943 }
4944
4945 .flatpickr-day.flatpickr-disabled,
4946 .flatpickr-day.flatpickr-disabled:hover,
4947 .flatpickr-day.prevMonthDay,
4948 .flatpickr-day.nextMonthDay,
4949 .flatpickr-day.notAllowed,
4950 .flatpickr-day.notAllowed.prevMonthDay,
4951 .flatpickr-day.notAllowed.nextMonthDay {
4952 color: rgba(57, 57, 57, 0.3);
4953 background: transparent;
4954 border-color: transparent;
4955 cursor: default;
4956 }
4957
4958 .flatpickr-day.flatpickr-disabled,
4959 .flatpickr-day.flatpickr-disabled:hover {
4960 cursor: not-allowed;
4961 color: rgba(57, 57, 57, 0.1);
4962 }
4963
4964 .flatpickr-day.week.selected {
4965 border-radius: 0;
4966 -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
4967 box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
4968 }
4969
4970 .flatpickr-day.hidden {
4971 visibility: hidden;
4972 }
4973
4974 .rangeMode .flatpickr-day {
4975 margin-top: 1px;
4976 }
4977
4978 .flatpickr-weekwrapper {
4979 float: left;
4980 }
4981
4982 .flatpickr-weekwrapper .flatpickr-weeks {
4983 padding: 0 12px;
4984 -webkit-box-shadow: 1px 0 0 #e6e6e6;
4985 box-shadow: 1px 0 0 #e6e6e6;
4986 }
4987
4988 .flatpickr-weekwrapper .flatpickr-weekday {
4989 float: none;
4990 width: 100%;
4991 line-height: 28px;
4992 }
4993
4994 .flatpickr-weekwrapper span.flatpickr-day,
4995 .flatpickr-weekwrapper span.flatpickr-day:hover {
4996 display: block;
4997 width: 100%;
4998 max-width: none;
4999 color: rgba(57, 57, 57, 0.3);
5000 background: transparent;
5001 cursor: default;
5002 border: none;
5003 }
5004
5005 .flatpickr-innerContainer {
5006 display: block;
5007 display: -webkit-box;
5008 display: -webkit-flex;
5009 display: -ms-flexbox;
5010 display: flex;
5011 -webkit-box-sizing: border-box;
5012 box-sizing: border-box;
5013 overflow: hidden;
5014 }
5015
5016 .flatpickr-rContainer {
5017 display: inline-block;
5018 padding: 0;
5019 -webkit-box-sizing: border-box;
5020 box-sizing: border-box;
5021 }
5022
5023 .flatpickr-time {
5024 text-align: center;
5025 outline: 0;
5026 display: block;
5027 height: 0;
5028 line-height: 40px;
5029 max-height: 40px;
5030 -webkit-box-sizing: border-box;
5031 box-sizing: border-box;
5032 overflow: hidden;
5033 display: -webkit-box;
5034 display: -webkit-flex;
5035 display: -ms-flexbox;
5036 display: flex;
5037 }
5038
5039 .flatpickr-time:after {
5040 content: "";
5041 display: table;
5042 clear: both;
5043 }
5044
5045 .flatpickr-time .numInputWrapper {
5046 -webkit-box-flex: 1;
5047 -webkit-flex: 1;
5048 -ms-flex: 1;
5049 flex: 1;
5050 width: 40%;
5051 height: 40px;
5052 float: left;
5053 }
5054
5055 .flatpickr-time .numInputWrapper span.arrowUp:after {
5056 border-bottom-color: #393939;
5057 }
5058
5059 .flatpickr-time .numInputWrapper span.arrowDown:after {
5060 border-top-color: #393939;
5061 }
5062
5063 .flatpickr-time.hasSeconds .numInputWrapper {
5064 width: 26%;
5065 }
5066
5067 .flatpickr-time.time24hr .numInputWrapper {
5068 width: 49%;
5069 }
5070
5071 .flatpickr-time input {
5072 background: transparent;
5073 -webkit-box-shadow: none;
5074 box-shadow: none;
5075 border: 0;
5076 border-radius: 0;
5077 text-align: center;
5078 margin: 0;
5079 padding: 0;
5080 height: inherit;
5081 line-height: inherit;
5082 color: #393939;
5083 font-size: 14px;
5084 position: relative;
5085 -webkit-box-sizing: border-box;
5086 box-sizing: border-box;
5087 -webkit-appearance: textfield;
5088 -moz-appearance: textfield;
5089 appearance: textfield;
5090 }
5091
5092 .flatpickr-time input.flatpickr-hour {
5093 font-weight: bold;
5094 }
5095
5096 .flatpickr-time input.flatpickr-minute,
5097 .flatpickr-time input.flatpickr-second {
5098 font-weight: 400;
5099 }
5100
5101 .flatpickr-time input:focus {
5102 outline: 0;
5103 border: 0;
5104 }
5105
5106 .flatpickr-time .flatpickr-time-separator,
5107 .flatpickr-time .flatpickr-am-pm {
5108 height: inherit;
5109 float: left;
5110 line-height: inherit;
5111 color: #393939;
5112 font-weight: bold;
5113 width: 2%;
5114 -webkit-user-select: none;
5115 -moz-user-select: none;
5116 -ms-user-select: none;
5117 user-select: none;
5118 -webkit-align-self: center;
5119 -ms-flex-item-align: center;
5120 align-self: center;
5121 }
5122
5123 .flatpickr-time .flatpickr-am-pm {
5124 outline: 0;
5125 width: 18%;
5126 cursor: pointer;
5127 text-align: center;
5128 font-weight: 400;
5129 }
5130
5131 .flatpickr-time input:hover,
5132 .flatpickr-time .flatpickr-am-pm:hover,
5133 .flatpickr-time input:focus,
5134 .flatpickr-time .flatpickr-am-pm:focus {
5135 background: #eee;
5136 }
5137
5138 .flatpickr-input[readonly] {
5139 cursor: pointer;
5140 }
5141
5142 @-webkit-keyframes fpFadeInDown {
5143 from {
5144 opacity: 0;
5145 -webkit-transform: translate3d(0, -20px, 0);
5146 transform: translate3d(0, -20px, 0);
5147 }
5148 to {
5149 opacity: 1;
5150 -webkit-transform: translate3d(0, 0, 0);
5151 transform: translate3d(0, 0, 0);
5152 }
5153 }
5154 @keyframes fpFadeInDown {
5155 from {
5156 opacity: 0;
5157 -webkit-transform: translate3d(0, -20px, 0);
5158 transform: translate3d(0, -20px, 0);
5159 }
5160 to {
5161 opacity: 1;
5162 -webkit-transform: translate3d(0, 0, 0);
5163 transform: translate3d(0, 0, 0);
5164 }
5165 }
5166