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

3,186 lines 71.0 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 .swal2-confirm{
692 background-color: #fff !important;
693 color: #007DCB !important;
694 border: 1px solid #007DCB !important;
695 border-radius: 6px !important;
696 display: flex;
697 justify-content: center;
698 align-items: center;
699 gap: 6px;
700 padding: .75em .875em !important;
701 min-width: 152px;
702 }
703
704 .swal2-cancel{
705 display: inline-block !important;
706 }
707
708 div.ays-top-menu-wrapper {
709 position: relative;
710 display: flex;
711 align-items: center;
712 }
713 .ays_menu_left,
714 .ays_menu_right {
715 position: absolute;
716 cursor: pointer;
717 font-size: 16px;
718 height: 80%;
719 display: none;
720 align-items: center;
721 bottom: 0;
722 z-index: 3;
723 }
724 .ays_menu_left {
725 left: -10px;
726 padding-right: 20px;
727 padding-left: 2px;
728 }
729 .ays_menu_right {
730 right: -10px;
731 padding-left: 20px;
732 padding-right: 2px;
733 }
734
735
736 blockquote.error_message {
737 color: crimson;
738 font-size: 16px;
739 font-style: italic;
740 border-color: crimson;
741 }
742
743 blockquote.error_message a {
744 color: brown;
745 font-weight: bold;
746 }
747
748 blockquote {
749 font-size: 14px;
750 width: 100%;
751 margin: 0 auto;
752 font-style: italic;
753 color: #555555;
754 padding: 8px 15px 8px 15px;
755 border-left: 5px solid #ffb700c0;
756 line-height: 1.6;
757 position: relative;
758 background: #ededed;
759 }
760
761 blockquote::before {
762 content: none;
763 }
764
765 blockquote::after {
766 content: "";
767 }
768
769 blockquote span {
770 display: block;
771 color: #333333;
772 font-style: normal;
773 font-weight: bold;
774 margin-top: 1em;
775 }
776
777 .ays-chart-type-info-box .ays-chart-type-info-box-text {
778 font-size: 14px;
779 font-style: italic;
780 text-transform: capitalize;
781 }
782
783 .ays-chart-type-info-box{
784 margin-top: 10px;
785 }
786
787 .ays-chart-charts-main-container {
788 max-width: 100%;
789 margin: auto;
790 overflow: hidden;
791 }
792
793 .ays-chart-charts-main-container#ays-chart-org_chart {
794 overflow: auto;
795 padding: 7px;
796 }
797
798 .ays-chart-charts-change-type-container {
799 display: flex;
800 flex-wrap: wrap;
801 justify-content: flex-end;
802 align-items: center;
803 gap: 10px;
804 padding: 10px;
805 }
806
807 .ays-chart-charts-change-type-type {
808 background-color: #e7e7e7;
809 padding: 3px;
810 border-radius: 5px;
811 }
812
813 .ays-chart-charts-change-type-type img {
814 cursor: pointer;
815 }
816
817 /* Manual chart data type start */
818
819 .ays-chart-chart-source-data-main{
820 width: 100%;
821 max-width: 100%;
822 }
823
824 .ays-chart-chart-source-data-main .ays-chart-chart-source-data-input-box{
825 padding: 10px;
826 /* border-right: 1px solid #B8B8B8; */
827 }
828 .ays-chart-chart-source-data-input-box.ays-chart-chart-source-data-input-number,
829 .ays-chart-chart-source-data-edit-block[data-source-id="0"] .ays-chart-chart-source-title-box:not(:nth-child(2)) {
830 border-left: 1px solid #B8B8B8;
831 /* width: 30%; */
832 max-width: 120px;
833 }
834 .ays-chart-empty-data-table-cell {
835 height: 77.11px;
836 padding: 0 33px;
837 background: #efefef;
838 /* position: sticky;
839 left: 0;
840 z-index: 1; */
841 }
842
843 .ays-chart-chart-source-title-box {
844 text-align: center;
845 padding-top: 0 !important;
846 }
847
848 .ays-chart-chart-source-title-box:nth-child(2), .ays-chart-chart-source-data-name-input-box {
849 background: #ffffff;
850 width: 100%;
851 /* position: sticky;
852 left: 30px;
853 z-index: 1; */
854 }
855
856 .ays-chart-chart-source-data-input-number>input,
857 .ays-chart-chart-source-data-edit-block[data-source-id="0"] .ays-chart-chart-source-title-box:not(:nth-child(2))>input {
858 width: 100%;
859 min-width: 90px;
860 max-width: 100%;
861 }
862
863 .ays-chart-chart-source-data-edit-block[data-source-id="0"]>div {
864 border-bottom: 1px solid #B8B8B8;
865 background-color: #efefef;
866 }
867
868 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box{
869 padding: 10px;
870 cursor: pointer;
871 background: #ffffff;
872 /* position: sticky;
873 left: 0;
874 z-index: 1; */
875 }
876
877 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box{
878 padding: 10px;
879 cursor: pointer;
880 }
881
882 .ays-chart-chart-source-data-remove-block:focus {
883 outline: none !important;
884 }
885
886 .ays-chart-chart-source-data-main .ays-chart-icons-remove-box .ays-chart-chart-source-data-remove-block {
887 width: 10px;
888 }
889
890 .ays-chart-chart-source-data-content-container {
891 display: flex;
892 justify-content: left;
893 align-items: flex-start;
894 }
895 .ays-chart-chart-source-data-content {
896 /* border-top-left-radius: 8px; */
897 /* border-bottom-left-radius: 8px; */
898 /* border-left-width: 5px; */
899 /* border-left-style: solid; */
900 /* border-right: 1px solid #B8B8B8; */
901 border: 1px solid #B8B8B8;
902 width: 80%;
903 overflow: auto;
904 }
905
906 .ays-chart-chart-source-data-edit-block:nth-of-type(even) {
907 background-color: #fff;
908 }
909 .ays-chart-chart-source-data-edit-block {
910 display: flex;
911 align-items: center;
912 /* justify-content: space-between; */
913 }
914 .ays-chart-chart-source-data-input-box:not(.ays-chart-chart-source-data-input-number)>input {
915 min-width: 100px;
916 width: 100%;
917 }
918 .ays-chart-chart-source-data-move-row {
919 cursor: move;
920 padding: 10px;
921 }
922 .ays-chart-chart-source-title-input:first-child() {
923 width: 100%;
924 min-width: 100px;
925 }
926 .ays-chart-chart-source-data-titles-box-item {
927 display: flex;
928 justify-content: center;
929 align-items: center;
930 gap: 5px;
931 min-width: 90px;
932 }
933 .ays-chart-chart-source-data-sort {
934 cursor: pointer;
935 }
936
937 /* .ays-chart-chart-source-data-edit-block:first-child {
938 border-top: 1px solid #B8B8B8;
939 }
940
941 .ays-chart-chart-source-data-edit-block:last-child {
942 border-bottom: 1px solid #B8B8B8;
943 } */
944
945 .ays-chart-chart-source-data-main .ays-chart-icons-box img,
946 .ays-chart-chart-source-data-main .ays-chart-icons-box.ays-chart-add-new-row-box,
947 .ays-chart-chart-source-data-main .ays-chart-icons-box.ays-chart-add-new-column-box {
948 cursor: pointer;
949 }
950
951 .ays-chart-icons-box.ays-chart-add-new-row-box,
952 .ays-chart-icons-box.ays-chart-add-new-column-box {
953 font-size: 15px;
954 border: 1px solid #B8B8B8;
955 width: fit-content;
956 padding: 7px;
957 margin-top: 5px;
958 border-radius: 5px;
959 }
960 .ays-chart-icons-box.ays-chart-add-new-column-box {
961 margin-top: 0;
962 margin-left: 5px;
963 }
964
965 /* Manual chart data type end */
966
967 /* Quiz maker integration start */
968
969 .ays-chart-select-quiz-maker-quiz-container {
970 margin-top: 15px;
971 display: none;
972 }
973
974 #ays-chart-quiz-maker-error {
975 color: #f00;
976 }
977 #ays-chart-quiz-maker-success {
978 color: #009a00;
979 }
980
981 #select2-ays-chart-select-quiz-maker-data-query-results .select2-results__option:nth-child(n+8) {
982 color: #939393db;
983 cursor: context-menu;
984 }
985
986 #select2-ays-chart-select-quiz-maker-data-query-results .select2-results__option:nth-child(n+8).select2-results__option--highlighted {
987 background-color: #ffffff;
988 }
989
990 #ays-chart-quiz-maker-form .select2.select2-container{
991 width: 100%!important;
992 }
993
994 .ays-chart-select-quiz-maker-data-query-container {
995 display: flex;
996 gap: 3px;
997 align-items: center;
998 }
999
1000 /* Quiz maker integration end */
1001
1002 /* WOOCOMMERCE INTEGRATION START*/
1003
1004 .ays-chart-woocommerce-datas-query-container{
1005 display:flex;
1006 gap:10px;
1007 align-items:center;
1008 }
1009
1010 .ays-chart-woocommerce-datas-error {
1011 color: #f00;
1012 }
1013 .ays-chart-woocommerce-datas-success {
1014 color: #009a00;
1015 }
1016
1017 /* WOOCOMMERCE INTEGRATION END*/
1018
1019 /*.ays-chart-nav-tab-wrapper.nav-tab-wrapper {*/
1020 /* border-bottom: none;*/
1021 /* padding-top: 0;*/
1022 /* background: #ffffff;*/
1023 /* margin-bottom: 10px;*/
1024 /*}*/
1025 /*.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 {*/
1026 /* border-bottom: 2px solid #008cff;*/
1027 /* background: #ffffff;*/
1028 /* color: #008cff;*/
1029 /*}*/
1030 /*.ays-chart-nav-tab:focus, .ays-chart-nav-tab:hover {*/
1031 /* background: #ffffffbe;*/
1032 /*}*/
1033 /*.ays-chart-nav-tab-wrapper>.ays-chart-nav-tab.nav-tab-active {*/
1034 /* border-bottom: 2px solid #008cff;*/
1035 /* background: #ffffff;*/
1036 /* color: #008cff;*/
1037 /*}*/
1038 /*.ays-chart-nav-tab-wrapper>.ays-chart-nav-tab {*/
1039 /* border: none;*/
1040 /* border-bottom: 2px solid #c4c4c4;*/
1041 /* margin-left: 0;*/
1042 /* padding: 7px 0;*/
1043 /* text-align: center;*/
1044 /* font-size: 16px;*/
1045 /* background: #ffffff;*/
1046 /* color: #c4c4c4;*/
1047 /* width: 50%;*/
1048 /* display: inline-block;*/
1049 /*}*/
1050
1051 /* Settings tab start */
1052
1053 /*.ays-tab-content#settings {*/
1054 /* border-left: 2px solid #008cff;*/
1055 /*}*/
1056 .ays-chart-settings-tab-section {
1057 display: flex;
1058 justify-content: flex-start;
1059 align-items: center;
1060 background-color: #ffffff;
1061 padding: 10px 0 10px 5px;
1062 cursor: pointer;
1063 }
1064 .ays-chart-tab-subtitle {
1065 margin: 0 0 0 5px;
1066 font-size: 13px;
1067 }
1068 .ays-chart-options-section-title {
1069 font-size: 16px;
1070 font-weight: bold;
1071 text-indent: 20px;
1072 }
1073 .ays-chart-settings-tab-section-collapsed {
1074 display: none;
1075 padding: 10px 20px;
1076 background-color: #ffffff;
1077 }
1078 /* .ays-chart-options-section:not(:last-child) {
1079 margin-bottom: 10px;
1080 } */
1081 .ays-chart-options-section {
1082 width: 100%;
1083 height: fit-content;
1084 border-radius: 10px;
1085 background-color: #f8f8f8;
1086 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1087 display: flex;
1088 justify-content: space-between;
1089 align-items: center;
1090 padding: 10px 15px;
1091 }
1092 .ays-chart-animation-options-section {
1093 height: fit-content;
1094 padding: 10px 15px;
1095 }
1096 .ays-chart-option-title>label {
1097 font-size: 14px;
1098 margin-bottom: 0;
1099 }
1100 .ays-chart-option-input {
1101 display: flex;
1102 align-items: center;
1103 justify-content: flex-end;
1104 /* width: 65%; */
1105 }
1106 .ays-chart-option-input>.ays-chart-option-text-input {
1107 width: 100%;
1108 height: 30px!important;
1109 padding: 0px 8px;
1110 border: none;
1111 background-color: #ffffff;
1112 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1113 margin-top: 0!important;
1114 }
1115 .ays-chart-option-input>.ays-chart-option-textarea-input {
1116 resize: none!important;
1117 width: 100%;
1118 height: 70px!important;
1119 padding: 5px 8px;
1120 border: none;
1121 background-color: #ffffff;
1122 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1123 margin-top: 0!important;
1124 }
1125 div.ays-chart-options-section input[type="color"].ays-chart-option-color-picker {
1126 height: 30px;
1127 width: 50px;
1128 padding: 0;
1129 border-radius: 4px;
1130 border: 0!important;
1131 }
1132 .ays-chart-option-input input::placeholder {
1133 font-size: 13px;
1134 color: #b3b3b3;
1135 }
1136
1137 .ays-chart-option-desc-box {
1138 border-radius: 4px;
1139 background-color: #ffffff;
1140 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1141 margin-left: 10px;
1142 width: 30px;
1143 height: 30px;
1144 font-weight: bold;
1145 font-size: 15px;
1146 color: #b3b3b3;
1147 text-align: center;
1148 line-height: 28px;
1149 }
1150
1151 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select {
1152 border-radius: 4px;
1153 background-color: #ffffff;
1154 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%);
1155 margin-left: 10px;
1156 margin-top: 0;
1157 width: 60px;
1158 }
1159 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select:hover {
1160 background-color: #f0f0f0;
1161 }
1162 .ays-chart-option-width-format-change.ays-chart-option-select-input.form-select:focus {
1163 outline: none !important;
1164 box-shadow: 0px 1px 2px rgb(0 0 0 / 20%) !important;
1165 }
1166
1167 /* .ays-chart-option-input>span {
1168 font-size: 18px;
1169 font-weight: bold;
1170 color: #008cff;
1171 } */
1172
1173 .ays-chart-range-slider input[type="range"] {
1174 appearance: none!important;
1175 -webkit-appearance: none!important;
1176 margin: 0 6px;
1177 width: 100%;
1178 height: 2px;
1179 background-color: #666666;
1180 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #008cff), color-stop(100%, #008cff));
1181 background-size: 50% 100%;
1182 background-repeat: no-repeat;
1183 border: none;
1184 outline: none;
1185 }
1186 .ays-chart-range-slider input[type="range"]::-webkit-slider-thumb {
1187 appearance: none!important;
1188 -webkit-appearance: none!important;
1189 width: 10px;
1190 height: 10px;
1191 background: #008cff;
1192 border: 2px solid #008cff;
1193 border-radius: 50%;
1194 cursor: pointer;
1195 }
1196 .ays-chart-range-slider {
1197 position: relative;
1198 }
1199 #ays-chart-range-value {
1200 position: absolute;
1201 top: -50%;
1202 left: 89px;
1203 display: none;
1204 }
1205 #ays-chart-range-value span{
1206 display: block;
1207 width: fit-content;
1208 height: fit-content;
1209 background: transparent;
1210 color: #008cff;
1211 font-size: 12px;
1212 font-weight: bold;
1213 }
1214
1215 .ays-chart-option-input>.ays-chart-option-select-input {
1216 width: 100%;
1217 height: 30px;
1218 line-height: 28px;
1219 }
1220
1221 select.ays-chart-option-select-input.form-select {
1222 max-width: 100%;
1223 }
1224
1225 .ays-chart-input-align-right {
1226 text-align: right;
1227 display: flex;
1228 justify-content: flex-end;
1229 align-items: center;
1230 }
1231 .ays-chart-toggle-switch-switch {
1232 position: relative;
1233 display: inline-block;
1234 width: 36px;
1235 height: 20px;
1236 }
1237 .ays-chart-toggle-switch-switch .ays-chart-toggle-switch {
1238 opacity: 0;
1239 width: 0;
1240 height: 0;
1241 }
1242 .ays-chart-toggle-switch-slider {
1243 position: absolute;
1244 cursor: pointer;
1245 top: 0;
1246 left: 0;
1247 right: 0;
1248 bottom: 0;
1249 background-color: #cccccc;
1250 -webkit-transition: .4s;
1251 transition: .4s;
1252 }
1253 .ays-chart-toggle-switch-slider:before {
1254 position: absolute;
1255 content: "";
1256 height: 18px;
1257 width: 18px;
1258 left: 1px;
1259 bottom: 1px;
1260 background-color: white;
1261 -webkit-transition: .4s;
1262 transition: .4s;
1263 }
1264 .ays-chart-toggle-switch:checked + .ays-chart-toggle-switch-slider {
1265 background-color: #008cff;
1266 }
1267 .ays-chart-toggle-switch:focus + .ays-chart-toggle-switch-slider {
1268 box-shadow: 0 0 1px #008cff;
1269 }
1270 .ays-chart-toggle-switch:checked + .ays-chart-toggle-switch-slider:before {
1271 -webkit-transform: translateX(16px);
1272 -ms-transform: translateX(16px);
1273 transform: translateX(16px);
1274 }
1275 .ays-chart-toggle-switch-slider.ays-chart-toggle-switch-round {
1276 border-radius: 34px;
1277 }
1278 .ays-chart-toggle-switch-slider.ays-chart-toggle-switch-round:before {
1279 border-radius: 50%;
1280 }
1281
1282 /* Settings tab end */
1283
1284
1285
1286 /*
1287 ==========================================
1288 Settings page styles
1289 ==========================================
1290 */
1291 .ays-settings-wrapper {
1292 display: flex;
1293 }
1294 .ays-settings-wrapper .nav-tab-wrapper {
1295 display: flex;
1296 flex-direction: column;
1297 min-width: 150px;
1298 margin-right: 15px;
1299 border-bottom: none;
1300 }
1301 .ays-settings-wrapper .nav-tab-wrapper .nav-tab {
1302 display: block;
1303 width: 100%;
1304 border: 1px solid #ccc;
1305 margin: 0;
1306 float: none !important;
1307 }
1308 .ays-settings-wrapper .nav-tab-wrapper .nav-tab:last-child {
1309 border-bottom: 1px solid #ccc;
1310 }
1311 .ays-settings-wrapper .ays-chart-tabs-wrapper {
1312 width: 100%;
1313 border-left: 1px solid #ccc;
1314 padding-left: 15px;
1315 }
1316 .ays-settings-wrapper .ays-chart-tabs-wrapper p.ays-subtitle {
1317 margin-top: 0;
1318 }
1319
1320 .go_back{
1321 color: black;
1322 margin-right: 10px;
1323 }
1324
1325 .chart_div {
1326 /*width: 100%;
1327 height: 500px;*/
1328 margin: auto;
1329 }
1330
1331 .ays-tab-content fieldset,
1332 .ays-settings-wrapper fieldset {
1333 border: 1px solid #aaa;
1334 padding: 10px;
1335 }
1336
1337 .ays-tab-content legend,
1338 .ays-settings-wrapper legend {
1339 width: auto;
1340 padding: 0 5px;
1341 }
1342
1343 .ays-settings-wrapper legend {
1344 float: none;
1345 }
1346
1347 .ays-tab-content legend h5,
1348 .ays-settings-wrapper legend h5 {
1349 display: inline-block;
1350 margin-left: 10px;
1351 }
1352
1353 .ays_integration_logo {
1354 width: 50px;
1355 height: auto;
1356 vertical-align: middle !important;
1357 }
1358
1359
1360 p.ays-subtitle{
1361 margin-top: 20px;
1362 font-size: 18px;
1363 font-weight: 500;
1364 display:flex;
1365 gap:20px;
1366 align-items: center;
1367 }
1368
1369 p.submit{
1370 display: inline;
1371 margin-right: 10px;
1372 }
1373
1374 .button.ays-button {
1375 margin: 0;
1376 margin-left: 10px;
1377 }
1378
1379 .w-100 {
1380 width: 100px;
1381 }
1382
1383 .display_none {
1384 display: none !important;
1385 }
1386 .display_none_not_important {
1387 display: none;
1388 }
1389 .display_block {
1390 display: block !important;
1391 }
1392 .shortcode.column-shortcode input {
1393 width: 100%;
1394 }
1395
1396
1397 /*
1398 * Select2
1399 */
1400 .select2 {
1401 display: inline-block!important;
1402 z-index: 0 !important;
1403 }
1404 #quest_cat_container .select2 {
1405 display: block!important;
1406 }
1407
1408
1409 .select2-selection.select2-selection--single{
1410 height: 40px!important;
1411 border: 1px solid #ddd!important;
1412 box-shadow: inset 0 1px 2px rgba(0,0,0,.07)!important;
1413 }
1414
1415 .select2-container--default .select2-selection--single .select2-selection__rendered {
1416 line-height: 35px!important;
1417 }
1418
1419 .select2-container--default .select2-selection--single .select2-selection__arrow {
1420 height: 40px!important;
1421 }
1422
1423 .select2.select2-container{
1424 width: 200px!important;
1425 }
1426
1427 .ays-chart-general-settings .select2.select2-container{
1428 width: 100%!important;
1429 }
1430
1431 /*
1432 * Select2 multiple
1433 */
1434
1435 .select2-selection--multiple {
1436 font-size: 16px;
1437 min-height: 40px !important;
1438 border-radius: 4px;
1439 margin-top: -5px;
1440 min-width: 150px;
1441 border-color: #ddd;
1442 }
1443
1444 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1445 border-color: #5b9dd9;
1446 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1447 outline: 2px solid transparent;
1448 }
1449
1450 .select2.select2-container {
1451 width: 100%;
1452 }
1453
1454 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1455 margin-top: 1px !important;
1456 padding: 0 5px !important;
1457 margin-bottom: 8px !important;
1458 }
1459
1460 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1461 overflow: hidden;
1462 padding-top: 5px;
1463 }
1464
1465 .select2-selection--single {
1466 height: 100% !important;
1467 }
1468 .select2-selection__rendered{
1469 word-wrap: break-word !important;
1470 text-overflow: inherit !important;
1471 white-space: normal !important;
1472 }
1473 /*
1474 * Select2 multiple
1475 */
1476
1477 .select2-selection--multiple {
1478 font-size: 16px;
1479 min-height: 40px !important;
1480 border-radius: 4px;
1481 margin-top: -5px;
1482 min-width: 150px;
1483 border-color: #ddd;
1484 }
1485
1486 .select2.select2-container.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {
1487 border-color: #5b9dd9;
1488 box-shadow: 0 0 2px rgba(30, 140, 190, .8);
1489 outline: 2px solid transparent;
1490 }
1491
1492 /* .select2.select2-container {
1493 width: 100%!important;
1494 } */
1495 .select2-container--default .select2-selection--multiple {
1496 min-height: 50px !important;
1497 }
1498 .select2-container--default .select2-selection--multiple .select2-selection__choice {
1499 margin-top: 4px!important;
1500 padding: 5px!important;
1501 margin-bottom: 0!important;
1502
1503 }
1504 .select2-container--default .select2-selection--multiple .select2-selection__rendered {
1505 height: auto;
1506 overflow: visible;
1507 }
1508
1509 .select2-container--default .select2-search--inline .select2-search__field {
1510 background: transparent;
1511 border: none !important;
1512 outline: none !important;
1513 box-shadow: none !important;
1514 width: 100% !important;
1515 }
1516
1517
1518 /**
1519 * Accordion options styles
1520 */
1521
1522 fieldset.ays-accordion-options-container,
1523 fieldset.ays-series-accordion-options-container,
1524 fieldset.ays-rows-accordion-options-container,
1525 fieldset.ays-slices-accordion-options-container {
1526 border: none;
1527 padding: 0;
1528 border-left: 2px solid #008cff;
1529 background-color: #ffffff;
1530 margin-bottom: 5px;
1531 }
1532
1533 fieldset.ays-accordion-options-container legend.ays-accordion-options-header,
1534 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header,
1535 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header,
1536 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header {
1537 width: 100%;
1538 height: 45px;
1539 margin: 0;
1540 display: flex;
1541 align-items: center;
1542 justify-content: flex-start;
1543 cursor: pointer;
1544 user-select: none;
1545 position: relative;
1546 padding-left: 36px;
1547 }
1548
1549 fieldset.ays-accordion-options-container legend.ays-accordion-options-header svg.ays-accordion-arrow,
1550 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header svg.ays-series-accordion-arrow,
1551 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header svg.ays-rows-accordion-arrow,
1552 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header svg.ays-slices-accordion-arrow {
1553 width: 20px;
1554 height: 20px;
1555 position: absolute;
1556 top: 13px;
1557 left: 10px;
1558 }
1559
1560 fieldset.ays-accordion-options-container legend.ays-accordion-options-header span,
1561 fieldset.ays-series-accordion-options-container legend.ays-series-accordion-options-header span,
1562 fieldset.ays-rows-accordion-options-container legend.ays-rows-accordion-options-header span,
1563 fieldset.ays-slices-accordion-options-container legend.ays-slices-accordion-options-header span {
1564 /* font-family: Arial;*/
1565 font-size: 13px;
1566 color: #595959;
1567 text-decoration: none solid rgb(89, 89, 89);
1568 line-height: 1;
1569 }
1570
1571 fieldset.ays-accordion-options-container div.ays-accordion-options-content,
1572 fieldset.ays-series-accordion-options-container div.ays-series-accordion-options-content,
1573 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-options-content,
1574 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-options-content {
1575 width: 100%;
1576 /* transition: all .25s ease; */
1577 /* max-height: 500px; */
1578 }
1579
1580 fieldset.ays-accordion-options-container div.ays-accordion-data-main-wrap,
1581 fieldset.ays-series-accordion-options-container div.ays-series-accordion-data-main-wrap,
1582 fieldset.ays-rows-accordion-options-container div.ays-rows-accordion-data-main-wrap,
1583 fieldset.ays-slices-accordion-options-container div.ays-slices-accordion-data-main-wrap {
1584 padding: 10px 20px 20px 36px;
1585 }
1586
1587 fieldset.ays-accordion-options-container[data-collapsed="true"] div.ays-accordion-options-content,
1588 fieldset.ays-series-accordion-options-container[data-collapsed="true"] div.ays-series-accordion-options-content,
1589 fieldset.ays-rows-accordion-options-container[data-collapsed="true"] div.ays-rows-accordion-options-content,
1590 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] div.ays-slices-accordion-options-content {
1591 display: none;
1592 }
1593
1594 fieldset.ays-accordion-options-container[data-collapsed="true"],
1595 fieldset.ays-series-accordion-options-container[data-collapsed="true"],
1596 fieldset.ays-rows-accordion-options-container[data-collapsed="true"],
1597 fieldset.ays-slices-accordion-options-container[data-collapsed="true"] {
1598 border-left: 2px solid #c4c4c4;
1599 }
1600 fieldset.ays-accordion-options-container[data-collapsed="false"],
1601 fieldset.ays-series-accordion-options-container[data-collapsed="false"],
1602 fieldset.ays-rows-accordion-options-container[data-collapsed="false"],
1603 fieldset.ays-slices-accordion-options-container[data-collapsed="false"] {
1604 border-left: 2px solid #008cff;
1605 }
1606
1607 .ays-accordion-arrow,
1608 .ays-series-accordion-arrow,
1609 .ays-rows-accordion-arrow,
1610 .ays-slices-accordion-arrow {
1611 transition: .3s ease;
1612 }
1613 .ays-accordion-arrow-down,
1614 .ays-series-accordion-arrow-down,
1615 .ays-rows-accordion-arrow-down,
1616 .ays-slices-accordion-arrow-down {
1617 transform: rotate(90deg);
1618 }
1619
1620 /*
1621 * Chosen selects
1622 */
1623 .ays-chart-chart-source-data-main select {
1624 height: 55px;
1625 max-height: 55px;
1626 margin: 0;
1627 padding: 16px 20px;
1628 color: #555;
1629 box-shadow: none;
1630 }
1631
1632 .ays-chart-chart-source-data-main select:focus,
1633 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1634 .ays-chart-chart-source-data-main .chosen-container .chosen-drop,
1635 .ays-chart-chart-source-data-main input {
1636 outline: none;
1637 box-shadow: none;
1638 }
1639
1640 .ays-chart-chart-source-data-main .chosen-container-active .chosen-choices,
1641 .ays-chart-chart-source-data-main .chosen-container-active .chosen-results {
1642 border-color: #5b9dd9 !important;
1643 }
1644
1645 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1646 color: #555;
1647 }
1648
1649 .ays-chart-chart-source-data-main .chosen-container .chosen-drop {
1650 display: none;
1651 left: 20px;
1652 padding-right: 20px;
1653 border: none;
1654 }
1655
1656 .ays-chart-chart-source-data-main .chosen-container.chosen-container-active .chosen-drop {
1657 display: block;
1658 }
1659
1660 .ays-chart-chart-source-data-main .chosen-container .chosen-drop .chosen-results {
1661 border: 1px solid #ddd;
1662 border-top: none;
1663 }
1664
1665 .ays-chart-chart-source-data-main .chosen-container .chosen-results li {
1666 padding: 10px;
1667 border-bottom: 1px solid #eee;
1668 }
1669
1670 .ays-chart-chart-source-data-main .chosen-container .chosen-results li:last-child {
1671 border-bottom: none;
1672 }
1673
1674 .ays-chart-chart-source-data-main .chosen-container .chosen-results li.highlighted {
1675 background: #0085ba;
1676 }
1677
1678 #filter-wizard-rules {
1679 display: table;
1680 width: 100%;
1681 }
1682
1683 #visualizer-post-types {
1684 display: table-cell;
1685 width: 200px;
1686 }
1687
1688 .ays-chart-chart-source-data-main .chosen-container {
1689 display: table-cell;
1690 box-sizing: border-box;
1691 width: 100% !important;
1692 padding-left: 20px;
1693 }
1694
1695 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices {
1696 height: 55px !important;
1697 max-height: 55px;
1698 padding: 12px 20px;
1699 border: 1px solid #ddd;
1700 background-image: none;
1701 }
1702
1703 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice {
1704 height: 30px;
1705 margin: 0 10px 0 0;
1706 padding: 7px 25px 10px 10px;
1707 border: none;
1708 color: #fff;
1709 background: #0085ba;
1710 box-shadow: none;
1711 line-height: 1;
1712 }
1713
1714 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1715 display: inline-block;
1716 top: 6px;
1717 right: 4px;
1718 width: 18px;
1719 height: 18px;
1720 color: #9acadd;
1721 font-family: dashicons;
1722 font-size: 18px;
1723 }
1724
1725 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
1726 color: #fff;
1727 }
1728
1729 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:before {
1730 content: "\f335";
1731 }
1732
1733 .ays-chart-chart-source-data-main .chosen-container-multi .chosen-choices li.search-field input[type=text] {
1734 height: 29px;
1735 }
1736
1737 #filter-wizard-details {
1738 margin-top: 40px;
1739 padding-top: 40px;
1740 border-top: 1px solid #eee;
1741 }
1742
1743 #filter-wizard table.filter-wizard {
1744 width: 100%;
1745 }
1746
1747 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1748 padding-top: 20px;
1749 }
1750
1751 #filter-wizard-details input,
1752 #filter-wizard-details select {
1753 height: 35px;
1754 padding: 0 15px;
1755 line-height: 1;
1756 }
1757
1758 #filter-wizard-details {
1759 display: none;
1760 }
1761
1762 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1763 background: none;
1764 }
1765
1766 #vz-no-fields {
1767 width: 100%;
1768 margin-top: 50px;
1769 color: #555;
1770 font-size: 18px;
1771 line-height: 1.5;
1772 }
1773
1774 .ays-chart-google-sheet-select-wrap {
1775 padding: 20px 0;
1776 }
1777
1778 svg > g > g.google-visualization-tooltip {
1779 pointer-events: none
1780 }
1781
1782 #filter-wizard-details {
1783 margin-top: 40px;
1784 padding-top: 40px;
1785 border-top: 1px solid #eee;
1786 }
1787
1788 #filter-wizard table.filter-wizard {
1789 width: 100%;
1790 }
1791
1792 #filter-wizard table.filter-wizard tr.filter-wizard-new td {
1793 padding-top: 20px;
1794 }
1795
1796 #filter-wizard-details input,
1797 #filter-wizard-details select {
1798 height: 35px;
1799 padding: 0 15px;
1800 line-height: 1;
1801 }
1802
1803 #filter-wizard-details {
1804 display: none;
1805 }
1806
1807 #visualizer_post_fields_chosen.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
1808 background: none;
1809 }
1810
1811 #vz-no-fields {
1812 width: 100%;
1813 margin-top: 50px;
1814 color: #555;
1815 font-size: 18px;
1816 line-height: 1.5;
1817 }
1818
1819 /******************************************************************************/
1820 /***************************** DB Query Wizard ******************************/
1821 /******************************************************************************/
1822 .db-wizard-condition .select-condition {
1823 display: none;
1824 }
1825
1826 .db-wizard-condition .select-condition.active {
1827 display: block;
1828 max-width: 50%;
1829 margin-top: 10px;
1830 padding-top: 10px;
1831 border-top: 1px solid #eee;
1832 font-weight: 500;
1833 }
1834
1835 #db-wizard-form {
1836 padding: 25px;
1837 }
1838
1839 .db-wizard-query label {
1840 display: block;
1841 min-width: 150px;
1842 padding: 20px 0 5px;
1843 color: rgba(0,0,0,0.85);
1844 font-size: 18px;
1845 font-weight: 500;
1846 }
1847
1848 .db-wizard-query .db-wizard-where label,
1849 .db-wizard-query .db-wizard-from label {
1850 padding-top: 0;
1851 }
1852
1853 .db-wizard-query > div:not(:last-child) {
1854 margin-bottom: 15px;
1855 }
1856
1857 .db-wizard-query .select-condition > div {
1858 display: block;
1859 }
1860
1861 .db-wizard-query .chosen-container {
1862 width: auto;
1863 }
1864
1865 .db-wizard-query .chosen-container-single .chosen-single {
1866 border: 1px solid #ccc;
1867 background: #fff;
1868 box-shadow: none;
1869 font-size: 13px;
1870 font-weight: 500;
1871 }
1872
1873 .db-wizard-templates,
1874 .db-wizard-templates > div {
1875 display: block;
1876 }
1877
1878 .db-wizard-templates > div {
1879 box-sizing: border-box;
1880 width: 50%;
1881 margin-top: 20px;
1882 padding: 20px;
1883 border: 1px solid #efefef;
1884 }
1885
1886 .db-wizard-templates > div:first-child {
1887 margin-top: 0;
1888 }
1889
1890 .db-wizard-query .chosen-container-multi .chosen-choices {
1891 padding: 5px;
1892 border-color: #ccc;
1893 background: #fff;
1894 box-shadow: none;
1895 }
1896
1897 .db-wizard-results .dataTables_wrapper .dataTables_filter input,
1898 .db-wizard-query .select-condition-operand input,
1899 .db-wizard-limit input {
1900 width: 50%;
1901 padding-left: 7px;
1902 border: 1px solid #ccc;
1903 border-radius: 6px;
1904 background: #fff;
1905 box-shadow: none;
1906 font-size: 13px;
1907 }
1908
1909 .db-wizard-limit input {
1910 display: inline;
1911 width: 150px;
1912 margin: 0 0 20px 20px;
1913 }
1914
1915 .db-wizard-limit label {
1916 display: inline;
1917 }
1918
1919 .db-wizard-query .select-condition-operand input::-webkit-input-placeholder {
1920 color: #cdcdcd;
1921 }
1922
1923 .db-wizard-query .select-condition-operand input:-ms-input-placeholder {
1924 color: #cdcdcd;
1925 }
1926
1927 .db-wizard-query .select-condition-operand input::placeholder {
1928 color: #cdcdcd;
1929 }
1930
1931 .db-wizard-query .chosen-container-multi .chosen-choices li.search-choice {
1932 padding: 5px 30px 5px 5px;
1933 border-color: #ccc;
1934 background: #fff;
1935 box-shadow: none;
1936 font-weight: 600;
1937 }
1938
1939 .db-wizard-results table > thead > tr > th {
1940 padding: 15px 8px;
1941 border: none;
1942 color: #252422;
1943 background: #fff;
1944 font-size: 18px;
1945 font-weight: 500;
1946 text-align: left;
1947 }
1948
1949 .db-wizard-results table > tbody > tr > td,
1950 .dataTables_info {
1951 padding: 15px 8px;
1952 border-top: 1px solid #a2a2a2;
1953 color: #252422;
1954 font-size: 14px;
1955 font-weight: 300;
1956 }
1957
1958 .db-wizard-results table > tbody > tr.odd {
1959 background-color: #f7f7f7;
1960 }
1961
1962 .db-wizard-results table.dataTable.no-footer {
1963 border: none;
1964 }
1965
1966 .db-wizard-results .dataTables_wrapper .dataTables_info {
1967 border-top: 1px solid #ccc5b9;
1968 color: #a2a2a2;
1969 font-size: 12px;
1970 font-weight: 500;
1971 }
1972
1973 .db-wizard-results .dataTables_filter label {
1974 font-size: 18px;
1975 font-weight: 500;
1976 }
1977
1978 .db-wizard-where-template-remove,
1979 .db-wizard-where-template-add {
1980 width: auto;
1981 height: 25px;
1982 margin-top: 10px;
1983 border: none;
1984 border-radius: 3px;
1985 color: #fff;
1986 font-size: 12px;
1987 cursor: pointer;
1988 transition: 0.3s ease;
1989 }
1990
1991 .db-wizard-where-template-remove:hover,
1992 .db-wizard-where-template-add:hover {
1993 opacity: 0.8;
1994 }
1995
1996 .db-wizard-results .dataTables_wrapper .dataTables_filter {
1997 float: none;
1998 text-align: left;
1999 }
2000
2001 .db-wizard-where-template-add {
2002 background-color: #34a85e;
2003 }
2004
2005 .db-wizard-where-template-remove {
2006 background-color: #ff0d00;
2007 }
2008
2009 #external-db-query-form .CodeMirror-scroll,
2010 #db-query-form .CodeMirror-scroll {
2011 overflow: hidden !important;
2012 height: 100%;
2013 margin: 0;
2014 padding: 0;
2015 }
2016
2017 #external-db-query-form .CodeMirror-wrap,
2018 #db-query-form .CodeMirror-wrap {
2019 height: 200px;
2020 padding: 15px;
2021 color: #fff;
2022 background: #282923;
2023 font-size: 15px;
2024 }
2025
2026 #external-db-query-form .CodeMirror-wrap .CodeMirror-cursor,
2027 #db-query-form .CodeMirror-wrap .CodeMirror-cursor {
2028 border-left: 1px solid #fff !important;
2029 }
2030
2031 #external-db-query-form .CodeMirror-wrap .CodeMirror-placeholder,
2032 #db-query-form .CodeMirror-wrap .CodeMirror-placeholder {
2033 color: #fff;
2034 }
2035
2036 #external-db-query-form .CodeMirror-wrap pre,
2037 #db-query-form .CodeMirror-wrap pre {
2038 color: #fff !important;
2039 }
2040
2041 #external-db-query-form .CodeMirror-wrap pre .cm-keyword,
2042 #db-query-form .CodeMirror-wrap pre .cm-keyword {
2043 color: #f92472 !important;
2044 }
2045
2046 #external-db-query-form .CodeMirror-wrap pre .cm-comment,
2047 #db-query-form .CodeMirror-wrap pre .cm-comment {
2048 color: #74705d !important;
2049 }
2050
2051 #external-db-query-form .CodeMirror-wrap pre .cm-number,
2052 #external-db-query-form .CodeMirror-wrap pre .cm-string,
2053 #db-query-form .CodeMirror-wrap pre .cm-number,
2054 #db-query-form .CodeMirror-wrap pre .cm-string {
2055 color: #fff !important;
2056 }
2057
2058 .ays-chart-db-query-form > div {
2059 display: block;
2060 /*width: 15%;*/
2061 /* vertical-align: middle; */
2062 }
2063
2064 .ays-chart-db-query-form > div:first-child {
2065 width: 100%;
2066 margin-bottom: 20px;
2067 }
2068 .ays-chart-buttons-group,
2069 .ays-chart-buttons-group-main {
2070 display: flex;
2071 justify-content: flex-start;
2072 align-items: center;
2073 gap: 5px;
2074 }
2075
2076 .ays-chart-db-query-form-button,
2077 .ays-chart-buttons-group {
2078 padding: 15px 5px;
2079 }
2080 .ays-chart-buttons-group {
2081 flex-wrap: wrap;
2082
2083 }
2084
2085 #ays-chart-google-sheet-form .ays-chart-buttons-group {
2086 display: flex;
2087 justify-content: space-between;
2088 }
2089
2090 @media screen and (max-width: 576px) {
2091 .ays-chart-chart-source-data-content-container {
2092 flex-direction: column-reverse;
2093 gap: 5px;
2094 }
2095
2096 .ays-chart-icons-box.ays-chart-add-new-column-box {
2097 margin: 0;
2098 }
2099
2100 .ays-chart-chart-source-data-content {
2101 width: 100%;
2102 }
2103 }
2104
2105 .ays-db-results-wrap {
2106 overflow: hidden;
2107 overflow-x: auto;
2108 }
2109
2110 .db-wizard-error {
2111 color: #f00;
2112 }
2113 .db-wizard-success {
2114 color: #009a00;
2115 }
2116
2117 .db-wizard-hints,
2118 .json-wizard-hints,
2119 .html-table-editor-hints {
2120 margin-bottom: 30px;
2121 color: #0085ba;
2122 }
2123
2124 .db-wizard-hints .ays-chart-emboss,
2125 .db-wizard-hints a,
2126 .html-table-editor-hints a,
2127 .json-wizard-hints .ays-chart-emboss,
2128 .json-wizard-hints a {
2129 color: #f92472;
2130 }
2131
2132 .db-wizard-hints ul,
2133 .html-table-editor-hints ul,
2134 .json-wizard-hints ul {
2135 list-style: square;
2136 }
2137
2138 .db-wizard-results .dataTables_wrapper .dataTables_info {
2139 width: calc(100% - 17px);
2140 }
2141
2142 /*
2143 * Org type manual styles for accordion
2144 */
2145
2146 .ays-chart-chart-source-data-content-org-type #ays-chart-chart-source-data-edit-tree-content {
2147 overflow: auto;
2148 }
2149
2150 .ays-chart-org-chart-tree-description {
2151 color: red;
2152 font-style: italic;
2153 }
2154
2155 .tree-branch {
2156 margin-bottom: 0;
2157 position: relative;
2158 user-select: none;
2159 max-height: 58px;
2160 }
2161
2162 .tree-branch > .contents .branch-wrapper {
2163 background: #fff;
2164 border: 1px solid #fff;
2165 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
2166 border-radius: 3px;
2167 min-height: 20px;
2168 max-width: 450px;
2169 min-width: 200px;
2170 width: 100%;
2171 position: relative;
2172 padding: 10px 15px;
2173 height: auto;
2174 gap: 12px;
2175
2176 overflow: hidden;
2177 word-wrap: break-word;
2178 }
2179
2180 .tree-branch > .contents .branch-wrapper .sidebars {
2181 display: flex;
2182 align-items: center;
2183 justify-content: space-between;
2184 min-height: 50px;
2185 height: 50px;
2186 }
2187
2188 .tree-branch > .contents .branch-wrapper .left-sidebar {
2189 display: flex;
2190 gap: 12px;
2191 align-items: center;
2192 max-width: 150px;
2193 width: 100%;
2194 }
2195
2196 .ays-chart-builder-active-options {
2197 border-radius: 15px !important;
2198 background-color: #dddddd !important;
2199 box-shadow: -1px 7px 2px 0 rgb(0 0 0 / 15%) !important;
2200 }
2201
2202 .right-sidebar {
2203 opacity: 0;
2204 transition: 0.3s;
2205 display: flex;
2206 flex-wrap: wrap;
2207 justify-content: flex-end;
2208 gap: 3px;
2209 }
2210
2211 .right-sidebar .button {
2212 width: 40px;
2213 height: 40px;
2214 padding: 0;
2215 display: flex;
2216 justify-content: center;
2217 align-items: center;
2218 min-height: 25px;
2219 min-width: 25px;
2220 }
2221
2222 @media screen and (max-width: 1000px) {
2223 .sidebars .right-sidebar .button {
2224 width: 30px;
2225 height: 30px;
2226 }
2227 .sidebars .left-sidebar .branch-title {
2228 font-size: 13px;
2229 }
2230 }
2231
2232 .branch-wrapper:hover .right-sidebar {
2233 opacity: 1;
2234 }
2235
2236 .tree-branch > .contents .branch-wrapper .left-sidebar {
2237 cursor: pointer;
2238 }
2239
2240 .tree-branch > .contents {
2241 clear: both;
2242 line-height: 1.5;
2243 position: relative;
2244 margin: 5px 0 0;
2245 }
2246
2247 .contents .branch-drag-handler {
2248 cursor: move;
2249 }
2250
2251 .branch-drag-handler .icon {
2252 color: #504e4e;
2253 margin-right: 5px;
2254 }
2255 .sortable-placeholder {
2256 border: 1px dashed rgb(63, 63, 63);
2257 height: 35px;
2258 max-width: 450px;
2259 width: 100%;
2260 margin-top: 10px;
2261 }
2262
2263 .tree-branch.ui-sortable-helper .contents {
2264 margin-top: 0;
2265 }
2266
2267 .tree-branch.ui-sortable-helper .children-bus .contents {
2268 margin-top: 10px;
2269 }
2270
2271 .tree-branch .children-bus:empty {
2272 display: none;
2273 }
2274
2275 .tree-branch {
2276 margin-left: var(--tree-sortable-branch-left-shift);
2277 }
2278 .children-bus {
2279 margin-left: var(--tree-sortable-children-left-shift);
2280 }
2281
2282 .ui-sortable-placeholder {
2283 margin-left: var(--tree-sortable-branch-left-shift);
2284 }
2285
2286 .branch-path {
2287 display: block;
2288 position: absolute;
2289 width: var(--tree-sortable-depth);
2290 min-height: 72px;
2291 bottom: 50%;
2292 left: -12px;
2293 border: 2px solid #565656;
2294 border-top: 0;
2295 border-right: 0;
2296 padding: 4px 0 0;
2297 padding-top: 3px;
2298 border-bottom-left-radius: 6px;
2299 z-index: -1;
2300 }
2301 .right-sidebar .fa.fa-caret-down {
2302 transition: 0.3s;
2303 }
2304
2305 .transform-open-close-icon {
2306 transform: rotate(180deg);
2307 }
2308
2309 .ays-chart-org-chart-manual-branch-options-container {
2310 margin-top: 10px;
2311 padding-top: 10px;
2312 }
2313
2314 .ays-chart-org-chart-branch-main-options-box {
2315 display: flex;
2316 justify-content: space-between;
2317 align-items: center;
2318 }
2319
2320 .ays-chart-org-chart-manual-branch-options-left-box {
2321 padding: 0 20px;
2322 }
2323
2324 .ays-chart-org-chart-manual-branch-options-rigth-box {
2325 padding: 10px 20px 5px;
2326 text-align: end;
2327 }
2328
2329 @media screen and (max-width: 1200px){
2330 .ays-chart-org-chart-branch-main-options-box {
2331 flex-direction: column;
2332 align-items: flex-start;
2333 }
2334
2335 .ays-chart-org-chart-branch-main-options-box input{
2336 width: 100%;
2337 }
2338 }
2339
2340 /* Featured Plugins Start */
2341
2342 .card img {
2343 width: 128px;
2344 margin: auto;
2345 }
2346
2347 .coming-soon span {
2348 font-size: 25px;
2349 font-weight: 600;
2350 background: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
2351 -webkit-background-clip: text;
2352 background-clip: text;
2353 -webkit-text-fill-color: transparent;
2354 }
2355
2356 .comparison {
2357 max-width: 100%;
2358 margin: 0 auto;
2359 margin-bottom: 20px;
2360 margin-top: 30px;
2361 font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
2362 text-align: center;
2363 padding: 10px;
2364 }
2365
2366 .comparison table {
2367 width: 100%;
2368 border-collapse: collapse;
2369 border-spacing: 0;
2370 table-layout: auto;
2371 }
2372
2373 .comparison td,
2374 .comparison th {
2375 border-right: 1px solid #E8E8E8;
2376 empty-cells: show;
2377 padding: 10px;
2378 border-top: 1px solid #E8E8E8;
2379 border-bottom: 1px solid #E8E8E8;
2380 color: #808080;
2381 font-size: 15px;
2382 }
2383
2384 .comparison tbody tr:nth-child(odd):not(:last-child) {
2385 display: none;
2386 }
2387
2388 .comparison .compare-row {
2389 background: #F7F7F7;
2390 }
2391
2392 .ays_fa_check {
2393 color: #69C7F1;
2394 }
2395
2396 .comparison th {
2397 font-weight: normal;
2398 padding: 0;
2399 border-top: 0px solid #E8E8E8;
2400 border-bottom: 0px solid #E8E8E8;
2401 }
2402
2403 .comparison tr td:first-child {
2404 text-align: left;
2405 padding: 15px;
2406 border-left: 1px solid #E8E8E8;
2407 border-top: 1px solid #E8E8E8;
2408 }
2409
2410 .comparison .product,
2411 .comparison .tl {
2412 color: #FFF;
2413 padding: 10px;
2414 font-size: 14px;
2415 }
2416
2417 .comparison .tl2 {
2418 border-right: 0;
2419 }
2420
2421 .comparison .product {
2422 background: #69C7F1;
2423 height: 40px;
2424 font-size: 3.5vw;
2425 }
2426
2427 @media screen and (min-width: 769px) {
2428 .ays-chart-features-wrap .comparison .product {
2429 font-size: 1.6em;
2430 }
2431 }
2432
2433 @media screen and (max-width: 768px) {
2434 .comparison .product img {
2435 width: 70px;
2436 }
2437
2438 .comparison a.price-buy{
2439 padding: 5px 10px;
2440 font-size: 11px;
2441 }
2442 }
2443
2444 @media screen and (max-width: 720px) {
2445 .table_ul {
2446 padding: 0px;
2447 }
2448 .table_ul li {
2449 font-size: 10px;
2450 line-height: 16px;
2451 padding: 3px 0;
2452 }
2453 .comparison {
2454 max-width: 100%;
2455 }
2456 .comparison td:first-child,
2457 .comparison th:first-child {
2458 display: none;
2459 }
2460 .comparison tbody tr:nth-child(odd) {
2461 display: table-row !important;
2462 background: #F7F7F7;
2463 }
2464 .comparison .row {
2465 background: #FFF;
2466 }
2467 .comparison td,
2468 .comparison th {
2469 border: 1px solid #CCC;
2470 border-top: none;
2471 padding: 10px;
2472 }
2473 .price-info {
2474 border-top: 0 !important;
2475 padding: 10px 0 !important;
2476 }
2477 .price-info p {
2478 line-height: 8px;
2479 font-size: 8px !important;
2480 }
2481 .comparison .compare-row {
2482 background: #ffffff;
2483 }
2484 .comparison .price-now p {
2485 display: block;
2486 }
2487 .comparison .price-now span {
2488 font-size: 24px !important;
2489 }
2490 .comparison .chart-builder-pracing-table-td-flex span {
2491 font-size: 9px !important;
2492 }
2493 .comparison .qbse {
2494 font-size: 1.2em;
2495 }
2496 .comparison td {
2497 font-size: 14px;
2498 }
2499 .comparison th {
2500 font-size: 14px;
2501 }
2502 }
2503
2504 .comparison .price-info {
2505 padding: 15px;
2506 }
2507
2508 .comparison .price-now,
2509 .comparison .price-now span {
2510 color: #808080;
2511 }
2512
2513 .comparison .price-now span {
2514 font-size: 36px;
2515 color: #545454;
2516 }
2517
2518 .comparison .price-now p {
2519 font-size: 14px;
2520 text-align: center;
2521 line-height: 16px;
2522 display: inline;
2523 }
2524
2525 .comparison .price-buy {
2526 background: #69C7F1;
2527 padding: 10px 20px;
2528 font-size: 14px;
2529 display: inline-block;
2530 color: #fff;
2531 text-decoration: none;
2532 border-radius: 3px;
2533 text-transform: uppercase;
2534 margin: 5px 0 10px 0;
2535 letter-spacing: 1px;
2536 cursor: pointer;
2537 -webkit-transition: .3s all ease;
2538 transition: .3s all ease;
2539 }
2540
2541 .comparison .price-buy:hover {
2542 background: #6BB0DC;
2543 }
2544
2545 .comparison .chart-builder-pracing-table-td-flex {
2546 display: flex;
2547 justify-content: center;
2548 align-items: center;
2549 flex-direction: column;
2550 }
2551
2552 .comparison .chart-builder-pracing-table-td-flex span {
2553 font-size: 11px;
2554 color: #96a3bd;
2555 text-transform: uppercase;
2556 margin-top: 5px;
2557 }
2558
2559 .chart-builder-logo-container-upgrade span.chart-builder-logo-container-one-time-text{
2560 font-size: 11px;
2561 font-style: normal;
2562 font-weight: 600;
2563 line-height: normal;
2564 }
2565
2566 .chart-builder-sm-content-row-sg {
2567 background-color: #ecf6ff;
2568 margin: 70px 0;
2569 }
2570
2571 .chart-builder-sm-main-container-sg * {
2572 margin: 0;
2573 padding: 0;
2574 box-sizing: border-box;
2575 background-repeat: no-repeat;
2576 }
2577
2578 .chart-builder-sm-center-box-sg {
2579 display: flex;
2580 align-items: center;
2581 justify-content: center;
2582 flex-wrap: wrap;
2583 gap: 30px;
2584 }
2585
2586 .chart-builder-sm-guarantee-container-sg {
2587 width: 70%;
2588 margin: auto;
2589 padding: 15px 0;
2590 }
2591
2592 .chart-builder-sm-guarantee-container-sg img {
2593 width: 200px;
2594 /* margin-right: 30px; */
2595 }
2596
2597 .chart-builder-sm-guarantee-text-container-sg {
2598 max-width: 555px;
2599 }
2600
2601 .chart-builder-sm-guarantee-container-sg h3 {
2602 font-size: 32px;
2603 text-transform: uppercase;
2604 color: #5F61FB;
2605 font-weight: 600;
2606 margin-bottom: 20px;
2607 line-height: 35px;
2608 }
2609
2610 .chart-builder-sm-guarantee-container-sg p {
2611 font-size: 14px;
2612 color: #6A6A6A;
2613 line-height: 1.5em;
2614 }
2615
2616 /* Featured Plugins End */
2617
2618 /*How to use Submenu Style Start*/
2619
2620 div#wpbody div.wrap div.ays-chart-heart-beat-main-heading.ays-chart-heart-beat-main-heading-container{
2621 text-align: center;
2622 }
2623
2624 div#wpbody div.wrap div.container-fluid div.ays-chart-our-products-heading.ays-chart-our-products-heading-container{
2625 text-align: center;
2626 }
2627
2628 .ays-chart-faq-main{
2629 max-width: 800px;
2630 margin: auto;
2631 text-align: center;
2632 }
2633 .ays-chart-faq-main p{
2634 color: #212529;
2635 font-size: 18px;
2636 }
2637 .ays-chart-faq-main ol{
2638 color: #3a546f;
2639 }
2640 div.wrap .ays-chart-wp-heading-inline{
2641 font-size: 27px;
2642 color: #364150;
2643 font-weight: 700;
2644 letter-spacing: -1px;
2645 }
2646 .ays-chart-faq-main h2{
2647 color: inherit;
2648 font-size: 22px;
2649 font-weight: 400;
2650 letter-spacing: -1px;
2651 margin-bottom: 20px;
2652 }
2653 .ays-chart-faq-main fieldset{
2654 border:1px solid #ccc;
2655 padding:10px;
2656 width:fit-content;
2657 margin:0 auto;
2658 margin-bottom: 40px;
2659 }
2660 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2661 text-align: left;
2662 }
2663 .ays-chart-p-container p{
2664 font-weight: 600;
2665 }
2666 .ays-chart-ol-container ol {
2667 text-align: left;
2668 }
2669 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2670 border-top: 1px solid #e5ecf6;
2671 }
2672 .ays-chart-asked-question {
2673 margin: 0;
2674 border-bottom: 2px solid #000;
2675 }
2676 .ays-chart-asked-question__header {
2677 cursor: pointer;
2678 display: -webkit-box;
2679 display: -ms-flexbox;
2680 display: flex;
2681 -webkit-box-pack: justify;
2682 -ms-flex-pack: justify;
2683 justify-content: space-between;
2684 align-items: center;
2685 padding: 0 22px;
2686 min-height: 50px;
2687 }
2688 .ays-chart-asked-question__title h4{
2689 font-size: 19px;
2690 color: #23282d;
2691 }
2692 .ays-chart-asked-question__body {
2693 text-align: left;
2694 color: #3a546f;
2695 font-size: 18px;
2696 max-height: 0;
2697 overflow: hidden;
2698 transition: max-height 0.2s ease-out;
2699 padding: 0 22px;
2700 }
2701 .ays-chart-asked-question__arrow {
2702 cursor: pointer;
2703 display: -webkit-box;
2704 display: -ms-flexbox;
2705 display: flex;
2706 -webkit-box-align: center;
2707 -ms-flex-align: center;
2708 align-items: center;
2709 -webkit-box-pack: center;
2710 -ms-flex-pack: center;
2711 justify-content: center;
2712 font-size: 10px;
2713 background: #f7faff;
2714 width: 20px;
2715 height: 20px;
2716 border-radius: 100%;
2717 }
2718
2719 .ays-chart-faq-main .ays-chart-faq-footer{
2720 font-size: 15px;
2721 margin-top: 50px;
2722 }
2723
2724 .wrap h1.ays-chart-builder-wrapper{
2725 text-align: center;
2726 font-size: 40px;
2727 margin-bottom: 20px;
2728 }
2729 .ays_heart_beat i.ays_fa{
2730 color: red!important;
2731 font-weight: bold;
2732 }
2733 .ays_heart_beat {
2734 font-size: 20px;
2735 margin-left: 10px;
2736 }
2737
2738 /*How to use Submenu Style End*/
2739
2740 /* FAQ End */
2741 .ays-chart-faq-main{
2742 max-width: 800px;
2743 margin: auto;
2744 text-align: center;
2745 }
2746 .ays-chart-faq-main p{
2747 color: #212529;
2748 font-size: 18px;
2749 }
2750 .ays-chart-faq-main ol{
2751 color: #3a546f;
2752 }
2753 div.wrap .ays-chart-wp-heading-inline{
2754 font-size: 27px;
2755 color: #364150;
2756 font-weight: 700;
2757 letter-spacing: -1px;
2758 }
2759 .ays-chart-faq-main h2{
2760 color: inherit;
2761 font-size: 22px;
2762 font-weight: 400;
2763 letter-spacing: -1px;
2764 margin-bottom: 20px;
2765 }
2766 .ays-chart-faq-main fieldset{
2767 border:1px solid #ccc;
2768 padding:10px;
2769 width:fit-content;
2770 margin:0 auto;
2771 margin-bottom: 40px;
2772 }
2773 .ays-chart-faq-main fieldset .ays-quyiz-ol-container{
2774 text-align: left;
2775 }
2776 .ays-chart-p-container p{
2777 font-weight: 600;
2778 }
2779 .ays-chart-ol-container ol {
2780 text-align: left;
2781 }
2782 .ays-chart-asked-questions .ays-pro-asked-question:first-child {
2783 border-top: 1px solid #e5ecf6;
2784 }
2785 .ays-chart-asked-question {
2786 margin: 0;
2787 border-bottom: 2px solid #000;
2788 }
2789 .ays-chart-asked-question__header {
2790 cursor: pointer;
2791 display: -webkit-box;
2792 display: -ms-flexbox;
2793 display: flex;
2794 -webkit-box-pack: justify;
2795 -ms-flex-pack: justify;
2796 justify-content: space-between;
2797 align-items: center;
2798 padding: 0 22px;
2799 min-height: 50px;
2800 }
2801 .ays-chart-asked-question__title h4{
2802 font-size: 19px;
2803 color: #23282d;
2804 }
2805 .ays-chart-asked-question__body {
2806 text-align: left;
2807 color: #3a546f;
2808 font-size: 18px;
2809 max-height: 0;
2810 overflow: hidden;
2811 transition: max-height 0.2s ease-out;
2812 padding: 0 22px;
2813 }
2814 .ays-chart-asked-question__arrow {
2815 cursor: pointer;
2816 display: -webkit-box;
2817 display: -ms-flexbox;
2818 display: flex;
2819 -webkit-box-align: center;
2820 -ms-flex-align: center;
2821 align-items: center;
2822 -webkit-box-pack: center;
2823 -ms-flex-pack: center;
2824 justify-content: center;
2825 font-size: 10px;
2826 background: #f7faff;
2827 width: 20px;
2828 height: 20px;
2829 border-radius: 100%;
2830 }
2831
2832 .ays-chart-faq-main .ays-chart-faq-footer{
2833 font-size: 15px;
2834 margin-top: 50px;
2835 }
2836
2837 .wrap h1.ays-chart-builder-wrapper{
2838 text-align: center;
2839 font-size: 40px;
2840 margin-bottom: 20px;
2841 }
2842 .ays_heart_beat i.ays_fa{
2843 color: red!important;
2844 font-weight: bold;
2845 }
2846 .ays_heart_beat {
2847 font-size: 20px;
2848 margin-left: 10px;
2849 }
2850 /* FAQ start */
2851
2852 /* Community start */
2853 @media (min-width: 1250px) {
2854 .ays-chart-community-wrap .ays-chart-community-item {
2855 width:calc(28.3333333% - 13.3333333px)
2856 }
2857
2858 .ays-chart-community-wrap .ays-chart-community-item:nth-child(3n) {
2859 margin-right: 0
2860 }
2861 }
2862
2863 @media (max-width: 1249px) {
2864 .ays-chart-community-wrap .ays-chart-community-item {
2865 width:calc(50% - 10px)
2866 }
2867
2868 .ays-chart-community-wrap .ays-chart-community-item:nth-child(2n) {
2869 margin-right: 0
2870 }
2871 }
2872
2873 @media (max-width: 767px) {
2874 div.ays-chart-community-wrap .ays-chart-community-item {
2875 width:100%;
2876 margin-right: 0
2877 }
2878
2879 div.ays-chart-community-youtube-video iframe {
2880 width: 100%;
2881 }
2882 }
2883
2884 .ays-chart-community-wrap {
2885 text-align: center;
2886 width: 70%;
2887 margin: auto;
2888 margin-bottom: 60px;
2889 }
2890
2891 .ays-chart-community-wrap *,
2892 .ays-chart-community-wrap *::before,
2893 .ays-chart-community-wrap *::after {
2894 -webkit-box-sizing: border-box;
2895 -moz-box-sizing: border-box;
2896 box-sizing: border-box;
2897 }
2898
2899 .ays-chart-community-wrap .ays-chart-community-container {
2900 display: flex;
2901 flex-wrap: wrap;
2902 justify-content: center;
2903 margin: 20px;
2904 margin-top: 40px;
2905 }
2906
2907 .ays-chart-community-wrap .ays-chart-community-item {
2908 /*border: 1px solid #DDDDDD;*/
2909 margin: 0 20px 20px 0;
2910 background-color: #FAF8F8;
2911 position: relative;
2912 box-shadow: 0px 2px 16px 2px rgba(178, 218, 240, 0.25), 0px 4px 16px #FAF8F8;
2913 border-radius: 2px;
2914 }
2915
2916 .ays-chart-community-wrap .ays-chart-community-item-cover {
2917 width: 100%;
2918 height: 120px;
2919 position: relative;
2920 display: block
2921 }
2922
2923 .ays-chart-community-wrap .ays-chart-community-item-img {
2924 width: auto;
2925 height: auto;
2926 max-width: 80px;
2927 max-height: 80px;
2928 position: absolute;
2929 top: 0;
2930 bottom: 0;
2931 left: 0;
2932 right: 0;
2933 margin: auto;
2934 font-size: 70px;
2935 line-height: 80px;
2936 }
2937
2938 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_youtube_play {
2939 color: #B74141;
2940 }
2941
2942 .ays-chart-community-wrap .ays-chart-community-item-img.ays_fa_users {
2943 color: #E78A2C;
2944 }
2945
2946 .ays-chart-community-wrap .ays-chart-community-item-title {
2947 margin: 17px 20px 10px 20px;
2948 font-size: 16px
2949 }
2950
2951 .ays-chart-community-wrap .ays-chart-community-item-desc {
2952 margin: 0 20px 100px 20px;
2953 font-size: 14px
2954 }
2955
2956 .ays-chart-community-wrap .ays-chart-community-item-footer {
2957 position: absolute;
2958 width: 100%;
2959 bottom: 0;
2960 padding: 20px;
2961 /*border-top: 1px solid #dddddd;
2962 background-color: #F7F7F7*/
2963 }
2964
2965 .ays-chart-community-wrap .button {
2966 display: inline-block;
2967 width: 150px;
2968 background-color: #FAF8F8;
2969 color: #1C75A6;
2970 font-weight: bold;
2971 border: 1px solid #0e6897;
2972 padding: 3px 34px;
2973 height: auto;
2974 /*line-height: 13px;*/
2975 /*text-shadow: 1px 1px 1.5px rgba(0,0,0,0.35);*/
2976 transition: 0.5s;
2977 }
2978
2979 .ays-chart-community-wrap .button:hover {
2980 background: #008ec2;
2981 border-color: #006799;
2982 color: #fff;
2983 }
2984
2985 .ays-chart-community-wrap a.ays-chart-community-item-cover:hover {
2986 color: #2271b1;
2987 }
2988
2989 /* Community end */
2990
2991 .ays-chart-create-chart-video-box{
2992 display: flex;
2993 justify-content: space-around;
2994 align-items: center;
2995 flex-direction: column;
2996 /* margin-bottom: 20px !important; */
2997 /* margin-top: 100px !important; */
2998 }
2999
3000 .ays-chart-create-chart-youtube-video:hover {
3001 text-decoration: underline;
3002 }
3003
3004 .ays-chart-create-chart-youtube-video-button-box{
3005 margin: 80px 0 10px 0;
3006 }
3007
3008 .ays-chart-add-new-button-video{
3009 background-color: #2A8EB6;
3010 color: #fff !important;
3011 border-color: #2A8EB6;
3012 outline: none;
3013 text-decoration: none;
3014 border-radius: 4px;
3015 box-shadow: unset;
3016 padding: 10px 30px;
3017 border: 0;
3018 }
3019
3020 .ays-chart-show-on-chart-bttns {
3021 height: 40px;
3022 padding: 0px 12px;
3023 display: flex;
3024 justify-content: center;
3025 align-items: center;
3026 gap: 6px;
3027 border-radius: 6px;
3028 border: 1px solid #14524A;
3029 background: rgba(110, 219, 205, 0.20);
3030 box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
3031 }
3032
3033 .ays-chart-show-on-chart-bttns:hover {
3034 background: rgba(110, 219, 205, 0.40);
3035 }
3036
3037 /* Ask a question box start */
3038
3039 div.ays_ask_question_content {
3040 display: flex;
3041 justify-content: flex-end;
3042 position: fixed;
3043 bottom: 10px;
3044 right: 10px;
3045 z-index: 99999;
3046 }
3047
3048 div.ays_ask_question_content .ays-ask-question-content-inner-hidden-text{
3049 position: absolute;
3050 display: none;
3051 /* display: inline-block; */
3052 opacity: 0;
3053 /* padding: 7px; */
3054 font-size: 16px;
3055 }
3056
3057 div.ays_ask_question_content:hover .ays-ask-question-content-inner-hidden-text{
3058 opacity: 1;
3059 display: inline-block;
3060 position: static;
3061 transition: .5s;
3062 padding: 7px;
3063 }
3064
3065 div.ays_ask_question_content:hover .ays_chart_question_link{
3066 border-radius: 29px;
3067 }
3068
3069 div.ays_ask_question_content .ays-ask-question-content-inner-question-mark-text{
3070 padding: 8px;
3071 background-color: white;
3072 color: #258BB3;
3073 border-radius: 50%;
3074 display: inline-block;
3075 }
3076
3077 div.ays_ask_question_content_inner {
3078 position: relative;
3079 }
3080
3081 a.ays_chart_question_link {
3082 color: white;
3083 font-weight: bold;
3084 box-shadow: unset;
3085 outline: none;
3086 display: flex;
3087 justify-content: center;
3088 align-items: center;
3089 text-align: center;
3090 background-color: #258BB3;
3091 border-radius: 50%;
3092 bottom: 0;
3093 right: 0;
3094 font-size: 18px;
3095 padding: 16px;
3096 display: inline-block;
3097 line-height: 0.5;
3098 text-decoration: none !important;
3099 }
3100
3101 /* Ask a question box end */
3102
3103 /* chart Footer Support box start */
3104 .ays-chart-footer-support-box {
3105 display: block;
3106 clear: both;
3107 text-align: center;
3108 margin: 0px;
3109 }
3110
3111 .ays-chart-footer-support-box .ays-chart-footer-slash-row {
3112 color: #c3c4c7;
3113 display: inline-block;
3114 margin: 0px 7px;
3115 }
3116
3117 .ays-chart-footer-support-box .ays-chart-footer-link-row {
3118 font-size: 13px;
3119 }
3120
3121 body.toplevel_page_chart-builder #wpfooter,
3122 body.chart-builder_page_chart-builder-chart-features #wpfooter,
3123 body.chart-builder_page_chart-builder-featured-plugins #wpfooter,
3124 body.chart-builder_page_chart-builder-settings #wpfooter,
3125 body.chart-builder_page_chart-builder-dashboard #wpfooter {
3126 position: relative;
3127 }
3128
3129 /* chart Footer Support box end */
3130
3131 /* Chart Top Banner Coupon Button | Start */
3132
3133 .ays-chart-coupon-container .ays-chart-coupon-box {
3134 display: flex;
3135 align-items: center;
3136 border: 2px dashed #000;
3137 text-decoration: none;
3138 font-size: 13px;
3139 font-weight: 700;
3140 /*color: #0B328E;*/
3141 padding: 5px 15px;
3142 border-radius: 20px;
3143 color: #000;
3144 background-color: #f9dc6c;
3145 cursor: pointer;
3146 }
3147
3148 .ays-chart-logo-container-upgrade span.ays-chart-logo-container-one-time-text{
3149 font-size: 10px;
3150 font-style: normal;
3151 font-weight: 600;
3152 line-height: normal;
3153 }
3154
3155 .ays-chart-coupon-container {
3156 display: flex;
3157 justify-content: center;
3158 align-items: center;
3159 flex-direction: column;
3160 }
3161
3162 .ays-chart-coupon-container .ays-chart-coupon-box span {
3163 margin-left: 5px;
3164 }
3165
3166 .ays-chart-coupon-container .ays-chart-coupon-box img {
3167 width: 10px;
3168 }
3169
3170 .ays-chart-coupon-container .ays-chart-coupon-box img {
3171 width: 8px;
3172 }
3173
3174 .ays-chart-coupon-container .ays-chart-coupon-box:hover {
3175 color: #000;
3176 background-color: #f1c51b;
3177 }
3178
3179 .ays-chart-coupon-container .ays-chart-coupon-box:focus {
3180 box-shadow: unset;
3181 }
3182
3183 .ays-chart-coupon-container .ays-chart-coupon-box:hover .ays-chart-svg-light-hover{
3184 display: flex;
3185 }
3186 /* Chart Top Banner Coupon Button | End */