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

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