PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.11.4
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.11.4
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 3.11.4, at css/style-wizard.css

1,259 lines 25.4 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:last-child{
248 border-bottom: 0;
249 }
250 .vz-form-wrap .form-label{
251 display: block;
252 margin-bottom: 8px;
253 }
254
255 .vz-form-wrap .form-control {
256 display: block;
257 width: 100%;
258 height: 48px;
259 padding: 0px 16px;
260 border: 1px solid #D9D9D9;
261 border-radius: 0px;
262 color: #050505;
263 background-color: #fff;
264 box-shadow: none;
265 font-size: 16px;
266 line-height: 24px;
267 -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
268 -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
269 transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
270 }
271 .vz-form-wrap textarea.form-control{
272 padding-top: 10px;
273 }
274 .vz-form-wrap .form-control.vz-input-tagify, .vz-form-wrap .form-control.vz-textarea-tagify{
275 height: auto;
276 min-height: 48px;
277 padding-top: 2px;
278 }
279
280 .vz-form-wrap .form-control:focus {
281 border-color: #4268CF;
282 outline: 0;
283 box-shadow: none;
284 }
285
286 .vz-form-wrap .form-control::-moz-placeholder {
287 opacity: 1;
288 color: #838383;
289 }
290
291 .vz-form-wrap .form-control:-ms-input-placeholder {
292 color: #838383;
293 }
294
295 .vz-form-wrap .form-control::-webkit-input-placeholder {
296 color: #838383;
297 }
298
299 .vz-form-wrap .form-control::-ms-expand {
300 border: 0;
301 background-color: transparent;
302 }
303
304 .vz-form-wrap .form-control[disabled],
305 .vz-form-wrap .form-control[readonly],
306 fieldset[disabled] .form-control {
307 opacity: .6;
308 background-color: #ffffff;
309 }
310
311 .vz-form-wrap .form-control[disabled],
312 fieldset[disabled] .form-control {
313 cursor: not-allowed;
314 }
315
316 .vz-form-wrap textarea.form-control {
317 height: auto;
318 }
319
320 .vz-form-wrap input[type="search"] {
321 -webkit-appearance: none;
322 }
323
324 .vz-wizard-fullscreen #wpcontent {
325 margin: 0;
326 padding: 0;
327 }
328
329
330 /* visualizer button style start */
331 .btn{
332 padding: 13px 20px;
333 font-size: 16px;
334 line-height: 19px;
335 font-weight: 500;
336 border-radius: 0;
337 border: 1px solid #000;
338 display: inline-block;
339 outline: 0;
340 cursor: pointer;
341 text-decoration: none;
342 text-transform: capitalize;
343 -webkit-transition: all 0.3s ease-in-out;
344 -moz-transition: all 0.3s ease-in-out;
345 -o-transition: all 0.3s ease-in-out;
346 transition: all 0.3s ease-in-out;
347 }
348
349 .btn.btn-icon{
350 width: 48px;
351 height: 48px;
352 padding: 0;
353 display: flex;
354 align-items: center;
355 justify-content: center;
356 }
357
358 .btn.btn-primary{
359 background: #39C3D2;
360 border-color: #39C3D2;
361 color: #ffffff;
362 }
363 .btn.btn-primary:hover{
364 background: #00BED2;
365 border-color: #00BED2;
366 }
367 .btn.btn-primary:focus,
368 .btn.btn-primary:active{
369 background: #00BED2;
370 border-color: #00BED2;
371 }
372
373 .btn.btn-secondary{
374 background: #007CBA;
375 border-color: #007CBA;
376 padding: 9px 17px;
377 border-radius: 4px;
378 color: #ffffff;
379 }
380 .btn.btn-secondary:hover{
381 background: #078DD0;
382 border-color: #078DD0;
383 }
384
385 .btn.btn-primary.disabled, .btn.btn-secondary.disabled{
386 color: #ffffff;
387 border-color: #BDE6EB;
388 background: #BDE6EB;
389 pointer-events: none;
390 cursor: auto;
391 }
392
393
394 .btn.btn-outline-primary{
395 background: transparent;
396 border-color: #39C3D2;
397 color: #39C3D2;
398 }
399 .btn.btn-outline-primary:hover{
400 background: #F7F9FD;
401 border-color: #39C3D2;
402 color: #39C3D2;
403 }
404 .btn.btn-outline-primary:focus,
405 .btn.btn-outline-primary:active{
406 background: #F7F9FD;
407 border-color: #39C3D2;
408 color: #39C3D2;
409 }
410
411 .btn.btn-outline-primary.disabled{
412 color: #ffffff;
413 border-color: #BDE6EB;
414 background: #BDE6EB;
415 pointer-events: none;
416 cursor: auto;
417 }
418
419 .btn.btn-ghost{
420 border-color: transparent;
421 background: transparent;
422 color: #4268CF;
423 }
424 .btn.btn-ghost:hover,
425 .btn.btn-ghost:focus{
426 background: rgba(66, 104, 207, 0.1);
427 color: #3458BC;
428 }
429
430 .btn.btn-flate{
431 background: #d0d9f3;
432 border-color: #d0d9f3;
433 color: #050505;
434 }
435 .btn.btn-flate:hover,
436 .btn.btn-flate:focus{
437 background: rgba(66, 104, 207, .35);
438 border-color: rgba(66, 104, 207, .35);
439 }
440 .vz-plus-btn{
441 width: 48px;
442 height: 48px;
443 display: flex;
444 align-items: center;
445 justify-content: center;
446 border: 0;
447 background: transparent;
448 color: #4268CF;
449 font-size: 20px;
450 cursor: pointer;
451 }
452 .vz-plus-btn:disabled{
453 color: #838383;
454 }
455 .btn.btn-block{
456 display: block;
457 width: 100%;
458 text-align: center;
459 }
460 .btn.btn-lg{
461 padding: 20px;
462 line-height: 18px;
463 }
464
465 .cta-text a{
466 display: inline-block;
467 font-size: 14px;
468 line-height: 17px;
469 color: #4268CF;
470 text-decoration: none;
471 outline: 0;
472 -webkit-transition: all 0.3s ease-in-out;
473 -moz-transition: all 0.3s ease-in-out;
474 -o-transition: all 0.3s ease-in-out;
475 transition: all 0.3s ease-in-out;
476 }
477 .cta-text a:hover{
478 color: #050505;
479 }
480
481 .vz-btn-group{
482 display: flex;
483 flex-wrap: wrap;
484 align-items: center;
485 }
486 .vz-btn-group .btn{
487 margin-bottom: 8px;
488 margin-right: 30px;
489 }
490 .vz-btn-group .btn:last-child{
491 margin-right: 0px;
492 }
493
494 .vz-wizard-wrap .container{
495 max-width: 930px;
496 width: 100%;
497 padding: 0 15px;
498 margin: 0 auto;
499 }
500 .vz-header--small{
501 background: #ffffff;
502 height: 80px;
503 position: relative;
504 padding-top: 8px;
505 }
506 .vz-header--small:before{
507 content: "";
508 position: absolute;
509 left: 0;
510 top: 0;
511 height: 8px;
512 width: 100%;
513 background: #39C3D2;
514 }
515 .vz-header--small .container{
516 height: 100%;
517 display: flex;
518 align-items: center;
519 justify-content: space-between;
520 }
521
522 .btn-link{
523 color: #757575;
524 font-weight: 500;
525 font-size: 13px;
526 line-height: 16px;
527 text-decoration: none;
528 display: flex;
529 align-items: center;
530 }
531 .btn-link .dashicons{
532 width: 16px;
533 height: 16px;
534 font-size: 16px;
535 vertical-align: middle;
536 margin: 0 8px;
537 }
538
539 .vz-wizard{
540 padding: 40px 0;
541 }
542 .vz-wizard .sw>.tab-content{
543 height: auto !important;
544 }
545 .vz-wizard .sw-theme-basic>.nav{
546 box-shadow: none !important;
547 max-width: 360px;
548 margin: 0 auto 30px;
549 justify-content: space-between;
550 position: relative;
551 flex: initial;
552 flex-direction: row !important;
553 }
554 .vz-wizard .sw-theme-basic>.nav::after{
555 content: "";
556 width: 100%;
557 height: 2px;
558 background: #D9D9D9;
559 position: absolute;
560 left: 0;
561 top: 50%;
562 margin-top: -1px;
563 }
564 .vz-wizard .sw.sw-justified>.nav>li{
565 margin: 0;
566 flex-grow: inherit;
567 position: relative;
568 z-index: 1;
569 }
570 .vz-wizard .sw.sw-justified>.nav .nav-link{
571 margin: 0;
572 flex-grow: inherit;
573 width: 24px;
574 height: 24px;
575 border-radius: 100%;
576 padding: 0;
577 background: #F0F0F1;
578 border: 1.5px solid #7D7E82;
579 font-weight: 500;
580 font-size: 14px;
581 color: #7D7E82;
582 display: flex;
583 align-items: center;
584 justify-content: center;
585 box-shadow: 0 0 0 8px #F0F0F1;
586 -webkit-transition: all 0.3s ease-in-out;
587 -moz-transition: all 0.3s ease-in-out;
588 -o-transition: all 0.3s ease-in-out;
589 transition: all 0.3s ease-in-out;
590 }
591 .vz-wizard .sw.sw-justified>.nav .nav-link.active{
592 background: #39C3D2;
593 border-color: #39C3D2;
594 color: #ffffff !important;
595 }
596 .vz-wizard .sw.sw-justified>.nav .nav-link.done{
597 background: #39C3D2;
598 border-color: #39C3D2;
599 position: relative;
600 font-size: 0;
601 }
602 .vz-wizard .sw.sw-justified>.nav .nav-link.done:before{
603 content: "\f15e";
604 font-family: dashicons;
605 font-weight: 400;
606 color: #ffffff;
607 width: 16px;
608 height: 16px;
609 font-size: 16px;
610 line-height: 1;
611 position: absolute;
612 inset: 0;
613 margin: auto;
614 }
615 .vz-wizard .sw.sw-justified>.nav .nav-link:after{
616 display: none;
617 }
618 .vz-wizard .sw-toolbar-elm {
619 display: none;
620 }
621
622 .vz-wizard .sw>.tab-content>.tab-pane{
623 padding: 0;
624 }
625
626 .vz-newsletter-wrap{
627 display: flex;
628 flex-wrap: wrap;
629 align-items: center;
630 justify-content: space-between;
631 }
632 .vz-newsletter-wrap .vz-newsletter-img{
633 width: 275px;
634 }
635 .vz-newsletter-wrap .vz-newsletter{
636 width: calc(100% - 355px);
637 }
638 .vz-newsletter-wrap .vz-newsletter .vz-form-group{
639 max-width: 400px;
640 }
641
642 .vz-shortcode-preview-box{
643 border: 1px solid #D9D9D9;
644 border-radius: 8px;
645 }
646 .vz-shortcode-preview-title{
647 display: flex;
648 align-items: center;
649 padding: 16px 30px;
650 border-bottom: 1px solid #D9D9D9;
651 }
652 .vz-shortcode-preview-title.border-0{
653 border: 0;
654 }
655 .vz-shortcode-preview-title .icon{
656 width: 55px;
657 height: 55px;
658 display: flex;
659 align-items: center;
660 justify-content: center;
661 flex-shrink: 0;
662 background: #D9D9D9;
663 border-radius: 6px;
664 margin-right: 30px;
665 }
666 .vz-shortcode-preview-content{
667 padding: 26px 65px 30px 30px;
668 }
669 .vz-shortcode-preview-content .content-title{
670 display: flex;
671 justify-content: space-between;
672 align-items: center;
673 padding-bottom: 40px;
674 }
675 .vz-shortcode-preview-content .content-title .check{
676 flex-shrink: 0;
677 margin-left: 10px;
678 }
679
680 .vz-shortcode-preview{
681 background: rgba(57, 195, 210, .1);
682 border-left: 4px solid #39C3D2;
683 padding: 20px;
684 }
685 .vz-code-box{
686 background: #F5F5F5;
687 border: 1px solid #D9D9D9;
688 border-radius: 4px;
689 padding: 4px 12px;
690 margin-bottom: 10px;
691 display: flex;
692 align-items: center;
693 }
694 .vz-code-box input{
695 width: 100%;
696 border: 0;
697 height: 36px;
698 background: transparent;
699 box-shadow: none !important;
700 outline: 0 !important;
701 padding: 0;
702 font-family: 'Consolas';
703 font-size: 12px;
704 line-height: 14px;
705 color: rgba(0, 0, 0, 0.8);
706 margin-right: 16px;
707 }
708 .vz-code-box .vz-copy-code-btn{
709 flex-shrink: 0;
710 white-space: nowrap;
711 border: 0;
712 box-shadow: none;
713 outline: 0;
714 background: transparent;
715 font-family: 'Consolas';
716 font-size: 12px;
717 line-height: 14px;
718 color: rgba(0, 0, 0, 0.8);
719 display: flex;
720 align-items: center;
721 cursor: pointer;
722 }
723 .vz-code-box .vz-copy-code-btn img{
724 flex-shrink: 0;
725 margin-left: 8px;
726 }
727 .form-block .spinner {
728 float: revert;
729 }
730 .vz-error-notice {
731 margin-bottom: 20px;
732 border: 1px solid #D9D9D9;
733 border-left-color: #d63638;
734 border-left-width: 4px;
735 padding-left: 10px;
736 }
737
738 .vz-wizard-fullscreen .btn-primary.disabled {
739 opacity: 0.5;
740 pointer-events: none;
741 cursor: auto;
742 background: #39C3D2;
743 border-color: #39C3D2;
744 color: #ffffff;
745 }
746
747 .vz-wizard-fullscreen .vz-field-error {
748 color: #F00;
749 }
750
751
752 .help-text.help-text-primary{
753 font-size: 16px;
754 line-height: 24px;
755 color: #39C3D2;
756 }
757 .help-text.help-text-primary a{
758 font-weight: 700;
759 color: #39C3D2;
760 text-decoration: underline;
761 font-style: italic;
762 }
763
764 .redirect-popup{
765 position: fixed;
766 left: 0;
767 top: 0;
768 width: 100%;
769 height: 100%;
770 background: rgba(217, 217, 217, 0.2);
771 backdrop-filter: blur(1px);
772 z-index: 123;
773 padding: 10px;
774 display: none;
775 }
776 .redirect-popup-box{
777 position: absolute;
778 width: 90%;
779 max-width: 429px;
780 height: fit-content;
781 inset: 0;
782 margin: auto;
783 padding: 24px 20px;
784 background: #FFFFFF;
785 border-radius: 8px;
786 text-align: center;
787 color: #757575;
788 }
789 .redirect-popup-box .icon{
790 width: 64px;
791 height: 64px;
792 background: rgba(57, 195, 210, 0.25);
793 border-radius: 100%;
794 display: flex;
795 align-items: center;
796 justify-content: center;
797 margin: 0 auto 24px;
798 }
799 .redirect-popup-box .h3{
800 font-weight: 700;
801 color: #757575;
802 padding-bottom: 28px;
803 }
804 @-webkit-keyframes spin {
805 100% { -webkit-transform: rotate(360deg); }
806 }
807 @keyframes spin {
808 100% {
809 -webkit-transform: rotate(360deg);
810 transform:rotate(360deg);
811 }
812 }
813
814 .redirect-popup-box .redirect-loader img{
815 -webkit-animation:spin 2s linear infinite;
816 -moz-animation:spin 2s linear infinite;
817 animation:spin 2s linear infinite;
818 }
819
820 .vz-wizard .sw-theme-basic {
821 border: none;
822 }
823
824
825 /* visualizer accordion style start */
826 .vz-accordion-item{
827 background: #ffffff;
828 border: 1px solid #D9D9D9;
829 }
830 .vz-accordion-item__title{
831 position: relative;
832 }
833 .vz-accordion-item .vz-accordion-item__button{
834 width: 100%;
835 position: relative;
836 text-align: left;
837 border: 0;
838 background: transparent;
839 outline: 0;
840 padding: 30px 90px 30px 30px;
841 }
842 .vz-accordion-item .vz-accordion__step-number{
843 padding-bottom: 10px;
844 }
845 .vz-accordion-item .vz-accordion__step-title{
846 color: #050505;
847 }
848 .vz-accordion-item .vz-accordion__icon{
849 position: absolute;
850 right: 30px;
851 top: 50%;
852 margin-top: -24px;
853 width: 48px;
854 height: 48px;
855 background: #F0F2F5;
856 border-radius: 24px;
857 display: flex;
858 align-items: center;
859 justify-content: center;
860 font-size: 20px;
861 line-height: 1;
862 color: #757575;
863 -webkit-transition: all 0.3s ease-in-out;
864 -moz-transition: all 0.3s ease-in-out;
865 -o-transition: all 0.3s ease-in-out;
866 transition: all 0.3s ease-in-out;
867 }
868 .vz-accordion-item .vz-accordion__icon.vz-accordion__icon--success{
869 width: 24px;
870 height: 24px;
871 margin-top: -12px;
872 background: #4268CF !important;
873 color: #ffffff;
874 }
875 .vz-accordion-item .vz-accordion__icon:hover{
876 background: #E4E6E8;
877 }
878 .vz-accordion-item .vz-accordion-item__content{
879 font-size: 16px;
880 line-height: 24px;
881 color: #000000;
882 padding: 0 30px 6px;
883 position: relative;
884 }
885 .vz-accordion-item .vz-accordion-item__content.border-top > div{
886 border-top: 1px solid #D9D9D9;
887 }
888
889 .vz-accordion .vz-accordion-item{
890 margin-bottom: 30px;
891 }
892 .vz-accordion .vz-accordion-item.mb-0{
893 margin-bottom: 0;
894 }
895 .vz-accordion .vz-accordion-item .vz-accordion-item__button{
896 cursor: pointer;
897 }
898 .vz-accordion .vz-accordion-item .vz-accordion__step-number{
899 padding-bottom: 0;
900 height: 0;
901 opacity: 0;
902 -webkit-transition: all 0.3s ease-in-out;
903 -moz-transition: all 0.3s ease-in-out;
904 -o-transition: all 0.3s ease-in-out;
905 transition: all 0.3s ease-in-out;
906 }
907 .vz-accordion .vz-accordion-item .is-active .vz-accordion__step-number{
908 opacity: 1;
909 height: 27px;
910 padding-bottom: 5px;
911 }
912 .vz-accordion .vz-accordion-item .is-active .vz-accordion__icon{
913 color: #050505;
914 -webkit-transform: rotate(180deg);
915 -moz-transform: rotate(180deg);
916 -o-transform: rotate(180deg);
917 -ms-transform: rotate(180deg);
918 transform: rotate(180deg);
919 }
920 .vz-accordion .vz-accordion-item .vz-accordion-item__content{
921 display: none;
922 }
923 .vz-accordion .vz-accordion-item .vz-accordion-item__content.is-active{
924 display: block;
925 }
926 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-accordion-item__button{
927 padding-left: 80px;
928 padding-top: 22px;
929 padding-bottom: 22px;
930 }
931 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-checkbox{
932 position: absolute;
933 left: 30px;
934 top: 50%;
935 margin-top: -10px;
936 width: 20px;
937 height: 20px;
938 z-index: 12;
939 }
940 .vz-accordion .vz-accordion-item .vz-accordion-checkbox__title .vz-checkbox input[type=checkbox].vz-checkbox-btn{
941 display: block;
942 }
943 .vz-accordion-item.vz-features-accordion{
944 border-radius: 8px;
945 }
946 .vz-accordion-item.vz-features-accordion .vz-accordion-item__content{
947 border-top: 1px solid #D9D9D9;
948 padding-left: 20px;
949 padding-right: 20px;
950 }
951
952 .vz-features-list ul li{
953 padding: 25px 0;
954 display: flex;
955 align-items: center;
956 }
957 .vz-features-list ul li .icon{
958 width: 43px;
959 height: 43px;
960 flex-shrink: 0;
961 margin-right: 17px;
962 background: rgba(217, 217, 217, 0.4);
963 border-radius: 6px;
964 display: flex;
965 align-items: center;
966 justify-content: center;
967 }
968 .vz-features-list ul li .txt{
969 width: 100%;
970 }
971 .pro-label{
972 background: #007CBA;
973 border-radius: 6px;
974 color: #ffffff;
975 text-transform: uppercase;
976 font-size: 16px;
977 line-height: 19px;
978 padding: 2px 9px 4px;
979 }
980 .pro-label.free-label{
981 background: #BDE6EB;
982 border-radius: 6px;
983 color: #39C3D2;
984 text-transform: none;
985 font-size: 16px;
986 line-height: 19px;
987 padding: 2px 9px 4px;
988 }
989 /* visualizer accordion style End */
990 .vz-chart-list{
991 /* max-width: 780px;*/
992 padding: 0 18px;
993 margin-bottom: 40px;
994 }
995 .vz-chart-list > ul{
996 display: flex;
997 flex-wrap: wrap;
998 justify-content: space-between;
999 }
1000 .vz-chart-list .slick-arrow{
1001 position: absolute;
1002 width: 30px;
1003 top: 50%;
1004 height: 30px;
1005 margin-top: -15px;
1006 font-size: 0;
1007 color: #757575;
1008 display: grid;
1009 place-items: center;
1010 border: 0;
1011 background: transparent;
1012 cursor: pointer;
1013 }
1014 .vz-chart-list .slick-arrow:before{
1015 display: block;
1016 font-family: "dashicons";
1017 font-size: 24px;
1018 line-height: 1;
1019 }
1020 .vz-chart-list .slick-arrow.slick-prev{
1021 left: -42px;
1022 }
1023 .vz-chart-list .slick-arrow.slick-prev:before{
1024 content: "\f341";
1025 }
1026 .vz-chart-list .slick-arrow.slick-next{
1027 right: -42px;
1028 }
1029 .vz-chart-list .slick-arrow.slick-next:before{
1030 content: "\f345";
1031 }
1032 .vz-chart-list > ul > li{
1033 width: 48%;
1034 max-width: 362px;
1035 padding-bottom: 60px;
1036 }
1037 .vz-chart-list .slick-slide{
1038 margin-right: 34px;
1039 }
1040 .vz-chart-option{
1041 width: 317px;
1042 position: relative;
1043 display: flex;
1044 flex-wrap: wrap;
1045 padding: 12px 12px 20px;
1046 }
1047 .vz-chart-option .img{
1048 order: 1;
1049 position: relative;
1050 z-index: 1;
1051 display: block;
1052 width: 100%;
1053 max-width: 338px;
1054 height: 198px;
1055 background-color: #ffffff;
1056 margin-bottom: 20px;
1057 background-image: url(../images/chart_types_v395.png);
1058 background-repeat: no-repeat;
1059 background-position: center center;
1060 transition: all .3s ease-in-out;
1061 /* filter: grayscale(100%);
1062 -webkit-filter: grayscale(100%); */
1063 background-size: 900px 1150px;
1064 filter: grayscale(100%);
1065 }
1066 .vz-chart-option .img.type-box-pie{
1067 background-position: -5px -17px;
1068 }
1069 .vz-chart-option .img.type-box-bar{
1070 background-position: -305px -235px;
1071 }
1072 .vz-chart-option .img.type-box-line{
1073 background-position: -606px -14px;
1074 }
1075 .vz-chart-option .img.type-box-tabular{
1076 background-position: -306px -693px;
1077 }
1078 .vz-chart-option .img.type-box-geo{
1079 background-position: -603px -459px;
1080 }
1081 .vz-chart-option:hover .img{
1082 background-image: url(../images/chart_types_v395.png);
1083 filter: grayscale(0);
1084 }
1085 .vz-chart-option .bg{
1086 position: absolute;
1087 left: 0;
1088 top: 0;
1089 width: 100%;
1090 height: 100%;
1091 background: #F0F2F5;
1092 border-radius: 5px;
1093 transition: all .3s ease-in-out;
1094 }
1095 .vz-chart-option:hover .bg{
1096 background: #BDE6EB;
1097 }
1098 .vz-chart-option input[type=radio].vz-radio-btn{
1099 z-index: 1;
1100 flex-shrink: 0;
1101 order: 2;
1102 margin-top: 5px;
1103 }
1104 .vz-chart-option .h3{
1105 order: 3;
1106 width: calc(100% - 20px);
1107 padding-left: 12px;
1108 position: relative;
1109 z-index: 1;
1110 color: #000000;
1111 opacity: .7;
1112 display: flex;
1113 flex-wrap: wrap;
1114 align-items: center;
1115 }
1116 .vz-pro-label-wrap {
1117 order: 3;
1118 width: calc(100% - 20px);
1119 padding-left: 12px;
1120 position: relative;
1121 z-index: 1;
1122 display: flex;
1123 flex-wrap: wrap;
1124 align-items: center;
1125 }
1126 .vz-pro-label-wrap h3 {
1127 opacity: .7;
1128 color: #000000;
1129 }
1130 .vz-pro-label-wrap span.pro-label{
1131 margin-left: 30px;
1132 font-weight: 600;
1133 }
1134 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .bg{
1135 background: #BDE6EB;
1136 }
1137 .vz-chart-option input[type=radio].vz-radio-btn:checked ~ .img{
1138 background-image: url(../images/chart_types_v395.png);
1139 filter: grayscale(0);
1140 }
1141
1142 .vz-pro-option{
1143 position: relative;
1144 }
1145 .vz-pro-option:hover .pro-overlay{
1146 opacity: 1;
1147 visibility: visible;
1148 }
1149 .vz-pro-option .pro-overlay{
1150 position: absolute;
1151 left: 0;
1152 top: 0;
1153 width: 100%;
1154 height: 100%;
1155 padding: 12px 12px 20px;
1156 z-index: 2;
1157 opacity: 0;
1158 visibility: hidden;
1159 transition: all .3s ease-in-out;
1160 }
1161 .vz-pro-option .pro-overlay .pro-box{
1162 padding-bottom: 58.88%;
1163 background: rgba(255,255,255,.5);
1164 backdrop-filter: blur(2px);
1165 }
1166 .vz-pro-option .pro-overlay .pro-box .btn {
1167 position: absolute;
1168 top: 50%;
1169 left: 50%;
1170 white-space: nowrap;
1171 transform: translate(-50%, -50%);
1172 }
1173
1174 .vz-power-pro{
1175 background: #FFFFFF;
1176 border: 4px solid #007CBA;
1177 padding: 12px;
1178 height: 100%;
1179 }
1180 .vz-power-pro .h3{
1181 padding-bottom: 16px;
1182 }
1183 .vz-power-pro ul{
1184 padding-bottom: 10px;
1185 }
1186 .vz-power-pro ul li{
1187 position: relative;
1188 font-size: 14px;
1189 line-height: 19px;
1190 color: #000000;
1191 padding-left: 25px;
1192 padding-bottom: 11px;
1193 }
1194 .vz-power-pro ul li:before{
1195 content: "\f12a";
1196 font-family: 'dashicons';
1197 position: absolute;
1198 left: 0;
1199 top: 0;
1200 color: #00AA63;
1201 font-size: 20px;
1202 }
1203
1204 .vz-progress{
1205 width: 100%;
1206 position: relative;
1207 background: #D9D9D9;
1208 height: 4px;
1209 }
1210 .vz-progress .vz-progress-bar{
1211 position: absolute;
1212 left: 0;
1213 top: 0;
1214 height: 100%;
1215 background: #39C3D2;
1216 transition: all .3s ease-in-out;
1217 }
1218 .vz-chart-list .slick-arrow[disabled="disabled"], .vz-chart-list .slick-arrow[aria-disabled="true"] {
1219 color: #eeeeee
1220 }
1221 .vz-btn-group span.spinner {
1222 margin-bottom: 8px;
1223 }
1224
1225 @media (max-width: 767px){
1226 .wp-toolbar .vz-wizard-fullscreen{margin-top: 0;}
1227 .vz-wizard .sw-theme-basic>.nav{max-width: 270px;}
1228 .vz-newsletter-wrap .vz-newsletter, .vz-newsletter-wrap .vz-newsletter-img{width: 100%; padding-bottom: 20px;}
1229 .vz-shortcode-preview-content{padding-right: 20px;}
1230 .vz-code-box{flex-wrap: wrap;}
1231 .h1{font-size: 28px; line-height: 37px;}
1232 .h2{font-size: 20px; line-height: 26px;}
1233 .h3{font-size: 18px; line-height: 24px;}
1234 .vz-header{padding: 15px 0;}
1235 .vz-header .vz-logo .vz-logo-icon{max-width: 40px;}
1236 .vz-header .vz-logo .vz-logo-icon img{max-width: 100%;}
1237 .post-type-visualizer_imports:not(.edit-php) #wpcontent, .visualizer_page_visualizer-support #wpcontent, .visualizer_page_visualizer-settings #wpcontent{padding-top: 46px;}
1238 #wpbody{padding-top: 0;}
1239 .vz-accordion .vz-accordion-item{margin-bottom: 15px;}
1240 .vz-accordion-item .vz-accordion-item__button{padding: 15px 60px 15px 15px;}
1241 .vz-accordion-item .vz-accordion__icon{width: 38px; height: 38px; right: 15px; margin-top: -19px;}
1242 .vz-accordion-item .vz-accordion-item__content{padding-left: 15px; padding-right: 15px;}
1243 .vz-input-group{flex-wrap: wrap;}
1244 .vz-input-group .vz-input-group-right{width: 100%; padding-left: 0; padding-top: 8px;}
1245 .vz-input-group .vz-input-group-right .btn.dropdown-toggle{width: 100%;}
1246 .vz-form-wrap .form-block.form-block-two-column .left{width: 100%; padding-right: 0; padding-bottom: 24px;}
1247 .vz-form-wrap .form-block.form-block-two-column .right{width: 100%;}
1248 .vz-form-action .left{width: 100%; padding-bottom: 16px;}
1249 .vz-form-action .left .btn{width: 100%; display: block; text-align: center;}
1250 .vz-form-action .right{width: 100%; flex-direction: column;}
1251 .vz-form-action .right .btn + .btn{margin-left: 0; margin-top: 8px;}
1252 .vz-form-row .vz-form-col-6, .vz-form-row .vz-form-col-4, .vz-form-row .vz-form-col-8{width: 100%;}
1253 .vz-document-list > ul > li{width: 100%;}
1254 .vz-help-improve-box .left{width: 100%;}
1255 .vz-help-improve-box .right{width: 100%;}
1256 .vz-chart-list > ul > li{width: 100%; max-width: 100%; padding-bottom: 30px;}
1257 .vz-shortcode-preview-content{padding-right: 20px;}
1258 .vz-newsletter-wrap .vz-newsletter, .vz-newsletter-wrap .vz-newsletter-img{width: 100%; padding-bottom: 20px;}
1259 }