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

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

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