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

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