PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.2.10
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.2.10
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 2.2.10, at admin/views/sp-framework/assets/css/spf.css

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