PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 1.5.4
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v1.5.4
2.1.3 2.1.2 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 trunk 1.0.1 1.1.0 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.3.0 All 57 releases
darkify / src / Admin / Framework / assets / css / style.css

style.css in Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) 1.5.4, at src/Admin/Framework/assets/css/style.css

6,647 lines 137.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 *
3 * ---------------------------------------------------------
4 * CODESTAR 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 Settings
18 * 01. 11. Search Input
19 * 01. 12. Metabox
20 * 01. 13. Comment Metabox
21 * 01. 14. Help Tooltip
22 * 02. Themes
23 * 02. 01. Theme Dark
24 * 02. 02. Theme Light
25 * 03. Fields
26 * 03. 01. Field
27 * 03. 02. Field: accordion
28 * 03. 03. Field: background
29 * 03. 04. Field: backup
30 * 03. 05. Field: border, spacing, dimensions
31 * 03. 06. Field: button_set
32 * 03. 07. Field: checkbox, radio
33 * 03. 08. Field: code_editor
34 * 03. 09. Field: color
35 * 03. 10. Field: color_group
36 * 03. 11. Field: fieldset
37 * 03. 12. Field: date
38 * 03. 13. Field: datetime
39 * 03. 14. Field: gallery
40 * 03. 15. Field: group
41 * 03. 16. Field: icon
42 * 03. 17. Field: image_select
43 * 03. 18. Field: link_color
44 * 03. 20. Field: media
45 * 03. 21. Field: palette
46 * 03. 22. Field: repeater
47 * 03. 23. Field: select
48 * 03. 24. Field: slider
49 * 03. 25. Field: sortable
50 * 03. 26. Field: sorter
51 * 03. 27. Field: spinner
52 * 03. 28. Field: switcher
53 * 03. 29. Field: tabbed
54 * 03. 30. Field: text
55 * 03. 31. Field: textarea
56 * 03. 33. Field: upload
57 * 03. 34. Field: wp_editor
58 * 03. 35. Field: heading
59 * 03. 36. Field: subheading
60 * 03. 37. Field: submessage
61 * 03. 38. Field: notice
62 * 03. 39. Field: number
63 * 03. 40. Field: link
64 * 03. 41. Field: others
65 * 03. 42. Field: darkify_tab
66 * 04. Widget
67 * 05. Customizer
68 * 06. Taxonomy
69 * 07. Profile
70 * 08. Nav Menu
71 * 09. Modal
72 * 09. 01. Shortcode Modal
73 * 09. 02. Gutenberg Modal
74 * 09. 03. Icon Modal
75 * 10. Helper
76 * 11. Welcome Page
77 * 12. Responsive
78 * 13. Others
79 *
80 * ---------------------------------------------------------
81 *
82 */
83 /**
84 * 01. Base
85 */
86 .darkify {
87 position: relative;
88 }
89 .darkify label {
90 padding: 0;
91 margin: 0;
92 display: inline-block;
93 }
94
95 .darkify-ab-icon {
96 top: 2px;
97 }
98
99 #screen-meta-links + .darkify-options {
100 margin-top: 40px;
101 }
102
103 .darkify-options {
104 margin-top: 20px;
105 margin-right: 20px;
106 }
107
108 /**
109 * 01. 01. Header
110 */
111 .darkify-header {
112 position: relative;
113 }
114
115 .darkify-header-inner h1 {
116 float: left;
117 font-size: 1.5em;
118 line-height: 26px;
119 font-weight: 400;
120 margin: 0;
121 }
122 .darkify-header-inner h1 small {
123 font-size: 11px;
124 font-weight: 500;
125 }
126
127 /**
128 * 01. 02. Sticky
129 */
130 .darkify-sticky .darkify-header-inner {
131 position: fixed;
132 z-index: 99;
133 top: 32px;
134 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
135 }
136
137 /**
138 * 01. 03. Header Buttons
139 */
140 .darkify-buttons {
141 float: right;
142 }
143 .darkify-buttons .button {
144 margin: 0 2px;
145 line-height: 26px;
146 }
147 .darkify-buttons .button:focus {
148 outline: none !important;
149 box-shadow: none !important;
150 }
151 .darkify-buttons .darkify-save {
152 min-width: 72px;
153 }
154 .darkify-buttons .button.button-primary.darkify-save-ajax {
155 background-color: #c5c5c6;
156 pointer-events: none;
157 }
158 /**
159 * Header Custom Css
160 */
161 .darkify-header-left {
162 float: left;
163 width: 100%;
164 padding-left: 20px;
165 display: flex;
166 align-items: center;
167 }
168 .darkify-header-left img {
169 max-width: 45px;
170 float: left;
171 margin-right: 10px;
172 }
173 .darkify-version {
174 background: #f5f5f5;
175 padding: 5px 14px;
176 margin-left: 8px;
177 border-radius: 15px;
178 border: 1px solid #17171729;
179 }
180
181 .darkify-buttons .button {
182 padding: 6px 15px;
183 font-size: 13px;
184 text-transform: uppercase;
185 font-weight: 500;
186 }
187
188 .darkify-buttons .button.button-primary {
189 background: #171717;
190 border-color: #171717;
191 width: 170px;
192 transition: background-color 0.2s;
193 }
194
195 .darkify-buttons .button.button-secondary {
196 background: #e7e7e7;
197 border-color: #171717;
198 color: #171717;
199 }
200
201 .darkify-header-right {
202 float: right;
203 width: 100%;
204 padding-right: 20px;
205 display: flex;
206 justify-content: flex-end;
207 }
208 .darkify-header-right .darkify-buttons .button {
209 padding-left: 40px;
210 background-repeat: no-repeat;
211 background-size: 20px;
212 background-position: 10px center;
213 margin: 0 4px;
214 }
215
216 html[dir="rtl"] .darkify-header-right .darkify-buttons .button {
217 padding-right: 40px;
218 }
219
220 .darkify-header-right .darkify-buttons .button.button-primary.darkify-top-save {
221 background-image: url(../images/save-icon.svg);
222 border-color: transparent;
223 }
224 .darkify-header-right
225 .darkify-buttons
226 .button.button-primary.darkify-top-save:hover {
227 background-color: #050505;
228 }
229
230 .darkify-header-right
231 .darkify-buttons
232 .button.button-secondary.darkify-reset-section {
233 background-color: #cd3c3c;
234 border-color: transparent;
235 color: #fff;
236 background-image: url(../images/reset-icon.svg);
237 }
238 .darkify-header-right
239 .darkify-buttons
240 .button.button-secondary.darkify-reset-section:hover {
241 background-color: #b82f2f;
242 }
243
244 /**
245 * 01. 04. Navigation
246 */
247 .darkify-nav {
248 display: block;
249 position: relative;
250 z-index: 10;
251 float: left;
252 }
253 .darkify-nav ul {
254 clear: left;
255 margin: 0;
256 list-style-type: none;
257 }
258 .darkify-nav ul li {
259 margin-bottom: 0;
260 }
261 .darkify-nav ul li a {
262 font-size: 13px;
263 position: relative;
264 display: block;
265 padding: 14px 12px;
266 text-decoration: none;
267 transition-property: color, background;
268 transition-duration: 0.2s;
269 transition-timing-function: ease;
270 }
271 .darkify-nav ul li a:focus {
272 outline: none;
273 box-shadow: none;
274 }
275 .darkify-nav ul li .darkify-arrow:after {
276 content: "\f054";
277 display: inline-block;
278 font-family: "IcoFont";
279 font-weight: 900;
280 font-size: 9px;
281 line-height: 1;
282 position: absolute;
283 right: 10px;
284 top: 50%;
285 margin-top: -4px;
286 }
287 .darkify-nav ul li.darkify-tab-expanded .darkify-arrow:after {
288 transform: rotate(90deg);
289 }
290 .darkify-nav ul li.darkify-tab-expanded ul {
291 display: block;
292 }
293 .darkify-nav ul ul {
294 display: none;
295 position: relative;
296 }
297 .darkify-nav ul ul li a {
298 font-size: 12px;
299 padding: 12px 14px 12px 24px;
300 }
301 .darkify-nav .darkify-tab-icon {
302 width: 20px;
303 margin-right: 5px;
304 font-size: 16px;
305 text-align: center;
306 }
307 html[dir="rtl"] .darkify-nav .darkify-tab-icon {
308 margin-left: 5px;
309 }
310 .darkify-nav .darkify-label-error {
311 margin-left: 4px;
312 vertical-align: top;
313 }
314
315 .darkify-nav-normal {
316 width: 225px;
317 }
318 .darkify-nav-normal + .darkify-content {
319 margin-left: 225px;
320 }
321
322 .darkify-nav-inline {
323 width: 100%;
324 }
325 .darkify-nav-inline ul li {
326 display: inline-block;
327 vertical-align: top;
328 }
329
330 .darkify-nav-background {
331 position: absolute;
332 top: 0;
333 left: 0;
334 bottom: 0;
335 z-index: 9;
336 width: 225px;
337 }
338
339 /**
340 * Navigation Custom Css
341 */
342 .darkify-admin-header {
343 display: flex;
344 justify-content: space-between;
345 align-items: center;
346 order: 1;
347 width: 100%;
348 height: 80px;
349 background-color: #fff;
350 border-radius: 4px;
351 box-shadow: 0 0 20px 0 rgba(36, 39, 50, 0.08);
352 }
353
354 /**
355 * 01. 05. Wrapper
356 */
357 .darkify-wrapper {
358 position: relative;
359 margin-top: 30px;
360 }
361
362 /**
363 * 01. 06. Content
364 */
365 .darkify-content {
366 position: relative;
367 }
368
369 /**
370 * 01. 07. Section
371 */
372 .darkify-sections {
373 float: left;
374 width: 100%;
375 }
376
377 .darkify-section-title {
378 display: none;
379 padding: 20px 30px;
380 background-color: #f5f5f5;
381 border-top: 1px solid #eee;
382 border-bottom: 1px solid #eee;
383 }
384 .darkify-section-title h3 {
385 margin: 0;
386 padding: 0;
387 font-size: 13px;
388 font-weight: bold;
389 text-transform: uppercase;
390 }
391 .darkify-section-title .darkify-section-icon {
392 margin-right: 5px;
393 }
394
395 /**
396 * 01. 08. Footer
397 */
398 .darkify-footer {
399 padding: 20px;
400 font-size: 11px;
401 }
402
403 /**
404 * 01. 09. Copyright
405 */
406 .darkify-copyright {
407 float: left;
408 margin-top: 5px;
409 }
410
411 /**
412 * 01. 10. Show All Settings
413 */
414 .darkify-search-all .darkify-nav-background,
415 .darkify-search-all .darkify-nav,
416 .darkify-show-all .darkify-nav-background,
417 .darkify-show-all .darkify-nav {
418 display: none;
419 }
420 .darkify-search-all .darkify-content,
421 .darkify-show-all .darkify-content {
422 margin-left: 0;
423 }
424 .darkify-search-all .darkify-section-title,
425 .darkify-search-all .darkify-section,
426 .darkify-show-all .darkify-section-title,
427 .darkify-show-all .darkify-section {
428 display: block !important;
429 }
430
431 .darkify-search-all .darkify-section-title {
432 display: none !important;
433 }
434
435 .darkify-expand-all {
436 float: left;
437 padding: 0 8px;
438 margin-right: 4px;
439 z-index: 1;
440 font-size: 13px;
441 line-height: 30px;
442 cursor: pointer;
443 user-select: none;
444 border-radius: 2px;
445 transition: all 0.2s;
446 }
447 .darkify-expand-all span {
448 font-size: 11px;
449 vertical-align: middle;
450 }
451
452 /**
453 * 01. 11. Search Input
454 */
455 .darkify-search {
456 float: left;
457 }
458 .darkify-search input {
459 margin: 0 2px 0 0;
460 border: none;
461 font-size: 12px;
462 line-height: 30px;
463 min-height: 30px;
464 text-align: inherit;
465 padding: 0 10px;
466 border-radius: 2px;
467 box-shadow: none;
468 }
469 .darkify-search input:focus {
470 box-shadow: none;
471 }
472
473 .darkify-saving .darkify-buttons,
474 .darkify-saving .darkify-content {
475 cursor: default;
476 pointer-events: none;
477 opacity: 0.75;
478 }
479
480 /**
481 * 01. 12. Metabox
482 */
483 .darkify-metabox {
484 margin: -6px -12px -12px -12px;
485 }
486 .darkify-metabox .darkify-field {
487 padding: 20px;
488 }
489 .darkify-metabox .darkify-section-title {
490 padding: 20px;
491 }
492
493 .block-editor-page .darkify-metabox {
494 margin: -6px -14px -14px -14px;
495 }
496
497 .block-editor-editor-skeleton__content .darkify-metabox {
498 border-left: 1px solid #e2e4e7;
499 border-right: 1px solid #e2e4e7;
500 }
501
502 .darkify-sections-reset {
503 float: left;
504 width: 100%;
505 text-align: right;
506 border-top: 1px solid #eee;
507 }
508 .darkify-sections-reset .darkify-button-cancel,
509 .darkify-sections-reset input {
510 display: none;
511 }
512 .darkify-sections-reset label {
513 padding: 10px;
514 }
515 .darkify-sections-reset span {
516 -webkit-user-select: none;
517 user-select: none;
518 }
519 .darkify-sections-reset input:checked ~ .darkify-button-reset {
520 display: none;
521 }
522 .darkify-sections-reset input:checked ~ .darkify-button-cancel {
523 display: inline-block;
524 }
525
526 #side-sortables .darkify-section-title {
527 padding: 12px;
528 }
529 #side-sortables .darkify-field {
530 padding: 10px 15px;
531 }
532 #side-sortables .darkify-field .darkify-title {
533 float: none;
534 width: 100%;
535 margin-bottom: 6px;
536 }
537 #side-sortables .darkify-field .darkify-fieldset {
538 float: none;
539 width: 100%;
540 }
541 #side-sortables .darkify-field-text input {
542 width: 100%;
543 }
544 #side-sortables .darkify-notice {
545 padding: 10px 15px;
546 }
547
548 /**
549 * 01. 13. Comment Metabox
550 */
551 .darkify-comment-metabox {
552 margin: -6px -12px -12px -12px;
553 }
554 .darkify-comment-metabox .darkify-field {
555 padding: 20px;
556 }
557 .darkify-comment-metabox .darkify-section-title {
558 padding: 20px;
559 }
560
561 /**
562 * 01. 14. Help Tooltip
563 */
564 .darkify-tooltip {
565 position: absolute;
566 z-index: 5000001;
567 text-align: left;
568 text-decoration: none;
569 max-width: 250px;
570 background-color: rgb(12, 25, 36);
571 border-radius: 5px;
572 padding: 15px;
573 color: #94b2c1;
574 font-size: 14px;
575 line-height: 20px;
576 }
577
578 .darkify-tooltip:has(video) {
579 max-width: 560px;
580 max-height: 345px;
581 }
582
583 .darkify-tooltip .darkify-img-tag video {
584 height: 315px;
585 display: inline-block;
586 vertical-align: middle;
587 }
588
589 .darkify-tooltip .darkify-short-content {
590 margin-top: 8px;
591 }
592
593 .darkify-tooltip .tooltip_btn_secondary,
594 .darkify-tooltip .tooltip_btn_primary {
595 margin-top: 10px;
596 display: inline-block;
597 line-height: 34px;
598 background-color: #1a74e4;
599 border-radius: 3px;
600 padding: 0 12px;
601 font-size: 11px;
602 text-transform: capitalize;
603 text-decoration: none;
604 color: #fff;
605 margin-bottom: 0px;
606 font-weight: 500;
607 }
608
609 .darkify-tooltip .tooltip_btn_secondary {
610 background-color: transparent;
611 border: 2px solid #1a74e4;
612 line-height: 32px;
613 color: #1a74e4;
614 margin-left: 10px;
615 }
616
617 .darkify-tooltip .tooltip_btn_primary:hover,
618 .darkify-tooltip .tooltip_btn_secondary:hover {
619 background-color: #1a74e4;
620 border-color: #1a74e4;
621 color: #ffffff;
622 }
623
624 .darkify-tooltip .darkify-info-label {
625 color: #fff;
626 font-size: 14px;
627 line-height: 20px;
628 font-weight: 500;
629 text-transform: capitalize;
630 margin-top: 0px;
631 }
632
633 .darkify-tooltip:has(video) .darkify-info-label {
634 padding-top: 11px;
635 font-size: 15px;
636 font-weight: 600;
637 }
638
639 .darkify-tooltip .tooltip_btn_primary {
640 margin-top: 10px;
641 }
642
643 .darkify-tooltip .darkify-img-tag {
644 margin-bottom: 6px;
645 /* min-width: 240px; */
646 }
647
648 .darkify-tooltip .darkify-img-tag img {
649 width: 100%;
650 }
651
652 .darkify-field-subheading .darkify-title {
653 width: 100%;
654 }
655
656 .darkify-help-text.darkify-support {
657 display: none;
658 }
659
660 .darkify-tooltip.support-tooltip {
661 max-width: 300px;
662 }
663
664 .darkify-tooltip.support-tooltip a.tooltip_btn_primary {
665 width: 100%;
666 box-sizing: border-box;
667 text-align: center;
668 padding: 8px 8px 8px 8px;
669 margin-bottom: 20px;
670 margin-top: 20px;
671 font-size: 13px;
672 line-height: 20px;
673 }
674
675 .darkify-tooltip.support-tooltip a.tooltip_btn_primary.support {
676 background: #fff;
677 color: #000;
678 }
679
680 .darkify-tooltip.support-tooltip a.tooltip_btn_primary.support:hover {
681 background: #f5f5f5;
682 }
683
684 .darkify-tooltip.support-tooltip a.tooltip_btn_primary.feature-request {
685 background: transparent;
686 color: #1a74e4;
687 border: 2px solid #1a74e4;
688 text-transform: none;
689 }
690
691 .darkify-tooltip.support-tooltip a.tooltip_btn_primary.feature-request:hover {
692 background: #1a74e4;
693 color: #fff;
694 border: 2px solid #1a74e4;
695 }
696
697 .darkify-tooltip.support-tooltip .darkify-info-label {
698 text-transform: none;
699 }
700
701 .darkify-tooltip:before {
702 content: "";
703 width: 0;
704 position: absolute;
705 height: 0;
706 width: 0;
707 height: 0;
708 border-top: 10px solid transparent;
709 border-bottom: 10px solid transparent;
710 border-right: 10px solid rgba(12, 25, 36, 0.85);
711 left: -10px;
712 top: calc(50% - 7px);
713 }
714
715 span.tooltip-icon {
716 width: 25px;
717 display: inline-block;
718 }
719
720 /**
721 * 02. Themes
722 */
723 /**
724 * 02. 01. Theme Dark
725 */
726 .darkify-theme-dark .darkify-header-inner {
727 background-color: #050505;
728 }
729 .darkify-theme-dark .darkify-header-inner h1 {
730 color: #fff;
731 }
732 .darkify-theme-dark .darkify-header-inner h1 small {
733 color: #555;
734 }
735 .darkify-theme-dark .darkify-expand-all {
736 color: #999;
737 background-color: #222;
738 }
739 .darkify-theme-dark .darkify-expand-all:hover {
740 color: #fff;
741 background-color: #333;
742 }
743 .darkify-theme-dark .darkify-search input {
744 color: #fff;
745 background-color: #222;
746 }
747 .darkify-theme-dark .darkify-search:focus {
748 background-color: #444;
749 }
750 .darkify-theme-dark .darkify-search::-webkit-input-placeholder {
751 color: #666;
752 }
753 .darkify-theme-dark .darkify-nav ul li a {
754 color: #999;
755 border-color: #2f2f2f;
756 background-color: #222;
757 }
758 .darkify-theme-dark .darkify-nav ul li a:hover {
759 color: #fff;
760 }
761 .darkify-theme-dark .darkify-nav ul li .darkify-active {
762 color: #fff;
763 background-color: #111;
764 }
765 .darkify-theme-dark .darkify-nav ul ul li a {
766 border-color: #2f2f2f;
767 background-color: #191919;
768 }
769 .darkify-theme-dark .darkify-nav ul ul li .darkify-active {
770 background-color: #101010;
771 }
772 .darkify-theme-dark .darkify-nav ul ul:before {
773 background-color: rgba(34, 34, 34, 0.75);
774 }
775 .darkify-theme-dark .darkify-nav > ul > li:last-child > a {
776 border: none;
777 }
778 .darkify-theme-dark .darkify-nav-normal ul li a {
779 border-bottom-width: 1px;
780 border-bottom-style: solid;
781 }
782 .darkify-theme-dark .darkify-nav-normal ul li .darkify-active:after {
783 content: " ";
784 position: absolute;
785 right: 0;
786 top: 50%;
787 height: 0;
788 width: 0;
789 pointer-events: none;
790 border: solid transparent;
791 border-right-color: #fff;
792 border-width: 4px;
793 margin-top: -4px;
794 }
795 .darkify-theme-dark .darkify-nav-inline {
796 background-color: #222;
797 }
798 .darkify-theme-dark .darkify-nav-inline ul li a {
799 text-align: center;
800 border-right-width: 1px;
801 border-right-style: solid;
802 }
803 .darkify-theme-dark .darkify-nav-inline ul li .darkify-active:after {
804 content: " ";
805 position: absolute;
806 left: 50%;
807 bottom: 0;
808 height: 0;
809 width: 0;
810 pointer-events: none;
811 border: solid transparent;
812 border-bottom-color: #fff;
813 border-width: 4px;
814 margin-left: -4px;
815 }
816 .darkify-theme-dark .darkify-nav-background {
817 background-color: #222;
818 }
819 .darkify-theme-dark .darkify-footer {
820 color: #555;
821 background-color: #050505;
822 }
823
824 /**
825 * 02. 02. Theme Light
826 */
827 .darkify-theme-light .darkify-header-inner {
828 background-color: #f5f5f5;
829 background: linear-gradient(#fefefe, #f5f5f5);
830 }
831 .darkify-theme-light .darkify-header-inner h1 small {
832 color: #999;
833 }
834 .darkify-theme-light .darkify-expand-all {
835 color: #999;
836 background-color: #eee;
837 }
838 .darkify-theme-light .darkify-expand-all:hover {
839 color: #555;
840 }
841 .darkify-theme-light .darkify-search input {
842 color: #555;
843 background-color: #eee;
844 }
845 .darkify-theme-light .darkify-search input::-webkit-input-placeholder {
846 color: #999;
847 }
848 .darkify-theme-light .darkify-nav ul li a {
849 font-weight: 500;
850 color: #444;
851 background-color: #f5f5f5;
852 }
853
854 .darkify-theme-light .darkify-nav ul li .darkify-active {
855 color: #111;
856 background-color: #fff;
857 }
858 .darkify-theme-light .darkify-nav ul ul li a {
859 background-color: #eee;
860 }
861 .darkify-theme-light .darkify-nav-normal > ul {
862 margin-right: -1px;
863 margin-bottom: -1px;
864 }
865 .darkify-theme-light .darkify-nav-normal > ul li a {
866 border-bottom: 1px solid #ccd0d4;
867 border-right: 1px solid #ccd0d4;
868 }
869 .darkify-theme-light .darkify-nav-normal > ul li .darkify-active {
870 border-right-color: #fff;
871 }
872 .darkify-theme-light .darkify-nav-inline {
873 background-color: #f5f5f5;
874 border-bottom: 1px solid #ccd0d4;
875 }
876 .darkify-theme-light .darkify-nav-inline > ul {
877 margin-bottom: -1px;
878 }
879 .darkify-theme-light .darkify-nav-inline > ul li a {
880 text-align: center;
881 border-right: 1px solid #ccd0d4;
882 border-bottom: 1px solid #ccd0d4;
883 }
884 .darkify-theme-light .darkify-nav-inline > ul li .darkify-active {
885 border-bottom-color: #fff;
886 }
887 .darkify-theme-light .darkify-nav-inline > ul ul {
888 display: none !important;
889 }
890 .darkify-theme-light .darkify-nav-inline .darkify-arrow:after {
891 display: none;
892 }
893 .darkify-theme-light .darkify-nav-background {
894 background-color: #f5f5f5;
895 border-right: 1px solid #ccd0d4;
896 }
897 .darkify-theme-light .darkify-footer {
898 color: #555;
899 border-top: 1px solid #ccd0d4;
900 background-color: #f5f5f5;
901 background: linear-gradient(#fafafa, #f5f5f5);
902 }
903
904 /**
905 * 03. Fields
906 */
907 .darkify-field {
908 position: relative;
909 padding: 30px;
910 }
911 .darkify-field + .darkify-field {
912 border-top: 1px solid #eee;
913 }
914 .darkify-field-fieldset .darkify-field + .darkify-field {
915 border-top: none;
916 }
917 .darkify-field.darkify-field-fieldset {
918 padding-top: 15px;
919 padding-bottom: 15px;
920 }
921 .darkify-field.darkify-field-fieldset
922 .darkify-fieldset-content
923 > .darkify-field {
924 padding-left: 0px;
925 padding-right: 0px;
926 }
927 .darkify-field p:first-child {
928 margin-top: 0;
929 }
930 .darkify-field p:last-child {
931 margin-bottom: 0;
932 }
933 .darkify-field:after,
934 .darkify-field:before {
935 content: " ";
936 display: table;
937 }
938 .darkify-field:after {
939 clear: both;
940 }
941 .darkify-field h4 {
942 margin-top: 0;
943 }
944 .darkify-field .darkify-title {
945 position: relative;
946 width: 20%;
947 float: left;
948 }
949 .darkify-field .darkify-title h4 {
950 margin: 0;
951 color: #23282d;
952 }
953 .darkify-field .darkify-fieldset {
954 float: right;
955 width: calc(80% - 20px);
956 }
957
958 .darkify-pseudo-field {
959 padding: 0 5px 0 0 !important;
960 display: inline-block;
961 }
962 .darkify-pseudo-field + .darkify-pseudo-field {
963 border: 0;
964 }
965 .darkify-pseudo-field pre {
966 display: none;
967 }
968
969 /**
970 * 03. 02. Field: accordion
971 */
972 .darkify-field-accordion .darkify-accordion-item {
973 position: relative;
974 margin-bottom: 5px;
975 }
976 .darkify-field-accordion .darkify-accordion-item:last-child {
977 margin-bottom: 0;
978 }
979 .darkify-field-accordion .darkify-accordion-item h4 {
980 font-size: 1em;
981 }
982 .darkify-field-accordion .darkify-accordion-title {
983 display: block;
984 cursor: pointer;
985 position: relative;
986 margin: 0;
987 padding: 15px;
988 min-height: 0;
989 font-size: 100%;
990 user-select: none;
991 border: 1px solid #ccd0d4;
992 background-color: #fafafa;
993 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
994 transition: border-color 0.15s;
995 }
996 .darkify-field-accordion .darkify-accordion-title:active,
997 .darkify-field-accordion .darkify-accordion-title:hover,
998 .darkify-field-accordion .darkify-accordion-title:focus {
999 outline: none;
1000 border-color: #999;
1001 }
1002 .darkify-field-accordion .darkify-accordion-title .darkify--icon {
1003 width: 20px;
1004 text-align: center;
1005 margin-right: 2px;
1006 }
1007 .darkify-field-accordion .darkify-accordion-icon {
1008 width: 16px;
1009 text-align: center;
1010 }
1011 .darkify-field-accordion .darkify-accordion-content {
1012 display: none;
1013 padding: 0;
1014 border: 1px solid #ccd0d4;
1015 border-top: none;
1016 background-color: #fff;
1017 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1018 }
1019 .darkify-field-accordion .darkify-accordion-content > .darkify-field {
1020 padding: 15px;
1021 }
1022 .darkify-field-accordion .darkify-accordion-open {
1023 display: block;
1024 }
1025
1026 /**
1027 * 03. 03. Field: background
1028 */
1029 .darkify-field-background .darkify-field {
1030 border: 0 !important;
1031 padding: 0;
1032 margin-bottom: 6px;
1033 margin-right: 6px;
1034 }
1035 .darkify-field-background .darkify--title {
1036 color: #777;
1037 font-size: 12px;
1038 }
1039 .darkify-field-background .darkify--background-colors {
1040 display: flex;
1041 flex-wrap: wrap;
1042 }
1043 .darkify-field-background .darkify--background-attributes {
1044 display: flex;
1045 flex-wrap: wrap;
1046 }
1047 .darkify-field-background .darkify--background-attributes select {
1048 min-width: 100%;
1049 margin: 0;
1050 }
1051 .darkify-field-background .darkify--background-attributes .darkify-field {
1052 flex: 1;
1053 }
1054 .darkify-field-background .darkify--attributes-hidden {
1055 display: none;
1056 }
1057
1058 /**
1059 * 03. 04. Field: backup
1060 */
1061 .darkify-field-backup textarea {
1062 width: 100%;
1063 min-height: 200px;
1064 margin-bottom: 5px;
1065 }
1066 .darkify-field-backup small {
1067 display: inline-block;
1068 margin: 5px;
1069 }
1070 .darkify-field-backup hr {
1071 margin: 20px 0;
1072 border: none;
1073 border-bottom: 1px solid #e5e5e5;
1074 }
1075
1076 /**
1077 * 03. 05. Field: border, spacing, dimensions
1078 */
1079 /* .darkify-field-border .darkify--inputs,
1080 .darkify-field-spacing .darkify--inputs,
1081 .darkify-field-dimensions .darkify--inputs {
1082 float: left;
1083 display: flex;
1084 flex-wrap: wrap;
1085 }
1086 .darkify-field-border .darkify--input,
1087 .darkify-field-spacing .darkify--input,
1088 .darkify-field-dimensions .darkify--input {
1089 display: flex;
1090 padding-right: 6px;
1091 padding-bottom: 4px;
1092 box-sizing: border-box;
1093 }
1094 .darkify-field-border .darkify--input select,
1095 .darkify-field-spacing .darkify--input select,
1096 .darkify-field-dimensions .darkify--input select {
1097 margin: 0;
1098 }
1099 .darkify-field-border .darkify--input input,
1100 .darkify-field-spacing .darkify--input input,
1101 .darkify-field-dimensions .darkify--input input {
1102 position: relative;
1103 z-index: 1;
1104 margin: 0;
1105 width: 65px;
1106 max-width: 100%;
1107 text-align: center;
1108 }
1109 .darkify-field-border .darkify--color,
1110 .darkify-field-spacing .darkify--color,
1111 .darkify-field-dimensions .darkify--color {
1112 float: left;
1113 }
1114 .darkify-field-border .darkify--label,
1115 .darkify-field-spacing .darkify--label,
1116 .darkify-field-dimensions .darkify--label {
1117 display: flex;
1118 flex-direction: column;
1119 justify-content: center;
1120 user-select: none;
1121 min-width: 20px;
1122 max-width: 100%;
1123 padding: 0 4px;
1124 font-size: 12px;
1125 text-align: center;
1126 color: #555;
1127 border: 1px solid #7b776c;
1128 background-color: #f5f5f5;
1129 }
1130 .darkify-field-border .darkify--icon,
1131 .darkify-field-spacing .darkify--icon,
1132 .darkify-field-dimensions .darkify--icon {
1133 border-right: 0;
1134 border-radius: 4px 0 0 4px;
1135 }
1136 .darkify-field-border .darkify--icon + input,
1137 .darkify-field-spacing .darkify--icon + input,
1138 .darkify-field-dimensions .darkify--icon + input {
1139 border-top-left-radius: 0 !important;
1140 border-bottom-left-radius: 0 !important;
1141 }
1142 .darkify-field-border .darkify--unit,
1143 .darkify-field-spacing .darkify--unit,
1144 .darkify-field-dimensions .darkify--unit {
1145 border-left: 0;
1146 border-radius: 0 4px 4px 0;
1147 }
1148 .darkify-field-border .darkify--is-unit,
1149 .darkify-field-spacing .darkify--is-unit,
1150 .darkify-field-dimensions .darkify--is-unit {
1151 border-top-right-radius: 0 !important;
1152 border-bottom-right-radius: 0 !important;
1153 } */
1154
1155 .darkify-field + .darkify-field.darkify-field-box_shadow:not(.hidden),
1156 .darkify-field + .darkify-field.darkify-field-dimensions:not(.hidden),
1157 .darkify-field + .darkify-field.darkify-field-color_group:not(.hidden),
1158 .darkify-field + .darkify-field.darkify-field-border:not(.hidden) {
1159 padding-top: 36px;
1160 }
1161
1162 .darkify-field-border .darkify--left,
1163 .darkify-field-spacing .darkify--left,
1164 .darkify-field-column .darkify--left,
1165 .darkify-field-dimensions_res .darkify--left,
1166 .darkify-field-dimensions .darkify--left {
1167 float: left;
1168 }
1169
1170 /* .darkify-field-border .darkify--inputs,
1171 .darkify-field-spacing .darkify--inputs,
1172 .darkify-field-column .darkify--inputs,
1173 .darkify-field-dimensions_res .darkify--inputs,
1174 .darkify-field-dimensions .darkify--inputs {
1175 float: left;
1176 margin-right: 10px;
1177 margin-bottom: 7px;
1178 } */
1179 .darkify-field-box_shadow .darkify--inputs,
1180 .darkify-field-border .darkify--inputs,
1181 .darkify-field-spacing .darkify--inputs,
1182 .darkify-field-column .darkify--inputs,
1183 .darkify-field-dimensions_res .darkify--inputs,
1184 .darkify-field-dimensions .darkify--inputs {
1185 float: left;
1186 display: flex;
1187 flex-wrap: wrap;
1188 }
1189
1190 .darkify-field-box_shadow .darkify--input,
1191 .darkify-field-border .darkify--input,
1192 .darkify-field-spacing .darkify--input,
1193 .darkify-field-column .darkify--input,
1194 .darkify-field-dimensions_res .darkify--input,
1195 .darkify-field-dimensions .darkify--input {
1196 display: flex;
1197 padding-right: 6px;
1198 padding-bottom: 4px;
1199 box-sizing: border-box;
1200 }
1201
1202 .darkify-field-border .darkify--input select,
1203 .darkify-field-spacing .darkify--input select,
1204 .darkify-field-column .darkify--input select,
1205 .darkify-field-dimensions_res .darkify--input select,
1206 .darkify-field-dimensions .darkify--input select {
1207 margin: 0;
1208 }
1209
1210 .darkify-field-spinner input,
1211 .darkify-field-box_shadow .darkify--input input,
1212 .darkify-field-border .darkify--input input,
1213 .darkify-field-spacing .darkify--input input,
1214 .darkify-field-column .darkify--input input,
1215 .darkify-field-dimensions_res .darkify--input input,
1216 .darkify-field-dimensions .darkify--input input {
1217 position: relative;
1218 z-index: 1;
1219 margin: 0;
1220 width: 65px;
1221 max-width: 100%;
1222 text-align: center;
1223 padding: 0;
1224 border-color: #7b776c;
1225 }
1226
1227 .darkify-field-dimensions .darkify--input input {
1228 border-top-right-radius: 3px;
1229 border-bottom-right-radius: 3px;
1230 }
1231
1232 .darkify-field-box_shadow .darkify--color,
1233 .darkify-field-border .darkify--color,
1234 .darkify-field-spacing .darkify--color,
1235 .darkify-field-column .darkify--color,
1236 .darkify-field-dimensions .darkify--color,
1237 .darkify-field-dimensions_res .darkify--color {
1238 float: left;
1239 }
1240
1241 .darkify-field-dimensions_res .darkify--input input {
1242 border-radius: 0 3px 3px 0;
1243 }
1244
1245 .darkify-field-box_shadow .darkify--label,
1246 .darkify-field-border .darkify--label,
1247 .darkify-field-spacing .darkify--label,
1248 .darkify-field-column .darkify--label,
1249 .darkify-field-dimensions .darkify--label,
1250 .darkify-field-dimensions_res .darkify--label {
1251 display: flex;
1252 flex-direction: column;
1253 justify-content: center;
1254 user-select: none;
1255 min-width: 20px;
1256 max-width: 100%;
1257 padding: 0 4px;
1258 font-size: 12px;
1259 text-align: center;
1260 color: #555;
1261 border: 1px solid #7b776c;
1262 background-color: #f5f5f5;
1263 }
1264
1265 /* .darkify-field-dimensions .darkify--label.darkify--icon,
1266 .darkify-field-spacing .darkify--label.darkify--icon, */
1267 .darkify-field-border .darkify--label.darkify--icon,
1268 .darkify-field-box_shadow .darkify--label.darkify--icon {
1269 font-size: 16px;
1270 }
1271
1272 .darkify-field-border .darkify--icon,
1273 .darkify-field-spacing .darkify--icon,
1274 .darkify-field-dimensions .darkify--icon,
1275 .darkify-field-box_shadow .darkify--icon,
1276 .darkify-field-border .darkify--icon,
1277 .darkify-field-spacing .darkify--icon,
1278 .darkify-field-column .darkify--icon,
1279 .darkify-field-dimensions_res .darkify--icon,
1280 .darkify-field-dimensions .darkify--icon {
1281 border-right: 0;
1282 border-radius: 4px 0 0 4px;
1283 }
1284
1285 .darkify-field-box_shadow .darkify--icon + input,
1286 .darkify-field-border .darkify--icon + input,
1287 .darkify-field-spacing .darkify--icon + input,
1288 .darkify-field-column .darkify--icon + input,
1289 .darkify-field-dimensions_res .darkify--icon + input,
1290 .darkify-field-dimensions .darkify--icon + input {
1291 border-top-left-radius: 0;
1292 border-bottom-left-radius: 0;
1293 }
1294
1295 .darkify-field-box_shadow .darkify--unit,
1296 .darkify-field-border .darkify--unit,
1297 .darkify-field-spacing .darkify--unit,
1298 .darkify-field-column .darkify--unit,
1299 .darkify-field-dimensions .darkify--unit,
1300 .darkify-field-dimensions_res .darkify--unit {
1301 border-left: 0;
1302 border-radius: 0 4px 4px 0;
1303 }
1304
1305 .darkify-field-box_shadow .darkify--is-unit,
1306 .darkify-field-border .darkify--is-unit,
1307 .darkify-field-spacing .darkify--is-unit,
1308 .darkify-field-column .darkify--is-unit,
1309 .darkify-field-dimensions_res .darkify--is-unit,
1310 .darkify-field-dimensions .darkify--is-unit {
1311 border-top-right-radius: 0;
1312 border-bottom-right-radius: 0;
1313 }
1314
1315 .darkify-field:not(.darkify-field-typography) .darkify--title {
1316 position: absolute;
1317 top: 16px;
1318 text-transform: capitalize;
1319 color: #999;
1320 margin-left: 2px;
1321 }
1322
1323 /**
1324 * 03. 06. Field: button_set
1325 */
1326 .darkify-field-button_set .darkify--buttons {
1327 display: inline-block;
1328 }
1329 .darkify-field-button_set .darkify--button {
1330 position: relative;
1331 z-index: 1;
1332 float: left;
1333 cursor: pointer;
1334 padding: 7px 14px;
1335 min-width: 16px;
1336 text-align: center;
1337 color: #555;
1338 border: 1px solid #cccccc;
1339 background-color: #f7f7f7;
1340 user-select: none;
1341 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
1342 }
1343 .darkify-field-button_set .darkify--button:first-child {
1344 border-radius: 4px 0 0 4px;
1345 }
1346 .darkify-field-button_set .darkify--button:last-child {
1347 border-radius: 0 4px 4px 0;
1348 }
1349 .darkify-field-button_set .darkify--button:not(:first-child) {
1350 margin-left: -1px;
1351 }
1352 .darkify-field-button_set .darkify--button:hover {
1353 background-color: #eee;
1354 }
1355 .darkify-field-button_set .darkify--active:hover,
1356 .darkify-field-button_set .darkify--active {
1357 z-index: 2;
1358 color: #fff;
1359 border-color: #1a74e4;
1360 background-color: #1a74e4;
1361 }
1362 .darkify-field-button_set input {
1363 display: none;
1364 }
1365
1366 /**
1367 * 03. 07. Field: checkbox, radio
1368 */
1369 .darkify-field-checkbox ul,
1370 .darkify-field-radio ul {
1371 margin: 0;
1372 padding: 0;
1373 list-style-type: none;
1374 overflow-y: auto;
1375 max-height: 305px;
1376 }
1377 .darkify-field-checkbox ul li,
1378 .darkify-field-radio ul li {
1379 margin-bottom: 6px;
1380 }
1381 .darkify-field-checkbox ul ul,
1382 .darkify-field-radio ul ul {
1383 max-height: none;
1384 }
1385 .darkify-field-checkbox ul ul li,
1386 .darkify-field-radio ul ul li {
1387 margin-left: 8px;
1388 }
1389 .darkify-field-checkbox ul ul li:first-child,
1390 .darkify-field-radio ul ul li:first-child {
1391 margin-left: 0;
1392 }
1393 .darkify-field-checkbox input,
1394 .darkify-field-radio input {
1395 margin: 0 1px;
1396 }
1397 .darkify-field-checkbox .darkify--inline-list li,
1398 .darkify-field-radio .darkify--inline-list li {
1399 display: inline-block;
1400 margin-right: 15px;
1401 }
1402 .darkify-field-checkbox .darkify--text,
1403 .darkify-field-radio .darkify--text {
1404 margin-left: 5px;
1405 vertical-align: middle;
1406 }
1407 .darkify-field-checkbox .darkify-checker,
1408 .darkify-field-radio .darkify-checker {
1409 cursor: pointer;
1410 }
1411 .darkify-field-checkbox .darkify-checkbox-all,
1412 .darkify-field-radio .darkify-checkbox-all {
1413 user-select: none;
1414 cursor: pointer;
1415 margin-top: 5px;
1416 font-weight: 500;
1417 text-decoration: none;
1418 }
1419
1420 /**
1421 * 03. 08. Field: code_editor
1422 */
1423 .darkify-field-code_editor .CodeMirror {
1424 width: 100%;
1425 height: 400px;
1426 }
1427 .darkify-field-code_editor .cm-s-default {
1428 border: 1px solid #ccd0d4;
1429 }
1430 .darkify-field-code_editor textarea {
1431 width: 100%;
1432 height: 400px;
1433 }
1434
1435 /**
1436 * 03. 09. Field: color
1437 */
1438 .darkify-field-color > input {
1439 opacity: 0.75;
1440 width: 115px;
1441 max-width: 100%;
1442 }
1443 .darkify-field-color .button.wp-picker-clear {
1444 padding: 0 8px;
1445 margin-left: 6px;
1446 line-height: 2.54545455;
1447 min-height: 30px;
1448 }
1449
1450 /**
1451 * 03. 10. Field: color_group
1452 */
1453 .darkify-field-color_group .darkify--left {
1454 float: left;
1455 margin-right: 10px;
1456 margin-bottom: 5px;
1457 }
1458 .darkify-field-color_group .darkify--title {
1459 color: #999;
1460 margin-bottom: 5px;
1461 }
1462
1463 /**
1464 * 03. 11. Field: fieldset
1465 */
1466 .darkify-field-fieldset .darkify-fieldset-content {
1467 background-color: #fff;
1468 }
1469 .darkify-field-fieldset .darkify-fieldset-content > .darkify-field {
1470 padding: 15px;
1471 }
1472 .darkify-field-fieldset .darkify-field-subheading {
1473 font-size: 13px;
1474 }
1475
1476 /**
1477 * 03. 12. Field: date
1478 */
1479 .darkify-field-date input {
1480 margin: 0;
1481 }
1482 .darkify-field-date .darkify--to {
1483 margin-left: 7px;
1484 }
1485
1486 .darkify-datepicker-wrapper {
1487 margin-top: 5px;
1488 width: auto;
1489 background-color: #fff;
1490 z-index: 9999999 !important;
1491 box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
1492 }
1493
1494 .darkify-datepicker-wrapper * {
1495 float: none;
1496 margin: 0;
1497 padding: 0;
1498 font-family: inherit;
1499 font-weight: normal;
1500 font-style: normal;
1501 text-decoration: none;
1502 border: 0;
1503 border-radius: 0;
1504 box-shadow: none;
1505 }
1506 .darkify-datepicker-wrapper .ui-widget-header,
1507 .darkify-datepicker-wrapper .ui-datepicker-header {
1508 color: #fff;
1509 background: #00a0d2;
1510 }
1511 .darkify-datepicker-wrapper .ui-datepicker-header .ui-state-hover {
1512 cursor: pointer;
1513 }
1514 .darkify-datepicker-wrapper .ui-datepicker-title {
1515 font-size: 14px;
1516 line-height: 40px;
1517 text-align: center;
1518 }
1519 .darkify-datepicker-wrapper .ui-datepicker-prev,
1520 .darkify-datepicker-wrapper .ui-datepicker-next {
1521 position: static;
1522 top: auto;
1523 left: auto;
1524 right: auto;
1525 font-family: "IcoFont";
1526 font-weight: 900;
1527 font-size: 12px;
1528 text-align: center;
1529 width: 41px;
1530 height: 40px;
1531 line-height: 40px;
1532 color: #fff;
1533 background-color: rgba(255, 255, 255, 0.1);
1534 text-rendering: auto;
1535 -webkit-font-smoothing: antialiased;
1536 -moz-osx-font-smoothing: grayscale;
1537 }
1538 .darkify-datepicker-wrapper .ui-datepicker-next span,
1539 .darkify-datepicker-wrapper .ui-datepicker-prev span {
1540 display: none;
1541 }
1542 .darkify-datepicker-wrapper .ui-datepicker-prev {
1543 float: left;
1544 }
1545 .darkify-datepicker-wrapper .ui-datepicker-next {
1546 float: right;
1547 }
1548 .darkify-datepicker-wrapper .ui-datepicker-prev:before {
1549 content: "\f053";
1550 }
1551 .darkify-datepicker-wrapper .ui-datepicker-next:before {
1552 content: "\f054";
1553 }
1554 .darkify-datepicker-wrapper .ui-datepicker-prev-hover,
1555 .darkify-datepicker-wrapper .ui-datepicker-next-hover {
1556 opacity: 0.75;
1557 }
1558 .darkify-datepicker-wrapper tbody .ui-datepicker-week-col {
1559 background-color: #f7f7f7;
1560 }
1561 .darkify-datepicker-wrapper .ui-datepicker-buttonpane {
1562 padding: 10px;
1563 text-align: center;
1564 background-color: #f7f7f7;
1565 }
1566 .darkify-datepicker-wrapper .ui-datepicker-buttonpane button {
1567 cursor: pointer;
1568 margin: 0 5px;
1569 padding: 7px 14px;
1570 border: 1px solid #eee;
1571 background-color: #fff;
1572 }
1573 .darkify-datepicker-wrapper select {
1574 margin: 0 4px;
1575 }
1576 .darkify-datepicker-wrapper select option {
1577 color: #555;
1578 }
1579 .darkify-datepicker-wrapper table {
1580 font-size: 13px;
1581 border-collapse: collapse;
1582 width: 100%;
1583 }
1584 .darkify-datepicker-wrapper thead {
1585 color: #fff;
1586 background: #32373c;
1587 }
1588 .darkify-datepicker-wrapper th {
1589 text-align: center;
1590 padding: 7px;
1591 border: 1px solid #444;
1592 }
1593 .darkify-datepicker-wrapper td {
1594 text-align: center;
1595 border: 1px solid #f4f4f4;
1596 }
1597 .darkify-datepicker-wrapper td.ui-datepicker-other-month {
1598 border: transparent;
1599 }
1600 .darkify-datepicker-wrapper td .ui-state-default {
1601 color: #555;
1602 width: auto;
1603 display: block;
1604 padding: 6px 12px;
1605 }
1606 .darkify-datepicker-wrapper td .ui-state-active,
1607 .darkify-datepicker-wrapper td .ui-state-hover {
1608 color: #fff;
1609 background-color: #0073aa;
1610 }
1611 .darkify-datepicker-wrapper td.ui-state-disabled .ui-state-default {
1612 opacity: 0.5;
1613 }
1614
1615 /**
1616 * 03. 13. Field: datetime
1617 */
1618 .darkify-field-datetime input {
1619 margin: 0;
1620 }
1621 .darkify-field-datetime .darkify--to {
1622 margin-left: 7px;
1623 }
1624
1625 .darkify-flatpickr select,
1626 .darkify-flatpickr input {
1627 min-height: auto;
1628 }
1629 .darkify-flatpickr select:focus,
1630 .darkify-flatpickr input:focus {
1631 box-shadow: none;
1632 }
1633 .darkify-flatpickr.open {
1634 z-index: 9999999 !important;
1635 }
1636 .enable_time_fields .darkify-fieldset-content {
1637 display: flex;
1638 gap: 20px;
1639 flex-wrap: wrap;
1640 }
1641 .enable_time_fields .darkify-fieldset-content .darkify-field-datetime {
1642 padding-top: 0;
1643 padding-bottom: 0;
1644 }
1645
1646 /**
1647 * 03. 14. Field: gallery
1648 */
1649 .darkify-field-gallery ul {
1650 margin: 0;
1651 padding: 0;
1652 list-style-type: none;
1653 }
1654 .darkify-field-gallery ul li {
1655 display: inline-block;
1656 position: relative;
1657 padding: 4px;
1658 margin: 0 5px 10px 0;
1659 border: 1px solid #ccc;
1660 background-color: #f9f9f9;
1661 border-radius: 2px;
1662 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1663 }
1664 .darkify-field-gallery ul li img {
1665 max-height: 60px;
1666 display: inline-block;
1667 vertical-align: middle;
1668 }
1669 .darkify-field-gallery .button {
1670 margin-right: 5px;
1671 margin-bottom: 5px;
1672 }
1673
1674 /**
1675 * 03. 15. Field: group
1676 */
1677 .darkify-field-group .darkify-cloneable-hidden {
1678 display: none !important;
1679 }
1680 .darkify-field-group .darkify-cloneable-wrapper {
1681 position: relative;
1682 }
1683 .darkify-field-group .darkify-cloneable-item {
1684 display: none;
1685 position: relative;
1686 margin-bottom: 5px;
1687 }
1688 .darkify-field-group .darkify-cloneable-item h4 {
1689 font-size: 1em;
1690 }
1691 .darkify-field-group .ui-accordion .darkify-cloneable-item {
1692 display: block;
1693 }
1694 .darkify-field-group .darkify-cloneable-content {
1695 border: 1px solid #ccd0d4;
1696 background-color: #fff;
1697 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1698 }
1699 .darkify-field-group .darkify-cloneable-content > .darkify-field {
1700 padding: 15px;
1701 }
1702 .darkify-field-group .darkify-cloneable-title {
1703 display: block;
1704 cursor: pointer;
1705 position: relative;
1706 user-select: none;
1707 margin: 0;
1708 padding: 15px 65px 15px 10px;
1709 min-height: 0;
1710 font-size: 100%;
1711 border: 1px solid #ccd0d4;
1712 background-color: #fafafa;
1713 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1714 transition: border-color 0.15s;
1715 }
1716 .darkify-field-group .darkify-cloneable-title:active,
1717 .darkify-field-group .darkify-cloneable-title:hover,
1718 .darkify-field-group .darkify-cloneable-title:focus {
1719 border-color: #999;
1720 outline: none;
1721 }
1722 .darkify-field-group .darkify-cloneable-helper {
1723 position: absolute;
1724 top: 12px;
1725 right: 10px;
1726 z-index: 1;
1727 font-size: 14px;
1728 line-height: 1em;
1729 }
1730 .darkify-field-group .darkify-cloneable-helper i {
1731 display: inline-block;
1732 cursor: pointer;
1733 padding: 5px;
1734 color: #999;
1735 }
1736 .darkify-field-group .darkify-cloneable-helper i:hover {
1737 color: #555;
1738 }
1739 .darkify-field-group .darkify-cloneable-content {
1740 padding: 0;
1741 border-top: 0;
1742 }
1743 .darkify-field-group .darkify-cloneable-title-prefix,
1744 .darkify-field-group .darkify-cloneable-title-number {
1745 margin-right: 5px;
1746 }
1747 .darkify-field-group .darkify-cloneable-alert {
1748 display: none;
1749 margin-bottom: 5px;
1750 padding: 10px 20px;
1751 color: #a94442;
1752 border: 1px solid #ebccd1;
1753 background-color: #f2dede;
1754 }
1755 .darkify-field-group .widget-placeholder {
1756 margin-bottom: 10px;
1757 border: 1px dashed #f1c40f;
1758 background-color: #fffae4;
1759 }
1760 .darkify-field-group .darkify-cloneable-header-icon {
1761 display: inline-block;
1762 text-align: center;
1763 font-size: 14px;
1764 width: 17px;
1765 text-indent: 0;
1766 vertical-align: text-top;
1767 }
1768 .darkify-field-group .darkify-cloneable-placeholder {
1769 background-color: #ddd;
1770 margin-top: 4px;
1771 width: 100px;
1772 height: 10px;
1773 font-size: 10px;
1774 line-height: 10px;
1775 display: inline-block;
1776 vertical-align: top;
1777 border-radius: 2px;
1778 }
1779
1780 /**
1781 * 03. 16. Field: icon
1782 */
1783 .darkify-field-icon .darkify-icon-select {
1784 display: flex;
1785 grid-gap: 5px;
1786 }
1787 .darkify-field-icon .darkify-icon-preview:not(.hidden) {
1788 display: flex;
1789 }
1790 .darkify-field-icon .darkify-icon-preview i {
1791 display: flex;
1792 justify-content: center;
1793 align-items: center;
1794 width: 30px;
1795 font-size: 14px;
1796 text-align: center;
1797 vertical-align: top;
1798 color: #555;
1799 border: 1px solid #ccc;
1800 background-color: #f7f7f7;
1801 border-radius: 3px;
1802 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
1803 }
1804
1805 /**
1806 * 03. 17. Field: image_select
1807 */
1808 .darkify-field-image_select .darkify--image {
1809 display: inline-block;
1810 margin: 0 5px 10px 0;
1811 margin-right: 13px;
1812 }
1813 .darkify-field-image_select .darkify--inline-list .darkify--image {
1814 display: block;
1815 }
1816 .darkify-field-image_select figure {
1817 cursor: pointer;
1818 position: relative;
1819 display: inline-block;
1820 max-width: 100%;
1821 margin: 0;
1822 vertical-align: bottom;
1823 border: 2px solid #1a74e4;
1824 background-color: #fff;
1825 user-select: none;
1826 transition: all 0.2s;
1827 border-radius: 3px;
1828 }
1829 .darkify-field-image_select .darkify--active figure {
1830 border-color: #1a74e4;
1831 }
1832 .darkify-field-image_select figure:before {
1833 position: absolute;
1834 top: 5px;
1835 left: 4px;
1836 text-align: center;
1837 font-size: 12px;
1838 font-family: "IcoFont";
1839 font-weight: 900;
1840 content: "\eed6";
1841 width: 16px;
1842 height: 16px;
1843 line-height: 14px;
1844 opacity: 0;
1845 color: #fff;
1846 background-color: #1a74e4;
1847 transition: opacity 0.2s;
1848 border-radius: 50%;
1849 }
1850
1851 .darkify-field-image_select .darkify--active figure:before {
1852 opacity: 1;
1853 }
1854 .darkify-field-image_select img {
1855 max-width: 100%;
1856 height: auto;
1857 vertical-align: top;
1858 }
1859 .darkify-field-image_select input {
1860 display: none;
1861 }
1862
1863 /**
1864 * 03. 18. Field: link_color
1865 */
1866 .darkify-field-link_color .darkify--left {
1867 float: left;
1868 margin-right: 10px;
1869 margin-bottom: 5px;
1870 }
1871 .darkify-field-link_color .darkify--title {
1872 color: #777;
1873 margin-bottom: 5px;
1874 }
1875
1876 /**
1877 * 03. 20. Field: media
1878 */
1879 .darkify-field-media .darkify--placeholder {
1880 display: flex;
1881 align-items: flex-start;
1882 }
1883 .darkify-field-media .darkify--placeholder input {
1884 width: 100%;
1885 margin: 0;
1886 }
1887 .darkify-field-media .button {
1888 margin-left: 5px;
1889 }
1890 .darkify-field-media .hidden + .button {
1891 margin-left: 0;
1892 }
1893 .darkify-field-media .darkify--preview {
1894 position: relative;
1895 }
1896
1897 /**
1898 * 03. 21. Field: palette
1899 */
1900 .darkify-field-palette .darkify--palette {
1901 position: relative;
1902 display: inline-block;
1903 cursor: pointer;
1904 margin-right: 13px;
1905 margin-bottom: 10px;
1906 user-select: none;
1907 -webkit-user-select: none;
1908 }
1909 .darkify-field-palette .darkify--palette span {
1910 vertical-align: middle;
1911 display: inline-block;
1912 width: 25px;
1913 height: 80px;
1914 line-height: 60px;
1915 overflow: hidden;
1916 text-indent: -999px;
1917 }
1918 .darkify-field-palette .darkify--palette:before {
1919 position: absolute;
1920 top: 4px;
1921 left: 4px;
1922 text-align: center;
1923 font-size: 10px;
1924 font-family: "IcoFont";
1925 font-weight: 900;
1926 content: "\eed6";
1927 width: 16px;
1928 height: 16px;
1929 line-height: 14px;
1930 opacity: 0;
1931 color: #fff;
1932 background-color: #1a74e4;
1933 transition: opacity 0.2s;
1934 border-radius: 50%;
1935 }
1936
1937 .darkify-field-palette .darkify--palette--colors {
1938 border: 2px solid #8396a2;
1939 transition: all 0.2s;
1940 border-radius: 3px;
1941 }
1942 .darkify-field-palette .darkify-palette-name {
1943 margin-top: 3px;
1944 text-align: center;
1945 }
1946 .darkify-field-palette .darkify--active .darkify--palette--colors {
1947 border-color: #1a74e4;
1948 }
1949 .darkify-field-palette .darkify--active:before {
1950 opacity: 1;
1951 }
1952 .darkify-field-palette input {
1953 display: none;
1954 }
1955
1956 .darkify-live-demo-palette .icofont-external-link {
1957 padding-left: 1px;
1958 font-size: 11px;
1959 }
1960
1961 .darkify-live-demo-palette {
1962 opacity: 0;
1963 transition: all 0.2s;
1964 position: absolute;
1965 left: auto;
1966 z-index: 99999;
1967 margin-left: 3px;
1968 text-decoration: none;
1969 }
1970
1971 .darkify-live-demo-palette[tooltip]:hover:before {
1972 position: absolute;
1973 top: 100%;
1974 left: -12px;
1975 z-index: 99999;
1976 content: attr(tooltip);
1977 margin-top: 0.5em;
1978 margin-left: -6px;
1979 padding: 4px;
1980 width: 54px;
1981 overflow: hidden;
1982 word-wrap: break-word;
1983 font-size: 11px;
1984 text-transform: uppercase;
1985 color: #fff;
1986 text-align: center;
1987 background-color: #222;
1988 box-sizing: border-box;
1989 box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
1990 border-radius: 3px;
1991 }
1992
1993 .darkify-live-demo-palette[tooltip]:hover:after {
1994 position: absolute;
1995 top: 7px;
1996 left: 50%;
1997 z-index: 99999;
1998 content: "";
1999 width: 0;
2000 height: 0;
2001 border: 0.75em dashed transparent;
2002 border-bottom: 0.75em solid #222;
2003 font-size: inherit;
2004 transform: translateX(-50%);
2005 }
2006
2007 a.darkify-live-demo-palette:focus {
2008 border: none;
2009 outline: 0;
2010 box-shadow: none;
2011 }
2012
2013 .darkify-field.darkify-field-palette.darkify_preset
2014 .darkify--palette.darkify--active
2015 .darkify-live-demo-palette,
2016 .darkify-field.darkify-field-palette.darkify_preset
2017 .darkify--palette:hover
2018 .darkify-live-demo-palette {
2019 opacity: 1;
2020 }
2021 .darkify-field-palette .darkify--palette {
2022 cursor: pointer;
2023 }
2024
2025 /**
2026 * 03. 22. Field: repeater
2027 */
2028 .darkify-field-repeater .darkify-field-text input {
2029 width: 100%;
2030 }
2031 .darkify-field-repeater .darkify-repeater-hidden {
2032 display: none !important;
2033 }
2034 .darkify-field-repeater .darkify-repeater-wrapper .darkify-repeater-item {
2035 display: table;
2036 width: 100%;
2037 margin-bottom: 5px;
2038 border: 1px solid #eee;
2039 }
2040 .darkify-field-repeater .darkify-repeater-wrapper .darkify-repeater-item h4 {
2041 font-size: 1em;
2042 }
2043 .darkify-field-repeater .darkify-repeater-content {
2044 width: 100%;
2045 display: table-cell;
2046 vertical-align: middle;
2047 background-color: #fff;
2048 }
2049 .darkify-field-repeater .darkify-repeater-content > .darkify-field {
2050 padding: 15px;
2051 }
2052 .darkify-field-repeater .darkify-repeater-helper {
2053 width: 100%;
2054 display: table-cell;
2055 vertical-align: middle;
2056 text-align: center;
2057 font-size: 14px;
2058 line-height: 1em;
2059 border-left: 1px solid #eee;
2060 background-color: #f7f7f7;
2061 }
2062 .darkify-field-repeater .darkify-repeater-helper i {
2063 display: inline-block;
2064 cursor: pointer;
2065 color: #999;
2066 padding: 5px;
2067 }
2068 .darkify-field-repeater .darkify-repeater-helper i:hover {
2069 color: #555;
2070 }
2071 .darkify-field-repeater .darkify-repeater-helper-inner {
2072 width: 75px;
2073 }
2074 .darkify-field-repeater .darkify-repeater-alert {
2075 display: none;
2076 margin-bottom: 5px;
2077 padding: 10px 20px;
2078 color: #a94442;
2079 border: 1px solid #ebccd1;
2080 background-color: #f2dede;
2081 }
2082 .darkify-field-repeater .widget-placeholder {
2083 height: 50px;
2084 margin-bottom: 3px;
2085 border: 1px dashed #f1c40f;
2086 background-color: #fffae4;
2087 }
2088 .darkify-field-repeater .ui-sortable-helper {
2089 height: 50px !important;
2090 overflow: hidden !important;
2091 border-color: #ccc !important;
2092 background-color: #eee !important;
2093 opacity: 0.5;
2094 }
2095 .darkify-field-repeater .ui-sortable-helper .darkify-repeater-helper,
2096 .darkify-field-repeater .ui-sortable-helper .darkify-repeater-content {
2097 display: none;
2098 }
2099
2100 /**
2101 * 03. 23. Field: select
2102 */
2103 .darkify-field-select .darkify-fieldset {
2104 min-height: 30px;
2105 }
2106 .darkify-field-select .darkify-chosen {
2107 display: none;
2108 }
2109 .darkify-field-select select {
2110 max-width: 100%;
2111 margin: 0;
2112 }
2113 .darkify-field-select .darkify-hide-select {
2114 display: none !important;
2115 }
2116
2117 /**
2118 * 03. 24. Field: slider
2119 */
2120 .darkify-field-slider .darkify--wrap {
2121 display: flex;
2122 align-items: center;
2123 }
2124 .darkify-field-slider .darkify--input {
2125 display: flex;
2126 }
2127 .darkify-field-slider .darkify--unit {
2128 display: flex;
2129 justify-content: center;
2130 flex-direction: column;
2131 user-select: none;
2132 padding: 0 6px;
2133 font-size: 11px;
2134 line-height: 1;
2135 border-radius: 0 4px 4px 0;
2136 color: #555;
2137 border: 1px solid #7e8993;
2138 border-left: 0;
2139 background-color: #f5f5f5;
2140 }
2141 .darkify-field-slider .darkify-slider-ui {
2142 margin-right: 15px;
2143 }
2144 .darkify-field-slider input[type="number"] {
2145 position: relative;
2146 z-index: 1;
2147 margin: 0;
2148 width: 50px;
2149 text-align: center;
2150 }
2151 .darkify-field-slider .darkify--is-unit {
2152 border-top-right-radius: 0 !important;
2153 border-bottom-right-radius: 0 !important;
2154 }
2155 .darkify-field-slider .ui-slider {
2156 position: relative;
2157 width: 100%;
2158 height: 3px;
2159 border: none;
2160 background: #ddd;
2161 border-radius: 2px;
2162 }
2163 .darkify-field-slider .ui-slider-range {
2164 height: 3px;
2165 border: none;
2166 background: #333;
2167 border-radius: 2px;
2168 }
2169 .darkify-field-slider .ui-slider-handle {
2170 position: absolute;
2171 width: 18px;
2172 height: 18px;
2173 top: -7px;
2174 margin-left: -10px;
2175 border: none;
2176 background: #333;
2177 border-radius: 2px;
2178 }
2179 .darkify-field-slider .ui-state-active,
2180 .darkify-field-slider .ui-slider-handle:hover {
2181 cursor: pointer;
2182 background: #111;
2183 }
2184
2185 /**
2186 * 03. 25. Field: sortable
2187 */
2188 .darkify-field-sortable .darkify-field-text input {
2189 width: 100%;
2190 max-width: 100%;
2191 }
2192 .darkify-field-sortable .darkify-sortable .darkify-sortable-item {
2193 display: table;
2194 width: 100%;
2195 margin-bottom: 5px;
2196 border: 1px solid #eee;
2197 }
2198 .darkify-field-sortable .darkify-sortable .darkify-sortable-item h4 {
2199 font-size: 1em;
2200 }
2201 .darkify-field-sortable .darkify-sortable-content {
2202 width: 100%;
2203 display: table-cell;
2204 vertical-align: middle;
2205 background-color: #fff;
2206 }
2207 .darkify-field-sortable .darkify-sortable-content > .darkify-field {
2208 padding: 15px;
2209 }
2210 .darkify-field-sortable .darkify-sortable-helper {
2211 width: 100%;
2212 display: table-cell;
2213 vertical-align: middle;
2214 text-align: center;
2215 font-size: 14px;
2216 line-height: 1em;
2217 border-left: 1px solid #eee;
2218 background-color: #f7f7f7;
2219 }
2220 .darkify-field-sortable .darkify-sortable-helper i {
2221 display: inline-block;
2222 cursor: pointer;
2223 width: 50px;
2224 color: #555;
2225 }
2226 .darkify-field-sortable .darkify-sortable-helper i:hover {
2227 opacity: 0.5;
2228 }
2229 .darkify-field-sortable .widget-placeholder {
2230 height: 50px;
2231 margin-bottom: 3px;
2232 border: 1px dashed #f1c40f;
2233 background-color: #fffae4;
2234 }
2235 .darkify-field-sortable .ui-sortable-helper {
2236 height: 50px !important;
2237 overflow: hidden !important;
2238 border-color: #ccc !important;
2239 background-color: #eee !important;
2240 opacity: 0.5;
2241 }
2242 .darkify-field-sortable .ui-sortable-helper .darkify-sortable-helper,
2243 .darkify-field-sortable .ui-sortable-helper .darkify-sortable-content {
2244 display: none;
2245 }
2246
2247 /**
2248 * 03. 26. Field: sorter
2249 */
2250 .darkify-field-sorter .ui-sortable-placeholder {
2251 height: 20px;
2252 border: 1px dashed #f1c40f;
2253 background-color: #fffae4;
2254 }
2255 .darkify-field-sorter .darkify-modules {
2256 float: left;
2257 width: 50%;
2258 box-sizing: border-box;
2259 }
2260 .darkify-field-sorter .darkify-modules:first-child {
2261 padding-right: 15px;
2262 }
2263 .darkify-field-sorter .darkify-modules:last-child {
2264 padding-left: 15px;
2265 }
2266 .darkify-field-sorter .darkify-disabled,
2267 .darkify-field-sorter .darkify-enabled {
2268 padding: 5px 15px;
2269 border: 1px dashed #ddd;
2270 background-color: #fff;
2271 }
2272 .darkify-field-sorter .darkify-disabled li {
2273 opacity: 0.5;
2274 transition: opacity 0.15s;
2275 }
2276 .darkify-field-sorter .darkify-disabled .ui-sortable-helper {
2277 opacity: 1;
2278 }
2279 .darkify-field-sorter .darkify-sorter-title {
2280 font-size: 13px;
2281 font-weight: 600;
2282 padding: 10px;
2283 text-align: center;
2284 border: 1px dashed #ddd;
2285 border-bottom: none;
2286 background-color: #f8f8f8;
2287 text-transform: uppercase;
2288 }
2289 .darkify-field-sorter ul {
2290 list-style-type: none;
2291 margin: 0;
2292 padding: 0;
2293 min-height: 62px;
2294 }
2295 .darkify-field-sorter ul li {
2296 margin: 10px 0;
2297 padding: 10px 15px;
2298 cursor: move;
2299 font-weight: bold;
2300 text-align: center;
2301 border: 1px solid #e5e5e5;
2302 background-color: #fafafa;
2303 transition: border-color 0.15s;
2304 }
2305 .darkify-field-sorter ul li:hover {
2306 border-color: #bbb;
2307 }
2308
2309 /**
2310 * 03. 27. Field: spinner
2311 */
2312 .darkify-field-spinner .darkify--spin {
2313 display: flex;
2314 }
2315 .darkify-field-spinner .ui-widget {
2316 font-family: inherit;
2317 }
2318 .darkify-field-spinner .ui-spinner {
2319 display: flex;
2320 align-items: stretch;
2321 overflow: unset;
2322 border: none;
2323 background: none;
2324 border-radius: 0;
2325 }
2326 .darkify-field-spinner .ui-spinner .ui-button {
2327 display: flex;
2328 flex-direction: column;
2329 justify-content: center;
2330 text-align: center;
2331 min-width: 20px;
2332 padding: 0 4px;
2333 margin: 0;
2334 color: #555;
2335 background-color: #f5f5f5;
2336 border: 1px solid #7e8993;
2337 }
2338 .darkify-field-spinner .ui-spinner .ui-spinner-button {
2339 position: relative;
2340 cursor: pointer;
2341 height: auto;
2342 }
2343 .darkify-field-spinner .ui-spinner .ui-spinner-button:hover {
2344 background-color: #e7e7e7;
2345 }
2346 .darkify-field-spinner .ui-spinner .ui-spinner-button:active {
2347 background-color: #ddd;
2348 }
2349 .darkify-field-spinner .ui-spinner .ui-spinner-button:before {
2350 font-family: "IcoFont";
2351 font-weight: 900;
2352 font-size: 14px;
2353 line-height: 14px;
2354 }
2355 .darkify-field-spinner .ui-spinner .ui-spinner-down {
2356 border-right: 0;
2357 border-radius: 4px 0 0 4px;
2358 }
2359 .darkify-field-spinner .ui-spinner .ui-spinner-down:before {
2360 content: "\f0d9";
2361 }
2362 .darkify-field-spinner .ui-spinner .ui-spinner-up {
2363 border-left: 0;
2364 border-radius: 0 4px 4px 0;
2365 }
2366 .darkify-field-spinner .ui-spinner .ui-spinner-up:before {
2367 content: "\f0da";
2368 }
2369 .darkify-field-spinner .ui-spinner .darkify--unit {
2370 border-left: 0;
2371 user-select: none;
2372 }
2373 .darkify-field-spinner .ui-spinner .ui-button-text,
2374 .darkify-field-spinner .ui-spinner .ui-button-icon,
2375 .darkify-field-spinner .ui-spinner .ui-button-icon-space {
2376 display: none;
2377 }
2378 .darkify-field-spinner .ui-spinner input {
2379 font-family: inherit;
2380 font-size: inherit;
2381 position: relative;
2382 z-index: 1;
2383 width: 50px;
2384 text-align: center;
2385 margin: 0;
2386 padding: 0 8px;
2387 border-radius: 0;
2388 }
2389 .darkify-field-spinner .ui-spinner-down {
2390 order: 1;
2391 }
2392 .darkify-field-spinner .ui-spinner-input {
2393 order: 2;
2394 }
2395 .darkify-field-spinner .darkify--unit {
2396 order: 3;
2397 }
2398 .darkify-field-spinner .ui-spinner-up {
2399 order: 4;
2400 }
2401
2402 /**
2403 * 03. 28. Field: switcher
2404 */
2405 .darkify-field-switcher .darkify--switcher {
2406 float: left;
2407 cursor: pointer;
2408 position: relative;
2409 width: 60px;
2410 height: 26px;
2411 padding: 0;
2412 margin: 0;
2413 overflow: hidden;
2414 border-radius: 4px;
2415 background-color: #ed6f6f;
2416 user-select: none;
2417 -webkit-user-select: none;
2418 }
2419 .darkify-field-switcher .darkify--ball {
2420 position: absolute;
2421 top: 4px;
2422 left: 4px;
2423 width: 24px;
2424 height: 18px;
2425 background-color: #fff;
2426 border-radius: 4px;
2427 transition: all 0.1s;
2428 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
2429 }
2430 .darkify-field-switcher .darkify--on,
2431 .darkify-field-switcher .darkify--off {
2432 position: absolute;
2433 top: 0;
2434 left: 0;
2435 right: 0;
2436 font-size: 11px;
2437 line-height: 26px;
2438 font-weight: 500;
2439 font-style: normal;
2440 text-align: center;
2441 text-transform: uppercase;
2442 color: #fff;
2443 padding-right: 28px;
2444 opacity: 0;
2445 transition: all 0.1s;
2446 }
2447 .darkify-field-switcher .darkify--off {
2448 padding-right: 0;
2449 padding-left: 28px;
2450 opacity: 1;
2451 }
2452 .darkify-field-switcher .darkify--active {
2453 background: #1a74e4;
2454 }
2455 .darkify-field-switcher .darkify--active .darkify--on {
2456 opacity: 1;
2457 }
2458 .darkify-field-switcher .darkify--active .darkify--off {
2459 opacity: 0;
2460 }
2461 .darkify-field-switcher .darkify--active .darkify--ball {
2462 left: 100%;
2463 margin-left: -28px;
2464 }
2465 .darkify-field-switcher .darkify--label {
2466 float: left;
2467 margin-top: 4px;
2468 margin-left: 8px;
2469 font-weight: 400;
2470 color: #999;
2471 }
2472
2473 /**
2474 * 03. 29. Field: tabbed
2475 */
2476 .darkify-field-tabbed .darkify-tabbed-content {
2477 border: 1px solid #ccd0d4;
2478 background-color: #fff;
2479 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
2480 }
2481 .darkify-field-tabbed .darkify-tabbed-content > .darkify-field {
2482 padding: 15px;
2483 }
2484 .darkify-field-tabbed .darkify-tabbed-nav .darkify--icon {
2485 padding-right: 5px;
2486 }
2487 .darkify-field-tabbed .darkify-tabbed-nav a {
2488 display: inline-block;
2489 padding: 12px 15px;
2490 margin-top: 1px;
2491 margin-right: 5px;
2492 margin-bottom: -1px;
2493 position: relative;
2494 text-decoration: none;
2495 color: #444;
2496 font-weight: 600;
2497 border: 1px solid #ccd0d4;
2498 background-color: #f3f3f3;
2499 transition: all 0.2s;
2500 }
2501 .darkify-field-tabbed .darkify-tabbed-nav a:hover {
2502 background-color: #f9f9f9;
2503 }
2504 .darkify-field-tabbed .darkify-tabbed-nav a.darkify-tabbed-active {
2505 background-color: #fff;
2506 border-bottom-color: #fff;
2507 }
2508 .darkify-field-tabbed .darkify-tabbed-nav a:focus {
2509 outline: none;
2510 box-shadow: none;
2511 }
2512
2513 /**
2514 * 03. 30. Field: text
2515 */
2516 .darkify-field-text input {
2517 width: 50%;
2518 max-width: 100%;
2519 margin: 0;
2520 }
2521
2522 /**
2523 * 03. 31. Field: textarea
2524 */
2525 .darkify-field-textarea textarea {
2526 width: 100%;
2527 max-width: 100%;
2528 min-height: 125px;
2529 }
2530 .darkify-field-textarea .darkify-shortcode-button {
2531 margin-bottom: 10px;
2532 margin-right: 5px;
2533 }
2534
2535 /**
2536 * 03. 33. Field: upload
2537 */
2538 .darkify-field-upload input {
2539 width: 100%;
2540 margin: 0;
2541 }
2542 .darkify-field-upload .darkify--wrap {
2543 display: flex;
2544 align-items: flex-start;
2545 }
2546 .darkify-field-upload .button {
2547 margin-left: 5px;
2548 }
2549 .darkify-field-upload .darkify--preview {
2550 position: relative;
2551 }
2552
2553 /**
2554 * 03. 34. Field: wp_editor
2555 */
2556 .darkify-field-wp_editor .darkify-wp-editor {
2557 float: left;
2558 width: 100%;
2559 }
2560 .darkify-field-wp_editor .mce-toolbar-grp {
2561 border: none;
2562 }
2563 .darkify-field-wp_editor .mce-btn.mce-active button,
2564 .darkify-field-wp_editor .mce-btn.mce-active:hover button,
2565 .darkify-field-wp_editor .mce-btn.mce-active i,
2566 .darkify-field-wp_editor .mce-btn.mce-active:hover i {
2567 color: #23282d;
2568 }
2569 .darkify-field-wp_editor .wp-media-buttons {
2570 position: relative;
2571 z-index: 2;
2572 }
2573 .darkify-field-wp_editor .wp-editor-tabs {
2574 position: relative;
2575 z-index: 1;
2576 }
2577 .darkify-field-wp_editor .darkify-no-tinymce {
2578 border: 1px solid #e5e5e5;
2579 }
2580 .darkify-field-wp_editor .darkify-no-quicktags .wp-media-buttons {
2581 float: none;
2582 display: block;
2583 }
2584 .darkify-field-wp_editor .darkify-no-quicktags .mce-tinymce {
2585 box-shadow: none;
2586 border: 1px solid #e5e5e5;
2587 }
2588 .darkify-field-wp_editor textarea {
2589 width: 100%;
2590 max-width: 100%;
2591 margin: 0;
2592 box-shadow: none;
2593 }
2594
2595 /**
2596 * 03. 35. Field: heading
2597 */
2598 .darkify-field-heading {
2599 font-size: 1.5em;
2600 font-weight: bold;
2601 color: #23282d;
2602 background-color: #f5f5f5;
2603 }
2604
2605 /**
2606 * 03. 36. Field: subheading
2607 */
2608 .darkify-field-subheading {
2609 font-size: 14px;
2610 font-weight: bold;
2611 padding-top: 17px;
2612 padding-bottom: 17px;
2613 color: #23282d;
2614 background-color: #f7f7f7;
2615 }
2616
2617 /**
2618 * 03. 37. Field: submessage
2619 */
2620 .darkify-field-submessage {
2621 padding: 0 !important;
2622 border: 0 !important;
2623 }
2624 .darkify-field-submessage + .darkify-field {
2625 border-top: 0 !important;
2626 }
2627
2628 .darkify-submessage {
2629 font-size: 12px;
2630 padding: 17px 30px;
2631 border-top: 1px solid transparent;
2632 border-bottom: 1px solid transparent;
2633 }
2634
2635 .darkify-submessage-success {
2636 color: #3c763d;
2637 border-color: #d6e9c6;
2638 background-color: #dff0d8;
2639 }
2640
2641 .darkify-submessage-info {
2642 color: #31708f;
2643 border-color: #bce8f1;
2644 background-color: #d9edf7;
2645 }
2646
2647 .darkify-submessage-warning {
2648 color: #8a6d3b;
2649 border-color: #faebcc;
2650 background-color: #fcf8e3;
2651 }
2652
2653 .darkify-submessage-danger {
2654 color: #a94442;
2655 border-color: #ebccd1;
2656 background-color: #f2dede;
2657 }
2658
2659 .darkify-submessage-normal {
2660 color: #23282d;
2661 border-color: #eee;
2662 background-color: #f7f7f7;
2663 }
2664
2665 /**
2666 * 03. 38. Field: notice
2667 */
2668 .darkify-field-notice {
2669 background-color: #fff;
2670 padding-bottom: 0;
2671 }
2672 .darkify-field-notice h3{
2673 margin-top: 0;
2674 margin-bottom: 5px;
2675 }
2676
2677 .darkify-notice {
2678 padding: 12px;
2679 background-color: #fff;
2680 border-left-style: solid;
2681 border-left-width: 4px;
2682 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
2683 }
2684
2685 .darkify-notice-success {
2686 border-color: #46b450;
2687 }
2688
2689 .darkify-notice-info {
2690 border-color: #339fd4;
2691 }
2692
2693 .darkify-notice-warning {
2694 border-color: #ffbc00;
2695 }
2696
2697 .darkify-notice-danger {
2698 border-color: #dc3232;
2699 }
2700
2701 .darkify-notice-normal {
2702 border-color: #222;
2703 }
2704
2705 /**
2706 * 03. 39. Field: number
2707 */
2708 .darkify-field-number input {
2709 width: 100%;
2710 margin: 0;
2711 }
2712 .darkify-field-number .darkify--wrap {
2713 position: relative;
2714 float: left;
2715 width: 100px;
2716 }
2717 .darkify-field-number .darkify--unit {
2718 position: absolute;
2719 z-index: 1;
2720 right: 4px;
2721 top: 4px;
2722 bottom: 4px;
2723 padding: 2px 6px;
2724 color: #666;
2725 font-size: 11px;
2726 line-height: 1;
2727 border-radius: 2px;
2728 background: #eee;
2729 user-select: none;
2730 display: flex;
2731 justify-content: center;
2732 flex-direction: column;
2733 }
2734
2735 /**
2736 * 03. 40. Field: link
2737 */
2738 .darkify-field-link .darkify--result {
2739 display: inline-block;
2740 font-size: 12px;
2741 line-height: 16px;
2742 padding: 7px 10px;
2743 margin-bottom: 7px;
2744 color: #777;
2745 border: 1px solid #e5e5e5;
2746 background-color: #f5f5f5;
2747 border-radius: 2px;
2748 world-break: break-word;
2749 }
2750 .darkify-field-link .darkify--wrap {
2751 position: relative;
2752 float: left;
2753 width: 100px;
2754 }
2755 .darkify-field-link .darkify--unit {
2756 position: absolute;
2757 z-index: 1;
2758 right: 4px;
2759 top: 4px;
2760 bottom: 4px;
2761 padding: 2px 6px;
2762 color: #666;
2763 font-size: 11px;
2764 line-height: 1;
2765 border-radius: 2px;
2766 background: #eee;
2767 user-select: none;
2768 display: flex;
2769 justify-content: center;
2770 flex-direction: column;
2771 }
2772
2773 /**
2774 * 03. 41. others
2775 */
2776 .darkify-help {
2777 cursor: help;
2778 position: absolute;
2779 top: 0;
2780 right: 0;
2781 padding: 5px;
2782 font-size: 13px;
2783 color: #aaa;
2784 }
2785 .darkify-help .darkify-help-text {
2786 display: none;
2787 }
2788
2789 .darkify--preview {
2790 max-width: 100%;
2791 }
2792
2793 .darkify-image-preview {
2794 display: inline-flex;
2795 align-items: center;
2796 justify-content: center;
2797 flex-direction: column;
2798 position: relative;
2799 padding: 6px;
2800 max-width: 120px;
2801 max-height: 120px;
2802 min-width: 40px;
2803 min-height: 40px;
2804 margin-bottom: 10px;
2805 text-align: center;
2806 border-radius: 2px;
2807 border: 1px solid #ccc;
2808 background-color: #f9f9f9;
2809 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
2810 }
2811 .darkify-image-preview i {
2812 cursor: pointer;
2813 position: absolute;
2814 z-index: 1;
2815 right: 4px;
2816 top: 4px;
2817 font-size: 14px;
2818 width: 22px;
2819 height: 22px;
2820 line-height: 22px;
2821 text-align: center;
2822 text-decoration: none;
2823 color: #fff;
2824 background-color: #dd3333;
2825 opacity: 0.75;
2826 border-radius: 2px;
2827 transition: all 0.2s;
2828 }
2829 .darkify-image-preview i:hover {
2830 opacity: 1;
2831 }
2832 .darkify-image-preview i:focus {
2833 box-shadow: none;
2834 }
2835 .darkify-image-preview span {
2836 position: relative;
2837 overflow: hidden;
2838 display: flex;
2839 height: 100%;
2840 width: 100%;
2841 }
2842 .darkify-image-preview img {
2843 max-width: 100%;
2844 height: auto;
2845 object-fit: contain;
2846 }
2847
2848 .darkify-field-custom .darkify-field {
2849 padding: 0;
2850 }
2851
2852 .darkify-field .chosen-container-single .chosen-single {
2853 height: 28px;
2854 line-height: 26px;
2855 }
2856 .darkify-field .chosen-container-single .chosen-single abbr {
2857 top: 0;
2858 right: 20px;
2859 font-family: "IcoFont";
2860 font-weight: 900;
2861 font-size: 12px;
2862 height: 100%;
2863 width: 18px;
2864 color: #aaa;
2865 text-align: center;
2866 background: none;
2867 }
2868 .darkify-field .chosen-container-single .chosen-single abbr:before {
2869 content: "\eee4";
2870 }
2871 .darkify-field .chosen-container-single .chosen-single abbr:hover {
2872 color: #555;
2873 }
2874 .darkify-field
2875 .chosen-container-multi
2876 .chosen-choices
2877 li.search-choice
2878 .search-choice-close {
2879 font-family: "IcoFont";
2880 font-weight: 900;
2881 font-size: 12px;
2882 height: 100%;
2883 width: 18px;
2884 color: #aaa;
2885 text-align: center;
2886 background: none;
2887 }
2888 .darkify-field
2889 .chosen-container-multi
2890 .chosen-choices
2891 li.search-choice
2892 .search-choice-close:before {
2893 content: "\eee4";
2894 display: inline-block;
2895 padding-top: 3px;
2896 }
2897 .darkify-field
2898 .chosen-container-multi
2899 .chosen-choices
2900 li.search-choice
2901 .search-choice-close:hover {
2902 color: #555;
2903 }
2904 .darkify-field .chosen-container-single .chosen-single div b {
2905 font-family: "IcoFont";
2906 font-weight: 900;
2907 font-size: 14px;
2908 color: #aaa;
2909 background: none;
2910 }
2911 .darkify-field .chosen-container-single .chosen-single div b:before {
2912 content: "\f107";
2913 }
2914 .darkify-field .chosen-container-single .chosen-single div b:hover {
2915 color: #555;
2916 }
2917 .darkify-field
2918 .chosen-container-multi
2919 .chosen-choices
2920 li.search-choice-placeholder {
2921 border: 1px dashed #aaa;
2922 margin: 3px 5px 3px 0;
2923 }
2924 .darkify-field .chosen-container-multi .ui-sortable li.search-choice span {
2925 cursor: move;
2926 }
2927 .darkify-field
2928 .chosen-container-active.chosen-with-drop
2929 .chosen-single
2930 div
2931 b:before {
2932 content: "\f106";
2933 }
2934 .darkify-field .chosen-container-single .chosen-single-with-deselect span {
2935 margin-right: 40px;
2936 }
2937 .darkify-field .chosen-container-single .chosen-search input[type="text"] {
2938 background: none;
2939 }
2940 .darkify-field .chosen-container-single .chosen-search:before {
2941 font-family: "IcoFont";
2942 font-weight: 900;
2943 font-size: 11px;
2944 content: "\f002";
2945 position: absolute;
2946 right: 12px;
2947 top: 10px;
2948 color: #aaa;
2949 }
2950 .darkify-field .wp-picker-container {
2951 display: inline-block;
2952 }
2953 .darkify-field .wp-picker-container .wp-color-result.button {
2954 margin-bottom: 0;
2955 }
2956 .darkify-field .darkify--transparent-wrap {
2957 display: none;
2958 position: relative;
2959 top: -1px;
2960 width: 235px;
2961 padding: 9px 10px;
2962 border: 1px solid #dfdfdf;
2963 border-top: none;
2964 background-color: #fff;
2965 }
2966 .darkify-field .wp-picker-active .darkify--transparent-wrap {
2967 display: block;
2968 }
2969 .darkify-field .darkify--transparent-slider {
2970 position: absolute;
2971 width: 190px;
2972 margin-left: 2px;
2973 height: 18px;
2974 }
2975 .darkify-field .darkify--transparent-slider .ui-slider-handle {
2976 position: absolute;
2977 top: -3px;
2978 bottom: -3px;
2979 z-index: 5;
2980 border-color: #aaa;
2981 border-style: solid;
2982 border-width: 4px 3px;
2983 width: 10px;
2984 height: 16px;
2985 margin: 0 -5px;
2986 background: none;
2987 cursor: ew-resize;
2988 opacity: 0.9;
2989 border-radius: 4px;
2990 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
2991 }
2992 .darkify-field .darkify--transparent-slider .ui-slider-handle:before {
2993 content: " ";
2994 position: absolute;
2995 left: -2px;
2996 right: -2px;
2997 top: -3px;
2998 bottom: -3px;
2999 border: 2px solid #fff;
3000 border-radius: 3px;
3001 }
3002 .darkify-field .darkify--transparent-offset {
3003 height: 18px;
3004 width: 200px;
3005 background: url(../images/checkerboard.png) repeat-y center left scroll #fff;
3006 border-radius: 2px;
3007 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
3008 }
3009 .darkify-field .darkify--transparent-text {
3010 position: absolute;
3011 top: 12px;
3012 right: 10px;
3013 width: 30px;
3014 font-size: 12px;
3015 line-height: 12px;
3016 text-align: center;
3017 color: #999;
3018 }
3019 .darkify-field .darkify--transparent-button {
3020 cursor: pointer;
3021 user-select: none;
3022 margin-top: 10px;
3023 font-size: 11px;
3024 text-align: center;
3025 border-radius: 2px;
3026 padding: 3px 7px;
3027 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
3028 letter-spacing: 0.2px;
3029 color: #777;
3030 border: 1px solid #ccc;
3031 background-color: #f7f7f7;
3032 transition: background-color 0.2s, border-color 0.2s, color 0.2s;
3033 }
3034 .darkify-field .darkify--transparent-active .wp-color-result {
3035 background-image: url(../images/checkerboard.png);
3036 background-size: 135px;
3037 background-position: center left;
3038 background-color: transparent !important;
3039 }
3040 .darkify-field .darkify--transparent-active .darkify--transparent-button {
3041 color: #fff;
3042 border-color: #3ea032;
3043 background-color: #4fb845;
3044 }
3045 .darkify-field .darkify--transparent-active .fa:before {
3046 content: "\f205";
3047 }
3048
3049 /**
3050 * 03. 42. Field: section_tab
3051 */
3052 .darkify-field-section_tab .darkify-section_tab-nav {
3053 min-width: 250px;
3054 border-right: 1px solid #17171729;
3055 }
3056
3057 .darkify-field-section_tab.darkify-field {
3058 display: flex;
3059 margin: 30px;
3060 padding: 0 !important;
3061 border: 1px solid #17171729;
3062 }
3063
3064 .darkify-field-section_tab .darkify-section_tab-sections {
3065 float: left;
3066 width: 100%;
3067 }
3068
3069 .darkify-field-section_tab .darkify-section_tab-section {
3070 border: none;
3071 background: #fff;
3072 padding-top: 20px;
3073 padding-bottom: 20px;
3074 }
3075
3076 .darkify-field-section_tab .darkify-section_tab-section > .darkify-field {
3077 padding: 20px;
3078 }
3079
3080 .darkify-field-section_tab .darkify-section_tab-nav .darkify--icon {
3081 padding-right: 5px;
3082 font-size: 15px;
3083 }
3084
3085 .darkify-field-section_tab .darkify-section_tab-nav a {
3086 display: block;
3087 padding: 12px 10px;
3088 margin-top: 0;
3089 position: relative;
3090 text-decoration: none;
3091 color: #171717;
3092 font-weight: 600;
3093 background: #f5f5f5;
3094 border-bottom: 1px solid #17171729;
3095 transition: all 0.2s;
3096 overflow: hidden;
3097 font-size: 13px;
3098 text-transform: uppercase;
3099 overflow: hidden;
3100 cursor: pointer;
3101 }
3102
3103 .darkify-field-section_tab .darkify-section_tab-nav a:last-child {
3104 margin-bottom: 0px;
3105 }
3106
3107 .darkify-field-section_tab .darkify-section_tab-nav a:focus,
3108 .darkify-field-section_tab
3109 .darkify-section_tab-nav
3110 a.darkify-section_tab-active {
3111 background: #fff;
3112 outline: none;
3113 box-shadow: 3px 0 0 0 #171717 inset;
3114 color: #171717;
3115 font-weight: 600;
3116 border-right-color: #fff;
3117 margin-right: -1px;
3118 }
3119 /**
3120 * 03. 42. Field: section_inner_tab
3121 */
3122 .darkify-field-section_inner_tab .darkify-section_inner_tab-nav {
3123 min-width: 250px;
3124 border-right: 1px solid #17171729;
3125 display: flex;
3126 }
3127
3128 .darkify-field-section_inner_tab.darkify-field {
3129 /* display: flex; */
3130 margin: 30px;
3131 padding: 0 !important;
3132 border: 1px solid #17171729;
3133 }
3134
3135 .darkify-field-section_inner_tab .darkify-section_inner_tab-sections {
3136 float: left;
3137 width: 100%;
3138 }
3139
3140 .darkify-field-section_inner_tab .darkify-section_inner_tab-section {
3141 border: none;
3142 background: #fff;
3143 padding-top: 20px;
3144 padding-bottom: 20px;
3145 }
3146
3147 .darkify-field-section_inner_tab .darkify-section_inner_tab-section > .darkify-field {
3148 padding: 20px;
3149 }
3150
3151 .darkify-field-section_inner_tab .darkify-section_inner_tab-nav .darkify--icon {
3152 padding-right: 5px;
3153 font-size: 15px;
3154 }
3155
3156 .darkify-field-section_inner_tab .darkify-section_inner_tab-nav a {
3157 display: block;
3158 padding: 12px 10px;
3159 margin-top: 0;
3160 position: relative;
3161 text-decoration: none;
3162 color: #171717;
3163 font-weight: 600;
3164 background: #f5f5f5;
3165 border-bottom: 1px solid #17171729;
3166 transition: all 0.2s;
3167 overflow: hidden;
3168 font-size: 13px;
3169 text-transform: uppercase;
3170 overflow: hidden;
3171 cursor: pointer;
3172 }
3173
3174 .darkify-field-section_inner_tab .darkify-section_inner_tab-nav a:last-child {
3175 margin-bottom: 0px;
3176 }
3177
3178 .darkify-field-section_inner_tab .darkify-section_inner_tab-nav a:focus,
3179 .darkify-field-section_inner_tab
3180 .darkify-section_inner_tab-nav
3181 a.darkify-section_inner_tab-active {
3182 background: #fff;
3183 outline: none;
3184 box-shadow: 0 3px 0 0 #171717 inset;
3185 color: #171717;
3186 font-weight: 600;
3187 border-right-color: #fff;
3188 margin-right: -1px;
3189 }
3190
3191 /**
3192 * Field Custom Css
3193 */
3194 .darkify-wrapper .darkify-nav ul li a {
3195 justify-content: center;
3196 align-items: center;
3197 font-size: 14px;
3198 font-weight: 500;
3199 border-right: 1px solid #e7e7e7;
3200 border-bottom: none;
3201 background-color: #171717;
3202 border-top: 3px solid #171717;
3203 color: #fff;
3204 background-size: 15px;
3205 background-repeat: no-repeat;
3206 background-position: 20px;
3207 padding: 13px 22px 16px;
3208 text-transform: uppercase;
3209 }
3210
3211 /**
3212 * 04. Widget
3213 */
3214 .darkify-widgets > .darkify-field {
3215 position: relative;
3216 top: -1px;
3217 margin-left: -15px;
3218 margin-right: -15px;
3219 padding: 12px 15px;
3220 }
3221 .darkify-widgets > .darkify-field .darkify-title {
3222 float: none;
3223 width: 100%;
3224 margin-bottom: 5px;
3225 }
3226 .darkify-widgets > .darkify-field .darkify-fieldset {
3227 float: none;
3228 width: 100%;
3229 }
3230 .darkify-widgets .darkify-field-text input {
3231 width: 100%;
3232 }
3233 .darkify-widgets .darkify-field-notice .darkify-notice {
3234 padding: 15px;
3235 }
3236
3237 .control-section .darkify-widgets > .darkify-field {
3238 margin-left: -10px;
3239 margin-right: -10px;
3240 padding: 10px 12px;
3241 }
3242
3243 .wp-block .darkify-widgets {
3244 font-size: 13px;
3245 }
3246 .wp-block .darkify-widgets > .darkify-field {
3247 margin-left: -10px;
3248 margin-right: -10px;
3249 }
3250 .wp-block .darkify-widgets > .darkify-field .button-primary {
3251 color: #fff;
3252 }
3253 .wp-block .darkify-widgets > .darkify-field > .darkify-title > h4 {
3254 font-size: 13px;
3255 }
3256
3257 /**
3258 * 05. Widget
3259 */
3260 .control-section .darkify-field {
3261 padding: 0;
3262 }
3263 .control-section .darkify-field .darkify-title {
3264 float: none;
3265 width: 100%;
3266 margin-bottom: 6px;
3267 }
3268 .control-section .darkify-field .darkify-title h4 {
3269 display: block;
3270 font-size: 13px;
3271 line-height: 1;
3272 font-weight: 600;
3273 color: inherit;
3274 }
3275 .control-section .darkify-field .darkify-fieldset {
3276 float: none;
3277 width: 100%;
3278 }
3279 .control-section .darkify-help {
3280 top: -5px;
3281 right: -5px;
3282 }
3283 .control-section .darkify-field-select select {
3284 width: 100%;
3285 }
3286 .control-section .darkify-field-heading {
3287 color: inherit;
3288 font-size: 14px;
3289 line-height: 1em;
3290 margin-right: -15px;
3291 margin-left: -15px;
3292 padding: 15px;
3293 }
3294 .control-section .darkify-field-subheading {
3295 color: inherit;
3296 font-size: 11px;
3297 margin-right: -15px;
3298 margin-left: -15px;
3299 padding: 10px 15px;
3300 }
3301 .control-section .darkify-subtitle-text {
3302 margin-top: 4px;
3303 font-size: 12px;
3304 }
3305 .control-section .darkify-field-submessage .darkify-submessage {
3306 margin-right: -15px;
3307 margin-left: -15px;
3308 padding: 15px;
3309 }
3310 .control-section
3311 .darkify-fieldset
3312 .darkify-field-submessage
3313 .darkify-submessage,
3314 .control-section .darkify-fieldset .darkify-field-heading,
3315 .control-section .darkify-fieldset .darkify-field-subheading {
3316 margin-left: 0;
3317 margin-right: 0;
3318 }
3319 .control-section .darkify-field-date label,
3320 .control-section .darkify-field-datetime label {
3321 display: block;
3322 }
3323 .control-section .darkify-field-date .darkify--to,
3324 .control-section .darkify-field-datetime .darkify--to {
3325 margin-top: 4px;
3326 margin-left: 0;
3327 }
3328 .control-section .darkify-field-sorter ul li {
3329 padding: 5px;
3330 }
3331 .control-section .darkify-field-sorter .darkify-modules {
3332 float: none;
3333 width: 100%;
3334 }
3335 .control-section .darkify-field-sorter .darkify-modules:first-child {
3336 padding-right: 0;
3337 padding-bottom: 15px;
3338 }
3339 .control-section .darkify-field-background .darkify--background-attributes {
3340 flex-direction: column;
3341 }
3342 .control-section .darkify-field-spacing input {
3343 width: 90px;
3344 }
3345 .control-section .darkify-field-border .darkify--input {
3346 flex: 1 50%;
3347 }
3348 .control-section .darkify-field-border input,
3349 .control-section .darkify-field-border select {
3350 width: 100%;
3351 }
3352 .control-section .darkify-field-spinner input {
3353 width: 50px;
3354 }
3355 .control-section .darkify-field-number .darkify--wrap {
3356 width: 100%;
3357 }
3358 .control-section .darkify-field-backup .darkify-export-data {
3359 display: none;
3360 }
3361 .control-section .darkify-field-fieldset .darkify-fieldset-content {
3362 border-color: #e5e5e5;
3363 }
3364 .control-section .darkify-tabbed-content > .darkify-field,
3365 .control-section .darkify-sortable-content > .darkify-field,
3366 .control-section .darkify-repeater-content > .darkify-field,
3367 .control-section .darkify-fieldset-content > .darkify-field,
3368 .control-section .darkify-cloneable-content > .darkify-field,
3369 .control-section .darkify-accordion-content > .darkify-field {
3370 padding: 10px;
3371 }
3372 .control-section .darkify-tabbed-content > .darkify-field .darkify-title,
3373 .control-section .darkify-sortable-content > .darkify-field .darkify-title,
3374 .control-section .darkify-repeater-content > .darkify-field .darkify-title,
3375 .control-section .darkify-fieldset-content > .darkify-field .darkify-title,
3376 .control-section .darkify-cloneable-content > .darkify-field .darkify-title,
3377 .control-section .darkify-accordion-content > .darkify-field .darkify-title {
3378 margin-bottom: 5px;
3379 }
3380 .control-section .darkify-tabbed-content > .darkify-field h4,
3381 .control-section .darkify-sortable-content > .darkify-field h4,
3382 .control-section .darkify-repeater-content > .darkify-field h4,
3383 .control-section .darkify-fieldset-content > .darkify-field h4,
3384 .control-section .darkify-cloneable-content > .darkify-field h4,
3385 .control-section .darkify-accordion-content > .darkify-field h4 {
3386 font-size: 12px;
3387 }
3388 .control-section .darkify-depend-hidden.darkify-depend-on {
3389 display: none !important;
3390 }
3391 .control-section .darkify-depend-visible.darkify-depend-on {
3392 border-top: 0 !important;
3393 }
3394
3395 /**
3396 * 06. Taxonomy
3397 */
3398 .darkify-taxonomy {
3399 max-width: 95%;
3400 }
3401 .darkify-taxonomy > .darkify-field {
3402 border-top: none !important;
3403 }
3404 .darkify-taxonomy > .darkify-field-heading {
3405 font-size: 1.1em;
3406 padding: 20px !important;
3407 border: 1px solid #ddd;
3408 }
3409 .darkify-taxonomy > .darkify-field-subheading {
3410 font-size: 12px;
3411 padding: 15px !important;
3412 border: 1px solid #ddd;
3413 }
3414 .darkify-taxonomy > .darkify-field-submessage .darkify-submessage {
3415 padding: 15px;
3416 border-left-width: 1px;
3417 border-left-style: solid;
3418 border-right-width: 1px;
3419 border-right-style: solid;
3420 }
3421 .darkify-taxonomy > .darkify-field-notice {
3422 background-color: transparent;
3423 }
3424 .darkify-taxonomy .darkify-section-title {
3425 display: block;
3426 padding: 15px;
3427 background-color: #f9f9f9;
3428 border: 1px solid #e5e5e5;
3429 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
3430 }
3431
3432 .darkify-taxonomy-add-fields > .darkify-field {
3433 padding: 8px 0;
3434 }
3435 .darkify-taxonomy-add-fields > .darkify-field > .darkify-title {
3436 float: none;
3437 width: 100%;
3438 padding: 2px 2px 4px 0;
3439 }
3440 .darkify-taxonomy-add-fields > .darkify-field > .darkify-title h4 {
3441 font-size: 12px;
3442 font-weight: normal;
3443 }
3444 .darkify-taxonomy-add-fields > .darkify-field > .darkify-fieldset {
3445 float: none;
3446 width: 100%;
3447 }
3448 .darkify-taxonomy-add-fields
3449 > .darkify-field
3450 > .darkify-fieldset
3451 > .darkify-help {
3452 right: -5px;
3453 }
3454 .darkify-taxonomy-add-fields + p.submit {
3455 margin-top: 0;
3456 }
3457
3458 .darkify-taxonomy-edit-fields > .darkify-field {
3459 padding: 20px 0;
3460 }
3461 .darkify-taxonomy-edit-fields > .darkify-field > .darkify-title {
3462 width: 200px;
3463 }
3464 .darkify-taxonomy-edit-fields > .darkify-field > .darkify-title h4 {
3465 font-size: 14px;
3466 font-weight: 600;
3467 line-height: 1.3;
3468 display: inline-block;
3469 vertical-align: middle;
3470 }
3471 .darkify-taxonomy-edit-fields > .darkify-field > .darkify-fieldset {
3472 width: calc(100% - 220px);
3473 }
3474 .darkify-taxonomy-edit-fields
3475 > .darkify-field
3476 > .darkify-fieldset
3477 > .darkify-help {
3478 top: -5px;
3479 right: -5px;
3480 }
3481 .darkify-taxonomy-edit-fields > .darkify-field-submessage {
3482 margin: 20px 0;
3483 }
3484 .darkify-taxonomy-edit-fields > .darkify-field-subheading,
3485 .darkify-taxonomy-edit-fields > .darkify-field-heading {
3486 margin: 20px 0;
3487 border: 1px solid #ddd;
3488 }
3489
3490 /**
3491 * 08. Nav Menu
3492 */
3493 .darkify-nav-menu-options {
3494 clear: both;
3495 float: left;
3496 width: 100%;
3497 }
3498 .darkify-nav-menu-options > .darkify-fields {
3499 margin: 10px -10px;
3500 border-top: 1px solid #eee;
3501 border-bottom: 1px solid #eee;
3502 }
3503 .darkify-nav-menu-options > .darkify-fields > .darkify-field {
3504 padding: 12px;
3505 }
3506 .darkify-nav-menu-options > .darkify-fields > .darkify-field .darkify-title {
3507 float: none;
3508 width: 100%;
3509 margin-bottom: 5px;
3510 }
3511 .darkify-nav-menu-options > .darkify-fields > .darkify-field .darkify-fieldset {
3512 float: none;
3513 width: 100%;
3514 }
3515 .darkify-nav-menu-options .darkify-field-text input {
3516 width: 100%;
3517 }
3518 .darkify-nav-menu-options .darkify-field-notice .darkify-notice {
3519 padding: 15px;
3520 }
3521
3522 .darkify-nav-menu-title {
3523 padding: 12px;
3524 background-color: #f5f5f5;
3525 border-top: 1px solid #eee;
3526 border-bottom: 1px solid #eee;
3527 }
3528 .darkify-nav-menu-title:first-child {
3529 border-top: 0;
3530 }
3531 .darkify-nav-menu-title h4 {
3532 margin: 0;
3533 padding: 0;
3534 color: #23282d;
3535 }
3536
3537 .darkify-nav-menu-icon {
3538 margin-right: 5px;
3539 }
3540
3541 /**
3542 * 06. Profile
3543 */
3544 .darkify-profile-options > h2 > .fa {
3545 padding-right: 7px;
3546 }
3547 .darkify-profile-options > .darkify-field {
3548 max-width: 750px;
3549 padding: 15px 0;
3550 border-top: none !important;
3551 }
3552 .darkify-profile-options > .darkify-field > .darkify-title {
3553 width: 200px;
3554 }
3555 .darkify-profile-options > .darkify-field > .darkify-title h4 {
3556 font-size: 14px;
3557 font-weight: 600;
3558 line-height: 1.3;
3559 display: inline-block;
3560 vertical-align: middle;
3561 }
3562 .darkify-profile-options > .darkify-field > .darkify-fieldset {
3563 width: calc(100% - 220px);
3564 }
3565 .darkify-profile-options > .darkify-field > .darkify-fieldset > .darkify-help {
3566 top: -15px;
3567 right: -5px;
3568 }
3569 .darkify-profile-options > .darkify-field-heading {
3570 font-size: 1.1em;
3571 }
3572 .darkify-profile-options > .darkify-field-subheading {
3573 font-size: 12px;
3574 }
3575 .darkify-profile-options > .darkify-field-subheading,
3576 .darkify-profile-options > .darkify-field-heading {
3577 margin: 10px 0;
3578 padding: 15px !important;
3579 border: 1px solid #ddd;
3580 }
3581 .darkify-profile-options > .darkify-field-submessage {
3582 margin: 20px 0;
3583 }
3584 .darkify-profile-options > .darkify-field-submessage .darkify-submessage {
3585 padding: 10px;
3586 border-left-width: 1px;
3587 border-left-style: solid;
3588 border-right-width: 1px;
3589 border-right-style: solid;
3590 }
3591 .darkify-profile-options > .darkify-field-notice {
3592 background-color: transparent;
3593 }
3594
3595 /**
3596 * 09. Modal
3597 */
3598 .darkify-modal {
3599 position: fixed;
3600 z-index: 100101;
3601 top: 0;
3602 left: 0;
3603 width: 100%;
3604 height: 100%;
3605 }
3606 .darkify-modal.hidden {
3607 display: none;
3608 }
3609
3610 .darkify-modal-icon {
3611 z-index: 100102;
3612 }
3613
3614 .darkify-modal-table {
3615 display: table;
3616 width: 100%;
3617 height: 100%;
3618 }
3619
3620 .darkify-modal-table-cell {
3621 display: table-cell;
3622 vertical-align: middle;
3623 margin: 100px 0;
3624 }
3625
3626 .darkify-modal-inner {
3627 position: relative;
3628 z-index: 10;
3629 width: 760px;
3630 height: 750px;
3631 margin: 0 auto;
3632 background-color: #fff;
3633 }
3634
3635 .darkify-modal-content {
3636 position: relative;
3637 overflow: hidden;
3638 overflow-y: auto;
3639 height: 595px;
3640 }
3641 .darkify-modal-content .darkify-shortcode-button {
3642 display: none;
3643 }
3644 .darkify-modal-content .darkify-field {
3645 padding: 15px 30px 15px 15px;
3646 }
3647 .darkify-modal-content a:active,
3648 .darkify-modal-content a:focus {
3649 outline: none;
3650 box-shadow: none;
3651 }
3652 .darkify-modal-content h4 {
3653 font-size: 13px;
3654 }
3655 .darkify-modal-content h4 small {
3656 font-style: italic;
3657 font-weight: 400;
3658 color: #aaa;
3659 }
3660
3661 .darkify-modal-title {
3662 position: relative;
3663 background-color: #fcfcfc;
3664 border-bottom: 1px solid #ddd;
3665 height: 36px;
3666 font-size: 16px;
3667 font-weight: 600;
3668 line-height: 36px;
3669 margin: 0;
3670 padding: 0 36px 0 16px;
3671 }
3672
3673 .darkify-modal-header {
3674 width: 100%;
3675 padding: 14px 0;
3676 background-color: #f5f5f5;
3677 border-bottom: 1px solid #ddd;
3678 }
3679 .darkify-modal-header select {
3680 display: block;
3681 width: 250px;
3682 margin: 0 auto;
3683 font-size: 13px;
3684 line-height: 1;
3685 height: 30px;
3686 min-height: 30px;
3687 background-color: #fff;
3688 }
3689
3690 .darkify-modal-close {
3691 color: #666;
3692 padding: 0;
3693 position: absolute;
3694 top: 0;
3695 right: 0;
3696 width: 36px;
3697 height: 36px;
3698 text-align: center;
3699 background: none;
3700 border: none;
3701 cursor: pointer;
3702 }
3703 .darkify-modal-close:before {
3704 font: normal 20px/36px dashicons;
3705 content: "\f158";
3706 vertical-align: top;
3707 width: 36px;
3708 height: 36px;
3709 }
3710 .darkify-modal-close:hover {
3711 opacity: 0.5;
3712 }
3713
3714 .darkify-modal-insert-wrapper {
3715 text-align: center;
3716 width: 100%;
3717 padding: 15px 0;
3718 background-color: #f5f5f5;
3719 border-top: 1px solid #ddd;
3720 }
3721
3722 .darkify-modal-overlay {
3723 position: absolute;
3724 top: 0;
3725 left: 0;
3726 width: 100%;
3727 height: 100%;
3728 background-color: #000;
3729 opacity: 0.5;
3730 }
3731
3732 /**
3733 * 09. 01. Shortcode Modal
3734 */
3735 .darkify--repeatable {
3736 padding: 15px 15px 0 15px;
3737 }
3738
3739 .darkify--repeat-button-block {
3740 text-align: center;
3741 padding-bottom: 15px;
3742 }
3743
3744 .darkify--repeat-shortcode {
3745 position: relative;
3746 margin-bottom: 15px;
3747 border: 1px dashed #ddd;
3748 }
3749 .darkify--repeat-shortcode:first-child .darkify-repeat-remove {
3750 display: none;
3751 }
3752 .darkify--repeat-shortcode .darkify-repeat-remove {
3753 position: absolute;
3754 right: 10px;
3755 top: 10px;
3756 z-index: 10;
3757 cursor: pointer;
3758 display: inline-block;
3759 font-size: 11px;
3760 width: 18px;
3761 height: 18px;
3762 line-height: 18px;
3763 text-align: center;
3764 border-radius: 2px;
3765 color: #fff;
3766 background-color: #e14d43;
3767 opacity: 0.5;
3768 }
3769 .darkify--repeat-shortcode .darkify-repeat-remove:hover {
3770 opacity: 0.5;
3771 }
3772
3773 .darkify-shortcode-single .darkify-modal-inner {
3774 height: 750px;
3775 }
3776 .darkify-shortcode-single .darkify-modal-content {
3777 height: 652px;
3778 }
3779
3780 .elementor-editor-active .darkify-shortcode-button {
3781 margin-left: 5px;
3782 }
3783 .elementor-editor-active .darkify-modal .hidden {
3784 display: none !important;
3785 }
3786
3787 /**
3788 * 09. 02. Gutenberg Modal
3789 */
3790 .darkify-shortcode-block {
3791 text-align: center;
3792 padding: 14px;
3793 font-size: 13px;
3794 background-color: #f5f5f5;
3795 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
3796 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3797 }
3798
3799 .darkify-shortcode-block .components-button {
3800 margin-bottom: 10px;
3801 }
3802
3803 /**
3804 * 09. 03. Icon Modal
3805 */
3806 .darkify-modal-icon .darkify-icon-title {
3807 padding: 15px 0;
3808 margin: 4px;
3809 font-size: 14px;
3810 font-weight: bold;
3811 text-align: center;
3812 border: 1px solid #eee;
3813 background-color: #f7f7f7;
3814 }
3815 .darkify-modal-icon .darkify-modal-header {
3816 text-align: center;
3817 }
3818 .darkify-modal-icon .darkify-icon-search {
3819 width: 50%;
3820 height: 40px;
3821 line-height: 40px;
3822 }
3823 .darkify-modal-icon i {
3824 cursor: pointer;
3825 display: inline-block;
3826 margin: 4px;
3827 width: 35px;
3828 height: 35px;
3829 line-height: 35px;
3830 font-size: 16px;
3831 color: #555;
3832 text-align: center;
3833 border: 1px solid #ccc;
3834 background-color: #f7f7f7;
3835 border-radius: 2px;
3836 box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
3837 }
3838 .darkify-modal-icon i:hover {
3839 color: #fff;
3840 border-color: #222;
3841 background-color: #222;
3842 }
3843 .darkify-modal-icon .darkify-modal-content {
3844 padding: 10px;
3845 height: 618px;
3846 }
3847 .darkify-modal-icon .darkify-error-text {
3848 padding: 10px;
3849 }
3850
3851 .darkify-modal-loading {
3852 display: none;
3853 position: absolute;
3854 left: 15px;
3855 top: 15px;
3856 }
3857
3858 .darkify-loading {
3859 position: relative;
3860 width: 20px;
3861 height: 20px;
3862 background: #ccc;
3863 border-radius: 20px;
3864 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
3865 }
3866 .darkify-loading:after {
3867 position: absolute;
3868 top: 50%;
3869 left: 50%;
3870 width: 4px;
3871 height: 4px;
3872 content: "";
3873 margin-top: -2px;
3874 margin-left: -2px;
3875 background-color: white;
3876 animation-duration: 0.5s;
3877 animation-iteration-count: infinite;
3878 animation-timing-function: linear;
3879 animation-name: darkifyLoader;
3880 border-radius: 4px;
3881 }
3882
3883 @keyframes darkifyLoader {
3884 0% {
3885 transform: rotate(0deg) translateX(-6px) rotate(0deg);
3886 }
3887 100% {
3888 transform: rotate(360deg) translateX(-6px) rotate(-360deg);
3889 }
3890 }
3891 /**
3892 * 10. Helper
3893 */
3894 .darkify-subtitle-text {
3895 margin-top: 6px;
3896 font-weight: 400;
3897 color: #999;
3898 }
3899
3900 .darkify-desc-text {
3901 clear: both;
3902 float: left;
3903 width: 100%;
3904 margin-top: 6px;
3905 font-weight: 400;
3906 color: #999;
3907 }
3908
3909 .darkify-error-text {
3910 margin-top: 6px;
3911 color: #d02c21;
3912 }
3913
3914 .darkify-before-text {
3915 margin-bottom: 6px;
3916 }
3917
3918 .darkify-after-text {
3919 margin-top: 6px;
3920 }
3921
3922 .darkify-metabox-hide {
3923 display: none !important;
3924 }
3925
3926 .darkify-metabox-show {
3927 display: block !important;
3928 }
3929
3930 .darkify-depend-hidden.darkify-depend-on {
3931 display: none;
3932 }
3933
3934 .darkify-depend-visible.darkify-depend-on {
3935 display: block;
3936 opacity: 0.75;
3937 filter: grayscale(1);
3938 user-select: none;
3939 border-top: 1px solid #eee;
3940 }
3941 .darkify-depend-visible.darkify-depend-on .clear:before {
3942 content: "";
3943 left: 0;
3944 top: 0;
3945 right: 0;
3946 bottom: 0;
3947 position: absolute;
3948 background-color: #eee;
3949 opacity: 0.25;
3950 z-index: 10;
3951 }
3952
3953 .darkify-warning-primary {
3954 color: #fff !important;
3955 border-color: #dc3545 !important;
3956 background: #dc3545 !important;
3957 }
3958 .darkify-warning-primary:hover,
3959 .darkify-warning-primary:focus {
3960 border-color: #bd2130 !important;
3961 background: #bd2130 !important;
3962 }
3963 .darkify-warning-primary:focus {
3964 box-shadow: 0 0 0 1px #fff, 0 0 0 3px #bd2130 !important;
3965 }
3966 .darkify-warning-primary:active {
3967 border-color: #bd2130 !important;
3968 background: #bd2130 !important;
3969 }
3970
3971 .darkify-form-result {
3972 display: none;
3973 float: left;
3974 padding: 0 8px;
3975 margin-right: 4px;
3976 font-size: 11px;
3977 line-height: 30px;
3978 user-select: none;
3979 border-radius: 2px;
3980 align-self: center;
3981 }
3982
3983 .darkify-form-show {
3984 display: block;
3985 }
3986
3987 .darkify-form-success {
3988 color: #fff;
3989 background-color: #46b450;
3990 }
3991
3992 .darkify-form-warning {
3993 color: #8a6d3b;
3994 background-color: #faebcc;
3995 }
3996
3997 .darkify-label-error {
3998 position: relative;
3999 top: -2px;
4000 display: inline-block;
4001 font-size: 10px;
4002 line-height: 10px;
4003 height: 10px;
4004 width: 10px;
4005 padding: 1px;
4006 font-style: normal;
4007 text-align: center;
4008 color: #fff;
4009 vertical-align: middle;
4010 background-color: #e10000;
4011 border-radius: 2px;
4012 }
4013
4014 .darkify-no-option {
4015 padding: 30px;
4016 }
4017
4018 .darkify-input-number {
4019 -moz-appearance: textfield;
4020 }
4021
4022 .darkify-input-number::-webkit-inner-spin-button,
4023 .darkify-input-number::-webkit-outer-spin-button {
4024 /* -webkit-appearance: none; */
4025 margin: 0;
4026 }
4027 .darkify-field-dimensions .darkify-input-number {
4028 padding: 0;
4029 }
4030
4031 .darkify-fa5-shims .darkify .fas,
4032 .darkify-fa5-shims .darkify .far,
4033 .darkify-fa5-shims .darkify .fab {
4034 font-family: "FontAwesome";
4035 font-style: normal;
4036 }
4037
4038 /**
4039 * 11. Welcome Page
4040 */
4041 .darkify-welcome-wrap {
4042 position: relative;
4043 margin: 25px 40px 0 20px;
4044 font-size: 15px;
4045 max-width: 1200px;
4046 }
4047 .darkify-welcome-wrap p {
4048 font-size: 14px;
4049 line-height: 1.5;
4050 }
4051 .darkify-welcome-wrap h1 {
4052 margin: 0.2em 200px 0 0;
4053 padding: 0;
4054 color: #32373c;
4055 line-height: 1.2em;
4056 font-size: 2.8em;
4057 font-weight: 400;
4058 }
4059 .darkify-welcome-wrap .darkify-logo {
4060 position: absolute;
4061 overflow: hidden;
4062 top: 0;
4063 right: 0;
4064 height: 160px;
4065 width: 140px;
4066 background-image: linear-gradient(45deg, #2d67cb, #ad19f3);
4067 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgba(0, 0, 0, 0.25);
4068 }
4069 .darkify-welcome-wrap .darkify-logo .darkify--effects i {
4070 position: absolute;
4071 width: 200px;
4072 height: 100px;
4073 background-color: rgba(0, 0, 0, 0.15);
4074 transform: rotate(-45deg);
4075 }
4076 .darkify-welcome-wrap .darkify-logo .darkify--effects i:nth-child(1) {
4077 bottom: -20px;
4078 right: -70px;
4079 }
4080 .darkify-welcome-wrap .darkify-logo .darkify--effects i:nth-child(2) {
4081 bottom: -35px;
4082 right: -80px;
4083 }
4084 .darkify-welcome-wrap .darkify-logo .darkify--effects i:nth-child(3) {
4085 bottom: -50px;
4086 right: -90px;
4087 }
4088 .darkify-welcome-wrap .darkify-logo .darkify--effects i:nth-child(4) {
4089 bottom: -65px;
4090 right: -100px;
4091 }
4092 .darkify-welcome-wrap .darkify-logo .darkify--wp-logos {
4093 position: relative;
4094 padding-top: 25px;
4095 text-align: center;
4096 }
4097 .darkify-welcome-wrap .darkify-logo .darkify--wp-logo {
4098 position: absolute;
4099 left: 20px;
4100 width: 20px;
4101 height: 20px;
4102 background-repeat: no-repeat;
4103 background-position: center center;
4104 background-image: url(../images/wp-logo.svg);
4105 }
4106 .darkify-welcome-wrap .darkify-logo .darkify--wp-plugin-logo {
4107 display: inline-block;
4108 width: 50px;
4109 height: 50px;
4110 border: 3px solid #fff;
4111 background-size: 40px;
4112 background-repeat: no-repeat;
4113 background-position: center center;
4114 background-image: url(../images/wp-plugin-logo.svg);
4115 border-radius: 100%;
4116 vertical-align: middle;
4117 }
4118 .darkify-welcome-wrap .darkify-logo .darkify--text {
4119 position: absolute;
4120 left: 0;
4121 right: 0;
4122 top: 90px;
4123 color: #fff;
4124 font-size: 13px;
4125 line-height: 1.2em;
4126 font-weight: 600;
4127 text-align: center;
4128 text-transform: uppercase;
4129 text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
4130 }
4131 .darkify-welcome-wrap .darkify-logo .darkify--version {
4132 top: auto;
4133 left: auto;
4134 right: 8px;
4135 bottom: 4px;
4136 font-size: 11px;
4137 text-transform: lowercase;
4138 }
4139 .darkify-welcome-wrap .darkify-about-text {
4140 font-weight: 400;
4141 line-height: 1.6em;
4142 font-size: 19px;
4143 margin: 1em 200px 1em 0;
4144 color: #555d66;
4145 }
4146 .darkify-welcome-wrap .darkify-demo-button {
4147 margin: 1em 200px 2em 0;
4148 }
4149 .darkify-welcome-wrap .nav-tab-wrapper {
4150 margin-bottom: 20px;
4151 }
4152 .darkify-welcome-wrap ul {
4153 list-style-type: disc;
4154 padding-left: 15px;
4155 }
4156 .darkify-welcome-wrap .darkify--col {
4157 float: left;
4158 padding-right: 20px;
4159 box-sizing: border-box;
4160 }
4161 .darkify-welcome-wrap .darkify--col-2 {
4162 width: 50%;
4163 }
4164 .darkify-welcome-wrap .darkify--col-3 {
4165 width: 33.333%;
4166 }
4167 .darkify-welcome-wrap .darkify--col-4 {
4168 width: 25%;
4169 }
4170 .darkify-welcome-wrap .darkify--col-5 {
4171 width: 20%;
4172 }
4173 .darkify-welcome-wrap .darkify--col-last {
4174 padding-right: 0;
4175 }
4176 .darkify-welcome-wrap .darkify--col-upgrade {
4177 padding: 10px 0;
4178 text-align: center;
4179 border-top: 1px solid #e5e5e5;
4180 }
4181
4182 .darkify--table-compare thead td,
4183 .darkify--table-compare tfoot td {
4184 text-align: center;
4185 }
4186 .darkify--table-compare td {
4187 font-size: 14px;
4188 text-align: center;
4189 vertical-align: middle;
4190 padding: 10px;
4191 }
4192 .darkify--table-compare td:first-child {
4193 text-align: left;
4194 }
4195 .darkify--table-compare tfoot td {
4196 padding: 15px 0;
4197 }
4198 .darkify--table-compare .fa {
4199 font-size: 18px;
4200 }
4201 .darkify--table-compare .fa-check-circle {
4202 color: #46b450;
4203 }
4204 .darkify--table-compare .fa-times-circle {
4205 color: #dc3232;
4206 }
4207
4208 .darkify-welcome-cols {
4209 clear: both;
4210 margin: 20px 0;
4211 background-color: #fff;
4212 padding: 0 0;
4213 border-radius: 2px;
4214 border: 1px solid #e5e5e5;
4215 }
4216 .darkify-welcome-cols .darkify--col {
4217 width: 33.333%;
4218 float: left;
4219 padding: 20px;
4220 text-align: center;
4221 box-sizing: border-box;
4222 min-height: 200px;
4223 border-right: 1px solid #e5e5e5;
4224 }
4225 .darkify-welcome-cols .darkify--left,
4226 .darkify-welcome-cols .darkify--block {
4227 float: left;
4228 width: 20%;
4229 padding: 0 30px;
4230 text-align: center;
4231 box-sizing: border-box;
4232 }
4233 .darkify-welcome-cols .darkify--block {
4234 width: 80%;
4235 }
4236 .darkify-welcome-cols .darkify--col-first {
4237 border-bottom: 1px solid #e5e5e5;
4238 }
4239 .darkify-welcome-cols .darkify--last {
4240 border-right: none;
4241 }
4242 .darkify-welcome-cols .darkify--space {
4243 height: 20px;
4244 }
4245 .darkify-welcome-cols .darkify--icon {
4246 display: inline-block;
4247 font-size: 20px;
4248 width: 30px;
4249 height: 30px;
4250 line-height: 30px;
4251 text-align: center;
4252 margin-bottom: 10px;
4253 color: #fff;
4254 background-color: #555;
4255 border-radius: 30px;
4256 }
4257 .darkify-welcome-cols .darkify--active {
4258 background-color: #1a74e4;
4259 }
4260 .darkify-welcome-cols .darkify--deactive {
4261 background-color: #e14d43;
4262 }
4263 .darkify-welcome-cols .darkify--title {
4264 font-weight: bold;
4265 display: block;
4266 }
4267 .darkify-welcome-cols p:last-child {
4268 margin-bottom: 0;
4269 }
4270
4271 .darkify-features-cols .darkify--key-features {
4272 width: 30%;
4273 }
4274 .darkify-features-cols .darkify--available-fields {
4275 width: 70%;
4276 }
4277
4278 .darkify-code-block {
4279 margin: 20px 0;
4280 padding: 5px 20px;
4281 background-color: #fff;
4282 border-radius: 2px;
4283 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
4284 }
4285 .darkify-code-block pre {
4286 font-size: 13px;
4287 color: #0073aa;
4288 }
4289 .darkify-code-block pre span {
4290 color: #999;
4291 }
4292
4293 .darkify--table-fields td {
4294 font-size: 14px;
4295 }
4296
4297 .darkify--upgrade a {
4298 color: #5cb85c;
4299 font-weight: bold;
4300 }
4301 .darkify--upgrade a:focus,
4302 .darkify--upgrade a:hover {
4303 color: #4aa14a;
4304 outline: none;
4305 box-shadow: none;
4306 }
4307
4308 @media only screen and (max-width: 782px) {
4309 .darkify-welcome-cols .darkify--col {
4310 width: 100%;
4311 min-height: auto;
4312 border-right: none;
4313 border-bottom: 1px solid #e5e5e5;
4314 }
4315 .darkify-features-cols .darkify--key-features {
4316 width: 100%;
4317 }
4318 .darkify-features-cols .darkify--available-fields {
4319 width: 100%;
4320 }
4321 }
4322 /**
4323 * 12. Responsive
4324 */
4325 @media only screen and (max-width: 1200px) {
4326 .darkify-metabox .darkify-field .darkify-title {
4327 float: none;
4328 width: 100%;
4329 margin-bottom: 10px;
4330 }
4331 .darkify-metabox .darkify-field .darkify-fieldset {
4332 float: none;
4333 width: 100%;
4334 }
4335 }
4336 @media only screen and (max-width: 782px) {
4337 .darkify-header-inner {
4338 text-align: center;
4339 }
4340 .darkify-header-inner h1 {
4341 width: 100%;
4342 margin-bottom: 10px;
4343 }
4344 .darkify-form-result {
4345 float: none;
4346 margin-right: 0;
4347 margin-bottom: 10px;
4348 }
4349 .darkify-search,
4350 .darkify-header-right,
4351 .darkify-header-left {
4352 width: 100%;
4353 }
4354 .darkify-search {
4355 text-align: center;
4356 margin-bottom: 15px;
4357 }
4358 .darkify-footer {
4359 text-align: center;
4360 }
4361 .darkify-buttons {
4362 float: none;
4363 }
4364 .darkify-copyright {
4365 float: none;
4366 margin-top: 10px;
4367 }
4368 .darkify-nav,
4369 .darkify-expand-all,
4370 .darkify-reset-section,
4371 .darkify-nav-background {
4372 display: none !important;
4373 }
4374 .darkify-nav-normal + .darkify-content {
4375 margin-left: 0;
4376 }
4377 .darkify-section-title,
4378 .darkify-section {
4379 display: block !important;
4380 }
4381 .darkify-field .darkify-title {
4382 float: none;
4383 width: 100%;
4384 margin-bottom: 10px;
4385 }
4386 .darkify-field .darkify-fieldset {
4387 float: none;
4388 width: 100%;
4389 }
4390 .darkify-field-color .button.wp-picker-clear {
4391 padding: 0 8px;
4392 line-height: 2.14285714;
4393 min-height: 32px;
4394 }
4395 .darkify-profile-options > .darkify-field > .darkify-title,
4396 .darkify-taxonomy-edit-fields > .darkify-field > .darkify-title {
4397 float: none;
4398 width: 100%;
4399 margin-bottom: 10px;
4400 }
4401 .darkify-profile-options > .darkify-field > .darkify-fieldset,
4402 .darkify-taxonomy-edit-fields > .darkify-field > .darkify-fieldset {
4403 float: none;
4404 width: 100%;
4405 }
4406 .darkify-nav-menu-options > .darkify-fields {
4407 margin-left: -10px;
4408 margin-right: -10px;
4409 }
4410 .darkify-nav-menu-options > .darkify-fields > .darkify-field {
4411 padding: 10px;
4412 }
4413 }
4414 @media only screen and (max-width: 782px) {
4415 .darkify-modal .darkify-modal-inner {
4416 width: 90%;
4417 }
4418 }
4419 @media only screen and (max-height: 750px) {
4420 .darkify-modal .darkify-modal-inner {
4421 height: auto;
4422 }
4423 .darkify-modal .darkify-modal-content {
4424 height: calc(100vh - 200px);
4425 }
4426 }
4427 /**
4428 * Chosen JS Styles
4429 */
4430 .chosen-container {
4431 position: relative;
4432 display: inline-block;
4433 vertical-align: middle;
4434 font-size: 13px;
4435 user-select: none;
4436 }
4437
4438 .chosen-container * {
4439 box-sizing: border-box;
4440 }
4441
4442 .chosen-container .chosen-drop {
4443 position: absolute;
4444 top: 100%;
4445 z-index: 1010;
4446 width: 100%;
4447 border: 1px solid #aaa;
4448 border-top: 0;
4449 background: #fff;
4450 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
4451 clip: rect(0, 0, 0, 0);
4452 clip-path: inset(100% 100%);
4453 }
4454
4455 .chosen-container.chosen-with-drop .chosen-drop {
4456 clip: auto;
4457 clip-path: none;
4458 }
4459
4460 .chosen-container a {
4461 cursor: pointer;
4462 }
4463
4464 .chosen-container .search-choice .group-name,
4465 .chosen-container .chosen-single .group-name {
4466 margin-right: 4px;
4467 overflow: hidden;
4468 white-space: nowrap;
4469 text-overflow: ellipsis;
4470 font-weight: normal;
4471 color: #999999;
4472 }
4473
4474 .chosen-container .search-choice .group-name:after,
4475 .chosen-container .chosen-single .group-name:after {
4476 content: ":";
4477 padding-left: 2px;
4478 vertical-align: top;
4479 }
4480
4481 .chosen-container-single .chosen-single {
4482 position: relative;
4483 display: block;
4484 overflow: hidden;
4485 padding: 0 0 0 8px;
4486 height: 25px;
4487 border: 1px solid #aaa;
4488 border-radius: 5px;
4489 background-color: #fff;
4490 background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
4491 background-clip: padding-box;
4492 box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
4493 color: #444;
4494 text-decoration: none;
4495 white-space: nowrap;
4496 line-height: 24px;
4497 }
4498
4499 .chosen-container-single .chosen-default {
4500 color: #999;
4501 }
4502
4503 .chosen-container-single .chosen-single span {
4504 display: block;
4505 overflow: hidden;
4506 margin-right: 26px;
4507 text-overflow: ellipsis;
4508 white-space: nowrap;
4509 }
4510
4511 .chosen-container-single .chosen-single-with-deselect span {
4512 margin-right: 38px;
4513 }
4514
4515 .chosen-container-single .chosen-single abbr {
4516 position: absolute;
4517 top: 6px;
4518 right: 26px;
4519 display: block;
4520 width: 12px;
4521 height: 12px;
4522 font-size: 1px;
4523 }
4524
4525 .chosen-container-single .chosen-single div {
4526 position: absolute;
4527 top: 0;
4528 right: 0;
4529 display: block;
4530 width: 18px;
4531 height: 100%;
4532 }
4533
4534 .chosen-container-single .chosen-single div b {
4535 display: block;
4536 width: 100%;
4537 height: 100%;
4538 }
4539
4540 .chosen-container-single .chosen-search {
4541 position: relative;
4542 z-index: 1010;
4543 margin: 0;
4544 padding: 3px 4px;
4545 white-space: nowrap;
4546 }
4547
4548 .chosen-container-single .chosen-search input[type="text"] {
4549 margin: 1px 0;
4550 padding: 4px 20px 4px 5px;
4551 width: 100%;
4552 height: auto;
4553 outline: 0;
4554 border: 1px solid #aaa;
4555 font-size: 1em;
4556 font-family: sans-serif;
4557 line-height: normal;
4558 border-radius: 0;
4559 }
4560
4561 .chosen-container-single .chosen-drop {
4562 margin-top: -1px;
4563 border-radius: 0 0 4px 4px;
4564 background-clip: padding-box;
4565 }
4566
4567 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
4568 position: absolute;
4569 clip: rect(0, 0, 0, 0);
4570 clip-path: inset(100% 100%);
4571 }
4572
4573 .chosen-container .chosen-results {
4574 color: #444;
4575 position: relative;
4576 overflow-x: hidden;
4577 overflow-y: auto;
4578 margin: 0 4px 4px 0;
4579 padding: 0 0 0 4px;
4580 max-height: 240px;
4581 -webkit-overflow-scrolling: touch;
4582 }
4583
4584 .chosen-container .chosen-results li {
4585 display: none;
4586 margin: 0;
4587 padding: 5px 6px;
4588 list-style: none;
4589 line-height: 15px;
4590 word-wrap: break-word;
4591 -webkit-touch-callout: none;
4592 }
4593
4594 .chosen-container .chosen-results li.active-result {
4595 display: list-item;
4596 cursor: pointer;
4597 }
4598
4599 .chosen-container .chosen-results li.disabled-result {
4600 display: list-item;
4601 color: #ccc;
4602 cursor: default;
4603 }
4604
4605 .chosen-container .chosen-results li.highlighted {
4606 background-color: #3875d7;
4607 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
4608 color: #fff;
4609 }
4610
4611 .chosen-container .chosen-results li.no-results {
4612 color: #777;
4613 display: list-item;
4614 background: #f4f4f4;
4615 }
4616
4617 .chosen-container .chosen-results li.group-result {
4618 display: list-item;
4619 font-weight: bold;
4620 cursor: default;
4621 }
4622
4623 .chosen-container .chosen-results li.group-option {
4624 padding-left: 15px;
4625 }
4626
4627 .chosen-container .chosen-results li em {
4628 font-style: normal;
4629 text-decoration: underline;
4630 }
4631
4632 .chosen-container-multi .chosen-choices {
4633 position: relative;
4634 overflow: hidden;
4635 margin: 0;
4636 padding: 0 5px;
4637 width: 100%;
4638 height: auto;
4639 border: 1px solid #aaa;
4640 background-color: #fff;
4641 background-image: linear-gradient(#eee 1%, #fff 15%);
4642 cursor: text;
4643 }
4644
4645 .chosen-container-multi .chosen-choices li {
4646 float: left;
4647 list-style: none;
4648 }
4649
4650 .chosen-container-multi .chosen-choices li.search-field {
4651 margin: 0;
4652 padding: 0;
4653 white-space: nowrap;
4654 }
4655
4656 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
4657 margin: 1px 0;
4658 padding: 0;
4659 outline: 0;
4660 border: 0 !important;
4661 background: transparent !important;
4662 box-shadow: none;
4663 color: #999;
4664 font-size: 100%;
4665 font-family: sans-serif;
4666 line-height: normal;
4667 border-radius: 0;
4668 width: 25px;
4669 height: 25px;
4670 min-height: 25px;
4671 }
4672
4673 .chosen-container-multi .chosen-choices li.search-choice {
4674 position: relative;
4675 margin: 3px 5px 3px 0;
4676 padding: 3px 20px 3px 6px;
4677 border: 1px solid #aaa;
4678 max-width: 100%;
4679 border-radius: 3px;
4680 background-color: #eeeeee;
4681 background-image: linear-gradient(
4682 #f4f4f4 20%,
4683 #f0f0f0 50%,
4684 #e8e8e8 52%,
4685 #eee 100%
4686 );
4687 background-size: 100% 19px;
4688 background-repeat: repeat-x;
4689 background-clip: padding-box;
4690 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
4691 color: #333;
4692 line-height: 13px;
4693 cursor: default;
4694 }
4695
4696 .chosen-container-multi .chosen-choices li.search-choice span {
4697 word-wrap: break-word;
4698 white-space: nowrap;
4699 }
4700
4701 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
4702 position: absolute;
4703 top: 0;
4704 right: 0;
4705 display: block;
4706 width: 12px;
4707 height: 12px;
4708 font-size: 1px;
4709 }
4710
4711 .chosen-container-multi .chosen-choices li.search-choice-disabled {
4712 padding-right: 5px;
4713 border: 1px solid #ccc;
4714 background-color: #e4e4e4;
4715 background-image: linear-gradient(
4716 #f4f4f4 20%,
4717 #f0f0f0 50%,
4718 #e8e8e8 52%,
4719 #eee 100%
4720 );
4721 color: #666;
4722 }
4723
4724 .chosen-container-multi .chosen-choices li.search-choice-focus {
4725 background: #d4d4d4;
4726 }
4727
4728 .chosen-container-multi .chosen-results {
4729 margin: 0;
4730 padding: 0;
4731 }
4732
4733 .chosen-container-multi .chosen-drop .result-selected {
4734 display: list-item;
4735 color: #ccc;
4736 cursor: default;
4737 }
4738
4739 .chosen-container-active .chosen-single {
4740 border: 1px solid #5897fb;
4741 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4742 }
4743
4744 .chosen-container-active.chosen-with-drop .chosen-single {
4745 border: 1px solid #aaa;
4746 border-bottom-right-radius: 0;
4747 border-bottom-left-radius: 0;
4748 background-image: linear-gradient(#eee 20%, #fff 80%);
4749 box-shadow: 0 1px 0 #fff inset;
4750 }
4751
4752 .chosen-container-active.chosen-with-drop .chosen-single div {
4753 border-left: none;
4754 background: transparent;
4755 }
4756
4757 .chosen-container-active .chosen-choices {
4758 border: 1px solid #5897fb;
4759 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
4760 }
4761
4762 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
4763 color: #222 !important;
4764 }
4765
4766 .chosen-disabled {
4767 opacity: 0.5 !important;
4768 cursor: default;
4769 }
4770
4771 .chosen-disabled .chosen-single {
4772 cursor: default;
4773 }
4774
4775 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
4776 cursor: default;
4777 }
4778
4779 .chosen-rtl {
4780 text-align: right;
4781 }
4782
4783 .chosen-rtl .chosen-single {
4784 overflow: visible;
4785 padding: 0 8px 0 0;
4786 }
4787
4788 .chosen-rtl .chosen-single span {
4789 margin-right: 0;
4790 margin-left: 26px;
4791 direction: rtl;
4792 }
4793
4794 .chosen-rtl .chosen-single-with-deselect span {
4795 margin-left: 38px;
4796 }
4797
4798 .chosen-rtl .chosen-single div {
4799 right: auto;
4800 left: 3px;
4801 }
4802
4803 .chosen-rtl .chosen-single abbr {
4804 right: auto;
4805 left: 26px;
4806 }
4807
4808 .chosen-rtl .chosen-choices li {
4809 float: right;
4810 }
4811
4812 .chosen-rtl .chosen-choices li.search-field input[type="text"] {
4813 direction: rtl;
4814 }
4815
4816 .chosen-rtl .chosen-choices li.search-choice {
4817 margin: 3px 5px 3px 0;
4818 padding: 3px 5px 3px 19px;
4819 }
4820
4821 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
4822 right: auto;
4823 left: 4px;
4824 }
4825
4826 .chosen-rtl.chosen-container-single .chosen-results {
4827 margin: 0 0 4px 4px;
4828 padding: 0 4px 0 0;
4829 }
4830
4831 .chosen-rtl .chosen-results li.group-option {
4832 padding-right: 15px;
4833 padding-left: 0;
4834 }
4835
4836 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
4837 border-right: none;
4838 }
4839
4840 .chosen-rtl .chosen-search input[type="text"] {
4841 padding: 4px 5px 4px 20px;
4842 direction: rtl;
4843 }
4844
4845 /**
4846 * Flatpickr
4847 */
4848 .flatpickr-calendar {
4849 background: transparent;
4850 opacity: 0;
4851 display: none;
4852 text-align: center;
4853 visibility: hidden;
4854 padding: 0;
4855 -webkit-animation: none;
4856 animation: none;
4857 direction: ltr;
4858 border: 0;
4859 font-size: 14px;
4860 line-height: 24px;
4861 border-radius: 5px;
4862 position: absolute;
4863 width: 307.875px;
4864 -webkit-box-sizing: border-box;
4865 box-sizing: border-box;
4866 -ms-touch-action: manipulation;
4867 touch-action: manipulation;
4868 background: #fff;
4869 -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
4870 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
4871 box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
4872 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
4873 }
4874
4875 .flatpickr-calendar.open,
4876 .flatpickr-calendar.inline {
4877 opacity: 1;
4878 max-height: 640px;
4879 visibility: visible;
4880 }
4881
4882 .flatpickr-calendar.open {
4883 display: inline-block;
4884 z-index: 99999;
4885 }
4886
4887 .flatpickr-calendar.animate.open {
4888 -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4889 animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
4890 }
4891
4892 .flatpickr-calendar.inline {
4893 display: block;
4894 position: relative;
4895 top: 2px;
4896 }
4897
4898 .flatpickr-calendar.static {
4899 position: absolute;
4900 top: calc(100% + 2px);
4901 }
4902
4903 .flatpickr-calendar.static.open {
4904 z-index: 999;
4905 display: block;
4906 }
4907
4908 .flatpickr-calendar.multiMonth
4909 .flatpickr-days
4910 .dayContainer:nth-child(n + 1)
4911 .flatpickr-day.inRange:nth-child(7n + 7) {
4912 -webkit-box-shadow: none !important;
4913 box-shadow: none !important;
4914 }
4915
4916 .flatpickr-calendar.multiMonth
4917 .flatpickr-days
4918 .dayContainer:nth-child(n + 2)
4919 .flatpickr-day.inRange:nth-child(7n + 1) {
4920 -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4921 box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
4922 }
4923
4924 .flatpickr-calendar .hasWeeks .dayContainer,
4925 .flatpickr-calendar .hasTime .dayContainer {
4926 border-bottom: 0;
4927 border-bottom-right-radius: 0;
4928 border-bottom-left-radius: 0;
4929 }
4930
4931 .flatpickr-calendar .hasWeeks .dayContainer {
4932 border-left: 0;
4933 }
4934
4935 .flatpickr-calendar.hasTime .flatpickr-time {
4936 height: 40px;
4937 border-top: 1px solid #e6e6e6;
4938 }
4939
4940 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
4941 height: auto;
4942 }
4943
4944 .flatpickr-calendar:before,
4945 .flatpickr-calendar:after {
4946 position: absolute;
4947 display: block;
4948 pointer-events: none;
4949 border: solid transparent;
4950 content: "";
4951 height: 0;
4952 width: 0;
4953 left: 22px;
4954 }
4955
4956 .flatpickr-calendar.rightMost:before,
4957 .flatpickr-calendar.arrowRight:before,
4958 .flatpickr-calendar.rightMost:after,
4959 .flatpickr-calendar.arrowRight:after {
4960 left: auto;
4961 right: 22px;
4962 }
4963
4964 .flatpickr-calendar.arrowCenter:before,
4965 .flatpickr-calendar.arrowCenter:after {
4966 left: 50%;
4967 right: 50%;
4968 }
4969
4970 .flatpickr-calendar:before {
4971 border-width: 5px;
4972 margin: 0 -5px;
4973 }
4974
4975 .flatpickr-calendar:after {
4976 border-width: 4px;
4977 margin: 0 -4px;
4978 }
4979
4980 .flatpickr-calendar.arrowTop:before,
4981 .flatpickr-calendar.arrowTop:after {
4982 bottom: 100%;
4983 }
4984
4985 .flatpickr-calendar.arrowTop:before {
4986 border-bottom-color: #e6e6e6;
4987 }
4988
4989 .flatpickr-calendar.arrowTop:after {
4990 border-bottom-color: #fff;
4991 }
4992
4993 .flatpickr-calendar.arrowBottom:before,
4994 .flatpickr-calendar.arrowBottom:after {
4995 top: 100%;
4996 }
4997
4998 .flatpickr-calendar.arrowBottom:before {
4999 border-top-color: #e6e6e6;
5000 }
5001
5002 .flatpickr-calendar.arrowBottom:after {
5003 border-top-color: #fff;
5004 }
5005
5006 .flatpickr-calendar:focus {
5007 outline: 0;
5008 }
5009
5010 .flatpickr-wrapper {
5011 position: relative;
5012 display: inline-block;
5013 }
5014
5015 .flatpickr-months {
5016 display: -webkit-box;
5017 display: -webkit-flex;
5018 display: -ms-flexbox;
5019 display: flex;
5020 }
5021
5022 .flatpickr-months .flatpickr-month {
5023 background: transparent;
5024 color: rgba(0, 0, 0, 0.9);
5025 fill: rgba(0, 0, 0, 0.9);
5026 height: 34px;
5027 line-height: 1;
5028 text-align: center;
5029 position: relative;
5030 -webkit-user-select: none;
5031 -moz-user-select: none;
5032 -ms-user-select: none;
5033 user-select: none;
5034 overflow: hidden;
5035 -webkit-box-flex: 1;
5036 -webkit-flex: 1;
5037 -ms-flex: 1;
5038 flex: 1;
5039 }
5040
5041 .flatpickr-months .flatpickr-prev-month,
5042 .flatpickr-months .flatpickr-next-month {
5043 text-decoration: none;
5044 cursor: pointer;
5045 position: absolute;
5046 top: 0;
5047 height: 34px;
5048 padding: 10px;
5049 z-index: 3;
5050 color: rgba(0, 0, 0, 0.9);
5051 fill: rgba(0, 0, 0, 0.9);
5052 }
5053
5054 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
5055 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
5056 display: none;
5057 }
5058
5059 .flatpickr-months .flatpickr-prev-month i,
5060 .flatpickr-months .flatpickr-next-month i {
5061 position: relative;
5062 }
5063
5064 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
5065 .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
5066 /*
5067 /*rtl:begin:ignore*/
5068 /*
5069 */
5070 left: 0;
5071 /*
5072 /*rtl:end:ignore*
5073 */
5074 }
5075
5076 /*
5077 /*rtl:begin:ignore*/
5078 /*
5079 /*rtl:end:ignore*/
5080 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
5081 .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
5082 /*
5083 /*rtl:begin:ignore*/
5084 /*
5085 */
5086 right: 0;
5087 /*
5088 /*rtl:end:ignore*/
5089 /*
5090 */
5091 }
5092
5093 /*
5094 /*rtl:begin:ignore*/
5095 /*
5096 /*rtl:end:ignore*/
5097 .flatpickr-months .flatpickr-prev-month:hover,
5098 .flatpickr-months .flatpickr-next-month:hover {
5099 color: #959ea9;
5100 }
5101
5102 .flatpickr-months .flatpickr-prev-month:hover svg,
5103 .flatpickr-months .flatpickr-next-month:hover svg {
5104 fill: #f64747;
5105 }
5106
5107 .flatpickr-months .flatpickr-prev-month svg,
5108 .flatpickr-months .flatpickr-next-month svg {
5109 width: 14px;
5110 height: 14px;
5111 }
5112
5113 .flatpickr-months .flatpickr-prev-month svg path,
5114 .flatpickr-months .flatpickr-next-month svg path {
5115 -webkit-transition: fill 0.1s;
5116 transition: fill 0.1s;
5117 fill: inherit;
5118 }
5119
5120 .numInputWrapper {
5121 position: relative;
5122 height: auto;
5123 }
5124
5125 .numInputWrapper input,
5126 .numInputWrapper span {
5127 display: inline-block;
5128 }
5129
5130 .numInputWrapper input {
5131 width: 100%;
5132 }
5133
5134 .numInputWrapper input::-ms-clear {
5135 display: none;
5136 }
5137
5138 .numInputWrapper input::-webkit-outer-spin-button,
5139 .numInputWrapper input::-webkit-inner-spin-button {
5140 margin: 0;
5141 -webkit-appearance: none;
5142 }
5143
5144 .numInputWrapper span {
5145 position: absolute;
5146 right: 0;
5147 width: 14px;
5148 padding: 0 4px 0 2px;
5149 height: 50%;
5150 line-height: 50%;
5151 opacity: 0;
5152 cursor: pointer;
5153 border: 1px solid rgba(57, 57, 57, 0.15);
5154 -webkit-box-sizing: border-box;
5155 box-sizing: border-box;
5156 }
5157
5158 .numInputWrapper span:hover {
5159 background: rgba(0, 0, 0, 0.1);
5160 }
5161
5162 .numInputWrapper span:active {
5163 background: rgba(0, 0, 0, 0.2);
5164 }
5165
5166 .numInputWrapper span:after {
5167 display: block;
5168 content: "";
5169 position: absolute;
5170 }
5171
5172 .numInputWrapper span.arrowUp {
5173 top: 0;
5174 border-bottom: 0;
5175 }
5176
5177 .numInputWrapper span.arrowUp:after {
5178 border-left: 4px solid transparent;
5179 border-right: 4px solid transparent;
5180 border-bottom: 4px solid rgba(57, 57, 57, 0.6);
5181 top: 26%;
5182 }
5183
5184 .numInputWrapper span.arrowDown {
5185 top: 50%;
5186 }
5187
5188 .numInputWrapper span.arrowDown:after {
5189 border-left: 4px solid transparent;
5190 border-right: 4px solid transparent;
5191 border-top: 4px solid rgba(57, 57, 57, 0.6);
5192 top: 40%;
5193 }
5194
5195 .numInputWrapper span svg {
5196 width: inherit;
5197 height: auto;
5198 }
5199
5200 .numInputWrapper span svg path {
5201 fill: rgba(0, 0, 0, 0.5);
5202 }
5203
5204 .numInputWrapper:hover {
5205 background: rgba(0, 0, 0, 0.05);
5206 }
5207
5208 .numInputWrapper:hover span {
5209 opacity: 1;
5210 }
5211
5212 .flatpickr-current-month {
5213 font-size: 135%;
5214 line-height: inherit;
5215 font-weight: 300;
5216 color: inherit;
5217 position: absolute;
5218 width: 75%;
5219 left: 12.5%;
5220 padding: 7.48px 0 0 0;
5221 line-height: 1;
5222 height: 34px;
5223 display: inline-block;
5224 text-align: center;
5225 -webkit-transform: translate3d(0px, 0px, 0px);
5226 transform: translate3d(0px, 0px, 0px);
5227 }
5228
5229 .flatpickr-current-month span.cur-month {
5230 font-family: inherit;
5231 font-weight: 700;
5232 color: inherit;
5233 display: inline-block;
5234 margin-left: 0.5ch;
5235 padding: 0;
5236 }
5237
5238 .flatpickr-current-month span.cur-month:hover {
5239 background: rgba(0, 0, 0, 0.05);
5240 }
5241
5242 .flatpickr-current-month .numInputWrapper {
5243 width: 6ch;
5244 width: 7ch\0;
5245 display: inline-block;
5246 }
5247
5248 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
5249 border-bottom-color: rgba(0, 0, 0, 0.9);
5250 }
5251
5252 .flatpickr-current-month .numInputWrapper span.arrowDown:after {
5253 border-top-color: rgba(0, 0, 0, 0.9);
5254 }
5255
5256 .flatpickr-current-month input.cur-year {
5257 background: transparent;
5258 -webkit-box-sizing: border-box;
5259 box-sizing: border-box;
5260 color: inherit;
5261 cursor: text;
5262 padding: 0 0 0 0.5ch;
5263 margin: 0;
5264 display: inline-block;
5265 font-size: inherit;
5266 font-family: inherit;
5267 font-weight: 300;
5268 line-height: inherit;
5269 height: auto;
5270 border: 0;
5271 border-radius: 0;
5272 vertical-align: initial;
5273 -webkit-appearance: textfield;
5274 -moz-appearance: textfield;
5275 appearance: textfield;
5276 }
5277
5278 .flatpickr-current-month input.cur-year:focus {
5279 outline: 0;
5280 }
5281
5282 .flatpickr-current-month input.cur-year[disabled],
5283 .flatpickr-current-month input.cur-year[disabled]:hover {
5284 font-size: 100%;
5285 color: rgba(0, 0, 0, 0.5);
5286 background: transparent;
5287 pointer-events: none;
5288 }
5289
5290 .flatpickr-current-month .flatpickr-monthDropdown-months {
5291 appearance: menulist;
5292 background: transparent;
5293 border: none;
5294 border-radius: 0;
5295 box-sizing: border-box;
5296 color: inherit;
5297 cursor: pointer;
5298 font-size: inherit;
5299 font-family: inherit;
5300 font-weight: 300;
5301 height: auto;
5302 line-height: inherit;
5303 margin: -1px 0 0 0;
5304 outline: none;
5305 padding: 0 0 0 0.5ch;
5306 position: relative;
5307 vertical-align: initial;
5308 -webkit-box-sizing: border-box;
5309 -webkit-appearance: menulist;
5310 -moz-appearance: menulist;
5311 width: auto;
5312 }
5313
5314 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
5315 .flatpickr-current-month .flatpickr-monthDropdown-months:active {
5316 outline: none;
5317 }
5318
5319 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
5320 background: rgba(0, 0, 0, 0.05);
5321 }
5322
5323 .flatpickr-current-month
5324 .flatpickr-monthDropdown-months
5325 .flatpickr-monthDropdown-month {
5326 background-color: transparent;
5327 outline: none;
5328 padding: 0;
5329 }
5330
5331 .flatpickr-weekdays {
5332 background: transparent;
5333 text-align: center;
5334 overflow: hidden;
5335 width: 100%;
5336 display: -webkit-box;
5337 display: -webkit-flex;
5338 display: -ms-flexbox;
5339 display: flex;
5340 -webkit-box-align: center;
5341 -webkit-align-items: center;
5342 -ms-flex-align: center;
5343 align-items: center;
5344 height: 28px;
5345 }
5346
5347 .flatpickr-weekdays .flatpickr-weekdaycontainer {
5348 display: -webkit-box;
5349 display: -webkit-flex;
5350 display: -ms-flexbox;
5351 display: flex;
5352 -webkit-box-flex: 1;
5353 -webkit-flex: 1;
5354 -ms-flex: 1;
5355 flex: 1;
5356 }
5357
5358 span.flatpickr-weekday {
5359 cursor: default;
5360 font-size: 90%;
5361 background: transparent;
5362 color: rgba(0, 0, 0, 0.54);
5363 line-height: 1;
5364 margin: 0;
5365 text-align: center;
5366 display: block;
5367 -webkit-box-flex: 1;
5368 -webkit-flex: 1;
5369 -ms-flex: 1;
5370 flex: 1;
5371 font-weight: bolder;
5372 }
5373
5374 .dayContainer,
5375 .flatpickr-weeks {
5376 padding: 1px 0 0 0;
5377 }
5378
5379 .flatpickr-days {
5380 position: relative;
5381 overflow: hidden;
5382 display: -webkit-box;
5383 display: -webkit-flex;
5384 display: -ms-flexbox;
5385 display: flex;
5386 -webkit-box-align: start;
5387 -webkit-align-items: flex-start;
5388 -ms-flex-align: start;
5389 align-items: flex-start;
5390 width: 307.875px;
5391 }
5392
5393 .flatpickr-days:focus {
5394 outline: 0;
5395 }
5396
5397 .dayContainer {
5398 padding: 0;
5399 outline: 0;
5400 text-align: left;
5401 width: 307.875px;
5402 min-width: 307.875px;
5403 max-width: 307.875px;
5404 -webkit-box-sizing: border-box;
5405 box-sizing: border-box;
5406 display: inline-block;
5407 display: -ms-flexbox;
5408 display: -webkit-box;
5409 display: -webkit-flex;
5410 display: flex;
5411 -webkit-flex-wrap: wrap;
5412 flex-wrap: wrap;
5413 -ms-flex-wrap: wrap;
5414 -ms-flex-pack: justify;
5415 -webkit-justify-content: space-around;
5416 justify-content: space-around;
5417 -webkit-transform: translate3d(0px, 0px, 0px);
5418 transform: translate3d(0px, 0px, 0px);
5419 opacity: 1;
5420 }
5421
5422 .dayContainer + .dayContainer {
5423 -webkit-box-shadow: -1px 0 0 #e6e6e6;
5424 box-shadow: -1px 0 0 #e6e6e6;
5425 }
5426
5427 .flatpickr-day {
5428 background: none;
5429 border: 1px solid transparent;
5430 border-radius: 150px;
5431 -webkit-box-sizing: border-box;
5432 box-sizing: border-box;
5433 color: #393939;
5434 cursor: pointer;
5435 font-weight: 400;
5436 width: 14.2857143%;
5437 -webkit-flex-basis: 14.2857143%;
5438 -ms-flex-preferred-size: 14.2857143%;
5439 flex-basis: 14.2857143%;
5440 max-width: 39px;
5441 height: 39px;
5442 line-height: 39px;
5443 margin: 0;
5444 display: inline-block;
5445 position: relative;
5446 -webkit-box-pack: center;
5447 -webkit-justify-content: center;
5448 -ms-flex-pack: center;
5449 justify-content: center;
5450 text-align: center;
5451 }
5452
5453 .flatpickr-day.inRange,
5454 .flatpickr-day.prevMonthDay.inRange,
5455 .flatpickr-day.nextMonthDay.inRange,
5456 .flatpickr-day.today.inRange,
5457 .flatpickr-day.prevMonthDay.today.inRange,
5458 .flatpickr-day.nextMonthDay.today.inRange,
5459 .flatpickr-day:hover,
5460 .flatpickr-day.prevMonthDay:hover,
5461 .flatpickr-day.nextMonthDay:hover,
5462 .flatpickr-day:focus,
5463 .flatpickr-day.prevMonthDay:focus,
5464 .flatpickr-day.nextMonthDay:focus {
5465 cursor: pointer;
5466 outline: 0;
5467 background: #e6e6e6;
5468 border-color: #e6e6e6;
5469 }
5470
5471 .flatpickr-day.today {
5472 border-color: #959ea9;
5473 }
5474
5475 .flatpickr-day.today:hover,
5476 .flatpickr-day.today:focus {
5477 border-color: #959ea9;
5478 background: #959ea9;
5479 color: #fff;
5480 }
5481
5482 .flatpickr-day.selected,
5483 .flatpickr-day.startRange,
5484 .flatpickr-day.endRange,
5485 .flatpickr-day.selected.inRange,
5486 .flatpickr-day.startRange.inRange,
5487 .flatpickr-day.endRange.inRange,
5488 .flatpickr-day.selected:focus,
5489 .flatpickr-day.startRange:focus,
5490 .flatpickr-day.endRange:focus,
5491 .flatpickr-day.selected:hover,
5492 .flatpickr-day.startRange:hover,
5493 .flatpickr-day.endRange:hover,
5494 .flatpickr-day.selected.prevMonthDay,
5495 .flatpickr-day.startRange.prevMonthDay,
5496 .flatpickr-day.endRange.prevMonthDay,
5497 .flatpickr-day.selected.nextMonthDay,
5498 .flatpickr-day.startRange.nextMonthDay,
5499 .flatpickr-day.endRange.nextMonthDay {
5500 background: #569ff7;
5501 -webkit-box-shadow: none;
5502 box-shadow: none;
5503 color: #fff;
5504 border-color: #569ff7;
5505 }
5506
5507 .flatpickr-day.selected.startRange,
5508 .flatpickr-day.startRange.startRange,
5509 .flatpickr-day.endRange.startRange {
5510 border-radius: 50px 0 0 50px;
5511 }
5512
5513 .flatpickr-day.selected.endRange,
5514 .flatpickr-day.startRange.endRange,
5515 .flatpickr-day.endRange.endRange {
5516 border-radius: 0 50px 50px 0;
5517 }
5518
5519 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
5520 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
5521 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
5522 -webkit-box-shadow: -10px 0 0 #569ff7;
5523 box-shadow: -10px 0 0 #569ff7;
5524 }
5525
5526 .flatpickr-day.selected.startRange.endRange,
5527 .flatpickr-day.startRange.startRange.endRange,
5528 .flatpickr-day.endRange.startRange.endRange {
5529 border-radius: 50px;
5530 }
5531
5532 .flatpickr-day.inRange {
5533 border-radius: 0;
5534 -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
5535 box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
5536 }
5537
5538 .flatpickr-day.flatpickr-disabled,
5539 .flatpickr-day.flatpickr-disabled:hover,
5540 .flatpickr-day.prevMonthDay,
5541 .flatpickr-day.nextMonthDay,
5542 .flatpickr-day.notAllowed,
5543 .flatpickr-day.notAllowed.prevMonthDay,
5544 .flatpickr-day.notAllowed.nextMonthDay {
5545 color: rgba(57, 57, 57, 0.3);
5546 background: transparent;
5547 border-color: transparent;
5548 cursor: default;
5549 }
5550
5551 .flatpickr-day.flatpickr-disabled,
5552 .flatpickr-day.flatpickr-disabled:hover {
5553 cursor: not-allowed;
5554 color: rgba(57, 57, 57, 0.1);
5555 }
5556
5557 .flatpickr-day.week.selected {
5558 border-radius: 0;
5559 -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
5560 box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
5561 }
5562
5563 .flatpickr-day.hidden {
5564 visibility: hidden;
5565 }
5566
5567 .rangeMode .flatpickr-day {
5568 margin-top: 1px;
5569 }
5570
5571 .flatpickr-weekwrapper {
5572 float: left;
5573 }
5574
5575 .flatpickr-weekwrapper .flatpickr-weeks {
5576 padding: 0 12px;
5577 -webkit-box-shadow: 1px 0 0 #e6e6e6;
5578 box-shadow: 1px 0 0 #e6e6e6;
5579 }
5580
5581 .flatpickr-weekwrapper .flatpickr-weekday {
5582 float: none;
5583 width: 100%;
5584 line-height: 28px;
5585 }
5586
5587 .flatpickr-weekwrapper span.flatpickr-day,
5588 .flatpickr-weekwrapper span.flatpickr-day:hover {
5589 display: block;
5590 width: 100%;
5591 max-width: none;
5592 color: rgba(57, 57, 57, 0.3);
5593 background: transparent;
5594 cursor: default;
5595 border: none;
5596 }
5597
5598 .flatpickr-innerContainer {
5599 display: block;
5600 display: -webkit-box;
5601 display: -webkit-flex;
5602 display: -ms-flexbox;
5603 display: flex;
5604 -webkit-box-sizing: border-box;
5605 box-sizing: border-box;
5606 overflow: hidden;
5607 }
5608
5609 .flatpickr-rContainer {
5610 display: inline-block;
5611 padding: 0;
5612 -webkit-box-sizing: border-box;
5613 box-sizing: border-box;
5614 }
5615
5616 .flatpickr-time {
5617 text-align: center;
5618 outline: 0;
5619 display: block;
5620 height: 0;
5621 line-height: 40px;
5622 max-height: 40px;
5623 -webkit-box-sizing: border-box;
5624 box-sizing: border-box;
5625 overflow: hidden;
5626 display: -webkit-box;
5627 display: -webkit-flex;
5628 display: -ms-flexbox;
5629 display: flex;
5630 }
5631
5632 .flatpickr-time:after {
5633 content: "";
5634 display: table;
5635 clear: both;
5636 }
5637
5638 .flatpickr-time .numInputWrapper {
5639 -webkit-box-flex: 1;
5640 -webkit-flex: 1;
5641 -ms-flex: 1;
5642 flex: 1;
5643 width: 40%;
5644 height: 40px;
5645 float: left;
5646 }
5647
5648 .flatpickr-time .numInputWrapper span.arrowUp:after {
5649 border-bottom-color: #393939;
5650 }
5651
5652 .flatpickr-time .numInputWrapper span.arrowDown:after {
5653 border-top-color: #393939;
5654 }
5655
5656 .flatpickr-time.hasSeconds .numInputWrapper {
5657 width: 26%;
5658 }
5659
5660 .flatpickr-time.time24hr .numInputWrapper {
5661 width: 49%;
5662 }
5663
5664 .flatpickr-time input {
5665 background: transparent;
5666 -webkit-box-shadow: none;
5667 box-shadow: none;
5668 border: 0;
5669 border-radius: 0;
5670 text-align: center;
5671 margin: 0;
5672 padding: 0;
5673 height: inherit;
5674 line-height: inherit;
5675 color: #393939;
5676 font-size: 14px;
5677 position: relative;
5678 -webkit-box-sizing: border-box;
5679 box-sizing: border-box;
5680 -webkit-appearance: textfield;
5681 -moz-appearance: textfield;
5682 appearance: textfield;
5683 }
5684
5685 .flatpickr-time input.flatpickr-hour {
5686 font-weight: bold;
5687 }
5688
5689 .flatpickr-time input.flatpickr-minute,
5690 .flatpickr-time input.flatpickr-second {
5691 font-weight: 400;
5692 }
5693
5694 .flatpickr-time input:focus {
5695 outline: 0;
5696 border: 0;
5697 }
5698
5699 .flatpickr-time .flatpickr-time-separator,
5700 .flatpickr-time .flatpickr-am-pm {
5701 height: inherit;
5702 float: left;
5703 line-height: inherit;
5704 color: #393939;
5705 font-weight: bold;
5706 width: 2%;
5707 -webkit-user-select: none;
5708 -moz-user-select: none;
5709 -ms-user-select: none;
5710 user-select: none;
5711 -webkit-align-self: center;
5712 -ms-flex-item-align: center;
5713 align-self: center;
5714 }
5715
5716 .flatpickr-time .flatpickr-am-pm {
5717 outline: 0;
5718 width: 18%;
5719 cursor: pointer;
5720 text-align: center;
5721 font-weight: 400;
5722 }
5723
5724 .flatpickr-time input:hover,
5725 .flatpickr-time .flatpickr-am-pm:hover,
5726 .flatpickr-time input:focus,
5727 .flatpickr-time .flatpickr-am-pm:focus {
5728 background: #eee;
5729 }
5730
5731 .flatpickr-input[readonly] {
5732 cursor: pointer;
5733 }
5734
5735 @-webkit-keyframes fpFadeInDown {
5736 from {
5737 opacity: 0;
5738 -webkit-transform: translate3d(0, -20px, 0);
5739 transform: translate3d(0, -20px, 0);
5740 }
5741 to {
5742 opacity: 1;
5743 -webkit-transform: translate3d(0, 0, 0);
5744 transform: translate3d(0, 0, 0);
5745 }
5746 }
5747 @keyframes fpFadeInDown {
5748 from {
5749 opacity: 0;
5750 -webkit-transform: translate3d(0, -20px, 0);
5751 transform: translate3d(0, -20px, 0);
5752 }
5753 to {
5754 opacity: 1;
5755 -webkit-transform: translate3d(0, 0, 0);
5756 transform: translate3d(0, 0, 0);
5757 }
5758 }
5759
5760 .darkify-tooltip {
5761 opacity: 0;
5762 visibility: hidden;
5763 transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
5764 }
5765
5766 .darkify-tooltip-hover-effect {
5767 opacity: 1;
5768 visibility: visible;
5769 transform: translateY(0); /* Moves tooltip to normal position */
5770 }
5771
5772 .darkify-tooltip.darkify-fade-out {
5773 opacity: 0;
5774 }
5775
5776 .darkify.darkify-preloader .darkify-container {
5777 position: absolute;
5778 min-height: 500px;
5779 top: 0;
5780 left: 0;
5781 width: 100%;
5782 height: auto;
5783 z-index: 9999;
5784 background-image: url("../images/spinner.svg");
5785 background-repeat: no-repeat;
5786 background-color: #fff;
5787 background-position: center;
5788 }
5789 .darkify-container.darkify_style_txt_border.darkify_processed{
5790 background-image:none!important;
5791 }
5792
5793 .darkify-setting-admin.darkify-preloader
5794 .darkify-container
5795 .darkify-admin-header,
5796 .darkify-setting-admin.darkify-preloader
5797 .darkify-container
5798 .darkify-wrapper,
5799 .darkify-setting-admin.darkify-preloader
5800 .darkify-container
5801 .darkify-buttons {
5802 visibility: hidden;
5803 }
5804
5805 .darkify-live-demo-icon .icofont-external-link {
5806 padding-left: 1px;
5807 font-size: 11px;
5808 }
5809
5810 .darkify-live-demo-icon {
5811 opacity: 0;
5812 transition: all 0.2s;
5813 position: absolute;
5814 left: auto;
5815 z-index: 99999;
5816 margin-left: 3px;
5817 text-decoration: none;
5818 }
5819
5820 .darkify-live-demo-icon[tooltip]:hover:before {
5821 position: absolute;
5822 top: 100%;
5823 left: -12px;
5824 z-index: 99999;
5825 content: attr(tooltip);
5826 margin-top: 0.5em;
5827 margin-left: -6px;
5828 padding: 4px;
5829 width: 54px;
5830 overflow: hidden;
5831 word-wrap: break-word;
5832 font-size: 11px;
5833 text-transform: uppercase;
5834 color: #fff;
5835 text-align: center;
5836 background-color: #222;
5837 box-sizing: border-box;
5838 box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
5839 border-radius: 3px;
5840 }
5841
5842 .darkify-live-demo-icon[tooltip]:hover:after {
5843 position: absolute;
5844 top: 7px;
5845 left: 50%;
5846 z-index: 99999;
5847 content: "";
5848 width: 0;
5849 height: 0;
5850 border: 0.75em dashed transparent;
5851 border-bottom: 0.75em solid #222;
5852 font-size: inherit;
5853 transform: translateX(-50%);
5854 }
5855
5856 a.darkify-live-demo-icon:focus {
5857 border: none;
5858 outline: 0;
5859 box-shadow: none;
5860 }
5861
5862 .darkify-field.darkify-field-image_select.icon_select
5863 .darkify--image.darkify--active
5864 .darkify-live-demo-icon,
5865 .darkify-field.darkify-field-image_select.icon_select
5866 .darkify--image:hover
5867 .darkify-live-demo-icon {
5868 opacity: 1;
5869 }
5870 .darkify-field-image_select .darkify--image {
5871 cursor: pointer;
5872 }
5873
5874 .darkify-image-title {
5875 margin-top: 5px;
5876 text-align: center;
5877 font-size: 12px;
5878 font-weight: 500;
5879 }
5880
5881 /*-Help Page-*/
5882 .darkify-help-wrap .feature-section {
5883 display: flex;
5884 }
5885 .darkify-help-wrap .feature-section .col-2 {
5886 margin-left: 20px;
5887 }
5888 .darkify-help-wrap .feature-section .col {
5889 box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
5890 flex: 1;
5891 align-self: flex-start;
5892 }
5893 .darkify-help-wrap {
5894 margin: auto;
5895 }
5896
5897 div.darkify-help-wrap .feature-section .darkify-feature {
5898 background-color: #fff;
5899 padding: 30px 30px 38px 30px;
5900 border-radius: 5px;
5901 -webkit-border-radius: 5px;
5902 -moz-border-radius: 5px;
5903 -ms-border-radius: 5px;
5904 -o-border-radius: 5px;
5905 text-align: left;
5906 }
5907
5908 div.darkify-help-wrap .feature-section .darkify-feature h3 {
5909 font-size: 17px;
5910 line-height: 24px;
5911 margin: 0;
5912 vertical-align: middle;
5913 }
5914
5915 div.darkify-help-wrap .feature-section i.sp-font {
5916 font-size: 24px;
5917 line-height: 24px;
5918 display: inline-block;
5919 color: #171717;
5920 margin-right: 6px;
5921 vertical-align: middle;
5922 }
5923
5924 div.darkify-help-wrap h1 {
5925 font-size: 30px;
5926 text-align: center;
5927 font-weight: 500;
5928 margin: 50px 0 0 0;
5929 }
5930 div.darkify-help-wrap h1 span {
5931 background: #000;
5932 color: #fff;
5933 font-size: 14px;
5934 margin-left: 8px;
5935 padding: 3px;
5936 }
5937
5938 div.darkify-help-wrap .about-text {
5939 color: #555d66;
5940 font-size: 16px;
5941 text-align: center;
5942 font-weight: 400;
5943 margin: 20px 0 50px 0;
5944 padding: 0 100px;
5945 }
5946
5947 .darkify-framework-field-ta_help_free div.darkify-help-wrap .about-text {
5948 padding: 0 125px;
5949 }
5950
5951 div.darkify-help-wrap .headline-feature-video {
5952 padding: 25px;
5953 box-shadow: rgb(0 0 0 / 10%) 0 0 20px;
5954 border-radius: 5px;
5955 margin-bottom: 60px;
5956 }
5957
5958 div.darkify-help-wrap .headline-feature.feature-video {
5959 position: relative;
5960 margin: 0;
5961 padding-bottom: 56.25%;
5962 width: 100%;
5963 max-width: 100%;
5964 height: 0;
5965 text-align: center;
5966 }
5967
5968 div.darkify-help-wrap .headline-feature.feature-video iframe {
5969 position: absolute;
5970 top: 0;
5971 left: 0;
5972 width: 100%;
5973 height: 100%;
5974 }
5975
5976 div.darkify-help-wrap .feature-section .darkify-feature p {
5977 margin-bottom: 28px;
5978 font-size: 14px;
5979 }
5980
5981 .darkify-help-wrap [class$="-col"] {
5982 display: flex;
5983 justify-content: space-between;
5984 flex-wrap: wrap;
5985 }
5986
5987 .darkify-help-wrap [class$="-col"] {
5988 display: flex;
5989 justify-content: space-between;
5990 flex-wrap: wrap;
5991 margin-bottom: 100px;
5992 }
5993
5994 .darkify-help-wrap .darkify-plugin-section [class$="-col"] {
5995 margin-bottom: 50px;
5996 }
5997
5998 .darkify-help-wrap [class$="-col"] .col {
5999 flex: 1;
6000 align-self: flex-start;
6001 box-shadow: rgb(0 0 0 / 10%) 0 0 20px;
6002 border-radius: 5px;
6003 -webkit-border-radius: 5px;
6004 -moz-border-radius: 5px;
6005 -ms-border-radius: 5px;
6006 -o-border-radius: 5px;
6007 }
6008
6009 .darkify-help-wrap [class$="-col"] .col + .col {
6010 margin-left: 20px;
6011 }
6012
6013 .sp-plugin-section-title.text-center {
6014 margin-bottom: 60px;
6015 }
6016
6017 .darkify-feature a.darkify-framework-help-button {
6018 background-color: transparent;
6019 border: 1px solid #171717;
6020 color: #111;
6021 -webkit-box-shadow: none;
6022 box-shadow: none;
6023 text-shadow: none;
6024 border-radius: 4px;
6025 text-transform: uppercase;
6026 padding: 12px 18px;
6027 text-decoration: none;
6028 font-weight: 600;
6029 font-size: 12px;
6030 transition: 0.5s;
6031 -webkit-transition: 0.5s;
6032 -moz-transition: 0.5s;
6033 -ms-transition: 0.5s;
6034 -o-transition: 0.5s;
6035 }
6036
6037 .darkify-feature a.darkify-framework-help-button:hover {
6038 background-color: #171717;
6039 color: #fff;
6040 }
6041
6042 .darkify-help-wrap .wp-badge {
6043 display: none;
6044 }
6045
6046 .darkify-plugin-section {
6047 text-align: center;
6048 }
6049
6050 .darkify-plugin-section {
6051 margin: 0;
6052 }
6053
6054 div.darkify-plugin-section .sp-plugin-section-title h2 {
6055 font-size: 30px;
6056 color: #32373c;
6057 font-weight: 500;
6058 }
6059
6060 div.darkify-plugin-section .sp-plugin-section-title h4 {
6061 font-weight: 400;
6062 text-align: center;
6063 font-size: 18px;
6064 color: #555d66;
6065 margin-top: 15px;
6066 margin-bottom: 40px;
6067 }
6068
6069 div.darkify-plugin-section .three-col .col .darkify-plugin h3 {
6070 margin-top: 20px;
6071 margin-bottom: 8px;
6072 text-align: left;
6073 padding: 0 10px 20px 20px;
6074 }
6075
6076 div.darkify-plugin-section .three-col .col .darkify-plugin h3 a {
6077 text-decoration: none;
6078 color: #000000;
6079 font-weight: 600;
6080 font-size: 16px;
6081 }
6082
6083 div.darkify-plugin-section .three-col .col .darkify-plugin h3 a:hover {
6084 color: #8554c1;
6085 text-decoration: underline;
6086 transition: 0.3s;
6087 -webkit-transition: 0.3s;
6088 -moz-transition: 0.3s;
6089 -ms-transition: 0.3s;
6090 -o-transition: 0.3s;
6091 }
6092
6093 div.darkify-plugin-section .three-col .col .darkify-plugin img {
6094 border-radius: 5px 5px 0 0;
6095 }
6096
6097 div.darkify-plugin-section .darkify-help-wrap-img {
6098 max-width: 64px;
6099 padding-bottom: 20px;
6100 }
6101
6102 div.darkify-help-wrap
6103 div.darkify-plugin-section
6104 .feature-section
6105 .darkify-feature
6106 p {
6107 color: #32373c;
6108 margin-bottom: 0;
6109 }
6110
6111 div.darkify-help-wrap
6112 div.darkify-plugin-section
6113 .feature-section
6114 .darkify-plugin-link {
6115 text-decoration: none;
6116 }
6117
6118 div.darkify-help-wrap div.darkify-plugin-section .feature-section.first-column {
6119 margin-bottom: 20px;
6120 }
6121
6122 div.darkify-help-wrap div.darkify-plugin-section [class$="-col"] .col {
6123 border: 1px solid transparent;
6124 transition-timing-function: linear;
6125 transition-duration: 300ms;
6126 }
6127
6128 div.darkify-help-wrap div.darkify-plugin-section [class$="-col"] .col:hover {
6129 border: 1px solid #00a1ff;
6130 }
6131
6132 div.darkify-help-wrap
6133 div.darkify-plugin-section
6134 [class$="-col"]
6135 .col
6136 .darkify-plugin-link:focus {
6137 outline: none;
6138 box-shadow: none;
6139 }
6140
6141 /* Responsive CSS */
6142 @media screen and (max-width: 782px) {
6143 .darkify-help-wrap .three-col .col {
6144 min-width: 48% !important;
6145 max-width: 48% !important;
6146 margin-left: 0 !important;
6147 }
6148
6149 .darkify-help-wrap .feature-section .col {
6150 margin-top: 20px;
6151 }
6152 }
6153
6154 @media (max-width: 500px) {
6155 .darkify-help-wrap .three-col .col {
6156 min-width: 100% !important;
6157 }
6158
6159 div.darkify-help-wrap
6160 div.darkify-plugin-section
6161 .feature-section.first-column {
6162 margin: 0;
6163 }
6164
6165 div.darkify-help-wrap .about-text {
6166 padding: 0 40px;
6167 }
6168
6169 div.darkify-help-wrap .wp-badge {
6170 background-position-x: center;
6171 top: 0;
6172 }
6173 }
6174 .darkify__help--video {
6175 width: 100%;
6176 height: 540px;
6177 margin-bottom: 30px;
6178 }
6179 .darkify__help--video iframe {
6180 width: 100%;
6181 height: 100%;
6182 }
6183
6184 /**
6185 * All of the CSS for your admin-specific functionality should be
6186 * included in this file.
6187 */
6188 .darkify-field-image_select.icon_select img {
6189 max-width: 100px;
6190 }
6191
6192 .switcher_shortcode_input {
6193 padding: 4px 8px;
6194 cursor: pointer;
6195 width: 100%;
6196 }
6197 .switcher_shortcode_after_copy {
6198 bottom: 0;
6199 opacity: 0;
6200 z-index: 9999999;
6201 position: fixed;
6202 width: 230px;
6203 left: 50%;
6204 transform: translateX(-50%);
6205 text-align: center;
6206 padding: 15px 15px;
6207 line-height: 15px;
6208 color: #fff;
6209 border-radius: 3px;
6210 background: #32373c;
6211 border: 1px solid #32373c;
6212 }
6213
6214 .switcher_shortcode_after_copy i {
6215 font-size: 14px;
6216 margin-right: 5px;
6217 color: #5db62e;
6218 }
6219 .switcher_shortcode_v2_input {
6220 padding: 4px 8px;
6221 cursor: pointer;
6222 width: 100%;
6223 }
6224 .switcher_shortcode_v2_after_copy {
6225 bottom: 0;
6226 opacity: 0;
6227 z-index: 9999999;
6228 position: fixed;
6229 width: 230px;
6230 left: 50%;
6231 transform: translateX(-50%);
6232 text-align: center;
6233 padding: 15px 15px;
6234 line-height: 15px;
6235 color: #fff;
6236 border-radius: 3px;
6237 background: #32373c;
6238 border: 1px solid #32373c;
6239 }
6240
6241 .switcher_shortcode_v2_after_copy i {
6242 font-size: 14px;
6243 margin-right: 5px;
6244 color: #5db62e;
6245 }
6246
6247 .darkify-fieldset .button {
6248 display: inline-flex;
6249 align-items: center;
6250 }
6251 .darkify-wrapper .button-primary {
6252 background-color: #171717;
6253 border-color: #171717;
6254 }
6255 .darkify-wrapper .darkify-nav ul li:first-child a {
6256 border-top-left-radius: 3px;
6257 }
6258
6259 .darkify-wrapper .darkify-nav ul li:last-child a {
6260 border-top-right-radius: 3px;
6261 border-right: none;
6262 }
6263 .darkify-theme-light .darkify-nav-inline {
6264 background-color: #f1f1f1;
6265 border: none;
6266 }
6267 .darkify-sections {
6268 border-top-right-radius: 7px;
6269 border-bottom-right-radius: 7px;
6270 border-bottom-left-radius: 7px;
6271 background: #fff;
6272 }
6273
6274 /*
6275 Help text customization
6276 */
6277 span.darkify-help.darkify-title-help {
6278 position: relative;
6279 }
6280
6281 .darkify-help {
6282 top: 3px;
6283 right: 0px;
6284 padding: 0px;
6285 margin-left: 5px;
6286 }
6287
6288 .darkify-help span.tooltip-icon img {
6289 width: 14px;
6290 }
6291 /*
6292 * Darkify table
6293 */
6294 .darkify-table {
6295 width: 100%;
6296 display: table;
6297 }
6298
6299 .darkify-table-cell {
6300 display: table-cell;
6301 vertical-align: middle;
6302 }
6303
6304 .darkify-table-expanded {
6305 width: 35% !important;
6306 }
6307
6308 .darkify-table-expanded .darkify-slider-ui {
6309 background-color: #fff !important;
6310 border: 1px solid #c5c5c5 !important;
6311 height: 10px !important;
6312 }
6313
6314 .darkify-table-expanded .darkify-slider-ui .ui-slider-range {
6315 height: 12px !important;
6316 background-color: #1a74e4;
6317 }
6318
6319 .darkify-table-expanded .darkify-slider-ui .ui-slider-handle {
6320 background-color: #fff;
6321 border: 1px solid #c5c5c5;
6322 top: -5px;
6323 }
6324
6325 .darkify-table-expanded .darkify-slider-ui .ui-slider-handle:hover {
6326 background-color: #fff;
6327 }
6328
6329 .darkify-nowrap {
6330 white-space: nowrap;
6331 }
6332 .darkify-field-slider input[type="text"] {
6333 width: 45px;
6334 margin-left: 15px;
6335 text-align: center;
6336 }
6337
6338 .darkify-field-slider .darkify-table-cell em {
6339 background: #f1f1f1;
6340 height: 100%;
6341 border: 1px solid #999;
6342 margin-left: -5px;
6343 padding: 6px;
6344 border-radius: 0 3px 3px 0px;
6345 }
6346
6347 /**** PRO CSS ****/
6348 .darkify-pro-only {
6349 position: relative;
6350 pointer-events: none;
6351 opacity: 0.75;
6352 }
6353
6354 .darkify-pro-only::after {
6355 content: "PRO";
6356 position: absolute;
6357 right: 0;
6358 top: 0px;
6359 font-weight: 600;
6360 z-index: 999;
6361 background-color: #cbd6df;
6362 color: #5e6e7d;
6363 padding: 2px 4px;
6364 font-size: 10px;
6365 line-height: 12px;
6366 border-radius: 2px;
6367 }
6368
6369 /* Palette-specific pro-only styles */
6370 .darkify-field-palette .darkify--palette.darkify-pro-only {
6371 cursor: not-allowed;
6372 opacity: 0.6;
6373 }
6374 .darkify-field-palette .darkify--palette.darkify-pro-only .darkify--palette--colors {
6375 position: relative;
6376 }
6377 .darkify-palette-pro-overlay {
6378 position: absolute;
6379 inset: 0;
6380 background: rgba(0, 0, 0, 0.35);
6381 display: flex;
6382 align-items: center;
6383 justify-content: center;
6384 border-radius: 2px;
6385 }
6386 .darkify-palette-pro-overlay .icofont-lock {
6387 color: #fff;
6388 font-size: 20px;
6389 line-height: 1;
6390 text-shadow: 0 1px 3px rgba(0,0,0,0.5);
6391 }
6392 .only_pro button,
6393 .only_pro input,
6394 .only_pro textarea,
6395 .only_pro .chosen-container {
6396 pointer-events: none;
6397 opacity: 0.5;
6398 }
6399 .darkify-field-color.only_pro .darkify-fieldset .wp-picker-container,
6400 .darkify-field-color_group.only_pro
6401 .darkify-fieldset
6402 .darkify--left.darkify-field-color:last-child {
6403 position: relative;
6404 }
6405 .darkify-field-color.only_pro .darkify-fieldset .wp-picker-container::after,
6406 .darkify-field-color_group.only_pro
6407 .darkify-fieldset
6408 .darkify--left.darkify-field-color:last-child:after {
6409 content: "PRO";
6410 background: #cbd6df;
6411 color: #5e6e7d;
6412 font-size: 10px;
6413 padding: 2px 4px;
6414 font-weight: 600;
6415 border-radius: 2px;
6416 line-height: 12px;
6417 }
6418 .darkify-field-color_group.only_pro
6419 .darkify-fieldset
6420 .darkify--left.darkify-field-color:last-child
6421 .darkify--title {
6422 top: -20px;
6423 }
6424 .darkify-field-color.only_pro .darkify-fieldset .wp-picker-container::after {
6425 right: -29px;
6426 position: absolute;
6427 top: 0;
6428 }
6429
6430 .only_pro .darkify-fieldset textarea {
6431 position: relative;
6432 }
6433 .only_pro .darkify-fieldset textarea::after {
6434 position: absolute;
6435 content: "PRO";
6436 }
6437 .repeater_pro_only .darkify-fieldset {
6438 pointer-events: none;
6439 opacity: 0.5;
6440 }
6441 .darkify--switcher.only_pro_switcher .darkify--ball::after,
6442 .darkify-field.only_pro .darkify--inputs:after {
6443 content: "PRO";
6444 position: relative;
6445 text-align: center;
6446 width: 24px;
6447 float: right;
6448 font-weight: 600;
6449 font-size: 8px;
6450 color: #8796a1;
6451 opacity: 1;
6452 line-height: 18px;
6453 }
6454
6455 .replacement_repeater.repeater_pro_only
6456 .darkify-fieldset
6457 .darkify-repeater-wrapper,
6458 .darkify-field-textarea.only_pro .darkify-fieldset {
6459 position: relative;
6460 }
6461 .darkify-field-textarea.only_pro .darkify-fieldset textarea,
6462 .darkify-field-select.only_pro
6463 .darkify-fieldset
6464 .chosen-container
6465 .chosen-choices {
6466 width: calc(100% - 40px);
6467 }
6468 .replacement_repeater.repeater_pro_only .darkify-fieldset,
6469 .darkify-field-select.only_pro .darkify-fieldset .chosen-container {
6470 opacity: 1;
6471 }
6472 .replacement_repeater.repeater_pro_only
6473 .darkify-fieldset
6474 .darkify-repeater-wrapper
6475 .darkify-repeater-item,
6476 .darkify-field-select.only_pro
6477 .darkify-fieldset
6478 .chosen-container
6479 .chosen-choices {
6480 width: calc(100% - 40px);
6481 opacity: 0.5;
6482 }
6483 .replacement_repeater.repeater_pro_only
6484 .darkify-fieldset
6485 .darkify-repeater-wrapper::after,
6486 .darkify-field-select.only_pro .darkify-fieldset .chosen-container::after,
6487 .darkify-field-textarea.only_pro .darkify-fieldset::after {
6488 position: absolute;
6489 content: "PRO";
6490 background: #cbd6df;
6491 color: #5e6e7d;
6492 line-height: 12px;
6493 font-size: 10px;
6494 padding: 2px 4px;
6495 border-radius: 2px;
6496 margin-left: 5px;
6497 font-weight: 600;
6498 right: 0;
6499 top: 0;
6500 pointer-events: none;
6501 }
6502
6503 /*- License activation -*/
6504 .darkify-field-license {
6505 padding: 100px 0;
6506 text-align: center;
6507 }
6508 .darkify-field-license .darkify-field-license-area {
6509 display: inline-block;
6510 }
6511 .darkify-field-license h2 {
6512 font-size: 28px;
6513 font-weight: 500;
6514 margin-top: 0;
6515 margin-bottom: 25px;
6516
6517 }
6518
6519 .darkify-field-license h3 {
6520 font-size: 18px;
6521 font-weight: 500;
6522 margin-top: 0;
6523 line-height: 25px;
6524 color: #666;
6525 margin-bottom: 25px;
6526 }
6527 .darkify-field-license p {
6528 font-size: 16px;
6529 margin-top: 0;
6530 margin-bottom: 24px;
6531 color: #666;
6532 }
6533 .darkify-field-license .button-secondary {
6534 min-height: 42px;
6535 text-transform: uppercase;
6536 padding: 6px 16px;
6537 background-color: #171717;
6538 color: #fff;
6539 border: 1px solid #171717;
6540 }
6541 .darkify-field-license .button-secondary:hover {
6542 background-color: #171717;
6543 color: #fff;
6544 }
6545 .darkify-field-license .button-secondary:focus{
6546 background-color: #171717;
6547 color: #fff;
6548 outline: none;
6549 box-shadow: 0 0 0;
6550 }
6551
6552 /* Review notice */
6553 #darkify-review-notice {
6554 padding: 18px 15px 18px 0;
6555 background-color: #fff;
6556 border-radius: 5px;
6557 margin: 20px 20px 0 0;
6558 box-shadow: 0 0 20px 0 rgba(36, 39, 50, 0.08);
6559 }
6560
6561 #darkify-review-notice .darkify-plugin-icon {
6562 width: 125px;
6563 float: left;
6564 line-height: 90px;
6565 text-align: center;
6566 margin-left: 8px;
6567 }
6568
6569 #darkify-review-notice .darkify-plugin-icon img {
6570 max-width: 94px;
6571 vertical-align: middle;
6572 margin-right: 8px;
6573 }
6574
6575 #darkify-review-notice .darkify-notice-text {
6576 overflow: hidden;
6577 }
6578
6579 #darkify-review-notice .darkify-notice-text h3 {
6580 font-size: 24px;
6581 margin: 0 0 5px;
6582 font-weight: 400;
6583 line-height: 1;
6584 }
6585
6586 #darkify-review-notice .darkify-notice-text p {
6587 margin: 10px 0 10px 0;
6588 font-size: 13px;
6589 }
6590
6591 #darkify-review-notice .darkify-notice-text p.darkify-review-actions {
6592 margin: 10px 0 2px 0;
6593 }
6594
6595 #darkify-review-notice .darkify-notice-text .darkify-review-actions a {
6596 text-decoration: none;
6597 margin-right: 8px;
6598 color: #63a37b;
6599 display: inline-block;
6600 position: relative;
6601 }
6602
6603 #darkify-review-notice .darkify-notice-text .darkify-review-actions a span {
6604 padding-right: 2px;
6605 }
6606
6607 #darkify-review-notice .darkify-notice-text .darkify-review-actions a.button {
6608 color: #fff;
6609 }
6610 .CodeMirror-gutter.CodeMirror-linenumbers {
6611 width: 29px !important;
6612 }
6613 .CodeMirror-code .CodeMirror-line {
6614 padding-left: 35px !important;
6615 }
6616
6617 .darkify_dark_mode_enabled .darkify-wrapper .darkify-nav ul li a {
6618 background-color: #181a1b !important;
6619 }
6620 .darkify_dark_mode_enabled .darkify-wrapper .darkify-nav ul li a.darkify-active {
6621 background-color: #202324 !important;
6622 }
6623 .darkify_dark_mode_enabled .darkify.darkify-preloader .darkify-container {
6624 background-color: #202324;
6625 }
6626 .darkify_dark_mode_enabled .darkify-field-image_select figure{
6627 background-color: #181a1b;
6628 }
6629 .darkify_dark_mode_enabled .darkify--sibling.darkify--button.darkify--active{
6630 background-color: #1a74e4 !important;
6631 border-color: #1a74e4 !important;
6632 color: #fff !important;
6633 }
6634 .darkify_dark_mode_enabled .CodeMirror.cm-s-default,
6635 .darkify_dark_mode_enabled .CodeMirror.cm-s-mbo{
6636 background-color: #2c2c2c !important;
6637 color: #fff !important;
6638 border-color: #2c2c2c !important;
6639 }
6640 .darkify_dark_mode_enabled .cm-s-default .cm-tag,
6641 .darkify_dark_mode_enabled .cm-s-mbo .cm-tag {
6642 color: #fff !important;
6643 }
6644 .darkify_dark_mode_enabled .CodeMirror-gutters {
6645 background-color: #4e4e4e !important;
6646 border-color: #4e4e4e !important;
6647 }