PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 4.0.7
Visualizer – Tables & Charts Manager with Built-in AI Generator v4.0.7
4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.10.0 3.10.1 3.10.10 3.10.11 3.10.12 3.10.13 3.10.14 3.10.15 3.10.2 3.10.3 3.10.4 All 148 releases
visualizer / css / style-wizard.css

style-wizard.css in Visualizer – Tables & Charts Manager with Built-in AI Generator 4.0.7, at css/style-wizard.css

1,458 lines 30.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .vz-wizard-fullscreen #adminmenumain,
2 .vz-wizard-fullscreen #wpadminbar,
3 .vz-wizard-fullscreen .notice:not(.vz-error-notice),
4 .vz-wizard-fullscreen .notice:not(.vz-error-notice),
5 .vz-wizard-fullscreen .error:not(#message),
6 .vz-wizard-fullscreen .updated,
7 .vz-wizard-fullscreen #wpfooter,
8 .vz-wizard-fullscreen .visualizer-front + div {
9 display: none !important;
10 }
11
12 .wp-toolbar .vz-wizard-fullscreen {
13 margin-top: -32px;
14 }
15
16 #wpwrap {
17 height: 100%;
18 }
19
20 #wp-content {
21 height: 100%;
22 }
23
24 #wpbody {
25 height: 100%;
26 }
27
28 #wpbody-content {
29 height: 100%;
30 padding: 0;
31 }
32
33 .wrap {
34 margin: 0;
35 height: 100%;
36 display: flex;
37 flex-direction: column;
38 }
39
40 .vz-wrap * {
41 box-sizing: border-box;
42 margin: 0;
43 padding: 0;
44 }
45
46 .h1{
47 font-size: 45px;
48 line-height: 54px;
49 font-weight: 600;
50 color: #050505;
51 }
52 .h2{
53 font-size: 32px;
54 line-height: 38px;
55 font-weight: 600;
56 color: #050505;
57 }
58 .h3{
59 font-size: 24px;
60 line-height: 28px;
61 font-weight: 600;
62 color: #050505;
63 }
64 .h4{
65 font-size: 20px;
66 line-height: 24px;
67 font-weight: 600;
68 color: #050505;
69 }
70 .p{
71 font-size: 16px;
72 line-height: 24px;
73 color: #050505;
74 }
75
76 .form-label{
77 font-size: 16px;
78 line-height: 19px;
79 font-weight: 600;
80 color: #000000;
81 }
82 .desc-text{
83 font-size: 14px;
84 line-height: 17px;
85 font-weight: 400;
86 color: #000000;
87 }
88 .help-text{
89 font-size: 14px;
90 line-height: 17px;
91 font-weight: 400;
92 color: rgba(0, 0, 0, 0.6);
93 }
94 .help-text a{
95 display: inline-block;
96 text-decoration: none;
97 color: #2F5AAE;
98 font-weight: 400;
99 }
100
101 .p-8{padding: 8px;}
102 .pt-8{padding-top: 8px;}
103 .pb-8{padding-bottom: 8px;}
104 .pb-4{padding-bottom: 4px;}
105 .pb-0{padding-bottom: 0 !important;}
106 .pt-12{padding-top: 12px;}
107 .pb-16{padding-bottom: 16px;}
108 .pb-30{padding-bottom: 30px;}
109 .pt-30{padding-top: 30px;}
110 .mb-20{margin-bottom: 20px;}
111 .mb-30{margin-bottom: 30px;}
112 .mb-24{margin-bottom: 24px;}
113
114 .vz-radio{
115 position: relative;
116 display: flex;
117 align-items: center;
118 }
119 .vz-radio input[type=radio].vz-radio-btn{
120 margin-right: 10px;
121 }
122 .vz-radio label{
123 color: #050505;
124 font-size: 16px;
125 line-height: 20px;
126 }
127 input[type=radio].vz-radio-btn{
128 position: relative;
129 width: 20px;
130 height: 20px;
131 border: 1px solid #050505;
132 flex-shrink: 0;
133 margin: 0;
134 outline: 0;
135 box-shadow: none;
136 transition: all 0.3s ease-in-out;
137 }
138 input[type=radio].vz-radio-btn:focus{
139 border-color: #4268CF;
140 }
141 input[type=radio].vz-radio-btn:checked{
142 background: #4268CF;
143 border-color: #4268CF;
144 }
145 input[type=radio].vz-radio-btn:checked:before{
146 width: 8px;
147 height: 8px;
148 margin: 5px;
149 background: #ffffff;
150 }
151
152 input[type=checkbox].vz-checkbox-btn{
153 position: relative;
154 width: 20px;
155 height: 20px;
156 border: 1px solid #1E1E1E;
157 flex-shrink: 0;
158 border-radius: 2px;
159 margin: 0;
160 outline: 0;
161 box-shadow: none;
162 transition: all 0.3s ease-in-out;
163 }
164 input[type=checkbox].vz-checkbox-btn:focus{
165 border-color: #4268CF;
166 }
167 input[type=checkbox].vz-checkbox-btn:checked{
168 background: #4268CF;
169 border-color: #4268CF;
170 }
171 input[type=checkbox].vz-checkbox-btn:checked:after{
172 content: "\f15e";
173 font-family: dashicons;
174 width: 16px;
175 height: 16px;
176 font-size: 16px;
177 line-height: 1;
178 color: #ffffff;
179 position: absolute;
180 inset: 0;
181 margin: auto;
182 }
183 input[type=checkbox].vz-checkbox-btn:before{
184 display: none;
185 }
186
187 input.vz-switch-toggle[type=checkbox]{
188 width: 36px;
189 height: 18px;
190 color: #1E1E1E;
191 background: #ffffff;
192 border: 1px solid #1E1E1E;
193 border-radius: 20px;
194 margin-top: 0;
195 box-shadow: none;
196 position: relative;
197 outline: 0;
198 outline-offset: 0;
199 -webkit-transition: all 0.3s ease-in-out;
200 -moz-transition: all 0.3s ease-in-out;
201 -o-transition: all 0.3s ease-in-out;
202 transition: all 0.3s ease-in-out;
203 }
204 input.vz-switch-toggle[type=checkbox]:before{
205 content: "";
206 width: 12px;
207 height: 12px;
208 position: absolute;
209 top: 2px;
210 left: 3px;
211 background: currentColor;
212 border-radius: 20px;
213 -webkit-transition: all 0.3s ease-in-out;
214 -moz-transition: all 0.3s ease-in-out;
215 -o-transition: all 0.3s ease-in-out;
216 transition: all 0.3s ease-in-out;
217 }
218 input.vz-switch-toggle[type=checkbox]:focus{
219 outline: 1px solid #4268CF;
220 outline-offset: 3px;
221 }
222 input.vz-switch-toggle[type=checkbox]:checked{
223 background: #4268CF;
224 border-color: #4268CF;
225 color: #ffffff;
226 }
227 input.vz-switch-toggle[type=checkbox]:checked:before{
228 left: 19px;
229 margin: 0;
230 }
231 .vz-form-switch{
232 display: inline-flex;
233 /* flex-wrap: wrap; */
234 }
235 .vz-form-switch .vz-switch-toggle{
236 display: block;
237 flex-shrink: 0;
238 margin-right: 10px;
239 }
240
241
242 .vz-form-wrap .form-block{
243 padding: 24px 0;
244 position: relative;
245 border-bottom: 1px solid #D9D9D9;
246 }
247 .vz-form-wrap .form-block.no-sep{
248 border-bottom: 0;
249 padding-bottom: 12px;
250 }
251 .vz-form-wrap .form-block.vz-final-block{
252 padding: 12px 0;
253 }
254 .vz-form-wrap .form-block:last-child{
255 border-bottom: 0;
256 }
257 .vz-form-wrap .form-label{
258 display: block;
259 margin-bottom: 8px;
260 }
261
262 .vz-form-wrap .form-control {
263 display: block;
264 width: 100%;
265 height: 48px;
266 padding: 0px 16px;
267 border: 1px solid #D9D9D9;
268 border-radius: 0px;
269 color: #050505;
270 background-color: #fff;
271 box-shadow: none;
272 font-size: 16px;
273 line-height: 24px;
274 -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
275 -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
276 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
277 }
278 .vz-form-wrap textarea.form-control{
279 padding-top: 10px;
280 }
281 .vz-form-wrap .form-control.vz-input-tagify, .vz-form-wrap .form-control.vz-textarea-tagify{
282 height: auto;
283 min-height: 48px;
284 padding-top: 2px;
285 }
286
287 .vz-form-wrap .form-control:focus {
288 border-color: #4268CF;
289 outline: 0;
290 box-shadow: none;
291 }
292
293 .vz-form-wrap .form-control::-moz-placeholder {
294 opacity: 1;
295 color: #838383;
296 }
297
298 .vz-form-wrap .form-control:-ms-input-placeholder {
299 color: #838383;
300 }
301
302 .vz-form-wrap .form-control::-webkit-input-placeholder {
303 color: #838383;
304 }
305
306 .vz-form-wrap .form-control::-ms-expand {
307 border: 0;
308 background-color: transparent;
309 }
310
311 .vz-form-wrap .form-control[disabled],
312 .vz-form-wrap .form-control[readonly],
313 fieldset[disabled] .form-control {
314 opacity: .6;
315 background-color: #ffffff;
316 }
317
318 .vz-form-wrap .form-control[disabled],
319 fieldset[disabled] .form-control {
320 cursor: not-allowed;
321 }
322
323 .vz-form-wrap textarea.form-control {
324 height: auto;
325 }
326
327 .vz-form-wrap input[type="search"] {
328 -webkit-appearance: none;
329 }
330
331 .vz-wizard-fullscreen #wpcontent {
332 margin: 0;
333 padding: 0;
334 }
335
336
337 /* visualizer button style start */
338 .btn{
339 padding: 13px 20px;
340 font-size: 16px;
341 line-height: 19px;
342 font-weight: 500;
343 border-radius: 0;
344 border: 1px solid #000;
345 display: inline-block;
346 outline: 0;
347 cursor: pointer;
348 text-decoration: none;
349 text-transform: capitalize;
350 -webkit-transition: all 0.3s ease-in-out;
351 -moz-transition: all 0.3s ease-in-out;
352 -o-transition: all 0.3s ease-in-out;
353 transition: all 0.3s ease-in-out;
354 }
355
356 .btn.btn-icon{
357 width: 48px;
358 height: 48px;
359 padding: 0;
360 display: flex;
361 align-items: center;
362 justify-content: center;
363 }
364
365 .btn.btn-primary{
366 background: #39C3D2;
367 border-color: #39C3D2;
368 color: #ffffff;
369 }
370 .btn.btn-primary:hover{
371 background: #00BED2;
372 border-color: #00BED2;
373 }
374 .btn.btn-primary:focus,
375 .btn.btn-primary:active{
376 background: #00BED2;
377 border-color: #00BED2;
378 }
379
380 .btn.btn-secondary{
381 background: #007CBA;
382 border-color: #007CBA;
383 padding: 9px 17px;
384 border-radius: 4px;
385 color: #ffffff;
386 }
387 .btn.btn-secondary:hover{
388 background: #078DD0;
389 border-color: #078DD0;
390 }
391
392 .btn.btn-primary.disabled, .btn.btn-secondary.disabled{
393 color: #ffffff;
394 border-color: #BDE6EB;
395 background: #BDE6EB;
396 pointer-events: none;
397 cursor: auto;
398 }
399
400
401 .btn.btn-outline-primary{
402 background: transparent;
403 border-color: #39C3D2;
404 color: #39C3D2;
405 }
406 .btn.btn-outline-primary:hover{
407 background: #F7F9FD;
408 border-color: #39C3D2;
409 color: #39C3D2;
410 }
411 .btn.btn-outline-primary:focus,
412 .btn.btn-outline-primary:active{
413 background: #F7F9FD;
414 border-color: #39C3D2;
415 color: #39C3D2;
416 }
417
418 .btn.btn-outline-primary.disabled{
419 color: #ffffff;
420 border-color: #BDE6EB;
421 background: #BDE6EB;
422 pointer-events: none;
423 cursor: auto;
424 }
425
426 .btn.btn-ghost{
427 border-color: transparent;
428 background: transparent;
429 color: #4268CF;
430 }
431 .btn.btn-ghost:hover,
432 .btn.btn-ghost:focus{
433 background: rgba(66, 104, 207, 0.1);
434 color: #3458BC;
435 }
436
437 .btn.btn-flate{
438 background: #d0d9f3;
439 border-color: #d0d9f3;
440 color: #050505;
441 }
442 .btn.btn-flate:hover,
443 .btn.btn-flate:focus{
444 background: rgba(66, 104, 207, .35);
445 border-color: rgba(66, 104, 207, .35);
446 }
447 .vz-plus-btn{
448 width: 48px;
449 height: 48px;
450 display: flex;
451 align-items: center;
452 justify-content: center;
453 border: 0;
454 background: transparent;
455 color: #4268CF;
456 font-size: 20px;
457 cursor: pointer;
458 }
459 .vz-plus-btn:disabled{
460 color: #838383;
461 }
462 .btn.btn-block{
463 display: block;
464 width: 100%;
465 text-align: center;
466 }
467 .btn.btn-lg{
468 padding: 20px;
469 line-height: 18px;
470 }
471
472 .cta-text a{
473 display: inline-block;
474 font-size: 14px;
475 line-height: 17px;
476 color: #4268CF;
477 text-decoration: none;
478 outline: 0;
479 -webkit-transition: all 0.3s ease-in-out;
480 -moz-transition: all 0.3s ease-in-out;
481 -o-transition: all 0.3s ease-in-out;
482 transition: all 0.3s ease-in-out;
483 }
484 .cta-text a:hover{
485 color: #050505;
486 }
487
488 .vz-btn-group{
489 display: flex;
490 flex-wrap: wrap;
491 align-items: center;
492 }
493 .vz-btn-group .btn{
494 margin-bottom: 8px;
495 margin-right: 30px;
496 }
497 .vz-btn-group .btn:last-child{
498 margin-right: 0px;
499 }
500
501 .vz-wizard-wrap .container{
502 max-width: 930px;
503 width: 100%;
504 padding: 0 15px;
505 margin: 0 auto;
506 }
507 .vz-header--small{
508 background: #ffffff;
509 height: 80px;
510 position: relative;
511 padding-top: 8px;
512 }
513 .vz-header--small:before{
514 content: "";
515 position: absolute;
516 left: 0;
517 top: 0;
518 height: 8px;
519 width: 100%;
520 background: #39C3D2;
521 }
522 .vz-header--small .container{
523 height: 100%;
524 display: flex;
525 align-items: center;
526 justify-content: space-between;
527 }
528
529 .btn-link{
530 color: #757575;
531 font-weight: 500;
532 font-size: 13px;
533 line-height: 16px;
534 text-decoration: none;
535 display: flex;
536 align-items: center;
537 }
538 .btn-link .dashicons{
539 width: 16px;
540 height: 16px;
541 font-size: 16px;
542 vertical-align: middle;
543 margin: 0 8px;
544 }
545
546 .vz-wizard{
547 padding: 40px 0;
548 }
549 .vz-wizard .sw>.tab-content{
550 height: auto !important;
551 }
552 .vz-wizard .sw-theme-basic>.nav{
553 box-shadow: none !important;
554 max-width: 360px;
555 margin: 0 auto 30px;
556 justify-content: space-between;
557 position: relative;
558 flex: initial;
559 flex-direction: row !important;
560 }
561 .vz-wizard .sw-theme-basic>.nav::after{
562 content: "";
563 width: 100%;
564 height: 2px;
565 background: #D9D9D9;
566 position: absolute;
567 left: 0;
568 top: 50%;
569 margin-top: -1px;
570 }
571 .vz-wizard .sw.sw-justified>.nav>li{
572 margin: 0;
573 flex-grow: inherit;
574 position: relative;
575 z-index: 1;
576 }
577 .vz-wizard .sw.sw-justified>.nav .nav-link{
578 margin: 0;
579 flex-grow: inherit;
580 width: 24px;
581 height: 24px;
582 border-radius: 100%;
583 padding: 0;
584 background: #F0F0F1;
585 border: 1.5px solid #7D7E82;
586 font-weight: 500;
587 font-size: 14px;
588 color: #7D7E82;
589 display: flex;
590 align-items: center;
591 justify-content: center;
592 box-shadow: 0 0 0 8px #F0F0F1;
593 -webkit-transition: all 0.3s ease-in-out;
594 -moz-transition: all 0.3s ease-in-out;
595 -o-transition: all 0.3s ease-in-out;
596 transition: all 0.3s ease-in-out;
597 }
598 .vz-wizard .sw.sw-justified>.nav .nav-link.active{
599 background: #39C3D2;
600 border-color: #39C3D2;
601 color: #ffffff !important;
602 }
603 .vz-wizard .sw.sw-justified>.nav .nav-link.done{
604 background: #39C3D2;
605 border-color: #39C3D2;
606 position: relative;
607 font-size: 0;
608 }
609 .vz-wizard .sw.sw-justified>.nav .nav-link.done:before{
610 content: "\f15e";
611 font-family: dashicons;
612 font-weight: 400;
613 color: #ffffff;
614 width: 16px;
615 height: 16px;
616 font-size: 16px;
617 line-height: 1;
618 position: absolute;
619 inset: 0;
620 margin: auto;
621 }
622 .vz-wizard .sw.sw-justified>.nav .nav-link:after{
623 display: none;
624 }
625 .vz-wizard .sw-toolbar-elm {
626 display: none;
627 }
628
629 .vz-wizard .sw>.tab-content>.tab-pane{
630 padding: 0;
631 }
632
633 .vz-newsletter-wrap{
634 display: flex;
635 flex-wrap: wrap;
636 align-items: center;
637 justify-content: space-between;
638 }
639 .vz-newsletter-wrap .vz-newsletter-img{
640 width: 275px;
641 }
642 .vz-newsletter-wrap .vz-newsletter{
643 width: calc(100% - 355px);
644 }
645 .vz-newsletter-wrap .vz-newsletter .vz-form-group{
646 max-width: 400px;
647 }
648
649 .vz-shortcode-preview-box{
650 border: 1px solid #D9D9D9;
651 border-radius: 8px;
652 }
653 .vz-shortcode-preview-title{
654 display: flex;
655 align-items: center;
656 padding: 16px 30px;
657 border-bottom: 1px solid #D9D9D9;
658 }
659 .vz-shortcode-preview-title.border-0{
660 border: 0;
661 }
662 .vz-shortcode-preview-title .icon{
663 width: 55px;
664 height: 55px;
665 display: flex;
666 align-items: center;
667 justify-content: center;
668 flex-shrink: 0;
669 background: #D9D9D9;
670 border-radius: 6px;
671 margin-right: 30px;
672 }
673 .vz-shortcode-preview-content{
674 padding: 26px 65px 30px 30px;
675 }
676 .vz-shortcode-preview-content .content-title{
677 display: flex;
678 justify-content: space-between;
679 align-items: center;
680 padding-bottom: 40px;
681 }
682 .vz-shortcode-preview-content .content-title .check{
683 flex-shrink: 0;
684 margin-left: 10px;
685 }
686
687 .vz-shortcode-preview{
688 background: rgba(57, 195, 210, .1);
689 border-left: 4px solid #39C3D2;
690 padding: 20px;
691 }
692 .vz-code-box{
693 background: #F5F5F5;
694 border: 1px solid #D9D9D9;
695 border-radius: 4px;
696 padding: 4px 12px;
697 margin-bottom: 10px;
698 display: flex;
699 align-items: center;
700 }
701 .vz-code-box input{
702 width: 100%;
703 border: 0;
704 height: 36px;
705 background: transparent;
706 box-shadow: none !important;
707 outline: 0 !important;
708 padding: 0;
709 font-family: 'Consolas';
710 font-size: 12px;
711 line-height: 14px;
712 color: rgba(0, 0, 0, 0.8);
713 margin-right: 16px;
714 }
715 .vz-code-box .vz-copy-code-btn{
716 flex-shrink: 0;
717 white-space: nowrap;
718 border: 0;
719 box-shadow: none;
720 outline: 0;
721 background: transparent;
722 font-family: 'Consolas';
723 font-size: 12px;
724 line-height: 14px;
725 color: rgba(0, 0, 0, 0.8);
726 display: flex;
727 align-items: center;
728 cursor: pointer;
729 }
730 .vz-code-box .vz-copy-code-btn img{
731 flex-shrink: 0;
732 margin-left: 8px;
733 }
734 .form-block .spinner {
735 float: revert;
736 }
737 .vz-error-notice {
738 margin-bottom: 20px;
739 border: 1px solid #D9D9D9;
740 border-left-color: #d63638;
741 border-left-width: 4px;
742 padding-left: 10px;
743 }
744
745 .vz-wizard-fullscreen .btn-primary.disabled {
746 opacity: 0.5;
747 pointer-events: none;
748 cursor: auto;
749 background: #39C3D2;
750 border-color: #39C3D2;
751 color: #ffffff;
752 }
753
754 .vz-wizard-fullscreen .vz-field-error {
755 color: #F00;
756 }
757
758
759 .help-text.help-text-primary{
760 font-size: 16px;
761 line-height: 24px;
762 color: #39C3D2;
763 }
764 .help-text.help-text-primary a{
765 font-weight: 700;
766 color: #39C3D2;
767 text-decoration: underline;
768 font-style: italic;
769 }
770
771 .redirect-popup{
772 position: fixed;
773 left: 0;
774 top: 0;
775 width: 100%;
776 height: 100%;
777 background: rgba(217, 217, 217, 0.2);
778 backdrop-filter: blur(1px);
779 z-index: 123;
780 padding: 10px;
781 display: none;
782 }
783 .redirect-popup-box{
784 position: absolute;
785 width: 90%;
786 max-width: 429px;
787 height: fit-content;
788 inset: 0;
789 margin: auto;
790 padding: 24px 20px;
791 background: #FFFFFF;
792 border-radius: 8px;
793 text-align: center;
794 color: #757575;
795 }
796 .redirect-popup-box .icon{
797 width: 64px;
798 height: 64px;
799 background: rgba(57, 195, 210, 0.25);
800 border-radius: 100%;
801 display: flex;
802 align-items: center;
803 justify-content: center;
804 margin: 0 auto 24px;
805 }
806 .redirect-popup-box .h3{
807 font-weight: 700;
808 color: #757575;
809 padding-bottom: 28px;
810 }
811 @-webkit-keyframes spin {
812 100% { -webkit-transform: rotate(360deg); }
813 }
814 @keyframes spin {
815 100% {
816 -webkit-transform: rotate(360deg);
817 transform:rotate(360deg);
818 }
819 }
820
821 .redirect-popup-box .redirect-loader img{
822 -webkit-animation:spin 2s linear infinite;
823 -moz-animation:spin 2s linear infinite;
824 animation:spin 2s linear infinite;
825 }
826
827 .vz-wizard .sw-theme-basic {
828 border: none;
829 }
830
831
832 /* visualizer accordion style start */
833 .vz-accordion-item{
834 background: #ffffff;
835 border: 1px solid #D9D9D9;
836 }
837 .vz-accordion-item__title{
838 position: relative;
839 }
840 .vz-accordion-item .vz-accordion-item__button{
841 width: 100%;
842 position: relative;
843 text-align: left;
844 border: 0;
845 background: transparent;
846 outline: 0;
847 padding: 30px 90px 30px 30px;
848 }
849 .vz-accordion-item .vz-accordion__step-number{
850 padding-bottom: 10px;
851 }
852 .vz-accordion-item .vz-accordion__step-title{
853 color: #050505;
854 }
855 .vz-accordion-item .vz-accordion__icon{
856 position: absolute;
857 right: 30px;
858 top: 50%;
859 margin-top: -24px;
860 width: 48px;
861 height: 48px;
862 background: #F0F2F5;
863 border-radius: 24px;
864 display: flex;
865 align-items: center;
866 justify-content: center;
867 font-size: 20px;
868 line-height: 1;
869 color: #757575;
870 -webkit-transition: all 0.3s ease-in-out;
871 -moz-transition: all 0.3s ease-in-out;
872 -o-transition: all 0.3s ease-in-out;
873 transition: all 0.3s ease-in-out;
874 }
875 .vz-accordion-item .vz-accordion__icon.vz-accordion__icon--success{
876 width: 24px;
877 height: 24px;
878 margin-top: -12px;
879 background: #4268CF !important;
880 color: #ffffff;
881 }
882 .vz-accordion-item .vz-accordion__icon:hover{
883 background: #E4E6E8;
884 }
885 .vz-accordion-item .vz-accordion-item__content{
886 font-size: 16px;
887 line-height: 24px;
888 color: #000000;
889 padding: 0 30px 6px;
890 position: relative;
891 }
892 .vz-accordion-item .vz-accordion-item__content.border-top > div{
893 border-top: 1px solid #D9D9D9;
894 }
895
896 .vz-accordion .vz-accordion-item{
897 margin-bottom: 30px;
898 }
899 .vz-accordion .vz-accordion-item.mb-0{
900 margin-bottom: 0;
901 }
902 .vz-accordion .vz-accordion-item .vz-accordion-item__button{
903 cursor: pointer;
904 }
905 .vz-accordion .vz-accordion-item .vz-accordion__step-number{
906 padding-bottom: 0;
907 height: 0;
908 opacity: 0;
909 -webkit-transition: all 0.3s ease-in-out;
910 -moz-transition: all 0.3s ease-in-out;
911 -o-transition: all 0.3s ease-in-out;
912 transition: all 0.3s ease-in-out;
913 }
914 .vz-accordion .vz-accordion-item .is-active .vz-accordion__step-number{
915 opacity: 1;
916 height: 27px;
917 padding-bottom: 5px;
918 }
919 .vz-accordion .vz-accordion-item .is-active .vz-accordion__icon{
920 color: #050505;
921 -webkit-transform: rotate(180deg);
922 -moz-transform: rotate(180deg);
923 -o-transform: rotate(180deg);
924 -ms-transform: rotate(180deg);
925 transform: rotate(180deg);
926 }
927 .vz-accordion .vz-accordion-item .vz-accordion-item__content{
928 display: none;
929 }
930 .vz-accordion .vz-accordion-item .vz-accordion-item__content.is-active{
931 display: block;
932 }
933 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-accordion-item__button{
934 padding-left: 80px;
935 padding-top: 22px;
936 padding-bottom: 22px;
937 }
938 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-checkbox{
939 position: absolute;
940 left: 30px;
941 top: 50%;
942 margin-top: -10px;
943 width: 20px;
944 height: 20px;
945 z-index: 12;
946 }
947 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-checkbox input[type=checkbox].vz-checkbox-btn{
948 display: block;
949 }
950 .vz-accordion-item.vz-features-accordion{
951 border-radius: 8px;
952 }
953 .vz-accordion-item.vz-features-accordion .vz-accordion-item__content{
954 border-top: 1px solid #D9D9D9;
955 padding-left: 20px;
956 padding-right: 20px;
957 }
958 .vz-accordion-title--static{
959 padding: 22px 30px 22px 80px;
960 }
961 .vz-accordion-title--static .vz-checkbox{
962 position: absolute;
963 left: 30px;
964 top: 50%;
965 margin-top: -10px;
966 width: 20px;
967 height: 20px;
968 z-index: 12;
969 }
970 .vz-accordion-content--static{
971 display: block;
972 }
973
974 .vz-features-list ul li{
975 padding: 25px 0;
976 display: flex;
977 align-items: center;
978 }
979 .vz-features-list ul li .icon{
980 width: 43px;
981 height: 43px;
982 flex-shrink: 0;
983 margin-right: 17px;
984 background: rgba(217, 217, 217, 0.4);
985 border-radius: 6px;
986 display: flex;
987 align-items: center;
988 justify-content: center;
989 }
990 .vz-features-list ul li .txt{
991 width: 100%;
992 }
993 .vz-final-options{
994 display: flex;
995 flex-direction: column;
996 gap: 10px;
997 }
998 .vz-option-card{
999 display: flex;
1000 align-items: center;
1001 gap: 16px;
1002 padding: 16px 18px;
1003 border: 1px solid #E5E7EB;
1004 border-radius: 8px;
1005 background: #fff;
1006 position: relative;
1007 }
1008 .vz-option-check{
1009 width: 20px;
1010 height: 20px;
1011 display: flex;
1012 align-items: center;
1013 justify-content: center;
1014 flex-shrink: 0;
1015 }
1016 .vz-option-check input[type=checkbox]{
1017 width: 18px;
1018 height: 18px;
1019 }
1020 .vz-option-icon{
1021 width: 40px;
1022 height: 40px;
1023 border-radius: 8px;
1024 background: #F3F4F6;
1025 display: flex;
1026 align-items: center;
1027 justify-content: center;
1028 flex-shrink: 0;
1029 }
1030 .vz-option-icon img{
1031 display: block;
1032 max-width: 24px;
1033 max-height: 24px;
1034 }
1035 .vz-option-body{
1036 flex: 1;
1037 }
1038 .vz-option-title{
1039 font-size: 16px;
1040 font-weight: 600;
1041 color: #0f172a;
1042 display: flex;
1043 align-items: center;
1044 gap: 8px;
1045 margin-bottom: 4px;
1046 }
1047 .vz-option-title .pro-label.free-label{
1048 font-size: 11px;
1049 line-height: 14px;
1050 padding: 2px 8px 3px;
1051 }
1052 .vz-option-card--newsletter .vz-option-icon{
1053 background: #E6F3F3;
1054 color: #39C3D2;
1055 }
1056 .vz-option-card--newsletter .vz-option-icon .dashicons{
1057 font-size: 22px;
1058 width: 22px;
1059 height: 22px;
1060 }
1061 .vz-option-card--newsletter .vz-option-body{
1062 display: flex;
1063 flex-direction: column;
1064 gap: 6px;
1065 }
1066 .vz-option-card--newsletter .vz-option-input{
1067 max-width: 320px;
1068 display: flex;
1069 align-items: center;
1070 gap: 8px;
1071 }
1072 .vz-option-card--newsletter .vz-save-email[disabled]{
1073 opacity: 0.6;
1074 cursor: not-allowed;
1075 }
1076 .vz-option-card--newsletter .vz-field-error{
1077 display: block;
1078 margin-top: 6px;
1079 }
1080 .vz-option-card--newsletter .vz-change-email{
1081 background: transparent;
1082 border: 0;
1083 color: #39C3D2;
1084 text-decoration: underline;
1085 cursor: pointer;
1086 padding: 0 0 0 6px;
1087 font-size: 13px;
1088 }
1089 .vz-option-card--newsletter .vz-email-text{
1090 color: #39C3D2;
1091 font-weight: 600;
1092 padding-left: 6px;
1093 }
1094 .vz-install-status{
1095 position: absolute;
1096 right: 14px;
1097 top: 14px;
1098 width: 18px;
1099 height: 18px;
1100 border-radius: 50%;
1101 border: 2px solid #cbd5e1;
1102 display: none;
1103 align-items: center;
1104 justify-content: center;
1105 font-size: 12px;
1106 line-height: 1;
1107 color: #ffffff;
1108 }
1109 .vz-install-status.is-installing{
1110 display: flex;
1111 border-color: #39C3D2;
1112 border-top-color: transparent;
1113 animation: spin 1s linear infinite;
1114 }
1115 .vz-install-status.is-done{
1116 display: flex;
1117 background: #00AA63;
1118 border-color: #00AA63;
1119 }
1120 .vz-install-status.is-error{
1121 display: flex;
1122 background: #d63638;
1123 border-color: #d63638;
1124 }
1125 .vz-install-status.is-done:before{
1126 content: "";
1127 }
1128 .vz-install-status.is-error:before{
1129 content: "!";
1130 }
1131 .pro-label{
1132 display: inline;
1133 width: 74px;
1134 height: 17px;
1135 border: none;
1136 color: #fff;
1137 z-index: 4;
1138 background: #d63638;
1139 letter-spacing: 0.5px;
1140 text-align: center;
1141 }
1142 .pro-label.free-label{
1143 background: #BDE6EB;
1144 border-radius: 6px;
1145 color: #39C3D2;
1146 text-transform: none;
1147 font-size: 16px;
1148 line-height: 19px;
1149 padding: 2px 9px 4px;
1150 }
1151 /* visualizer accordion style End */
1152 .vz-chart-list{
1153 max-width: 1100px;
1154 padding: 0;
1155 margin-bottom: 40px;
1156 margin-left: auto;
1157 margin-right: auto;
1158 }
1159 .vz-chart-list > ul{
1160 display: grid;
1161 grid-template-columns: repeat(5, minmax(0, 1fr));
1162 gap: 16px;
1163 align-items: stretch;
1164 }
1165 .vz-chart-list .slick-arrow{
1166 display: none;
1167 }
1168 .vz-chart-list .slick-arrow:before{
1169 display: none;
1170 }
1171 .vz-chart-list .slick-arrow.slick-prev{
1172 left: -42px;
1173 }
1174 .vz-chart-list .slick-arrow.slick-prev:before{
1175 content: "\f341";
1176 }
1177 .vz-chart-list .slick-arrow.slick-next{
1178 right: -42px;
1179 }
1180 .vz-chart-list .slick-arrow.slick-next:before{
1181 content: "\f345";
1182 }
1183 .vz-chart-list > ul > li{
1184 width: 100%;
1185 max-width: 100%;
1186 padding-bottom: 0;
1187 }
1188 .vz-chart-list .slick-slide{
1189 margin-right: 0;
1190 }
1191 .vz-chart-option{
1192 width: 100%;
1193 position: relative;
1194 display: flex;
1195 flex-wrap: wrap;
1196 padding: 12px 12px 16px;
1197 }
1198 .vz-chart-option .img{
1199 order: 1;
1200 position: relative;
1201 z-index: 1;
1202 display: block;
1203 width: 100%;
1204 max-width: 100%;
1205 aspect-ratio: 23 / 18;
1206 height: auto;
1207 background-color: #ffffff;
1208 margin-bottom: 20px;
1209 background-image: url(../images/chart_types_v395.png);
1210 background-repeat: no-repeat;
1211 background-position: center center;
1212 transition: all .3s ease-in-out;
1213 /* filter: grayscale(100%);
1214 -webkit-filter: grayscale(100%); */
1215 --wizard-sprite-scale: 0.45;
1216 background-size: calc(900px * var(--wizard-sprite-scale)) calc(1150px * var(--wizard-sprite-scale));
1217 filter: grayscale(100%);
1218 }
1219 .vz-chart-option .img.type-box-pie{
1220 background-position: calc(-5px * var(--wizard-sprite-scale)) calc(-17px * var(--wizard-sprite-scale));
1221 }
1222 .vz-chart-option .img.type-box-bar{
1223 background-position: calc(-305px * var(--wizard-sprite-scale)) calc(-235px * var(--wizard-sprite-scale));
1224 }
1225 .vz-chart-option .img.type-box-area{
1226 background-position: calc(-8px * var(--wizard-sprite-scale)) calc(-225px * var(--wizard-sprite-scale));
1227 }
1228 .vz-chart-option .img.type-box-scatter{
1229 background-position: calc(-300px * var(--wizard-sprite-scale)) calc(0px * var(--wizard-sprite-scale));
1230 }
1231 .vz-chart-option .img.type-box-gauge{
1232 background-position: calc(-7px * var(--wizard-sprite-scale)) calc(-450px * var(--wizard-sprite-scale));
1233 }
1234 .vz-chart-option .img.type-box-line{
1235 background-position: calc(-606px * var(--wizard-sprite-scale)) calc(-14px * var(--wizard-sprite-scale));
1236 }
1237 .vz-chart-option .img.type-box-tabular{
1238 background-position: calc(-306px * var(--wizard-sprite-scale)) calc(-693px * var(--wizard-sprite-scale));
1239 }
1240 .vz-chart-option .img.type-box-geo{
1241 background-position: calc(-603px * var(--wizard-sprite-scale)) calc(-459px * var(--wizard-sprite-scale));
1242 }
1243 .vz-chart-option .img.type-box-candlestick{
1244 background-position: calc(-304px * var(--wizard-sprite-scale)) calc(-450px * var(--wizard-sprite-scale));
1245 }
1246 .vz-chart-option .img.type-box-bubble{
1247 background-position: calc(-604px * var(--wizard-sprite-scale)) calc(-906px * var(--wizard-sprite-scale));
1248 }
1249 .vz-chart-option .img.type-box-column{
1250 background-position: calc(-600px * var(--wizard-sprite-scale)) calc(-225px * var(--wizard-sprite-scale));
1251 }
1252 .vz-chart-option .img.type-box-timeline{
1253 background-position: calc(-8px * var(--wizard-sprite-scale)) calc(-670px * var(--wizard-sprite-scale));
1254 }
1255 .vz-chart-option .img.type-box-combo{
1256 background-position: calc(-606px * var(--wizard-sprite-scale)) calc(-670px * var(--wizard-sprite-scale));
1257 }
1258 .vz-chart-option .img.type-box-polarArea{
1259 background-position: calc(-2px * var(--wizard-sprite-scale)) calc(-912px * var(--wizard-sprite-scale));
1260 }
1261 .vz-chart-option .img.type-box-radar{
1262 background-position: calc(-301px * var(--wizard-sprite-scale)) calc(-899px * var(--wizard-sprite-scale));
1263 }
1264 .vz-chart-option:hover .img{
1265 background-image: url(../images/chart_types_v395.png);
1266 filter: grayscale(0);
1267 }
1268 .vz-chart-option .bg{
1269 position: absolute;
1270 left: 0;
1271 top: 0;
1272 width: 100%;
1273 height: 100%;
1274 background: #F0F2F5;
1275 border-radius: 5px;
1276 transition: all .3s ease-in-out;
1277 }
1278 .vz-chart-option:hover .bg{
1279 background: #BDE6EB;
1280 }
1281 .vz-chart-option input[type=radio].vz-radio-btn{
1282 z-index: 1;
1283 flex-shrink: 0;
1284 order: 2;
1285 margin-top: 5px;
1286 }
1287 .vz-chart-option .h3{
1288 order: 3;
1289 width: calc(100% - 20px);
1290 padding-left: 12px;
1291 position: relative;
1292 z-index: 1;
1293 color: #000000;
1294 opacity: .7;
1295 display: flex;
1296 flex-wrap: wrap;
1297 align-items: center;
1298 font-size: 13px;
1299 line-height: 16px;
1300 }
1301 .vz-pro-label-wrap {
1302 order: 3;
1303 width: calc(100% - 20px);
1304 padding-left: 12px;
1305 z-index: 1;
1306 display: flex;
1307 flex-wrap: wrap;
1308 align-items: center;
1309 padding-right: 42px;
1310 }
1311 .vz-pro-label-wrap h3 {
1312 opacity: .7;
1313 color: #000000;
1314 font-size: 13px;
1315 line-height: 16px;
1316 }
1317 .vz-pro-label-wrap span.pro-label{
1318 position: absolute;
1319 top: 8px;
1320 right: 8px;
1321 margin-left: 0;
1322 font-weight: 600;
1323 font-size: 11px;
1324 line-height: 14px;
1325 padding: 2px 8px 3px;
1326 }
1327 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .bg{
1328 background: #BDE6EB;
1329 }
1330 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .img{
1331 background-image: url(../images/chart_types_v395.png);
1332 filter: grayscale(0);
1333 }
1334
1335 .vz-pro-option{
1336 position: relative;
1337 }
1338 .vz-pro-option:hover .pro-overlay{
1339 opacity: 1;
1340 visibility: visible;
1341 }
1342 .vz-pro-option .pro-overlay{
1343 position: absolute;
1344 left: 0;
1345 top: 0;
1346 width: 100%;
1347 height: 100%;
1348 z-index: 2;
1349 opacity: 0;
1350 visibility: hidden;
1351 transition: all .3s ease-in-out;
1352 }
1353 .vz-pro-option .pro-overlay .pro-box{
1354 padding-bottom: 58.88%;
1355 background: rgba(185, 185, 185, 0.5);
1356 backdrop-filter: blur(2px);
1357 height: 100%;
1358 }
1359 .vz-pro-option .pro-overlay .pro-box .btn {
1360 position: absolute;
1361 top: 50%;
1362 left: 50%;
1363 white-space: nowrap;
1364 transform: translate(-50%, -50%);
1365 font-size: 14px;
1366 }
1367
1368 .vz-power-pro{
1369 background: #FFFFFF;
1370 border: 4px solid #007CBA;
1371 padding: 12px;
1372 height: 100%;
1373 }
1374 .vz-power-pro .h3{
1375 padding-bottom: 16px;
1376 }
1377 .vz-power-pro ul{
1378 padding-bottom: 10px;
1379 }
1380 .vz-power-pro ul li{
1381 position: relative;
1382 font-size: 14px;
1383 line-height: 19px;
1384 color: #000000;
1385 padding-left: 25px;
1386 padding-bottom: 11px;
1387 }
1388 .vz-power-pro ul li:before{
1389 content: "\f12a";
1390 font-family: 'dashicons';
1391 position: absolute;
1392 left: 0;
1393 top: 0;
1394 color: #00AA63;
1395 font-size: 20px;
1396 }
1397
1398 .vz-progress{
1399 width: 100%;
1400 position: relative;
1401 background: #D9D9D9;
1402 height: 4px;
1403 }
1404 .vz-progress .vz-progress-bar{
1405 position: absolute;
1406 left: 0;
1407 top: 0;
1408 height: 100%;
1409 background: #39C3D2;
1410 transition: all .3s ease-in-out;
1411 }
1412 .vz-import-status{
1413 margin-top: 12px;
1414 }
1415 .vz-chart-list .slick-arrow[disabled="disabled"], .vz-chart-list .slick-arrow[aria-disabled="true"] {
1416 color: #eeeeee
1417 }
1418 .vz-btn-group span.spinner {
1419 margin-bottom: 8px;
1420 }
1421
1422 @media (max-width: 767px){
1423 .wp-toolbar .vz-wizard-fullscreen{margin-top: 0;}
1424 .vz-wizard .sw-theme-basic>.nav{max-width: 270px;}
1425 .vz-newsletter-wrap .vz-newsletter, .vz-newsletter-wrap .vz-newsletter-img{width: 100%; padding-bottom: 20px;}
1426 .vz-shortcode-preview-content{padding-right: 20px;}
1427 .vz-code-box{flex-wrap: wrap;}
1428 .h1{font-size: 28px; line-height: 37px;}
1429 .h2{font-size: 20px; line-height: 26px;}
1430 .h3{font-size: 18px; line-height: 24px;}
1431 .vz-header{padding: 15px 0;}
1432 .vz-header .vz-logo .vz-logo-icon{max-width: 40px;}
1433 .vz-header .vz-logo .vz-logo-icon img{max-width: 100%;}
1434 .post-type-visualizer_imports:not(.edit-php) #wpcontent, .visualizer_page_visualizer-support #wpcontent, .visualizer_page_visualizer-settings #wpcontent{padding-top: 46px;}
1435 #wpbody{padding-top: 0;}
1436 .vz-accordion .vz-accordion-item{margin-bottom: 15px;}
1437 .vz-accordion-item .vz-accordion-item__button{padding: 15px 60px 15px 15px;}
1438 .vz-accordion-item .vz-accordion__icon{width: 38px; height: 38px; right: 15px; margin-top: -19px;}
1439 .vz-accordion-item .vz-accordion-item__content{padding-left: 15px; padding-right: 15px;}
1440 .vz-input-group{flex-wrap: wrap;}
1441 .vz-input-group .vz-input-group-right{width: 100%; padding-left: 0; padding-top: 8px;}
1442 .vz-input-group .vz-input-group-right .btn.dropdown-toggle{width: 100%;}
1443 .vz-form-wrap .form-block.form-block-two-column .left{width: 100%; padding-right: 0; padding-bottom: 24px;}
1444 .vz-form-wrap .form-block.form-block-two-column .right{width: 100%;}
1445 .vz-form-action .left{width: 100%; padding-bottom: 16px;}
1446 .vz-form-action .left .btn{width: 100%; display: block; text-align: center;}
1447 .vz-form-action .right{width: 100%; flex-direction: column;}
1448 .vz-form-action .right .btn + .btn{margin-left: 0; margin-top: 8px;}
1449 .vz-form-row .vz-form-col-6, .vz-form-row .vz-form-col-4, .vz-form-row .vz-form-col-8{width: 100%;}
1450 .vz-document-list > ul > li{width: 100%;}
1451 .vz-help-improve-box .left{width: 100%;}
1452 .vz-help-improve-box .right{width: 100%;}
1453 .vz-chart-list > ul{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;}
1454 .vz-chart-list > ul > li{width: 100%; max-width: 100%; padding-bottom: 0;}
1455 .vz-shortcode-preview-content{padding-right: 20px;}
1456 .vz-newsletter-wrap .vz-newsletter, .vz-newsletter-wrap .vz-newsletter-img{width: 100%; padding-bottom: 20px;}
1457 }
1458