PluginProbe
Chartify – WordPress Chart Plugin / 3.3.4
Chartify – WordPress Chart Plugin v3.3.4
3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 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.1.4 3.1.5 3.1.6 All 83 releases
chart-builder / admin / css / chart-builder-admin.css

chart-builder-admin.css in Chartify – WordPress Chart Plugin 3.3.4, at admin/css/chart-builder-admin.css

3,114 lines 69.4 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 * Pro features
3 * Start
4 */
5
6 html[dir="rtl"] body.rtl{
7 text-align: right;
8 }
9
10 #wpwrap{
11 background: #ffffff;
12 }
13
14 h1.wp-heading-inline.ays-chart-heading-inline-disable-padding-margin {
15 margin: 0px;
16 padding: 0px;
17 }
18
19 div .ays-chart-add-new-button-box a.ays-chart-add-new-button {
20 margin: 0px !important;
21 }
22
23 .only_pro{
24 position: relative;
25 padding: 10px 0 0 10px;
26 }
27 .pro_features{
28 position: absolute;
29 display: flex;
30 align-items: flex-end;
31 justify-content: flex-end;
32 padding-right: 20px;
33 width: 100%;
34 height: 100%;
35 background: rgba(0,0,0,.1);
36 z-index: 3;
37 top: 0;
38 left: 0;
39 }
40
41 .pro_features.centered {
42 align-items: center;
43 justify-content: center;
44 }
45
46 .pro_features p {
47 color: ghostwhite;
48 font-size: 20px;
49 box-sizing: border-box;
50 padding: 5px;
51 background: rgba(0,0,0,.2);
52 border-radius: 3px;
53 margin: 0;
54 }
55 .ays-accordion-data-main-wrap.only_pro .pro_features p {
56 font-size: 15px;
57 }
58 a.only_pro_lik,
59 .pro_features p a {
60 color: #f50057 !important;
61 font-weight: 700;
62 transition: all .3s ease-in;
63 }
64 a.only_pro_lik:hover,
65 .pro_features p a:hover{
66 color: #C51162 !important;
67 transition: all .3s ease-in;
68 }
69 .pro_features_inner_2{
70 position: absolute;
71 top: 0;
72 }
73
74 /*
75 * Pro features
76 * End
77 */
78
79
80 /* Sliding entrances */
81 @-webkit-keyframes slideInDown {
82 from {
83 -webkit-transform: translate3d(0, -100%, 0);
84 transform: translate3d(0, -100%, 0);
85 visibility: visible;
86 }
87
88 to {
89 -webkit-transform: translate3d(0, 0, 0);
90 transform: translate3d(0, 0, 0);
91 }
92 }
93 @keyframes slideInDown {
94 from {
95 -webkit-transform: translate3d(0, -100%, 0);
96 transform: translate3d(0, -100%, 0);
97 visibility: visible;
98 }
99
100 to {
101 -webkit-transform: translate3d(0, 0, 0);
102 transform: translate3d(0, 0, 0);
103 }
104 }
105 .animate__slideInDown {
106 -webkit-animation-name: slideInDown;
107 animation-name: slideInDown;
108 }
109
110 @-webkit-keyframes slideOutUp {
111 from {
112 -webkit-transform: translate3d(0, 0, 0);
113 transform: translate3d(0, 0, 0);
114 }
115
116 to {
117 visibility: hidden;
118 -webkit-transform: translate3d(0, -100%, 0);
119 transform: translate3d(0, -100%, 0);
120 }
121 }
122 @keyframes slideOutUp {
123 from {
124 -webkit-transform: translate3d(0, 0, 0);
125 transform: translate3d(0, 0, 0);
126 }
127
128 to {
129 visibility: hidden;
130 -webkit-transform: translate3d(0, -100%, 0);
131 transform: translate3d(0, -100%, 0);
132 }
133 }
134 .animate__slideOutUp {
135 -webkit-animation-name: slideOutUp;
136 animation-name: slideOutUp;
137 }
138
139 .animate__animated {
140 -webkit-animation-duration: 1s;
141 animation-duration: 1s;
142 }
143
144 /* .chart-add-new-bttn {
145 width: 118px;
146 height: 40px;
147 padding: 8px 14px;
148 font-size: 14px;
149 } */
150
151 .wrap.ays_charts_list_table .chart-add-new-button-new-design {
152 background: #2275EA;
153 border-color: #2275EA;
154 color: #ffffff;
155 border-radius: 8px;
156 padding: 10px 27px;
157 font-size: 13px;
158 }
159
160 .wrap.ays_charts_list_table .chart-add-new-button-new-design:hover {
161 background: #0f34e7;
162 }
163
164 /* .wrap.ays_charts_list_table .chart-add-new-button-new-design:active {
165 padding: 5px 27px;
166 } */
167
168 .wrap.ays_charts_list_table .chart-add-new-button-new-design img {
169 width: 10px;
170 margin-top: -2px;
171 margin-right: 5px;
172 }
173
174 .wrap.ays_charts_list_table .ays-chart-create-chart-video-box .chart-add-new-button-new-design {
175 padding: 10px 30px;
176 font-size: 16px;
177 }
178
179 .wrap.ays_charts_list_table .ays-chart-create-chart-video-box .chart-add-new-button-new-design:hover {
180 padding: 10px 30px;
181 /* text-decoration: unset; */
182 }
183
184 .ays_chart_small_hint_text_for_message_variables {
185 font-style: italic;
186 font-size: 11px;
187 color: gray;
188 }
189
190 .ays-chart-message-vars-box{
191 display: flex;
192 justify-content: flex-end;
193 flex-direction: column;
194 align-items: flex-end;
195 user-select: none;
196 }
197 .ays-chart-subtitle-main-box{
198 position: relative;
199 min-height: 27px;
200 word-break: break-word;
201 }
202 /* .ays-chart-subtitle-main-box .ays-subtitle .ays-subtitle-inner-charts-page{
203 padding: 10px 20px;
204 border: 1px solid #959595;
205 text-align: center;
206 border-radius: 35px;
207 cursor: pointer;
208 } */
209 /* .ays-chart-subtitle-main-box .ays-subtitle .ays-subtitle-inner-charts-page:hover{
210 background-color: lightgray;
211 } */
212 .ays-chart-open-charts-list {
213 cursor: pointer;
214 font-size: 20px;
215 color: #e84b0b;
216 padding: 3px;
217 }
218 .ays-chart-message-vars-box .ays-chart-message-vars-icon,
219 .ays-chart-charts-box .ays-chart-charts-icon{
220 display: flex;
221 width: 150px;
222 justify-content: space-between;
223 cursor: pointer;
224 margin-bottom: 15px;
225 }
226 .ays-chart-message-vars-box .ays-chart-message-vars-icon span,
227 .ays-chart-charts .ays-chart-charts-icon span{
228 font-size: 13px;
229 }
230 .ays-chart-message-vars-data,.ays-chart-charts-data{
231 position: absolute;
232 top: 27px;
233 /* text-align: center; */
234 max-height: 350px;
235 overflow: auto scroll;
236 z-index: 9999;
237 background-color: #ffff;
238 border-radius: 5px;
239 /* border: 1px solid grey; */
240 width: 250px;
241 display: none;
242 box-shadow: 0 0px 0px 0.5px #00000087;
243 }
244 .ays-chart-charts-data{
245 top: 36px;
246 }
247 .ays-chart-message-vars-data::-webkit-scrollbar,.ays-chart-charts-data::-webkit-scrollbar {
248 width: 0.2em;
249 }
250 .ays-chart-message-vars-data::-webkit-scrollbar-track, .ays-chart-charts-data::-webkit-scrollbar-track{
251 box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
252 }
253 .ays-chart-message-vars-data::-webkit-scrollbar-thumb, .ays-chart-charts-data::-webkit-scrollbar-thumb{
254 background-color: darkgrey;
255 outline: 1px solid slategrey;
256 border-radius: 5px;
257 }
258 .ays-chart-message-vars-data .ays-chart-message-vars-each-data,
259 .ays-chart-charts-data .ays-chart-charts-each-data{
260 cursor: pointer;
261 }
262 .ays-chart-message-vars-data .ays-chart-message-vars-each-data-label:not(:last-child) .ays-chart-message-vars-each-data,
263 .ays-chart-charts-data .ays-chart-message-vars-each-data-label:not(:last-child) .ays-chart-charts-each-data{
264 border-bottom: 1px solid #d5d5d559;
265 }
266 .ays-chart-message-vars-data .ays-chart-message-vars-each-data{
267 padding: 8px 0 8px 8px;
268 }
269 .ays-chart-charts-data .ays-chart-charts-each-data a{
270 display: inline-block;
271 width: 100%;
272 height: 100%;
273 padding: 10px 0 10px 10px;
274 text-decoration: none;
275 }
276 .ays-chart-charts-data .ays-chart-charts-each-data a:hover{
277 background-color: #E8F0FF;
278 }
279 .ays-chart-message-vars-data .ays-chart-message-vars-each-data-label .ays-chart-message-vars-each-data:hover{
280 background-color: #f2f5fb;
281 }
282 .ays-chart-message-vars-each-data-checker:checked + div.ays-chart-message-vars-each-data{
283 background-color: #e1e1e1;
284 }
285 .ays-chart-message-vars-each-data-label{
286 display: block;
287 margin: 0;
288 }
289
290 .ays-chart-table-actions-row {
291 display: flex;
292 justify-content: space-between;
293 }
294
295 .ays-chart-table-actions-row-section {
296 display: flex;
297 justify-content: flex-start;
298 align-items: center;
299 gap: 30px;
300 margin-bottom: 20px;
301 padding-left: 20px;
302 }
303
304 .ays-chart-table-actions-row ul.pagination {
305 max-width: 300px;
306 display: flex;
307 flex-wrap: wrap;
308 }
309
310 .ays-chart-search-block {
311 height: fit-content;
312 margin-right: 20px;
313 }
314
315 button#ays-chart-search, button#ays-chart-filter, button#ays-chart-filter-clear, button#ays-chart-filter-bottom, button#ays-chart-filter-clear-bottom {
316 cursor: pointer;
317 background: #FFFFFF;
318 border: 1px solid #EBECF0;
319 box-sizing: border-box;
320 box-shadow: 0 1px 1px rgb(0 0 0 / 6%);
321 color: #061938;
322 border-radius: 5px;
323 padding: 4px 15px;
324 /* width: 90px; */
325 font-size: 16px;
326 margin-left: 5px;
327 }
328
329 /* .ays-chart-delete-button {
330 margin-bottom: 20px;
331 padding-left: 20px;
332 } */
333
334 .ays-chart-filter-section {
335 display: flex;
336 align-items: center;
337 flex-wrap: wrap;
338 gap: 5px;
339 }
340
341 .ays-chart-table-actions-row-section .ays-chart-filter-section>select#ays-chart-filter-select
342 .ays-chart-table-actions-row-section .ays-chart-filter-section>select#ays-chart-filter-select-bottom {
343 border: 1px solid #EBECF0 !important;
344 box-shadow: 0 1px 1px rgb(0 0 0 / 6%);
345 color: #061938;
346 border-radius: 5px;
347 padding: 2px 10px;
348 width: 130px;
349 font-size: 14px;
350 }
351
352 #ays-chart-filter-author+span.select2.select2-container,
353 #ays-chart-filter-author-bottom+span.select2.select2-container {
354 /* width: 130px !important; */
355 height: 34px !important;
356 font-size: 14px;
357 /* margin-left: 5px; */
358 }
359 #ays-chart-filter-author+span.select2.select2-container .select2-selection
360 #ays-chart-filter-author-bottom+span.select2.select2-container .select2-selection {
361 height: 100% !important;
362 border: 1px solid #EBECF0 !important;
363 }
364 #ays-chart-filter-author+span.select2.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
365 #ays-chart-filter-author-bottom+span.select2.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered {
366 line-height: 34px!important;
367 }
368 #ays-chart-filter-author+span.select2.select2-container.select2-container--default .select2-selection--single,
369 #ays-chart-filter-author-bottom+span.select2.select2-container.select2-container--default .select2-selection--single,
370 #ays-chart-filter-author+span.select2.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow,
371 #ays-chart-filter-author-bottom+span.select2.select2-container.select2-container--default .select2-selection--single .select2-selection__arrow {
372 height: 34px!important;
373 }
374 #ays-chart-filter-select, #ays-chart-filter-select-bottom,
375 #ays-chart-order-by, #ays-chart-order-by-bottom,
376 #ays-chart-order, #ays-chart-order-bottom,
377 #ays-chart-filter-date, #ays-chart-filter-date-bottom,
378 #ays-chart-filter-chart-source, #ays-chart-filter-chart-source-bottom,
379 #ays-chart-filter-source, #ays-chart-filter-source-bottom {
380 height: 34px;
381 }
382
383 @media (max-width: 767px) {
384 .chart-list-table-container .ays-chart-table-actions-row {
385 flex-direction: column-reverse;
386 }
387 .chart-list-table-container .ays-chart-table-actions-row .ays-chart-table-actions-row-section {
388 flex-direction: column-reverse;
389 padding-left: 0;
390 gap: 20px;
391 }
392 .chart-list-table-container .ays-chart-table-actions-row .ays-chart-filter-section {
393 margin-top: 5px;
394 gap: 5px;
395 }
396 .chart-list-table-container .ays-chart-table-actions-row .ays-chart-search-block {
397 text-align: center;
398 }
399 }
400
401 .ays-chart-delete-button button#ays-chart-bulk-delete,
402 .ays-chart-delete-button button#ays-chart-bulk-delete-bottom {
403 cursor: pointer;
404 background: #FFFFFF;
405 border: 1px solid #EBECF0;
406 box-sizing: border-box;
407 box-shadow: 0 1px 1px rgb(0 0 0 / 6%);
408 color: #061938;
409 border-radius: 5px;
410 padding: 4px 10px;
411 display: flex;
412 justify-content: space-evenly;
413 align-items: center;
414 width: 100px;
415 font-size: 16px;
416 }
417 .ays-chart-delete-button button#ays-chart-bulk-delete[disabled],
418 .ays-chart-delete-button button#ays-chart-bulk-delete-bottom[disabled] {
419 cursor: not-allowed;
420 opacity: 0.5;
421 border: 1px solid #DFE1E6;
422 box-shadow: 0 1px 1px rgb(0 0 0 / 6%);
423 color: #253858;
424 }
425
426 .chart-list-table-container {
427 padding: 20px 0 3px;
428 background-color: #ffffff;
429 border-radius: 5px;
430 box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 25%);
431 color: #253858;
432 }
433 .chart-list-table-container form {
434 overflow: auto;
435 }
436
437 .chart-list-table th, .chart-list-table td {
438 border-bottom: none;
439 }
440 .chart-list-table {
441 border-collapse: collapse;
442 /* border: 1px solid #ccc; */
443 border-radius: 5px;
444 width: 100%;
445 /* box-shadow: 0px 1px 2px rgb(0 0 0 / 25%); */
446 /* padding-bottom: 18px; */
447 }
448 .chart-list-table tbody tr {
449 box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
450 /* margin-bottom: 6px!important; */
451 border-top: 1px solid transparent;
452 /* border-bottom: 1px solid transparent; */
453 }
454
455 .ays-chart-tr-selected {
456 background-color: #f0f8ff !important;
457 border-top: 1px solid #bce0ff !important;
458 /* border-bottom: 1px solid #bce0ff !important; */
459 }
460
461 .chart-list-table thead {
462 background-color: #f1f1f1;
463 }
464 .chart-list-table thead th {
465 font-weight: normal;
466 }
467 .chart-list-table tbody {
468 background-color: #fff;
469 }
470 .chart-list-table tbody tr:hover {
471 background-color: #f1f1f1;
472 transition: 50ms;
473 }
474 /* .chart-list-table tr td {
475 border: 1px solid #ccc;
476 } */
477 td.column-title {
478 /* width: 25%; */
479 height: 60px;
480 min-height: 60px;
481 min-width: 215px;
482 padding: 8px;
483 display: flex;
484 justify-content: space-between;
485 align-items: center;
486 }
487 td.column-title strong {
488 margin: 0;
489 }
490 td.column-type p {
491 width: fit-content;
492 }
493 td.column-shortcode {
494 width: 20%;
495 }
496 td.column-status,
497 td.column-date {
498 width: 10%;
499 }
500 .chart-list-table td {
501 vertical-align: middle;
502 }
503 .chart-list-table th:not(.column-title), .chart-list-table td:not(.column-title) {
504 text-align: center;
505 }
506
507 th.column-title {
508 width: 30%;
509 }
510 .chart-list-table .column-cb {
511 text-align: center;
512 }
513 .chart-list-table .chart-list-table-actions-row {
514 display: none;
515 /* visibility: hidden; */
516 gap: 5px;
517 margin: 5px 0;
518 /* height: 20px; */
519 }
520
521 .chart-list-table .chart-list-table-actions-row .chart-list-table-action-link {
522 display: inline-block;
523 }
524 .column-type>p {
525 margin: 0 auto;
526 width: 65%;
527 text-align: left;
528 }
529
530 .chart-list-table .form-check-input:checked[type=checkbox] {
531 --bs-form-check-bg-image: url('../images/icons/check-mark.svg');
532 }
533
534 .ays-chart-shortcode-container {
535 width: 190px;
536 background-color: #f4f5f7;
537 border-radius: 5px;
538 overflow: hidden;
539 display: flex;
540 justify-content: space-between;
541 box-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
542 margin: auto;
543 }
544 .ays-chart-copy-image {
545 width: 32px;
546 height: auto;
547 display: flex;
548 justify-content: center;
549 align-items: center;
550 background-color: #ebecf0;
551 cursor: pointer;
552 border-right: 1px solid #dddddf;
553 }
554 .ays-chart-shortcode-input {
555 width: 150px;
556 }
557 .ays-chart-shortcode-container input {
558 border: none!important;
559 background-color: #f4f5f7;
560 width: 100%;
561 text-align: center;
562 }
563 .ays-chart-shortcode-container input[type=text]:focus {
564 border: none!important;
565 box-shadow: none!important;
566 background-color: #f4f5f7!important;
567 }
568
569 .link-danger,
570 .link-danger * {
571 color: #b32d2e;
572 }
573 .link-danger:hover,
574 .link-danger *:hover {
575 color: #b32d2e;
576 }
577
578 .ays-chart-subtitle-main-box{
579 /* position: relative; */
580 min-height: 27px;
581 word-break: break-word;
582 }
583
584 .ays-tab-content {
585 animation: fadeEffect 1s;
586 display: none;
587 }
588 .ays-tab-content-active {
589 display: block;
590 }
591 @keyframes fadeEffect {
592 from {opacity: 0;}
593 to {opacity: 1;}
594 }
595 .nav-tab-wrapper .nav-tab:focus{
596 box-shadow: none;
597 outline: none;
598 }
599
600 .nav-tab-wrapper.ays-chart-nav-tab-wrapper-chart {
601 display: flex;
602 align-items: center;
603 justify-content: flex-start;
604 flex-flow: row;
605 position:sticky;
606 top:35px;
607 }
608
609 .nav-tab.ays-chart-nav-tab-chart {
610 width: auto;
611 height: 43px;
612 background-color: #ffffff;
613 border: 0;
614 border-bottom: 2px solid #c4c4c4;
615 margin: 0;
616 flex-grow: 1;
617 display: flex;
618 align-items: center;
619 justify-content: center;
620 font-family: Arial, serif;
621 font-size: 17px;
622 color: #c4c4c4;
623 text-decoration: none solid rgb(196, 196, 196);
624 }
625
626 .nav-tab.ays-chart-nav-tab-chart.nav-tab-active {
627 color: #008cff;
628 border-bottom-color: #008cff;
629 }
630
631 .ays-chart-nav-tab-chart.nav-tab-active:focus:active {
632 border-bottom: 2px solid #008cff;
633 color: #008cff;
634 }
635
636 .ays-chart-nav-tab-chart:focus:active {
637 border-bottom: 2px solid #c4c4c4;
638 color: #c4c4c4;
639 }
640
641 .tooltip {
642 text-align: left !important;
643 position: absolute !important;
644 z-index: 9999;
645 }
646 .tooltip > .tooltip-inner {
647 position: relative !important;
648 width: max-content !important;
649 max-width: 300px !important;
650 text-align: justify!important;
651 box-shadow: 0px 0px 10px #fff;
652 }
653 .tooltip > .arrow {
654 left: calc(50% + 28px) !important;
655 }
656 .tooltip > .tooltip-inner img {
657 max-width: 100%;
658 height: 100%;
659 object-fit: contain;
660 }
661
662 .ays_help {
663 position: relative;
664 font-size: 12px;
665 color: dodgerblue !important;
666 cursor: help;
667 }
668
669 .ays_help_ul {
670 padding-left: 16px;
671 list-style-type: initial;
672 }
673
674 ul.ays_tooltip_ul {
675 padding-left: 10px;
676 list-style-type: circle;
677 list-style-position: inside;
678 }
679
680 ul.ays_tooltip_ul_inside {
681 padding-left: 30px;
682 padding-top: 10px;
683 list-style-type: circle;
684 list-style-position: inside;
685 }
686
687 .swal2-container {
688 z-index: 9999999999!important;
689 }
690
691
692 div.ays-top-menu-wrapper {
693 position: relative;
694 display: flex;
695 align-items: center;
696 }
697 .ays_menu_left,
698 .ays_menu_right {
699 position: absolute;
700 cursor: pointer;
701 font-size: 16px;
702 height: 80%;
703 display: none;
704 align-items: center;
705 bottom: 0;
706 z-index: 3;
707 }
708 .ays_menu_left {
709 left: -10px;
710 padding-right: 20px;
711 padding-left: 2px;
712 }
713 .ays_menu_right {
714 right: -10px;
715 padding-left: 20px;
716 padding-right: 2px;
717 }
718
719
720 blockquote.error_message {
721 color: crimson;
722 font-size: 16px;
723 font-style: italic;
724 border-color: crimson;
725 }
726
727 blockquote.error_message a {
728 color: brown;
729 font-weight: bold;
730 }
731
732 blockquote {
733 font-size: 14px;
734 width: 100%;
735 margin: 0 auto;
736 font-style: italic;
737 color: #555555;
738 padding: 8px 15px 8px 15px;
739 border-left: 5px solid #ffb700c0;
740 line-height: 1.6;
741 position: relative;
742 background: #ededed;
743 }
744
745 blockquote::before {
746 content: none;
747 }
748
749 blockquote::after {
750 content: "";
751 }
752
753 blockquote span {
754 display: block;
755 color: #333333;
756 font-style: normal;
757 font-weight: bold;
758 margin-top: 1em;
759 }
760
761 .ays-chart-type-info-box .ays-chart-type-info-box-text {
762 font-size: 14px;
763 font-style: italic;
764 text-transform: capitalize;
765 }
766
767 .ays-chart-type-info-box{
768 margin-top: 10px;
769 }
770
771 .ays-chart-charts-main-container {
772 max-width: 100%;
773 margin: auto;
774 overflow: hidden;
775 }
776
777 .ays-chart-charts-main-container#ays-chart-org_chart {
778 overflow: auto;
779 padding: 7px;
780 }
781
782 .ays-chart-charts-change-type-container {
783 display: flex;
784 flex-wrap: wrap;
785 justify-content: flex-end;
786 align-items: center;
787 gap: 10px;
788 padding: 10px;
789 }
790
791 .ays-chart-charts-change-type-type {
792 background-color: #e7e7e7;
793 padding: 3px;
794 border-radius: 5px;
795 }
796
797 .ays-chart-charts-change-type-type img {
798 cursor: pointer;
799 }
800
801 /* Manual chart data type start */
802
803 .ays-chart-chart-source-data-main{
804 width: 100%;
805 max-width: 100%;
806 }
807
808 .ays-chart-chart-source-data-main .ays-chart-chart-source-data-input-box{
809 padding: 10px;
810 /* border-right: 1px solid #B8B8B8; */
811 }
812 .ays-chart-chart-source-data-input-box.ays-chart-chart-source-data-input-number,
813 .ays-chart-chart-source-data-edit-block[data-source-id="0"] .ays-chart-chart-source-title-box:not(:nth-child(2)) {
814 border-left: 1px solid #B8B8B8;
815 /* width: 30%; */
816 max-width: 120px;
817 }
818 .ays-chart-empty-data-table-cell {
819 height: 77.11px;
820 padding: 0 33px;
821 background: #efefef;
822 /* position: sticky;
823 left: 0;
824 z-index: 1; */
825 }
826
827 .ays-chart-chart-source-title-box {
828 text-align: center;
829 padding-top: 0 !important;
830 }
831
832 .ays-chart-chart-source-title-box:nth-child(2), .ays-chart-chart-source-data-name-input-box {
833 background: #ffffff;
834 width: 100%;
835 /* position: sticky;
836 left: 30px;
837 z-index: 1; */
838 }
839
840 .ays-chart-chart-source-data-input-number>input,
841 .ays-chart-chart-source-data-edit-block[data-source-id="0"] .ays-chart-chart-source-title-box:not(:nth-child(2))>input {
842 width: 100%;
843 min-width: 90px;
844 max-width: 100%;
845 }
846
847 .ays-chart-chart-source-data-edit-block[data-source-id="0"]>div {
848 border-bottom: 1px solid #B8B8B8;
849 background-color: #efefef;
850 }
851
852 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box{
853 padding: 10px;
854 cursor: pointer;
855 background: #ffffff;
856 /* position: sticky;
857 left: 0;
858 z-index: 1; */
859 }
860
861 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box{
862 padding: 10px;
863 cursor: pointer;
864 }
865
866 .ays-chart-chart-source-data-remove-block:focus {
867 outline: none !important;
868 }
869
870 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box .ays-chart-chart-source-data-remove-block {
871 width: 10px;
872 }
873
874 .ays-chart-chart-source-data-content-container {
875 display: flex;
876 justify-content: left;
877 align-items: flex-start;
878 }
879 .ays-chart-chart-source-data-content {
880 /* border-top-left-radius: 8px; */
881 /* border-bottom-left-radius: 8px; */
882 /* border-left-width: 5px; */
883 /* border-left-style: solid; */
884 /* border-right: 1px solid #B8B8B8; */
885 border: 1px solid #B8B8B8;
886 width: 80%;
887 overflow: auto;
888 }
889
890 .ays-chart-chart-source-data-edit-block:nth-of-type(even) {
891 background-color: #fff;
892 }
893 .ays-chart-chart-source-data-edit-block {
894 display: flex;
895 align-items: center;
896 /* justify-content: space-between; */
897 }
898 .ays-chart-chart-source-data-input-box:not(.ays-chart-chart-source-data-input-number)>input {
899 min-width: 100px;
900 width: 100%;
901 }
902 .ays-chart-chart-source-data-move-row {
903 cursor: move;
904 padding: 10px;
905 }
906 .ays-chart-chart-source-title-input:first-child() {
907 width: 100%;
908 min-width: 100px;
909 }
910 .ays-chart-chart-source-data-titles-box-item {
911 display: flex;
912 justify-content: center;
913 align-items: center;
914 gap: 5px;
915 min-width: 90px;
916 }
917 .ays-chart-chart-source-data-sort {
918 cursor: pointer;
919 }
920
921 /* .ays-chart-chart-source-data-edit-block:first-child {
922 border-top: 1px solid #B8B8B8;
923 }
924
925 .ays-chart-chart-source-data-edit-block:last-child {
926 border-bottom: 1px solid #B8B8B8;
927 } */
928
929 .ays-chart-chart-source-data-main .ays-chart-icons-box img,
930 .ays-chart-chart-source-data-main .ays-chart-icons-box.ays-chart-add-new-row-box,
931 .ays-chart-chart-source-data-main .ays-chart-icons-box.ays-chart-add-new-column-box {
932 cursor: pointer;
933 }
934
935 .ays-chart-icons-box.ays-chart-add-new-row-box,
936 .ays-chart-icons-box.ays-chart-add-new-column-box {
937 font-size: 15px;
938 border: 1px solid #B8B8B8;
939 width: fit-content;
940 padding: 7px;
941 margin-top: 5px;
942 border-radius: 5px;
943 }
944 .ays-chart-icons-box.ays-chart-add-new-column-box {
945 margin-top: 0;
946 margin-left: 5px;
947 }
948
949 /* Manual chart data type end */
950
951 /* Quiz maker integration start */
952
953 .ays-chart-select-quiz-maker-quiz-container {
954 margin-top: 15px;
955 display: none;
956 }
957
958 #ays-chart-quiz-maker-error {
959 color: #f00;
960 }
961 #ays-chart-quiz-maker-success {
962 color: #009a00;
963 }
964
965 #select2-ays-chart-select-quiz-maker-data-query-results .select2-results__option:nth-child(n+8) {
966 color: #939393db;
967 cursor: context-menu;
968 }
969
970 #select2-ays-chart-select-quiz-maker-data-query-results .select2-results__option:nth-child(n+8).select2-results__option--highlighted {
971 background-color: #ffffff;
972 }
973
974 #ays-chart-quiz-maker-form .select2.select2-container{
975 width: 100%!important;
976 }
977
978 .ays-chart-select-quiz-maker-data-query-container {
979 display: flex;
980 gap: 3px;
981 align-items: center;
982 }
983
984 /* Quiz maker integration end */
985
986 /* WOOCOMMERCE INTEGRATION START*/
987
988 .ays-chart-woocommerce-datas-query-container{
989 display:flex;
990 gap:10px;
991 align-items:center;
992 }
993
994 .ays-chart-woocommerce-datas-error {
995 color: #f00;
996 }
997 .ays-chart-woocommerce-datas-success {
998 color: #009a00;
999 }
1000
1001 /* WOOCOMMERCE INTEGRATION END*/
1002
1003 /*.ays-chart-nav-tab-wrapper.nav-tab-wrapper {*/
1004 /* border-bottom: none;*/
1005 /* padding-top: 0;*/
1006 /* background: #ffffff;*/
1007 /* margin-bottom: 10px;*/
1008 /*}*/
1009 /*.ays-chart-nav-tab.nav-tab-active, .ays-chart-nav-tab.nav-tab-active:focus, .ays-chart-nav-tab.nav-tab-active:focus:active, .ays-chart-nav-tab.nav-tab-active:hover {*/
1010 /* border-bottom: 2px solid #008cff;*/
1011 /* background: #ffffff;*/
1012 /* color: #008cff;*/
1013 /*}*/
1014 /*.ays-chart-nav-tab:focus, .ays-chart-nav-tab:hover {*/
1015 /* background: #ffffffbe;*/
1016 /*}*/
1017 /*.ays-chart-nav-tab-wrapper>.ays-chart-nav-tab.nav-tab-active {*/
1018 /* border-bottom: 2px solid #008cff;*/
1019 /* background: #ffffff;*/
1020 /* color: #008cff;*/
1021 /*}*/
1022 /*.ays-chart-nav-tab-wrapper>.ays-chart-nav-tab {*/
1023 /* border: none;*/
1024 /* border-bottom: 2px solid #c4c4c4;*/
1025 /* margin-left: 0;*/
1026 /* padding: 7px 0;*/
1027 /* text-align: center;*/
1028 /* font-size: 16px;*/
1029 /* background: #ffffff;*/
1030 /* color: #c4c4c4;*/
1031 /* width: 50%;*/
1032 /* display: inline-block;*/
1033 /*}*/
1034
1035 /* Settings tab start */
1036
1037 /*.ays-tab-content#settings {*/
1038 /* border-left: 2px solid #008cff;*/
1039 /*}*/
1040 .ays-chart-settings-tab-section {
1041 display: flex;
1042 justify-content: flex-start;
1043 align-items: center;
1044 background-color: #ffffff;
1045 padding: 10px 0 10px 5px;
1046 cursor: pointer;
1047 }
1048 .ays-chart-tab-subtitle {
1049 margin: 0 0 0 5px;
1050 font-size: 13px;
1051 }
1052 .ays-chart-options-section-title {
1053 font-size: 16px;
1054 font-weight: bold;
1055 text-indent: 20px;
1056 }
1057 .ays-chart-settings-tab-section-collapsed {
1058 display: none;
1059 padding: 10px 20px;
1060 background-color: #ffffff;
1061 }
1062 /* .ays-chart-options-section:not(:last-child) {
1063 margin-bottom: 10px;
1064 } */
1065 .ays-chart-options-section {
1066 width: 100%;
1067 height: fit-content;
1068 border-radius: 10px;
1069 background-color: #f8f8f8;
1070 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1071 display: flex;
1072 justify-content: space-between;
1073 align-items: center;
1074 padding: 10px 15px;
1075 }
1076 .ays-chart-animation-options-section {
1077 height: fit-content;
1078 padding: 10px 15px;
1079 }
1080 .ays-chart-option-title>label {
1081 font-size: 14px;
1082 margin-bottom: 0;
1083 }
1084 .ays-chart-option-input {
1085 display: flex;
1086 align-items: center;
1087 justify-content: flex-end;
1088 /* width: 65%; */
1089 }
1090 .ays-chart-option-input>.ays-chart-option-text-input {
1091 width: 100%;
1092 height: 30px!important;
1093 padding: 0px 8px;
1094 border: none;
1095 background-color: #ffffff;
1096 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1097 margin-top: 0!important;
1098 }
1099 .ays-chart-option-input>.ays-chart-option-textarea-input {
1100 resize: none!important;
1101 width: 100%;
1102 height: 70px!important;
1103 padding: 5px 8px;
1104 border: none;
1105 background-color: #ffffff;
1106 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1107 margin-top: 0!important;
1108 }
1109 div.ays-chart-options-section input[type="color"].ays-chart-option-color-picker {
1110 height: 30px;
1111 width: 50px;
1112 padding: 0;
1113 border-radius: 4px;
1114 border: 0!important;
1115 }
1116 .ays-chart-option-input input::placeholder {
1117 font-size: 13px;
1118 color: #b3b3b3;
1119 }
1120
1121 .ays-chart-option-desc-box {
1122 border-radius: 4px;
1123 background-color: #ffffff;
1124 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1125 margin-left: 10px;
1126 width: 30px;
1127 height: 30px;
1128 font-weight: bold;
1129 font-size: 15px;
1130 color: #b3b3b3;
1131 text-align: center;
1132 line-height: 28px;
1133 }
1134
1135 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select {
1136 border-radius: 4px;
1137 background-color: #ffffff;
1138 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1139 margin-left: 10px;
1140 margin-top: 0;
1141 width: 60px;
1142 }
1143 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select:hover {
1144 background-color: #f0f0f0;
1145 }
1146 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select:focus {
1147 outline: none !important;
1148 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%) !important;
1149 }
1150
1151 /* .ays-chart-option-input>span {
1152 font-size: 18px;
1153 font-weight: bold;
1154 color: #008cff;
1155 } */
1156
1157 .ays-chart-range-slider input[type="range"] {
1158 appearance: none!important;
1159 -webkit-appearance: none!important;
1160 margin: 0 6px;
1161 width: 100%;
1162 height: 2px;
1163 background-color: #666666;
1164 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #008cff), color-stop(100%, #008cff));
1165 background-size: 50% 100%;
1166 background-repeat: no-repeat;
1167 border: none;
1168 outline: none;
1169 }
1170 .ays-chart-range-slider input[type="range"]::-webkit-slider-thumb {
1171 appearance: none!important;
1172 -webkit-appearance: none!important;
1173 width: 10px;
1174 height: 10px;
1175 background: #008cff;
1176 border: 2px solid #008cff;
1177 border-radius: 50%;
1178 cursor: pointer;
1179 }
1180 .ays-chart-range-slider {
1181 position: relative;
1182 }
1183 #ays-chart-range-value {
1184 position: absolute;
1185 top: -50%;
1186 left: 89px;
1187 display: none;
1188 }
1189 #ays-chart-range-value span{
1190 display: block;
1191 width: fit-content;
1192 height: fit-content;
1193 background: transparent;
1194 color: #008cff;
1195 font-size: 12px;
1196 font-weight: bold;
1197 }
1198
1199 .ays-chart-option-input>.ays-chart-option-select-input {
1200 width: 100%;
1201 height: 30px;
1202 line-height: 28px;
1203 }
1204
1205 select.ays-chart-option-select-input.form-select {
1206 max-width: 100%;
1207 }
1208
1209 .ays-chart-input-align-right {
1210 text-align: right;
1211 display: flex;
1212 justify-content: flex-end;
1213 align-items: center;
1214 }
1215 .ays-chart-toggle-switch-switch {
1216 position: relative;
1217 display: inline-block;
1218 width: 36px;
1219 height: 20px;
1220 }
1221 .ays-chart-toggle-switch-switch .ays-chart-toggle-switch {
1222 opacity: 0;
1223 width: 0;
1224 height: 0;
1225 }
1226 .ays-chart-toggle-switch-slider {
1227 position: absolute;
1228 cursor: pointer;
1229 top: 0;
1230 left: 0;
1231 right: 0;
1232 bottom: 0;
1233 background-color: #cccccc;
1234 -webkit-transition: .4s;
1235 transition: .4s;
1236 }
1237 .ays-chart-toggle-switch-slider:before {
1238 position: absolute;
1239 content: "";
1240 height: 18px;
1241 width: 18px;
1242 left: 1px;
1243 bottom: 1px;
1244 background-color: white;
1245 -webkit-transition: .4s;
1246 transition: .4s;
1247 }
1248 .ays-chart-toggle-switch:checked + .ays-chart-toggle-switch-slider {
1249 background-color: #008cff;
1250 }
1251 .ays-chart-toggle-switch:focus + .ays-chart-toggle-switch-slider {
1252 box-shadow: 0 0 1px #008cff;
1253 }
1254 .ays-chart-toggle-switch:checked + .ays-chart-toggle-switch-slider:before {
1255 -webkit-transform: translateX(16px);
1256 -ms-transform: translateX(16px);
1257 transform: translateX(16px);
1258 }
1259 .ays-chart-toggle-switch-slider.ays-chart-toggle-switch-round {
1260 border-radius: 34px;
1261 }
1262 .ays-chart-toggle-switch-slider.ays-chart-toggle-switch-round:before {
1263 border-radius: 50%;
1264 }
1265
1266 /* Settings tab end */
1267
1268
1269
1270 /*
1271 ==========================================
1272 Settings page styles
1273 ==========================================
1274 */
1275 .ays-settings-wrapper {
1276 display: flex;
1277 }
1278 .ays-settings-wrapper .nav-tab-wrapper {
1279 display: flex;
1280 flex-direction: column;
1281 min-width: 150px;
1282 margin-right: 15px;
1283 border-bottom: none;
1284 }
1285 .ays-settings-wrapper .nav-tab-wrapper .nav-tab {
1286 display: block;
1287 width: 100%;
1288 border: 1px solid #ccc;
1289 margin: 0;
1290 float: none !important;
1291 }
1292 .ays-settings-wrapper .nav-tab-wrapper .nav-tab:last-child {
1293 border-bottom: 1px solid #ccc;
1294 }
1295 .ays-settings-wrapper .ays-chart-tabs-wrapper {
1296 width: 100%;
1297 border-left: 1px solid #ccc;
1298 padding-left: 15px;
1299 }
1300 .ays-settings-wrapper .ays-chart-tabs-wrapper p.ays-subtitle {
1301 margin-top: 0;
1302 }
1303
1304 .go_back{
1305 color: black;
1306 margin-right: 10px;
1307 }
1308
1309 .chart_div {
1310 /*width: 100%;
1311 height: 500px;*/
1312 margin: auto;
1313 }
1314
1315 .ays-tab-content fieldset,
1316 .ays-settings-wrapper fieldset {
1317 border: 1px solid #aaa;
1318 padding: 10px;
1319 }
1320
1321 .ays-tab-content legend,
1322 .ays-settings-wrapper legend {
1323 width: auto;
1324 padding: 0 5px;
1325 }
1326
1327 .ays-settings-wrapper legend {
1328 float: none;
1329 }
1330
1331 .ays-tab-content legend h5,
1332 .ays-settings-wrapper legend h5 {
1333 display: inline-block;
1334 margin-left: 10px;
1335 }
1336
1337 .ays_integration_logo {
1338 width: 50px;
1339 height: auto;
1340 vertical-align: middle !important;
1341 }
1342
1343
1344 p.ays-subtitle{
1345 margin-top: 20px;
1346 font-size: 18px;
1347 font-weight: 500;
1348 display:flex;
1349 gap:20px;
1350 align-items: center;
1351 }
1352
1353 p.submit{
1354 display: inline;
1355 margin-right: 10px;
1356 }
1357
1358 .button.ays-button {
1359 margin: 0;
1360 margin-left: 10px;
1361 }
1362
1363 .w-100 {
1364 width: 100px;
1365 }
1366
1367 .display_none {
1368 display: none !important;
1369 }
1370 .display_none_not_important {
1371 display: none;
1372 }
1373 .display_block {
1374 display: block !important;
1375 }
1376 .shortcode.column-shortcode input {
1377 width: 100%;
1378 }
1379
1380
1381 /*
1382 * Select2
1383 */
1384 .select2 {
1385 display: inline-block!important;
1386 z-index: 0 !important;
1387 }
1388 #quest_cat_container .select2 {
1389 display: block!important;
1390 }
1391
1392
1393 .select2-selection.select2-selection--single{
1394 height: 40px!important;
1395 border: 1px solid #ddd!important;
1396 box-shadow: inset 0 1px 2px rgba(0,0,0,.07)!important;
1397 }
1398
1399 .select2-container--default .select2-selection--single .select2-selection__rendered {
1400 line-height: 35px!important;
1401 }
1402
1403 .select2-container--default .select2-selection--single .select2-selection__arrow {
1404 height: 40px!important;
1405 }
1406
1407 .select2.select2-container{
1408 width: 200px!important;
1409 }
1410
1411 .ays-chart-general-settings .select2.select2-container{
1412 width: 100%!important;
1413 }
1414
1415 /*
1416 * Select2 multiple
1417 */
1418
1419 .select2-selection--multiple {
1420 font-size: 16px;
1421 min-height: 40px !important;
1422 border-radius: 4px;
1423 margin-top: -5px;
1424 min-width: 150px;
1425 border-color: #ddd;
1426 }
1427
1428 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1429 border-color: #5b9dd9;
1430 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1431 outline: 2px solid transparent;
1432 }
1433
1434 .select2.select2-container {
1435 width: 100%;
1436 }
1437
1438 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1439 margin-top: 1px !important;
1440 padding: 0 5px !important;
1441 margin-bottom: 8px !important;
1442 }
1443
1444 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1445 overflow: hidden;
1446 padding-top: 5px;
1447 }
1448
1449 .select2-selection--single {
1450 height: 100% !important;
1451 }
1452 .select2-selection__rendered{
1453 word-wrap: break-word !important;
1454 text-overflow: inherit !important;
1455 white-space: normal !important;
1456 }
1457 /*
1458 * Select2 multiple
1459 */
1460
1461 .select2-selection--multiple {
1462 font-size: 16px;
1463 min-height: 40px !important;
1464 border-radius: 4px;
1465 margin-top: -5px;
1466 min-width: 150px;
1467 border-color: #ddd;
1468 }
1469
1470 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1471 border-color: #5b9dd9;
1472 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1473 outline: 2px solid transparent;
1474 }
1475
1476 /* .select2.select2-container {
1477 width: 100%!important;
1478 } */
1479 .select2-container--default .select2-selection--multiple {
1480 min-height: 50px !important;
1481 }
1482 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1483 margin-top: 4px!important;
1484 padding: 5px!important;
1485 margin-bottom: 0!important;
1486
1487 }
1488 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1489 height: auto;
1490 overflow: visible;
1491 }
1492
1493 .select2-container--default .select2-search--inline .select2-search__field {
1494 background: transparent;
1495 border: none !important;
1496 outline: none !important;
1497 box-shadow: none !important;
1498 width: 100% !important;
1499 }
1500
1501
1502 /**
1503 * Accordion options styles
1504 */
1505
1506 fieldset.ays-accordion-options-container,
1507 fieldset.ays-series-accordion-options-container,
1508 fieldset.ays-rows-accordion-options-container,
1509 fieldset.ays-slices-accordion-options-container {
1510 border: none;
1511 padding: 0;
1512 border-left: 2px solid #008cff;
1513 background-color: #ffffff;
1514 margin-bottom: 5px;
1515 }
1516
1517 fieldset.ays-accordion-options-container legend.ays-accordion-options-header,
1518 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header,
1519 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header,
1520 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header {
1521 width: 100%;
1522 height: 45px;
1523 margin: 0;
1524 display: flex;
1525 align-items: center;
1526 justify-content: flex-start;
1527 cursor: pointer;
1528 user-select: none;
1529 position: relative;
1530 padding-left: 36px;
1531 }
1532
1533 fieldset.ays-accordion-options-container legend.ays-accordion-options-header svg.ays-accordion-arrow,
1534 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header svg.ays-series-accordion-arrow,
1535 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header svg.ays-rows-accordion-arrow,
1536 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header svg.ays-slices-accordion-arrow {
1537 width: 20px;
1538 height: 20px;
1539 position: absolute;
1540 top: 13px;
1541 left: 10px;
1542 }
1543
1544 fieldset.ays-accordion-options-container legend.ays-accordion-options-header span,
1545 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header span,
1546 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header span,
1547 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header span {
1548 /* font-family: Arial;*/
1549 font-size: 13px;
1550 color: #595959;
1551 text-decoration: none solid rgb(89, 89, 89);
1552 line-height: 1;
1553 }
1554
1555 fieldset.ays-accordion-options-container div.ays-accordion-options-content,
1556 fieldset.ays-series-accordion-options-container div.ays-series-accordion-options-content,
1557 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-options-content,
1558 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-options-content {
1559 width: 100%;
1560 /* transition: all .25s ease; */
1561 /* max-height: 500px; */
1562 }
1563
1564 fieldset.ays-accordion-options-container div.ays-accordion-data-main-wrap,
1565 fieldset.ays-series-accordion-options-container div.ays-series-accordion-data-main-wrap,
1566 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-data-main-wrap,
1567 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-data-main-wrap {
1568 padding: 10px 20px 20px 36px;
1569 }
1570
1571 fieldset.ays-accordion-options-container[data-collapsed="true"] div.ays-accordion-options-content,
1572 fieldset.ays-series-accordion-options-container[data-collapsed="true"] div.ays-series-accordion-options-content,
1573 fieldset.ays-rows-accordion-options-container[data-collapsed="true"] div.ays-rows-accordion-options-content,
1574 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] div.ays-slices-accordion-options-content {
1575 display: none;
1576 }
1577
1578 fieldset.ays-accordion-options-container[data-collapsed="true"],
1579 fieldset.ays-series-accordion-options-container[data-collapsed="true"],
1580 fieldset.ays-rows-accordion-options-container[data-collapsed="true"],
1581 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] {
1582 border-left: 2px solid #c4c4c4;
1583 }
1584 fieldset.ays-accordion-options-container[data-collapsed="false"],
1585 fieldset.ays-series-accordion-options-container[data-collapsed="false"],
1586 fieldset.ays-rows-accordion-options-container[data-collapsed="false"],
1587 fieldset.ays-slices-accordion-options-container[data-collapsed="false"] {
1588 border-left: 2px solid #008cff;
1589 }
1590
1591 .ays-accordion-arrow,
1592 .ays-series-accordion-arrow,
1593 .ays-rows-accordion-arrow,
1594 .ays-slices-accordion-arrow {
1595 transition: .3s ease;
1596 }
1597 .ays-accordion-arrow-down,
1598 .ays-series-accordion-arrow-down,
1599 .ays-rows-accordion-arrow-down,
1600 .ays-slices-accordion-arrow-down {
1601 transform: rotate(90deg);
1602 }
1603
1604 /*
1605 * Chosen selects
1606 */
1607 .ays-chart-chart-source-data-main select {
1608 height: 55px;
1609 max-height: 55px;
1610 margin: 0;
1611 padding: 16px 20px;
1612 color: #555;
1613 box-shadow: none;
1614 }
1615
1616 .ays-chart-chart-source-data-main select:focus,
1617 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1618 .ays-chart-chart-source-data-main .chosen-container .chosen-drop,
1619 .ays-chart-chart-source-data-main input {
1620 outline: none;
1621 box-shadow: none;
1622 }
1623
1624 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1625 .ays-chart-chart-source-data-main .chosen-container-active .chosen-results {
1626 border-color: #5b9dd9 !important;
1627 }
1628
1629 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1630 color: #555;
1631 }
1632
1633 .ays-chart-chart-source-data-main .chosen-container .chosen-drop {
1634 display: none;
1635 left: 20px;
1636 padding-right: 20px;
1637 border: none;
1638 }
1639
1640 .ays-chart-chart-source-data-main .chosen-container.chosen-container-active .chosen-drop {
1641 display: block;
1642 }
1643
1644 .ays-chart-chart-source-data-main .chosen-container .chosen-drop .chosen-results {
1645 border: 1px solid #ddd;
1646 border-top: none;
1647 }
1648
1649 .ays-chart-chart-source-data-main .chosen-container .chosen-results li {
1650 padding: 10px;
1651 border-bottom: 1px solid #eee;
1652 }
1653
1654 .ays-chart-chart-source-data-main .chosen-container .chosen-results li:last-child {
1655 border-bottom: none;
1656 }
1657
1658 .ays-chart-chart-source-data-main .chosen-container .chosen-results li.highlighted {
1659 background: #0085ba;
1660 }
1661
1662 #filter-wizard-rules {
1663 display: table;
1664 width: 100%;
1665 }
1666
1667 #visualizer-post-types {
1668 display: table-cell;
1669 width: 200px;
1670 }
1671
1672 .ays-chart-chart-source-data-main .chosen-container {
1673 display: table-cell;
1674 box-sizing: border-box;
1675 width: 100% !important;
1676 padding-left: 20px;
1677 }
1678
1679 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices {
1680 height: 55px !important;
1681 max-height: 55px;
1682 padding: 12px 20px;
1683 border: 1px solid #ddd;
1684 background-image: none;
1685 }
1686
1687 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice {
1688 height: 30px;
1689 margin: 0 10px 0 0;
1690 padding: 7px 25px 10px 10px;
1691 border: none;
1692 color: #fff;
1693 background: #0085ba;
1694 box-shadow: none;
1695 line-height: 1;
1696 }
1697
1698 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1699 display: inline-block;
1700 top: 6px;
1701 right: 4px;
1702 width: 18px;
1703 height: 18px;
1704 color: #9acadd;
1705 font-family: dashicons;
1706 font-size: 18px;
1707 }
1708
1709 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
1710 color: #fff;
1711 }
1712
1713 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
1714 content: "\f335";
1715 }
1716
1717 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1718 height: 29px;
1719 }
1720
1721 #filter-wizard-details {
1722 margin-top: 40px;
1723 padding-top: 40px;
1724 border-top: 1px solid #eee;
1725 }
1726
1727 #filter-wizard table.filter-wizard {
1728 width: 100%;
1729 }
1730
1731 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1732 padding-top: 20px;
1733 }
1734
1735 #filter-wizard-details input,
1736 #filter-wizard-details select {
1737 height: 35px;
1738 padding: 0 15px;
1739 line-height: 1;
1740 }
1741
1742 #filter-wizard-details {
1743 display: none;
1744 }
1745
1746 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1747 background: none;
1748 }
1749
1750 #vz-no-fields {
1751 width: 100%;
1752 margin-top: 50px;
1753 color: #555;
1754 font-size: 18px;
1755 line-height: 1.5;
1756 }
1757
1758 .ays-chart-google-sheet-select-wrap {
1759 padding: 20px 0;
1760 }
1761
1762 svg > g > g.google-visualization-tooltip {
1763 pointer-events: none
1764 }
1765
1766 #filter-wizard-details {
1767 margin-top: 40px;
1768 padding-top: 40px;
1769 border-top: 1px solid #eee;
1770 }
1771
1772 #filter-wizard table.filter-wizard {
1773 width: 100%;
1774 }
1775
1776 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1777 padding-top: 20px;
1778 }
1779
1780 #filter-wizard-details input,
1781 #filter-wizard-details select {
1782 height: 35px;
1783 padding: 0 15px;
1784 line-height: 1;
1785 }
1786
1787 #filter-wizard-details {
1788 display: none;
1789 }
1790
1791 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1792 background: none;
1793 }
1794
1795 #vz-no-fields {
1796 width: 100%;
1797 margin-top: 50px;
1798 color: #555;
1799 font-size: 18px;
1800 line-height: 1.5;
1801 }
1802
1803 /******************************************************************************/
1804 /***************************** DB Query Wizard ******************************/
1805 /******************************************************************************/
1806 .db-wizard-condition .select-condition {
1807 display: none;
1808 }
1809
1810 .db-wizard-condition .select-condition.active {
1811 display: block;
1812 max-width: 50%;
1813 margin-top: 10px;
1814 padding-top: 10px;
1815 border-top: 1px solid #eee;
1816 font-weight: 500;
1817 }
1818
1819 #db-wizard-form {
1820 padding: 25px;
1821 }
1822
1823 .db-wizard-query label {
1824 display: block;
1825 min-width: 150px;
1826 padding: 20px 0 5px;
1827 color: rgba(0,0,0,0.85);
1828 font-size: 18px;
1829 font-weight: 500;
1830 }
1831
1832 .db-wizard-query .db-wizard-where label,
1833 .db-wizard-query .db-wizard-from label {
1834 padding-top: 0;
1835 }
1836
1837 .db-wizard-query > div:not(:last-child) {
1838 margin-bottom: 15px;
1839 }
1840
1841 .db-wizard-query .select-condition > div {
1842 display: block;
1843 }
1844
1845 .db-wizard-query .chosen-container {
1846 width: auto;
1847 }
1848
1849 .db-wizard-query .chosen-container-single .chosen-single {
1850 border: 1px solid #ccc;
1851 background: #fff;
1852 box-shadow: none;
1853 font-size: 13px;
1854 font-weight: 500;
1855 }
1856
1857 .db-wizard-templates,
1858 .db-wizard-templates > div {
1859 display: block;
1860 }
1861
1862 .db-wizard-templates > div {
1863 box-sizing: border-box;
1864 width: 50%;
1865 margin-top: 20px;
1866 padding: 20px;
1867 border: 1px solid #efefef;
1868 }
1869
1870 .db-wizard-templates > div:first-child {
1871 margin-top: 0;
1872 }
1873
1874 .db-wizard-query .chosen-container-multi .chosen-choices {
1875 padding: 5px;
1876 border-color: #ccc;
1877 background: #fff;
1878 box-shadow: none;
1879 }
1880
1881 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1882 .db-wizard-query .select-condition-operand input,
1883 .db-wizard-limit input {
1884 width: 50%;
1885 padding-left: 7px;
1886 border: 1px solid #ccc;
1887 border-radius: 6px;
1888 background: #fff;
1889 box-shadow: none;
1890 font-size: 13px;
1891 }
1892
1893 .db-wizard-limit input {
1894 display: inline;
1895 width: 150px;
1896 margin: 0 0 20px 20px;
1897 }
1898
1899 .db-wizard-limit label {
1900 display: inline;
1901 }
1902
1903 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1904 color: #cdcdcd;
1905 }
1906
1907 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1908 color: #cdcdcd;
1909 }
1910
1911 .db-wizard-query .select-condition-operand input::placeholder {
1912 color: #cdcdcd;
1913 }
1914
1915 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1916 padding: 5px 30px 5px 5px;
1917 border-color: #ccc;
1918 background: #fff;
1919 box-shadow: none;
1920 font-weight: 600;
1921 }
1922
1923 .db-wizard-results table > thead > tr > th {
1924 padding: 15px 8px;
1925 border: none;
1926 color: #252422;
1927 background: #fff;
1928 font-size: 18px;
1929 font-weight: 500;
1930 text-align: left;
1931 }
1932
1933 .db-wizard-results table > tbody > tr > td,
1934 .dataTables_info {
1935 padding: 15px 8px;
1936 border-top: 1px solid #a2a2a2;
1937 color: #252422;
1938 font-size: 14px;
1939 font-weight: 300;
1940 }
1941
1942 .db-wizard-results table > tbody > tr.odd {
1943 background-color: #f7f7f7;
1944 }
1945
1946 .db-wizard-results table.dataTable.no-footer {
1947 border: none;
1948 }
1949
1950 .db-wizard-results .dataTables_wrapper .dataTables_info {
1951 border-top: 1px solid #ccc5b9;
1952 color: #a2a2a2;
1953 font-size: 12px;
1954 font-weight: 500;
1955 }
1956
1957 .db-wizard-results .dataTables_filter label {
1958 font-size: 18px;
1959 font-weight: 500;
1960 }
1961
1962 .db-wizard-where-template-remove,
1963 .db-wizard-where-template-add {
1964 width: auto;
1965 height: 25px;
1966 margin-top: 10px;
1967 border: none;
1968 border-radius: 3px;
1969 color: #fff;
1970 font-size: 12px;
1971 cursor: pointer;
1972 transition: 0.3s ease;
1973 }
1974
1975 .db-wizard-where-template-remove:hover,
1976 .db-wizard-where-template-add:hover {
1977 opacity: 0.8;
1978 }
1979
1980 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1981 float: none;
1982 text-align: left;
1983 }
1984
1985 .db-wizard-where-template-add {
1986 background-color: #34a85e;
1987 }
1988
1989 .db-wizard-where-template-remove {
1990 background-color: #ff0d00;
1991 }
1992
1993 #external-db-query-form .CodeMirror-scroll,
1994 #db-query-form .CodeMirror-scroll {
1995 overflow: hidden !important;
1996 height: 100%;
1997 margin: 0;
1998 padding: 0;
1999 }
2000
2001 #external-db-query-form .CodeMirror-wrap,
2002 #db-query-form .CodeMirror-wrap {
2003 height: 200px;
2004 padding: 15px;
2005 color: #fff;
2006 background: #282923;
2007 font-size: 15px;
2008 }
2009
2010 #external-db-query-form .CodeMirror-wrap .CodeMirror-cursor,
2011 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
2012 border-left: 1px solid #fff !important;
2013 }
2014
2015 #external-db-query-form .CodeMirror-wrap .CodeMirror-placeholder,
2016 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
2017 color: #fff;
2018 }
2019
2020 #external-db-query-form .CodeMirror-wrap pre,
2021 #db-query-form .CodeMirror-wrap pre {
2022 color: #fff !important;
2023 }
2024
2025 #external-db-query-form .CodeMirror-wrap pre .cm-keyword,
2026 #db-query-form .CodeMirror-wrap pre .cm-keyword {
2027 color: #f92472 !important;
2028 }
2029
2030 #external-db-query-form .CodeMirror-wrap pre .cm-comment,
2031 #db-query-form .CodeMirror-wrap pre .cm-comment {
2032 color: #74705d !important;
2033 }
2034
2035 #external-db-query-form .CodeMirror-wrap pre .cm-number,
2036 #external-db-query-form .CodeMirror-wrap pre .cm-string,
2037 #db-query-form .CodeMirror-wrap pre .cm-number,
2038 #db-query-form .CodeMirror-wrap pre .cm-string {
2039 color: #fff !important;
2040 }
2041
2042 .ays-chart-db-query-form > div {
2043 display: block;
2044 /*width: 15%;*/
2045 /* vertical-align: middle; */
2046 }
2047
2048 .ays-chart-db-query-form > div:first-child {
2049 width: 100%;
2050 margin-bottom: 20px;
2051 }
2052 .ays-chart-buttons-group,
2053 .ays-chart-buttons-group-main {
2054 display: flex;
2055 justify-content: flex-start;
2056 align-items: center;
2057 gap: 5px;
2058 }
2059
2060 .ays-chart-db-query-form-button,
2061 .ays-chart-buttons-group {
2062 padding: 15px 5px;
2063 }
2064 .ays-chart-buttons-group {
2065 flex-wrap: wrap;
2066
2067 }
2068
2069 #ays-chart-google-sheet-form .ays-chart-buttons-group {
2070 display: flex;
2071 justify-content: space-between;
2072 }
2073
2074 @media screen and (max-width: 576px) {
2075 .ays-chart-chart-source-data-content-container {
2076 flex-direction: column-reverse;
2077 gap: 5px;
2078 }
2079
2080 .ays-chart-icons-box.ays-chart-add-new-column-box {
2081 margin: 0;
2082 }
2083
2084 .ays-chart-chart-source-data-content {
2085 width: 100%;
2086 }
2087 }
2088
2089 .ays-db-results-wrap {
2090 overflow: hidden;
2091 overflow-x: auto;
2092 }
2093
2094 .db-wizard-error {
2095 color: #f00;
2096 }
2097 .db-wizard-success {
2098 color: #009a00;
2099 }
2100
2101 .db-wizard-hints,
2102 .json-wizard-hints,
2103 .html-table-editor-hints {
2104 margin-bottom: 30px;
2105 color: #0085ba;
2106 }
2107
2108 .db-wizard-hints .ays-chart-emboss,
2109 .db-wizard-hints a,
2110 .html-table-editor-hints a,
2111 .json-wizard-hints .ays-chart-emboss,
2112 .json-wizard-hints a {
2113 color: #f92472;
2114 }
2115
2116 .db-wizard-hints ul,
2117 .html-table-editor-hints ul,
2118 .json-wizard-hints ul {
2119 list-style: square;
2120 }
2121
2122 .db-wizard-results .dataTables_wrapper .dataTables_info {
2123 width: calc(100% - 17px);
2124 }
2125
2126 /*
2127 * Org type manual styles for accordion
2128 */
2129
2130 .ays-chart-chart-source-data-content-org-type #ays-chart-chart-source-data-edit-tree-content {
2131 overflow: auto;
2132 }
2133
2134 .ays-chart-org-chart-tree-description {
2135 color: red;
2136 font-style: italic;
2137 }
2138
2139 .tree-branch {
2140 margin-bottom: 0;
2141 position: relative;
2142 user-select: none;
2143 max-height: 58px;
2144 }
2145
2146 .tree-branch > .contents .branch-wrapper {
2147 background: #fff;
2148 border: 1px solid #fff;
2149 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
2150 border-radius: 3px;
2151 min-height: 20px;
2152 max-width: 450px;
2153 min-width: 200px;
2154 width: 100%;
2155 position: relative;
2156 padding: 10px 15px;
2157 height: auto;
2158 gap: 12px;
2159
2160 overflow: hidden;
2161 word-wrap: break-word;
2162 }
2163
2164 .tree-branch > .contents .branch-wrapper .sidebars {
2165 display: flex;
2166 align-items: center;
2167 justify-content: space-between;
2168 min-height: 50px;
2169 height: 50px;
2170 }
2171
2172 .tree-branch > .contents .branch-wrapper .left-sidebar {
2173 display: flex;
2174 gap: 12px;
2175 align-items: center;
2176 max-width: 150px;
2177 width: 100%;
2178 }
2179
2180 .ays-chart-builder-active-options {
2181 border-radius: 15px !important;
2182 background-color: #dddddd !important;
2183 box-shadow: -1px 7px 2px 0 rgb(0 0 0 / 15%) !important;
2184 }
2185
2186 .right-sidebar {
2187 opacity: 0;
2188 transition: 0.3s;
2189 display: flex;
2190 flex-wrap: wrap;
2191 justify-content: flex-end;
2192 gap: 3px;
2193 }
2194
2195 .right-sidebar .button {
2196 width: 40px;
2197 height: 40px;
2198 padding: 0;
2199 display: flex;
2200 justify-content: center;
2201 align-items: center;
2202 min-height: 25px;
2203 min-width: 25px;
2204 }
2205
2206 @media screen and (max-width: 1000px) {
2207 .sidebars .right-sidebar .button {
2208 width: 30px;
2209 height: 30px;
2210 }
2211 .sidebars .left-sidebar .branch-title {
2212 font-size: 13px;
2213 }
2214 }
2215
2216 .branch-wrapper:hover .right-sidebar {
2217 opacity: 1;
2218 }
2219
2220 .tree-branch > .contents .branch-wrapper .left-sidebar {
2221 cursor: pointer;
2222 }
2223
2224 .tree-branch > .contents {
2225 clear: both;
2226 line-height: 1.5;
2227 position: relative;
2228 margin: 5px 0 0;
2229 }
2230
2231 .contents .branch-drag-handler {
2232 cursor: move;
2233 }
2234
2235 .branch-drag-handler .icon {
2236 color: #504e4e;
2237 margin-right: 5px;
2238 }
2239 .sortable-placeholder {
2240 border: 1px dashed rgb(63, 63, 63);
2241 height: 35px;
2242 max-width: 450px;
2243 width: 100%;
2244 margin-top: 10px;
2245 }
2246
2247 .tree-branch.ui-sortable-helper .contents {
2248 margin-top: 0;
2249 }
2250
2251 .tree-branch.ui-sortable-helper .children-bus .contents {
2252 margin-top: 10px;
2253 }
2254
2255 .tree-branch .children-bus:empty {
2256 display: none;
2257 }
2258
2259 .tree-branch {
2260 margin-left: var(--tree-sortable-branch-left-shift);
2261 }
2262 .children-bus {
2263 margin-left: var(--tree-sortable-children-left-shift);
2264 }
2265
2266 .ui-sortable-placeholder {
2267 margin-left: var(--tree-sortable-branch-left-shift);
2268 }
2269
2270 .branch-path {
2271 display: block;
2272 position: absolute;
2273 width: var(--tree-sortable-depth);
2274 min-height: 72px;
2275 bottom: 50%;
2276 left: -12px;
2277 border: 2px solid #565656;
2278 border-top: 0;
2279 border-right: 0;
2280 padding: 4px 0 0;
2281 padding-top: 3px;
2282 border-bottom-left-radius: 6px;
2283 z-index: -1;
2284 }
2285 .right-sidebar .fa.fa-caret-down {
2286 transition: 0.3s;
2287 }
2288
2289 .transform-open-close-icon {
2290 transform: rotate(180deg);
2291 }
2292
2293 .ays-chart-org-chart-manual-branch-options-container {
2294 margin-top: 10px;
2295 padding-top: 10px;
2296 }
2297
2298 .ays-chart-org-chart-branch-main-options-box {
2299 display: flex;
2300 justify-content: space-between;
2301 align-items: center;
2302 }
2303
2304 .ays-chart-org-chart-manual-branch-options-left-box {
2305 padding: 0 20px;
2306 }
2307
2308 .ays-chart-org-chart-manual-branch-options-rigth-box {
2309 padding: 10px 20px 5px;
2310 text-align: end;
2311 }
2312
2313 @media screen and (max-width: 1200px){
2314 .ays-chart-org-chart-branch-main-options-box {
2315 flex-direction: column;
2316 align-items: flex-start;
2317 }
2318
2319 .ays-chart-org-chart-branch-main-options-box input{
2320 width: 100%;
2321 }
2322 }
2323
2324 /* Featured Plugins Start */
2325
2326 .card img {
2327 width: 128px;
2328 margin: auto;
2329 }
2330
2331 .coming-soon span {
2332 font-size: 25px;
2333 font-weight: 600;
2334 background: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
2335 -webkit-background-clip: text;
2336 background-clip: text;
2337 -webkit-text-fill-color: transparent;
2338 }
2339
2340 .comparison {
2341 max-width: 100%;
2342 margin: 0 auto;
2343 margin-bottom: 20px;
2344 margin-top: 30px;
2345 font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
2346 text-align: center;
2347 padding: 10px;
2348 }
2349
2350 .comparison table {
2351 width: 100%;
2352 border-collapse: collapse;
2353 border-spacing: 0;
2354 table-layout: auto;
2355 }
2356
2357 .comparison td,
2358 .comparison th {
2359 border-right: 1px solid #E8E8E8;
2360 empty-cells: show;
2361 padding: 10px;
2362 border-top: 1px solid #E8E8E8;
2363 border-bottom: 1px solid #E8E8E8;
2364 color: #808080;
2365 font-size: 15px;
2366 }
2367
2368 .comparison tbody tr:nth-child(odd):not(:last-child) {
2369 display: none;
2370 }
2371
2372 .comparison .compare-row {
2373 background: #F7F7F7;
2374 }
2375
2376 .ays_fa_check {
2377 color: #69C7F1;
2378 }
2379
2380 .comparison th {
2381 font-weight: normal;
2382 padding: 0;
2383 border-top: 0px solid #E8E8E8;
2384 border-bottom: 0px solid #E8E8E8;
2385 }
2386
2387 .comparison tr td:first-child {
2388 text-align: left;
2389 padding: 15px;
2390 border-left: 1px solid #E8E8E8;
2391 border-top: 1px solid #E8E8E8;
2392 }
2393
2394 .comparison .product,
2395 .comparison .tl {
2396 color: #FFF;
2397 padding: 10px;
2398 font-size: 14px;
2399 }
2400
2401 .comparison .tl2 {
2402 border-right: 0;
2403 }
2404
2405 .comparison .product {
2406 background: #69C7F1;
2407 height: 40px;
2408 font-size: 3.5vw;
2409 }
2410
2411 @media screen and (min-width: 769px) {
2412 .ays-chart-features-wrap .comparison .product {
2413 font-size: 1.6em;
2414 }
2415 }
2416
2417 @media screen and (max-width: 768px) {
2418 .comparison .product img {
2419 width: 70px;
2420 }
2421
2422 .comparison a.price-buy{
2423 padding: 5px 10px;
2424 font-size: 11px;
2425 }
2426 }
2427
2428 @media screen and (max-width: 720px) {
2429 .table_ul {
2430 padding: 0px;
2431 }
2432 .table_ul li {
2433 font-size: 10px;
2434 line-height: 16px;
2435 padding: 3px 0;
2436 }
2437 .comparison {
2438 max-width: 100%;
2439 }
2440 .comparison td:first-child,
2441 .comparison th:first-child {
2442 display: none;
2443 }
2444 .comparison tbody tr:nth-child(odd) {
2445 display: table-row !important;
2446 background: #F7F7F7;
2447 }
2448 .comparison .row {
2449 background: #FFF;
2450 }
2451 .comparison td,
2452 .comparison th {
2453 border: 1px solid #CCC;
2454 border-top: none;
2455 padding: 10px;
2456 }
2457 .price-info {
2458 border-top: 0 !important;
2459 padding: 10px 0 !important;
2460 }
2461 .price-info p {
2462 line-height: 8px;
2463 font-size: 8px !important;
2464 }
2465 .comparison .compare-row {
2466 background: #ffffff;
2467 }
2468 .comparison .price-now p {
2469 display: block;
2470 }
2471 .comparison .price-now span {
2472 font-size: 24px !important;
2473 }
2474 .comparison .chart-builder-pracing-table-td-flex span {
2475 font-size: 9px !important;
2476 }
2477 .comparison .qbse {
2478 font-size: 1.2em;
2479 }
2480 .comparison td {
2481 font-size: 14px;
2482 }
2483 .comparison th {
2484 font-size: 14px;
2485 }
2486 }
2487
2488 .comparison .price-info {
2489 padding: 15px;
2490 }
2491
2492 .comparison .price-now,
2493 .comparison .price-now span {
2494 color: #808080;
2495 }
2496
2497 .comparison .price-now span {
2498 font-size: 36px;
2499 color: #545454;
2500 }
2501
2502 .comparison .price-now p {
2503 font-size: 14px;
2504 text-align: center;
2505 line-height: 16px;
2506 display: inline;
2507 }
2508
2509 .comparison .price-buy {
2510 background: #69C7F1;
2511 padding: 10px 20px;
2512 font-size: 14px;
2513 display: inline-block;
2514 color: #fff;
2515 text-decoration: none;
2516 border-radius: 3px;
2517 text-transform: uppercase;
2518 margin: 5px 0 10px 0;
2519 letter-spacing: 1px;
2520 cursor: pointer;
2521 -webkit-transition: .3s all ease;
2522 transition: .3s all ease;
2523 }
2524
2525 .comparison .price-buy:hover {
2526 background: #6BB0DC;
2527 }
2528
2529 .comparison .chart-builder-pracing-table-td-flex {
2530 display: flex;
2531 justify-content: center;
2532 align-items: center;
2533 flex-direction: column;
2534 }
2535
2536 .comparison .chart-builder-pracing-table-td-flex span {
2537 font-size: 11px;
2538 color: #96a3bd;
2539 text-transform: uppercase;
2540 margin-top: 5px;
2541 }
2542
2543 .chart-builder-logo-container-upgrade span.chart-builder-logo-container-one-time-text{
2544 font-size: 11px;
2545 font-style: normal;
2546 font-weight: 600;
2547 line-height: normal;
2548 }
2549
2550 .chart-builder-sm-content-row-sg {
2551 background-color: #ecf6ff;
2552 margin: 70px 0;
2553 }
2554
2555 .chart-builder-sm-main-container-sg * {
2556 margin: 0;
2557 padding: 0;
2558 box-sizing: border-box;
2559 background-repeat: no-repeat;
2560 }
2561
2562 .chart-builder-sm-center-box-sg {
2563 display: flex;
2564 align-items: center;
2565 justify-content: center;
2566 flex-wrap: wrap;
2567 gap: 30px;
2568 }
2569
2570 .chart-builder-sm-guarantee-container-sg {
2571 width: 70%;
2572 margin: auto;
2573 padding: 15px 0;
2574 }
2575
2576 .chart-builder-sm-guarantee-container-sg img {
2577 width: 200px;
2578 /* margin-right: 30px; */
2579 }
2580
2581 .chart-builder-sm-guarantee-text-container-sg {
2582 max-width: 555px;
2583 }
2584
2585 .chart-builder-sm-guarantee-container-sg h3 {
2586 font-size: 32px;
2587 text-transform: uppercase;
2588 color: #5F61FB;
2589 font-weight: 600;
2590 margin-bottom: 20px;
2591 line-height: 35px;
2592 }
2593
2594 .chart-builder-sm-guarantee-container-sg p {
2595 font-size: 14px;
2596 color: #6A6A6A;
2597 line-height: 1.5em;
2598 }
2599
2600 /* Featured Plugins End */
2601
2602 /*How to use Submenu Style Start*/
2603
2604 div#wpbody div.wrap div.ays-chart-heart-beat-main-heading.ays-chart-heart-beat-main-heading-container{
2605 text-align: center;
2606 }
2607
2608 div#wpbody div.wrap div.container-fluid div.ays-chart-our-products-heading.ays-chart-our-products-heading-container{
2609 text-align: center;
2610 }
2611
2612 .ays-chart-faq-main{
2613 max-width: 800px;
2614 margin: auto;
2615 text-align: center;
2616 }
2617 .ays-chart-faq-main p{
2618 color: #212529;
2619 font-size: 18px;
2620 }
2621 .ays-chart-faq-main ol{
2622 color: #3a546f;
2623 }
2624 div.wrap .ays-chart-wp-heading-inline{
2625 font-size: 27px;
2626 color: #364150;
2627 font-weight: 700;
2628 letter-spacing: -1px;
2629 }
2630 .ays-chart-faq-main h2{
2631 color: inherit;
2632 font-size: 22px;
2633 font-weight: 400;
2634 letter-spacing: -1px;
2635 margin-bottom: 20px;
2636 }
2637 .ays-chart-faq-main fieldset{
2638 border:1px solid #ccc;
2639 padding:10px;
2640 width:fit-content;
2641 margin:0 auto;
2642 margin-bottom: 40px;
2643 }
2644 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2645 text-align: left;
2646 }
2647 .ays-chart-p-container p{
2648 font-weight: 600;
2649 }
2650 .ays-chart-ol-container ol {
2651 text-align: left;
2652 }
2653 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2654 border-top: 1px solid #e5ecf6;
2655 }
2656 .ays-chart-asked-question {
2657 margin: 0;
2658 border-bottom: 2px solid #000;
2659 }
2660 .ays-chart-asked-question__header {
2661 cursor: pointer;
2662 display: -webkit-box;
2663 display: -ms-flexbox;
2664 display: flex;
2665 -webkit-box-pack: justify;
2666 -ms-flex-pack: justify;
2667 justify-content: space-between;
2668 align-items: center;
2669 padding: 0 22px;
2670 min-height: 50px;
2671 }
2672 .ays-chart-asked-question__title h4{
2673 font-size: 19px;
2674 color: #23282d;
2675 }
2676 .ays-chart-asked-question__body {
2677 text-align: left;
2678 color: #3a546f;
2679 font-size: 18px;
2680 max-height: 0;
2681 overflow: hidden;
2682 transition: max-height 0.2s ease-out;
2683 padding: 0 22px;
2684 }
2685 .ays-chart-asked-question__arrow {
2686 cursor: pointer;
2687 display: -webkit-box;
2688 display: -ms-flexbox;
2689 display: flex;
2690 -webkit-box-align: center;
2691 -ms-flex-align: center;
2692 align-items: center;
2693 -webkit-box-pack: center;
2694 -ms-flex-pack: center;
2695 justify-content: center;
2696 font-size: 10px;
2697 background: #f7faff;
2698 width: 20px;
2699 height: 20px;
2700 border-radius: 100%;
2701 }
2702
2703 .ays-chart-faq-main .ays-chart-faq-footer{
2704 font-size: 15px;
2705 margin-top: 50px;
2706 }
2707
2708 .wrap h1.ays-chart-builder-wrapper{
2709 text-align: center;
2710 font-size: 40px;
2711 margin-bottom: 20px;
2712 }
2713 .ays_heart_beat i.ays_fa{
2714 color: red!important;
2715 font-weight: bold;
2716 }
2717 .ays_heart_beat {
2718 font-size: 20px;
2719 margin-left: 10px;
2720 }
2721
2722 /*How to use Submenu Style End*/
2723
2724 /* FAQ End */
2725 .ays-chart-faq-main{
2726 max-width: 800px;
2727 margin: auto;
2728 text-align: center;
2729 }
2730 .ays-chart-faq-main p{
2731 color: #212529;
2732 font-size: 18px;
2733 }
2734 .ays-chart-faq-main ol{
2735 color: #3a546f;
2736 }
2737 div.wrap .ays-chart-wp-heading-inline{
2738 font-size: 27px;
2739 color: #364150;
2740 font-weight: 700;
2741 letter-spacing: -1px;
2742 }
2743 .ays-chart-faq-main h2{
2744 color: inherit;
2745 font-size: 22px;
2746 font-weight: 400;
2747 letter-spacing: -1px;
2748 margin-bottom: 20px;
2749 }
2750 .ays-chart-faq-main fieldset{
2751 border:1px solid #ccc;
2752 padding:10px;
2753 width:fit-content;
2754 margin:0 auto;
2755 margin-bottom: 40px;
2756 }
2757 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2758 text-align: left;
2759 }
2760 .ays-chart-p-container p{
2761 font-weight: 600;
2762 }
2763 .ays-chart-ol-container ol {
2764 text-align: left;
2765 }
2766 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2767 border-top: 1px solid #e5ecf6;
2768 }
2769 .ays-chart-asked-question {
2770 margin: 0;
2771 border-bottom: 2px solid #000;
2772 }
2773 .ays-chart-asked-question__header {
2774 cursor: pointer;
2775 display: -webkit-box;
2776 display: -ms-flexbox;
2777 display: flex;
2778 -webkit-box-pack: justify;
2779 -ms-flex-pack: justify;
2780 justify-content: space-between;
2781 align-items: center;
2782 padding: 0 22px;
2783 min-height: 50px;
2784 }
2785 .ays-chart-asked-question__title h4{
2786 font-size: 19px;
2787 color: #23282d;
2788 }
2789 .ays-chart-asked-question__body {
2790 text-align: left;
2791 color: #3a546f;
2792 font-size: 18px;
2793 max-height: 0;
2794 overflow: hidden;
2795 transition: max-height 0.2s ease-out;
2796 padding: 0 22px;
2797 }
2798 .ays-chart-asked-question__arrow {
2799 cursor: pointer;
2800 display: -webkit-box;
2801 display: -ms-flexbox;
2802 display: flex;
2803 -webkit-box-align: center;
2804 -ms-flex-align: center;
2805 align-items: center;
2806 -webkit-box-pack: center;
2807 -ms-flex-pack: center;
2808 justify-content: center;
2809 font-size: 10px;
2810 background: #f7faff;
2811 width: 20px;
2812 height: 20px;
2813 border-radius: 100%;
2814 }
2815
2816 .ays-chart-faq-main .ays-chart-faq-footer{
2817 font-size: 15px;
2818 margin-top: 50px;
2819 }
2820
2821 .wrap h1.ays-chart-builder-wrapper{
2822 text-align: center;
2823 font-size: 40px;
2824 margin-bottom: 20px;
2825 }
2826 .ays_heart_beat i.ays_fa{
2827 color: red!important;
2828 font-weight: bold;
2829 }
2830 .ays_heart_beat {
2831 font-size: 20px;
2832 margin-left: 10px;
2833 }
2834 /* FAQ start */
2835
2836 /* Community start */
2837 @media (min-width: 1250px) {
2838 .ays-chart-community-wrap .ays-chart-community-item {
2839 width:calc(28.3333333% - 13.3333333px)
2840 }
2841
2842 .ays-chart-community-wrap .ays-chart-community-item:nth-child(3n) {
2843 margin-right: 0
2844 }
2845 }
2846
2847 @media (max-width: 1249px) {
2848 .ays-chart-community-wrap .ays-chart-community-item {
2849 width:calc(50% - 10px)
2850 }
2851
2852 .ays-chart-community-wrap .ays-chart-community-item:nth-child(2n) {
2853 margin-right: 0
2854 }
2855 }
2856
2857 @media (max-width: 767px) {
2858 div.ays-chart-community-wrap .ays-chart-community-item {
2859 width:100%;
2860 margin-right: 0
2861 }
2862
2863 div.ays-chart-community-youtube-video iframe {
2864 width: 100%;
2865 }
2866 }
2867
2868 .ays-chart-community-wrap {
2869 text-align: center;
2870 width: 70%;
2871 margin: auto;
2872 margin-bottom: 60px;
2873 }
2874
2875 .ays-chart-community-wrap *,
2876 .ays-chart-community-wrap *::before,
2877 .ays-chart-community-wrap *::after {
2878 -webkit-box-sizing: border-box;
2879 -moz-box-sizing: border-box;
2880 box-sizing: border-box;
2881 }
2882
2883 .ays-chart-community-wrap .ays-chart-community-container {
2884 display: flex;
2885 flex-wrap: wrap;
2886 justify-content: center;
2887 margin: 20px;
2888 margin-top: 40px;
2889 }
2890
2891 .ays-chart-community-wrap .ays-chart-community-item {
2892 /*border: 1px solid #DDDDDD;*/
2893 margin: 0 20px 20px 0;
2894 background-color: #FAF8F8;
2895 position: relative;
2896 box-shadow: 0px 2px 16px 2px rgba(178, 218, 240, 0.25), 0px 4px 16px #FAF8F8;
2897 border-radius: 2px;
2898 }
2899
2900 .ays-chart-community-wrap .ays-chart-community-item-cover {
2901 width: 100%;
2902 height: 120px;
2903 position: relative;
2904 display: block
2905 }
2906
2907 .ays-chart-community-wrap .ays-chart-community-item-img {
2908 width: auto;
2909 height: auto;
2910 max-width: 80px;
2911 max-height: 80px;
2912 position: absolute;
2913 top: 0;
2914 bottom: 0;
2915 left: 0;
2916 right: 0;
2917 margin: auto;
2918 font-size: 70px;
2919 line-height: 80px;
2920 }
2921
2922 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_youtube_play {
2923 color: #B74141;
2924 }
2925
2926 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_users {
2927 color: #E78A2C;
2928 }
2929
2930 .ays-chart-community-wrap .ays-chart-community-item-title {
2931 margin: 17px 20px 10px 20px;
2932 font-size: 16px
2933 }
2934
2935 .ays-chart-community-wrap .ays-chart-community-item-desc {
2936 margin: 0 20px 100px 20px;
2937 font-size: 14px
2938 }
2939
2940 .ays-chart-community-wrap .ays-chart-community-item-footer {
2941 position: absolute;
2942 width: 100%;
2943 bottom: 0;
2944 padding: 20px;
2945 /*border-top: 1px solid #dddddd;
2946 background-color: #F7F7F7*/
2947 }
2948
2949 .ays-chart-community-wrap .button {
2950 display: inline-block;
2951 width: 150px;
2952 background-color: #FAF8F8;
2953 color: #1C75A6;
2954 font-weight: bold;
2955 border: 1px solid #0e6897;
2956 padding: 3px 34px;
2957 height: auto;
2958 /*line-height: 13px;*/
2959 /*text-shadow: 1px 1px 1.5px rgba(0,0,0,0.35);*/
2960 transition: 0.5s;
2961 }
2962
2963 .ays-chart-community-wrap .button:hover {
2964 background: #008ec2;
2965 border-color: #006799;
2966 color: #fff;
2967 }
2968
2969 .ays-chart-community-wrap a.ays-chart-community-item-cover:hover {
2970 color: #2271b1;
2971 }
2972
2973 /* Community end */
2974
2975 .ays-chart-create-chart-video-box{
2976 display: flex;
2977 justify-content: space-around;
2978 align-items: center;
2979 flex-direction: column;
2980 /* margin-bottom: 20px !important; */
2981 /* margin-top: 100px !important; */
2982 }
2983
2984 .ays-chart-create-chart-youtube-video:hover {
2985 text-decoration: underline;
2986 }
2987
2988 .ays-chart-create-chart-youtube-video-button-box{
2989 margin: 80px 0 10px 0;
2990 }
2991
2992 .ays-chart-add-new-button-video{
2993 background-color: #2A8EB6;
2994 color: #fff !important;
2995 border-color: #2A8EB6;
2996 outline: none;
2997 text-decoration: none;
2998 border-radius: 4px;
2999 box-shadow: unset;
3000 padding: 10px 30px;
3001 border: 0;
3002 }
3003
3004 .ays-chart-show-on-chart-bttns {
3005 height: 40px;
3006 padding: 0px 12px;
3007 display: flex;
3008 justify-content: center;
3009 align-items: center;
3010 gap: 6px;
3011 border-radius: 6px;
3012 border: 1px solid #14524A;
3013 background: rgba(110, 219, 205, 0.20);
3014 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
3015 }
3016
3017 .ays-chart-show-on-chart-bttns:hover {
3018 background: rgba(110, 219, 205, 0.40);
3019 }
3020
3021 /* Ask a question box start */
3022
3023 div.ays_ask_question_content {
3024 display: flex;
3025 justify-content: flex-end;
3026 position: fixed;
3027 bottom: 10px;
3028 right: 10px;
3029 z-index: 99999;
3030 }
3031
3032 div.ays_ask_question_content .ays-ask-question-content-inner-hidden-text{
3033 position: absolute;
3034 display: none;
3035 /* display: inline-block; */
3036 opacity: 0;
3037 /* padding: 7px; */
3038 font-size: 16px;
3039 }
3040
3041 div.ays_ask_question_content:hover .ays-ask-question-content-inner-hidden-text{
3042 opacity: 1;
3043 display: inline-block;
3044 position: static;
3045 transition: .5s;
3046 padding: 7px;
3047 }
3048
3049 div.ays_ask_question_content:hover .ays_chart_question_link{
3050 border-radius: 29px;
3051 }
3052
3053 div.ays_ask_question_content .ays-ask-question-content-inner-question-mark-text{
3054 padding: 8px;
3055 background-color: white;
3056 color: #258BB3;
3057 border-radius: 50%;
3058 display: inline-block;
3059 }
3060
3061 div.ays_ask_question_content_inner {
3062 position: relative;
3063 }
3064
3065 a.ays_chart_question_link {
3066 color: white;
3067 font-weight: bold;
3068 box-shadow: unset;
3069 outline: none;
3070 display: flex;
3071 justify-content: center;
3072 align-items: center;
3073 text-align: center;
3074 background-color: #258BB3;
3075 border-radius: 50%;
3076 bottom: 0;
3077 right: 0;
3078 font-size: 18px;
3079 padding: 16px;
3080 display: inline-block;
3081 line-height: 0.5;
3082 text-decoration: none !important;
3083 }
3084
3085 /* Ask a question box end */
3086
3087 /* chart Footer Support box start */
3088 .ays-chart-footer-support-box {
3089 display: block;
3090 clear: both;
3091 text-align: center;
3092 margin: 0px;
3093 }
3094
3095 .ays-chart-footer-support-box .ays-chart-footer-slash-row {
3096 color: #c3c4c7;
3097 display: inline-block;
3098 margin: 0px 7px;
3099 }
3100
3101 .ays-chart-footer-support-box .ays-chart-footer-link-row {
3102 font-size: 13px;
3103 }
3104
3105 body.toplevel_page_chart-builder #wpfooter,
3106 body.chart-builder_page_chart-builder-chart-features #wpfooter,
3107 body.chart-builder_page_chart-builder-featured-plugins #wpfooter,
3108 body.chart-builder_page_chart-builder-settings #wpfooter,
3109 body.chart-builder_page_chart-builder-dashboard #wpfooter {
3110 position: relative;
3111 }
3112
3113 /* chart Footer Support box end */
3114