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

5,441 lines 107.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 *
3 * ---------------------------------------------------------
4 * 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 .spf-field-layout_preset.pcp-layout-preset .spf--image img {
1941 width: 110px;
1942 }
1943 .spf-field-layout_preset.pcp-content-orientation .spf--image img {
1944 width: 70px;
1945 }
1946
1947 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset span {
1948 font-size: 13px;
1949 }
1950
1951 .spf-field-layout_preset span {
1952 margin-top: 5px;
1953 font-weight: 500;
1954 text-align: center;
1955 margin-right: 10px;
1956 display: block;
1957 font-size: 12px;
1958 }
1959
1960 .spf-field-layout_preset .spf--image.spf--active img {
1961 outline-color: #e1624b;
1962 }
1963
1964 /**
1965 * 03. 17. Field: link_color
1966 */
1967
1968 .spf-field-link_color .spf--left {
1969 float: left;
1970 margin-right: 10px;
1971 margin-bottom: 5px;
1972 }
1973
1974 .spf-field-link_color .spf--title {
1975 color: #777;
1976 margin-bottom: 5px;
1977 }
1978
1979 /**
1980 * 03. 18. Field: media
1981 */
1982
1983 .spf-field-media .spf--placeholder {
1984 display: flex;
1985 }
1986
1987 .spf-field-media .spf--placeholder input {
1988 width: 100%;
1989 margin: 0;
1990 }
1991
1992 .spf-field-media .button {
1993 margin-left: 5px;
1994 }
1995
1996 .spf-field-media .hidden+.button {
1997 margin-left: 0;
1998 }
1999
2000 .spf-field-media .spf--preview {
2001 position: relative;
2002 }
2003
2004 .spf-field-media .spf--preview .fa-times {
2005 position: absolute;
2006 z-index: 1;
2007 right: 4px;
2008 top: 4px;
2009 font-size: 14px;
2010 width: 22px;
2011 height: 22px;
2012 line-height: 22px;
2013 text-align: center;
2014 text-decoration: none;
2015 color: #fff;
2016 background-color: #dd3333;
2017 opacity: 0.8;
2018 transition: all .2s;
2019 }
2020
2021 .spf-field-media .spf--preview .fa-times:hover {
2022 opacity: 1;
2023 }
2024
2025 .spf-field-media .spf--preview .fa-times:focus {
2026 box-shadow: none;
2027 }
2028
2029 /**
2030 * 03. 19. Field: palette
2031 */
2032
2033 .spf-field-palette .spf--palette {
2034 position: relative;
2035 display: inline-block;
2036 cursor: pointer;
2037 border: 2px solid #ddd;
2038 margin-right: 10px;
2039 margin-bottom: 10px;
2040 user-select: none;
2041 -webkit-user-select: none;
2042 transition: all .2s;
2043 }
2044
2045 .spf-field-palette .spf--palette span {
2046 vertical-align: middle;
2047 display: inline-block;
2048 width: 22px;
2049 height: 60px;
2050 line-height: 60px;
2051 overflow: hidden;
2052 text-indent: -999px;
2053 }
2054
2055 .spf-field-palette .spf--palette:before {
2056 position: absolute;
2057 top: 0;
2058 left: 0;
2059 text-align: center;
2060 font-size: 11px;
2061 font-family: FontAwesome;
2062 content: "\f00c";
2063 width: 15px;
2064 height: 15px;
2065 line-height: 15px;
2066 opacity: 0;
2067 color: #fff;
2068 background-color: #222;
2069 transition: opacity .2s;
2070 }
2071
2072 .spf-field-palette .spf--active {
2073 border-color: #222;
2074 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
2075 }
2076
2077 .spf-field-palette .spf--active:before {
2078 opacity: 1;
2079 }
2080
2081 .spf-field-palette input {
2082 display: none;
2083 }
2084
2085 /**
2086 * 03. 21. Field: select
2087 */
2088 .spf-field-select .spf-fieldset {
2089 min-height: 30px;
2090 }
2091
2092 .spf-field-select .spf-chosen {
2093 display: none;
2094 }
2095
2096 .spf-field-select select {
2097 max-width: 100%;
2098 margin: 0;
2099 }
2100
2101 /**
2102 * 03. 22. Field: slider
2103 */
2104 .spf-field-slider .spf--wrap {
2105 display: flex;
2106 align-items: center;
2107 }
2108
2109 .spf-field-slider .spf--input {
2110 display: flex;
2111 }
2112
2113 .spf-field-slider .spf--unit {
2114 display: flex;
2115 justify-content: center;
2116 flex-direction: column;
2117 user-select: none;
2118 padding: 0 6px;
2119 font-size: 11px;
2120 line-height: 1;
2121 border-radius: 0 4px 4px 0;
2122 color: #555;
2123 border: 1px solid #7e8993;
2124 border-left: 0;
2125 background-color: #f5f5f5;
2126 }
2127
2128 .spf-field-slider input[type=number] {
2129 position: relative;
2130 z-index: 1;
2131 width: 50px;
2132 margin: 0 0 0 15px;
2133 text-align: center;
2134 }
2135
2136 .spf-field-slider .spf--is-unit {
2137 border-top-right-radius: 0;
2138 border-bottom-right-radius: 0;
2139 }
2140
2141 .spf-field-slider .ui-slider {
2142 position: relative;
2143 width: 100%;
2144 height: 3px;
2145 border: none;
2146 background: #ddd;
2147 border-radius: 2px;
2148 }
2149
2150 .spf-field-slider .ui-slider-range {
2151 height: 3px;
2152 border: none;
2153 background: #333;
2154 border-radius: 2px;
2155 }
2156
2157 .spf-field-slider .ui-slider-handle {
2158 position: absolute;
2159 width: 16px;
2160 height: 16px;
2161 top: -7px;
2162 margin-left: -8px;
2163 border: none;
2164 background: #333;
2165 border-radius: 2px;
2166 }
2167
2168 .spf-field-slider .ui-state-active,
2169 .spf-field-slider .ui-slider-handle:hover {
2170 cursor: pointer;
2171 background: #111;
2172 }
2173
2174 /**
2175 * 03. 23. Field: sortable
2176 */
2177
2178 .spf-field-sortable .spf-field-text input {
2179 max-width: 100%;
2180 }
2181
2182 .spf-field-sortable .spf--sortable .spf--sortable-item {
2183 display: table;
2184 width: 100%;
2185 margin-bottom: 5px;
2186 border: 1px solid #eee;
2187 }
2188
2189 .spf-field-sortable .spf--sortable .spf--sortable-item h4 {
2190 font-size: 1em;
2191 }
2192
2193 .spf-field-sortable .spf--sortable-content {
2194 width: 100%;
2195 display: table-cell;
2196 vertical-align: middle;
2197 background-color: #fff;
2198 }
2199
2200 .spf-field-sortable .spf--sortable-content>.spf-field {
2201 padding: 15px;
2202 }
2203
2204 .spf-field-sortable .spf--sortable-helper {
2205 width: 100%;
2206 display: table-cell;
2207 vertical-align: middle;
2208 text-align: center;
2209 font-size: 14px;
2210 line-height: 1em;
2211 border-left: 1px solid #eee;
2212 background-color: #f7f7f7;
2213 }
2214
2215 .spf-field-sortable .spf--sortable-helper .fa {
2216 display: inline-block;
2217 cursor: pointer;
2218 width: 50px;
2219 color: #555;
2220 }
2221
2222 .spf-field-sortable .spf--sortable-helper .fa:hover {
2223 opacity: 0.5;
2224 }
2225
2226 .spf-field-sortable .widget-placeholder {
2227 height: 50px;
2228 margin-bottom: 3px;
2229 border: 1px dashed #f1c40f;
2230 background-color: #fffae4;
2231 }
2232
2233 .spf-field-sortable .ui-sortable-helper {
2234 height: 50px !important;
2235 overflow: hidden !important;
2236 border-color: #ccc !important;
2237 background-color: #eee !important;
2238 opacity: 0.5;
2239 }
2240
2241 .spf-field-sortable .ui-sortable-helper .spf--sortable-helper,
2242 .spf-field-sortable .ui-sortable-helper .spf--sortable-content {
2243 display: none;
2244 }
2245
2246 /**
2247 * 03. 24. Field: sorter
2248 */
2249
2250 .spf-field-sorter .ui-sortable-placeholder {
2251 height: 20px;
2252 border: 1px dashed #f1c40f;
2253 background-color: #fffae4;
2254 }
2255
2256 .spf-field-sorter .spf-modules {
2257 float: left;
2258 width: 50%;
2259 box-sizing: border-box;
2260 }
2261
2262 .spf-field-sorter .spf-modules:first-child {
2263 padding-right: 15px;
2264 }
2265
2266 .spf-field-sorter .spf-modules:last-child {
2267 padding-left: 15px;
2268 }
2269
2270 .spf-field-sorter .spf-disabled,
2271 .spf-field-sorter .spf-enabled {
2272 padding: 5px 15px;
2273 border: 1px dashed #ddd;
2274 background-color: #fff;
2275 }
2276
2277 .spf-field-sorter .spf-disabled li {
2278 -moz-transition: opacity 0.15s;
2279 -o-transition: opacity 0.15s;
2280 -webkit-transition: opacity 0.15s;
2281 transition: opacity 0.15s;
2282 opacity: 0.5;
2283 }
2284
2285 .spf-field-sorter .spf-disabled .ui-sortable-helper {
2286 opacity: 1;
2287 }
2288
2289 .spf-field-sorter .spf-sorter-title {
2290 font-size: 13px;
2291 font-weight: 600;
2292 padding: 10px;
2293 text-align: center;
2294 border: 1px dashed #ddd;
2295 border-bottom: none;
2296 background-color: #f8f8f8;
2297 text-transform: uppercase;
2298 }
2299
2300 .spf-field-sorter ul {
2301 list-style-type: none;
2302 margin: 0;
2303 padding: 0;
2304 min-height: 62px;
2305 }
2306
2307 .spf-field-sorter ul li {
2308 margin: 10px 0;
2309 padding: 10px 15px;
2310 cursor: move;
2311 font-weight: bold;
2312 text-align: center;
2313 border: 1px solid #e5e5e5;
2314 background-color: #fafafa;
2315 -moz-transition: border-color 0.15s;
2316 -o-transition: border-color 0.15s;
2317 -webkit-transition: border-color 0.15s;
2318 transition: border-color 0.15s;
2319 }
2320
2321 .spf-field-sorter ul li:hover {
2322 border-color: #bbb;
2323 }
2324
2325 /**
2326 * 03. 25. Field: spinner
2327 */
2328
2329 .spf-field-spinner .spf--spin {
2330 display: flex;
2331 float: left;
2332 }
2333
2334 .spf-field-spinner .ui-spinner {
2335 display: flex;
2336 }
2337
2338 .spf-field-spinner .ui-button-text-only, .spf-field-spinner .ui-button-icon-only {
2339 display: flex;
2340 flex-direction: column;
2341 justify-content: center;
2342 text-align: center;
2343 min-width: 20px;
2344 padding: 0 4px;
2345 color: #555;
2346 border: 1px solid #7e8993;
2347 background-color: #f5f5f5;
2348 }
2349
2350 .spf-field-spinner .ui-button {
2351 cursor: pointer;
2352 }
2353
2354 .spf-field-spinner .ui-button:hover {
2355 background-color: #e7e7e7;
2356 }
2357
2358 .spf-field-spinner .ui-button:active {
2359 background-color: #ddd;
2360 }
2361
2362 .spf-field-spinner .ui-button:before {
2363 font-family: FontAwesome;
2364 font-size: 14px;
2365 }
2366
2367 .spf-field-spinner .ui-spinner-down {
2368 order: 1;
2369 border-right: 0;
2370 border-radius: 4px 0 0 4px;
2371 }
2372
2373 .spf-field-spinner .ui-spinner-down:before {
2374 content: "\f0d9";
2375 }
2376
2377 .spf-field-spinner .ui-spinner-input {
2378 order: 2;
2379 }
2380
2381 .spf-field-spinner .spf--unit {
2382 order: 3;
2383 border-left: 0;
2384 user-select: none;
2385 }
2386
2387 .spf-field-spinner .ui-spinner-up {
2388 order: 4;
2389 border-left: 0;
2390 border-radius: 0 4px 4px 0;
2391 }
2392
2393 .spf-field-spinner .ui-spinner-up:before {
2394 content: "\f0da";
2395 }
2396
2397 .spf-field-spinner input {
2398 position: relative;
2399 z-index: 1;
2400 width: 60px;
2401 text-align: center;
2402 margin: 0;
2403 padding: 0 8px;
2404 border-radius: 0;
2405 }
2406
2407 .spf-field-spinner .ui-button-text {
2408 display: none !important;
2409 }
2410
2411 /**
2412 * 03. 26. Field: switcher
2413 */
2414
2415 .spf-field-switcher .spf--switcher {
2416 float: left;
2417 cursor: pointer;
2418 position: relative;
2419 width: 60px;
2420 height: 26px;
2421 padding: 0;
2422 margin: 0;
2423 overflow: hidden;
2424 border-radius: 4px;
2425 background-color: #ed6f6f;
2426 user-select: none;
2427 -webkit-user-select: none;
2428 }
2429
2430 .spf-field-switcher .spf--ball {
2431 position: absolute;
2432 top: 4px;
2433 left: 4px;
2434 width: 24px;
2435 height: 18px;
2436 background-color: #fff;
2437 border-radius: 4px;
2438 transition: all .1s;
2439 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
2440 }
2441
2442 .spf-field-switcher .spf--on,
2443 .spf-field-switcher .spf--off {
2444 position: absolute;
2445 top: 0;
2446 left: 0;
2447 right: 0;
2448 font-size: 11px;
2449 line-height: 26px;
2450 font-weight: 500;
2451 font-style: normal;
2452 text-align: center;
2453 text-transform: uppercase;
2454 color: #fff;
2455 padding-right: 28px;
2456 opacity: 0;
2457 transition: all .1s;
2458 }
2459
2460 .spf-field-switcher .spf--off {
2461 padding-right: 0;
2462 padding-left: 28px;
2463 opacity: 1;
2464 }
2465
2466 .spf-field-switcher .spf--active {
2467 background: #4fb845;
2468 }
2469
2470 .spf-field-switcher .spf--active .spf--on {
2471 opacity: 1;
2472 }
2473
2474 .spf-field-switcher .spf--active .spf--off {
2475 opacity: 0;
2476 }
2477
2478 .spf-field-switcher .spf--active .spf--ball {
2479 left: 100%;
2480 margin-left: -28px;
2481 }
2482
2483 .spf-field-switcher .spf--label {
2484 float: left;
2485 margin-top: 4px;
2486 margin-left: 8px;
2487 font-weight: 400;
2488 color: #999;
2489 }
2490
2491 .spf-field-switcher input {
2492 display: none;
2493 }
2494
2495 /**
2496 * 03. 27. Field: tabbed
2497 */
2498
2499 .spf-field-tabbed .spf-tabbed-section {
2500 border: 1px solid #ccd0d4;
2501 background-color: #fff;
2502 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2503 }
2504
2505 .spf-field-tabbed .spf-tabbed-section>.spf-field {
2506 padding: 15px;
2507 }
2508
2509 .spf-field-tabbed .spf-tabbed-nav .spf--icon {
2510 padding-right: 5px;
2511 }
2512
2513 .spf-field-tabbed .spf-tabbed-nav a {
2514 display: inline-block;
2515 padding: 12px 15px;
2516 margin-top: 1px;
2517 margin-right: 5px;
2518 margin-bottom: -1px;
2519 position: relative;
2520 text-decoration: none;
2521 color: #444;
2522 font-weight: 600;
2523 border: 1px solid #ccd0d4;
2524 background-color: #f3f3f3;
2525 transition: all .2s;
2526 }
2527
2528 .spf-field-tabbed .spf-tabbed-nav a:hover {
2529 background-color: #f9f9f9;
2530 }
2531
2532 .spf-field-tabbed .spf-tabbed-nav a.spf-tabbed-active {
2533 background-color: #fff;
2534 border-bottom-color: #fff;
2535 }
2536
2537 .spf-field-tabbed .spf-tabbed-nav a:focus {
2538 outline: none;
2539 -moz-box-shadow: none;
2540 -webkit-box-shadow: none;
2541 box-shadow: none;
2542 }
2543
2544 /**
2545 * 03. 28. Field: text
2546 */
2547
2548 .spf-field-text input {
2549 width: 50%;
2550 max-width: 100%;
2551 margin: 0;
2552 }
2553
2554 /**
2555 * 03. 29. Field: textarea
2556 */
2557
2558 .spf-field-textarea textarea {
2559 width: 100%;
2560 max-width: 100%;
2561 min-height: 125px;
2562 }
2563
2564 .spf-field-textarea .spf-shortcode-button {
2565 margin-bottom: 10px;
2566 margin-right: 5px;
2567 }
2568
2569 /**
2570 * 03. 30. Field: typography
2571 */
2572
2573 .spf-field-typography textarea,
2574 .spf-field-typography select {
2575 min-width: 100%;
2576 margin: 0;
2577 }
2578
2579 .spf-field-typography .spf--title {
2580 color: #777;
2581 margin: 0 0 2px 0;
2582 font-size: 12px;
2583 }
2584
2585 .spf-field-typography .spf--title small {
2586 vertical-align: top;
2587 }
2588
2589 .spf-field-typography .spf--blocks {
2590 display: flex;
2591 flex-wrap: wrap;
2592 }
2593 .spf-field-typography .spf--blocks.spf--blocks-color {
2594 display: inline-flex;
2595 }
2596
2597 .spf-field-typography .spf--block {
2598 flex: 1;
2599 padding-right: 6px;
2600 padding-bottom: 6px;
2601 }
2602
2603 .spf-field-typography .chosen-container {
2604 min-width: 170px;
2605 }
2606 .spf-field-typography .spf--input {
2607 margin: 0;
2608 min-width: 100%;
2609 max-width: 130px;
2610 }
2611
2612 .spf-field-typography .spf--input-wrap {
2613 position: relative;
2614 }
2615
2616 .spf-field-typography .spf--unit {
2617 position: absolute;
2618 z-index: 1;
2619 right: 4px;
2620 top: 4px;
2621 bottom: 4px;
2622 padding: 2px 6px;
2623 color: #666;
2624 font-size: 11px;
2625 line-height: 1;
2626 border-radius: 2px;
2627 background: #eee;
2628 user-select: none;
2629 display: flex;
2630 justify-content: center;
2631 flex-direction: column;
2632 }
2633
2634 .spf-field-typography .spf--preview {
2635 font-size: 16px;
2636 line-height: 20px;
2637 padding: 20px;
2638 color: #222;
2639 border: 1px solid #eee;
2640 background-color: #fff;
2641 border-radius: 2.5px;
2642 user-select: none;
2643 -webkit-user-select: none;
2644 transition: background-color .2s, border-color .2s;
2645 }
2646
2647 .spf-field-typography .spf--block-preview {
2648 cursor: pointer;
2649 position: relative;
2650 overflow: hidden;
2651 margin-top: 10px;
2652 max-width: 100%;
2653 }
2654
2655 .spf-field-typography .spf--black-background {
2656 border-color: #000;
2657 background-color: #000;
2658 }
2659
2660 .spf-field-typography .spf--toggle {
2661 position: absolute;
2662 top: 5px;
2663 right: 10px;
2664 color: #999;
2665 }
2666
2667 .spf-field-typography .spf--block-extra-styles {
2668 margin-top: 5px;
2669 }
2670
2671 /**
2672 * 03. 31. Field: upload
2673 */
2674
2675 .spf-field-upload input {
2676 width: 100%;
2677 margin: 0;
2678 }
2679
2680 .spf-field-upload .spf--wrap {
2681 display: flex;
2682 }
2683
2684 .spf-field-upload .button {
2685 margin-left: 5px;
2686 }
2687
2688 /**
2689 * 03. 32. Field: wp_editor
2690 */
2691
2692 .spf-field-wp_editor .spf-wp-editor {
2693 float: left;
2694 width: 100%;
2695 }
2696
2697 .spf-field-wp_editor .mce-toolbar-grp {
2698 border: none;
2699 }
2700
2701 .spf-field-wp_editor .mce-btn.mce-active button,
2702 .spf-field-wp_editor .mce-btn.mce-active:hover button,
2703 .spf-field-wp_editor .mce-btn.mce-active i,
2704 .spf-field-wp_editor .mce-btn.mce-active:hover i {
2705 color: #23282d;
2706 }
2707
2708 .spf-field-wp_editor .wp-media-buttons {
2709 position: relative;
2710 z-index: 2;
2711 }
2712
2713 .spf-field-wp_editor .wp-editor-tabs {
2714 position: relative;
2715 z-index: 1;
2716 }
2717
2718 .spf-field-wp_editor .spf-no-tinymce {
2719 border: 1px solid #e5e5e5;
2720 }
2721
2722 .spf-field-wp_editor .spf-no-quicktags .wp-media-buttons {
2723 float: none;
2724 display: block;
2725 }
2726
2727 .spf-field-wp_editor .spf-no-quicktags .mce-tinymce {
2728 box-shadow: none;
2729 border: 1px solid #e5e5e5;
2730 }
2731
2732 .spf-field-wp_editor textarea {
2733 width: 100%;
2734 max-width: 100%;
2735 margin: 0;
2736 box-shadow: none;
2737 }
2738
2739 /**
2740 * 03. 33. Field: heading
2741 */
2742
2743 .spf-field-heading {
2744 font-size: 1.5em;
2745 line-height: 1.5em;
2746 font-weight: bold;
2747 color: #23282d;
2748 background-color: #f5f5f5;
2749 }
2750
2751 /**
2752 * 03. 34. Field: subheading
2753 */
2754
2755 .spf-field-subheading {
2756 font-size: 14px;
2757 font-weight: bold;
2758 padding-top: 17px;
2759 padding-bottom: 17px;
2760 color: #23282d;
2761 background-color: #f7f7f7;
2762 }
2763
2764 /**
2765 * 03. 35. Field: submessage
2766 */
2767
2768 .spf-field-submessage {
2769 padding: 0 !important;
2770 border: 0 !important;
2771 }
2772
2773 .spf-field-submessage+.spf-field {
2774 border-top: 0 !important;
2775 }
2776
2777 .spf-submessage {
2778 font-size: 12px;
2779 padding: 17px 30px;
2780 border-top: 1px solid transparent;
2781 border-bottom: 1px solid transparent;
2782 }
2783
2784 .spf-submessage-success {
2785 color: #3c763d;
2786 border-color: #d6e9c6;
2787 background-color: #dff0d8;
2788 }
2789
2790 .spf-submessage-info {
2791 color: #31708f;
2792 border-color: #bce8f1;
2793 background-color: #d9edf7;
2794 }
2795
2796 .spf-submessage-warning {
2797 color: #8a6d3b;
2798 border-color: #faebcc;
2799 background-color: #fcf8e3;
2800 }
2801
2802 .spf-submessage-danger {
2803 color: #a94442;
2804 border-color: #ebccd1;
2805 background-color: #f2dede;
2806 }
2807
2808 .spf-submessage-normal {
2809 color: #23282d;
2810 border-color: #eee;
2811 background-color: #f7f7f7;
2812 }
2813
2814 /**
2815 * 03. 36. Field: notice
2816 */
2817
2818 .spf-field-notice {
2819 background-color: transparent;
2820 }
2821
2822 .spf-notice {
2823 padding: 12px;
2824 padding-left: 0;
2825 background-color: #fff;
2826 border-left: none;
2827 box-shadow: none;
2828 font-style: italic;
2829 }
2830
2831 .spf-notice-success {
2832 border-color: #46b450;
2833 }
2834
2835 .spf-notice-info {
2836 border-color: #339fd4;
2837 }
2838
2839 .spf-notice-warning {
2840 border-color: #ffbc00;
2841 }
2842
2843 .spf-notice-danger {
2844 border-color: #dc3232;
2845 }
2846
2847 .spf-notice-normal {
2848 border-color: #2ca716;
2849 }
2850
2851 /**
2852 * 03. 37. Field: number
2853 */
2854 .spf-field-number input {
2855 width: 100%;
2856 margin: 0;
2857 }
2858
2859 .spf-field-number .spf--wrap {
2860 position: relative;
2861 float: left;
2862 width: 100px;
2863 }
2864
2865 .spf-field-number .spf--unit {
2866 position: absolute;
2867 z-index: 1;
2868 right: 4px;
2869 top: 4px;
2870 bottom: 4px;
2871 padding: 2px 6px;
2872 color: #666;
2873 font-size: 11px;
2874 line-height: 1;
2875 border-radius: 2px;
2876 background: #eee;
2877 user-select: none;
2878 display: flex;
2879 justify-content: center;
2880 flex-direction: column;
2881 }
2882
2883 /**
2884 * 03. 38. others
2885 */
2886
2887 .spf-help {
2888 cursor: help;
2889 padding: 5px;
2890 font-size: 14px;
2891 color: #aaa;
2892 line-height: 28px;
2893 }
2894
2895 .spf-help .spf-help-text {
2896 display: none;
2897 }
2898
2899 .spf-image-preview {
2900 display: inline-block;
2901 position: relative;
2902 padding: 4px;
2903 min-width: 44px;
2904 min-height: 22px;
2905 margin-bottom: 10px;
2906 border: 1px solid #ccc;
2907 background-color: #f9f9f9;
2908 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2909 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2910 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2911 }
2912
2913 .spf-image-preview img {
2914 max-height: 90px;
2915 display: inline-block;
2916 vertical-align: middle;
2917 }
2918
2919 .spf-field-custom .spf-field {
2920 padding: 0;
2921 }
2922
2923 .spf-field .chosen-container-single .chosen-single {
2924 height: 28px;
2925 line-height: 26px;
2926 }
2927
2928 .spf-field .chosen-container-single .chosen-single abbr {
2929 top: 0;
2930 right: 20px;
2931 font-family: FontAwesome;
2932 font-size: 12px;
2933 height: 100%;
2934 width: 18px;
2935 color: #aaa;
2936 text-align: center;
2937 background: none;
2938 }
2939
2940 .spf-field .chosen-container-single .chosen-single abbr:before {
2941 content: "\f00d";
2942 }
2943
2944 .spf-field .chosen-container-single .chosen-single abbr:hover {
2945 color: #555;
2946 }
2947
2948 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
2949 font-family: FontAwesome;
2950 font-size: 12px;
2951 height: 100%;
2952 width: 18px;
2953 color: #aaa;
2954 text-align: center;
2955 background: none;
2956 }
2957
2958 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
2959 content: "\f00d";
2960 display: inline-block;
2961 padding-top: 3px;
2962 }
2963
2964 .spf-field .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
2965 color: #555;
2966 }
2967
2968 .spf-field .chosen-container-single .chosen-single div b {
2969 font-family: FontAwesome;
2970 font-size: 14px;
2971 color: #aaa;
2972 background: none;
2973 }
2974
2975 .spf-field .chosen-container-single .chosen-single div b:before {
2976 content: "\f107";
2977 }
2978
2979 .spf-field .chosen-container-single .chosen-single div b:hover {
2980 color: #555;
2981 }
2982
2983 .spf-field .chosen-container-multi .chosen-choices li.search-choice-placeholder {
2984 border: 1px dashed #aaa;
2985 margin: 3px 5px 3px 0;
2986 }
2987
2988 .spf-field .chosen-container-multi .ui-sortable li.search-choice span {
2989 cursor: move;
2990 }
2991
2992 .spf-field .chosen-container-active.chosen-with-drop .chosen-single div b:before {
2993 content: "\f106";
2994 }
2995
2996 .spf-field .chosen-container-single .chosen-single-with-deselect span {
2997 margin-right: 40px;
2998 }
2999
3000 .spf-field .chosen-container-single .chosen-search input[type="text"] {
3001 background: none;
3002 }
3003
3004 .spf-field .chosen-container-single .chosen-search:before {
3005 font-family: FontAwesome;
3006 position: absolute;
3007 content: "\f002";
3008 font-size: 11px;
3009 right: 10px;
3010 top: 7px;
3011 color: #aaa;
3012 }
3013
3014 .spf-field .wp-picker-container {
3015 display: inline-block;
3016 }
3017
3018 .spf-field .spf--transparent-wrap {
3019 display: none;
3020 position: relative;
3021 top: -1px;
3022 width: 235px;
3023 padding: 9px 10px;
3024 border: 1px solid #dfdfdf;
3025 border-top: none;
3026 background-color: #fff;
3027 }
3028
3029 .spf-field .wp-picker-active .spf--transparent-wrap {
3030 display: block;
3031 }
3032
3033 .spf-field .spf--transparent-slider {
3034 position: absolute;
3035 width: 190px;
3036 margin-left: 2px;
3037 height: 18px;
3038 }
3039
3040 .spf-field .spf--transparent-slider .ui-slider-handle {
3041 position: absolute;
3042 top: -3px;
3043 bottom: -3px;
3044 z-index: 5;
3045 border-color: #aaa;
3046 border-style: solid;
3047 border-width: 4px 3px;
3048 width: 10px;
3049 height: 16px;
3050 margin: 0 -5px;
3051 background: none;
3052 cursor: ew-resize;
3053 opacity: 0.9;
3054 -moz-border-radius: 4px;
3055 -webkit-border-radius: 4px;
3056 border-radius: 4px;
3057 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
3058 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
3059 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
3060 }
3061
3062 .spf-field .spf--transparent-slider .ui-slider-handle:before {
3063 content: " ";
3064 position: absolute;
3065 left: -2px;
3066 right: -2px;
3067 top: -3px;
3068 bottom: -3px;
3069 border: 2px solid #fff;
3070 -moz-border-radius: 3px;
3071 -webkit-border-radius: 3px;
3072 border-radius: 3px;
3073 }
3074
3075 .spf-field .spf--transparent-offset {
3076 height: 18px;
3077 width: 200px;
3078 background: url(../img/checkerboard.png) repeat-y center left scroll #fff;
3079 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3080 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3081 box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset;
3082 -moz-border-radius: 2px;
3083 -webkit-border-radius: 2px;
3084 border-radius: 2px;
3085 }
3086
3087 .spf-field .spf--transparent-text {
3088 position: absolute;
3089 top: 12px;
3090 right: 10px;
3091 width: 30px;
3092 font-size: 12px;
3093 line-height: 12px;
3094 text-align: center;
3095 color: #999;
3096 }
3097
3098 .spf-field .spf--transparent-button {
3099 cursor: pointer;
3100 user-select: none;
3101 margin-top: 10px;
3102 font-size: 11px;
3103 text-align: center;
3104 border-radius: 2px;
3105 padding: 3px 7px;
3106 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
3107 letter-spacing: 0.2px;
3108 color: #777;
3109 border: 1px solid #ccc;
3110 background-color: #f7f7f7;
3111 transition: background-color .2s, border-color .2s, color .2s;
3112 }
3113
3114 .spf-field .spf--transparent-active .wp-color-result {
3115 background-image: url(../img/checkerboard.png);
3116 background-size: 135px;
3117 background-position: center left;
3118 background-color: transparent !important;
3119 }
3120
3121 .spf-field .spf--transparent-active .spf--transparent-button {
3122 color: #fff;
3123 border-color: #3ea032;
3124 background-color: #4fb845;
3125 }
3126
3127 .spf-field .spf--transparent-active .fa:before {
3128 content: "\f205";
3129 }
3130
3131 /**
3132 * 04. Widget
3133 */
3134
3135 .spf-widgets>.spf-field {
3136 position: relative;
3137 top: -1px;
3138 margin-right: -15px;
3139 margin-left: -15px;
3140 padding: 12px 15px;
3141 }
3142
3143 .spf-widgets>.spf-field .spf-field {
3144 margin-left: 0;
3145 margin-right: 0;
3146 }
3147
3148 .spf-widgets>.spf-field .spf-title {
3149 float: none;
3150 width: 100%;
3151 margin-bottom: 5px;
3152 }
3153
3154 .spf-widgets>.spf-field .spf-fieldset {
3155 margin-left: 0;
3156 }
3157
3158 .spf-widgets .spf-field-text input {
3159 width: 100%;
3160 }
3161
3162 .spf-widgets .spf-field-notice .spf-notice {
3163 padding: 15px;
3164 }
3165
3166 .control-section .spf-widgets>.spf-field {
3167 margin-right: -10px;
3168 margin-left: -10px;
3169 padding: 10px 12px;
3170 }
3171
3172 /**
3173 * 05. Widget
3174 */
3175
3176 .control-section .spf-field {
3177 padding: 0;
3178 }
3179
3180 .control-section .spf-field .spf-title {
3181 float: none;
3182 width: 100%;
3183 margin-bottom: 10px;
3184 }
3185
3186 .control-section .spf-field .spf-title h4 {
3187 font-size: 14px;
3188 font-weight: 600;
3189 color: inherit;
3190 }
3191
3192 .control-section .spf-field .spf-fieldset {
3193 margin-left: 0;
3194 }
3195
3196 .control-section .spf-field-select select {
3197 width: 100%;
3198 }
3199
3200 .control-section .spf-field-heading {
3201 color: inherit;
3202 font-size: 14px;
3203 line-height: 1em;
3204 margin-right: -15px;
3205 margin-left: -15px;
3206 padding: 15px;
3207 }
3208
3209 .control-section .spf-field-subheading {
3210 color: inherit;
3211 font-size: 11px;
3212 margin-right: -15px;
3213 margin-left: -15px;
3214 padding: 10px 15px;
3215 }
3216
3217 .control-section .spf-text-subtitle {
3218 margin-top: 4px;
3219 font-size: 12px;
3220 }
3221
3222 .control-section .spf-field-content,
3223 .control-section .spf-field-submessage .spf-submessage {
3224 margin-right: -15px;
3225 margin-left: -15px;
3226 padding: 15px;
3227 }
3228
3229 .control-section .spf-fieldset .spf-field-submessage .spf-submessage,
3230 .control-section .spf-fieldset .spf-field-heading,
3231 .control-section .spf-fieldset .spf-field-subheading {
3232 margin-left: 0;
3233 margin-right: 0;
3234 }
3235
3236 .control-section .spf-field-date .spf--to {
3237 margin-left: 0;
3238 }
3239
3240 .control-section .spf-field-sorter ul li {
3241 padding: 5px;
3242 }
3243
3244 .control-section .spf-field-sorter .spf-modules {
3245 float: none;
3246 width: 100%;
3247 }
3248
3249 .control-section .spf-field-sorter .spf-modules:first-child {
3250 padding-right: 0;
3251 padding-bottom: 15px;
3252 }
3253
3254 .control-section .spf-field-background_adv .spf--select,
3255 .control-section .spf-field-background .spf--select {
3256 width: 100%;
3257 }
3258
3259 .control-section .spf-field-box_shadow select,
3260 .control-section .spf-field-border select,
3261 .control-section .spf-field-spacing select,
3262 .control-section .spf-field-column select,
3263 .control-section .spf-field-dimensions select,
3264 .control-section .spf-field-dimensions_advanced select {
3265 width: auto;
3266 }
3267
3268 .control-section .spf-field-spinner input {
3269 width: 50px;
3270 }
3271
3272 .control-section .spf-field-backup .spf-export-data {
3273 display: none;
3274 }
3275
3276 .control-section .spf-field-fieldset .spf-fieldset-content {
3277 border-color: #e5e5e5;
3278 }
3279
3280 .control-section .spf-field-fieldset .spf-field {
3281 padding: 10px;
3282 }
3283
3284 .control-section .spf-field-fieldset .spf-field .spf-title {
3285 margin-bottom: 5px;
3286 }
3287
3288 .control-section .spf-field-fieldset .spf-field h4 {
3289 font-size: 12px;
3290 }
3291
3292 .control-section .spf-field-group .spf-field,
3293 .control-section .spf-field-tabbed .spf-field,
3294 .control-section .spf-field-sortable .spf-field,
3295 .control-section .spf-field-repeater .spf-field,
3296 .control-section .spf-field-accordion .spf-field {
3297 padding: 10px;
3298 }
3299
3300 .control-section .spf-field-group .spf-field .spf-title,
3301 .control-section .spf-field-tabbed .spf-field .spf-title,
3302 .control-section .spf-field-sortable .spf-field .spf-title,
3303 .control-section .spf-field-repeater .spf-field .spf-title,
3304 .control-section .spf-field-accordion .spf-field .spf-title {
3305 margin-bottom: 5px;
3306 }
3307
3308 .control-section .spf-field-group .spf-field h4,
3309 .control-section .spf-field-tabbed .spf-field h4,
3310 .control-section .spf-field-sortable .spf-field h4,
3311 .control-section .spf-field-repeater .spf-field h4,
3312 .control-section .spf-field-accordion .spf-field h4 {
3313 font-size: 12px;
3314 }
3315
3316 .control-section .spf-dependency-control.hidden {
3317 display: none !important;
3318 }
3319
3320 /**
3321 * 06. Taxonomy
3322 */
3323
3324 .spf-taxonomy>.spf-field {
3325 border-top: none !important;
3326 }
3327
3328 .spf-taxonomy>.spf-field-heading {
3329 font-size: 1.1em;
3330 padding: 20px !important;
3331 border: 1px solid #ddd;
3332 }
3333
3334 .spf-taxonomy>.spf-field-subheading {
3335 font-size: 12px;
3336 padding: 15px !important;
3337 border: 1px solid #ddd;
3338 }
3339
3340 .spf-taxonomy>.spf-field-submessage .spf-submessage {
3341 padding: 15px;
3342 border-left-width: 1px;
3343 border-left-style: solid;
3344 border-right-width: 1px;
3345 border-right-style: solid;
3346 }
3347
3348 .spf-taxonomy>.spf-field-notice {
3349 background-color: transparent;
3350 }
3351
3352 .spf-taxonomy .spf-section-title {
3353 display: block;
3354 padding: 15px;
3355 background-color: #f9f9f9;
3356 border: 1px solid #e5e5e5;
3357 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3358 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3359 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3360 }
3361
3362 .spf-taxonomy-add-fields>.spf-field {
3363 padding: 8px 0;
3364 }
3365
3366 .spf-taxonomy-add-fields>.spf-field>.spf-title {
3367 float: none;
3368 width: 100%;
3369 padding: 2px 2px 4px 0;
3370 }
3371
3372 .spf-taxonomy-add-fields>.spf-field>.spf-title h4 {
3373 font-size: 12px;
3374 font-weight: normal;
3375 }
3376
3377 .spf-taxonomy-add-fields>.spf-field>.spf-fieldset {
3378 margin-left: 0;
3379 }
3380
3381 .spf-taxonomy-add-fields>.spf-field>.spf-fieldset>.spf-help {
3382 right: -5px;
3383 }
3384
3385 .spf-taxonomy-add-fields+p.submit {
3386 margin-top: 0;
3387 }
3388
3389 .spf-taxonomy-edit-fields>.spf-field {
3390 padding: 20px 0;
3391 }
3392
3393 .spf-taxonomy-edit-fields>.spf-field>.spf-title {
3394 width: 225px;
3395 }
3396
3397 .spf-taxonomy-edit-fields>.spf-field>.spf-title h4 {
3398 font-size: 14px;
3399 font-weight: 600;
3400 line-height: 1.3;
3401 display: inline-block;
3402 vertical-align: middle;
3403 }
3404
3405 .spf-taxonomy-edit-fields>.spf-field>.spf-fieldset {
3406 margin-left: 225px;
3407 }
3408
3409 .spf-taxonomy-edit-fields>.spf-field>.spf-fieldset>.spf-help {
3410 top: -5px;
3411 right: -5px;
3412 }
3413
3414 .spf-taxonomy-edit-fields>.spf-field-submessage {
3415 margin: 20px 0;
3416 }
3417
3418 .spf-taxonomy-edit-fields>.spf-field-subheading,
3419 .spf-taxonomy-edit-fields>.spf-field-heading {
3420 margin: 20px 0;
3421 border: 1px solid #ddd;
3422 }
3423
3424 /**
3425 * 07. Profile
3426 */
3427
3428 .spf-profile>h2>.fa {
3429 padding-right: 7px;
3430 }
3431
3432 .spf-profile>.spf-field {
3433 padding: 15px 0;
3434 border-top: none !important;
3435 }
3436
3437 .spf-profile>.spf-field>.spf-title {
3438 width: 220px;
3439 }
3440
3441 .spf-profile>.spf-field>.spf-title h4 {
3442 font-size: 14px;
3443 font-weight: 600;
3444 line-height: 1.3;
3445 display: inline-block;
3446 vertical-align: middle;
3447 }
3448
3449 .spf-profile>.spf-field>.spf-fieldset {
3450 margin-left: 220px;
3451 }
3452
3453 .spf-profile>.spf-field>.spf-fieldset>.spf-help {
3454 top: -15px;
3455 right: -5px;
3456 }
3457
3458 .spf-profile>.spf-field-heading {
3459 font-size: 1.1em;
3460 }
3461
3462 .spf-profile>.spf-field-subheading {
3463 font-size: 12px;
3464 }
3465
3466 .spf-profile>.spf-field-subheading,
3467 .spf-profile>.spf-field-heading {
3468 margin: 10px 0;
3469 padding: 15px !important;
3470 border: 1px solid #ddd;
3471 }
3472
3473 .spf-profile>.spf-field-submessage {
3474 margin: 20px 0;
3475 }
3476
3477 .spf-profile>.spf-field-submessage .spf-submessage {
3478 padding: 10px;
3479 border-left-width: 1px;
3480 border-left-style: solid;
3481 border-right-width: 1px;
3482 border-right-style: solid;
3483 }
3484
3485 .spf-profile>.spf-field-notice {
3486 background-color: transparent;
3487 }
3488
3489 /**
3490 * 08. Modal
3491 */
3492
3493 .spf-modal {
3494 display: none;
3495 position: fixed;
3496 z-index: 100101;
3497 top: 0;
3498 left: 0;
3499 width: 100%;
3500 height: 100%;
3501 }
3502
3503 .spf-modal-icon {
3504 z-index: 100102;
3505 }
3506
3507 .spf-modal-table {
3508 display: table;
3509 width: 100%;
3510 height: 100%;
3511 }
3512
3513 .spf-modal-table-cell {
3514 display: table-cell;
3515 vertical-align: middle;
3516 margin: 100px 0;
3517 }
3518
3519 .spf-modal-inner {
3520 position: relative;
3521 z-index: 10;
3522 width: 760px;
3523 height: 750px;
3524 margin: 0 auto;
3525 background-color: #fff;
3526 }
3527
3528 .spf-modal-content {
3529 position: relative;
3530 overflow: hidden;
3531 overflow-y: auto;
3532 height: 592px;
3533 }
3534
3535 .spf-modal-content .spf-shortcode-button {
3536 display: none;
3537 }
3538
3539 .spf-modal-content .spf-fieldset {
3540 margin-left: 25%;
3541 }
3542
3543 .spf-modal-content .spf-title {
3544 width: 20%;
3545 }
3546
3547 .spf-modal-content .spf-field {
3548 padding: 15px 30px 15px 15px;
3549 }
3550
3551 .spf-modal-content a:active,
3552 .spf-modal-content a:focus {
3553 outline: none;
3554 -moz-box-shadow: none;
3555 -webkit-box-shadow: none;
3556 box-shadow: none;
3557 }
3558
3559 .spf-modal-content h4 {
3560 font-size: 13px;
3561 }
3562
3563 .spf-modal-content h4 small {
3564 font-style: italic;
3565 font-weight: 400;
3566 color: #aaa;
3567 }
3568
3569 .spf-modal-title {
3570 position: relative;
3571 background-color: #fcfcfc;
3572 border-bottom: 1px solid #ddd;
3573 height: 36px;
3574 font-size: 16px;
3575 font-weight: 600;
3576 line-height: 36px;
3577 margin: 0;
3578 padding: 0 36px 0 16px;
3579 }
3580
3581 .spf-modal-header {
3582 width: 100%;
3583 padding: 16px 0;
3584 background-color: #f5f5f5;
3585 border-bottom: 1px solid #eee;
3586 }
3587
3588 .spf-modal-header select {
3589 display: block;
3590 width: 250px;
3591 margin: 0 auto;
3592 background-color: #fff;
3593 }
3594
3595 .spf-modal-close {
3596 color: #666;
3597 padding: 0;
3598 position: absolute;
3599 top: 0;
3600 right: 0;
3601 width: 36px;
3602 height: 36px;
3603 text-align: center;
3604 background: none;
3605 border: none;
3606 cursor: pointer;
3607 }
3608
3609 .spf-modal-close:before {
3610 font: normal 20px/36px dashicons;
3611 content: "\f158";
3612 vertical-align: top;
3613 width: 36px;
3614 height: 36px;
3615 }
3616
3617 .spf-modal-close:hover {
3618 opacity: 0.5;
3619 }
3620
3621 .spf-modal-insert-wrapper {
3622 text-align: center;
3623 width: 100%;
3624 padding: 15px 0;
3625 background-color: #f5f5f5;
3626 border-top: 1px solid #eee;
3627 }
3628
3629 .spf-modal-overlay {
3630 position: absolute;
3631 top: 0;
3632 left: 0;
3633 width: 100%;
3634 height: 100%;
3635 background-color: #000;
3636 opacity: 0.5;
3637 }
3638
3639 /**
3640 * 08. 01. Shortcode Modal
3641 */
3642
3643 .spf--repeatable {
3644 padding: 15px 15px 0 15px;
3645 }
3646
3647 .spf--repeat-button-block {
3648 text-align: center;
3649 padding-bottom: 15px;
3650 }
3651
3652 .spf--repeat-shortcode {
3653 position: relative;
3654 margin-bottom: 15px;
3655 border: 1px dashed #ddd;
3656 }
3657
3658 .spf--repeat-shortcode:first-child .spf-repeat-remove {
3659 display: none;
3660 }
3661
3662 .spf--repeat-shortcode .spf-repeat-remove {
3663 position: absolute;
3664 right: 10px;
3665 top: 10px;
3666 z-index: 10;
3667 cursor: pointer;
3668 display: inline-block;
3669 font-size: 11px;
3670 width: 18px;
3671 height: 18px;
3672 line-height: 18px;
3673 text-align: center;
3674 border-radius: 2px;
3675 color: #fff;
3676 background-color: #e14d43;
3677 opacity: 0.5;
3678 }
3679
3680 .spf--repeat-shortcode .spf-repeat-remove:hover {
3681 opacity: 1;
3682 }
3683
3684 .spf-shortcode-single .spf-modal-inner {
3685 height: 750px;
3686 }
3687
3688 .spf-shortcode-single .spf-modal-content {
3689 height: 652px;
3690 }
3691
3692 .elementor-editor-active .spf-shortcode-button {
3693 margin-left: 5px;
3694 }
3695
3696 .elementor-editor-active .spf-modal .hidden {
3697 display: none !important;
3698 }
3699
3700 /**
3701 * 08. 02. Gutenberg Modal
3702 */
3703
3704 .spf-shortcode-block {
3705 text-align: center;
3706 padding: 14px;
3707 font-size: 13px;
3708 background-color: #f5f5f5;
3709 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3710 }
3711
3712 .spf-shortcode-block .button {
3713 margin: 10px 0;
3714 }
3715
3716 /**
3717 * 08. 03. Icon Modal
3718 */
3719
3720 .spf-modal-icon .spf-icon-title {
3721 padding: 15px 0;
3722 margin: 4px;
3723 font-size: 14px;
3724 font-weight: bold;
3725 text-align: center;
3726 border: 1px solid #eee;
3727 background-color: #f7f7f7;
3728 }
3729
3730 .spf-modal-icon .spf-icon-search {
3731 width: 250px;
3732 height: 40px;
3733 line-height: 40px;
3734 }
3735
3736 .spf-modal-icon a {
3737 display: inline-block;
3738 padding: 4px;
3739 cursor: pointer;
3740 }
3741
3742 .spf-modal-icon a .spf-icon {
3743 position: relative;
3744 padding: 4px;
3745 display: inline-block;
3746 font-size: 14px;
3747 width: 30px;
3748 height: 26px;
3749 line-height: 26px;
3750 text-align: center;
3751 vertical-align: top;
3752 color: #555;
3753 border: 1px solid #ccc;
3754 background-color: #f7f7f7;
3755 -moz-border-radius: 3px;
3756 -webkit-border-radius: 3px;
3757 border-radius: 3px;
3758 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3759 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3760 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
3761 -moz-box-sizing: content-box;
3762 -webkit-box-sizing: content-box;
3763 box-sizing: content-box;
3764 }
3765
3766 .spf-modal-icon a:hover .spf-icon {
3767 color: #fff;
3768 border-color: #222;
3769 background-color: #222;
3770 }
3771
3772 .spf-modal-icon .spf-modal-content {
3773 padding: 10px;
3774 height: 618px;
3775 }
3776
3777 .spf-modal-icon .spf-text-error {
3778 padding: 10px;
3779 }
3780
3781 .spf-modal-loading {
3782 display: none;
3783 position: absolute;
3784 left: 15px;
3785 top: 15px;
3786 }
3787
3788 .spf-loading {
3789 position: relative;
3790 width: 20px;
3791 height: 20px;
3792 background: #ccc;
3793 -moz-border-radius: 20px;
3794 -webkit-border-radius: 20px;
3795 border-radius: 20px;
3796 -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3797 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3798 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3799 }
3800
3801 .spf-loading:after {
3802 position: absolute;
3803 top: 50%;
3804 left: 50%;
3805 width: 4px;
3806 height: 4px;
3807 content: "";
3808 margin-top: -2px;
3809 margin-left: -2px;
3810 background-color: white;
3811 -moz-animation-duration: 0.5s;
3812 -webkit-animation-duration: 0.5s;
3813 animation-duration: 0.5s;
3814 -moz-animation-iteration-count: infinite;
3815 -webkit-animation-iteration-count: infinite;
3816 animation-iteration-count: infinite;
3817 -moz-animation-timing-function: linear;
3818 -webkit-animation-timing-function: linear;
3819 animation-timing-function: linear;
3820 -moz-animation-name: spfLoader;
3821 -webkit-animation-name: spfLoader;
3822 animation-name: spfLoader;
3823 -moz-border-radius: 4px;
3824 -webkit-border-radius: 4px;
3825 border-radius: 4px;
3826 }
3827
3828 @-moz-keyframes spfLoader {
3829 0% {
3830 -moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3831 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3832 }
3833
3834 100% {
3835 -moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3836 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3837 }
3838 }
3839
3840 @-webkit-keyframes spfLoader {
3841 0% {
3842 -webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3843 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3844 }
3845
3846 100% {
3847 -webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3848 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3849 }
3850 }
3851
3852 @keyframes spfLoader {
3853 0% {
3854 -moz-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3855 -ms-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3856 -webkit-transform: rotate(0deg) translateX(-6px) rotate(0deg);
3857 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3858 }
3859
3860 100% {
3861 -moz-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3862 -ms-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3863 -webkit-transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3864 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3865 }
3866 }
3867
3868 /**
3869 * 09. Helper
3870 */
3871
3872 .spf-text-desc,
3873 .spf-text-subtitle {
3874 font-weight: 400;
3875 font-style: italic;
3876 margin-top: 4px;
3877 color: #999;
3878 }
3879
3880 .spf-text-success {
3881 color: #2b542c;
3882 }
3883
3884 .spf-text-error {
3885 color: #d02c21;
3886 }
3887
3888 .spf-text-info {
3889 color: #31708f;
3890 }
3891
3892 .spf-text-warning {
3893 color: #ffb900;
3894 }
3895
3896 .spf-text-muted {
3897 color: #aaa;
3898 }
3899
3900 .spf-text-left {
3901 text-align: left;
3902 }
3903
3904 .spf-text-center {
3905 text-align: center;
3906 }
3907
3908 .spf-text-right {
3909 text-align: right;
3910 }
3911
3912 .spf-block-left {
3913 float: left;
3914 }
3915
3916 .spf-block-right {
3917 float: right;
3918 }
3919
3920 .spf-full-width {
3921 width: 100%;
3922 }
3923
3924 .spf-full-half {
3925 width: 50%;
3926 }
3927
3928 .spf-table {
3929 width: 100%;
3930 display: table;
3931 }
3932
3933 .spf-table-cell {
3934 display: table-cell;
3935 vertical-align: middle;
3936 }
3937
3938 .spf-table-expanded {
3939 width: 100%;
3940 }
3941
3942 .spf-nowrap {
3943 white-space: nowrap;
3944 }
3945
3946 .spf-text-highlight {
3947 padding: 2px 4px;
3948 font-size: 90%;
3949 color: #c7254e;
3950 background-color: #f9f2f4;
3951 -moz-border-radius: 2px;
3952 -webkit-border-radius: 2px;
3953 border-radius: 2px;
3954 }
3955
3956 .spf-text-highlight-gray {
3957 padding: 2px 4px;
3958 font-size: 90%;
3959 background-color: #f0f0f0;
3960 -moz-border-radius: 2px;
3961 -webkit-border-radius: 2px;
3962 border-radius: 2px;
3963 }
3964
3965 .spf-hidden {
3966 display: none;
3967 }
3968
3969 .spf-hide {
3970 display: none !important;
3971 }
3972
3973 .spf-show {
3974 display: block !important;
3975 }
3976
3977 .spf-opacity {
3978 opacity: 0.5;
3979 }
3980
3981 .spf-warning-primary {
3982 color: #fff !important;
3983 border-color: #dc3545 !important;
3984 background: #dc3545 !important;
3985 }
3986
3987 .spf-warning-primary:hover,
3988 .spf-warning-primary:focus {
3989 border-color: #bd2130 !important;
3990 background: #bd2130 !important;
3991 }
3992
3993 .spf-warning-primary:focus {
3994 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #bd2130 !important;
3995 }
3996
3997 .spf-warning-primary:active {
3998 border-color: #bd2130 !important;
3999 background: #bd2130 !important;
4000 }
4001
4002 .spf-form-result {
4003 display: none;
4004 padding: 12px;
4005 margin: 0 0 15px 0;
4006 background-color: #fff;
4007 border-left: 4px solid #555;
4008 -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
4009 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
4010 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
4011 }
4012
4013 .spf-form-show {
4014 display: block;
4015 }
4016
4017 .spf-form-error {
4018 border-left-color: #dc3232;
4019 }
4020
4021 .spf-form-success {
4022 border-left-color: #46b450;
4023 }
4024
4025 .spf-form-warning {
4026 border-left-color: #ffb900;
4027 }
4028
4029 .spf-form-info {
4030 border-left-color: #00a0d2;
4031 }
4032
4033 .spf-label-error {
4034 position: relative;
4035 top: -2px;
4036 display: inline-block;
4037 font-size: 10px;
4038 line-height: 10px;
4039 height: 10px;
4040 width: 10px;
4041 padding: 1px;
4042 font-style: normal;
4043 text-align: center;
4044 color: #fff;
4045 vertical-align: middle;
4046 background-color: #e10000;
4047 -moz-border-radius: 2px;
4048 -webkit-border-radius: 2px;
4049 border-radius: 2px;
4050 }
4051
4052 .spf-no-option {
4053 padding: 30px;
4054 }
4055
4056 .spf-input-number {
4057 -moz-appearance: textfield;
4058 }
4059
4060 .spf-input-number::-webkit-inner-spin-button,
4061 .spf-input-number::-webkit-outer-spin-button {
4062 -webkit-appearance: none;
4063 margin: 0;
4064 }
4065
4066 /**
4067 * 10. Welcome Page
4068 */
4069
4070 .spf-welcome-wrap {
4071 position: relative;
4072 margin: 25px 40px 0 20px;
4073 font-size: 15px;
4074 max-width: 1200px;
4075 }
4076
4077 .spf-welcome-wrap p {
4078 font-size: 14px;
4079 line-height: 1.5;
4080 }
4081
4082 .spf-welcome-wrap h1 {
4083 margin: 0.2em 200px 0 0;
4084 padding: 0;
4085 color: #32373c;
4086 line-height: 1.2em;
4087 font-size: 2.8em;
4088 font-weight: 400;
4089 }
4090
4091 .spf-welcome-wrap .spf-logo {
4092 position: absolute;
4093 overflow: hidden;
4094 top: 0;
4095 right: 0;
4096 height: 160px;
4097 width: 140px;
4098 background-image: linear-gradient(45deg, #2d67cb, #ad19f3);
4099 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgba(0, 0, 0, 0.25);
4100 }
4101
4102 .spf-welcome-wrap .spf-logo .spf--effects i {
4103 position: absolute;
4104 width: 200px;
4105 height: 100px;
4106 background-color: rgba(0, 0, 0, 0.15);
4107 transform: rotate(-45deg);
4108 }
4109
4110 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(1) {
4111 bottom: -20px;
4112 right: -70px;
4113 }
4114
4115 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(2) {
4116 bottom: -35px;
4117 right: -80px;
4118 }
4119
4120 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(3) {
4121 bottom: -50px;
4122 right: -90px;
4123 }
4124
4125 .spf-welcome-wrap .spf-logo .spf--effects i:nth-child(4) {
4126 bottom: -65px;
4127 right: -100px;
4128 }
4129
4130 .spf-welcome-wrap .spf-logo .spf--wp-logos {
4131 position: relative;
4132 padding-top: 25px;
4133 text-align: center;
4134 }
4135
4136 .spf-welcome-wrap .spf-logo .spf--wp-logo {
4137 position: absolute;
4138 left: 20px;
4139 width: 20px;
4140 height: 20px;
4141 background-repeat: no-repeat;
4142 background-position: center center;
4143 background-image: url(../images/wp-logo.svg);
4144 }
4145
4146 .spf-welcome-wrap .spf-logo .spf--wp-plugin-logo {
4147 display: inline-block;
4148 width: 50px;
4149 height: 50px;
4150 border: 3px solid #fff;
4151 background-size: 40px;
4152 background-repeat: no-repeat;
4153 background-position: center center;
4154 background-image: url(../images/wp-plugin-logo.svg);
4155 border-radius: 100%;
4156 vertical-align: middle;
4157 }
4158
4159 .spf-welcome-wrap .spf-logo .spf--text {
4160 position: absolute;
4161 left: 0;
4162 right: 0;
4163 top: 90px;
4164 color: #fff;
4165 font-size: 13px;
4166 line-height: 1.2em;
4167 font-weight: 600;
4168 text-align: center;
4169 text-transform: uppercase;
4170 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
4171 }
4172
4173 .spf-welcome-wrap .spf-logo .spf--version {
4174 top: auto;
4175 left: auto;
4176 right: 8px;
4177 bottom: 4px;
4178 font-size: 11px;
4179 text-transform: lowercase;
4180 }
4181
4182 .spf-welcome-wrap .spf-about-text {
4183 font-weight: 400;
4184 line-height: 1.6em;
4185 font-size: 19px;
4186 margin: 1em 200px 1em 0;
4187 color: #555d66;
4188 }
4189
4190 .spf-welcome-wrap .spf-demo-button {
4191 margin: 1em 200px 2em 0;
4192 }
4193
4194 .spf-welcome-wrap .nav-tab-wrapper {
4195 margin-bottom: 20px;
4196 }
4197
4198 .spf-welcome-wrap ul {
4199 list-style-type: disc;
4200 padding-left: 15px;
4201 }
4202
4203 .spf-welcome-wrap .spf--col {
4204 float: left;
4205 padding-right: 20px;
4206 box-sizing: border-box;
4207 }
4208
4209 .spf-welcome-wrap .spf--col-2 {
4210 width: 50%;
4211 }
4212
4213 .spf-welcome-wrap .spf--col-3 {
4214 width: 33.333%;
4215 }
4216
4217 .spf-welcome-wrap .spf--col-4 {
4218 width: 25%;
4219 }
4220
4221 .spf-welcome-wrap .spf--col-5 {
4222 width: 20%;
4223 }
4224
4225 .spf-welcome-wrap .spf--col-last {
4226 padding-right: 0;
4227 }
4228
4229 .spf-welcome-wrap .spf--col-upgrade {
4230 padding-top: 30px;
4231 text-align: center;
4232 }
4233
4234 .spf--table-compare thead td,
4235 .spf--table-compare tfoot td {
4236 text-align: center;
4237 }
4238
4239 .spf--table-compare td {
4240 font-size: 14px;
4241 text-align: center;
4242 vertical-align: middle;
4243 padding: 10px;
4244 }
4245
4246 .spf--table-compare td:first-child {
4247 text-align: left;
4248 }
4249
4250 .spf--table-compare tfoot td {
4251 padding: 15px 0;
4252 }
4253
4254 .spf--table-compare .fa {
4255 font-size: 12px;
4256 width: 18px;
4257 height: 18px;
4258 line-height: 18px;
4259 padding: 2px;
4260 text-align: center;
4261 color: #fff;
4262 background-color: #46b450;
4263 border-radius: 100%;
4264 }
4265
4266 .spf--table-compare .fa-check {
4267 background-color: #46b450;
4268 }
4269
4270 .spf--table-compare .fa-times {
4271 background-color: #dc3232;
4272 }
4273
4274 .spf-welcome-cols {
4275 clear: both;
4276 margin: 20px 0;
4277 background-color: #fff;
4278 padding: 30px 0;
4279 border-radius: 2px;
4280 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
4281 }
4282
4283 .spf-welcome-cols .spf--col {
4284 width: 20%;
4285 float: left;
4286 padding: 0 30px;
4287 box-sizing: border-box;
4288 text-align: center;
4289 border-right: 1px solid #e5e5e5;
4290 }
4291
4292 .spf-welcome-cols .spf--left,
4293 .spf-welcome-cols .spf--block {
4294 float: left;
4295 width: 20%;
4296 padding: 0 30px;
4297 text-align: center;
4298 box-sizing: border-box;
4299 }
4300
4301 .spf-welcome-cols .spf--block {
4302 width: 80%;
4303 }
4304
4305 .spf-welcome-cols .spf--last {
4306 border-right: none;
4307 }
4308
4309 .spf-welcome-cols .spf--space {
4310 height: 20px;
4311 }
4312
4313 .spf-welcome-cols .spf--icon {
4314 display: inline-block;
4315 font-size: 25px;
4316 width: 50px;
4317 height: 50px;
4318 line-height: 50px;
4319 text-align: center;
4320 margin-bottom: 10px;
4321 color: #fff;
4322 background-color: #555;
4323 border-radius: 50px;
4324 }
4325
4326 .spf-welcome-cols .spf--active {
4327 background-color: #5cb85c;
4328 }
4329
4330 .spf-welcome-cols .spf--deactive {
4331 background-color: #e14d43;
4332 }
4333
4334 .spf-welcome-cols .spf--title {
4335 font-weight: bold;
4336 display: block;
4337 }
4338
4339 .spf-welcome-cols p:last-child {
4340 margin-bottom: 0;
4341 }
4342
4343 .spf-code-block {
4344 margin: 20px 0;
4345 padding: 5px 20px;
4346 background-color: #fff;
4347 border-radius: 2px;
4348 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
4349 }
4350
4351 .spf-code-block pre {
4352 font-size: 13px;
4353 color: #0073aa;
4354 }
4355
4356 .spf-code-block pre span {
4357 color: #999;
4358 }
4359
4360 .spf--table-fields td {
4361 font-size: 14px;
4362 }
4363
4364 .spf--upgrade a {
4365 color: #5cb85c;
4366 font-weight: bold;
4367 }
4368
4369 .spf--upgrade a:focus,
4370 .spf--upgrade a:hover {
4371 color: #4aa14a;
4372 outline: none;
4373 box-shadow: none;
4374 }
4375
4376 /**
4377 * 11. Responsive
4378 */
4379
4380 @media only screen and (max-width: 1200px) {
4381 .spf-metabox .spf-field .spf-title {
4382 float: none;
4383 width: 100%;
4384 margin-bottom: 10px;
4385 }
4386
4387 .spf-metabox .spf-field .spf-fieldset {
4388 margin-left: 0;
4389 }
4390 }
4391
4392 @media only screen and (max-width: 782px) {
4393 .spf-header-inner {
4394 text-align: center;
4395 }
4396
4397 .spf-header-inner h1 {
4398 width: 100%;
4399 margin-bottom: 10px;
4400 }
4401
4402 .spf-search,
4403 .spf-header-right,
4404 .spf-header-left {
4405 width: 100%;
4406 }
4407
4408 .spf-search {
4409 text-align: center;
4410 margin-bottom: 15px;
4411 }
4412
4413 .spf-footer {
4414 text-align: center;
4415 }
4416
4417 .spf-buttons {
4418 float: none;
4419 }
4420
4421 .spf-copyright {
4422 float: none;
4423 margin-top: 10px;
4424 }
4425
4426 .sp-pcp-options .spf-nav,
4427 .spf-nav,
4428 .spf-expand-all,
4429 .spf-reset-section,
4430 .spf-nav-background {
4431 display: none !important;
4432 }
4433
4434 .sp-pcp-options .spf-content,
4435 .spf-content {
4436 margin-left: 0;
4437 }
4438
4439 .spf-section-title,
4440 .sp-pcp-options .spf-section,
4441 .spf-section {
4442 display: block !important;
4443 }
4444
4445 .spf-field .spf-title {
4446 float: none;
4447 width: 100%;
4448 margin-bottom: 10px;
4449 }
4450
4451 .spf-field .spf-fieldset {
4452 margin-left: 0;
4453 }
4454
4455 .spf-field-radio ul li {
4456 margin-top: 4px;
4457 }
4458
4459 .spf-modal-inner {
4460 width: 350px;
4461 height: 400px;
4462 }
4463
4464 .spf-modal-content {
4465 height: 237px;
4466 }
4467
4468 .spf-icon-dialog .spf-modal-inner {
4469 width: 305px;
4470 height: 380px;
4471 }
4472
4473 .spf-icon-dialog .spf-modal-content {
4474 height: 267px;
4475 }
4476
4477 .spf-modal-icon .spf-modal-inner {
4478 width: 330px;
4479 height: 385px;
4480 }
4481
4482 .spf-modal-icon .spf-modal-content {
4483 height: 252px;
4484 }
4485
4486 .spf-profile>.spf-field>.spf-title {
4487 float: none;
4488 width: 100%;
4489 margin-bottom: 10px;
4490 }
4491
4492 .spf-profile>.spf-field>.spf-fieldset {
4493 margin-left: 0;
4494 }
4495 }
4496
4497 /**
4498 * Chosen JS Styles
4499 */
4500
4501 .chosen-container {
4502 position: relative;
4503 display: inline-block;
4504 vertical-align: middle;
4505 font-size: 13px;
4506 user-select: none;
4507 min-width: 225px;
4508 }
4509
4510 .chosen-container * {
4511 box-sizing: border-box;
4512 }
4513
4514 .chosen-container .chosen-drop {
4515 position: absolute;
4516 top: 100%;
4517 z-index: 1010;
4518 max-width: 390px;
4519 /* SP Style */
4520 width: 100%;
4521 border: 1px solid #aaa;
4522 border-top: 0;
4523 background: #fff;
4524 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
4525 clip: rect(0, 0, 0, 0);
4526 clip-path: inset(100% 100%);
4527 }
4528
4529 .chosen-container.chosen-with-drop .chosen-drop {
4530 clip: auto;
4531 clip-path: none;
4532 }
4533
4534 .chosen-container a {
4535 cursor: pointer;
4536 }
4537
4538 .chosen-container .search-choice .group-name,
4539 .chosen-container .chosen-single .group-name {
4540 margin-right: 4px;
4541 overflow: hidden;
4542 white-space: nowrap;
4543 text-overflow: ellipsis;
4544 font-weight: normal;
4545 color: #999999;
4546 }
4547
4548 .chosen-container .search-choice .group-name:after,
4549 .chosen-container .chosen-single .group-name:after {
4550 content: ":";
4551 padding-left: 2px;
4552 vertical-align: top;
4553 }
4554
4555 .chosen-container-single .chosen-single {
4556 position: relative;
4557 display: block;
4558 overflow: hidden;
4559 padding: 0 0 0 8px;
4560 height: 25px;
4561 border: 1px solid #aaa;
4562 border-radius: 5px;
4563 background-color: #fff;
4564 background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
4565 background-clip: padding-box;
4566 box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
4567 color: #444;
4568 text-decoration: none;
4569 white-space: nowrap;
4570 line-height: 24px;
4571 }
4572
4573 .chosen-container-single .chosen-default {
4574 color: #999;
4575 }
4576
4577 .chosen-container-single .chosen-single span {
4578 display: block;
4579 overflow: hidden;
4580 margin-right: 26px;
4581 text-overflow: ellipsis;
4582 white-space: nowrap;
4583 }
4584
4585 .chosen-container-single .chosen-single-with-deselect span {
4586 margin-right: 38px;
4587 }
4588
4589 .chosen-container-single .chosen-single abbr {
4590 position: absolute;
4591 top: 6px;
4592 right: 26px;
4593 display: block;
4594 width: 12px;
4595 height: 12px;
4596 font-size: 1px;
4597 }
4598
4599 .chosen-container-single .chosen-single div {
4600 position: absolute;
4601 top: 0;
4602 right: 0;
4603 display: block;
4604 width: 18px;
4605 height: 100%;
4606 }
4607
4608 .chosen-container-single .chosen-single div b {
4609 display: block;
4610 width: 100%;
4611 height: 100%;
4612 }
4613
4614 .chosen-container-single .chosen-search {
4615 position: relative;
4616 z-index: 1010;
4617 margin: 0;
4618 padding: 3px 4px;
4619 white-space: nowrap;
4620 }
4621
4622 .chosen-container-single .chosen-search input[type="text"] {
4623 margin: 1px 0;
4624 padding: 4px 20px 4px 5px;
4625 width: 100%;
4626 height: auto;
4627 outline: 0;
4628 border: 1px solid #aaa;
4629 font-size: 1em;
4630 font-family: sans-serif;
4631 line-height: normal;
4632 border-radius: 0;
4633 }
4634
4635 .chosen-container-single .chosen-drop {
4636 margin-top: -1px;
4637 border-radius: 0 0 4px 4px;
4638 background-clip: padding-box;
4639 }
4640
4641 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
4642 position: absolute;
4643 clip: rect(0, 0, 0, 0);
4644 clip-path: inset(100% 100%);
4645 }
4646
4647 .chosen-container .chosen-results {
4648 color: #444;
4649 position: relative;
4650 overflow-x: hidden;
4651 overflow-y: auto;
4652 margin: 0 4px 4px 0;
4653 padding: 0 0 0 4px;
4654 max-height: 240px;
4655 -webkit-overflow-scrolling: touch;
4656 }
4657
4658 .chosen-container .chosen-results li {
4659 display: none;
4660 margin: 0;
4661 padding: 5px 6px;
4662 list-style: none;
4663 line-height: 15px;
4664 word-wrap: break-word;
4665 -webkit-touch-callout: none;
4666 }
4667
4668 .chosen-container .chosen-results li.active-result {
4669 display: list-item;
4670 cursor: pointer;
4671 max-width: 390px;
4672 /* SP Style */
4673 }
4674
4675 .chosen-container .chosen-results li.disabled-result {
4676 display: list-item;
4677 color: #ccc;
4678 cursor: default;
4679 }
4680
4681 .chosen-container .chosen-results li.highlighted {
4682 background-color: #3875d7;
4683 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
4684 color: #fff;
4685 }
4686
4687 .chosen-container .chosen-results li.no-results {
4688 color: #777;
4689 display: list-item;
4690 background: #f4f4f4;
4691 }
4692
4693 .chosen-container .chosen-results li.group-result {
4694 display: list-item;
4695 font-weight: bold;
4696 cursor: default;
4697 }
4698
4699 .chosen-container .chosen-results li.group-option {
4700 padding-left: 15px;
4701 }
4702
4703 .chosen-container .chosen-results li em {
4704 font-style: normal;
4705 text-decoration: underline;
4706 }
4707
4708 .chosen-container-multi .chosen-choices {
4709 position: relative;
4710 overflow: hidden;
4711 margin: 0;
4712 padding: 0 5px;
4713 max-width: 390px;
4714 /* SP Style */
4715 height: auto;
4716 border: 1px solid #aaa;
4717 background-color: #fff;
4718 background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
4719 cursor: text;
4720 min-width: 380px;
4721 }
4722
4723 .chosen-container-multi .chosen-choices li {
4724 float: left;
4725 list-style: none;
4726 }
4727 .spf-metabox .chosen-container-multi .chosen-choices li {
4728 float: left !important;
4729 }
4730
4731 .chosen-container-multi .chosen-choices li.search-field {
4732 margin: 0;
4733 padding: 0;
4734 white-space: nowrap;
4735 }
4736
4737 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
4738 margin: 1px 0;
4739 padding: 0;
4740 outline: 0;
4741 border: 0 !important;
4742 background: transparent !important;
4743 box-shadow: none;
4744 color: #999;
4745 font-size: 100%;
4746 font-family: sans-serif;
4747 line-height: normal;
4748 border-radius: 0;
4749 width: 25px;
4750 height: 25px;
4751 min-height: 25px;
4752 }
4753
4754 .chosen-container-multi .chosen-choices li.search-choice {
4755 position: relative;
4756 margin: 3px 5px 3px 0;
4757 padding: 3px 20px 3px 6px;
4758 border: 1px solid #aaa;
4759 max-width: 100%;
4760 border-radius: 3px;
4761 background-color: #eeeeee;
4762 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
4763 background-size: 100% 19px;
4764 background-repeat: repeat-x;
4765 background-clip: padding-box;
4766 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
4767 color: #333;
4768 line-height: 13px;
4769 cursor: default;
4770 }
4771
4772 .chosen-container-multi .chosen-choices li.search-choice span {
4773 word-wrap: break-word;
4774 white-space: nowrap;
4775 }
4776
4777 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
4778 position: absolute;
4779 top: 0;
4780 right: 0;
4781 display: block;
4782 width: 12px;
4783 height: 12px;
4784 font-size: 1px;
4785 }
4786
4787 .chosen-container-multi .chosen-choices li.search-choice-disabled {
4788 padding-right: 5px;
4789 border: 1px solid #ccc;
4790 background-color: #e4e4e4;
4791 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
4792 color: #666;
4793 }
4794
4795 .chosen-container-multi .chosen-choices li.search-choice-focus {
4796 background: #d4d4d4;
4797 }
4798
4799 .chosen-container-multi .chosen-results {
4800 margin: 0;
4801 padding: 0;
4802 }
4803
4804 .chosen-container-multi .chosen-drop .result-selected {
4805 display: none;
4806 /* SP Style */
4807 color: #ccc;
4808 cursor: default;
4809 }
4810
4811 .chosen-container-active .chosen-single {
4812 border: 1px solid #5897fb;
4813 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4814 }
4815
4816 .chosen-container-active.chosen-with-drop .chosen-single {
4817 border: 1px solid #aaa;
4818 border-bottom-right-radius: 0;
4819 border-bottom-left-radius: 0;
4820 background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
4821 box-shadow: 0 1px 0 #fff inset;
4822 }
4823
4824 .chosen-container-active.chosen-with-drop .chosen-single div {
4825 border-left: none;
4826 background: transparent;
4827 }
4828
4829 .chosen-container-active .chosen-choices {
4830 border: 1px solid #5897fb;
4831 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4832 }
4833
4834 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
4835 color: #222 !important;
4836 }
4837
4838 .chosen-disabled {
4839 opacity: 0.5 !important;
4840 cursor: default;
4841 }
4842
4843 .chosen-disabled .chosen-single {
4844 cursor: default;
4845 }
4846
4847 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
4848 cursor: default;
4849 }
4850
4851 .chosen-rtl {
4852 text-align: right;
4853 }
4854
4855 .chosen-rtl .chosen-single {
4856 overflow: visible;
4857 padding: 0 8px 0 0;
4858 }
4859
4860 .chosen-rtl .chosen-single span {
4861 margin-right: 0;
4862 margin-left: 26px;
4863 direction: rtl;
4864 }
4865
4866 .chosen-rtl .chosen-single-with-deselect span {
4867 margin-left: 38px;
4868 }
4869
4870 .chosen-rtl .chosen-single div {
4871 right: auto;
4872 left: 3px;
4873 }
4874
4875 .chosen-rtl .chosen-single abbr {
4876 right: auto;
4877 left: 26px;
4878 }
4879
4880 .chosen-rtl .chosen-choices li {
4881 float: right;
4882 }
4883
4884 .chosen-rtl .chosen-choices li.search-field input[type="text"] {
4885 direction: rtl;
4886 }
4887
4888 .chosen-rtl .chosen-choices li.search-choice {
4889 margin: 3px 5px 3px 0;
4890 padding: 3px 5px 3px 19px;
4891 }
4892
4893 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
4894 right: auto;
4895 left: 4px;
4896 }
4897
4898 .chosen-rtl.chosen-container-single .chosen-results {
4899 margin: 0 0 4px 4px;
4900 padding: 0 4px 0 0;
4901 }
4902
4903 .chosen-rtl .chosen-results li.group-option {
4904 padding-right: 15px;
4905 padding-left: 0;
4906 }
4907
4908 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
4909 border-right: none;
4910 }
4911
4912 .chosen-rtl .chosen-search input[type="text"] {
4913 padding: 4px 5px 4px 20px;
4914 direction: rtl;
4915 }
4916
4917 /**
4918 *
4919 *Custom Style for the SP PCP
4920 *
4921 **/
4922 .spf_column_2 ul,
4923 .spf_column_2 .spf-fieldset ul {
4924 -webkit-columns: 2;
4925 -moz-columns: 2;
4926 columns: 2;
4927 }
4928
4929 .spf_column_2 ul li,
4930 .spf_column_2 .spf-fieldset ul li {
4931 width: 50%;
4932 }
4933
4934 #sp_pcp_view_options {
4935 border-top-color: #f1f1f1;
4936 margin-top: -21px;
4937 }
4938
4939 #sp_pcp_view_options .spf-nav ul li {
4940 margin-bottom: -1px;
4941 }
4942
4943 #sp_pcp_view_options .spf-nav.spf-nav-metabox {
4944 border-right-color: #f1f1f1;
4945 border-right-color: #f1f1f1;
4946 background: #f1f1f1;
4947 margin-right: 0;
4948 padding-top: 15px;
4949 }
4950
4951 #sp_pcp_view_options .spf-content {
4952 border-top: 1px solid #e5e5e5;
4953 box-shadow: 0 -1px 1px rgba(0, 0, 0, .04);
4954 }
4955
4956 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset .spf-title,
4957 #spf-section-sp_pcp_layouts_1 .spf-field-gallery .spf-title,
4958 .pcp_carousel_content_wrapper .spf-title,
4959 .pcp-video-description .spf-title,
4960 .pcp-video-field-wrapper>.spf-title {
4961 width: 100%;
4962 }
4963
4964 #spf-section-sp_pcp_layouts_1 .spf-field-layout_preset .spf-fieldset,
4965 #spf-section-sp_pcp_layouts_1 .spf-field-gallery .spf-fieldset,
4966 .pcp_carousel_content_wrapper .spf-fieldset,
4967 .pcp-video-description .spf-fieldset,
4968 .pcp-video-field-wrapper>.spf-fieldset {
4969 margin-top: 30px;
4970 margin-left: 0;
4971 }
4972
4973 #sp_pcp_view_options .hndle,
4974 #sp_pcp_view_options .handlediv,
4975 #sp_pcp_layouts .handlediv,
4976 #sp_pcp_layouts .hndle {
4977 display: none;
4978 }
4979
4980 #spf-section-sp_pcp_layouts_1 .pcp-admin-header {
4981 background-color: #157592;
4982 background-image: -moz-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
4983 background-image: -webkit-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
4984 background-image: -ms-linear-gradient(180deg, rgb(233, 100, 67) 0%, rgb(178, 86, 118) 100%);
4985 padding: 18px 26px;
4986 overflow: hidden;
4987 }
4988
4989 #spf-section-sp_pcp_layouts_1 .pcp-admin-header img {
4990 max-width: 180px;
4991 }
4992
4993 #spf-section-sp_pcp_layouts_1 .pcp-admin-header .support {
4994 margin-left: 16px;
4995 float: right;
4996 }
4997
4998 #spf-section-sp_pcp_layouts_1 .pcp-admin-header .support a {
4999 color: #ffffff;
5000 text-decoration: none;
5001 line-height: 35px;
5002 font-size: 15px;
5003 font-weight: 500;
5004 }
5005 .pcp_reading_time_meta .clear {
5006 clear: initial;
5007 }
5008 .pcp_reading_time_postfix .spf-fieldset input,
5009 .pcp_reading_time_meta .spf--wrap {
5010 margin-right: 5px;
5011 }
5012 .pcp_reading_time_meta .spf-fieldset {
5013 line-height: 2;
5014 }
5015 .pcp_reading_time_postfix .spf-fieldset input {
5016 max-width: 255px;
5017 }
5018 /*
5019 * Shortcode footer.
5020 */
5021
5022 .spf-field-shortcode.pcp-admin-footer .pcp-shortcode-selectable {
5023 background-color: rgba(82, 179, 217, 0.11);
5024 padding: 10px 15px;
5025 display: inline-block;
5026 -webkit-touch-callout: all;
5027 -webkit-user-select: all;
5028 -khtml-user-select: all;
5029 -moz-user-select: all;
5030 -ms-user-select: all;
5031 user-select: all;
5032 }
5033
5034 #spf-section-sp_pcp_display_shortcode_1 .spf-field {
5035 display: flex;
5036 padding: 0;
5037 flex-wrap: wrap;
5038 }
5039
5040 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap:first-of-type {
5041 border-right: 1px solid #ddd;
5042 }
5043
5044 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap {
5045 padding-top: 22px;
5046 padding-bottom: 22px;
5047 text-align: center;
5048 width: 49%;
5049 }
5050
5051 .spf-field-shortcode.pcp-admin-footer .pcp-sc-title {
5052 font-weight: 500;
5053 font-size: 14px !important;
5054 padding-top: 0 !important;
5055 color: #4c5158;
5056 margin-right: 5px;
5057 }
5058
5059 @media only screen and (max-width: 990px) {
5060 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap:first-of-type {
5061 border-right: none;
5062 border-bottom: 1px solid #ddd;
5063 }
5064
5065 .spf-field-shortcode.pcp-admin-footer .pcp-scode-wrap {
5066 width: 100%;
5067 }
5068 }
5069
5070 /* Post content sortble custom css */
5071 .post_content_sorter.spf-field-sortable .spf--sortable-helper {
5072 border-left: none;
5073 background-color: #007CBA;
5074 color: #fff;
5075 height: 48px;
5076 line-height: 48px;
5077 display: block;
5078 padding-right: 1px;
5079 }
5080 .post_content_sorter.spf-field-sortable .spf--sortable-helper .fa{
5081 color: #fff;
5082 }
5083 .spf-field-accordion.pcp-opened-accordion .spf-accordion-title,
5084 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item h4.spf-accordion-title {
5085 border: none;
5086 box-shadow: none;
5087 background-color: #007CBA;
5088 color: #fff;
5089 margin-left: -1px;
5090 }
5091 .spf-field-accordion.pcp-opened-accordion{
5092 padding-bottom: 15px;
5093 }
5094 .spf-field-accordion.pcp-opened-accordion .spf-accordion-title{
5095 margin-left: 0;
5096 }
5097 .post_content_sorter.spf-field-sortable .spf--sortable-content>.spf-field {
5098 padding: 0;
5099 }
5100 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-item{
5101 margin-bottom: 0;
5102 }
5103 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-content.spf-accordion-open~h4.spf-accordion-title{
5104 border-radius: 0;
5105 }
5106 .post_content_sorter.spf-field-sortable .spf-field-accordion .spf-accordion-content{
5107 border: none;
5108 box-shadow: none;
5109 }
5110 .post_content_sorter.spf-field-sortable .spf--sortable .spf--sortable-item {
5111 display: table;
5112 width: 100%;
5113 margin-bottom: 5px;
5114 border: 1px solid #ccd0d4;
5115 }
5116 /* Social shape */
5117 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image.spf--active img {
5118 border-color: #e1624b;
5119 }
5120 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image{
5121 text-align: center;
5122 }
5123 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image img {
5124 color: #7b8898;
5125 margin-right: 10px;
5126 border: 2px solid transparent;
5127 border-radius:none;
5128 outline: none;
5129 }
5130 .spf-field.spf-field-layout_preset.social_icon_shape .spf--image:before{
5131 content: no-close-quote;
5132 background: transparent;
5133 }
5134 /* Group meta custom css */
5135 .spf-field-group.pcp_custom_group_design .spf-cloneable-header-icon{
5136 color: #476177;
5137 background-image: none;
5138 position: static;
5139 }
5140 .spf-field-group.pcp_custom_group_design .spf-cloneable-helper i{
5141 color: #476177;
5142 }
5143 .spf-field-group.pcp_custom_group_design .spf-cloneable-helper .spf-cloneable-clone{
5144 display: none;
5145 }
5146 .spf-field-group.pcp_custom_group_design .spf-cloneable-title:hover{
5147 border-color: #caddec;
5148 }
5149 .spf-field-group.pcp_custom_group_design .spf-cloneable-title{
5150 color: #4C5E6D;
5151 background: #CADDEC;
5152 border: 1px solid #CADDEC;
5153 border-bottom-color: transparent;
5154 }
5155 .spf-field-group.pcp_custom_group_design .spf-cloneable-content{
5156 border: 1px solid #CADDEC;
5157 }
5158 .spf-field-group.pcp_custom_group_design .spf-cloneable-placeholder{
5159 background-color: #afc5d6;
5160 }
5161 .spf-field-group.pcp_custom_group_design h4.spf-accordion-title {
5162 border: none;
5163 box-shadow: none;
5164 }
5165 /* Popup sortable field CSS */
5166 .spf-field.spf-field-sortable.post_content_sorter_sortable .spf--sortable.ui-sortable {
5167 max-width: 530px;
5168 }
5169 .spf-field.spf-field-sortable.post_content_sorter_sortable .spf--sortable.ui-sortable .spf-field.spf-field-switcher .spf-fieldset{
5170 margin-left: 80%;
5171 }
5172
5173 /*
5174 * Pro Only Features
5175 *
5176 * The features that are available only on the Smart Post Show Pro only
5177 */
5178 /* Layout Preset Options */
5179 .spf-field-layout_preset.pcp-layout-preset .spf--image.pcp-pro-only,
5180 /* Content Orientation Options */
5181 .spf-field-layout_preset.pcp-content-orientation .spf--image.pcp-pro-only,
5182 /* Pagination Type */
5183 .pcp-pagination-type li:nth-child(n+2) label
5184 /* Advance filter Options ( Filter by - Custom Fields, Date ) */
5185 /* .pcp_advanced_filter ul li:nth-of-type(-2n+6) label */ {
5186 pointer-events: none;
5187 }
5188
5189 /* Adding Pro text to the layout_preset field */
5190 .spf-field-layout_preset.pcp-content-orientation .spf--image.pcp-pro-only:after,
5191 .spf-field-layout_preset.pcp-layout-preset .spf--image.pcp-pro-only:after {
5192 position: absolute;
5193 top: 1px;
5194 right: 11px;
5195 color: #a5a5a5;
5196 background-color: #e0e0e0;
5197 font-weight: 500;
5198 padding: 0 4px;
5199 content: 'PRO';
5200 text-align: center;
5201 font-size: 8px;
5202 }
5203 .spf-field-layout_preset .spf--image {
5204 position: relative;
5205 }
5206 /* Setting page header */
5207 .sp_post_carousel_page_pcp_settings .spf-header-inner h1 svg{
5208 float: left;
5209 margin-right: 8px;
5210 height: 1.5em;
5211 }
5212 .sp_post_carousel_page_pcp_settings .spf-header-inner h1 {
5213 line-height: 1.5em;
5214 }
5215 .sp_post_carousel_page_pcp_settings .wrap h1{
5216 display: none;
5217 }
5218 /* Pro only accordion fields */
5219 .post_content_sorter .spf--sortable-item .pcp-pro-only .spf-accordion-title, .post_content_sorter .spf--sortable-item .pcp-pro-only .spf--sortable-helper{
5220 background-color: rgb(240, 240, 240);
5221 color: #bebebe;
5222 }
5223 .post_content_sorter.spf-field-sortable .pcp-pro-only .spf--sortable-helper{
5224 border-right: 1px solid rgb(190, 190, 190);
5225 }
5226 .spf-field.spf-field-checkbox.pcp_disabled h4 {
5227 opacity: 0.7;
5228 }
5229 /* Pro only image select */
5230 .spf-field-image_select .spf--image.pcp-pro-only, .spf-field-button_set .spf--button.pcp-pro-only {
5231 pointer-events: none;
5232 opacity: 0.8;
5233
5234 }
5235 .spf-field-button_set .spf--button.pcp-pro-only:after,
5236 .spf-field-image_select .spf--image.pcp-pro-only:after {
5237 position: absolute;
5238 top: 0;
5239 right: 0;
5240 color: #a5a5a5;
5241 background-color: #e0e0e0;
5242 font-weight: 500;
5243 padding: 0 4px;
5244 content: "PRO";
5245 text-align: center;
5246 font-size: 8px;
5247 line-height: 11px;
5248 opacity: 1;
5249 }
5250
5251 /* Show preview button */
5252 #spsp-show-preview {
5253 position: fixed;
5254 right: 144px;
5255 bottom: 30px;
5256 z-index: 1001;
5257 width: 155px;
5258 text-align: center;
5259 padding: 10px 0px;
5260 background: #54b154;
5261 color: #fff;
5262 border-radius: 3px;
5263 text-decoration: none;
5264 display: block;
5265 font-weight: 500;
5266 text-transform: uppercase;
5267 letter-spacing: 0.2px;
5268 margin: 0;
5269 box-sizing: border-box;
5270 border-color: #44a944;
5271 overflow: hidden;
5272 }
5273 #spsp-preview-box{
5274 overflow-x: auto;
5275 padding: 0 20px;
5276 resize: vertical;
5277 }
5278 .spf-field.spf-field-preview{
5279 padding-right: 10px;
5280 padding-left: 10px;
5281 }
5282 .spf-field.spf-field-preview .pcp-sc-title {
5283 padding-left: 19px;
5284 padding-bottom: 0px;
5285 margin-top: 0;
5286 }
5287 #poststuff #sp_pcp_display .sp-pcp-section h3,#poststuff #sp_pcp_display .sp-pcp-section h2,#poststuff #sp_pcp_display .sp-pcp-section h3{
5288 padding: 0;
5289 margin: 0 0 9px 0;
5290 }
5291 #poststuff #sp_pcp_display .sp-pcp-section .pcp-section-title {
5292 color: #444;
5293 margin: 0 0 30px 0;
5294 font-size: 24px;
5295 }
5296 /* Popup settings field style */
5297 .spf-field-fieldset.pcp_popup_settings_field{
5298 padding: 0 13px;
5299 opacity: .7;
5300 pointer-events: none;
5301 }
5302 .spf-field-fieldset.pcp_popup_settings_field .spf-field-switcher .spf--active {
5303 background-color: #aaa;
5304 }
5305 .spf-field-fieldset.pcp_popup_settings_field .spf-fieldset-content{
5306 border: none;
5307 }
5308 .spf-field-fieldset.pcp_popup_settings_field .spf-fieldset-content .spf-field-switcher .spf-title{
5309 line-height: 24px;
5310 }
5311 /* pro field style */
5312 .pcp_only_pro{
5313 opacity: .7;
5314 pointer-events: none;
5315 }
5316 .spf-field-column.pcp_only_pro .spf--inputs .spf--input:last-child{
5317 position: relative;
5318 }
5319 .spf-field-column.pcp_only_pro .spf--inputs .spf--input:last-child::after {
5320 content: "PRO";
5321 background-color: #d4d4d4;
5322 padding: 2px 4px;
5323 font-size: 8px;
5324 border-radius: 2px;
5325 height: 11px;
5326 margin-left: 5px;
5327 margin-top: 7px;
5328 }
5329
5330 /* Import export css */
5331 .spf-field.spf-field-button_set.pcp_export {
5332 margin-top: 0;
5333 padding-top: 0;
5334 }
5335
5336 .spf-field-button_set.pcp_export .spf--button:hover,
5337 .spf-field.spf-field-custom_import.pcp_import button:hover {
5338 background: #135e96;
5339 border-color: #135e96;
5340 color: #fff;
5341 }
5342
5343 .spf-field.spf-field-custom_import.pcp_import button,
5344 .spf-field-button_set.pcp_export .spf--button {
5345 background: #2271b1;
5346 border-color: #2271b1;
5347 color: #fff;
5348 text-decoration: none;
5349 text-shadow: none;
5350 display: inline-block;
5351 text-decoration: none;
5352 font-size: 13px;
5353 line-height: 2.15384615;
5354 min-height: 30px;
5355 margin: 0;
5356 padding: 0 10px;
5357 cursor: pointer;
5358 border-width: 1px;
5359 border-style: solid;
5360 -webkit-appearance: none;
5361 border-radius: 3px;
5362 white-space: nowrap;
5363 box-sizing: border-box;
5364 }
5365
5366 .sp-lcp-options .spf-field-select .spf-fieldset {
5367 position: relative;
5368 }
5369
5370 .spf-field.spf-field-custom_import.pcp_import .spf-fieldset {
5371 position: relative;
5372 }
5373
5374 .spf-field.spf-field-custom_import.pcp_import p {
5375 padding-bottom: 0;
5376 margin-bottom: 1px;
5377 }
5378
5379 .spf-field.spf-field-custom_import.pcp_import button {
5380 margin-top: 10px;
5381 padding-bottom: 0px;
5382 }
5383
5384 .spf-field.spf-field-custom_import.pcp_import .spf-help {
5385 cursor: help;
5386 position: absolute;
5387 top: 80%;
5388 transform: translateY(-50%);
5389 padding: 5px;
5390 font-size: 14px;
5391 color: #aaa;
5392 width: 15px;
5393 left: 64px;
5394 }
5395
5396 .spf-field.spf-field-select.pcp_post_ids .chosen-container .chosen-drop {
5397 max-width: 400px;
5398 }
5399
5400 .spf-field.spf-field-select.pcp_post_ids .chosen-container {
5401 max-width: 400px;
5402 }
5403
5404 .spf-field.spf-field-select.pcp_post_ids {
5405 padding-top: 0;
5406 }
5407
5408
5409 .sp-pc-settings .spf-header-inner h1.export-import img {
5410 float: left;
5411 margin-right: 8px;
5412 height: 1.5em;
5413 }
5414
5415
5416 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(1) a {
5417 background-image: url(../img/export-icon.svg);
5418 }
5419
5420 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(2) a {
5421 background-image: url(../img/import.svg);
5422 }
5423
5424 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(1) a.spf-section-active {
5425 background-image: url(../img/file-export-icon1.svg);
5426 }
5427
5428 .sp-pc-settings.pcp_tools .spf-nav-options li:nth-child(2) a.spf-section-active {
5429 background-image: url(../img/file-import-icon1.svg);
5430 }
5431
5432 .sp-pc-settings.pcp_tools .spf-nav-options ul li a {
5433 padding: 15px 30px;
5434 background-size: 14px;
5435 background-position: 10px center;
5436 background-repeat: no-repeat;
5437 }
5438 .pcp_custom_meta_date_format input {
5439 width: 200px;
5440 }
5441