PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.3
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.3
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / admin / views / sp-framework / assets / css / spf.css

spf.css in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.3, at admin/views/sp-framework/assets/css/spf.css

6,330 lines 129.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 *
3 * ---------------------------------------------------------
4 * SPF 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 Options
18 * 01. 11. Search Input
19 * 01. 12. Metabox
20 * 01. 13. Help Tooltip
21 * 02. Themes
22 * 02. 01. Theme Dark
23 * 02. 02. Theme Light
24 * 03. Fields
25 * 03. 01. Field
26 * 03. 02. Field: accordion
27 * 03. 03. Field: background
28 * 03. 05. Field: border, spacing, dimensions, column, dimensions_advanced
29 * 03. 06. Field: button_set
30 * 03. 07. Field: checkbox, radio
31 * 03. 08. Field: code_editor
32 * 03. 09. Field: color
33 * 03. 10. Field: color_group
34 * 03. 11. Field: fieldset
35 * 03. 14. Field: group
36 * 03. 15. Field: icon
37 * 03. 17. Field: link_color
38 * 03. 19. Field: palette
39 * 03. 21. Field: select
40 * 03. 22. Field: slider
41 * 03. 23. Field: sortable
42 * 03. 24. Field: sorter
43 * 03. 25. Field: spinner
44 * 03. 26. Field: switcher
45 * 03. 28. Field: text
46 * 03. 29. Field: textarea
47 * 03. 30. Field: typography
48 * 03. 33. Field: heading
49 * 03. 34. Field: subheading
50 * 03. 35. Field: submessage
51 * 03. 36. Field: notice
52 * 03. 37. Field: others
53 * 04. Widget
54 * 05. Customizer
55 * 06. Taxonomy
56 * 07. Profile
57 * 08. Modal
58 * 08. 01. Shortcode Modal
59 * 08. 02. Gutenberg Modal
60 * 08. 03. Icon Modal
61 * 09. Helper
62 * 10. Welcome Page
63 * 11. Responsive
64 * 12. Others
65 *
66 * ---------------------------------------------------------
67 *
68 */
69
70 /**
71 * 01. Base
72 */
73 .spf-section .padding-t-0 {
74 padding-top: 0;
75 }
76
77 .spf {
78 position: relative;
79 }
80
81 .spf label {
82 padding: 0;
83 margin: 0;
84 display: inline-block;
85 }
86
87 .spf-ab-icon {
88 top: 2px;
89 }
90
91 #screen-meta-links+.spf-options {
92 margin-top: 40px;
93 }
94
95 .spf-options {
96 margin-top: 20px;
97 margin-right: 20px;
98 }
99
100 /**
101 * 01. 01. Header
102 */
103
104 .spf-header {
105 position: relative;
106 }
107
108 .spf-header-inner {
109 padding: 25px;
110 }
111
112 .spf-header-inner h1 {
113 float: left;
114 font-size: 1.5em;
115 line-height: 26px;
116 font-weight: 500;
117 margin: 0;
118 }
119
120 .spf-header-inner h1 small {
121 font-size: 11px;
122 font-weight: 500;
123 }
124
125 /**
126 * 01. 02. Sticky
127 */
128
129 .spf-sticky .spf-header-inner {
130 position: fixed;
131 z-index: 20;
132 top: 32px;
133 -moz-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.125);
134 -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.125);
135 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.125);
136 }
137
138 /**
139 * 01. 03. Header Buttons
140 */
141
142 .spf-buttons {
143 float: right;
144 -moz-transition: opacity 0.2s;
145 -o-transition: opacity 0.2s;
146 -webkit-transition: opacity 0.2s;
147 transition: opacity 0.2s;
148 }
149
150 /*
151 .spf-buttons .button {
152 margin: 0 2px;
153 line-height: 26px;
154 }
155
156 .spf-buttons .button.spf-save,
157 .spf-buttons .button.spf-reset-section,
158 .spf-buttons .button.spf-reset-all {
159 text-shadow: none;
160 border: 0;
161 border-radius: 0;
162 padding: 3px 15px;
163 height: auto;
164 color: #fff;
165 }
166
167 .spf-buttons .button.spf-save {
168 background-color: #2cade1;
169 background: #00669b;
170 border-color: #00669b;
171 box-shadow: 0 3px 0 #044263;
172 color: #fff;
173 }
174
175 .spf-buttons .button.spf-save:hover {
176 background: #0071a1;
177 border-color: #0071a1;
178 box-shadow: 0 3px 0 #044263;
179 color: #fff;
180 } */
181 .spf-buttons .button {
182 margin: 0 4px;
183 padding: 0px 16px;
184 border-radius: 0;
185 height: 38px;
186 font-size: 13px;
187 font-weight: 500;
188 text-transform: uppercase;
189 color: #ffffff;
190 }
191
192 .spf-buttons .button.spf-reset-all,
193 .spf-buttons .button.spf-reset-section {
194 background-color: #cd3c3c !important;
195 border-color: transparent !important;
196 -webkit-box-shadow: none !important;
197 box-shadow: none !important;
198 text-shadow: none !important;
199 border-radius: 4px;
200 height: 38px;
201 -webkit-transition: background-color .2s;
202 transition: background-color .2s;
203 color: #fff !important;
204 }
205
206 .spf-buttons .button.spf-save-ajax {
207 background-color: #02cc7b;
208 border-color: transparent;
209 color: #fff !important;
210 -webkit-box-shadow: none;
211 box-shadow: none;
212 text-shadow: none;
213 border-radius: 4px;
214 height: 38px;
215 width: 75px;
216 -webkit-transition: background-color .2s;
217 transition: background-color .2s;
218 }
219
220 .spf-buttons .button.spf-save-ajax:hover {
221 background-color: #02bb71;
222 }
223
224 .sp_post_carousel_page_pcp_replace_layout .spf-header-right .spf-buttons .button.spf-save,
225 .sp_post_carousel_page_pcp_settings .spf-header-right .spf-buttons .button.spf-save {
226 background-color: #c5c5c6;
227 border-color: transparent;
228 color: #fff;
229 -webkit-box-shadow: none;
230 box-shadow: none;
231 text-shadow: none;
232 border-radius: 4px;
233 height: 38px;
234 width: 140px;
235 -webkit-transition: background-color .2s;
236 transition: background-color .2s;
237 pointer-events: none;
238 padding: 0;
239 -webkit-border-radius: 4px;
240 -moz-border-radius: 4px;
241 -ms-border-radius: 4px;
242 -o-border-radius: 4px;
243 }
244
245 .sp_post_carousel_page_pcp_settings .spf-header-right .spf-buttons .button.spf-save:hover {
246 background-color: #00b647 !important;
247 }
248
249 .sp_post_carousel_page_pcp_replace_layout .spf-header-right .spf-buttons .button.spf-reset-section,
250 .sp_post_carousel_page_pcp_settings .spf-header-right .spf-buttons .button.spf-reset-section {
251 background-color: #cd3c3c !important;
252 border-color: transparent !important;
253 -webkit-box-shadow: none !important;
254 box-shadow: none !important;
255 text-shadow: none !important;
256 border-radius: 4px;
257 height: 38px;
258 -webkit-transition: background-color .2s;
259 transition: background-color .2s;
260 -webkit-border-radius: 4px;
261 -moz-border-radius: 4px;
262 -ms-border-radius: 4px;
263 -o-border-radius: 4px;
264 }
265
266 .sp_post_carousel_page_pcp_settings .spf-header-right .spf-buttons .button.spf-reset-section:hover {
267 background-color: #c03635 !important;
268 }
269
270 input[type=checkbox]:focus, input[type=radio]:focus {
271 box-shadow: none;
272 outline: none;
273 }
274
275 /*
276 .spf-buttons .button.spf-reset-section {
277 border-color: #6b6a6a;
278 background: #6b6a6a;
279 box-shadow: 0 3px 0 #4a4949;
280 }
281
282 .spf-buttons .button.spf-reset-section:hover {
283 border-color: #6b6a6a;
284 background: #6b6a6a;
285 box-shadow: 0 3px 0 #4a4949;
286 }
287
288 .spf-buttons .button.spf-reset-all {
289 box-shadow: 0 3px 0 #a5212e;
290 color: #fff;
291 border-color: #dc3545;
292 background: #dc3545;
293 }
294
295 .spf-buttons .button.spf-reset-all:hover {
296 box-shadow: 0 3px 0 #82121d;
297 border-color: #bd2130;
298 background: #bd2130;
299 } */
300 .spf-buttons .button.spf-reset-section {
301 background-color: #77777c !important;
302 }
303
304 .spf-buttons .button.spf-reset-section:hover {
305 background-color: #616169 !important;
306 }
307
308 .spf-buttons .button.spf-reset-all:hover {
309 background-color: #b82f2f !important;
310 }
311
312 .spf-buttons .button:focus {
313 outline: none !important;
314 box-shadow: none !important;
315 }
316
317 .spf-header-left {
318 float: left;
319 }
320
321 .spf-header-right {
322 float: right;
323 }
324
325 /**
326 * 01. 04. Navigation
327 */
328
329 .spf-nav {
330 display: block;
331 width: auto;
332 }
333
334 .sp-pc-settings .spf-nav {
335 display: block;
336 position: relative;
337 z-index: 10;
338 float: left;
339 width: 225px;
340 }
341
342 .sp-pc-settings .spf-nav-background {
343 position: absolute;
344 top: 0;
345 left: 0;
346 bottom: 0;
347 z-index: 9;
348 width: 225px;
349 border-right: 1px solid #cecece;
350 }
351
352 .spf-nav ul {
353 clear: left;
354 margin: 0;
355 list-style-type: none;
356 }
357
358 .spf-nav ul li {
359 margin-bottom: 0;
360 }
361
362 .spf-nav ul li a {
363 font-size: 13px;
364 position: relative;
365 display: block;
366 padding: 14px 12px;
367 text-decoration: none;
368 -moz-transition: none;
369 -o-transition: none;
370 -webkit-transition: none;
371 transition: none;
372 }
373
374 #spf-section-sp_pcp_layouts_1 .pcp-admin-header .support a,
375 .spf-nav ul li a:focus {
376 outline: none;
377 -moz-box-shadow: none;
378 -webkit-box-shadow: none;
379 box-shadow: none;
380 }
381
382 .spf-nav ul li .spf-section-active:after {
383 content: " ";
384 position: absolute;
385 right: 0;
386 top: 50%;
387 height: 0;
388 width: 0;
389 pointer-events: none;
390 border: solid transparent;
391 border-right-color: #fff;
392 border-width: 4px;
393 margin-top: -4px;
394 }
395
396 .spf-nav ul li .spf-arrow:after {
397 content: "\f054";
398 display: inline-block;
399 font-family: "FontAwesome";
400 font-size: 9px;
401 line-height: 1;
402 position: absolute;
403 right: 10px;
404 top: 50%;
405 margin-top: -4px;
406 -moz-transform: rotate(0);
407 -ms-transform: rotate(0);
408 -webkit-transform: rotate(0);
409 transform: rotate(0);
410 }
411
412 .spf-nav ul li.spf-tab-active .spf-arrow:after {
413 -moz-transform: rotate(90deg);
414 -ms-transform: rotate(90deg);
415 -webkit-transform: rotate(90deg);
416 transform: rotate(90deg);
417 }
418
419 .spf-nav ul li.spf-tab-active ul {
420 display: block;
421 }
422
423 .spf-nav ul ul {
424 display: none;
425 position: relative;
426 }
427
428 .spf-nav ul ul li a {
429 font-size: 12px;
430 padding: 12px 14px 12px 24px;
431 }
432
433 .spf-nav .fa {
434 width: 20px;
435 margin-right: 5px;
436 font-size: 14px;
437 text-align: center;
438 }
439
440 .spf-nav .spf-label-error {
441 margin-left: 4px;
442 vertical-align: top;
443 }
444
445 /**
446 * 01. 05. Wrapper
447 */
448
449 .spf-wrapper {
450 position: relative;
451 }
452
453 /**
454 * 01. 06. Content
455 */
456
457 .spf-content {
458 background-color: #fff;
459 -moz-transition: opacity 0.2s;
460 -o-transition: opacity 0.2s;
461 -webkit-transition: opacity 0.2s;
462 transition: opacity 0.2s;
463 }
464
465 .sp-pc-settings .spf-content {
466 position: relative;
467 margin-left: 225px;
468 }
469
470 /**
471 * 01. 07. Section
472 */
473
474 .spf-sections {
475 float: left;
476 width: 100%;
477 }
478
479 .spf-section {
480 display: none;
481 }
482
483 .spf-section-title {
484 display: none;
485 padding: 20px 30px;
486 /* background-color: #f5f5f5; */
487 background-color: #E2572C;
488 border-top: 1px solid #eee;
489 border-bottom: 1px solid #eee;
490 }
491
492 .spf-section-title h3 {
493 margin: 0;
494 padding: 0;
495 font-size: 13px;
496 font-weight: bold;
497 text-transform: uppercase;
498 color: #fff;
499 }
500
501 .spf-section-title .fa {
502 margin-right: 5px;
503 }
504
505 /*
506 Smart Post Show Custom CSS.
507 */
508
509 .sp-pcp-options .spf-nav {
510 width: 225px;
511 }
512
513 .sp-pcp-options .spf-nav {
514 display: block;
515 position: relative;
516 z-index: 10;
517 float: left;
518 width: 225px;
519 }
520
521 #sp_pcp_view_options .spf-nav ul li {
522 display: inline-block;
523 /* custom style */
524 }
525
526 .sp-pcp-options .spf-nav-background {
527 position: absolute;
528 top: 0;
529 left: 0;
530 bottom: 0;
531 z-index: 9;
532 width: 225px;
533 }
534
535 .sp-pcp-options .spf-content {
536 position: relative;
537 margin-left: 225px;
538 background-color: #fff;
539 -moz-transition: opacity 0.2s;
540 -o-transition: opacity 0.2s;
541 -webkit-transition: opacity 0.2s;
542 transition: opacity 0.2s;
543 }
544
545 /**
546 * 01. 08. Footer
547 */
548
549 .spf-footer {
550 padding: 20px;
551 font-size: 11px;
552 }
553
554 /**
555 * 01. 09. Copyright
556 */
557
558 .spf-copyright {
559 float: left;
560 margin-top: 5px;
561 }
562
563 /**
564 * 01. 10. Show All Options
565 */
566
567 .spf-search-all .spf-nav-background,
568 .spf-search-all .spf-nav,
569 .spf-show-all .spf-nav-background,
570 .spf-show-all .spf-nav {
571 display: none;
572 }
573
574 .spf-search-all .spf-content,
575 .spf-show-all .spf-content {
576 margin-left: 0;
577 }
578
579 .spf-search-all .spf-section-title,
580 .spf-search-all .spf-section,
581 .spf-show-all .spf-section-title,
582 .spf-show-all .spf-section {
583 display: block !important;
584 }
585
586 .spf-search-all .spf-section-title {
587 display: none !important;
588 }
589
590 .spf-expand-all {
591 float: left;
592 padding: 0 8px;
593 margin-right: 4px;
594 z-index: 1;
595 font-size: 14px;
596 line-height: 28px;
597 cursor: pointer;
598 -webkit-user-select: none;
599 user-select: none;
600 -moz-border-radius: 2px;
601 -webkit-border-radius: 2px;
602 border-radius: 2px;
603 -moz-transition: all 0.2s;
604 -o-transition: all 0.2s;
605 -webkit-transition: all 0.2s;
606 transition: all 0.2s;
607 }
608
609 .spf-expand-all span {
610 font-size: 11px;
611 vertical-align: middle;
612 }
613
614 /**
615 * 01. 11. Search Input
616 */
617
618 .spf-search {
619 float: left;
620 }
621
622 .spf-search input {
623 margin: 0 2px 0 0;
624 border: none;
625 font-size: 12px;
626 line-height: 28px;
627 min-height: 28px;
628 text-align: inherit;
629 padding: 0 10px;
630 -moz-border-radius: 2px;
631 -webkit-border-radius: 2px;
632 border-radius: 2px;
633 -moz-box-shadow: none;
634 -webkit-box-shadow: none;
635 box-shadow: none;
636 }
637
638 .spf-search input:focus {
639 -moz-box-shadow: none;
640 -webkit-box-shadow: none;
641 box-shadow: none;
642 }
643
644 .spf-saving .spf-buttons,
645 .spf-saving .spf-content {
646 cursor: default;
647 pointer-events: none;
648 opacity: 0.75;
649 }
650
651 /**
652 * 01. 12. Metabox
653 */
654
655 .spf-metabox {
656 margin: -6px -12px -12px -12px;
657 }
658
659 .spf-metabox .spf-section-title {
660 padding: 20px;
661 }
662
663 .block-editor-page .spf-metabox {
664 margin: -6px -14px -12px -14px;
665 }
666
667 .spf-restore-wrapper {
668 text-align: right;
669 padding: 10px;
670 border-top: 1px solid #eee;
671 }
672
673 .spf-restore-wrapper .spf-button-cancel,
674 .spf-restore-wrapper input {
675 display: none;
676 }
677
678 .spf-restore-wrapper span {
679 -webkit-user-select: none;
680 user-select: none;
681 }
682
683 .spf-restore-wrapper input:checked~.spf-button-restore {
684 display: none;
685 }
686
687 .spf-restore-wrapper input:checked~.spf-button-cancel {
688 display: inline-block;
689 }
690
691 #side-sortables .spf-section-title {
692 padding: 12px;
693 }
694
695 #side-sortables .spf-field {
696 padding: 12px;
697 }
698
699 #side-sortables .spf-field .spf-title {
700 float: none;
701 width: 100%;
702 margin-bottom: 10px;
703 }
704
705 #side-sortables .spf-field .spf-fieldset {
706 margin-left: 0;
707 }
708
709 #side-sortables .spf-notice {
710 padding: 12px;
711 }
712
713 .notice-help-image.spf-field.spf-field-notice {
714 display: flex;
715 }
716
717 .notice-help-image.spf-field .spf-notice {
718
719 padding-right: 34px;
720
721 }
722
723 .notice-help-image.spf-field .spf-help {
724 line-height: 31px;
725 margin-left: -30px;
726 }
727
728 /**
729 * 01. 13. Help Tooltip
730 */
731
732 /* .spf-tooltip {
733 position: absolute;
734 z-index: 5000001;
735 font-size: 12px;
736 line-height: 1.4;
737 text-align: left;
738 text-decoration: none;
739 padding: 6px 12px;
740 max-width: 300px;
741 color: #fff;
742 background-color: #000;
743 background-color: rgba(0, 0, 0, 0.85);
744 -moz-border-radius: 4px;
745 -webkit-border-radius: 4px;
746 border-radius: 4px;
747 } */
748 .spf-tooltip {
749 position: absolute;
750 z-index: 5000001;
751 text-align: left;
752 text-decoration: none;
753 max-width: 250px;
754 background-color: rgba(12, 25, 36, 1);
755 border-radius: 4px;
756 padding: 14px 20px;
757 color: #94b2c1;
758 font-size: 14px;
759 line-height: 20px;
760 margin-left: 10px;
761 }
762
763 .spf-tooltip .spf-open-live-demo,
764 .spf-tooltip .spf-open-docs {
765 margin-top: 10px;
766 display: inline-block;
767 line-height: 34px;
768 background-color: #1d81f9;
769 border-radius: 3px;
770 padding: 0 12px;
771 font-size: 11px;
772 text-transform: capitalize;
773 text-decoration: none;
774 color: #fff;
775 margin-bottom: 6px;
776 font-weight: 500;
777 }
778
779 .spf-tooltip .spf-open-live-demo {
780 background-color: transparent;
781 border: 2px solid #1d81f9;
782 line-height: 32px;
783 color: #1d81f9;
784 }
785
786 .spf-tooltip .spf-open-docs:hover,
787 .spf-tooltip .spf-open-live-demo:hover {
788 background-color: #226DE5;
789 border-color: #226DE5;
790 color: #ffffff;
791 }
792
793 .spf-tooltip .spf-info-label {
794 color: #fff;
795 font-size: 14px;
796 line-height: 20px;
797 font-weight: 500;
798 /* text-transform: capitalize; */
799 margin-bottom: 10px;
800 }
801
802 .spf-tooltip .spf-info-label.img {
803 margin-bottom: 0;
804 }
805
806 .spf-tooltip .spf-open-docs {
807 margin-right: 10px;
808 }
809
810 .spf-field-subheading .spf-title {
811 width: 100%;
812 }
813
814 .pcp-admin-header.spf-field::after,
815 .pcp-admin-header.spf-field::before,
816 .pcp-admin-header .clear,
817 .spf-help-text.spf-support {
818 display: none;
819 }
820
821 .spf-tooltip.support-tooltip {
822 max-width: 300px;
823 }
824
825 .spf-tooltip.support-tooltip a.spf-open-docs {
826 width: 100%;
827 box-sizing: border-box;
828 text-align: center;
829 padding: 8px 8px 8px 8px;
830 margin-bottom: 20px;
831 margin-top: 20px;
832 font-size: 13px;
833 line-height: 20px;
834 }
835
836 .spf-tooltip.support-tooltip a.spf-open-docs.support {
837 margin-bottom: 10px;
838 background: #fff;
839 color: #000;
840 }
841
842 .spf-tooltip.support-tooltip a.spf-open-docs.support:hover {
843 background: #f5f5f5;
844 }
845
846 .spf-tooltip.support-tooltip a.spf-open-docs.feature-request {
847 background: transparent;
848 color: #fff;
849 border: 2px solid #fff;
850 text-transform: none;
851 margin-top: 0;
852 }
853
854 .spf-tooltip.support-tooltip a.spf-open-docs.feature-request:hover {
855 background: #fff;
856 color: #000;
857 border: 2px solid #fff;
858 }
859
860 .pcp-admin-header .support {
861 position: relative;
862 }
863
864 .pcp-admin-header .support::before {
865 content: '';
866 width: 100%;
867 height: 50px;
868 position: absolute;
869 top: 80%;
870 z-index: 10;
871 cursor: pointer;
872 }
873
874 .spf-tooltip.support-tooltip .spf-info-label {
875 text-transform: none;
876 }
877
878 .spf-tooltip .info-button a:nth-child(1):is(.spf-open-live-demo) {
879 background-color: #1d81f9;
880 color: #fff;
881 }
882
883 .spf-tooltip .info-button a:nth-child(1):is(.spf-open-live-demo):hover {
884 background-color: #226DE5;
885 }
886
887 .spf-tooltip .spf-img-tag {
888 margin-bottom: 6px;
889 /* min-width: 240px; */
890 }
891
892 .spf-tooltip .spf-img-tag img {
893 width: 100%;
894 }
895
896 .spf-help.title-info img {
897 vertical-align: middle;
898 }
899
900 .pcp-admin-header .spf-support-area {
901 color: #fff;
902 text-decoration: none;
903 font-size: 15px;
904 font-weight: 600;
905 cursor: pointer;
906 }
907
908 .spf-tooltip:not(.support-tooltip):before {
909 content: '';
910 width: 0;
911 position: absolute;
912 height: 0;
913 width: 0;
914 height: 0;
915 border-top: 10px solid transparent;
916 border-bottom: 10px solid transparent;
917 border-right: 10px solid rgba(12, 25, 36, .95);
918 left: -10px;
919 top: calc(50% - 7px);
920 }
921
922 /**
923 * 02. Themes
924 */
925
926 /**
927 * 02. 01. Theme Dark
928 */
929
930 .spf-theme-dark .spf-header-inner {
931 background-color: #050505;
932 }
933
934 .spf-theme-dark .spf-header-inner h1 {
935 color: #fff;
936 }
937
938 .spf-theme-dark .spf-header-inner h1 small {
939 color: #555;
940 }
941
942 .spf-theme-dark .spf-expand-all {
943 color: #999;
944 background-color: #222;
945 }
946
947 .spf-theme-dark .spf-expand-all:hover {
948 color: #fff;
949 background-color: #333;
950 }
951
952 .spf-theme-dark .spf-search input {
953 color: #fff;
954 background-color: #222;
955 }
956
957 .spf-theme-dark .spf-search:focus {
958 background-color: #444;
959 }
960
961 .spf-theme-dark .spf-search::-webkit-input-placeholder {
962 color: #666;
963 }
964
965 .spf-theme-dark .spf-nav ul li a {
966 color: #999;
967 background-color: #222;
968 border-bottom: 1px solid #2f2f2f;
969 }
970
971 .spf-theme-dark .spf-nav ul li a:hover {
972 color: #fff;
973 }
974
975 .spf-theme-dark .spf-nav ul li .spf-section-active {
976 color: #fff;
977 background-color: #111;
978 }
979
980 .spf-theme-dark .spf-nav ul ul li a {
981 background-color: #191919;
982 border-bottom: 1px solid #2f2f2f;
983 }
984
985 .spf-theme-dark .spf-nav ul ul li .spf-section-active {
986 background-color: #101010;
987 }
988
989 .spf-theme-dark .spf-nav ul ul:before {
990 background-color: rgba(34, 34, 34, 0.75);
991 }
992
993 .spf-theme-dark .spf-nav>ul>li:last-child>a {
994 border-bottom: none;
995 }
996
997 .spf-theme-dark .spf-nav-background {
998 background-color: #222;
999 }
1000
1001 .spf-theme-dark .spf-footer {
1002 color: #555;
1003 background-color: #050505;
1004 }
1005
1006 /**
1007 * 02. 02. Theme Light
1008 */
1009
1010 .spf-theme-light .spf-container {
1011 border: 1px solid #e5e5e5;
1012 -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
1013 -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
1014 box-shadow: 0 0 15px rgba(0, 0, 0, 0.04);
1015 }
1016
1017 .spf-theme-light .spf-header-inner {
1018 border-bottom: 1px solid #e5e5e5;
1019 background-color: #f5f5f5;
1020 background: linear-gradient(#fefefe, #f5f5f5);
1021 }
1022
1023 .sp-pc-settings.spf-theme-light .spf-header-inner {
1024 border-bottom: 1px solid #cecece;
1025 background-color: #f2f2f2;
1026 background: linear-gradient(#fefefe, #f2f2f2);
1027 }
1028
1029 .spf-theme-light .spf-header-inner h1 small {
1030 color: #999;
1031 }
1032
1033 .spf-theme-light .spf-expand-all {
1034 color: #999;
1035 background-color: #fff;
1036 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
1037 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
1038 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
1039 }
1040
1041 .spf-theme-light .spf-expand-all:hover {
1042 color: #555;
1043 }
1044
1045 .spf-theme-light .spf-search input {
1046 color: #555;
1047 background-color: #fff;
1048 -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
1049 -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
1050 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
1051 }
1052
1053 .spf-theme-light .spf-search input::-webkit-input-placeholder {
1054 color: #bbb;
1055 }
1056
1057 .spf-theme-light .spf-nav {
1058 background: #f1f1f1;
1059 }
1060
1061 .spf-theme-light .spf-nav ul li a {
1062 background-color: #E2572C;
1063 border-top: 1px solid #E2572C;
1064 border-right: 1px solid #E2E2E1;
1065 border-bottom: 1px solid #ddd;
1066 color: #fff;
1067 font-size: 13px;
1068 font-weight: 600;
1069 line-height: 1.4;
1070 padding: 16px 15px;
1071 text-transform: uppercase;
1072 }
1073
1074 .sp-pc-settings.spf-theme-light .spf-nav ul li a {
1075 padding: 14px 15px;
1076 font-size: 12px;
1077 background: #efefef;
1078 color: #000;
1079 border-bottom: 1px solid #cecece;
1080 border-top: 1px solid #cecece;
1081 border-right: 0;
1082 }
1083
1084 .sp-pc-settings.spf-theme-light .spf-nav ul li a:first-child {
1085 border-top: 0 solid transparent;
1086 }
1087
1088 .sp-pc-settings.spf-theme-light .spf-nav ul li .spf-section-active {
1089 background-color: #fff;
1090 color: #E2572C;
1091 border-right: 1px solid #fff;
1092 border-bottom: 1px solid #cecece;
1093 border-top: 1px solid #fff;
1094 box-shadow: 3px 0 0 0 #E2572C inset;
1095
1096 }
1097
1098 .spf-theme-light .spf-nav ul li .spf-section-active {
1099 background-color: #fff;
1100 color: #000;
1101 }
1102
1103 #sp_pcp_view_options .spf-theme-light .spf-nav ul li .spf-section-active {
1104 border-bottom: 1px solid #fff;
1105 border-top: 1px solid #E2572C;
1106 box-shadow: 0 3px 0 0 #E2572C inset;
1107 }
1108
1109 .sp-pcp-options.spf-theme-light .spf-nav ul li a {
1110 background: #efefef;
1111 color: #000;
1112 border-bottom: 1px solid #cecece;
1113 border-top: 1px solid #cecece;
1114 }
1115
1116 .sp-pcp-options.spf-theme-light .spf-nav ul li a:first-child {
1117 border-top: 1px solid transparent;
1118 }
1119
1120 #sp_pcp_view_options .spf-theme-light .spf-nav ul li .spf-section-active i,
1121 .sp-pcp-options.spf-theme-light .spf-nav ul li .spf-section-active i {
1122 color: #E2572C;
1123 }
1124
1125 .sp-pcp-options.spf-theme-light .spf-nav ul li .spf-section-active {
1126 background-color: #fff;
1127 border-right: 1px solid #fff;
1128 border-bottom: 1px solid #fff;
1129 border-top: 1px solid #fff;
1130 box-shadow: 4px 0 0 0 #E2572C inset;
1131 }
1132
1133 .spf-theme-light .spf-nav ul li .spf-section-active:after {
1134 display: none;
1135 }
1136
1137 .spf-theme-light .spf-nav ul ul li a {
1138 background-color: #eee;
1139 border-bottom: 1px solid #e5e5e5;
1140 }
1141
1142 .spf-theme-light .spf-nav-background {
1143 background-color: #ddd;
1144 }
1145
1146 .spf-theme-light .spf-footer {
1147 color: #555;
1148 border-top: 1px solid #e5e5e5;
1149 background-color: #f5f5f5;
1150 background: linear-gradient(#fafafa, #f5f5f5);
1151 }
1152
1153 /**
1154 * 03. Fields
1155 */
1156
1157 .spf-field {
1158 position: relative;
1159 padding: 22px 30px;
1160 }
1161
1162 .spf-field img {
1163 vertical-align: middle;
1164 }
1165
1166 .spf-field p:first-child {
1167 margin-top: 0;
1168 }
1169
1170 .spf-field p:last-child {
1171 margin-bottom: 0;
1172 }
1173
1174 .spf-field:after,
1175 .spf-field:before {
1176 content: " ";
1177 display: table;
1178 }
1179
1180 .spf-field:after {
1181 clear: both;
1182 }
1183
1184 .spf-field h4 {
1185 margin-top: 0;
1186 }
1187
1188 .spf-field .spf-title {
1189 position: relative;
1190 width: 20%;
1191 float: left;
1192 }
1193
1194 .spf-field .spf-title h4 {
1195 margin: 0;
1196 color: #23282d;
1197 }
1198
1199 .spf-field .spf-fieldset {
1200 margin-left: 25%;
1201 }
1202
1203 .spf-pseudo-field {
1204 padding: 0 5px 0 0 !important;
1205 display: inline-block;
1206 }
1207
1208 .spf-pseudo-field+.spf-pseudo-field {
1209 border: 0;
1210 }
1211
1212 .spf-pseudo-field pre {
1213 display: none;
1214 }
1215
1216 /**
1217 * 03. 02. Field: accordion
1218 */
1219
1220 /* .spf-field-accordion .spf-field {
1221 padding: 20px;
1222 } */
1223
1224 .spf-field-accordion .spf-accordion-item {
1225 position: relative;
1226 margin-bottom: 5px;
1227 }
1228
1229 .spf-field-accordion .spf-accordion-item h4 {
1230 font-size: 1em;
1231 }
1232
1233 .spf-field-accordion .spf-accordion-title {
1234 display: block;
1235 cursor: pointer;
1236 position: relative;
1237 margin: 0;
1238 padding: 18px;
1239 min-height: 0;
1240 font-size: 100%;
1241 -webkit-user-select: none;
1242 user-select: none;
1243 border: 1px solid #ccd0d4;
1244 background-color: #fafafa;
1245 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1246 transition: border-color .15s;
1247 }
1248
1249 .spf-field-accordion .spf-accordion-title:active,
1250 .spf-field-accordion .spf-accordion-title:hover,
1251 .spf-field-accordion .spf-accordion-title:focus {
1252 outline: none;
1253 border-color: #999;
1254 }
1255
1256 .spf-field-accordion .spf-accordion-icon {
1257 width: 14px;
1258 text-align: center;
1259 }
1260
1261 .spf-field-accordion .spf--icon {
1262 width: 20px;
1263 text-align: center;
1264 }
1265
1266 .spf-field-accordion .spf-accordion-content {
1267 display: none;
1268 padding: 0;
1269 border: 1px solid #AAD2F3;
1270 border-top: none;
1271 background-color: #fff;
1272 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1273 }
1274
1275 .spf-field-accordion .spf-accordion-content>.spf-field {
1276 padding: 15px;
1277 }
1278
1279 .spf-field-accordion .spf-accordion-open {
1280 display: block;
1281 }
1282
1283 /**
1284 * 03. 03. Field: background
1285 */
1286
1287 /* .spf-field-background_adv select,
1288 .spf-field-background select {
1289 width: 100%;
1290 } */
1291
1292 .spf-field-group .spf-field-background_adv .spf-field,
1293 .spf-field-background_adv .spf-field,
1294 .spf-field-background .spf-field {
1295 border: 0 !important;
1296 padding: 0;
1297 padding: 0;
1298 border: 0;
1299 margin-bottom: 6px;
1300 margin-right: 6px;
1301
1302 }
1303
1304 .spf-field-background_adv .spf--blocks,
1305 .spf-field-background .spf--blocks {
1306 display: flex;
1307 }
1308
1309 .spf-field-background_adv .spf--title,
1310 .spf-field-background .spf--title {
1311 color: #777;
1312 font-size: 12px;
1313 }
1314
1315 .spf-field-background_adv .spf--selects,
1316 .spf-field-background .spf--selects {
1317 display: flex;
1318 flex-wrap: wrap;
1319 }
1320
1321 .spf-field-background_adv .spf--selects select,
1322 .spf-field-background .spf--selects select {
1323 min-width: 100%;
1324 margin: 0;
1325 }
1326
1327 .spf-field-background .spf--selects .spf-field {
1328 flex: 1;
1329 }
1330
1331 .spf-field-background_adv .spf--media,
1332 .spf-field-background .spf--media {
1333 width: 100%;
1334 padding-right: 10px;
1335 }
1336
1337 .spf-field-background .wp-color-result.button {
1338 margin-bottom: 0;
1339 }
1340
1341 /**
1342 * Custom CSS
1343 */
1344
1345 .wp-core-ui #sp_pcp_view_options select {
1346 height: 30px;
1347 min-height: 30px;
1348 line-height: 1;
1349 }
1350
1351 /* .wp-core-ui #sp_pcp_view_options .button, .wp-core-ui #sp_pcp_view_options .button-primary, .wp-core-ui #sp_pcp_view_options .button-secondary {
1352 line-height: 2.2;
1353 min-height: 38px;
1354 } */
1355
1356 .spf-field.spf-field-wp_editor.pcp_carousel_content_source .spf-fieldset,
1357 .spf-field.spf-field-background_adv.pcp_carousel_content_bg .spf-fieldset {
1358 margin-left: 0;
1359 margin-top: 35px;
1360 }
1361
1362 .spf-field.spf-field-wp_editor.pcp_carousel_content_source .spf-title,
1363 .spf-field.spf-field-background_adv.pcp_carousel_content_bg .spf-title {
1364 width: 100%;
1365 }
1366
1367 .spf-field.spf-field-background_adv .spf--preview {
1368 font-size: 16px;
1369 line-height: 20px;
1370 padding: 20px;
1371 color: #222;
1372 border: 1px solid #eee;
1373 background-color: #fff;
1374 height: 150px;
1375 border-radius: 2.5px;
1376 user-select: none;
1377 -webkit-user-select: none;
1378 transition: background-color .2s, border-color .2s;
1379 }
1380
1381 .spf-field.spf-field-background_adv .spf--block-preview {
1382 cursor: pointer;
1383 position: relative;
1384 overflow: hidden;
1385 margin-top: 10px;
1386 width: 100%;
1387 }
1388
1389 .spf-field.spf-field-background_adv .spf--black-background {
1390 border-color: #000;
1391 background-color: #000;
1392 }
1393
1394 .spf-field.spf-field-background_adv .spf--toggle {
1395 position: absolute;
1396 top: 5px;
1397 right: 10px;
1398 color: #999;
1399 }
1400
1401 /**
1402 * 03. 05. Field: border, spacing, dimensions, column, dimensions_advanced
1403 */
1404
1405 .spf-field-box_shadow .spf--inputs,
1406 .spf-field-border .spf--inputs,
1407 .spf-field-spacing .spf--inputs,
1408 .spf-field-column .spf--inputs,
1409 .spf-field-dimensions .spf--inputs,
1410 .spf-field-dimensions_advanced .spf--inputs {
1411 float: left;
1412 display: flex;
1413 flex-wrap: wrap;
1414 }
1415
1416 .spf-field-box_shadow .spf--input,
1417 .spf-field-border .spf--input,
1418 .spf-field-spacing .spf--input,
1419 .spf-field-column .spf--input,
1420 .spf-field-dimensions .spf--input,
1421 .spf-field-dimensions_advanced .spf--input {
1422 display: flex;
1423 padding-right: 6px;
1424 padding-bottom: 4px;
1425 box-sizing: border-box;
1426 }
1427
1428 .spf-field-box_shadow .spf--input select,
1429 .spf-field-border .spf--input select,
1430 .spf-field-spacing .spf--input select,
1431 .spf-field-column .spf--input select,
1432 .spf-field-dimensions .spf--input select,
1433 .spf-field-dimensions_advanced .spf--input select {
1434 margin: 0;
1435 min-height: 30px;
1436 line-height: 1;
1437 }
1438
1439 .spf-content .spf-field-box_shadow .spf--input input {
1440 width: 58px;
1441 }
1442
1443 .spf-field-box_shadow .spf--input input,
1444 .spf-field-border .spf--input input,
1445 .spf-field-spacing .spf--input input,
1446 .spf-field-column .spf--input input,
1447 .spf-field-dimensions .spf--input input,
1448 .spf-field-dimensions_advanced .spf--input input {
1449 position: relative;
1450 z-index: 1;
1451 margin: 0;
1452 width: 65px;
1453 max-width: 100%;
1454 text-align: center;
1455 height: 30px;
1456 min-height: 30px;
1457 }
1458
1459 .spf-field-box_shadow .spf--color,
1460 .spf-field-border .spf--color,
1461 .spf-field-spacing .spf--color,
1462 .spf-field-dimensions .spf--color {
1463 float: left;
1464 }
1465
1466 .spf-field-box_shadow .spf--label,
1467 .spf-field-border .spf--label,
1468 .spf-field-spacing .spf--label,
1469 .spf-field-column .spf--label,
1470 .spf-field-dimensions .spf--label,
1471 .spf-field-dimensions_advanced .spf--label {
1472 display: flex;
1473 flex-direction: column;
1474 justify-content: center;
1475 user-select: none;
1476 min-width: 20px;
1477 max-width: 100%;
1478 padding: 0 4px;
1479 font-size: 12px;
1480 text-align: center;
1481 color: #555;
1482 border: 1px solid #7B776C;
1483 background-color: #f5f5f5;
1484 }
1485
1486 .spf-field-box_shadow .spf--icon,
1487 .spf-field-border .spf--icon,
1488 .spf-field-spacing .spf--icon,
1489 .spf-field-column .spf--icon,
1490 .spf-field-dimensions .spf--icon,
1491 .spf-field-dimensions_advanced .spf--icon {
1492 border-right: 0;
1493 border-radius: 4px 0 0 4px;
1494 }
1495
1496 .spf-field-box_shadow .spf--icon+input,
1497 .spf-field-border .spf--icon+input,
1498 .spf-field-spacing .spf--icon+input,
1499 .spf-field-column .spf--icon+input,
1500 .spf-field-dimensions .spf--icon+input,
1501 .spf-field-dimensions_advanced .spf--icon+input {
1502 border-radius: 0 4px 4px 0;
1503 padding-right: 0;
1504 }
1505
1506 .spf-field input:has(+ .spf--border-select),
1507 .spf-field input:has(+ .spf--unit) {
1508 border-top-right-radius: 0px;
1509 border-bottom-right-radius: 0px;
1510 }
1511
1512 .spf-field-box_shadow .spf--unit,
1513 .spf-field-border .spf--unit,
1514 .spf-field-spacing .spf--unit,
1515 .spf-field-column .spf--unit,
1516 .spf-field-dimensions .spf--unit,
1517 .spf-field-dimensions_advanced .spf--unit {
1518 border-left: 0;
1519 border-radius: 0 4px 4px 0;
1520 }
1521
1522 .spf-field-box_shadow .spf--is-unit,
1523 .spf-field-border .spf--is-unit,
1524 .spf-field-spacing .spf--is-unit,
1525 .spf-field-dimensions .spf--is-unit {
1526 border-top-right-radius: 0;
1527 border-bottom-right-radius: 0;
1528 }
1529
1530 /**
1531 * 03. 06. Field: button_set
1532 */
1533 .spf-field-button_set .spf--buttons {
1534 display: inline-block;
1535 }
1536
1537 .spf-field-button_set .spf--button {
1538 position: relative;
1539 z-index: 1;
1540 float: left;
1541 cursor: pointer;
1542 padding: 9px 14px;
1543 min-width: 15px;
1544 text-align: center;
1545 color: #555;
1546 border: 1px solid #cccccc;
1547 background-color: #f7f7f7;
1548 user-select: none;
1549 -webkit-user-select: none;
1550 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
1551 }
1552
1553 .spf-field-button_set .spf--button:first-child {
1554 border-radius: 4px 0 0 4px;
1555 }
1556
1557 .spf-field-button_set .spf--button:last-child {
1558 border-radius: 0 4px 4px 0;
1559 }
1560
1561 .spf-field-button_set .spf--button:not(:first-child) {
1562 margin-left: -1px;
1563 }
1564
1565 .spf-field-button_set .spf--button:hover {
1566 background-color: #eee;
1567 }
1568
1569 .spf-field-button_set .spf--active:hover,
1570 .spf-field-button_set .spf--active {
1571 z-index: 2;
1572 color: #fff;
1573 border-color: #1A74E4;
1574 background-color: #1A74E4;
1575 }
1576
1577 .spf-field-button_set input {
1578 display: none;
1579 }
1580
1581 /**
1582 * 03. 07. Field: checkbox, radio
1583 */
1584
1585 .spf-field-checkbox ul,
1586 .spf-field-radio ul {
1587 margin: 0;
1588 padding: 0 1px;
1589 list-style-type: none;
1590 overflow-y: auto;
1591 max-height: 305px;
1592 }
1593
1594 .spf-field-checkbox ul ul,
1595 .spf-field-radio ul ul {
1596 max-height: none;
1597 }
1598
1599 .spf-field-checkbox .spf--inline-list li,
1600 .spf-field-radio .spf--inline-list li {
1601 display: inline-block;
1602 margin-right: 15px;
1603 }
1604
1605 .spf-field-checkbox input[type="radio"]:checked:before,
1606 .spf-field-radio input[type="radio"]:checked:before {
1607 line-height: 10px;
1608 }
1609
1610 .spf-field-checkbox .spf-checker,
1611 .spf-field-radio .spf-checker {
1612 cursor: pointer;
1613 }
1614
1615 /**
1616 * 03. 08. Field: code_editor
1617 */
1618
1619 .spf-field-code_editor .CodeMirror {
1620 width: 100%;
1621 height: 400px;
1622 }
1623
1624 .spf-field-code_editor .cm-s-default {
1625 border: 1px solid #ccd0d4;
1626 }
1627
1628 .spf-field-code_editor textarea {
1629 width: 100%;
1630 height: 400px;
1631 }
1632
1633 /**
1634 * 03. 09. Field: color
1635 */
1636
1637 .spf-field-color>input {
1638 opacity: 0.75;
1639 width: 115px;
1640 max-width: 100%;
1641 }
1642
1643 .spf-field-color .button.wp-picker-clear {
1644 margin-left: 6px;
1645 padding: 2px 8px;
1646 }
1647
1648 /**
1649 * 03. 10. Field: color_group
1650 */
1651
1652 .spf-field-color_group .spf--left {
1653 float: left;
1654 margin-right: 10px;
1655 margin-bottom: 5px;
1656 }
1657
1658 .spf-field-spacing .spf--title,
1659 .spf-field-border .spf--title,
1660 .spf-field-color_group .spf--title {
1661 color: #999;
1662 margin-bottom: 5px;
1663 text-transform: capitalize;
1664 }
1665
1666 .spf-field-spacing:not(.pcp_content_length_type, .pcp_title_length, .pcp-popup-size) .pcp-units {
1667 margin-top: 22px;
1668 }
1669
1670 /**
1671 * 03. 11. Field: fieldset
1672 */
1673
1674 .spf-field-fieldset .spf-fieldset-content {
1675 border: 1px solid #ccd0d4;
1676 background-color: #fff;
1677 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1678 }
1679
1680 .spf-field-fieldset .spf-fieldset-content>.spf-field {
1681 padding: 15px;
1682 }
1683
1684 .spf-field-fieldset .spf-field-subheading {
1685 font-size: 13px;
1686 }
1687
1688 /* Exclude fieldset
1689 Pagination Color */
1690 .sp_pcp_exclude_post_set .spf-fieldset-content,
1691 .pcp-pagination-color-set .spf-fieldset-content {
1692 border: 0;
1693 box-shadow: 0 0 0;
1694 }
1695
1696 .spf-field-fieldset .spf-fieldset-content>.sp_pcp_exclude_posts,
1697 .spf-field-fieldset .spf-fieldset-content>.sp_pcp_exclude_too,
1698 .pcp-pagination-color-set .spf-fieldset-content>.spf-field {
1699 padding: 0;
1700 }
1701
1702 /**
1703 * 03. 14. Field: group
1704 */
1705 /*
1706 .spf-field-group .spf-field {
1707 padding: 20px;
1708 } */
1709
1710 .spf-field-group .spf-cloneable-hidden {
1711 display: none !important;
1712 }
1713
1714 .spf-field-group .spf-cloneable-wrapper {
1715 position: relative;
1716 }
1717
1718 .spf-field-group .spf-cloneable-item {
1719 display: none;
1720 position: relative;
1721 margin-bottom: 5px;
1722 }
1723
1724 .spf-field-group .spf-cloneable-item h4 {
1725 font-size: 1em;
1726 }
1727
1728 .spf-field-group .ui-accordion .spf-cloneable-item {
1729 display: block;
1730 }
1731
1732 .spf-field-group .spf-cloneable-content {
1733 border: 1px solid #ccd0d4;
1734 background-color: #fff;
1735 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1736 }
1737
1738 .spf-field-group .spf-cloneable-content>.spf-field {
1739 padding: 15px;
1740 }
1741
1742 .spf-field-group .spf-cloneable-title {
1743 display: block;
1744 cursor: pointer;
1745 position: relative;
1746 user-select: none;
1747 margin: 0;
1748 padding: 13px 34px 13px 10px;
1749 min-height: 0;
1750 font-size: 100%;
1751 border: 1px solid #ccd0d4;
1752 background-color: #fafafa;
1753 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1754 transition: border-color .15s;
1755 }
1756
1757 .spf-field-group .spf-cloneable-title:active,
1758 .spf-field-group .spf-cloneable-title:hover,
1759 .spf-field-group .spf-cloneable-title:focus {
1760 border-color: #999;
1761 outline: none;
1762 }
1763
1764 .spf-field-group .spf-cloneable-helper {
1765 position: absolute;
1766 top: 12px;
1767 right: 10px;
1768 z-index: 1;
1769 font-size: 14px;
1770 line-height: 1em;
1771 }
1772
1773 .spf-field-group .spf-cloneable-helper i {
1774 display: inline-block;
1775 cursor: pointer;
1776 padding: 5px;
1777 color: #999;
1778 }
1779
1780 .spf-field-group .spf-cloneable-helper i:hover {
1781 color: #555;
1782 }
1783
1784 .spf-field-group .spf-cloneable-content {
1785 padding: 0;
1786 border-top: 0;
1787 }
1788
1789 .spf-field-group .spf-cloneable-title-prefix,
1790 .spf-field-group .spf-cloneable-title-number {
1791 margin-right: 5px;
1792 }
1793
1794 .spf-field-group .spf-cloneable-alert {
1795 display: none;
1796 margin-bottom: 5px;
1797 padding: 10px 20px;
1798 color: #a94442;
1799 border: 1px solid #ebccd1;
1800 background-color: #f2dede;
1801 }
1802
1803 .spf-field-group .widget-placeholder {
1804 margin-bottom: 10px;
1805 border: 1px dashed #f1c40f;
1806 background-color: #fffae4;
1807 }
1808
1809 .spf-field-group .spf-cloneable-placeholder {
1810 background-color: #ddd;
1811 margin-top: 4px;
1812 width: 100px;
1813 height: 10px;
1814 font-size: 10px;
1815 line-height: 10px;
1816 display: inline-block;
1817 vertical-align: top;
1818 border-radius: 2px;
1819 }
1820
1821 /**
1822 * 03. 15. Field: icon
1823 */
1824
1825 .spf-field-icon input {
1826 display: none;
1827 }
1828
1829 .spf-field-icon .button {
1830 margin-right: 5px;
1831 }
1832
1833 .spf-field-icon .spf-icon-preview i {
1834 display: inline-block;
1835 font-size: 14px;
1836 width: 30px;
1837 height: 26px;
1838 line-height: 26px;
1839 margin-right: 5px;
1840 text-align: center;
1841 vertical-align: top;
1842 color: #555;
1843 border: 1px solid #ccc;
1844 background-color: #f7f7f7;
1845 -moz-border-radius: 3px;
1846 -webkit-border-radius: 3px;
1847 border-radius: 3px;
1848 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1849 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1850 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1851 -moz-box-sizing: content-box;
1852 -webkit-box-sizing: content-box;
1853 box-sizing: content-box;
1854 }
1855
1856 /**
1857 * 03. 16. Field: image_select
1858 */
1859
1860 /* layout_preset */
1861
1862 .spf-field-image_select .spf--image,
1863 .spf-field-layout_preset .spf--image {
1864 cursor: pointer;
1865 position: relative;
1866 display: inline-block;
1867 max-width: 100%;
1868 margin: 0 10px 12px 0;
1869 vertical-align: bottom;
1870 outline: 2px solid transparent;
1871 background-color: #fff;
1872 user-select: none;
1873 -webkit-user-select: none;
1874 -moz-transition: all 0.2s;
1875 -o-transition: all 0.2s;
1876 -webkit-transition: all 0.2s;
1877 transition: all 0.2s;
1878 outline-offset: -2px;
1879 }
1880
1881 .spf-field-layout_preset:not(.hide-active-sign) .spf--active:not(.pcp-pro-only):before {
1882 position: absolute;
1883 top: 5px;
1884 right: 5px;
1885 left: auto;
1886 bottom: auto;
1887 display: flex;
1888 justify-content: center;
1889 align-items: center;
1890 font-size: 7px;
1891 font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
1892 font-weight: 900;
1893 content: "\f00c";
1894 width: 12px;
1895 height: 12px;
1896 line-height: 14px;
1897 color: #fff;
1898 background-color: #1A74E4;
1899 transition: opacity 0.2s;
1900 border-radius: 50%;
1901 }
1902
1903 .spf-field-image_select .spf--image:before {
1904 position: absolute;
1905 top: 0;
1906 left: 0;
1907 text-align: center;
1908 font-size: 11px;
1909 font-family: FontAwesome;
1910 content: "\f00c";
1911 width: 15px;
1912 height: 15px;
1913 line-height: 15px;
1914 opacity: 0;
1915 color: #fff;
1916 background-color: #E2572C;
1917 transition: opacity .2s;
1918 }
1919
1920 .spf-field-layout_preset .spf--active.spf--image:before,
1921 .spf-field-image_select .spf--image.spf--active:before {
1922 opacity: 1;
1923 }
1924
1925 .spf-field-image_select .spf--active img {
1926 outline-color: #E2572C;
1927 }
1928
1929 .spf-field-image_select img {
1930 vertical-align: top;
1931 outline: solid 3px transparent;
1932 outline-offset: -3px;
1933 margin-right: 8px;
1934 }
1935
1936 .spf-field-image_select input,
1937 .spf-field-layout_preset input {
1938 display: none;
1939 }
1940
1941 .spf-field-layout_preset.pcp-layout-preset .spf--image img {
1942 width: 110px;
1943 }
1944
1945 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset span {
1946 font-size: 13px;
1947 }
1948
1949 .spf-field-layout_preset span {
1950 margin-top: 5px;
1951 font-weight: 500;
1952 text-align: center;
1953 /* margin-right: 10px; */
1954 display: block;
1955 font-size: 12px;
1956 }
1957
1958 .spf-field-layout_preset .spf--image.spf--active img {
1959 outline-color: #1A74E4;
1960 outline: 2px solid #1A74E4;
1961 outline-offset: -2px;
1962 border-radius: 3px;
1963 }
1964
1965 .spf-field-layout_preset .spf--image img {
1966 max-width: 100%;
1967 }
1968
1969 /**
1970 * 03. 17. Field: link_color
1971 */
1972
1973 .spf-field-link_color .spf--left {
1974 float: left;
1975 margin-right: 10px;
1976 margin-bottom: 5px;
1977 }
1978
1979 .spf-field-link_color .spf--title {
1980 color: #777;
1981 margin-bottom: 5px;
1982 }
1983
1984 .spf-field-border .border-radius .spf--input {
1985 padding: 0;
1986 }
1987
1988 .spf-field-border .border-radius .spf--input select {
1989 background-color: #f5f5f5;
1990 border-top-left-radius: 0;
1991 border-bottom-left-radius: 0;
1992 border-left-width: 0;
1993 }
1994
1995 .spf-field-border .border-radius .spf--input select:focus {
1996 box-shadow: none;
1997 }
1998
1999 /**
2000 * 03. 28. Field: tabbed
2001 */
2002 .spf-field-tabbed .spf-tabbed-nav {
2003 max-width: 220px;
2004 width: 100%;
2005 border-right: 1px solid rgba(221, 221, 221, 1);
2006 }
2007
2008 .spf-field-tabbed.spf-field {
2009 display: flex;
2010 margin: 22px 30px;
2011 border: 1px solid rgba(221, 221, 221, 1);
2012 }
2013
2014 .spf-field-tabbed .spf-tabbed-sections {
2015 float: left;
2016 width: 100%;
2017 }
2018
2019 .spf-field-tabbed .spf-tabbed-section {
2020 border: none;
2021 background: #fff;
2022 /* padding-top: 20px;
2023 padding-bottom: 20px; */
2024 }
2025
2026 .spf-field-tabbed.spf-field:not(.hidden) {
2027 padding: 0;
2028 border: 1px solid rgba(221, 221, 221, 1);
2029 }
2030
2031 .spf-field-tabbed .spf-tabbed-section>.spf-field {
2032 padding: 20px;
2033 }
2034
2035 .spf-field-tabbed .spf-tabbed-nav .spf--icon {
2036 padding-right: 5px;
2037 }
2038
2039 .spf-field-tabbed .spf-tabbed-nav a {
2040 display: block;
2041 padding: 12px 14px;
2042 margin-top: 0;
2043 position: relative;
2044 text-decoration: none;
2045 color: #343434;
2046 font-weight: 600;
2047 border-bottom: 1px solid rgba(204, 204, 204, 1);
2048 -moz-transition: all 0.2s;
2049 -o-transition: all 0.2s;
2050 -webkit-transition: all 0.2s;
2051 transition: all 0.2s;
2052 overflow: hidden;
2053 background: rgba(245, 245, 245, 1);
2054 text-transform: uppercase;
2055 font-size: 13px;
2056 }
2057
2058 .spf-field-tabbed .spf-tabbed-nav a:last-child {
2059 margin-bottom: 0px;
2060 }
2061
2062 .spf-field-tabbed .spf-tabbed-nav a:hover {
2063 background-color: #f9f9f9;
2064 }
2065
2066 .spf-field-tabbed .spf-tabbed-nav a:focus {
2067 box-shadow: none;
2068 outline: none;
2069 }
2070
2071 .spf-field-tabbed .spf-pros-tabbed-nav a:focus,
2072 .spf-field-tabbed .spf-tabbed-nav a.spf-tabbed-active {
2073 /* background-color: #fff;
2074 color: #67439B; */
2075 background-color: #fff;
2076 -webkit-box-shadow: inset 3px 0 #E2572C;
2077 box-shadow: inset 3px 0#E2572C;
2078 color: #E2572C;
2079 font-weight: 600;
2080 border-right-color: #fff;
2081 margin-right: -1px;
2082 border-right: none;
2083 }
2084
2085 .spf-field-tabbed .spf-tabbed-nav a.spf-tabbed-active svg path,
2086 .spf-field-tabbed .spf-tabbed-nav a.spf-tabbed-active svg {
2087 fill: #E2572C;
2088 /* stroke: #0C6E63; */
2089 }
2090
2091 .spf-tabbed-nav a span {
2092 margin-right: 6px;
2093 }
2094
2095 .spf-tabbed-nav a span svg {
2096 vertical-align: text-bottom;
2097 }
2098
2099 .spf-tabbed-nav a:nth-last-child(1) span svg {
2100 vertical-align: middle;
2101 }
2102
2103 /**
2104 * 03. 19. Field: palette
2105 */
2106
2107 .spf-field-palette .spf--palette {
2108 position: relative;
2109 display: inline-block;
2110 cursor: pointer;
2111 border: 2px solid #ddd;
2112 margin-right: 10px;
2113 margin-bottom: 10px;
2114 user-select: none;
2115 -webkit-user-select: none;
2116 transition: all .2s;
2117 }
2118
2119 .spf-field-palette .spf--palette span {
2120 vertical-align: middle;
2121 display: inline-block;
2122 width: 22px;
2123 height: 60px;
2124 line-height: 60px;
2125 overflow: hidden;
2126 text-indent: -999px;
2127 }
2128
2129 .spf-field-palette .spf--palette:before {
2130 position: absolute;
2131 top: 0;
2132 left: 0;
2133 text-align: center;
2134 font-size: 11px;
2135 font-family: FontAwesome;
2136 content: "\f00c";
2137 width: 15px;
2138 height: 15px;
2139 line-height: 15px;
2140 opacity: 0;
2141 color: #fff;
2142 background-color: #222;
2143 transition: opacity .2s;
2144 }
2145
2146 .spf-field-palette .spf--active {
2147 border-color: #222;
2148 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
2149 }
2150
2151 .spf-field-palette .spf--active:before {
2152 opacity: 1;
2153 }
2154
2155 .spf-field-palette input {
2156 display: none;
2157 }
2158
2159 /**
2160 * 03. 21. Field: select
2161 */
2162 .spf-field-select .spf-fieldset {
2163 min-height: 30px;
2164 }
2165
2166 .spf-field-select .spf-chosen {
2167 display: none;
2168 }
2169
2170 .spf-field-select select {
2171 max-width: 100%;
2172 margin: 0;
2173 height: 30px;
2174 min-height: 30px;
2175 line-height: 1;
2176 }
2177
2178 /**
2179 * 03. 22. Field: slider
2180 */
2181 .spf-field-slider .spf--wrap {
2182 display: flex;
2183 align-items: center;
2184 }
2185
2186 .spf-field-slider .spf--input {
2187 display: flex;
2188 }
2189
2190 .spf-field-slider .spf--unit {
2191 display: flex;
2192 justify-content: center;
2193 flex-direction: column;
2194 user-select: none;
2195 padding: 0 6px;
2196 font-size: 11px;
2197 line-height: 1;
2198 border-radius: 0 4px 4px 0;
2199 color: #555;
2200 border: 1px solid #7e8993;
2201 border-left: 0;
2202 background-color: #f5f5f5;
2203 }
2204
2205 .spf-field-slider .spf-slider-ui {
2206 margin-right: 15px;
2207 }
2208
2209 .spf-field-slider input[type="number"] {
2210 position: relative;
2211 z-index: 1;
2212 margin: 0;
2213 width: 60px;
2214 text-align: center;
2215 min-height: 30px;
2216 line-height: 1;
2217 }
2218
2219 .spf-field-slider.carousel_auto_play_ranger input[type="number"] {
2220 width: 60px;
2221 }
2222
2223 .spf-field-slider .spf--is-unit {
2224 border-top-right-radius: 0;
2225 border-bottom-right-radius: 0;
2226 }
2227
2228 .spf-field-slider .ui-slider {
2229 position: relative;
2230 max-width: 400px;
2231 width: 100%;
2232 height: 10px;
2233 margin-right: 15px;
2234 border: 1px solid #c5c5c5;
2235 background: #fff;
2236 border-radius: 3px;
2237 }
2238
2239 .spf-field-slider .ui-slider-range {
2240 height: 10px;
2241 border: none;
2242 background: #1A74E4;
2243 border-radius: 2px;
2244 }
2245
2246 .spf-field-slider .ui-slider-handle {
2247 position: absolute;
2248 width: 18px;
2249 height: 18px;
2250 top: -5px;
2251 margin-left: -8px;
2252 border: 1px solid #c5c5c5;
2253 background: #fff;
2254 border-radius: 2px;
2255 }
2256
2257 .spf-field-slider .ui-state-active,
2258 .spf-field-slider .ui-slider-handle:hover {
2259 cursor: pointer;
2260 }
2261
2262 /**
2263 * 03. 23. Field: sortable
2264 */
2265
2266 .spf-field-sortable .spf-field-text input {
2267 max-width: 100%;
2268 }
2269
2270 .spf-field-sortable .spf--sortable .spf--sortable-item {
2271 display: table;
2272 width: 100%;
2273 margin-bottom: 5px;
2274 border: 1px solid #eee;
2275 }
2276
2277 .spf-field-sortable .spf--sortable .spf--sortable-item h4 {
2278 font-size: 1em;
2279 }
2280
2281 .spf-field-sortable .spf--sortable-content {
2282 width: 100%;
2283 display: table-cell;
2284 vertical-align: middle;
2285 background-color: #fff;
2286 }
2287
2288 .spf-field-sortable .spf--sortable-content>.spf-field {
2289 padding: 15px;
2290 }
2291
2292 .spf-field-sortable .widget-placeholder {
2293 height: 50px;
2294 margin-bottom: 3px;
2295 border: 1px dashed #f1c40f;
2296 background-color: #fffae4;
2297 }
2298
2299 .spf-field-sortable .ui-sortable-helper {
2300 height: 50px !important;
2301 overflow: hidden !important;
2302 border-color: #ccc !important;
2303 background-color: #eee !important;
2304 opacity: 0.5;
2305 }
2306
2307 .spf-field-sortable .ui-sortable-helper .spf--sortable-helper,
2308 .spf-field-sortable .ui-sortable-helper .spf--sortable-content {
2309 display: none;
2310 }
2311
2312 /**
2313 * 03. 24. Field: sorter
2314 */
2315
2316 .spf-field-sorter .ui-sortable-placeholder {
2317 height: 20px;
2318 border: 1px dashed #f1c40f;
2319 background-color: #fffae4;
2320 }
2321
2322 .spf-field-sorter .spf-modules {
2323 float: left;
2324 width: 50%;
2325 box-sizing: border-box;
2326 }
2327
2328 .spf-field-sorter .spf-modules:first-child {
2329 padding-right: 15px;
2330 }
2331
2332 .spf-field-sorter .spf-modules:last-child {
2333 padding-left: 15px;
2334 }
2335
2336 .spf-field-sorter .spf-disabled,
2337 .spf-field-sorter .spf-enabled {
2338 padding: 5px 15px;
2339 border: 1px dashed #ddd;
2340 background-color: #fff;
2341 }
2342
2343 .spf-field-sorter .spf-disabled li {
2344 -moz-transition: opacity 0.15s;
2345 -o-transition: opacity 0.15s;
2346 -webkit-transition: opacity 0.15s;
2347 transition: opacity 0.15s;
2348 opacity: 0.5;
2349 }
2350
2351 .spf-field-sorter .spf-disabled .ui-sortable-helper {
2352 opacity: 1;
2353 }
2354
2355 .spf-field-sorter .spf-sorter-title {
2356 font-size: 13px;
2357 font-weight: 600;
2358 padding: 10px;
2359 text-align: center;
2360 border: 1px dashed #ddd;
2361 border-bottom: none;
2362 background-color: #f8f8f8;
2363 text-transform: uppercase;
2364 }
2365
2366 .spf-field-sorter ul {
2367 list-style-type: none;
2368 margin: 0;
2369 padding: 0;
2370 min-height: 62px;
2371 }
2372
2373 .spf-field-sorter ul li {
2374 margin: 10px 0;
2375 padding: 10px 15px;
2376 cursor: move;
2377 font-weight: bold;
2378 text-align: center;
2379 border: 1px solid #e5e5e5;
2380 background-color: #fafafa;
2381 -moz-transition: border-color 0.15s;
2382 -o-transition: border-color 0.15s;
2383 -webkit-transition: border-color 0.15s;
2384 transition: border-color 0.15s;
2385 }
2386
2387 .spf-field-sorter ul li:hover {
2388 border-color: #bbb;
2389 }
2390
2391 /**
2392 * 03. 25. Field: spinner
2393 */
2394
2395 .spf-field-spinner .spf--spin {
2396 display: flex;
2397 float: left;
2398 }
2399
2400 .spf-field-spinner .ui-spinner {
2401 display: flex;
2402 }
2403
2404 .spf-field-spinner .ui-button-text-only,
2405 .spf-field-spinner .ui-button-icon-only {
2406 display: flex;
2407 flex-direction: column;
2408 justify-content: center;
2409 text-align: center;
2410 min-width: 20px;
2411 padding: 0 4px;
2412 color: #555;
2413 border: 1px solid #7e8993;
2414 background-color: #f5f5f5;
2415 height: 28px;
2416 min-height: 28px;
2417 line-height: 1;
2418 }
2419
2420 .spf-field-spinner .ui-button {
2421 cursor: pointer;
2422 }
2423
2424 .spf-field-spinner .ui-button:hover {
2425 background-color: #e7e7e7;
2426 }
2427
2428 .spf-field-spinner .ui-button:active {
2429 background-color: #ddd;
2430 }
2431
2432 .spf-field-spinner .ui-button:before {
2433 font-family: FontAwesome;
2434 font-size: 14px;
2435 }
2436
2437 .spf-field-spinner .ui-spinner-down {
2438 order: 1;
2439 border-right: 0;
2440 border-radius: 4px 0 0 4px;
2441 }
2442
2443 .spf-field-spinner .ui-spinner-down:before {
2444 content: "\f0d9";
2445 }
2446
2447 .spf-field-spinner .ui-spinner-input {
2448 order: 2;
2449 }
2450
2451 .spf-field-spinner .spf--unit {
2452 order: 3;
2453 border-left: 0;
2454 user-select: none;
2455 }
2456
2457 .spf-field-spinner .ui-spinner-up {
2458 order: 4;
2459 border-left: 0;
2460 border-radius: 0 4px 4px 0;
2461 }
2462
2463 .spf-field-spinner .ui-spinner-up:before {
2464 content: "\f0da";
2465 }
2466
2467 .spf-field-spinner input {
2468 position: relative;
2469 z-index: 1;
2470 width: 60px;
2471 text-align: center;
2472 margin: 0;
2473 padding: 0 8px;
2474 border-radius: 0;
2475 height: 30px;
2476 min-height: 30px;
2477 line-height: 1;
2478 }
2479
2480 .spf-field-spinner .ui-button-text {
2481 display: none !important;
2482 }
2483
2484 /**
2485 * 03. 26. Field: switcher
2486 */
2487
2488 .spf-field-switcher .spf--switcher {
2489 float: left;
2490 cursor: pointer;
2491 position: relative;
2492 width: 60px;
2493 height: 26px;
2494 padding: 0;
2495 margin: 0;
2496 overflow: hidden;
2497 border-radius: 4px;
2498 background-color: #FF4E4F;
2499 user-select: none;
2500 -webkit-user-select: none;
2501 }
2502
2503 .spf-field-switcher .spf--ball {
2504 position: absolute;
2505 top: 4px;
2506 left: 4px;
2507 width: 24px;
2508 height: 18px;
2509 background-color: #fff;
2510 border-radius: 4px;
2511 transition: all .1s;
2512 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
2513 }
2514
2515 .spf-field-switcher .spf--on,
2516 .spf-field-switcher .spf--off {
2517 position: absolute;
2518 top: 0;
2519 left: 0;
2520 right: 0;
2521 font-size: 11px;
2522 line-height: 26px;
2523 font-weight: 500;
2524 font-style: normal;
2525 text-align: center;
2526 text-transform: uppercase;
2527 color: #fff;
2528 padding-right: 28px;
2529 opacity: 0;
2530 transition: all .1s;
2531 }
2532
2533 .spf-field-switcher .spf--off {
2534 padding-right: 0;
2535 padding-left: 28px;
2536 opacity: 1;
2537 }
2538
2539 .spf-field-switcher .spf--active {
2540 background: #4fb845;
2541 }
2542
2543 .spf-field-switcher .spf--active .spf--on {
2544 opacity: 1;
2545 }
2546
2547 .spf-field-switcher .spf--active .spf--off {
2548 opacity: 0;
2549 }
2550
2551 .spf-field-switcher .spf--active .spf--ball {
2552 left: 100%;
2553 margin-left: -28px;
2554 }
2555
2556 .spf-field-switcher .spf--label {
2557 float: left;
2558 margin-top: 4px;
2559 margin-left: 8px;
2560 font-weight: 400;
2561 color: #999;
2562 }
2563
2564 .spf-field-switcher input {
2565 display: none;
2566 }
2567
2568 /**
2569 * 03. 28. Field: text
2570 */
2571
2572 .spf-field-text input {
2573 width: 50%;
2574 max-width: 100%;
2575 margin: 0;
2576 }
2577
2578 /**
2579 * 03. 29. Field: textarea
2580 */
2581
2582 .spf-field-textarea textarea {
2583 width: 100%;
2584 max-width: 100%;
2585 min-height: 125px;
2586 }
2587
2588 .spf-field-textarea .spf-shortcode-button {
2589 margin-bottom: 10px;
2590 margin-right: 5px;
2591 }
2592
2593 /**
2594 * 03. 30. Field: typography
2595 */
2596
2597 .spf-field-typography textarea,
2598 .spf-field-typography select {
2599 min-width: 100%;
2600 margin: 0;
2601 min-height: 32px;
2602 line-height: 1;
2603 }
2604
2605 .spf-field-typography .spf--title {
2606 color: #777;
2607 margin: 0 0 2px 0;
2608 font-size: 12px;
2609 }
2610
2611 .spf-field-typography .spf--title small {
2612 vertical-align: top;
2613 }
2614
2615 .spf-field-typography .spf--blocks {
2616 display: flex;
2617 flex-wrap: wrap;
2618 }
2619
2620 .spf-field-typography .spf--blocks.spf--blocks-color {
2621 display: inline-flex;
2622 }
2623
2624 .spf-field-typography .spf--block {
2625 flex: 1;
2626 padding-right: 6px;
2627 padding-bottom: 6px;
2628 }
2629
2630 .spf-field-typography .chosen-container {
2631 min-width: 170px;
2632 }
2633
2634 .spf-field-typography .spf--input {
2635 margin: 0;
2636 min-width: 100%;
2637 max-width: 130px;
2638 background-color: transparent;
2639 line-height: 1;
2640 min-height: 32px;
2641 }
2642
2643 .spf-field-typography .spf--input-wrap {
2644 position: relative;
2645 }
2646
2647 .spf-field-typography .spf--unit {
2648 position: absolute;
2649 z-index: 1;
2650 right: 4px;
2651 top: 4px;
2652 bottom: 4px;
2653 padding: 2px 6px;
2654 color: #666;
2655 font-size: 11px;
2656 line-height: 1;
2657 border-radius: 2px;
2658 background: #eee;
2659 user-select: none;
2660 display: flex;
2661 justify-content: center;
2662 flex-direction: column;
2663 }
2664
2665 .spf-field-typography .spf--preview {
2666 font-size: 16px;
2667 line-height: 20px;
2668 padding: 20px;
2669 color: #222;
2670 border: 1px solid #eee;
2671 background-color: #fff;
2672 border-radius: 2.5px;
2673 user-select: none;
2674 -webkit-user-select: none;
2675 transition: background-color .2s, border-color .2s;
2676 }
2677
2678 .spf-field-typography .spf--block-preview {
2679 cursor: pointer;
2680 position: relative;
2681 overflow: hidden;
2682 margin-top: 10px;
2683 max-width: 100%;
2684 }
2685
2686 .spf-field-typography .spf--black-background {
2687 border-color: #000;
2688 background-color: #000;
2689 }
2690
2691 .spf-field-typography .spf--toggle {
2692 position: absolute;
2693 top: 5px;
2694 right: 10px;
2695 color: #999;
2696 }
2697
2698 .spf-field-typography .spf--block-extra-styles {
2699 margin-top: 5px;
2700 }
2701
2702 /**
2703 * 03. 33. Field: heading
2704 */
2705
2706 .spf-field-heading {
2707 font-size: 1.5em;
2708 line-height: 1.5em;
2709 font-weight: bold;
2710 color: #23282d;
2711 background-color: #f5f5f5;
2712 }
2713
2714 /**
2715 * 03. 34. Field: subheading
2716 */
2717
2718 .spf-field-subheading {
2719 font-size: 14px;
2720 font-weight: bold;
2721 padding-top: 17px;
2722 padding-bottom: 17px;
2723 color: #030E12;
2724 background-color: #EAECEE;
2725 text-transform: uppercase;
2726 }
2727
2728 /**
2729 * 03. 35. Field: submessage
2730 */
2731
2732 .spf-field-submessage {
2733 padding: 0 !important;
2734 border: 0 !important;
2735 }
2736
2737 .spf-field-submessage+.spf-field {
2738 border-top: 0 !important;
2739 }
2740
2741 .spf-submessage {
2742 font-size: 12px;
2743 padding: 17px 30px;
2744 border-top: 1px solid transparent;
2745 border-bottom: 1px solid transparent;
2746 }
2747
2748 .spf-submessage-success {
2749 color: #3c763d;
2750 border-color: #d6e9c6;
2751 background-color: #dff0d8;
2752 }
2753
2754 .spf-submessage-info {
2755 color: #31708f;
2756 border-color: #bce8f1;
2757 background-color: #d9edf7;
2758 }
2759
2760 .spf-submessage-warning {
2761 color: #8a6d3b;
2762 border-color: #faebcc;
2763 background-color: #fcf8e3;
2764 }
2765
2766 .spf-submessage-danger {
2767 color: #a94442;
2768 border-color: #ebccd1;
2769 background-color: #f2dede;
2770 }
2771
2772 .spf-submessage-normal {
2773 color: #23282d;
2774 border-color: #eee;
2775 background-color: #f7f7f7;
2776 }
2777
2778 /**
2779 * 03. 36. Field: notice
2780 */
2781
2782 .spf-field-notice {
2783 background-color: transparent;
2784 }
2785
2786 .spf-notice {
2787 padding: 12px;
2788 padding-left: 0;
2789 background-color: #fff;
2790 border-left: none;
2791 box-shadow: none;
2792 font-style: italic;
2793 }
2794
2795 .spf-notice-success {
2796 border-color: #46b450;
2797 }
2798
2799 .spf-notice-info {
2800 border-color: #339fd4;
2801 }
2802
2803 .spf-notice-warning {
2804 border-color: #ffbc00;
2805 }
2806
2807 .spf-notice-danger {
2808 border-color: #dc3232;
2809 }
2810
2811 .spf-notice-normal {
2812 border-color: #2ca716;
2813 }
2814
2815
2816 /**
2817 * 03. 38. others
2818 */
2819
2820 .spf-help {
2821 cursor: help;
2822 padding: 5px;
2823 font-size: 14px;
2824 color: #aaa;
2825 line-height: 28px;
2826 }
2827
2828 .spf-help .spf-help-text {
2829 display: none;
2830 }
2831
2832 .spf-image-preview {
2833 display: inline-block;
2834 position: relative;
2835 padding: 4px;
2836 min-width: 44px;
2837 min-height: 22px;
2838 margin-bottom: 10px;
2839 border: 1px solid #ccc;
2840 background-color: #f9f9f9;
2841 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2842 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2843 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2844 }
2845
2846 .spf-image-preview img {
2847 max-height: 90px;
2848 display: inline-block;
2849 vertical-align: middle;
2850 }
2851
2852 .spf-field-custom .spf-field {
2853 padding: 0;
2854 }
2855
2856 .spf-field .chosen-container-single .chosen-single {
2857 height: 28px;
2858 line-height: 26px;
2859 }
2860
2861 .spf-field .chosen-container-single .chosen-single abbr {
2862 top: 0;
2863 right: 20px;
2864 font-family: FontAwesome;
2865 font-size: 12px;
2866 height: 100%;
2867 width: 18px;
2868 color: #aaa;
2869 text-align: center;
2870 background: none;
2871 }
2872
2873 .spf-field .chosen-container-single .chosen-single abbr:before {
2874 content: "\f00d";
2875 }
2876
2877 .spf-field .chosen-container-single .chosen-single abbr:hover {
2878 color: #555;
2879 }
2880
2881 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
2882 font-family: FontAwesome;
2883 font-size: 12px;
2884 height: 100%;
2885 width: 18px;
2886 color: #aaa;
2887 text-align: center;
2888 background: none;
2889 }
2890
2891 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
2892 content: "\f00d";
2893 display: inline-block;
2894 padding-top: 3px;
2895 }
2896
2897 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
2898 color: #555;
2899 }
2900
2901 .spf-field .chosen-container-single .chosen-single div b {
2902 font-family: FontAwesome;
2903 font-size: 14px;
2904 color: #aaa;
2905 background: none;
2906 }
2907
2908 .spf-field .chosen-container-single .chosen-single div b:before {
2909 content: "\f107";
2910 }
2911
2912 .spf-field .chosen-container-single .chosen-single div b:hover {
2913 color: #555;
2914 }
2915
2916 .spf-field .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2917 border: 1px dashed #aaa;
2918 margin: 3px 5px 3px 0;
2919 }
2920
2921 .spf-field .chosen-container-multi .ui-sortable li.search-choice span {
2922 cursor: move;
2923 }
2924
2925 .spf-field .chosen-container-active.chosen-with-drop .chosen-single div b:before {
2926 content: "\f106";
2927 }
2928
2929 .spf-field .chosen-container-single .chosen-single-with-deselect span {
2930 margin-right: 40px;
2931 }
2932
2933 .spf-field .chosen-container-single .chosen-search input[type="text"] {
2934 background: none;
2935 }
2936
2937 .spf-field .chosen-container-single .chosen-search:before {
2938 font-family: FontAwesome;
2939 position: absolute;
2940 content: "\f002";
2941 font-size: 11px;
2942 right: 10px;
2943 top: 7px;
2944 color: #aaa;
2945 }
2946
2947 .spf-field .wp-picker-container {
2948 display: inline-block;
2949 }
2950
2951 .spf-field .spf--transparent-wrap {
2952 display: none;
2953 position: relative;
2954 top: -1px;
2955 width: 235px;
2956 padding: 9px 10px;
2957 border: 1px solid #dfdfdf;
2958 border-top: none;
2959 background-color: #fff;
2960 }
2961
2962 .spf-field .wp-picker-active .spf--transparent-wrap {
2963 display: block;
2964 }
2965
2966 .spf-field .spf--transparent-slider {
2967 position: absolute;
2968 width: 190px;
2969 margin-left: 2px;
2970 height: 18px;
2971 }
2972
2973 .spf-field .spf--transparent-slider .ui-slider-handle {
2974 position: absolute;
2975 top: -3px;
2976 bottom: -3px;
2977 z-index: 5;
2978 border-color: #aaa;
2979 border-style: solid;
2980 border-width: 4px 3px;
2981 width: 10px;
2982 height: 16px;
2983 margin: 0 -5px;
2984 background: none;
2985 cursor: ew-resize;
2986 opacity: 0.9;
2987 -moz-border-radius: 4px;
2988 -webkit-border-radius: 4px;
2989 border-radius: 4px;
2990 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2991 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2992 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2993 }
2994
2995 .spf-field .spf--transparent-slider .ui-slider-handle:before {
2996 content: " ";
2997 position: absolute;
2998 left: -2px;
2999 right: -2px;
3000 top: -3px;
3001 bottom: -3px;
3002 border: 2px solid #fff;
3003 -moz-border-radius: 3px;
3004 -webkit-border-radius: 3px;
3005 border-radius: 3px;
3006 }
3007
3008 .spf-field .spf--transparent-offset {
3009 height: 18px;
3010 width: 200px;
3011 background: url(../img/checkerboard.png) repeat-y center left scroll #fff;
3012 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3013 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3014 box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3015 -moz-border-radius: 2px;
3016 -webkit-border-radius: 2px;
3017 border-radius: 2px;
3018 }
3019
3020 .spf-field .spf--transparent-text {
3021 position: absolute;
3022 top: 12px;
3023 right: 10px;
3024 width: 30px;
3025 font-size: 12px;
3026 line-height: 12px;
3027 text-align: center;
3028 color: #999;
3029 }
3030
3031 .spf-field .spf--transparent-button {
3032 cursor: pointer;
3033 user-select: none;
3034 margin-top: 10px;
3035 font-size: 11px;
3036 text-align: center;
3037 border-radius: 2px;
3038 padding: 3px 7px;
3039 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
3040 letter-spacing: 0.2px;
3041 color: #777;
3042 border: 1px solid #ccc;
3043 background-color: #f7f7f7;
3044 transition: background-color .2s, border-color .2s, color .2s;
3045 }
3046
3047 .spf-field .spf--transparent-active .wp-color-result {
3048 background-image: url(../img/checkerboard.png);
3049 background-size: 135px;
3050 background-position: center left;
3051 background-color: transparent !important;
3052 }
3053
3054 .spf-field .spf--transparent-active .spf--transparent-button {
3055 color: #fff;
3056 border-color: #3ea032;
3057 background-color: #4fb845;
3058 }
3059
3060 .spf-field .spf--transparent-active .fa:before {
3061 content: "\f205";
3062 }
3063
3064 /**
3065 * 04. Widget
3066 */
3067
3068 .spf-widgets>.spf-field {
3069 position: relative;
3070 top: -1px;
3071 margin-right: -15px;
3072 margin-left: -15px;
3073 padding: 12px 15px;
3074 }
3075
3076 .spf-widgets>.spf-field .spf-field {
3077 margin-left: 0;
3078 margin-right: 0;
3079 }
3080
3081 .spf-widgets>.spf-field .spf-title {
3082 float: none;
3083 width: 100%;
3084 margin-bottom: 5px;
3085 }
3086
3087 .spf-widgets>.spf-field .spf-fieldset {
3088 margin-left: 0;
3089 }
3090
3091 .spf-widgets .spf-field-text input {
3092 width: 100%;
3093 }
3094
3095 .spf-widgets .spf-field-notice .spf-notice {
3096 padding: 15px;
3097 }
3098
3099 .control-section .spf-widgets>.spf-field {
3100 margin-right: -10px;
3101 margin-left: -10px;
3102 padding: 10px 12px;
3103 }
3104
3105 /**
3106 * 05. Widget
3107 */
3108
3109 .control-section .spf-field {
3110 padding: 0;
3111 }
3112
3113 .control-section .spf-field .spf-title {
3114 float: none;
3115 width: 100%;
3116 margin-bottom: 10px;
3117 }
3118
3119 .control-section .spf-field .spf-title h4 {
3120 font-size: 14px;
3121 font-weight: 600;
3122 color: inherit;
3123 }
3124
3125 .control-section .spf-field .spf-fieldset {
3126 margin-left: 0;
3127 }
3128
3129 .control-section .spf-field-select select {
3130 width: 100%;
3131 }
3132
3133 .control-section .spf-field-heading {
3134 color: inherit;
3135 font-size: 14px;
3136 line-height: 1em;
3137 margin-right: -15px;
3138 margin-left: -15px;
3139 padding: 15px;
3140 }
3141
3142 .control-section .spf-field-subheading {
3143 color: inherit;
3144 font-size: 11px;
3145 margin-right: -15px;
3146 margin-left: -15px;
3147 padding: 10px 15px;
3148 }
3149
3150 .control-section .spf-text-subtitle {
3151 margin-top: 4px;
3152 font-size: 12px;
3153 }
3154
3155 .control-section .spf-field-content,
3156 .control-section .spf-field-submessage .spf-submessage {
3157 margin-right: -15px;
3158 margin-left: -15px;
3159 padding: 15px;
3160 }
3161
3162 .control-section .spf-fieldset .spf-field-submessage .spf-submessage,
3163 .control-section .spf-fieldset .spf-field-heading,
3164 .control-section .spf-fieldset .spf-field-subheading {
3165 margin-left: 0;
3166 margin-right: 0;
3167 }
3168
3169 .control-section .spf-field-date .spf--to {
3170 margin-left: 0;
3171 }
3172
3173 .control-section .spf-field-sorter ul li {
3174 padding: 5px;
3175 }
3176
3177 .control-section .spf-field-sorter .spf-modules {
3178 float: none;
3179 width: 100%;
3180 }
3181
3182 .control-section .spf-field-sorter .spf-modules:first-child {
3183 padding-right: 0;
3184 padding-bottom: 15px;
3185 }
3186
3187 .control-section .spf-field-background_adv .spf--select,
3188 .control-section .spf-field-background .spf--select {
3189 width: 100%;
3190 }
3191
3192 .control-section .spf-field-box_shadow select,
3193 .control-section .spf-field-border select,
3194 .control-section .spf-field-spacing select,
3195 .control-section .spf-field-column select,
3196 .control-section .spf-field-dimensions select,
3197 .control-section .spf-field-dimensions_advanced select {
3198 width: auto;
3199 }
3200
3201 .control-section .spf-field-spinner input {
3202 width: 50px;
3203 }
3204
3205 .control-section .spf-field-backup .spf-export-data {
3206 display: none;
3207 }
3208
3209 .control-section .spf-field-fieldset .spf-fieldset-content {
3210 border-color: #e5e5e5;
3211 }
3212
3213 .control-section .spf-field-fieldset .spf-field {
3214 padding: 10px;
3215 }
3216
3217 .control-section .spf-field-fieldset .spf-field .spf-title {
3218 margin-bottom: 5px;
3219 }
3220
3221 .control-section .spf-field-fieldset .spf-field h4 {
3222 font-size: 12px;
3223 }
3224
3225 .control-section .spf-field-group .spf-field,
3226 .control-section .spf-field-tabbed .spf-field,
3227 .control-section .spf-field-sortable .spf-field,
3228 .control-section .spf-field-repeater .spf-field,
3229 .control-section .spf-field-accordion .spf-field {
3230 padding: 10px;
3231 }
3232
3233 .control-section .spf-field-group .spf-field .spf-title,
3234 .control-section .spf-field-tabbed .spf-field .spf-title,
3235 .control-section .spf-field-sortable .spf-field .spf-title,
3236 .control-section .spf-field-repeater .spf-field .spf-title,
3237 .control-section .spf-field-accordion .spf-field .spf-title {
3238 margin-bottom: 5px;
3239 }
3240
3241 .control-section .spf-field-group .spf-field h4,
3242 .control-section .spf-field-tabbed .spf-field h4,
3243 .control-section .spf-field-sortable .spf-field h4,
3244 .control-section .spf-field-repeater .spf-field h4,
3245 .control-section .spf-field-accordion .spf-field h4 {
3246 font-size: 12px;
3247 }
3248
3249 .control-section .spf-dependency-control.hidden {
3250 display: none !important;
3251 }
3252
3253 /**
3254 * 06. Taxonomy
3255 */
3256
3257 .spf-taxonomy>.spf-field {
3258 border-top: none !important;
3259 }
3260
3261 .spf-taxonomy>.spf-field-heading {
3262 font-size: 1.1em;
3263 padding: 20px !important;
3264 border: 1px solid #ddd;
3265 }
3266
3267 .spf-taxonomy>.spf-field-subheading {
3268 font-size: 12px;
3269 padding: 15px !important;
3270 border: 1px solid #ddd;
3271 }
3272
3273 .spf-taxonomy>.spf-field-submessage .spf-submessage {
3274 padding: 15px;
3275 border-left-width: 1px;
3276 border-left-style: solid;
3277 border-right-width: 1px;
3278 border-right-style: solid;
3279 }
3280
3281 .spf-taxonomy>.spf-field-notice {
3282 background-color: transparent;
3283 }
3284
3285 .spf-taxonomy .spf-section-title {
3286 display: block;
3287 padding: 15px;
3288 background-color: #f9f9f9;
3289 border: 1px solid #e5e5e5;
3290 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3291 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3292 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3293 }
3294
3295 .spf-taxonomy-add-fields>.spf-field {
3296 padding: 8px 0;
3297 }
3298
3299 .spf-taxonomy-add-fields>.spf-field>.spf-title {
3300 float: none;
3301 width: 100%;
3302 padding: 2px 2px 4px 0;
3303 }
3304
3305 .spf-taxonomy-add-fields>.spf-field>.spf-title h4 {
3306 font-size: 12px;
3307 font-weight: normal;
3308 }
3309
3310 .spf-taxonomy-add-fields>.spf-field>.spf-fieldset {
3311 margin-left: 0;
3312 }
3313
3314 .spf-taxonomy-add-fields>.spf-field>.spf-fieldset>.spf-help {
3315 right: -5px;
3316 }
3317
3318 .spf-taxonomy-add-fields+p.submit {
3319 margin-top: 0;
3320 }
3321
3322 .spf-taxonomy-edit-fields>.spf-field {
3323 padding: 20px 0;
3324 }
3325
3326 .spf-taxonomy-edit-fields>.spf-field>.spf-title {
3327 width: 225px;
3328 }
3329
3330 .spf-taxonomy-edit-fields>.spf-field>.spf-title h4 {
3331 font-size: 14px;
3332 font-weight: 600;
3333 line-height: 1.3;
3334 display: inline-block;
3335 vertical-align: middle;
3336 }
3337
3338 .spf-taxonomy-edit-fields>.spf-field>.spf-fieldset {
3339 margin-left: 225px;
3340 }
3341
3342 .spf-taxonomy-edit-fields>.spf-field>.spf-fieldset>.spf-help {
3343 top: -5px;
3344 right: -5px;
3345 }
3346
3347 .spf-taxonomy-edit-fields>.spf-field-submessage {
3348 margin: 20px 0;
3349 }
3350
3351 .spf-taxonomy-edit-fields>.spf-field-subheading,
3352 .spf-taxonomy-edit-fields>.spf-field-heading {
3353 margin: 20px 0;
3354 border: 1px solid #ddd;
3355 }
3356
3357 /**
3358 * 07. Profile
3359 */
3360
3361 .spf-profile>h2>.fa {
3362 padding-right: 7px;
3363 }
3364
3365 .spf-profile>.spf-field {
3366 padding: 15px 0;
3367 border-top: none !important;
3368 }
3369
3370 .spf-profile>.spf-field>.spf-title {
3371 width: 220px;
3372 }
3373
3374 .spf-profile>.spf-field>.spf-title h4 {
3375 font-size: 14px;
3376 font-weight: 600;
3377 line-height: 1.3;
3378 display: inline-block;
3379 vertical-align: middle;
3380 }
3381
3382 .spf-profile>.spf-field>.spf-fieldset {
3383 margin-left: 220px;
3384 }
3385
3386 .spf-profile>.spf-field>.spf-fieldset>.spf-help {
3387 top: -15px;
3388 right: -5px;
3389 }
3390
3391 .spf-profile>.spf-field-heading {
3392 font-size: 1.1em;
3393 }
3394
3395 .spf-profile>.spf-field-subheading {
3396 font-size: 12px;
3397 }
3398
3399 .spf-profile>.spf-field-subheading,
3400 .spf-profile>.spf-field-heading {
3401 margin: 10px 0;
3402 padding: 15px !important;
3403 border: 1px solid #ddd;
3404 }
3405
3406 .spf-profile>.spf-field-submessage {
3407 margin: 20px 0;
3408 }
3409
3410 .spf-profile>.spf-field-submessage .spf-submessage {
3411 padding: 10px;
3412 border-left-width: 1px;
3413 border-left-style: solid;
3414 border-right-width: 1px;
3415 border-right-style: solid;
3416 }
3417
3418 .spf-profile>.spf-field-notice {
3419 background-color: transparent;
3420 }
3421
3422 /**
3423 * 08. Modal
3424 */
3425
3426 .spf-modal {
3427 display: none;
3428 position: fixed;
3429 z-index: 100101;
3430 top: 0;
3431 left: 0;
3432 width: 100%;
3433 height: 100%;
3434 }
3435
3436 .spf-modal-icon {
3437 z-index: 100102;
3438 }
3439
3440 .spf-modal-table {
3441 display: table;
3442 width: 100%;
3443 height: 100%;
3444 }
3445
3446 .spf-modal-table-cell {
3447 display: table-cell;
3448 vertical-align: middle;
3449 margin: 100px 0;
3450 }
3451
3452 .spf-modal-inner {
3453 position: relative;
3454 z-index: 10;
3455 width: 760px;
3456 height: 750px;
3457 margin: 0 auto;
3458 background-color: #fff;
3459 }
3460
3461 .spf-modal-content {
3462 position: relative;
3463 overflow: hidden;
3464 overflow-y: auto;
3465 height: 592px;
3466 }
3467
3468 .spf-modal-content .spf-shortcode-button {
3469 display: none;
3470 }
3471
3472 .spf-modal-content .spf-fieldset {
3473 margin-left: 25%;
3474 }
3475
3476 .spf-modal-content .spf-title {
3477 width: 20%;
3478 }
3479
3480 .spf-modal-content .spf-field {
3481 padding: 15px 30px 15px 15px;
3482 }
3483
3484 .spf-modal-content a:active,
3485 .spf-modal-content a:focus {
3486 outline: none;
3487 -moz-box-shadow: none;
3488 -webkit-box-shadow: none;
3489 box-shadow: none;
3490 }
3491
3492 .spf-modal-content h4 {
3493 font-size: 13px;
3494 }
3495
3496 .spf-modal-content h4 small {
3497 font-style: italic;
3498 font-weight: 400;
3499 color: #aaa;
3500 }
3501
3502 .spf-modal-title {
3503 position: relative;
3504 background-color: #fcfcfc;
3505 border-bottom: 1px solid #ddd;
3506 height: 36px;
3507 font-size: 16px;
3508 font-weight: 600;
3509 line-height: 36px;
3510 margin: 0;
3511 padding: 0 36px 0 16px;
3512 }
3513
3514 .spf-modal-header {
3515 width: 100%;
3516 padding: 16px 0;
3517 background-color: #f5f5f5;
3518 border-bottom: 1px solid #eee;
3519 }
3520
3521 .spf-modal-header select {
3522 display: block;
3523 width: 250px;
3524 margin: 0 auto;
3525 background-color: #fff;
3526 }
3527
3528 .spf-modal-close {
3529 color: #666;
3530 padding: 0;
3531 position: absolute;
3532 top: 0;
3533 right: 0;
3534 width: 36px;
3535 height: 36px;
3536 text-align: center;
3537 background: none;
3538 border: none;
3539 cursor: pointer;
3540 }
3541
3542 .spf-modal-close:before {
3543 font: normal 20px/36px dashicons;
3544 content: "\f158";
3545 vertical-align: top;
3546 width: 36px;
3547 height: 36px;
3548 }
3549
3550 .spf-modal-close:hover {
3551 opacity: 0.5;
3552 }
3553
3554 .spf-modal-insert-wrapper {
3555 text-align: center;
3556 width: 100%;
3557 padding: 15px 0;
3558 background-color: #f5f5f5;
3559 border-top: 1px solid #eee;
3560 }
3561
3562 .spf-modal-overlay {
3563 position: absolute;
3564 top: 0;
3565 left: 0;
3566 width: 100%;
3567 height: 100%;
3568 background-color: #000;
3569 opacity: 0.5;
3570 }
3571
3572 /**
3573 * 08. 01. Shortcode Modal
3574 */
3575
3576 .spf--repeatable {
3577 padding: 15px 15px 0 15px;
3578 }
3579
3580 .spf--repeat-button-block {
3581 text-align: center;
3582 padding-bottom: 15px;
3583 }
3584
3585 .spf--repeat-shortcode {
3586 position: relative;
3587 margin-bottom: 15px;
3588 border: 1px dashed #ddd;
3589 }
3590
3591 .spf--repeat-shortcode:first-child .spf-repeat-remove {
3592 display: none;
3593 }
3594
3595 .spf--repeat-shortcode .spf-repeat-remove {
3596 position: absolute;
3597 right: 10px;
3598 top: 10px;
3599 z-index: 10;
3600 cursor: pointer;
3601 display: inline-block;
3602 font-size: 11px;
3603 width: 18px;
3604 height: 18px;
3605 line-height: 18px;
3606 text-align: center;
3607 border-radius: 2px;
3608 color: #fff;
3609 background-color: #e14d43;
3610 opacity: 0.5;
3611 }
3612
3613 .spf--repeat-shortcode .spf-repeat-remove:hover {
3614 opacity: 1;
3615 }
3616
3617 .spf-shortcode-single .spf-modal-inner {
3618 height: 750px;
3619 }
3620
3621 .spf-shortcode-single .spf-modal-content {
3622 height: 652px;
3623 }
3624
3625 .elementor-editor-active .spf-shortcode-button {
3626 margin-left: 5px;
3627 }
3628
3629 .elementor-editor-active .spf-modal .hidden {
3630 display: none !important;
3631 }
3632
3633 /**
3634 * 08. 02. Gutenberg Modal
3635 */
3636
3637 .spf-shortcode-block {
3638 text-align: center;
3639 padding: 14px;
3640 font-size: 13px;
3641 background-color: #f5f5f5;
3642 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3643 }
3644
3645 .spf-shortcode-block .button {
3646 margin: 10px 0;
3647 }
3648
3649 /**
3650 * 08. 03. Icon Modal
3651 */
3652
3653 .spf-modal-icon .spf-icon-title {
3654 padding: 15px 0;
3655 margin: 4px;
3656 font-size: 14px;
3657 font-weight: bold;
3658 text-align: center;
3659 border: 1px solid #eee;
3660 background-color: #f7f7f7;
3661 }
3662
3663 .spf-modal-icon .spf-icon-search {
3664 width: 250px;
3665 height: 40px;
3666 line-height: 40px;
3667 }
3668
3669 .spf-modal-icon a {
3670 display: inline-block;
3671 padding: 4px;
3672 cursor: pointer;
3673 }
3674
3675 .spf-modal-icon a .spf-icon {
3676 position: relative;
3677 padding: 4px;
3678 display: inline-block;
3679 font-size: 14px;
3680 width: 30px;
3681 height: 26px;
3682 line-height: 26px;
3683 text-align: center;
3684 vertical-align: top;
3685 color: #555;
3686 border: 1px solid #ccc;
3687 background-color: #f7f7f7;
3688 -moz-border-radius: 3px;
3689 -webkit-border-radius: 3px;
3690 border-radius: 3px;
3691 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3692 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3693 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3694 -moz-box-sizing: content-box;
3695 -webkit-box-sizing: content-box;
3696 box-sizing: content-box;
3697 }
3698
3699 .spf-modal-icon a:hover .spf-icon {
3700 color: #fff;
3701 border-color: #222;
3702 background-color: #222;
3703 }
3704
3705 .spf-modal-icon .spf-modal-content {
3706 padding: 10px;
3707 height: 618px;
3708 }
3709
3710 .spf-modal-icon .spf-text-error {
3711 padding: 10px;
3712 }
3713
3714 .spf-modal-loading {
3715 display: none;
3716 position: absolute;
3717 left: 15px;
3718 top: 15px;
3719 }
3720
3721 .spf-loading {
3722 position: relative;
3723 width: 20px;
3724 height: 20px;
3725 background: #ccc;
3726 -moz-border-radius: 20px;
3727 -webkit-border-radius: 20px;
3728 border-radius: 20px;
3729 -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3730 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3731 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3732 }
3733
3734 .spf-loading:after {
3735 position: absolute;
3736 top: 50%;
3737 left: 50%;
3738 width: 4px;
3739 height: 4px;
3740 content: "";
3741 margin-top: -2px;
3742 margin-left: -2px;
3743 background-color: white;
3744 -moz-animation-duration: 0.5s;
3745 -webkit-animation-duration: 0.5s;
3746 animation-duration: 0.5s;
3747 -moz-animation-iteration-count: infinite;
3748 -webkit-animation-iteration-count: infinite;
3749 animation-iteration-count: infinite;
3750 -moz-animation-timing-function: linear;
3751 -webkit-animation-timing-function: linear;
3752 animation-timing-function: linear;
3753 -moz-animation-name: spfLoader;
3754 -webkit-animation-name: spfLoader;
3755 animation-name: spfLoader;
3756 -moz-border-radius: 4px;
3757 -webkit-border-radius: 4px;
3758 border-radius: 4px;
3759 }
3760
3761 @-moz-keyframes spfLoader {
3762 0% {
3763 -moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3764 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3765 }
3766
3767 100% {
3768 -moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3769 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3770 }
3771 }
3772
3773 @-webkit-keyframes spfLoader {
3774 0% {
3775 -webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3776 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3777 }
3778
3779 100% {
3780 -webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3781 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3782 }
3783 }
3784
3785 @keyframes spfLoader {
3786 0% {
3787 -moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3788 -ms-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3789 -webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3790 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3791 }
3792
3793 100% {
3794 -moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3795 -ms-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3796 -webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3797 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3798 }
3799 }
3800
3801 /**
3802 * 09. Helper
3803 */
3804
3805 .spf-text-desc,
3806 .spf-text-subtitle {
3807 font-weight: 400;
3808 font-style: italic;
3809 margin-top: 4px;
3810 color: #999;
3811 }
3812
3813 .spf-text-success {
3814 color: #2b542c;
3815 }
3816
3817 .spf-text-error {
3818 color: #d02c21;
3819 }
3820
3821 .spf-text-info {
3822 color: #31708f;
3823 }
3824
3825 .spf-text-warning {
3826 color: #ffb900;
3827 }
3828
3829 .spf-text-muted {
3830 color: #aaa;
3831 }
3832
3833 .spf-text-left {
3834 text-align: left;
3835 }
3836
3837 .spf-text-center {
3838 text-align: center;
3839 }
3840
3841 .spf-text-right {
3842 text-align: right;
3843 }
3844
3845 .spf-block-left {
3846 float: left;
3847 }
3848
3849 .spf-block-right {
3850 float: right;
3851 }
3852
3853 .spf-full-width {
3854 width: 100%;
3855 }
3856
3857 .spf-full-half {
3858 width: 50%;
3859 }
3860
3861 .spf-table {
3862 width: 100%;
3863 display: table;
3864 }
3865
3866 .spf-table-cell {
3867 display: table-cell;
3868 vertical-align: middle;
3869 }
3870
3871 .spf-table-expanded {
3872 width: 100%;
3873 }
3874
3875 .spf-nowrap {
3876 white-space: nowrap;
3877 }
3878
3879 .spf-text-highlight {
3880 padding: 2px 4px;
3881 font-size: 90%;
3882 color: #c7254e;
3883 background-color: #f9f2f4;
3884 -moz-border-radius: 2px;
3885 -webkit-border-radius: 2px;
3886 border-radius: 2px;
3887 }
3888
3889 .spf-text-highlight-gray {
3890 padding: 2px 4px;
3891 font-size: 90%;
3892 background-color: #f0f0f0;
3893 -moz-border-radius: 2px;
3894 -webkit-border-radius: 2px;
3895 border-radius: 2px;
3896 }
3897
3898 .spf-hidden {
3899 display: none;
3900 }
3901
3902 .spf-hide {
3903 display: none !important;
3904 }
3905
3906 .spf-show {
3907 display: block !important;
3908 }
3909
3910 .spf-opacity {
3911 opacity: 0.5;
3912 }
3913
3914 .spf-warning-primary {
3915 color: #fff !important;
3916 border-color: #dc3545 !important;
3917 background: #dc3545 !important;
3918 }
3919
3920 .spf-warning-primary:hover,
3921 .spf-warning-primary:focus {
3922 border-color: #bd2130 !important;
3923 background: #bd2130 !important;
3924 }
3925
3926 .spf-warning-primary:focus {
3927 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #bd2130 !important;
3928 }
3929
3930 .spf-warning-primary:active {
3931 border-color: #bd2130 !important;
3932 background: #bd2130 !important;
3933 }
3934
3935 .spf-form-result {
3936 display: none;
3937 padding: 12px;
3938 margin: 0 0 15px 0;
3939 background-color: #fff;
3940 border-left: 4px solid #555;
3941 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
3942 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
3943 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
3944 }
3945
3946 .spf-form-show {
3947 display: block;
3948 }
3949
3950 .spf-form-error {
3951 border-left-color: #dc3232;
3952 }
3953
3954 .spf-form-success {
3955 border-left-color: #46b450;
3956 }
3957
3958 .spf-form-warning {
3959 border-left-color: #ffb900;
3960 }
3961
3962 .spf-form-info {
3963 border-left-color: #00a0d2;
3964 }
3965
3966 .spf-label-error {
3967 position: relative;
3968 top: -2px;
3969 display: inline-block;
3970 font-size: 10px;
3971 line-height: 10px;
3972 height: 10px;
3973 width: 10px;
3974 padding: 1px;
3975 font-style: normal;
3976 text-align: center;
3977 color: #fff;
3978 vertical-align: middle;
3979 background-color: #e10000;
3980 -moz-border-radius: 2px;
3981 -webkit-border-radius: 2px;
3982 border-radius: 2px;
3983 }
3984
3985 .spf-no-option {
3986 padding: 30px;
3987 }
3988
3989 .spf-input-number {
3990 -moz-appearance: textfield;
3991 }
3992
3993 .spf-field:is(.spf-field-slider, .spf-field-spinner) .spf-input-number::-webkit-inner-spin-button,
3994 .spf-field:is(.spf-field-slider, .spf-field-spinner) .spf-input-number::-webkit-outer-spin-button {
3995 -webkit-appearance: none;
3996 margin: 0;
3997 }
3998
3999 /**
4000 * 10. Welcome Page
4001 */
4002
4003 .spf-welcome-wrap {
4004 position: relative;
4005 margin: 25px 40px 0 20px;
4006 font-size: 15px;
4007 max-width: 1200px;
4008 }
4009
4010 .spf-welcome-wrap p {
4011 font-size: 14px;
4012 line-height: 1.5;
4013 }
4014
4015 .spf-welcome-wrap h1 {
4016 margin: 0.2em 200px 0 0;
4017 padding: 0;
4018 color: #32373c;
4019 line-height: 1.2em;
4020 font-size: 2.8em;
4021 font-weight: 400;
4022 }
4023
4024 .spf-welcome-wrap .spf-logo {
4025 position: absolute;
4026 overflow: hidden;
4027 top: 0;
4028 right: 0;
4029 height: 160px;
4030 width: 140px;
4031 background-image: linear-gradient(45deg, #2d67cb, #ad19f3);
4032 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgba(0, 0, 0, 0.25);
4033 }
4034
4035 .spf-welcome-wrap .spf-logo .spf--effects i {
4036 position: absolute;
4037 width: 200px;
4038 height: 100px;
4039 background-color: rgba(0, 0, 0, 0.15);
4040 transform: rotate(-45deg);
4041 }
4042
4043 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(1) {
4044 bottom: -20px;
4045 right: -70px;
4046 }
4047
4048 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(2) {
4049 bottom: -35px;
4050 right: -80px;
4051 }
4052
4053 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(3) {
4054 bottom: -50px;
4055 right: -90px;
4056 }
4057
4058 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(4) {
4059 bottom: -65px;
4060 right: -100px;
4061 }
4062
4063 .spf-welcome-wrap .spf-logo .spf--wp-logos {
4064 position: relative;
4065 padding-top: 25px;
4066 text-align: center;
4067 }
4068
4069 .spf-welcome-wrap .spf-logo .spf--wp-logo {
4070 position: absolute;
4071 left: 20px;
4072 width: 20px;
4073 height: 20px;
4074 background-repeat: no-repeat;
4075 background-position: center center;
4076 background-image: url(../images/wp-logo.svg);
4077 }
4078
4079 .spf-welcome-wrap .spf-logo .spf--wp-plugin-logo {
4080 display: inline-block;
4081 width: 50px;
4082 height: 50px;
4083 border: 3px solid #fff;
4084 background-size: 40px;
4085 background-repeat: no-repeat;
4086 background-position: center center;
4087 background-image: url(../images/wp-plugin-logo.svg);
4088 border-radius: 100%;
4089 vertical-align: middle;
4090 }
4091
4092 .spf-welcome-wrap .spf-logo .spf--text {
4093 position: absolute;
4094 left: 0;
4095 right: 0;
4096 top: 90px;
4097 color: #fff;
4098 font-size: 13px;
4099 line-height: 1.2em;
4100 font-weight: 600;
4101 text-align: center;
4102 text-transform: uppercase;
4103 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
4104 }
4105
4106 .spf-welcome-wrap .spf-logo .spf--version {
4107 top: auto;
4108 left: auto;
4109 right: 8px;
4110 bottom: 4px;
4111 font-size: 11px;
4112 text-transform: lowercase;
4113 }
4114
4115 .spf-welcome-wrap .spf-about-text {
4116 font-weight: 400;
4117 line-height: 1.6em;
4118 font-size: 19px;
4119 margin: 1em 200px 1em 0;
4120 color: #555d66;
4121 }
4122
4123 .spf-welcome-wrap .spf-demo-button {
4124 margin: 1em 200px 2em 0;
4125 }
4126
4127 .spf-welcome-wrap .nav-tab-wrapper {
4128 margin-bottom: 20px;
4129 }
4130
4131 .spf-welcome-wrap ul {
4132 list-style-type: disc;
4133 padding-left: 15px;
4134 }
4135
4136 .spf-welcome-wrap .spf--col {
4137 float: left;
4138 padding-right: 20px;
4139 box-sizing: border-box;
4140 }
4141
4142 .spf-welcome-wrap .spf--col-2 {
4143 width: 50%;
4144 }
4145
4146 .spf-welcome-wrap .spf--col-3 {
4147 width: 33.333%;
4148 }
4149
4150 .spf-welcome-wrap .spf--col-4 {
4151 width: 25%;
4152 }
4153
4154 .spf-welcome-wrap .spf--col-5 {
4155 width: 20%;
4156 }
4157
4158 .spf-welcome-wrap .spf--col-last {
4159 padding-right: 0;
4160 }
4161
4162 .spf-welcome-wrap .spf--col-upgrade {
4163 padding-top: 30px;
4164 text-align: center;
4165 }
4166
4167 .spf--table-compare thead td,
4168 .spf--table-compare tfoot td {
4169 text-align: center;
4170 }
4171
4172 .spf--table-compare td {
4173 font-size: 14px;
4174 text-align: center;
4175 vertical-align: middle;
4176 padding: 10px;
4177 }
4178
4179 .spf--table-compare td:first-child {
4180 text-align: left;
4181 }
4182
4183 .spf--table-compare tfoot td {
4184 padding: 15px 0;
4185 }
4186
4187 .spf--table-compare .fa {
4188 font-size: 12px;
4189 width: 18px;
4190 height: 18px;
4191 line-height: 18px;
4192 padding: 2px;
4193 text-align: center;
4194 color: #fff;
4195 background-color: #46b450;
4196 border-radius: 100%;
4197 }
4198
4199 .spf--table-compare .fa-check {
4200 background-color: #46b450;
4201 }
4202
4203 .spf--table-compare .fa-times {
4204 background-color: #dc3232;
4205 }
4206
4207 .spf-welcome-cols {
4208 clear: both;
4209 margin: 20px 0;
4210 background-color: #fff;
4211 padding: 30px 0;
4212 border-radius: 2px;
4213 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
4214 }
4215
4216 .spf-welcome-cols .spf--col {
4217 width: 20%;
4218 float: left;
4219 padding: 0 30px;
4220 box-sizing: border-box;
4221 text-align: center;
4222 border-right: 1px solid #e5e5e5;
4223 }
4224
4225 .spf-welcome-cols .spf--left,
4226 .spf-welcome-cols .spf--block {
4227 float: left;
4228 width: 20%;
4229 padding: 0 30px;
4230 text-align: center;
4231 box-sizing: border-box;
4232 }
4233
4234 .spf-welcome-cols .spf--block {
4235 width: 80%;
4236 }
4237
4238 .spf-welcome-cols .spf--last {
4239 border-right: none;
4240 }
4241
4242 .spf-welcome-cols .spf--space {
4243 height: 20px;
4244 }
4245
4246 .spf-welcome-cols .spf--icon {
4247 display: inline-block;
4248 font-size: 25px;
4249 width: 50px;
4250 height: 50px;
4251 line-height: 50px;
4252 text-align: center;
4253 margin-bottom: 10px;
4254 color: #fff;
4255 background-color: #555;
4256 border-radius: 50px;
4257 }
4258
4259 .spf-welcome-cols .spf--active {
4260 background-color: #5cb85c;
4261 }
4262
4263 .spf-welcome-cols .spf--deactive {
4264 background-color: #e14d43;
4265 }
4266
4267 .spf-welcome-cols .spf--title {
4268 font-weight: bold;
4269 display: block;
4270 }
4271
4272 .spf-welcome-cols p:last-child {
4273 margin-bottom: 0;
4274 }
4275
4276 .spf-code-block {
4277 margin: 20px 0;
4278 padding: 5px 20px;
4279 background-color: #fff;
4280 border-radius: 2px;
4281 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
4282 }
4283
4284 .spf-code-block pre {
4285 font-size: 13px;
4286 color: #0073aa;
4287 }
4288
4289 .spf-code-block pre span {
4290 color: #999;
4291 }
4292
4293 .spf--table-fields td {
4294 font-size: 14px;
4295 }
4296
4297 .spf--upgrade a {
4298 color: #5cb85c;
4299 font-weight: bold;
4300 }
4301
4302 .spf--upgrade a:focus,
4303 .spf--upgrade a:hover {
4304 color: #4aa14a;
4305 outline: none;
4306 box-shadow: none;
4307 }
4308
4309 /**
4310 * Chosen JS Styles
4311 */
4312
4313 .chosen-container {
4314 position: relative;
4315 display: inline-block;
4316 vertical-align: middle;
4317 font-size: 13px;
4318 user-select: none;
4319 min-width: 225px;
4320 }
4321
4322 .chosen-container * {
4323 box-sizing: border-box;
4324 }
4325
4326 .chosen-container .chosen-drop {
4327 position: absolute;
4328 top: 100%;
4329 z-index: 1010;
4330 max-width: 390px;
4331 /* SP Style */
4332 width: 100%;
4333 border: 1px solid #aaa;
4334 border-top: 0;
4335 background: #fff;
4336 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
4337 clip: rect(0, 0, 0, 0);
4338 clip-path: inset(100% 100%);
4339 }
4340
4341 .chosen-container.chosen-with-drop .chosen-drop {
4342 clip: auto;
4343 clip-path: none;
4344 }
4345
4346 .chosen-container a {
4347 cursor: pointer;
4348 }
4349
4350 .chosen-container .search-choice .group-name,
4351 .chosen-container .chosen-single .group-name {
4352 margin-right: 4px;
4353 overflow: hidden;
4354 white-space: nowrap;
4355 text-overflow: ellipsis;
4356 font-weight: normal;
4357 color: #999999;
4358 }
4359
4360 .chosen-container .search-choice .group-name:after,
4361 .chosen-container .chosen-single .group-name:after {
4362 content: ":";
4363 padding-left: 2px;
4364 vertical-align: top;
4365 }
4366
4367 .chosen-container-single .chosen-single {
4368 position: relative;
4369 display: block;
4370 overflow: hidden;
4371 padding: 0 0 0 8px;
4372 height: 25px;
4373 border: 1px solid #aaa;
4374 border-radius: 5px;
4375 background-color: #fff;
4376 background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
4377 background-clip: padding-box;
4378 box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
4379 color: #444;
4380 text-decoration: none;
4381 white-space: nowrap;
4382 line-height: 24px;
4383 }
4384
4385 .chosen-container-single .chosen-default {
4386 color: #999;
4387 }
4388
4389 .chosen-container-single .chosen-single span {
4390 display: block;
4391 overflow: hidden;
4392 margin-right: 26px;
4393 text-overflow: ellipsis;
4394 white-space: nowrap;
4395 }
4396
4397 .chosen-container-single .chosen-single-with-deselect span {
4398 margin-right: 38px;
4399 }
4400
4401 .chosen-container-single .chosen-single abbr {
4402 position: absolute;
4403 top: 6px;
4404 right: 26px;
4405 display: block;
4406 width: 12px;
4407 height: 12px;
4408 font-size: 1px;
4409 }
4410
4411 .chosen-container-single .chosen-single div {
4412 position: absolute;
4413 top: 0;
4414 right: 0;
4415 display: block;
4416 width: 18px;
4417 height: 100%;
4418 }
4419
4420 .chosen-container-single .chosen-single div b {
4421 display: block;
4422 width: 100%;
4423 height: 100%;
4424 }
4425
4426 .chosen-container-single .chosen-search {
4427 position: relative;
4428 z-index: 1010;
4429 margin: 0;
4430 padding: 3px 4px;
4431 white-space: nowrap;
4432 }
4433
4434 .chosen-container-single .chosen-search input[type="text"] {
4435 margin: 1px 0;
4436 padding: 4px 20px 4px 5px;
4437 width: 100%;
4438 height: auto;
4439 outline: 0;
4440 border: 1px solid #aaa;
4441 font-size: 1em;
4442 font-family: sans-serif;
4443 line-height: normal;
4444 border-radius: 0;
4445 }
4446
4447 .chosen-container-single .chosen-drop {
4448 margin-top: -1px;
4449 border-radius: 0 0 4px 4px;
4450 background-clip: padding-box;
4451 }
4452
4453 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
4454 position: absolute;
4455 clip: rect(0, 0, 0, 0);
4456 clip-path: inset(100% 100%);
4457 }
4458
4459 .chosen-container .chosen-results {
4460 color: #444;
4461 position: relative;
4462 overflow-x: hidden;
4463 overflow-y: auto;
4464 margin: 0 4px 4px 0;
4465 padding: 0 0 0 4px;
4466 max-height: 240px;
4467 -webkit-overflow-scrolling: touch;
4468 }
4469
4470 .chosen-container .chosen-results li {
4471 display: none;
4472 margin: 0;
4473 padding: 5px 6px;
4474 list-style: none;
4475 line-height: 15px;
4476 word-wrap: break-word;
4477 -webkit-touch-callout: none;
4478 }
4479
4480 .chosen-container .chosen-results li.active-result {
4481 display: list-item;
4482 cursor: pointer;
4483 max-width: 390px;
4484 /* SP Style */
4485 }
4486
4487 .chosen-container .chosen-results li.disabled-result {
4488 display: list-item;
4489 color: #ccc;
4490 cursor: default;
4491 }
4492
4493 .chosen-container .chosen-results li.highlighted {
4494 background-color: #3875d7;
4495 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
4496 color: #fff;
4497 }
4498
4499 .chosen-container .chosen-results li.no-results {
4500 color: #777;
4501 display: list-item;
4502 background: #f4f4f4;
4503 }
4504
4505 .chosen-container .chosen-results li.group-result {
4506 display: list-item;
4507 font-weight: bold;
4508 cursor: default;
4509 }
4510
4511 .chosen-container .chosen-results li.group-option {
4512 padding-left: 15px;
4513 }
4514
4515 .chosen-container .chosen-results li em {
4516 font-style: normal;
4517 text-decoration: underline;
4518 }
4519
4520 .chosen-container-multi .chosen-choices {
4521 position: relative;
4522 overflow: hidden;
4523 margin: 0;
4524 padding: 0 5px;
4525 max-width: 390px;
4526 /* SP Style */
4527 height: auto;
4528 border: 1px solid #aaa;
4529 background-color: #fff;
4530 background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
4531 cursor: text;
4532 min-width: 380px;
4533 }
4534
4535 .chosen-container-multi .chosen-choices li {
4536 float: left;
4537 list-style: none;
4538 }
4539
4540 .spf-metabox .chosen-container-multi .chosen-choices li {
4541 float: left !important;
4542 }
4543
4544 .chosen-container-multi .chosen-choices li.search-field {
4545 margin: 0;
4546 padding: 0;
4547 white-space: nowrap;
4548 }
4549
4550 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
4551 margin: 1px 0;
4552 padding: 0;
4553 outline: 0;
4554 border: 0 !important;
4555 background: transparent !important;
4556 box-shadow: none;
4557 color: #999;
4558 font-size: 100%;
4559 font-family: sans-serif;
4560 line-height: normal;
4561 border-radius: 0;
4562 width: 25px;
4563 height: 25px;
4564 min-height: 25px;
4565 }
4566
4567 .chosen-container-multi .chosen-choices li.search-choice {
4568 position: relative;
4569 margin: 3px 5px 3px 0;
4570 padding: 3px 20px 3px 6px;
4571 border: 1px solid #aaa;
4572 max-width: 100%;
4573 border-radius: 3px;
4574 background-color: #eeeeee;
4575 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
4576 background-size: 100% 19px;
4577 background-repeat: repeat-x;
4578 background-clip: padding-box;
4579 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
4580 color: #333;
4581 line-height: 13px;
4582 cursor: default;
4583 }
4584
4585 .chosen-container-multi .chosen-choices li.search-choice span {
4586 word-wrap: break-word;
4587 white-space: nowrap;
4588 }
4589
4590 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
4591 position: absolute;
4592 top: 0;
4593 right: 0;
4594 display: block;
4595 width: 12px;
4596 height: 12px;
4597 font-size: 1px;
4598 }
4599
4600 .chosen-container-multi .chosen-choices li.search-choice-disabled {
4601 padding-right: 5px;
4602 border: 1px solid #ccc;
4603 background-color: #e4e4e4;
4604 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
4605 color: #666;
4606 }
4607
4608 .chosen-container-multi .chosen-choices li.search-choice-focus {
4609 background: #d4d4d4;
4610 }
4611
4612 .chosen-container-multi .chosen-results {
4613 margin: 0;
4614 padding: 0;
4615 }
4616
4617 .chosen-container-multi .chosen-drop .result-selected {
4618 display: none;
4619 /* SP Style */
4620 color: #ccc;
4621 cursor: default;
4622 }
4623
4624 .chosen-container-active .chosen-single {
4625 border: 1px solid #5897fb;
4626 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4627 }
4628
4629 .chosen-container-active.chosen-with-drop .chosen-single {
4630 border: 1px solid #aaa;
4631 border-bottom-right-radius: 0;
4632 border-bottom-left-radius: 0;
4633 background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
4634 box-shadow: 0 1px 0 #fff inset;
4635 }
4636
4637 .chosen-container-active.chosen-with-drop .chosen-single div {
4638 border-left: none;
4639 background: transparent;
4640 }
4641
4642 .chosen-container-active .chosen-choices {
4643 border: 1px solid #5897fb;
4644 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4645 }
4646
4647 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
4648 color: #222 !important;
4649 }
4650
4651 .chosen-disabled {
4652 opacity: 0.5 !important;
4653 cursor: default;
4654 }
4655
4656 .chosen-disabled .chosen-single {
4657 cursor: default;
4658 }
4659
4660 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
4661 cursor: default;
4662 }
4663
4664 .chosen-rtl {
4665 text-align: right;
4666 }
4667
4668 .chosen-rtl .chosen-single {
4669 overflow: visible;
4670 padding: 0 8px 0 0;
4671 }
4672
4673 .chosen-rtl .chosen-single span {
4674 margin-right: 0;
4675 margin-left: 26px;
4676 direction: rtl;
4677 }
4678
4679 .chosen-rtl .chosen-single-with-deselect span {
4680 margin-left: 38px;
4681 }
4682
4683 .chosen-rtl .chosen-single div {
4684 right: auto;
4685 left: 3px;
4686 }
4687
4688 .chosen-rtl .chosen-single abbr {
4689 right: auto;
4690 left: 26px;
4691 }
4692
4693 .chosen-rtl .chosen-choices li {
4694 float: right;
4695 }
4696
4697 .chosen-rtl .chosen-choices li.search-field input[type="text"] {
4698 direction: rtl;
4699 }
4700
4701 .chosen-rtl .chosen-choices li.search-choice {
4702 margin: 3px 5px 3px 0;
4703 padding: 3px 5px 3px 19px;
4704 }
4705
4706 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
4707 right: auto;
4708 left: 4px;
4709 }
4710
4711 .chosen-rtl.chosen-container-single .chosen-results {
4712 margin: 0 0 4px 4px;
4713 padding: 0 4px 0 0;
4714 }
4715
4716 .chosen-rtl .chosen-results li.group-option {
4717 padding-right: 15px;
4718 padding-left: 0;
4719 }
4720
4721 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
4722 border-right: none;
4723 }
4724
4725 .chosen-rtl .chosen-search input[type="text"] {
4726 padding: 4px 5px 4px 20px;
4727 direction: rtl;
4728 }
4729
4730 /**
4731 *
4732 *Custom Style for the SP PCP
4733 *
4734 **/
4735 .spf_column_2 ul,
4736 .spf_column_2 .spf-fieldset ul {
4737 -webkit-columns: 2;
4738 -moz-columns: 2;
4739 columns: 2;
4740 width: 500px;
4741 }
4742
4743 /* .spf_column_2 ul li,
4744 .spf_column_2 .spf-fieldset ul li {
4745 width: 50%;
4746 } */
4747
4748 #sp_pcp_view_options {
4749 border-top-color: #f1f1f1;
4750 margin-top: -29px;
4751 }
4752
4753 #sp_pcp_view_options .spf-nav ul li {
4754 margin-bottom: -1px;
4755 }
4756
4757 #sp_pcp_view_options .spf-nav.spf-nav-metabox {
4758 border-right-color: #f1f1f1;
4759 border-right-color: #f1f1f1;
4760 background: #f1f1f1;
4761 margin-right: 0;
4762 padding-top: 15px;
4763 }
4764
4765 #sp_pcp_view_options .spf-content {
4766 border-top: 1px solid #e5e5e5;
4767 box-shadow: 0 -1px 1px rgba(0, 0, 0, .04);
4768 }
4769
4770 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset .spf-title,
4771 #spf-section-sp_pcp_layouts_1 .spf-field-gallery .spf-title,
4772 .pcp_carousel_content_wrapper .spf-title,
4773 .pcp-video-description .spf-title,
4774 .pcp-video-field-wrapper>.spf-title {
4775 width: 100%;
4776 }
4777
4778 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset .spf-fieldset,
4779 #spf-section-sp_pcp_layouts_1 .spf-field-gallery .spf-fieldset,
4780 .pcp_carousel_content_wrapper .spf-fieldset,
4781 .pcp-video-description .spf-fieldset,
4782 .pcp-video-field-wrapper>.spf-fieldset {
4783 margin-top: 30px;
4784 margin-left: 0;
4785 }
4786
4787 #sp_pcp_view_options .hndle,
4788 #sp_pcp_view_options .handlediv,
4789 #sp_pcp_layouts .handlediv,
4790 #sp_pcp_layouts .hndle,
4791 .post-type-sp_post_carousel .postbox-header .handle-actions,
4792 .post-type-sp_post_carousel .postbox-header .handle-actions .handle-order-lower,
4793 .post-type-sp_post_carousel .postbox-header .handle-actions .handle-order-higher {
4794 display: none;
4795 }
4796
4797 #spf-section-sp_pcp_layouts_1 .pcp-admin-header {
4798 background-color: #B53361;
4799 padding: 18px 26px;
4800 overflow: hidden;
4801 background: linear-gradient(90deg, #B53361 0%, #E2572C 65.02%);
4802 display: flex;
4803 justify-content: space-between;
4804 align-items: center;
4805 }
4806
4807 #spf-section-sp_pcp_layouts_1 .pcp-admin-header img {
4808 max-width: 180px;
4809 }
4810
4811 #spf-section-sp_pcp_layouts_1 .pcp-admin-header .support {
4812 margin-left: 16px;
4813 float: right;
4814 }
4815
4816 #spf-section-sp_pcp_layouts_1 .pcp-admin-header .support a {
4817 color: #ffffff;
4818 text-decoration: none;
4819 line-height: 35px;
4820 font-size: 15px;
4821 font-weight: 500;
4822 }
4823
4824 .pcp_reading_time_meta .clear {
4825 clear: initial;
4826 }
4827
4828 .pcp_reading_time_postfix .spf-fieldset input,
4829 .pcp_reading_time_meta .spf--wrap {
4830 margin-right: 5px;
4831 }
4832
4833 .pcp_reading_time_meta .spf-fieldset {
4834 line-height: 2;
4835 }
4836
4837 .pcp_reading_time_postfix .spf-fieldset input {
4838 max-width: 255px;
4839 }
4840
4841 /*
4842 * Shortcode footer.
4843 */
4844
4845 .spf-field-shortcode.pcp-admin-footer .pcp-shortcode-selectable {
4846 background-color: rgba(82, 179, 217, 0.11);
4847 padding: 10px 15px;
4848 display: inline-block;
4849 -webkit-touch-callout: all;
4850 -webkit-user-select: all;
4851 -khtml-user-select: all;
4852 -moz-user-select: all;
4853 -ms-user-select: all;
4854 user-select: all;
4855 }
4856
4857 #spf-section-sp_pcp_display_shortcode_1 .spf-field {
4858 display: flex;
4859 padding: 0;
4860 flex-wrap: wrap;
4861 }
4862
4863 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap:first-of-type {
4864 border-right: 1px solid #ddd;
4865 }
4866
4867 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap {
4868 padding-top: 22px;
4869 padding-bottom: 22px;
4870 text-align: center;
4871 width: 49%;
4872 }
4873
4874 .spf-field-shortcode.pcp-admin-footer .pcp-sc-title {
4875 font-weight: 500;
4876 font-size: 14px !important;
4877 padding-top: 0 !important;
4878 color: #4c5158;
4879 margin-right: 5px;
4880 }
4881
4882 @media only screen and (max-width: 990px) {
4883 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap:first-of-type {
4884 border-right: none;
4885 border-bottom: 1px solid #ddd;
4886 }
4887
4888 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap {
4889 width: 100%;
4890 }
4891 }
4892
4893 /* Post content sortble custom css */
4894
4895 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item:nth-child(5),
4896 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item:nth-child(6) {
4897 opacity: .5;
4898 pointer-events: none;
4899 }
4900
4901 .spf-field-accordion.pcp-opened-accordion .spf-accordion-title,
4902 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item h4.spf-accordion-title {
4903 border: none;
4904 box-shadow: none;
4905 background: #AAD2F3;
4906 color: #02579C;
4907 margin-left: -1px;
4908 line-height: 16px;
4909 text-align: left;
4910 }
4911
4912 .spf-field-accordion.pcp-opened-accordion {
4913 padding-bottom: 15px;
4914 }
4915
4916 .spf-field-accordion.pcp-opened-accordion .spf-accordion-title {
4917 margin-left: 0;
4918 border-radius: 4px;
4919 overflow: hidden;
4920 }
4921
4922 .spf-field-accordion.pcp-opened-accordion .spf-accordion-title.expanded {
4923 border-radius: 4px 4px 0 0;
4924 }
4925
4926 .spf-field-accordion .spf-accordion-open {
4927 display: block;
4928 border-bottom-left-radius: 3px;
4929 border-bottom-right-radius: 3px;
4930 }
4931
4932 .post_content_sorter.spf-field-sortable .spf--sortable-content>.spf-field {
4933 padding: 0;
4934 }
4935
4936 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-item {
4937 margin-bottom: 0;
4938 }
4939
4940 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-content.spf-accordion-open~h4.spf-accordion-title {
4941 border-radius: 0;
4942 }
4943
4944 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-content {
4945 border: none;
4946 box-shadow: none;
4947 }
4948
4949 /* Social shape */
4950 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image.spf--active img {
4951 border-color: #E2572C;
4952 }
4953
4954 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image {
4955 text-align: center;
4956 }
4957
4958 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image img {
4959 color: #7b8898;
4960 margin-right: 10px;
4961 border: 2px solid transparent;
4962 border-radius: none;
4963 outline: none;
4964 }
4965
4966 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image:before {
4967 content: no-close-quote;
4968 background: transparent;
4969 }
4970
4971 /* Group meta custom css */
4972 .spf-field-group.pcp_custom_group_design .spf-cloneable-header-icon {
4973 color: #476177;
4974 background-image: none;
4975 position: static;
4976 }
4977
4978 .spf-field-group.pcp_custom_group_design .spf-cloneable-helper i {
4979 color: #476177;
4980 font-family: 'FontAwesome';
4981 font-style: normal;
4982 }
4983
4984 .spf-field-group.pcp_custom_group_design .spf-cloneable-helper .spf-cloneable-clone {
4985 display: none;
4986 }
4987
4988 .spf-field-group.pcp_custom_group_design .spf-cloneable-title:hover {
4989 border-color: #caddec;
4990 }
4991
4992 .spf-field-group.pcp_custom_group_design .spf-cloneable-title {
4993 color: #000;
4994 background: #E8F5FF;
4995 border: 1px solid #AAC6D9;
4996 /* border-bottom-color: transparent; */
4997 border-radius: 3px;
4998 text-transform: capitalize;
4999 }
5000
5001 .spf-field-group.advertisements_group .spf-cloneable-title.ui-accordion-header-active,
5002 .spf-field-group.pcp_custom_group_design .spf-cloneable-title.ui-accordion-header-active {
5003 border-bottom-left-radius: 0;
5004 border-bottom-right-radius: 0;
5005 border-bottom-color: transparent;
5006 }
5007
5008 .spf-field-group.pcp_custom_group_design .spf-cloneable-content {
5009 border: 1px solid #CADDEC;
5010 }
5011
5012 .spf-field-group.pcp_custom_group_design .spf-cloneable-placeholder {
5013 background-color: #afc5d6;
5014 }
5015
5016 .spf-field-group.pcp_custom_group_design h4.spf-accordion-title {
5017 border: none;
5018 box-shadow: none;
5019 }
5020
5021 .spf-field-group.advertisements_group .spf-cloneable-content,
5022 .spf-field-group.pcp_custom_group_design .spf-cloneable-content {
5023 border: 1px solid #AAC6D9;
5024 border-bottom-left-radius: 3px;
5025 border-bottom-right-radius: 3px;
5026 border-top-color: transparent;
5027 }
5028
5029 /* Popup sortable field CSS */
5030 .spf-field.spf-field-sortable.post_content_sorter_sortable .spf--sortable.ui-sortable {
5031 max-width: 530px;
5032 }
5033
5034 .spf-field.spf-field-sortable.post_content_sorter_sortable .spf--sortable.ui-sortable .spf-field.spf-field-switcher .spf-fieldset {
5035 margin-left: 80%;
5036 }
5037
5038 /*
5039 * Pro Only Features
5040 *
5041 * The features that are available only on the Smart Post Show Pro only
5042 */
5043 /* Content Orientation Options */
5044 .spf-field-layout_preset:not(.pcp-layout-preset, .pcp-content-orientation) .spf--image.pcp-pro-only,
5045 /* Pagination Type */
5046 .pcp-pagination-type li:nth-child(n+2) label
5047
5048 /* Advance filter Options ( Filter by - Custom Fields, Date ) */
5049 /* .pcp_advanced_filter ul li:nth-of-type(-2n+6) label */
5050 {
5051 pointer-events: none;
5052 }
5053
5054 /* Adding Pro text to the layout_preset field */
5055 .spf-field-layout_preset.pcp-content-orientation .spf--image.pcp-pro-only:after,
5056 .spf-field-layout_preset .spf--image.pcp-pro-only:after {
5057 position: absolute;
5058 top: 1px;
5059 right: 1px;
5060 color: #585B6F;
5061 background-color: #cbd6df;
5062 font-weight: 600;
5063 padding: 0 4px;
5064 content: 'PRO';
5065 text-align: center;
5066 font-size: 8px;
5067 }
5068
5069 .spf-field-layout_preset.pcp-layout-preset .spf--image.pcp-pro-only:after {
5070 right: 2px;
5071 }
5072
5073 .spf-field-layout_preset .spf--image {
5074 position: relative;
5075 }
5076
5077 /* Setting page header */
5078 .sp_post_carousel_page_pcp_replace_layout .spf-header-inner h1 svg,
5079 .sp_post_carousel_page_pcp_settings .spf-header-inner h1 svg {
5080 float: left;
5081 margin-right: 8px;
5082 height: 1.5em;
5083 }
5084
5085 .sp_post_carousel_page_pcp_settings .spf-header-inner h1 {
5086 line-height: 1.5em;
5087 }
5088
5089 .sp_post_carousel_page_pcp_settings .wrap h1 {
5090 display: none;
5091 }
5092
5093 /* Pro only accordion fields */
5094 .post_content_sorter .spf--sortable-item .pcp-pro-only .spf-accordion-title,
5095 .post_content_sorter .spf--sortable-item .pcp-pro-only .spf--sortable-helper {
5096 background-color: rgb(240, 240, 240);
5097 color: #bebebe;
5098 }
5099
5100 .post_content_sorter.spf-field-sortable .pcp-pro-only .spf--sortable-helper {
5101 border-right: 1px solid rgb(190, 190, 190);
5102 }
5103
5104 .spf-field.spf-field-checkbox.pcp_disabled h4,
5105 .spf-field.spf-field-checkbox.pcp_disabled .spf-checkbox {
5106 opacity: 0.4;
5107 pointer-events: none;
5108 }
5109
5110 .sp_post_carousel_page_pcp_settings .spf-header-right .spf-buttons .button.spf-save-ajax[disabled] {
5111 background-color: #02cc7b !important;
5112 color: #ffffff !important;
5113 border: none;
5114 }
5115
5116 /* Pro only image select */
5117 /* .pcp-display-tabs .spf-tabbed-nav a:last-child, */
5118 .pcp-post-content-type .spf--button:last-child,
5119 .pro-overlay-options,
5120 .spf-field-image_select .spf--image.pcp-pro-only,
5121 .spf-field-button_set .spf--button.pcp-pro-only {
5122 pointer-events: none;
5123 opacity: 0.5;
5124 }
5125
5126 .spf-field-switcher.pro_only_field,
5127 .spf-field.spf-field-layout_preset .spf--image.pcp-pro-only img,
5128 .spf-field.spf-field-layout_preset .spf--image.pcp-pro-only .sp-carousel-type {
5129 opacity: 0.5;
5130 }
5131
5132
5133 /* .pcp-display-tabs .spf-tabbed-nav a:last-child::after, */
5134 .pcp-post-content-type .spf--button:last-child::after,
5135 .spf-field-button_set .spf--button.pcp-pro-only:after,
5136 .spf-field-image_select .spf--image.pcp-pro-only:after {
5137 position: absolute;
5138 top: 0;
5139 right: 0;
5140 color: #585B6F;
5141 background-color: #cbd6df;
5142 font-weight: 500;
5143 padding: 0 4px;
5144 content: "PRO";
5145 text-align: center;
5146 font-size: 8px;
5147 line-height: 11px;
5148 opacity: 1;
5149 }
5150
5151 /* Show preview button */
5152 #spsp-show-preview {
5153 position: fixed;
5154 right: 144px;
5155 bottom: 30px;
5156 z-index: 1001;
5157 width: 155px;
5158 text-align: center;
5159 padding: 10px 0px;
5160 background: #54b154;
5161 color: #fff;
5162 border-radius: 3px;
5163 text-decoration: none;
5164 display: block;
5165 font-weight: 500;
5166 text-transform: uppercase;
5167 letter-spacing: 0.2px;
5168 margin: 0;
5169 box-sizing: border-box;
5170 border-color: #44a944;
5171 overflow: hidden;
5172 }
5173
5174 #spsp-preview-box {
5175 overflow-x: auto;
5176 padding: 0 20px;
5177 resize: vertical;
5178 }
5179
5180 .spf-field.spf-field-preview {
5181 padding-right: 10px;
5182 padding-left: 10px;
5183 }
5184
5185 .spf-field.spf-field-preview .pcp-sc-title {
5186 padding-left: 19px;
5187 padding-bottom: 0px;
5188 margin-top: 0;
5189 }
5190
5191 #poststuff #sp_pcp_display .sp-pcp-section h3,
5192 #poststuff #sp_pcp_display .sp-pcp-section h2,
5193 #poststuff #sp_pcp_display .sp-pcp-section h3 {
5194 padding: 0;
5195 margin: 0 0 9px 0;
5196 }
5197
5198 #poststuff #sp_pcp_display .sp-pcp-section .pcp-section-title {
5199 color: #444;
5200 margin: 0 0 30px 0;
5201 font-size: 24px;
5202 }
5203
5204 /* Popup settings field style */
5205 .spf-field-fieldset.pcp_popup_settings_field .spf-field .spf-fieldset {
5206 padding: 0 13px;
5207 /* opacity: .8; */
5208 pointer-events: none;
5209 }
5210
5211 /* .spf-field-fieldset.pcp_popup_settings_field .spf-field:not(.post_content_sorter_sortable) .spf-fieldset{
5212 opacity: .8;
5213 } */
5214 .spf-field-fieldset.pcp_popup_settings_field .spf-field-switcher .spf--active {
5215 background-color: #99AAB2;
5216 opacity: 1;
5217 }
5218
5219 .spf-field-fieldset.pcp_popup_settings_field .spf-fieldset-content {
5220 border: none;
5221 }
5222
5223 .spf-field-fieldset.pcp_popup_settings_field .spf-fieldset-content .spf-field-switcher .spf-title {
5224 line-height: 24px;
5225 }
5226
5227 /* pro field style */
5228 .pcp_only_pro {
5229 opacity: .7;
5230 pointer-events: none;
5231 }
5232
5233 .spf-field-column.pcp_only_pro .spf--inputs .spf--input:last-child {
5234 position: relative;
5235 }
5236
5237 .spf-field-column.pcp_only_pro .spf--inputs .spf--input:last-child::after {
5238 content: "PRO";
5239 background-color: #d4d4d4;
5240 padding: 2px 4px;
5241 font-size: 8px;
5242 border-radius: 2px;
5243 height: 11px;
5244 margin-left: 5px;
5245 margin-top: 7px;
5246 }
5247
5248 /* Import export css */
5249 .spf-field.spf-field-button_set.pcp_export {
5250 margin-top: 0;
5251 padding-top: 0;
5252 }
5253
5254 .spf-field-button_set.pcp_export .spf--button:hover,
5255 .spf-field.spf-field-custom_import.pcp_import button:hover {
5256 background: #135e96;
5257 border-color: #135e96;
5258 color: #fff;
5259 }
5260
5261 .spf-field.spf-field-custom_import.pcp_import button,
5262 .spf-field-button_set.pcp_export .spf--button {
5263 background: #2271b1;
5264 border-color: #2271b1;
5265 color: #fff;
5266 text-decoration: none;
5267 text-shadow: none;
5268 display: inline-block;
5269 text-decoration: none;
5270 font-size: 13px;
5271 line-height: 2.15384615;
5272 min-height: 30px;
5273 margin: 0;
5274 padding: 0 10px;
5275 cursor: pointer;
5276 border-width: 1px;
5277 border-style: solid;
5278 -webkit-appearance: none;
5279 border-radius: 3px;
5280 white-space: nowrap;
5281 box-sizing: border-box;
5282 }
5283
5284 .sp-lcp-options .spf-field-select .spf-fieldset {
5285 position: relative;
5286 }
5287
5288 .spf-field.spf-field-custom_import.pcp_import .spf-fieldset {
5289 position: relative;
5290 }
5291
5292 .spf-field.spf-field-custom_import.pcp_import p {
5293 padding-bottom: 0;
5294 margin-bottom: 1px;
5295 }
5296
5297 .spf-field.spf-field-custom_import.pcp_import button {
5298 margin-top: 10px;
5299 padding-bottom: 0px;
5300 }
5301
5302 .spf-field.spf-field-custom_import.pcp_import .spf-help {
5303 cursor: help;
5304 position: absolute;
5305 top: 80%;
5306 transform: translateY(-50%);
5307 padding: 5px;
5308 font-size: 14px;
5309 color: #aaa;
5310 width: 15px;
5311 left: 64px;
5312 }
5313
5314 .spf-field.spf-field-select.pcp_post_ids .chosen-container .chosen-drop {
5315 max-width: 400px;
5316 }
5317
5318 .spf-field.spf-field-select.pcp_post_ids .chosen-container {
5319 max-width: 400px;
5320 }
5321
5322 .spf-field.spf-field-select.pcp_post_ids {
5323 padding-top: 0;
5324 }
5325
5326
5327 .sp-pc-settings .spf-header-inner h1.export-import img {
5328 float: left;
5329 margin-right: 8px;
5330 height: 1.5em;
5331 }
5332
5333
5334 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(1) a {
5335 background-image: url(../img/export-icon.svg);
5336 }
5337
5338 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(2) a {
5339 background-image: url(../img/import.svg);
5340 }
5341
5342 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(1) a.spf-section-active {
5343 background-image: url(../img/file-export-icon1.svg);
5344 }
5345
5346 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(2) a.spf-section-active {
5347 background-image: url(../img/file-import-icon1.svg);
5348 }
5349
5350 .sp-pc-settings.pcp_tools .spf-nav-options ul li a {
5351 padding: 15px 30px;
5352 background-size: 14px;
5353 background-position: 10px center;
5354 background-repeat: no-repeat;
5355 }
5356
5357 .pcp_custom_meta_date_format input {
5358 width: 200px;
5359 }
5360
5361 /* Replace layout */
5362 .sp_post_carousel_page_pcp_replace_layout .spf-field-fieldset.spsp_no_border .spf-fieldset-content {
5363 border: 1px solid #ccd0d4;
5364 background-color: #fff;
5365 box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
5366 padding: 20px 20px 2px 15px;
5367 width: 500px;
5368 border-radius: 5px;
5369 margin-left: 25%;
5370 }
5371
5372 .sp_post_carousel_page_pcp_replace_layout .spf-field-fieldset.spsp_no_border .spf-field .spf-title {
5373 position: relative;
5374 width: auto;
5375 float: none;
5376 margin-bottom: 10px;
5377 }
5378
5379 .sp_post_carousel_page_pcp_replace_layout .spf-field-fieldset.spsp_no_border .spf-field .spf-fieldset {
5380 margin-left: 0;
5381 }
5382
5383 .sp_post_carousel_page_pcp_replace_layout .spf.spf-options.spf-theme-light.sp-pc-settings.pcp_replace_layout .spf-container {
5384 opacity: .4;
5385 pointer-events: none;
5386 }
5387
5388 .sp_post_carousel_page_pcp_replace_layout .pcp_replace_layout_notice p {
5389 background-color: #fff;
5390 color: #444444;
5391 font-size: 15px;
5392 padding: 15px 15px;
5393 border: 1px solid #cecece;
5394 }
5395
5396 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(1) a,
5397 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(2) a,
5398 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(3) a {
5399 padding: 15px 30px;
5400 background-size: 14px;
5401 background-position: 10px center;
5402 background-repeat: no-repeat;
5403 }
5404
5405 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(1) a {
5406 background-image: url(../img/standard-h.svg);
5407 }
5408
5409 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(2) a {
5410 background-image: url(../img/taxonomy-h.svg);
5411 }
5412
5413 .sp_post_carousel_page_pcp_replace_layout .sp-pc-settings.spf-theme-light .spf-nav ul li:nth-child(3) a {
5414 background-image: url(../img/post.svg);
5415 }
5416
5417 /* Image custom size & retina display disable option */
5418 /* .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-switcher:nth-child(4){
5419 pointer-events: none;
5420 user-select: none;
5421 }
5422 .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-switcher:nth-child(4) .spf--switcher{
5423 background-color: #ed9596;
5424 } */
5425 /* .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-switcher:nth-child(4) > .spf-title h4, */
5426 .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-dimensions_advanced>.spf-title h4 {
5427 color: #777;
5428 }
5429
5430 .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-dimensions_advanced .spf--label {
5431 border: 1px solid #dcdcde;
5432 border-right: none;
5433 color: #dcdcde;
5434 }
5435
5436 .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-dimensions_advanced .spf--label .fa-arrows-h:before,
5437 .post_content_sorter.spf-field.spf-field-sortable .spf-accordion-content .spf-field-dimensions_advanced .spf--label .fa-arrows-v:before {
5438 color: #dcdcde;
5439 }
5440
5441 .pcp-display-tabs .spf-tabbed-nav i,
5442 .pcp-carousel-tabs .spf-tabbed-nav i,
5443 #sp_pcp_view_options .spf-theme-light .spf-nav ul li i,
5444 .sp-pcp-options.spf-theme-light .spf-nav ul li i {
5445 margin-right: 5px;
5446 }
5447
5448 .spf-field-accordion.filter_by_style.pcp-opened-accordion {
5449 padding-bottom: 5px;
5450 margin-left: 25%;
5451 padding-left: 15px;
5452 }
5453
5454 .wp-core-ui .spf-cloneable-add.button-primary {
5455 background: #1A74E4;
5456 border-color: #1A74E4;
5457 padding: 4px 16px;
5458 text-transform: uppercase;
5459 line-height: 2.2;
5460 min-height: 38px;
5461 }
5462
5463 .spf-field-group .ui-accordion .spf-cloneable-item {
5464 display: block;
5465 padding-bottom: 10px;
5466 }
5467
5468 .spf-field-subheading.pcp_padding_for_filter {
5469 background: none;
5470 padding: 8px;
5471 }
5472
5473 .spf-field-group.pcp_custom_group_design .spf-cloneable-header-icon {
5474 color: #476177;
5475 background-image: none;
5476 position: static;
5477 background-image: url(../img/drag-and-drop1.svg);
5478 background-repeat: no-repeat;
5479 background-position: left;
5480 padding-left: 30px;
5481 background-size: 24px;
5482 }
5483
5484 .spf-field-group.pcp_custom_group_design .spf-cloneable-title.ui-accordion-header-active:after {
5485 -moz-transform: rotate(180deg);
5486 transform: rotate(180deg);
5487 }
5488
5489 .spf-field-group.pcp_custom_group_design .spf-cloneable-title:after {
5490 content: "\f107";
5491 float: right;
5492 transition: all 0.5s;
5493 font-family: 'FontAwesome';
5494 text-align: center;
5495 font-size: 18px;
5496 margin-top: -2px;
5497 }
5498
5499 .spf-field-group.advertisements_group i.spf-cloneable-sort,
5500 .spf-field-group.pcp_custom_group_design i.spf-cloneable-sort {
5501 display: none;
5502 }
5503
5504 .post-type-sp_post_carousel .postbox-header {
5505 pointer-events: none;
5506 }
5507
5508 .pcp-layout-preset .spf--image:hover a.sps-live-demo-icon,
5509 .pcp-layout-preset .spf--image.spf--active a.sps-live-demo-icon {
5510 opacity: 1;
5511 pointer-events: painted;
5512 transition: all 0.2s linear;
5513 }
5514
5515 .pcp-layout-preset .spf--image a.sps-live-demo-icon {
5516 opacity: 0;
5517 pointer-events: none;
5518 position: absolute;
5519 }
5520
5521 .pcp-layout-preset .sp-carousel-type a.sps-live-demo-icon {
5522 margin-left: 6px;
5523 }
5524
5525 .pcp-layout-preset .spf--image:nth-child(9) .sp-carousel-type a.sps-live-demo-icon {
5526 margin-left: -1px;
5527 }
5528
5529 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item {
5530 display: table;
5531 width: 100%;
5532 margin-bottom: 10px;
5533 border: 1px solid #AAD2F3;
5534 border-radius: 3px;
5535 }
5536
5537 .post_content_sorter>.spf-title {
5538 display: none;
5539 }
5540
5541 .post_content_sorter>.spf-fieldset {
5542 margin-left: 0;
5543 }
5544
5545 .post_content_sorter.spf-field-sortable .spf--sortable-content>.spf-field {
5546 padding: 0;
5547 }
5548
5549 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-item {
5550 margin-bottom: 0;
5551 }
5552
5553 .post_content_sorter .spf-field-accordion .spf-accordion-title.expanded {
5554 border-radius: 2px 2px 0 0;
5555 }
5556
5557 .post_content_sorter .spf-field-accordion .spf-accordion-title {
5558 padding: 18px 18px 18px 40px;
5559 /* border-radius: 2px; */
5560 overflow: hidden;
5561 }
5562
5563 .post_content_sorter .spf--sortable-helper .spf-accordion-title::before {
5564 background-image: url(../img/drag-and-drop.svg);
5565 background-repeat: no-repeat;
5566 background-position: left;
5567 content: '';
5568 position: absolute;
5569 left: 10px;
5570 right: auto;
5571 top: 0;
5572 bottom: 0;
5573 width: 50px;
5574 }
5575
5576 .post_content_sorter .spf--sortable-helper .pcp-pro-only .spf-accordion-title::before {
5577 background-image: url(../img/drag-and-drop1.svg);
5578 }
5579
5580 .post_content_sorter .clear,
5581 .post_content_sorter .spf-field-accordion .spf-accordion-icon {
5582 display: none;
5583 }
5584
5585 .post_content_sorter .spf-accordion-title:after,
5586 .pcp-opened-accordion .spf-accordion-title:after {
5587 content: "\f107";
5588 float: right;
5589 transition: all 0.5s;
5590 font-family: 'FontAwesome';
5591 text-align: center;
5592 font-size: 18px;
5593 /* margin-top: -2px; */
5594 }
5595
5596 /* .post_content_sorter .pcp-pro-only .spf-accordion-title:after {
5597 padding-right: 20px;
5598 } */
5599
5600 .post_content_sorter .spf-accordion-title.expanded:after,
5601 .pcp-opened-accordion .spf-accordion-title.expanded:after {
5602 -moz-transform: rotate(180deg);
5603 transform: rotate(180deg);
5604 }
5605
5606 .pcp_post_meta .spf-field.spf-field-group.pcp_custom_group_design {
5607 max-width: 100%;
5608 width: calc(75% - 25px);
5609 float: right;
5610 z-index: 10;
5611 }
5612
5613 .spf-field-group .spf-cloneable-wrapper {
5614 position: relative;
5615 }
5616
5617 .post_content_sorter_sortable .spf--sortable-helper {
5618 background-image: url(../img/drag-and-drop1.svg);
5619 background-repeat: no-repeat;
5620 background-position: left;
5621 padding: 0 0 0 30px;
5622 background-color: transparent;
5623 border-left: none;
5624 }
5625
5626 .post_content_sorter_sortable .spf--sortable .spf--sortable-item {
5627 padding: 0 0 0 15px;
5628 border-radius: 3px;
5629 }
5630
5631 /* Style for the option of the navigation and pagination */
5632
5633 .spf-field.spf-field-fieldset.navigation-and-pagination-style {
5634 padding: 0 0px 20px 0px;
5635 }
5636
5637 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content {
5638 display: flex;
5639 flex-wrap: wrap;
5640 gap: 0;
5641 box-sizing: border-box;
5642 width: 100%;
5643 padding-left: 20px;
5644 justify-content: flex-start;
5645 float: right;
5646 width: calc(80% - 25px);
5647 border: none;
5648 box-shadow: none;
5649 }
5650
5651 /* .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content {
5652 width: calc(75% - 12px);
5653 } */
5654
5655 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_navigation,
5656 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_pagination {
5657 display: flex;
5658 justify-self: center;
5659 align-items: center;
5660 max-width: fit-content;
5661 padding: 20px 0 0;
5662 flex: 1;
5663 position: static;
5664 }
5665
5666 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.spf-field .spf-title {
5667 width: 100%;
5668 max-width: 49%;
5669 }
5670
5671 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.pcp_navigation .spf-title,
5672 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.pcp_pagination .spf-title {
5673 position: absolute;
5674 left: 20px;
5675 }
5676
5677 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_pagination,
5678 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_navigation {
5679 padding-right: 10px;
5680 }
5681
5682 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_hide_on_mobile {
5683 display: flex;
5684 width: 220px;
5685 margin-bottom: -20px;
5686 align-items: center;
5687 justify-content: center;
5688 padding-left: 0;
5689 }
5690
5691 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_hide_on_mobile .spf-fieldset {
5692 margin-left: 0;
5693 }
5694
5695 /**
5696 * 12. Responsive of Click Action Type options.
5697 */
5698 @media only screen and (max-width: 1200px) {
5699
5700 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_navigation,
5701 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_pagination,
5702 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_hide_on_mobile {
5703 display: block;
5704 }
5705
5706 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_hide_on_mobile {
5707 padding: 0;
5708 }
5709
5710 .spf-field.spf-field-fieldset.navigation-and-pagination-style .pcp_hide_on_mobile {
5711 padding-top: 20px;
5712 }
5713
5714 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content {
5715 float: none;
5716 margin-left: 0;
5717 }
5718
5719 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.spf-field .spf-title {
5720 left: 0;
5721 position: unset;
5722 }
5723 }
5724
5725 /* Responsiveness for the click action type's title */
5726 @media (min-width: 1200px) and (max-width: 1375px) {
5727
5728 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.spf-field .spf-title {
5729 max-width: 25%;
5730 }
5731 }
5732
5733 /* Responsiveness for the carousel navigation option's title */
5734 @media (min-width: 1200px) and (max-width: 1500px) {
5735 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.spf-field.pcp_navigation .spf-title {
5736 max-width: 25%;
5737 }
5738 }
5739
5740 /* Note text style of Image mode = Custom Color */
5741 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.hidden,
5742 .spf-field.spf-field-fieldset.navigation-and-pagination-style .spf-fieldset-content>.spf-depend-hidden.spf-depend-on {
5743 display: none;
5744 }
5745
5746 .spf-field-select.pcp_carousel_nav_position img.icon_preview {
5747 margin-top: 20px;
5748 display: block;
5749 }
5750
5751 .pcp-pro-notice {
5752 margin-top: 6px;
5753 font-weight: 400;
5754 color: #999;
5755 font-style: italic;
5756 }
5757
5758 .pcp-pro-notice a {
5759 font-weight: 600;
5760 }
5761
5762 .spf-field-switcher.pro_only_field .spf--ball::after {
5763 content: "PRO";
5764 position: relative;
5765 text-align: center;
5766 width: 24px;
5767 float: right;
5768 font-weight: 600;
5769 font-size: 8px;
5770 color: #5E6E7D;
5771 opacity: 1;
5772 line-height: 18px;
5773 }
5774
5775 .pro_only_field .spf--switcher {
5776 background-color: #99AAB2;
5777 pointer-events: none;
5778 /* color: rgb(135, 150, 161); */
5779 }
5780
5781 .only_pro_field .spf-fieldset,
5782 .pcp_content_length_type .spf-fieldset input,
5783 .pcp_post_meta .spf-field-radio .spf-fieldset li:not(:nth-child(1),:nth-child(2)),
5784 .pro-overlay-options-select select option:nth-child(1),
5785 .pcp_title_length input,
5786 .ajax-live-filters .spf-field:not(.taxonomy-ajax-filter-notice) {
5787 opacity: .7;
5788 pointer-events: none;
5789 }
5790
5791 .taxonomy-ajax-filter-notice {
5792 /* color: #000; */
5793 font-size: 14px;
5794 padding-top: 0px !important;
5795 }
5796
5797 .ajax-live-filters>.spf-title {
5798 display: none;
5799 }
5800
5801 .ajax-live-filters>.spf-fieldset,
5802 .spf-field.spf-field-fieldset.pcp_taxonomy_select_data .spf-fieldset {
5803 margin-left: 0;
5804 z-index: 10;
5805 }
5806
5807 .ajax-live-filters .spf-fieldset-content,
5808 .pcp_taxonomy_select_data .spf-field,
5809 .pcp_taxonomy_select_data .spf-fieldset-content {
5810 border: none;
5811 box-shadow: none;
5812 }
5813
5814 /* .spf-field-fieldset:not(.pcp_ajax_keyword) .spf-fieldset-content>.spf-field {
5815 padding: 15px 0;
5816 } */
5817 .spf-field-layout_preset.pcp-layout-preset {
5818 padding-bottom: 10px;
5819 }
5820
5821 .spf-field-layout_preset.padding_0 {
5822 padding-top: 0;
5823 }
5824
5825 .pcp_post_meta .spf-field .spf-title {
5826 width: 25%;
5827 }
5828
5829 .spf-field.pcp_set_adv {
5830 padding: 0 5px !important;
5831 }
5832
5833 .pro_preview-image img {
5834 width: 100%;
5835 }
5836
5837 .pro_preview-image {
5838 opacity: .7;
5839 pointer-events: none;
5840 }
5841
5842 .pcp_title_length .spf--inputs {
5843 float: none;
5844 }
5845
5846 .pcp_popup_settings_field {
5847 padding: 0 15px;
5848 }
5849
5850 /* Update to pro promotional notice */
5851 .spf-field-shortcode:has(.pcp-pro-notice-wrapper) {
5852 border: 1px solid rgba(187, 153, 238, 1);
5853 border-radius: 4px;
5854 padding: 16px !important;
5855 background-image: linear-gradient(221.41deg, rgba(239, 230, 251, 1) 0.73%, rgba(239, 230, 251, 0.1) 99.41%);
5856 }
5857
5858 .spf-field-shortcode:has(.pcp-pro-notice-wrapper)::before,
5859 .spf-field-shortcode:has(.pcp-pro-notice-wrapper)::after {
5860 display: none;
5861 }
5862
5863 #sp_pcp_promotional_notice:has(.pcp-pro-notice-wrapper) {
5864 all: unset;
5865 }
5866
5867 #sp_pcp_promotional_notice .postbox-header {
5868 display: none;
5869 }
5870
5871 #sp_pcp_display_shortcode .postbox-header {
5872 border-top-left-radius: 3px;
5873 border-top-right-radius: 3px;
5874 }
5875
5876 div:is(#sp_pcp_promotional_notice, #sp_pcp_page_builder_notice, #sp_pcp_display_shortcode) .spf-content,
5877 div:is(#sp_pcp_promotional_notice, #sp_pcp_page_builder_notice, #sp_pcp_display_shortcode).postbox {
5878 border-radius: 3px;
5879 }
5880
5881 .pcp-pro-notice-heading {
5882 margin: 0;
5883 font-weight: 600;
5884 font-size: 14px;
5885 line-height: 20px;
5886 color: #2F2F2F;
5887 /* margin-bottom: 16px; */
5888 }
5889
5890 .sp_wpcp_shortcode-area p {
5891 margin-top: 6px;
5892 }
5893
5894 .pcp-pro-notice-heading span {
5895 color: #641DD7;
5896 }
5897
5898 .pcp-pro-notice-features {
5899 list-style: none;
5900 margin: 0;
5901 padding: 0;
5902 display: flex;
5903 flex-direction: column;
5904 gap: 8px;
5905 }
5906
5907 .pcp-pro-notice-features li {
5908 display: flex;
5909 align-items: center;
5910 gap: 5px;
5911 margin: 0;
5912 font-weight: 500;
5913 font-size: 13px;
5914 line-height: 20px;
5915 color: #2F2F2F;
5916 }
5917
5918 .pcp-pro-feature__icon {
5919 /* flex: 0 0 24px; */
5920 width: 14px;
5921 height: 14px;
5922 border-radius: 4px;
5923 display: inline-flex;
5924 align-items: center;
5925 justify-content: center;
5926 }
5927
5928 .pcp-pro-feature__label,
5929 .pcp-pro-feature__link {
5930 flex: 1 1 auto;
5931 min-width: 0;
5932 }
5933
5934 .pcp-pro-feature__link {
5935 display: inline-flex;
5936 align-items: center;
5937 gap: 4px;
5938 color: #2F2F2F;
5939 text-decoration: none;
5940 transition: all 0.3s ease
5941 }
5942
5943 .pcp-pro-feature__link:hover,
5944 .pcp-pro-feature__link:focus {
5945 color: #2F2F2F;
5946 box-shadow: none;
5947 }
5948
5949 .pcp-pro-feature__link:hover {
5950 text-decoration: underline;
5951 color: #641DD7;
5952 }
5953
5954 .pcp-pro-feature__arrow {
5955 width: 10px;
5956 height: 10px;
5957 display: none;
5958 }
5959
5960 .pcp-pro-notice-wrapper .pcp-pro-notice-button {
5961 margin: 0;
5962 display: flex;
5963 align-items: center;
5964 justify-content: center;
5965 }
5966
5967 .pcp-pro-notice-wrapper .pcp-pro-notice-button a {
5968 width: 100%;
5969 display: inline-flex;
5970 align-items: center;
5971 justify-content: center;
5972 gap: 8px;
5973 padding: 14px 12px;
5974 background: #159E2E;
5975 margin-top: 20px;
5976 color: #ffffff;
5977 font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5978 font-weight: 700;
5979 font-size: 14px;
5980 line-height: 20px;
5981 text-decoration: none;
5982 border-radius: 4px;
5983 transition: background 0.2s ease;
5984 }
5985
5986 .pcp-pro-notice-wrapper .pcp-pro-notice-button .sp-go-pro-icon {
5987 height: 16px;
5988 margin: 0;
5989 }
5990
5991 .pcp-pro-notice-wrapper .pcp-pro-notice-button a:hover,
5992 .pcp-pro-notice-wrapper .pcp-pro-notice-button a:focus {
5993 background: #117F25;
5994 color: #ffffff;
5995 box-shadow: none;
5996 outline: none;
5997 }
5998
5999 /* Legacy support */
6000 .pcp-notice-wrapper {
6001 border-width: 1px;
6002 border-radius: 5px;
6003 padding-top: 8px;
6004 padding-bottom: 10px;
6005 text-align: left;
6006 }
6007
6008 .pcp-notice-heading {
6009 font-weight: 600;
6010 font-size: 16px;
6011 line-height: 20px;
6012 color: rgba(0, 0, 0, 1);
6013 }
6014
6015 .pcp-notice-heading span {
6016 color: #0C6E63;
6017 }
6018
6019 .pcp-notice-desc {
6020 font-weight: 400;
6021 font-size: 13px;
6022 line-height: 20px;
6023 color: rgba(101, 105, 118, 1);
6024 margin-bottom: 20px;
6025 margin-top: 10px;
6026 }
6027
6028 .pcp-notice-wrapper ul li {
6029 font-weight: 500;
6030 font-size: 13px;
6031 line-height: 20px;
6032 color: rgba(0, 0, 0, 1);
6033 display: inline-flex;
6034 gap: 10px;
6035 }
6036
6037 .pcp-notice-wrapper .pcp-notice-button {
6038 position: relative;
6039 font-size: 16px;
6040 border-radius: 5px;
6041 color: #ffffff;
6042 border: 1px solid transparent;
6043 margin-top: 10px;
6044 display: flex;
6045 align-items: center;
6046 justify-content: center;
6047 cursor: pointer;
6048 overflow: hidden;
6049 z-index: 0;
6050 transition: border-color 0.5s ease;
6051 }
6052
6053 .pcp-notice-wrapper .pcp-notice-button::before {
6054 content: '';
6055 position: absolute;
6056 inset: 0;
6057 background: linear-gradient(90deg, #B53361 0%, #E2572C 100%);
6058 z-index: -1;
6059 transition: opacity 0.6s ease;
6060 opacity: 1;
6061 }
6062
6063 .pcp-notice-wrapper .pcp-notice-button::after {
6064 content: '';
6065 position: absolute;
6066 inset: 0;
6067 background: linear-gradient(90deg, #E2572C 0%, #B53361 100%);
6068 z-index: -1;
6069 opacity: 0;
6070 transition: opacity 0.6s ease;
6071 }
6072
6073 .pcp-notice-wrapper .pcp-notice-button:hover::before,
6074 .pcp-notice-wrapper .pcp-notice-button:hover::after {
6075 opacity: 1;
6076 }
6077
6078 .pcp-notice-wrapper .pcp-notice-button a {
6079 color: #ffffff;
6080 text-decoration: none;
6081 padding: 14px 30px 14px 30px;
6082 position: relative;
6083 z-index: 1;
6084 }
6085
6086 .pcp-notice-wrapper .pcp-notice-button a:focus {
6087 box-shadow: none;
6088 outline: none;
6089 }
6090
6091 .pcp-notice-button i {
6092 font-size: 16px;
6093 }
6094
6095 .pcp-notice-wrapper ul li i {
6096 color: rgba(74, 184, 102, 1);
6097 font-size: 11px;
6098 }
6099
6100 .pcp-admin-header .heading-wrapper {
6101 display: flex;
6102 min-width: 300px;
6103 gap: 6px;
6104 }
6105
6106 .pcp-admin-header .sp-pcp-version {
6107 color: #fff;
6108 border: 1px solid #fff;
6109 font-size: 11px;
6110 padding: 4px 9px 4px 9px;
6111 border-radius: 17px;
6112 line-height: 14px;
6113 height: 14px;
6114 font-weight: 600;
6115 margin-top: 2px;
6116 }
6117
6118 .spf-field-tabbed.pcp-display-tabs .spf-tabbed-nav a:last-child {
6119 opacity: .5;
6120 pointer-events: none;
6121 }
6122
6123 .spf-field-tabbed.pcp-display-tabs .spf-tabbed-nav a:last-child:after {
6124 content: "PRO";
6125 color: #585B6F;
6126 background-color: #cbd6df;
6127 padding: 2px 4px;
6128 font-size: 9px;
6129 border-radius: 2px;
6130 height: 11px;
6131 margin-top: 8px;
6132 font-weight: 600;
6133 margin-left: 8px;
6134 }
6135
6136 /**
6137 * 11. Responsive
6138 */
6139
6140 @media only screen and (max-width: 1200px) {
6141 .spf-metabox .spf-field .spf-title {
6142 float: none;
6143 width: 100%;
6144 margin-bottom: 10px;
6145 }
6146
6147 .spf-metabox .spf-field .spf-fieldset {
6148 margin-left: 0;
6149 }
6150 }
6151
6152 @media only screen and (max-width: 782px) {
6153 /* .spf-header-inner {
6154 text-align: center;
6155 }
6156
6157 .spf-header-inner h1 {
6158 width: 100%;
6159 margin-bottom: 10px;
6160 } */
6161
6162 /* .spf-search,
6163 .spf-header-right,
6164 .spf-header-left {
6165 width: 100%;
6166 } */
6167
6168 .spf-search {
6169 text-align: center;
6170 margin-bottom: 15px;
6171 }
6172
6173 .spf-footer {
6174 text-align: center;
6175 }
6176
6177 .spf-buttons {
6178 float: none;
6179 }
6180
6181 .spf-copyright {
6182 float: none;
6183 margin-top: 10px;
6184 }
6185
6186 .sp-pcp-options .spf-nav,
6187 .spf-nav,
6188 .spf-expand-all,
6189 .spf-reset-section,
6190 .spf-nav-background {
6191 display: none !important;
6192 }
6193
6194 .sp-pcp-options .spf-content,
6195 .sp-pc-settings .spf-content {
6196 margin-left: 0;
6197 }
6198
6199 .spf-field .spf-fieldset {
6200 margin-left: 40%;
6201 }
6202
6203 .spf-field-radio ul li {
6204 margin-top: 4px;
6205 }
6206
6207 .spf-modal-inner {
6208 width: 350px;
6209 height: 400px;
6210 }
6211
6212 .spf-modal-content {
6213 height: 237px;
6214 }
6215
6216 .spf-icon-dialog .spf-modal-inner {
6217 width: 305px;
6218 height: 380px;
6219 }
6220
6221 .spf-icon-dialog .spf-modal-content {
6222 height: 267px;
6223 }
6224
6225 .spf-modal-icon .spf-modal-inner {
6226 width: 330px;
6227 height: 385px;
6228 }
6229
6230 .spf-modal-icon .spf-modal-content {
6231 height: 252px;
6232 }
6233
6234 .spf-profile>.spf-field>.spf-title {
6235 float: none;
6236 width: 100%;
6237 margin-bottom: 10px;
6238 }
6239
6240 .spf-profile>.spf-field>.spf-fieldset {
6241 margin-left: 0;
6242 }
6243
6244 .spf-section-title,
6245 .sp-pcp-options .spf-section,
6246 .spf-section {
6247 display: block !important;
6248 }
6249
6250 .spf-field .spf-title {
6251 width: 40%;
6252 }
6253
6254 .spf-profile>.spf-field>.spf-title {
6255 width: 40%;
6256 }
6257
6258 .sp_post_carousel_page_pcp_replace_layout .spf-field-fieldset.spsp_no_border .spf-fieldset-content {
6259 max-width: 500px;
6260 width: 100%;
6261 margin-left: 0;
6262 padding: 0;
6263 }
6264 }
6265
6266 @media only screen and (max-width: 480px) {
6267
6268 .spf-field .spf-title {
6269 float: none;
6270 width: 100%;
6271 margin-bottom: 10px;
6272 }
6273
6274 .spf-profile>.spf-field>.spf-title {
6275 float: none;
6276 width: 100%;
6277 margin-bottom: 10px;
6278 }
6279
6280 .spf-field .spf-fieldset {
6281 margin-left: 0;
6282 }
6283 }
6284
6285 .spf.spf-options .sp-smart-post-upgrade-to-pro-button {
6286 box-sizing: border-box;
6287 background-color: #12a10d;
6288 border: none;
6289 font-size: 16px;
6290 font-weight: 500;
6291 z-index: 99;
6292 width: 180px;
6293 height: 50px;
6294 border-radius: 6px;
6295 transition: .2s ease-in-out;
6296 position: absolute;
6297 top: 50%;
6298 left: 0;
6299 right: 0;
6300 margin: 0 auto;
6301 transform: translateY(-50%);
6302 display: flex;
6303 align-items: center;
6304 justify-content: center;
6305 cursor: pointer;
6306 }
6307
6308 .spf.spf-options .sp-smart-post-upgrade-to-pro-button a,
6309 .spf.spf-options .sp-smart-post-upgrade-to-pro-button a:focus {
6310 color: #fff;
6311 outline: none;
6312 box-shadow: none;
6313 padding: 16px 30px;
6314 text-decoration: none;
6315 }
6316
6317 .spf.spf-options .sp-smart-post-upgrade-to-pro-button:hover {
6318 background-color: #008f00;
6319 }
6320
6321 .sp_post_carousel_page_pcp_settings a.sp-pcp-classic-settings-page-link {
6322 display: inline-block;
6323 text-align: right;
6324 position: relative;
6325 margin-top: 24px;
6326 color: #1a74e4;
6327 right: 38px;
6328 width: 100%;
6329 }
6330