PluginProbe
Chartify – WordPress Chart Plugin / 3.0.9
Chartify – WordPress Chart Plugin v3.0.9
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.0.9, at admin/css/chart-builder-admin.css

3,111 lines 69.3 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 }
1349
1350 p.submit{
1351 display: inline;
1352 margin-right: 10px;
1353 }
1354
1355 .button.ays-button {
1356 margin: 0;
1357 margin-left: 10px;
1358 }
1359
1360 .w-100 {
1361 width: 100px;
1362 }
1363
1364 .display_none {
1365 display: none !important;
1366 }
1367 .display_none_not_important {
1368 display: none;
1369 }
1370 .display_block {
1371 display: block !important;
1372 }
1373 .shortcode.column-shortcode input {
1374 width: 100%;
1375 }
1376
1377
1378 /*
1379 * Select2
1380 */
1381 .select2 {
1382 display: inline-block!important;
1383 z-index: 0 !important;
1384 }
1385 #quest_cat_container .select2 {
1386 display: block!important;
1387 }
1388
1389
1390 .select2-selection.select2-selection--single{
1391 height: 40px!important;
1392 border: 1px solid #ddd!important;
1393 box-shadow: inset 0 1px 2px rgba(0,0,0,.07)!important;
1394 }
1395
1396 .select2-container--default .select2-selection--single .select2-selection__rendered {
1397 line-height: 35px!important;
1398 }
1399
1400 .select2-container--default .select2-selection--single .select2-selection__arrow {
1401 height: 40px!important;
1402 }
1403
1404 .select2.select2-container{
1405 width: 200px!important;
1406 }
1407
1408 .ays-chart-general-settings .select2.select2-container{
1409 width: 100%!important;
1410 }
1411
1412 /*
1413 * Select2 multiple
1414 */
1415
1416 .select2-selection--multiple {
1417 font-size: 16px;
1418 min-height: 40px !important;
1419 border-radius: 4px;
1420 margin-top: -5px;
1421 min-width: 150px;
1422 border-color: #ddd;
1423 }
1424
1425 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1426 border-color: #5b9dd9;
1427 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1428 outline: 2px solid transparent;
1429 }
1430
1431 .select2.select2-container {
1432 width: 100%;
1433 }
1434
1435 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1436 margin-top: 1px !important;
1437 padding: 0 5px !important;
1438 margin-bottom: 8px !important;
1439 }
1440
1441 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1442 overflow: hidden;
1443 padding-top: 5px;
1444 }
1445
1446 .select2-selection--single {
1447 height: 100% !important;
1448 }
1449 .select2-selection__rendered{
1450 word-wrap: break-word !important;
1451 text-overflow: inherit !important;
1452 white-space: normal !important;
1453 }
1454 /*
1455 * Select2 multiple
1456 */
1457
1458 .select2-selection--multiple {
1459 font-size: 16px;
1460 min-height: 40px !important;
1461 border-radius: 4px;
1462 margin-top: -5px;
1463 min-width: 150px;
1464 border-color: #ddd;
1465 }
1466
1467 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1468 border-color: #5b9dd9;
1469 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1470 outline: 2px solid transparent;
1471 }
1472
1473 /* .select2.select2-container {
1474 width: 100%!important;
1475 } */
1476 .select2-container--default .select2-selection--multiple {
1477 min-height: 50px !important;
1478 }
1479 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1480 margin-top: 4px!important;
1481 padding: 5px!important;
1482 margin-bottom: 0!important;
1483
1484 }
1485 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1486 height: auto;
1487 overflow: visible;
1488 }
1489
1490 .select2-container--default .select2-search--inline .select2-search__field {
1491 background: transparent;
1492 border: none !important;
1493 outline: none !important;
1494 box-shadow: none !important;
1495 width: 100% !important;
1496 }
1497
1498
1499 /**
1500 * Accordion options styles
1501 */
1502
1503 fieldset.ays-accordion-options-container,
1504 fieldset.ays-series-accordion-options-container,
1505 fieldset.ays-rows-accordion-options-container,
1506 fieldset.ays-slices-accordion-options-container {
1507 border: none;
1508 padding: 0;
1509 border-left: 2px solid #008cff;
1510 background-color: #ffffff;
1511 margin-bottom: 5px;
1512 }
1513
1514 fieldset.ays-accordion-options-container legend.ays-accordion-options-header,
1515 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header,
1516 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header,
1517 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header {
1518 width: 100%;
1519 height: 45px;
1520 margin: 0;
1521 display: flex;
1522 align-items: center;
1523 justify-content: flex-start;
1524 cursor: pointer;
1525 user-select: none;
1526 position: relative;
1527 padding-left: 36px;
1528 }
1529
1530 fieldset.ays-accordion-options-container legend.ays-accordion-options-header svg.ays-accordion-arrow,
1531 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header svg.ays-series-accordion-arrow,
1532 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header svg.ays-rows-accordion-arrow,
1533 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header svg.ays-slices-accordion-arrow {
1534 width: 20px;
1535 height: 20px;
1536 position: absolute;
1537 top: 13px;
1538 left: 10px;
1539 }
1540
1541 fieldset.ays-accordion-options-container legend.ays-accordion-options-header span,
1542 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header span,
1543 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header span,
1544 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header span {
1545 /* font-family: Arial;*/
1546 font-size: 13px;
1547 color: #595959;
1548 text-decoration: none solid rgb(89, 89, 89);
1549 line-height: 1;
1550 }
1551
1552 fieldset.ays-accordion-options-container div.ays-accordion-options-content,
1553 fieldset.ays-series-accordion-options-container div.ays-series-accordion-options-content,
1554 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-options-content,
1555 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-options-content {
1556 width: 100%;
1557 /* transition: all .25s ease; */
1558 /* max-height: 500px; */
1559 }
1560
1561 fieldset.ays-accordion-options-container div.ays-accordion-data-main-wrap,
1562 fieldset.ays-series-accordion-options-container div.ays-series-accordion-data-main-wrap,
1563 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-data-main-wrap,
1564 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-data-main-wrap {
1565 padding: 10px 20px 20px 36px;
1566 }
1567
1568 fieldset.ays-accordion-options-container[data-collapsed="true"] div.ays-accordion-options-content,
1569 fieldset.ays-series-accordion-options-container[data-collapsed="true"] div.ays-series-accordion-options-content,
1570 fieldset.ays-rows-accordion-options-container[data-collapsed="true"] div.ays-rows-accordion-options-content,
1571 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] div.ays-slices-accordion-options-content {
1572 display: none;
1573 }
1574
1575 fieldset.ays-accordion-options-container[data-collapsed="true"],
1576 fieldset.ays-series-accordion-options-container[data-collapsed="true"],
1577 fieldset.ays-rows-accordion-options-container[data-collapsed="true"],
1578 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] {
1579 border-left: 2px solid #c4c4c4;
1580 }
1581 fieldset.ays-accordion-options-container[data-collapsed="false"],
1582 fieldset.ays-series-accordion-options-container[data-collapsed="false"],
1583 fieldset.ays-rows-accordion-options-container[data-collapsed="false"],
1584 fieldset.ays-slices-accordion-options-container[data-collapsed="false"] {
1585 border-left: 2px solid #008cff;
1586 }
1587
1588 .ays-accordion-arrow,
1589 .ays-series-accordion-arrow,
1590 .ays-rows-accordion-arrow,
1591 .ays-slices-accordion-arrow {
1592 transition: .3s ease;
1593 }
1594 .ays-accordion-arrow-down,
1595 .ays-series-accordion-arrow-down,
1596 .ays-rows-accordion-arrow-down,
1597 .ays-slices-accordion-arrow-down {
1598 transform: rotate(90deg);
1599 }
1600
1601 /*
1602 * Chosen selects
1603 */
1604 .ays-chart-chart-source-data-main select {
1605 height: 55px;
1606 max-height: 55px;
1607 margin: 0;
1608 padding: 16px 20px;
1609 color: #555;
1610 box-shadow: none;
1611 }
1612
1613 .ays-chart-chart-source-data-main select:focus,
1614 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1615 .ays-chart-chart-source-data-main .chosen-container .chosen-drop,
1616 .ays-chart-chart-source-data-main input {
1617 outline: none;
1618 box-shadow: none;
1619 }
1620
1621 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1622 .ays-chart-chart-source-data-main .chosen-container-active .chosen-results {
1623 border-color: #5b9dd9 !important;
1624 }
1625
1626 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1627 color: #555;
1628 }
1629
1630 .ays-chart-chart-source-data-main .chosen-container .chosen-drop {
1631 display: none;
1632 left: 20px;
1633 padding-right: 20px;
1634 border: none;
1635 }
1636
1637 .ays-chart-chart-source-data-main .chosen-container.chosen-container-active .chosen-drop {
1638 display: block;
1639 }
1640
1641 .ays-chart-chart-source-data-main .chosen-container .chosen-drop .chosen-results {
1642 border: 1px solid #ddd;
1643 border-top: none;
1644 }
1645
1646 .ays-chart-chart-source-data-main .chosen-container .chosen-results li {
1647 padding: 10px;
1648 border-bottom: 1px solid #eee;
1649 }
1650
1651 .ays-chart-chart-source-data-main .chosen-container .chosen-results li:last-child {
1652 border-bottom: none;
1653 }
1654
1655 .ays-chart-chart-source-data-main .chosen-container .chosen-results li.highlighted {
1656 background: #0085ba;
1657 }
1658
1659 #filter-wizard-rules {
1660 display: table;
1661 width: 100%;
1662 }
1663
1664 #visualizer-post-types {
1665 display: table-cell;
1666 width: 200px;
1667 }
1668
1669 .ays-chart-chart-source-data-main .chosen-container {
1670 display: table-cell;
1671 box-sizing: border-box;
1672 width: 100% !important;
1673 padding-left: 20px;
1674 }
1675
1676 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices {
1677 height: 55px !important;
1678 max-height: 55px;
1679 padding: 12px 20px;
1680 border: 1px solid #ddd;
1681 background-image: none;
1682 }
1683
1684 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice {
1685 height: 30px;
1686 margin: 0 10px 0 0;
1687 padding: 7px 25px 10px 10px;
1688 border: none;
1689 color: #fff;
1690 background: #0085ba;
1691 box-shadow: none;
1692 line-height: 1;
1693 }
1694
1695 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1696 display: inline-block;
1697 top: 6px;
1698 right: 4px;
1699 width: 18px;
1700 height: 18px;
1701 color: #9acadd;
1702 font-family: dashicons;
1703 font-size: 18px;
1704 }
1705
1706 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
1707 color: #fff;
1708 }
1709
1710 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
1711 content: "\f335";
1712 }
1713
1714 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1715 height: 29px;
1716 }
1717
1718 #filter-wizard-details {
1719 margin-top: 40px;
1720 padding-top: 40px;
1721 border-top: 1px solid #eee;
1722 }
1723
1724 #filter-wizard table.filter-wizard {
1725 width: 100%;
1726 }
1727
1728 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1729 padding-top: 20px;
1730 }
1731
1732 #filter-wizard-details input,
1733 #filter-wizard-details select {
1734 height: 35px;
1735 padding: 0 15px;
1736 line-height: 1;
1737 }
1738
1739 #filter-wizard-details {
1740 display: none;
1741 }
1742
1743 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1744 background: none;
1745 }
1746
1747 #vz-no-fields {
1748 width: 100%;
1749 margin-top: 50px;
1750 color: #555;
1751 font-size: 18px;
1752 line-height: 1.5;
1753 }
1754
1755 .ays-chart-google-sheet-select-wrap {
1756 padding: 20px 0;
1757 }
1758
1759 svg > g > g.google-visualization-tooltip {
1760 pointer-events: none
1761 }
1762
1763 #filter-wizard-details {
1764 margin-top: 40px;
1765 padding-top: 40px;
1766 border-top: 1px solid #eee;
1767 }
1768
1769 #filter-wizard table.filter-wizard {
1770 width: 100%;
1771 }
1772
1773 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1774 padding-top: 20px;
1775 }
1776
1777 #filter-wizard-details input,
1778 #filter-wizard-details select {
1779 height: 35px;
1780 padding: 0 15px;
1781 line-height: 1;
1782 }
1783
1784 #filter-wizard-details {
1785 display: none;
1786 }
1787
1788 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1789 background: none;
1790 }
1791
1792 #vz-no-fields {
1793 width: 100%;
1794 margin-top: 50px;
1795 color: #555;
1796 font-size: 18px;
1797 line-height: 1.5;
1798 }
1799
1800 /******************************************************************************/
1801 /***************************** DB Query Wizard ******************************/
1802 /******************************************************************************/
1803 .db-wizard-condition .select-condition {
1804 display: none;
1805 }
1806
1807 .db-wizard-condition .select-condition.active {
1808 display: block;
1809 max-width: 50%;
1810 margin-top: 10px;
1811 padding-top: 10px;
1812 border-top: 1px solid #eee;
1813 font-weight: 500;
1814 }
1815
1816 #db-wizard-form {
1817 padding: 25px;
1818 }
1819
1820 .db-wizard-query label {
1821 display: block;
1822 min-width: 150px;
1823 padding: 20px 0 5px;
1824 color: rgba(0,0,0,0.85);
1825 font-size: 18px;
1826 font-weight: 500;
1827 }
1828
1829 .db-wizard-query .db-wizard-where label,
1830 .db-wizard-query .db-wizard-from label {
1831 padding-top: 0;
1832 }
1833
1834 .db-wizard-query > div:not(:last-child) {
1835 margin-bottom: 15px;
1836 }
1837
1838 .db-wizard-query .select-condition > div {
1839 display: block;
1840 }
1841
1842 .db-wizard-query .chosen-container {
1843 width: auto;
1844 }
1845
1846 .db-wizard-query .chosen-container-single .chosen-single {
1847 border: 1px solid #ccc;
1848 background: #fff;
1849 box-shadow: none;
1850 font-size: 13px;
1851 font-weight: 500;
1852 }
1853
1854 .db-wizard-templates,
1855 .db-wizard-templates > div {
1856 display: block;
1857 }
1858
1859 .db-wizard-templates > div {
1860 box-sizing: border-box;
1861 width: 50%;
1862 margin-top: 20px;
1863 padding: 20px;
1864 border: 1px solid #efefef;
1865 }
1866
1867 .db-wizard-templates > div:first-child {
1868 margin-top: 0;
1869 }
1870
1871 .db-wizard-query .chosen-container-multi .chosen-choices {
1872 padding: 5px;
1873 border-color: #ccc;
1874 background: #fff;
1875 box-shadow: none;
1876 }
1877
1878 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1879 .db-wizard-query .select-condition-operand input,
1880 .db-wizard-limit input {
1881 width: 50%;
1882 padding-left: 7px;
1883 border: 1px solid #ccc;
1884 border-radius: 6px;
1885 background: #fff;
1886 box-shadow: none;
1887 font-size: 13px;
1888 }
1889
1890 .db-wizard-limit input {
1891 display: inline;
1892 width: 150px;
1893 margin: 0 0 20px 20px;
1894 }
1895
1896 .db-wizard-limit label {
1897 display: inline;
1898 }
1899
1900 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1901 color: #cdcdcd;
1902 }
1903
1904 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1905 color: #cdcdcd;
1906 }
1907
1908 .db-wizard-query .select-condition-operand input::placeholder {
1909 color: #cdcdcd;
1910 }
1911
1912 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1913 padding: 5px 30px 5px 5px;
1914 border-color: #ccc;
1915 background: #fff;
1916 box-shadow: none;
1917 font-weight: 600;
1918 }
1919
1920 .db-wizard-results table > thead > tr > th {
1921 padding: 15px 8px;
1922 border: none;
1923 color: #252422;
1924 background: #fff;
1925 font-size: 18px;
1926 font-weight: 500;
1927 text-align: left;
1928 }
1929
1930 .db-wizard-results table > tbody > tr > td,
1931 .dataTables_info {
1932 padding: 15px 8px;
1933 border-top: 1px solid #a2a2a2;
1934 color: #252422;
1935 font-size: 14px;
1936 font-weight: 300;
1937 }
1938
1939 .db-wizard-results table > tbody > tr.odd {
1940 background-color: #f7f7f7;
1941 }
1942
1943 .db-wizard-results table.dataTable.no-footer {
1944 border: none;
1945 }
1946
1947 .db-wizard-results .dataTables_wrapper .dataTables_info {
1948 border-top: 1px solid #ccc5b9;
1949 color: #a2a2a2;
1950 font-size: 12px;
1951 font-weight: 500;
1952 }
1953
1954 .db-wizard-results .dataTables_filter label {
1955 font-size: 18px;
1956 font-weight: 500;
1957 }
1958
1959 .db-wizard-where-template-remove,
1960 .db-wizard-where-template-add {
1961 width: auto;
1962 height: 25px;
1963 margin-top: 10px;
1964 border: none;
1965 border-radius: 3px;
1966 color: #fff;
1967 font-size: 12px;
1968 cursor: pointer;
1969 transition: 0.3s ease;
1970 }
1971
1972 .db-wizard-where-template-remove:hover,
1973 .db-wizard-where-template-add:hover {
1974 opacity: 0.8;
1975 }
1976
1977 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1978 float: none;
1979 text-align: left;
1980 }
1981
1982 .db-wizard-where-template-add {
1983 background-color: #34a85e;
1984 }
1985
1986 .db-wizard-where-template-remove {
1987 background-color: #ff0d00;
1988 }
1989
1990 #external-db-query-form .CodeMirror-scroll,
1991 #db-query-form .CodeMirror-scroll {
1992 overflow: hidden !important;
1993 height: 100%;
1994 margin: 0;
1995 padding: 0;
1996 }
1997
1998 #external-db-query-form .CodeMirror-wrap,
1999 #db-query-form .CodeMirror-wrap {
2000 height: 200px;
2001 padding: 15px;
2002 color: #fff;
2003 background: #282923;
2004 font-size: 15px;
2005 }
2006
2007 #external-db-query-form .CodeMirror-wrap .CodeMirror-cursor,
2008 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
2009 border-left: 1px solid #fff !important;
2010 }
2011
2012 #external-db-query-form .CodeMirror-wrap .CodeMirror-placeholder,
2013 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
2014 color: #fff;
2015 }
2016
2017 #external-db-query-form .CodeMirror-wrap pre,
2018 #db-query-form .CodeMirror-wrap pre {
2019 color: #fff !important;
2020 }
2021
2022 #external-db-query-form .CodeMirror-wrap pre .cm-keyword,
2023 #db-query-form .CodeMirror-wrap pre .cm-keyword {
2024 color: #f92472 !important;
2025 }
2026
2027 #external-db-query-form .CodeMirror-wrap pre .cm-comment,
2028 #db-query-form .CodeMirror-wrap pre .cm-comment {
2029 color: #74705d !important;
2030 }
2031
2032 #external-db-query-form .CodeMirror-wrap pre .cm-number,
2033 #external-db-query-form .CodeMirror-wrap pre .cm-string,
2034 #db-query-form .CodeMirror-wrap pre .cm-number,
2035 #db-query-form .CodeMirror-wrap pre .cm-string {
2036 color: #fff !important;
2037 }
2038
2039 .ays-chart-db-query-form > div {
2040 display: block;
2041 /*width: 15%;*/
2042 /* vertical-align: middle; */
2043 }
2044
2045 .ays-chart-db-query-form > div:first-child {
2046 width: 100%;
2047 margin-bottom: 20px;
2048 }
2049 .ays-chart-buttons-group,
2050 .ays-chart-buttons-group-main {
2051 display: flex;
2052 justify-content: flex-start;
2053 align-items: center;
2054 gap: 5px;
2055 }
2056
2057 .ays-chart-db-query-form-button,
2058 .ays-chart-buttons-group {
2059 padding: 15px 5px;
2060 }
2061 .ays-chart-buttons-group {
2062 flex-wrap: wrap;
2063
2064 }
2065
2066 #ays-chart-google-sheet-form .ays-chart-buttons-group {
2067 display: flex;
2068 justify-content: space-between;
2069 }
2070
2071 @media screen and (max-width: 576px) {
2072 .ays-chart-chart-source-data-content-container {
2073 flex-direction: column-reverse;
2074 gap: 5px;
2075 }
2076
2077 .ays-chart-icons-box.ays-chart-add-new-column-box {
2078 margin: 0;
2079 }
2080
2081 .ays-chart-chart-source-data-content {
2082 width: 100%;
2083 }
2084 }
2085
2086 .ays-db-results-wrap {
2087 overflow: hidden;
2088 overflow-x: auto;
2089 }
2090
2091 .db-wizard-error {
2092 color: #f00;
2093 }
2094 .db-wizard-success {
2095 color: #009a00;
2096 }
2097
2098 .db-wizard-hints,
2099 .json-wizard-hints,
2100 .html-table-editor-hints {
2101 margin-bottom: 30px;
2102 color: #0085ba;
2103 }
2104
2105 .db-wizard-hints .ays-chart-emboss,
2106 .db-wizard-hints a,
2107 .html-table-editor-hints a,
2108 .json-wizard-hints .ays-chart-emboss,
2109 .json-wizard-hints a {
2110 color: #f92472;
2111 }
2112
2113 .db-wizard-hints ul,
2114 .html-table-editor-hints ul,
2115 .json-wizard-hints ul {
2116 list-style: square;
2117 }
2118
2119 .db-wizard-results .dataTables_wrapper .dataTables_info {
2120 width: calc(100% - 17px);
2121 }
2122
2123 /*
2124 * Org type manual styles for accordion
2125 */
2126
2127 .ays-chart-chart-source-data-content-org-type #ays-chart-chart-source-data-edit-tree-content {
2128 overflow: auto;
2129 }
2130
2131 .ays-chart-org-chart-tree-description {
2132 color: red;
2133 font-style: italic;
2134 }
2135
2136 .tree-branch {
2137 margin-bottom: 0;
2138 position: relative;
2139 user-select: none;
2140 max-height: 58px;
2141 }
2142
2143 .tree-branch > .contents .branch-wrapper {
2144 background: #fff;
2145 border: 1px solid #fff;
2146 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
2147 border-radius: 3px;
2148 min-height: 20px;
2149 max-width: 450px;
2150 min-width: 200px;
2151 width: 100%;
2152 position: relative;
2153 padding: 10px 15px;
2154 height: auto;
2155 gap: 12px;
2156
2157 overflow: hidden;
2158 word-wrap: break-word;
2159 }
2160
2161 .tree-branch > .contents .branch-wrapper .sidebars {
2162 display: flex;
2163 align-items: center;
2164 justify-content: space-between;
2165 min-height: 50px;
2166 height: 50px;
2167 }
2168
2169 .tree-branch > .contents .branch-wrapper .left-sidebar {
2170 display: flex;
2171 gap: 12px;
2172 align-items: center;
2173 max-width: 150px;
2174 width: 100%;
2175 }
2176
2177 .ays-chart-builder-active-options {
2178 border-radius: 15px !important;
2179 background-color: #dddddd !important;
2180 box-shadow: -1px 7px 2px 0 rgb(0 0 0 / 15%) !important;
2181 }
2182
2183 .right-sidebar {
2184 opacity: 0;
2185 transition: 0.3s;
2186 display: flex;
2187 flex-wrap: wrap;
2188 justify-content: flex-end;
2189 gap: 3px;
2190 }
2191
2192 .right-sidebar .button {
2193 width: 40px;
2194 height: 40px;
2195 padding: 0;
2196 display: flex;
2197 justify-content: center;
2198 align-items: center;
2199 min-height: 25px;
2200 min-width: 25px;
2201 }
2202
2203 @media screen and (max-width: 1000px) {
2204 .sidebars .right-sidebar .button {
2205 width: 30px;
2206 height: 30px;
2207 }
2208 .sidebars .left-sidebar .branch-title {
2209 font-size: 13px;
2210 }
2211 }
2212
2213 .branch-wrapper:hover .right-sidebar {
2214 opacity: 1;
2215 }
2216
2217 .tree-branch > .contents .branch-wrapper .left-sidebar {
2218 cursor: pointer;
2219 }
2220
2221 .tree-branch > .contents {
2222 clear: both;
2223 line-height: 1.5;
2224 position: relative;
2225 margin: 5px 0 0;
2226 }
2227
2228 .contents .branch-drag-handler {
2229 cursor: move;
2230 }
2231
2232 .branch-drag-handler .icon {
2233 color: #504e4e;
2234 margin-right: 5px;
2235 }
2236 .sortable-placeholder {
2237 border: 1px dashed rgb(63, 63, 63);
2238 height: 35px;
2239 max-width: 450px;
2240 width: 100%;
2241 margin-top: 10px;
2242 }
2243
2244 .tree-branch.ui-sortable-helper .contents {
2245 margin-top: 0;
2246 }
2247
2248 .tree-branch.ui-sortable-helper .children-bus .contents {
2249 margin-top: 10px;
2250 }
2251
2252 .tree-branch .children-bus:empty {
2253 display: none;
2254 }
2255
2256 .tree-branch {
2257 margin-left: var(--tree-sortable-branch-left-shift);
2258 }
2259 .children-bus {
2260 margin-left: var(--tree-sortable-children-left-shift);
2261 }
2262
2263 .ui-sortable-placeholder {
2264 margin-left: var(--tree-sortable-branch-left-shift);
2265 }
2266
2267 .branch-path {
2268 display: block;
2269 position: absolute;
2270 width: var(--tree-sortable-depth);
2271 min-height: 72px;
2272 bottom: 50%;
2273 left: -12px;
2274 border: 2px solid #565656;
2275 border-top: 0;
2276 border-right: 0;
2277 padding: 4px 0 0;
2278 padding-top: 3px;
2279 border-bottom-left-radius: 6px;
2280 z-index: -1;
2281 }
2282 .right-sidebar .fa.fa-caret-down {
2283 transition: 0.3s;
2284 }
2285
2286 .transform-open-close-icon {
2287 transform: rotate(180deg);
2288 }
2289
2290 .ays-chart-org-chart-manual-branch-options-container {
2291 margin-top: 10px;
2292 padding-top: 10px;
2293 }
2294
2295 .ays-chart-org-chart-branch-main-options-box {
2296 display: flex;
2297 justify-content: space-between;
2298 align-items: center;
2299 }
2300
2301 .ays-chart-org-chart-manual-branch-options-left-box {
2302 padding: 0 20px;
2303 }
2304
2305 .ays-chart-org-chart-manual-branch-options-rigth-box {
2306 padding: 10px 20px 5px;
2307 text-align: end;
2308 }
2309
2310 @media screen and (max-width: 1200px){
2311 .ays-chart-org-chart-branch-main-options-box {
2312 flex-direction: column;
2313 align-items: flex-start;
2314 }
2315
2316 .ays-chart-org-chart-branch-main-options-box input{
2317 width: 100%;
2318 }
2319 }
2320
2321 /* Featured Plugins Start */
2322
2323 .card img {
2324 width: 128px;
2325 margin: auto;
2326 }
2327
2328 .coming-soon span {
2329 font-size: 25px;
2330 font-weight: 600;
2331 background: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
2332 -webkit-background-clip: text;
2333 background-clip: text;
2334 -webkit-text-fill-color: transparent;
2335 }
2336
2337 .comparison {
2338 max-width: 100%;
2339 margin: 0 auto;
2340 margin-bottom: 20px;
2341 margin-top: 30px;
2342 font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
2343 text-align: center;
2344 padding: 10px;
2345 }
2346
2347 .comparison table {
2348 width: 100%;
2349 border-collapse: collapse;
2350 border-spacing: 0;
2351 table-layout: auto;
2352 }
2353
2354 .comparison td,
2355 .comparison th {
2356 border-right: 1px solid #E8E8E8;
2357 empty-cells: show;
2358 padding: 10px;
2359 border-top: 1px solid #E8E8E8;
2360 border-bottom: 1px solid #E8E8E8;
2361 color: #808080;
2362 font-size: 15px;
2363 }
2364
2365 .comparison tbody tr:nth-child(odd):not(:last-child) {
2366 display: none;
2367 }
2368
2369 .comparison .compare-row {
2370 background: #F7F7F7;
2371 }
2372
2373 .ays_fa_check {
2374 color: #69C7F1;
2375 }
2376
2377 .comparison th {
2378 font-weight: normal;
2379 padding: 0;
2380 border-top: 0px solid #E8E8E8;
2381 border-bottom: 0px solid #E8E8E8;
2382 }
2383
2384 .comparison tr td:first-child {
2385 text-align: left;
2386 padding: 15px;
2387 border-left: 1px solid #E8E8E8;
2388 border-top: 1px solid #E8E8E8;
2389 }
2390
2391 .comparison .product,
2392 .comparison .tl {
2393 color: #FFF;
2394 padding: 10px;
2395 font-size: 14px;
2396 }
2397
2398 .comparison .tl2 {
2399 border-right: 0;
2400 }
2401
2402 .comparison .product {
2403 background: #69C7F1;
2404 height: 40px;
2405 font-size: 3.5vw;
2406 }
2407
2408 @media screen and (min-width: 769px) {
2409 .ays-chart-features-wrap .comparison .product {
2410 font-size: 1.6em;
2411 }
2412 }
2413
2414 @media screen and (max-width: 768px) {
2415 .comparison .product img {
2416 width: 70px;
2417 }
2418
2419 .comparison a.price-buy{
2420 padding: 5px 10px;
2421 font-size: 11px;
2422 }
2423 }
2424
2425 @media screen and (max-width: 720px) {
2426 .table_ul {
2427 padding: 0px;
2428 }
2429 .table_ul li {
2430 font-size: 10px;
2431 line-height: 16px;
2432 padding: 3px 0;
2433 }
2434 .comparison {
2435 max-width: 100%;
2436 }
2437 .comparison td:first-child,
2438 .comparison th:first-child {
2439 display: none;
2440 }
2441 .comparison tbody tr:nth-child(odd) {
2442 display: table-row !important;
2443 background: #F7F7F7;
2444 }
2445 .comparison .row {
2446 background: #FFF;
2447 }
2448 .comparison td,
2449 .comparison th {
2450 border: 1px solid #CCC;
2451 border-top: none;
2452 padding: 10px;
2453 }
2454 .price-info {
2455 border-top: 0 !important;
2456 padding: 10px 0 !important;
2457 }
2458 .price-info p {
2459 line-height: 8px;
2460 font-size: 8px !important;
2461 }
2462 .comparison .compare-row {
2463 background: #ffffff;
2464 }
2465 .comparison .price-now p {
2466 display: block;
2467 }
2468 .comparison .price-now span {
2469 font-size: 24px !important;
2470 }
2471 .comparison .chart-builder-pracing-table-td-flex span {
2472 font-size: 9px !important;
2473 }
2474 .comparison .qbse {
2475 font-size: 1.2em;
2476 }
2477 .comparison td {
2478 font-size: 14px;
2479 }
2480 .comparison th {
2481 font-size: 14px;
2482 }
2483 }
2484
2485 .comparison .price-info {
2486 padding: 15px;
2487 }
2488
2489 .comparison .price-now,
2490 .comparison .price-now span {
2491 color: #808080;
2492 }
2493
2494 .comparison .price-now span {
2495 font-size: 36px;
2496 color: #545454;
2497 }
2498
2499 .comparison .price-now p {
2500 font-size: 14px;
2501 text-align: center;
2502 line-height: 16px;
2503 display: inline;
2504 }
2505
2506 .comparison .price-buy {
2507 background: #69C7F1;
2508 padding: 10px 20px;
2509 font-size: 14px;
2510 display: inline-block;
2511 color: #fff;
2512 text-decoration: none;
2513 border-radius: 3px;
2514 text-transform: uppercase;
2515 margin: 5px 0 10px 0;
2516 letter-spacing: 1px;
2517 cursor: pointer;
2518 -webkit-transition: .3s all ease;
2519 transition: .3s all ease;
2520 }
2521
2522 .comparison .price-buy:hover {
2523 background: #6BB0DC;
2524 }
2525
2526 .comparison .chart-builder-pracing-table-td-flex {
2527 display: flex;
2528 justify-content: center;
2529 align-items: center;
2530 flex-direction: column;
2531 }
2532
2533 .comparison .chart-builder-pracing-table-td-flex span {
2534 font-size: 11px;
2535 color: #96a3bd;
2536 text-transform: uppercase;
2537 margin-top: 5px;
2538 }
2539
2540 .chart-builder-logo-container-upgrade span.chart-builder-logo-container-one-time-text{
2541 font-size: 11px;
2542 font-style: normal;
2543 font-weight: 600;
2544 line-height: normal;
2545 }
2546
2547 .chart-builder-sm-content-row-sg {
2548 background-color: #ecf6ff;
2549 margin: 70px 0;
2550 }
2551
2552 .chart-builder-sm-main-container-sg * {
2553 margin: 0;
2554 padding: 0;
2555 box-sizing: border-box;
2556 background-repeat: no-repeat;
2557 }
2558
2559 .chart-builder-sm-center-box-sg {
2560 display: flex;
2561 align-items: center;
2562 justify-content: center;
2563 flex-wrap: wrap;
2564 gap: 30px;
2565 }
2566
2567 .chart-builder-sm-guarantee-container-sg {
2568 width: 70%;
2569 margin: auto;
2570 padding: 15px 0;
2571 }
2572
2573 .chart-builder-sm-guarantee-container-sg img {
2574 width: 200px;
2575 /* margin-right: 30px; */
2576 }
2577
2578 .chart-builder-sm-guarantee-text-container-sg {
2579 max-width: 555px;
2580 }
2581
2582 .chart-builder-sm-guarantee-container-sg h3 {
2583 font-size: 32px;
2584 text-transform: uppercase;
2585 color: #5F61FB;
2586 font-weight: 600;
2587 margin-bottom: 20px;
2588 line-height: 35px;
2589 }
2590
2591 .chart-builder-sm-guarantee-container-sg p {
2592 font-size: 14px;
2593 color: #6A6A6A;
2594 line-height: 1.5em;
2595 }
2596
2597 /* Featured Plugins End */
2598
2599 /*How to use Submenu Style Start*/
2600
2601 div#wpbody div.wrap div.ays-chart-heart-beat-main-heading.ays-chart-heart-beat-main-heading-container{
2602 text-align: center;
2603 }
2604
2605 div#wpbody div.wrap div.container-fluid div.ays-chart-our-products-heading.ays-chart-our-products-heading-container{
2606 text-align: center;
2607 }
2608
2609 .ays-chart-faq-main{
2610 max-width: 800px;
2611 margin: auto;
2612 text-align: center;
2613 }
2614 .ays-chart-faq-main p{
2615 color: #212529;
2616 font-size: 18px;
2617 }
2618 .ays-chart-faq-main ol{
2619 color: #3a546f;
2620 }
2621 div.wrap .ays-chart-wp-heading-inline{
2622 font-size: 27px;
2623 color: #364150;
2624 font-weight: 700;
2625 letter-spacing: -1px;
2626 }
2627 .ays-chart-faq-main h2{
2628 color: inherit;
2629 font-size: 22px;
2630 font-weight: 400;
2631 letter-spacing: -1px;
2632 margin-bottom: 20px;
2633 }
2634 .ays-chart-faq-main fieldset{
2635 border:1px solid #ccc;
2636 padding:10px;
2637 width:fit-content;
2638 margin:0 auto;
2639 margin-bottom: 40px;
2640 }
2641 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2642 text-align: left;
2643 }
2644 .ays-chart-p-container p{
2645 font-weight: 600;
2646 }
2647 .ays-chart-ol-container ol {
2648 text-align: left;
2649 }
2650 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2651 border-top: 1px solid #e5ecf6;
2652 }
2653 .ays-chart-asked-question {
2654 margin: 0;
2655 border-bottom: 2px solid #000;
2656 }
2657 .ays-chart-asked-question__header {
2658 cursor: pointer;
2659 display: -webkit-box;
2660 display: -ms-flexbox;
2661 display: flex;
2662 -webkit-box-pack: justify;
2663 -ms-flex-pack: justify;
2664 justify-content: space-between;
2665 align-items: center;
2666 padding: 0 22px;
2667 min-height: 50px;
2668 }
2669 .ays-chart-asked-question__title h4{
2670 font-size: 19px;
2671 color: #23282d;
2672 }
2673 .ays-chart-asked-question__body {
2674 text-align: left;
2675 color: #3a546f;
2676 font-size: 18px;
2677 max-height: 0;
2678 overflow: hidden;
2679 transition: max-height 0.2s ease-out;
2680 padding: 0 22px;
2681 }
2682 .ays-chart-asked-question__arrow {
2683 cursor: pointer;
2684 display: -webkit-box;
2685 display: -ms-flexbox;
2686 display: flex;
2687 -webkit-box-align: center;
2688 -ms-flex-align: center;
2689 align-items: center;
2690 -webkit-box-pack: center;
2691 -ms-flex-pack: center;
2692 justify-content: center;
2693 font-size: 10px;
2694 background: #f7faff;
2695 width: 20px;
2696 height: 20px;
2697 border-radius: 100%;
2698 }
2699
2700 .ays-chart-faq-main .ays-chart-faq-footer{
2701 font-size: 15px;
2702 margin-top: 50px;
2703 }
2704
2705 .wrap h1.ays-chart-builder-wrapper{
2706 text-align: center;
2707 font-size: 40px;
2708 margin-bottom: 20px;
2709 }
2710 .ays_heart_beat i.ays_fa{
2711 color: red!important;
2712 font-weight: bold;
2713 }
2714 .ays_heart_beat {
2715 font-size: 20px;
2716 margin-left: 10px;
2717 }
2718
2719 /*How to use Submenu Style End*/
2720
2721 /* FAQ End */
2722 .ays-chart-faq-main{
2723 max-width: 800px;
2724 margin: auto;
2725 text-align: center;
2726 }
2727 .ays-chart-faq-main p{
2728 color: #212529;
2729 font-size: 18px;
2730 }
2731 .ays-chart-faq-main ol{
2732 color: #3a546f;
2733 }
2734 div.wrap .ays-chart-wp-heading-inline{
2735 font-size: 27px;
2736 color: #364150;
2737 font-weight: 700;
2738 letter-spacing: -1px;
2739 }
2740 .ays-chart-faq-main h2{
2741 color: inherit;
2742 font-size: 22px;
2743 font-weight: 400;
2744 letter-spacing: -1px;
2745 margin-bottom: 20px;
2746 }
2747 .ays-chart-faq-main fieldset{
2748 border:1px solid #ccc;
2749 padding:10px;
2750 width:fit-content;
2751 margin:0 auto;
2752 margin-bottom: 40px;
2753 }
2754 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2755 text-align: left;
2756 }
2757 .ays-chart-p-container p{
2758 font-weight: 600;
2759 }
2760 .ays-chart-ol-container ol {
2761 text-align: left;
2762 }
2763 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2764 border-top: 1px solid #e5ecf6;
2765 }
2766 .ays-chart-asked-question {
2767 margin: 0;
2768 border-bottom: 2px solid #000;
2769 }
2770 .ays-chart-asked-question__header {
2771 cursor: pointer;
2772 display: -webkit-box;
2773 display: -ms-flexbox;
2774 display: flex;
2775 -webkit-box-pack: justify;
2776 -ms-flex-pack: justify;
2777 justify-content: space-between;
2778 align-items: center;
2779 padding: 0 22px;
2780 min-height: 50px;
2781 }
2782 .ays-chart-asked-question__title h4{
2783 font-size: 19px;
2784 color: #23282d;
2785 }
2786 .ays-chart-asked-question__body {
2787 text-align: left;
2788 color: #3a546f;
2789 font-size: 18px;
2790 max-height: 0;
2791 overflow: hidden;
2792 transition: max-height 0.2s ease-out;
2793 padding: 0 22px;
2794 }
2795 .ays-chart-asked-question__arrow {
2796 cursor: pointer;
2797 display: -webkit-box;
2798 display: -ms-flexbox;
2799 display: flex;
2800 -webkit-box-align: center;
2801 -ms-flex-align: center;
2802 align-items: center;
2803 -webkit-box-pack: center;
2804 -ms-flex-pack: center;
2805 justify-content: center;
2806 font-size: 10px;
2807 background: #f7faff;
2808 width: 20px;
2809 height: 20px;
2810 border-radius: 100%;
2811 }
2812
2813 .ays-chart-faq-main .ays-chart-faq-footer{
2814 font-size: 15px;
2815 margin-top: 50px;
2816 }
2817
2818 .wrap h1.ays-chart-builder-wrapper{
2819 text-align: center;
2820 font-size: 40px;
2821 margin-bottom: 20px;
2822 }
2823 .ays_heart_beat i.ays_fa{
2824 color: red!important;
2825 font-weight: bold;
2826 }
2827 .ays_heart_beat {
2828 font-size: 20px;
2829 margin-left: 10px;
2830 }
2831 /* FAQ start */
2832
2833 /* Community start */
2834 @media (min-width: 1250px) {
2835 .ays-chart-community-wrap .ays-chart-community-item {
2836 width:calc(28.3333333% - 13.3333333px)
2837 }
2838
2839 .ays-chart-community-wrap .ays-chart-community-item:nth-child(3n) {
2840 margin-right: 0
2841 }
2842 }
2843
2844 @media (max-width: 1249px) {
2845 .ays-chart-community-wrap .ays-chart-community-item {
2846 width:calc(50% - 10px)
2847 }
2848
2849 .ays-chart-community-wrap .ays-chart-community-item:nth-child(2n) {
2850 margin-right: 0
2851 }
2852 }
2853
2854 @media (max-width: 767px) {
2855 div.ays-chart-community-wrap .ays-chart-community-item {
2856 width:100%;
2857 margin-right: 0
2858 }
2859
2860 div.ays-chart-community-youtube-video iframe {
2861 width: 100%;
2862 }
2863 }
2864
2865 .ays-chart-community-wrap {
2866 text-align: center;
2867 width: 70%;
2868 margin: auto;
2869 margin-bottom: 60px;
2870 }
2871
2872 .ays-chart-community-wrap *,
2873 .ays-chart-community-wrap *::before,
2874 .ays-chart-community-wrap *::after {
2875 -webkit-box-sizing: border-box;
2876 -moz-box-sizing: border-box;
2877 box-sizing: border-box;
2878 }
2879
2880 .ays-chart-community-wrap .ays-chart-community-container {
2881 display: flex;
2882 flex-wrap: wrap;
2883 justify-content: center;
2884 margin: 20px;
2885 margin-top: 40px;
2886 }
2887
2888 .ays-chart-community-wrap .ays-chart-community-item {
2889 /*border: 1px solid #DDDDDD;*/
2890 margin: 0 20px 20px 0;
2891 background-color: #FAF8F8;
2892 position: relative;
2893 box-shadow: 0px 2px 16px 2px rgba(178, 218, 240, 0.25), 0px 4px 16px #FAF8F8;
2894 border-radius: 2px;
2895 }
2896
2897 .ays-chart-community-wrap .ays-chart-community-item-cover {
2898 width: 100%;
2899 height: 120px;
2900 position: relative;
2901 display: block
2902 }
2903
2904 .ays-chart-community-wrap .ays-chart-community-item-img {
2905 width: auto;
2906 height: auto;
2907 max-width: 80px;
2908 max-height: 80px;
2909 position: absolute;
2910 top: 0;
2911 bottom: 0;
2912 left: 0;
2913 right: 0;
2914 margin: auto;
2915 font-size: 70px;
2916 line-height: 80px;
2917 }
2918
2919 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_youtube_play {
2920 color: #B74141;
2921 }
2922
2923 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_users {
2924 color: #E78A2C;
2925 }
2926
2927 .ays-chart-community-wrap .ays-chart-community-item-title {
2928 margin: 17px 20px 10px 20px;
2929 font-size: 16px
2930 }
2931
2932 .ays-chart-community-wrap .ays-chart-community-item-desc {
2933 margin: 0 20px 100px 20px;
2934 font-size: 14px
2935 }
2936
2937 .ays-chart-community-wrap .ays-chart-community-item-footer {
2938 position: absolute;
2939 width: 100%;
2940 bottom: 0;
2941 padding: 20px;
2942 /*border-top: 1px solid #dddddd;
2943 background-color: #F7F7F7*/
2944 }
2945
2946 .ays-chart-community-wrap .button {
2947 display: inline-block;
2948 width: 150px;
2949 background-color: #FAF8F8;
2950 color: #1C75A6;
2951 font-weight: bold;
2952 border: 1px solid #0e6897;
2953 padding: 3px 34px;
2954 height: auto;
2955 /*line-height: 13px;*/
2956 /*text-shadow: 1px 1px 1.5px rgba(0,0,0,0.35);*/
2957 transition: 0.5s;
2958 }
2959
2960 .ays-chart-community-wrap .button:hover {
2961 background: #008ec2;
2962 border-color: #006799;
2963 color: #fff;
2964 }
2965
2966 .ays-chart-community-wrap a.ays-chart-community-item-cover:hover {
2967 color: #2271b1;
2968 }
2969
2970 /* Community end */
2971
2972 .ays-chart-create-chart-video-box{
2973 display: flex;
2974 justify-content: space-around;
2975 align-items: center;
2976 flex-direction: column;
2977 /* margin-bottom: 20px !important; */
2978 /* margin-top: 100px !important; */
2979 }
2980
2981 .ays-chart-create-chart-youtube-video:hover {
2982 text-decoration: underline;
2983 }
2984
2985 .ays-chart-create-chart-youtube-video-button-box{
2986 margin: 80px 0 10px 0;
2987 }
2988
2989 .ays-chart-add-new-button-video{
2990 background-color: #2A8EB6;
2991 color: #fff !important;
2992 border-color: #2A8EB6;
2993 outline: none;
2994 text-decoration: none;
2995 border-radius: 4px;
2996 box-shadow: unset;
2997 padding: 10px 30px;
2998 border: 0;
2999 }
3000
3001 .ays-chart-show-on-chart-bttns {
3002 height: 40px;
3003 padding: 0px 12px;
3004 display: flex;
3005 justify-content: center;
3006 align-items: center;
3007 gap: 6px;
3008 border-radius: 6px;
3009 border: 1px solid #14524A;
3010 background: rgba(110, 219, 205, 0.20);
3011 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
3012 }
3013
3014 .ays-chart-show-on-chart-bttns:hover {
3015 background: rgba(110, 219, 205, 0.40);
3016 }
3017
3018 /* Ask a question box start */
3019
3020 div.ays_ask_question_content {
3021 display: flex;
3022 justify-content: flex-end;
3023 position: fixed;
3024 bottom: 10px;
3025 right: 10px;
3026 z-index: 99999;
3027 }
3028
3029 div.ays_ask_question_content .ays-ask-question-content-inner-hidden-text{
3030 position: absolute;
3031 display: none;
3032 /* display: inline-block; */
3033 opacity: 0;
3034 /* padding: 7px; */
3035 font-size: 16px;
3036 }
3037
3038 div.ays_ask_question_content:hover .ays-ask-question-content-inner-hidden-text{
3039 opacity: 1;
3040 display: inline-block;
3041 position: static;
3042 transition: .5s;
3043 padding: 7px;
3044 }
3045
3046 div.ays_ask_question_content:hover .ays_chart_question_link{
3047 border-radius: 29px;
3048 }
3049
3050 div.ays_ask_question_content .ays-ask-question-content-inner-question-mark-text{
3051 padding: 8px;
3052 background-color: white;
3053 color: #258BB3;
3054 border-radius: 50%;
3055 display: inline-block;
3056 }
3057
3058 div.ays_ask_question_content_inner {
3059 position: relative;
3060 }
3061
3062 a.ays_chart_question_link {
3063 color: white;
3064 font-weight: bold;
3065 box-shadow: unset;
3066 outline: none;
3067 display: flex;
3068 justify-content: center;
3069 align-items: center;
3070 text-align: center;
3071 background-color: #258BB3;
3072 border-radius: 50%;
3073 bottom: 0;
3074 right: 0;
3075 font-size: 18px;
3076 padding: 16px;
3077 display: inline-block;
3078 line-height: 0.5;
3079 text-decoration: none !important;
3080 }
3081
3082 /* Ask a question box end */
3083
3084 /* chart Footer Support box start */
3085 .ays-chart-footer-support-box {
3086 display: block;
3087 clear: both;
3088 text-align: center;
3089 margin: 0px;
3090 }
3091
3092 .ays-chart-footer-support-box .ays-chart-footer-slash-row {
3093 color: #c3c4c7;
3094 display: inline-block;
3095 margin: 0px 7px;
3096 }
3097
3098 .ays-chart-footer-support-box .ays-chart-footer-link-row {
3099 font-size: 13px;
3100 }
3101
3102 body.toplevel_page_chart-builder #wpfooter,
3103 body.chart-builder_page_chart-builder-chart-features #wpfooter,
3104 body.chart-builder_page_chart-builder-featured-plugins #wpfooter,
3105 body.chart-builder_page_chart-builder-settings #wpfooter,
3106 body.chart-builder_page_chart-builder-dashboard #wpfooter {
3107 position: relative;
3108 }
3109
3110 /* chart Footer Support box end */
3111