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

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

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