PluginProbe
Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.0.12
Visualizer – Tables & Charts Manager with Built-in AI Generator v3.0.12
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 / frame.css

frame.css in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.0.12, at css/frame.css

1,059 lines 19.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 #content {
2 overflow: auto;
3 position: absolute;
4 z-index: 75;
5 top: 0;
6 right: 0;
7 bottom: 60px;
8 left: 0;
9 background-color: white;
10 }
11
12 #canvas {
13 position: absolute;
14 top: 10px;
15 right: 310px;
16 bottom: 10px;
17 left: 10px;
18 }
19
20 .loader {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 margin-top: -16px;
25 margin-left: -16px;
26 }
27
28 /******************************************************************************/
29 /******************************** SIDEBAR ***********************************/
30 /******************************************************************************/
31
32 #sidebar {
33 overflow: auto;
34 position: absolute;
35 z-index: 75;
36 top: 0;
37 right: 0;
38 bottom: 60px;
39 width: 299px;
40 border-left: 1px solid #dfdfdf;
41 background: whitesmoke;
42
43 -webkit-overflow-scrolling: touch;
44 }
45
46 .viz-group {
47 margin: 0;
48 font-size: 12px;
49 line-height: 18px;
50 list-style: none;
51 }
52
53 .viz-group .viz-group-header .viz-group-title {
54 margin: 10px 0;
55 padding: 15px 20px;
56 border-top: 1px solid #ddd;
57 border-bottom: 1px solid #ddd;
58 color: #555d66;
59 background: #fff;
60 }
61
62 .viz-group-wrapper ul .viz-group-title {
63 border-top: 1px solid #ddd;
64 }
65
66 .viz-group-wrapper ul li {
67 border-top: 1px solid #ddd;
68 }
69
70 .viz-group-wrapper ul ul li.viz-subsection {
71 margin: 5px;
72 border: 1px solid #ddd;
73 }
74
75 .viz-group-wrapper .viz-group .viz-group .viz-group-title {
76 position: relative;
77 margin: 0;
78 padding: 10px 10px 11px 14px;
79 border-top: none;
80 border-bottom: none;
81 border-left: 4px solid #fff;
82 color: #555d66;
83 background-color: #fff;
84 font-size: 14px;
85 font-weight: 600;
86 line-height: 21px;
87 cursor: pointer;
88 -webkit-transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
89 transition: 0.15s color ease-in-out,0.15s background-color ease-in-out,0.15s border-color ease-in-out;
90 }
91
92 .viz-group-wrapper .viz-group .viz-group:hover .viz-group-title,
93 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title {
94 border-left-color: #0073aa;
95 color: #0073aa;
96 background: #f3f3f5;
97 }
98
99 .viz-group-wrapper .viz-group .viz-group .viz-group-title:after {
100 position: absolute;
101 z-index: 1;
102 top: 11px;
103 right: 10px;
104 color: #a0a5aa;
105 font: 400 20px/1 dashicons;
106 content: "\f345";
107 }
108
109 .viz-group-wrapper .viz-group .viz-group.open .viz-group-title:after {
110 content: "\f347";
111 }
112
113 .viz-group-wrapper .viz-group .customize-section-back {
114 display: block;
115 float: left;
116 width: 42px;
117 height: 49px;
118 margin: 0 15px 0 0;
119 padding: 0;
120 border: none;
121 border-top: 1px solid #ddd;
122 border-right: 1px solid #ddd;
123 border-left: 4px solid #fff;
124 background: #fff;
125 box-shadow: none;
126 cursor: pointer;
127 -webkit-transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
128 transition: color 0.15s ease-in-out,border-color 0.15s ease-in-out,background 0.15s ease-in-out;
129 }
130
131 .viz-group-wrapper .viz-group .customize-section-back:hover {
132 border-left-color: #0073aa;
133 outline: 0;
134 color: #0073aa;
135 background: #f3f3f5;
136 }
137
138 .viz-group-wrapper .viz-group .customize-section-back:before {
139 position: relative;
140 top: -11px;
141 left: -2px;
142 font: 400 20px/72px dashicons;
143 content: "\f341";
144 }
145
146 .viz-group-wrapper.full-height {
147 float: left;
148 position: relative;
149 width: 100%;
150 height: 100%;
151 margin: 0;
152 }
153
154 .viz-group.bottom-fixed {
155 display: block;
156 position: absolute;
157 bottom: 0;
158 width: 100%;
159 }
160
161 .viz-group ul li h2,
162 .viz-group ul li h3 {
163 padding: 7px 15px 7px 35px;
164 }
165
166 .viz-group h2 .dashicons,
167 .viz-group h3 .dashicons {
168 margin-right: 5px;
169 vertical-align: -5px;
170 }
171
172 .viz-group-content {
173 display: none;
174 margin: 0;
175 padding: 0;
176 background-color: #fdfdfd;
177 }
178
179 div.viz-group-content {
180 padding: 15px;
181 }
182
183 .viz-group.open > .viz-group-content {
184 display: block;
185 }
186
187 .viz-group-description {
188 margin: 0;
189 padding: 5px;
190 color: #555;
191 font-size: 12px;
192 text-align: left;
193 }
194
195 div.viz-group-content .viz-group-description {
196 padding: 5px;
197 font-family: "Montserrat",sans-serif;
198 font-weight: 300;
199 }
200
201 .initial-screen .viz-group-description {
202 padding: 0;
203 padding: 10px 20px 20px;
204 font-family: "Montserrat",sans-serif;
205 font-weight: 300;
206 }
207
208 .viz-section-title {
209 display: block;
210 position: relative;
211 margin-bottom: 5px;
212 padding: 4px 20px;
213 border-top: 1px solid #eee;
214 border-bottom: 1px solid #eee;
215 background-color: rgba(0, 0, 0, 0.02);
216 box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.1);
217 font-weight: bold;
218 cursor: pointer;
219 }
220
221 .viz-group-wrapper ul ul li .viz-section-title {
222 margin-bottom: 0;
223 border: none;
224 box-shadow: none;
225 }
226
227 .viz-section-title::after {
228 position: absolute;
229 z-index: 1;
230 top: 13px;
231 right: 20px;
232 width: 0;
233 height: 0;
234 border-width: 4px 4px 0;
235 border-style: solid;
236 border-color: #ccc transparent;
237 content: "";
238 }
239
240 .viz-section-title.open::after {
241 border-width: 0 4px 4px;
242 }
243
244 .section-items,
245 .viz-section-items {
246 display: none;
247 padding: 15px;
248 }
249
250 .viz-section-items.open {
251 display: block;
252 }
253
254 .more-info {
255 display: none;
256 float: right;
257 color: #21759b;
258 font-size: 85%;
259 font-weight: normal;
260 text-decoration: none;
261 }
262
263 .viz-section-description {
264 margin: 0;
265 /*display: none;*/
266 padding: 0;
267 color: gray;
268 font-size: 11px;
269 }
270
271 .viz-section-table {
272 width: 100%;
273 }
274
275 .section-delimiter,
276 .viz-section-delimiter {
277 margin: 15px 0;
278 border-top: 1px dashed #ccc;
279 }
280
281 .viz-section-table-column {
282 width: 50%;
283 padding: 0 1px;
284 text-align: left;
285 vertical-align: top;
286 }
287
288 .viz-section-item {
289 margin-bottom: 10px;
290 }
291
292 .control-select,
293 .control-text {
294 width: 100%;
295 }
296
297 .control-check {
298 float: right;
299 }
300
301 .control-check::after {
302 clear: both;
303 }
304
305 .viz-section-description ul {
306 margin: 0 0 0 25px;
307 list-style: circle;
308 }
309
310 .viz-section-description li {
311 margin: 0;
312 list-style: circle;
313 }
314
315 #rate-the-plugin {
316 margin-top: 40px;
317 padding: 20px;
318 border-top: 1px dashed #ddd;
319 text-align: center;
320 }
321
322 .rate-the-plugin {
323 width: 40% !important;
324 margin-top: -5px;
325 }
326
327 #rate-stars {
328 width: 100px;
329 height: 20px;
330 margin: 15px auto;
331 background-image: url("../images/star.png");
332 background-repeat: repeat-x;
333 background-position: right center;
334 }
335
336 #rate-link {
337 font-family: "Montserrat",sans-serif;
338 font-weight: 400;
339 text-decoration: none;
340 }
341
342 #flattr {
343 margin-top: 15px;
344 text-align: center;
345 }
346
347 /******************************************************************************/
348 /******************************** TOOLBAR ***********************************/
349 /******************************************************************************/
350
351 #toolbar {
352 overflow: hidden;
353 position: absolute;
354 z-index: 100;
355 right: 0;
356 bottom: 0;
357 left: 0;
358 height: 36px;
359 padding: 12px 16px;
360 border-top: 1px solid #dfdfdf;
361 box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1);
362 text-align: center;
363 }
364
365 #toolbar .push-right {
366 float: right;
367 }
368
369 .toolbar-div a {
370 float: left;
371 }
372
373 .toolbar-div {
374 display: inline-block;
375 float: left;
376 width: 30%;
377 vertical-align: top;
378 }
379
380 /******************************************************************************/
381 /******************************** TYPE PICKER ******************************/
382 /******************************************************************************/
383
384 .type-box span {
385 display: block;
386 position: absolute;
387 right: 0;
388 bottom: -6px;
389 width: 100%;
390 padding: 4px 0;
391 border-top: 1px dashed #ddd;
392 border-bottom: 1px dashed #ddd;
393 background: #e0e0e0;
394 background-color: #efefef;
395 box-shadow: 0 0 8px #ddd;
396 font-weight: bold;
397 text-align: center;
398 }
399
400 .type-box .pro-upsell {
401 color: #c55555;
402 }
403
404 #type-picker {
405 width: 954px;
406 margin: 50px auto;
407 }
408
409 .type-box {
410 float: left;
411 position: relative;
412 margin: 0 20px 20px 0;
413 border: 1px dashed #ddd;
414 background-color: #efefef;
415 box-shadow: 0 0 8px #ddd;
416 }
417
418 .type-box:nth-child(3n+3) {
419 margin-right: 0;
420 }
421
422 .type-box .pro-upsell .visualizder-pro-label {
423 display: inline;
424 position: absolute;
425 top: 0;
426 width: 74px;
427 height: 10px;
428 height: 17px;
429 border: none;
430 color: #fff;
431 background: #c55555;
432 }
433
434 .type-label {
435 display: block;
436 width: 270px;
437 height: 205px;
438 padding: 15px;
439 border: 1px solid #e0e0e0;
440 background-color: white;
441 background-image: url(../images/chart_types_g.png);
442 background-repeat: no-repeat;
443 background-position: center center;
444 }
445
446 .type-label-selected,
447 .type-box > .type-label:hover {
448 background-image: url(../images/chart_types.png);
449 }
450
451 .type-box-area .type-label {
452 background-position: 0 -225px;
453 }
454
455 .type-box-line .type-label {
456 background-position: -600px 0;
457 }
458
459 .type-box-scatter .type-label {
460 background-position: -300px 0;
461 }
462
463 .type-box-pie .type-label {
464 background-position: 0 0;
465 }
466
467 .type-box-gauge .type-label {
468 background-position: 0 -450px;
469 }
470
471 .type-box-geo .type-label {
472 background-position: -600px -450px;
473 }
474
475 .type-box-candlestick .type-label {
476 background-position: -300px -450px;
477 }
478
479 .type-box-bar .type-label {
480 background-position: -300px -225px;
481 }
482
483 .type-box-column .type-label {
484 background-position: -600px -225px;
485 }
486
487 .type-box-table .type-label {
488 background-position: -301px -670px;
489 }
490
491 .type-box-timeline .type-label {
492 background-position: -2px -670px;
493 }
494
495 .type-box-combo .type-label {
496 background-position: -597px -670px;
497 }
498
499 /******************************************************************************/
500 /******************************** OTHER STYLES ******************************/
501 /******************************************************************************/
502
503 #thehole {
504 position: absolute;
505 top: 0;
506 left: 0;
507 width: 1px;
508 height: 1px;
509 border: 0;
510 opacity: 0;
511
512 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
513 -moz-opacity: 0;
514 }
515
516 .locker,
517 .locker-loader {
518 position: absolute;
519 top: 0;
520 left: 0;
521 }
522
523 .locker {
524 z-index: 1000;
525 opacity: 0.8;
526 background-color: white;
527
528 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
529 filter: alpha(opacity=80);
530 }
531
532 .locker-loader {
533 z-index: 1001;
534 background: url(../images/ajax-loader.gif) no-repeat center center;
535 }
536
537 .file-wrapper {
538 display: inline-block;
539 width: auto;
540 max-width: 133px;
541 }
542
543 .file {
544 position: fixed;
545 max-width: 138px;
546 margin-top: -6px;
547 margin-left: -33px;
548 opacity: 0;
549 font-size: 22px;
550 cursor: pointer;
551
552 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
553 -moz-opacity: 0;
554 }
555
556 #remote-file {
557 display: inline-block;
558 float: right;
559 margin-left: 6px;
560 }
561
562 .form-inline {
563 display: table;
564 /*margin: 0 auto;*/
565 width: 100%;
566 vertical-align: middle;
567 }
568
569 .computer-btn {
570 overflow: hidden;
571 left: -18px;
572 padding-left: 27px !important;
573 border: medium none rgb(100, 100, 100) !important;
574 border: 1px solid #b0b0b0 !important;
575 color: #646464 !important;
576 background: #e6e6e6 url("../images/computer.png") no-repeat scroll 7px 1px !important;
577 box-shadow: none !important;
578 text-shadow: none!important;
579 font-family: "Open Sans",sans-serif;
580 font-weight: 700;
581 -webkit-transition: all 0.3s ease 0s;
582 transition: all 0.3s ease 0s;
583 }
584
585 .computer-btn:hover {
586 padding-left: 27px !important;
587 border: 1px solid #2f8cea !important;
588 color: white !important;
589 background: #2f8cea url("../images/computer.png") no-repeat scroll 7px -36px !important;
590 box-shadow: 0 1px 0 rgba(171, 171, 171, 0.5) inset, 0 1px 0 rgba(0, 0, 0, 0.15) !important;
591 box-shadow: none !important;
592 -webkit-transition: all 0.3s ease 0s;
593 -webkit-transition: all 0.3s ease;
594 transition: all 0.3s ease 0s;
595 transition: all 0.3s ease;
596 }
597
598 .from-web {
599 margin-top: 0;
600 margin-bottom: 15px !important;
601 }
602
603 .from-web-btn {
604 padding-left: 25px !important;
605 border: medium none #646464 !important;
606 border: 1px solid #b0b0b0 !important;
607 color: #646464 !important;
608 background: #e6e6e6 url("../images/web.png") no-repeat scroll 7px 1px !important;
609 box-shadow: none !important;
610 font-family: "Open Sans",sans-serif;
611 font-weight: 700;
612 -webkit-transition: all 0.3s ease 0s;
613 transition: all 0.3s ease 0s;
614 /*margin-left: 2px !important;*/
615 }
616
617 .from-web-btn:hover {
618 padding-left: 25px !important;
619 /*margin-left: 2px !important;*/
620 border: 1px solid #89b158 !important;
621 color: white !important;
622 background: #89b158 url("../images/web.png") no-repeat scroll 7px -38px !important;
623 box-shadow: none !important;
624 -webkit-transition: all 0.3s ease 0s;
625 -webkit-transition: all 0.3s ease;
626 transition: all 0.3s ease 0s;
627 transition: all 0.3s ease;
628 }
629
630 .preview {
631 width: 100%;
632 }
633
634 #sidebar > ul > div.initial-screen > div {
635 padding: 0 20px;
636 }
637
638 .from-chart-btn {
639 padding-left: 25px !important;
640 border: medium none #646464 !important;
641 border: 1px solid #b0b0b0 !important;
642 color: #646464 !important;
643 background: #e6e6e6 url("../images/from_chart.png") no-repeat scroll 7px 1px !important;
644 box-shadow: none !important;
645 font-family: "Open Sans",sans-serif;
646 font-weight: 700;
647 -webkit-transition: all 0.3s ease 0s;
648 transition: all 0.3s ease 0s;
649 /*margin-left: 2px !important;
650 margin-top: 2px !important;*/
651 }
652
653 .from-chart-btn:hover {
654 padding-left: 25px !important;
655 /*margin-left: 2px !important;*/
656 border: 1px solid #10aecb !important;
657 color: white !important;
658 background: #10aecb url("../images/from_chart.png") no-repeat scroll 7px -36px !important;
659 box-shadow: none !important;
660 -webkit-transition: all 0.3s ease 0s;
661 -webkit-transition: all 0.3s ease;
662 transition: all 0.3s ease 0s;
663 transition: all 0.3s ease;
664 /*margin-top: 2px !important;*/
665 }
666
667 input#existing-chart {
668 /*left: 18px;
669 width: 110px;
670 position: relative;*/
671 }
672
673 select#chart-id {
674 float: right;
675 width: 146px;
676 margin-right: 14px;
677 }
678
679 button#editor-chart-button {
680 display: block;
681 margin: 0 auto;
682 border: 1px solid #2c80d6 !important;
683 color: white !important;
684 background-color: #2f8cea !important;
685 box-shadow: none !important;
686 text-shadow: none;
687 -webkit-transition: all 0.3s ease;
688 transition: all 0.3s ease;
689 }
690
691 .preview-btn {
692 border: 1px solid #2c80d6 !important;
693 color: white !important;
694 background-color: #2f8cea !important;
695 box-shadow: none !important;
696 font-family: "Open Sans",sans-serif;
697 font-weight: 700;
698 -webkit-transition: all 0.3s ease;
699 transition: all 0.3s ease;
700 }
701
702 .preview-btn:hover {
703 border: 1px solid #2c80d6 !important;
704 color: white !important;
705 background-color: #2c80d6 !important;
706 box-shadow: none !important;
707 font-family: "Open Sans",sans-serif;
708 font-weight: 700;
709 -webkit-transition: all 0.3s ease;
710 transition: all 0.3s ease;
711 }
712
713 .show-live-btn {
714 width: 100%;
715 margin-top: 15px !important;
716 border-color: #e98b00 !important;
717 background-color: #f90 !important;
718 box-shadow: none !important;
719 font-family: "Open Sans",sans-serif;
720 font-weight: 700;
721 }
722
723 .show-live-btn:hover {
724 width: 100%;
725 margin-top: 15px !important;
726 border-color: #e98b00 !important;
727 background-color: #ea8c00 !important;
728 box-shadow: none !important;
729 font-family: "Open Sans",sans-serif;
730 font-weight: 700;
731 -webkit-transition: all 0.3s ease;
732 transition: all 0.3s ease;
733 }
734
735 .check-pro-btn {
736 display: block;
737 width: 245px;
738 height: 40px;
739 margin: 0 auto;
740 }
741
742 .advanced-settings-btn,
743 .return-settings-btn {
744 display: block;
745 height: auto;
746 margin: 0 auto;
747 margin-top: 5px;
748 margin-bottom: 20px;
749 border-radius: 3px;
750 font-size: 17px;
751 line-height: 34px;
752 cursor: pointer;
753 }
754
755 .return-settings-btn {
756 width: 90%;
757 }
758
759 .advanced-settings-btn {
760 width: 100%;
761 }
762
763 .return-settings-btn {
764 margin: 10px auto;
765 }
766
767 .hidden-setting {
768 display: none;
769 }
770
771 /* ====== RESPONSIVE ====== */
772
773 @media (max-width: 1366px) {
774 #rate-stars {
775 margin: 3px 0 10px 40%;
776 }
777
778 .rate-the-plugin {
779 margin-left: -8%;
780 }
781 }
782
783 @media screen and (max-width: 782px) {
784 .button.button-primary.file-wrapper.computer-btn,
785 #remote-file,
786 #existing-chart {
787 height: 28px;
788 margin-bottom: 4px;
789 padding: 0 10px 1px;
790 font-size: 13px;
791 line-height: 26px;
792 vertical-align: middle;
793 }
794 }
795
796 #vz-chart-settings h2:hover,
797 #vz-chart-permissions h2:hover,
798 .sidebar-footer-link h2:hover,
799 #vz-chart-review a:hover {
800 text-decoration: none;
801 }
802
803 #vz-chart-review a {
804 color: #00a0d2;
805 text-decoration: none;
806 }
807
808 #vz-chart-settings h2,
809 #vz-chart-permissions h2,
810 .sidebar-footer-link h2,
811 #vz-chart-review h2 {
812 padding: 0;
813 border: none;
814 font-size: 12px;
815 font-weight: 400;
816 }
817
818 #vz-chart-review {
819 right: 0;
820 bottom: 10px;
821 box-sizing: border-box;
822 width: 40%;
823 padding-right: 6px;
824 text-align: right;
825 }
826
827 #vz-chart-settings.bottom-fixed h2 {
828 padding-left: 6px;
829 }
830
831 #vz-chart-settings {
832 bottom: 40px;
833 left: 0;
834 box-sizing: border-box;
835 width: 33%;
836 text-align: left;
837 }
838
839 #vz-chart-permissions:not(.open) h2 {
840 display: inline-block;
841 width: 100%;
842 margin: 0;
843 text-align: right;
844 }
845
846 #vz-chart-permissions {
847 right: 0;
848 bottom: 40px;
849 box-sizing: border-box;
850 width: 33%;
851 text-align: left;
852 }
853
854 #vz-chart-permissions h2,
855 #vz-chart-settings h2,
856 .sidebar-footer-link h2 {
857 display: inline;
858 color: #00a0d2;
859 background: none;
860 font-family: "Open Sans",sans-serif;
861 cursor: pointer;
862 }
863
864 .sidebar-footer-link,
865 #vz-chart-review,
866 #vz-chart-permissions,
867 #vz-chart-settings {
868 display: inline;
869 background: none;
870 cursor: pointer;
871 }
872
873 .sidebar-footer-link > ul,
874 #vz-chart-source > ul,
875 #vz-chart-permissions > ul,
876 #vz-chart-settings > ul {
877 position: relative;
878 z-index: 10;
879 border-bottom: 1px solid #ddd;
880 }
881
882 #vz-chart-copyright {
883 bottom: 10px;
884 text-align: center;
885 }
886
887 #sidebar {
888 border-left: 1px solid #ddd;
889 background: #f3f3f3;
890 }
891
892 #vz-chart-permissions.open h2 {
893 position: absolute;
894 right: 6px;
895 bottom: 28px;
896 left: auto;
897 width: 50%;
898 text-align: right;
899 }
900
901 #vz-chart-settings.open h2 {
902 position: absolute;
903 bottom: 28px;
904 left: 6px;
905 }
906
907 #vz-chart-permissions .viz-group-header,
908 #vz-chart-settings.open .viz-group-header {
909 display: block;
910 }
911
912 #vz-chart-permissions .viz-group-header,
913 #vz-chart-settings .viz-group-header {
914 display: none;
915 }
916
917 .sidebar-footer-link.open h2 {
918 position: absolute;
919 bottom: 28px;
920 left: 20px;
921 }
922
923 .sidebar-footer-link.open .viz-group-header {
924 display: block;
925 }
926
927 .sidebar-footer-link .viz-group-header {
928 display: none;
929 }
930
931 #vz-csv-file-form,
932 #vz-one-time-import,
933 #vz-schedule-import,
934 .edit-data-content {
935 text-align: center;
936 }
937
938 #csv-file {
939 margin: 15px 0;
940 padding: 0;
941 }
942
943 .visualizer-input,
944 .visualizer-select {
945 width: 100%;
946 margin: 0 0 15px;
947 }
948
949 .viz-group .dashicons-lock {
950 display: none;
951 }
952
953 .only-pro-feature .dashicons-lock {
954 display: inline;
955 }
956
957 .viz-section-title .dashicons,
958 .viz-group-title .dashicons {
959 width: 18px;
960 height: 18px;
961 margin-left: 3px;
962 font-size: 18px;
963 }
964
965 .only-pro-feature input,
966 .only-pro-feature button,
967 .only-pro-feature select {
968 cursor: not-allowed !important;
969 pointer-events: none;
970 }
971
972 .only-pro-feature > div {
973 position: relative;
974 }
975
976 .only-pro-content {
977 position: absolute;
978 top: 0;
979 bottom: 0;
980 left: 0;
981 width: 100%;
982 opacity: 0;
983 background: rgba(253,253,253,0.9);
984 -webkit-transition: 0.5s ease;
985 transition: 0.5s ease;
986 }
987
988 .only-pro-feature:hover .only-pro-content {
989 opacity: 1;
990 }
991
992 .only-pro-container {
993 display: table;
994 width: 100%;
995 height: 100%;
996 }
997
998 .only-pro-inner {
999 display: table-cell;
1000 vertical-align: middle;
1001 }
1002
1003 .only-pro-content p {
1004 margin: 0 0 15px;
1005 font-size: 14px;
1006 font-weight: 700;
1007 }
1008
1009 .only-pro-content a {
1010 display: inline-block;
1011 padding: 7px 12px;
1012 color: #fff;
1013 background: #ff595e;
1014 font-weight: 600;
1015 text-decoration: none;
1016 text-transform: uppercase;
1017 -webkit-transition: 0.1s ease;
1018 transition: 0.1s ease;
1019 }
1020
1021 .only-pro-content a:hover {
1022 background: #ce484c;
1023 }
1024
1025 #sidebar::-webkit-scrollbar {
1026 width: 4px;
1027 }
1028
1029 #sidebar::-webkit-scrollbar-thumb {
1030 background: #999;
1031 }
1032
1033 span.viz-section-error {
1034 color: #ff000;
1035 }
1036
1037 #visualizer-error-manual {
1038 color: #ff595e;
1039 }
1040
1041 #vz-chart-permissions {
1042 width: 43%;
1043 }
1044
1045 #vz-chart-permissions {
1046 color: #ce484c;
1047 }
1048
1049 #vz-chart-permissions {
1050 right: 6px;
1051 bottom: 40px;
1052 width: 35%;
1053 }
1054
1055 #permissions-form .only-pro-feature > ul {
1056 position: relative;
1057 text-align: center;
1058 }
1059