PluginProbe
Easy Hotel – Powerful Hotel Booking / trunk
Easy Hotel – Powerful Hotel Booking vtrunk
2.0.8 2.0.7 2.0.6 2.0.5 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.9.9 1.9.8 1.9.7 1.9.6 1.9.5 1.9.4 1.9.3 1.9.2 1.8.1 1.8.2 1.8.3 1.8.4 1.8.5 1.8.6 1.8.7 1.8.8 All 110 releases
easy-hotel / admin / includes / framework / assets / css / style.css

style.css in Easy Hotel – Powerful Hotel Booking trunk, at admin/includes/framework/assets/css/style.css

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