PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.7.7
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.7.7
8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 All 533 releases
chatbot / css / admin-style.css

admin-style.css in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 8.7.7, at css/admin-style.css

3,782 lines 81.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
2
3 /* WPBot design tokens — change colors here to theme the whole admin UI */
4 :root {
5 --woobot-primary: #5B4E96;
6 --woobot-primary-color: #5B4E96;
7 --woobot-primary-dark: #463a7a;
8 --woobot-primary-soft: #f3f1fa;
9 --woobot-primary-border: #e4e0f2;
10 --woobot-surface: #ffffff;
11 --woobot-page-bg: #F5F7FD;
12 --woobot-text: #2d2a3a;
13 --woobot-muted: #6b6680;
14 --woobot-danger: #e25563;
15 --woobot-nav-muted: #988FBD;
16 --woobot-primary-rgb: 91, 78, 150;
17 }
18
19 .qcld-main-wrapper {
20 --woobot-primary: #5B4E96;
21 --woobot-primary-color: #5B4E96;
22 --woobot-primary-dark: #463a7a;
23 --woobot-primary-soft: #f3f1fa;
24 --woobot-primary-border: #e4e0f2;
25 --woobot-surface: #ffffff;
26 --woobot-page-bg: #F5F7FD;
27 --woobot-text: #2d2a3a;
28 --woobot-muted: #6b6680;
29 --woobot-danger: #e25563;
30 --woobot-nav-muted: #988FBD;
31 --woobot-primary-rgb: 91, 78, 150;
32 background-color: var(--woobot-page-bg);
33 font-family: "DM Sans", sans-serif !important;
34 font-optical-sizing: auto;
35 font-size: 16px;
36 font-weight: normal;
37 }
38
39 .wp-chatbot-wrap .fa{
40 font: normal normal normal 14px / 1 FontAwesome !important;
41 }
42
43 /* .chatbot-wpbot-lite_page_wpbot, .chatbot-wpbot-lite_page_wpbot_help_page, .chatbot-wpbot-lite_page_wpbot_openAi, .toplevel_page_wpbot-panel{
44 background-color: var(--woobot-page-bg);
45 } */
46
47 .qcld-main-wrapper .h1,
48 .qcld-main-wrapper .h2,
49 .qcld-main-wrapper .h3,
50 .qcld-main-wrapper .h4,
51 .qcld-main-wrapper .h5,
52 .qcld-main-wrapper .h6,
53 .qcld-main-wrapper h1,
54 .qcld-main-wrapper h2,
55 .qcld-main-wrapper h3,
56 .qcld-main-wrapper h4,
57 .qcld-main-wrapper h5,
58 .qcld-main-wrapper h6 {
59 color: var(--woobot-primary) !important;
60 }
61
62 .qcld-wp-chatbot-wrap-header {
63 display: flex;
64 column-gap: 15px;
65 row-gap: 10px;
66 background: #fff;
67 padding: 15px 15px;
68 margin: 20px 20px 20px 0;
69 border-radius: 16px;
70 align-items: center;
71 justify-content: space-between;
72
73 }
74
75 .qcld-wp-chatbot-wrap-header img {
76 max-width: 50px;
77 }
78
79 .qcld-wp-chatbot-wrap-header ul,
80 .qcld-wp-chatbot-wrap-header p,
81 .qcld-wp-chatbot-wrap-header li {
82 margin: 0;
83 }
84
85 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
86 padding: 12px 25px;
87 background: #ffffff;
88 color: var(--woobot-primary);
89 border: 2px solid var(--woobot-primary);
90 border-radius: 6px;
91 font-weight: bold;
92 }
93
94 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade:hover {
95 padding: 12px 25px;
96 background: var(--woobot-primary);
97 color: #fff;
98 border: 2px solid var(--woobot-primary);
99 border-radius: 6px;
100 font-weight: bold;
101 text-decoration: none;
102 }
103
104 a.qcld-wp-chatbot-wrap-site__logo {
105 font-size: 22px;
106 color: #000;
107 font-weight: bold;
108 }
109
110 .wp-chatbot-wrap {
111 margin: 20px 20px 20px 0;
112 border-radius: 16px;
113 }
114
115 .wp-chatbot-tabs.wp-chatbot-tabs-style-flip {
116 border-radius: 16px;
117 }
118
119 .wp-chatbot-tabs nav {
120 width: 18%;
121 display: block;
122 float: left;
123 min-width: 240px;
124 margin-right: 24px;
125 position: sticky;
126 top: 0;
127 overflow: unset;
128 padding: 10px;
129 background: #ffffff;
130 border-radius: 16px;
131 }
132
133
134 .wp-chatbot-tabs nav ul li.tab-current a {
135 background: var(--woobot-primary);
136 color: #ffffff;
137 text-decoration: none;
138 }
139
140 .wp-chatbot-tabs nav ul li a:hover {
141 background: var(--woobot-primary);
142 color: #ffffff;
143 text-decoration: none;
144 }
145
146 .wp-chatbot-tabs nav ul li a {
147 padding: 14px 15px;
148 width: 100%;
149 font-size: 16px;
150 font-weight: 500;
151 color: var(--woobot-nav-muted);
152 border-radius: 8px;
153 position: relative;
154 display: flex;
155 align-items: center;
156 gap: 15px;
157 }
158
159 .wp-chatbot-tabs nav ul li a span {
160 font-size: 15px;
161 font-weight: 500;
162 }
163
164 .wp-chatbot-tabs-style-flip nav a span.wpwbot-admin-tab-icon {
165 text-transform: capitalize;
166 letter-spacing: 1px;
167 font-weight: 700;
168 font-size: 18px;
169 }
170
171
172 .wp-chatbot-tabs nav .cxsc-settings_openai_border a {
173 padding: 14px 15px;
174 width: 100%;
175 font-size: 16px;
176 font-weight: 500;
177 color: var(--woobot-nav-muted);
178 border-radius: 8px;
179 position: relative;
180 display: flex;
181 align-items: center;
182 gap: 15px;
183 text-decoration: none;
184 }
185
186 .wp-chatbot-tabs nav .cxsc-settings_openai_border a span {
187 font-size: 15px;
188 font-weight: 500;
189 }
190
191 .wp-chatbot-tabs nav .cxsc-settings_openai_border a span.wpwbot-admin-tab-icon {
192 text-transform: capitalize;
193 letter-spacing: 1px;
194 font-weight: 700;
195 font-size: 18px;
196 }
197
198 .wp-chatbot-tabs nav .cxsc-settings_openai_border a:hover {
199 background: var(--woobot-primary);
200 color: #ffffff;
201 text-decoration: none;
202 }
203
204 .wp-chatbot-admin-upgrade-pro-sidebar {
205
206 float: left;
207 width: 18%;
208 border-radius: 16px;
209 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
210 padding: 8px;
211 margin: 0 0 0 25px;
212 }
213
214 .wp-chatbot-admin-upgrade-pro-sidebar img {
215 width: 100%;
216 }
217
218
219 .wp-chatbot-admingradient-color {
220 border-radius: 12px;
221 background: white;
222 padding: 15px;
223 }
224
225 .wp-chatbot-tabs-style-flip .content-wrap {
226 border-radius: 16px;
227 }
228
229 ul.feature-list li img {
230 max-width: 18px;
231 }
232
233 a.wp-chatbot-admin-pro-upgrade-button {
234 background: var(--woobot-primary);
235 color: #ffffff;
236 text-decoration: none;
237 padding: 4px 20px;
238 border-radius: 6px;
239 }
240
241 a.wp-chatbot-admin-pro-upgrade-button img {
242 max-width: 20px;
243 }
244
245 h3.wp-chatbot-admincart-title {
246 font-weight: bold;
247 font-size: 20px;
248 }
249
250 .qcld-main-wrapper ul.feature-list li {
251 font-size: 14px;
252 }
253
254 .wp-chatbot-wrap p {
255 font-size: 15px;
256 }
257
258 .qcld-main-wrapper ul.feature-list {
259 margin: 0 0 30px 0;
260 }
261
262 .qcld-swpm-admin-menu-wrap {
263 margin: 0 !important;
264 }
265
266 footer.wp-chatbot-admin-footer {
267 padding: 0 20px 20px 20px;
268 }
269
270 .chatbot-wpbot-lite_page_wpbot footer.wp-chatbot-admin-footer input#submit {
271 padding: 14px 20px;
272 width: auto;
273 font-size: 16px;
274 font-weight: 500;
275 color: var(--woobot-nav-muted);
276 border-radius: 8px;
277 position: relative;
278 display: flex;
279 align-items: center;
280 gap: 15px;
281 background: var(--woobot-primary);
282 color: #ffffff;
283 text-decoration: none;
284 margin: 0 0 10px 15px;
285 }
286
287
288 h3.qcld-wpbot-main-tabs-title {
289 border-bottom: 1px solid #eee;
290 padding: 0 0 8px 0;
291 margin: 20px 0 12px 0;
292 font-weight: bold;
293 font-size: 22px !important;
294 }
295
296 .qcld-main-wrapper .nav-tab-wrapper,
297 .qcld-main-wrapper .wrap h2.nav-tab-wrapper,
298 .qcld-main-wrapper h1.nav-tab-wrapper {
299 border-bottom: none;
300 }
301
302 .qcld-main-wrapper .nav-tab {
303 float: left;
304 border: 1px solid #c3c4c7;
305 border-bottom: 1px;
306 margin-left: .5em;
307 padding: 5px 10px;
308 font-size: 14px;
309 line-height: 1.71428571;
310 font-weight: 600;
311 background: #ffffff;
312 color: var(--woobot-primary);
313 text-decoration: none;
314 white-space: nowrap;
315 border: 1px solid var(--woobot-primary);
316 padding: 10px 20px !important;
317 border-radius: 8px;
318 line-height: normal !important;
319 text-decoration: none;
320 }
321
322 .qcld-main-wrapper .nav-tab-active,
323 .qcld-main-wrapper .nav-tab-active:focus,
324 .qcld-main-wrapper .nav-tab-active:focus:active,
325 .qcld-main-wrapper .nav-tab-active:hover {
326 border-bottom: 1px solid var(--woobot-primary);
327 background: var(--woobot-primary);
328 color: #fff;
329 text-decoration: none;
330 }
331
332 .qcld-main-wrapper .btn-primary {
333 border-color: var(--woobot-primary) !important;
334 }
335
336 .qcld-main-wrapper ul.feature-list li img {
337 max-width: 16px;
338 margin: 0 3px 0 0;
339 }
340
341 .qcld-main-wrapper .nav-tab:hover {
342 text-decoration: none;
343 }
344
345 .content-wrap .qcbot_help_secion h4 {
346 padding: 0 0;
347 font-weight: bold;
348 font-size: 16px;
349 }
350
351
352 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading {
353 background: #fff !important;
354 color: var(--woobot-primary) !important;
355 text-decoration: none !important;
356 border-radius: 8px;
357 border: 2px solid var(--woobot-primary);
358 }
359
360 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading+.panel-collapse>.panel-body {
361 border-top-color: #ddd;
362 background: linear-gradient(178deg, #ffffff 70%, #e9e4ff 96%);
363 border: 1px solid #E5E6F2;
364 border-radius: 16px;
365 margin: 15px 0 0 0;
366 }
367
368 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading:hover {
369 background: var(--woobot-primary) !important;
370 color: #ffffff !important;
371 text-decoration: none !important;
372 border-radius: 8px;
373 }
374
375
376 section.wp-chatbot-tab-container-inner .panel {
377 margin-bottom: 0;
378 margin-top: 10px;
379 background-color: #fff;
380 border: none;
381 border-radius: 0;
382 -webkit-box-shadow: none;
383 box-shadow: none;
384 }
385
386 section.wp-chatbot-tab-container-inner .panel-heading {
387 border-bottom: 0 solid transparent;
388 border-top-left-radius: 0;
389 border-top-right-radius: 0;
390 padding: 0;
391 }
392
393 section.wp-chatbot-tab-container-inner h4.panel-title {
394 padding: 0 !important;
395 }
396
397 section.wp-chatbot-tab-container-inner h4.panel-title a {
398 display: block;
399 padding: 15px 12px;
400 font-size: 16px;
401 }
402
403 .qcld-main-wrapper .nav-tab-small .nav-tab,
404 .qcld-main-wrapper h3 .nav-tab {
405 font-size: 15px !important;
406 }
407
408 .qcld-main-wrapper .cxsc-settings-blocks-notic {
409 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%);
410 border-radius: 16px;
411 border: 1px solid #E5E6F2;
412 padding: 20px 12px;
413 margin: 0 0 20px 0;
414 }
415
416 .qcld-main-wrapper .cxsc-settings-blocks-notic p.d-ib {
417 padding: 0;
418 margin: 8px 0;
419 font-size: 15px;
420 }
421
422 .wp-chatbot-wrap .form-group {
423 margin-bottom: 15px;
424 border: 1px solid #E5E6F2;
425 padding: 12px 12px;
426 border-radius: 8px;
427 }
428
429 .wp-chatbot-wrap .form-group h4.qc-opt-title {
430 font-weight: bold;
431 }
432
433
434 .wp-chatbot-wrap input:focus {
435 border-color: #e1dbff;
436 box-shadow: 0 0 0 4px #e1dbff, 0 1px 2px 0 #1018280d;
437 }
438
439 .wp-chatbot-wrap input[type=text] {
440 border: 1px solid #E5E6F2;
441 }
442
443
444 .wp-chatbot-wrap .nav-tabs {
445 border-bottom: none;
446 }
447
448 .wp-chatbot-wrap .nav-tabs>li {
449 float: left;
450 margin-bottom: 0;
451 }
452
453 .wp-chatbot-wrap .nav-tabs>li>a {
454 margin-right: .5em;
455 line-height: 1.42857143;
456 border: 1px solid var(--woobot-primary);
457 border-radius: 6px;
458 border: 1px solid var(--woobot-primary);
459 padding: 10px 20px !important;
460 border-radius: 8px;
461 color: var(--woobot-primary);
462 font-size: 15px;
463 font-weight: 600;
464 line-height: normal !important;
465 }
466
467 .wp-chatbot-wrap .nav-tabs>li.active>a,
468 .wp-chatbot-wrap .nav-tabs>li.active>a:focus,
469 .wp-chatbot-wrap .nav-tabs>li.active>a:hover {
470 color: #ffffff;
471 cursor: default;
472 background-color: var(--woobot-primary);
473 border: 1px solid var(--woobot-primary);
474 border-bottom-color: transparent;
475 }
476
477 .wp-chatbot-wrap .nav-tabs {
478 border-bottom: none;
479 margin: 0 0 15px 0;
480 }
481
482 .wp-chatbot-wrap .nav>li>a:focus,
483 .wp-chatbot-wrap .nav>li>a:hover {
484 text-decoration: none;
485 background-color: var(--woobot-primary);
486 border-color: var(--woobot-primary) #eee #ddd;
487 color: #fff;
488 }
489
490
491 .cxsc-settings-blocks.cxsc-settings-faq-blocks {
492 background: var(--woobot-page-bg) !important;
493 padding: 12px !important;
494 border-radius: 6px;
495 }
496
497 .qcld-faq-block .cxsc-settings-blocks {
498 background: var(--woobot-page-bg) !important;
499 padding: 12px !important;
500 border-radius: 6px !important;
501 margin: 0 0 15px 0 !important;
502 }
503
504 #wp-chatbot-icon-theme-settings img {
505 width: 100%;
506 }
507
508
509 .qcld-main-wrapper ul.radio-list {
510 display: flex;
511 flex-wrap: wrap;
512 }
513
514 .qcld-main-wrapper ul.radio-list li {
515 width: 156px;
516 margin: 4px 4px;
517 border-radius: 16px;
518 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
519 padding: 12px;
520 text-align: center;
521 position: relative;
522 }
523
524 .qcld-main-wrapper ul.radio-list li img {
525 max-width: 80px;
526 display: block;
527 }
528
529 div#wp-chatbot-icon-theme-settings input[type=radio]:checked::before {
530 content: "\f12a";
531 font-family: dashicons;
532
533 border-radius: 0;
534 width: 100%;
535 height: 100%;
536 margin: 0;
537 background-color: color-mix(in srgb, var(--woobot-primary) 74%, transparent) !important;
538 line-height: 1.14285714;
539 position: absolute;
540 top: 0;
541 left: 0;
542 right: 0;
543 border-radius: 16px;
544 z-index: 999;
545 color: #45d72d;
546 display: flex;
547 align-items: flex-start;
548 justify-content: flex-end;
549 font-size: 32px;
550 padding: 0 4px;
551 border: 4px solid transparent;
552
553 }
554
555 div#wp-chatbot-icon-theme-settings input[type=radio] {
556 background: transparent;
557 border: none;
558 box-shadow: none;
559 }
560
561 .wpbot_dashboard_header {
562 display: flex;
563 column-gap: 15px;
564 row-gap: 10px;
565 background: #fff;
566 padding: 22px 15px;
567 margin: 20px 0 20px 0;
568 border-radius: 16px;
569 align-items: center;
570 justify-content: space-between;
571 }
572
573 .wpbot_dashboard_header h1 {
574 margin: 0;
575 padding: 0;
576 font-size: 22px;
577 font-weight: bold;
578 }
579
580 .wpbot_dashboard_header p {
581 margin: 0;
582 padding: 0;
583 }
584
585 .wpbot_single_addon_wrapper {
586 display: flex;
587 flex-wrap: wrap;
588 }
589
590 .wpbot_single_addon_wrapper .wpbot_single_addon {
591 border-radius: 16px;
592 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
593 padding: 8px;
594 text-align: center;
595 width: 266px;
596 margin: 8px 8px;
597 }
598
599 .wpbot_single_addon_wrapper .wpbot_single_addon img {
600 max-width: 120px;
601 }
602
603 .wpbot_single_addon_wrapper .wpbot_single_addon .wpbot_single_content {
604 background: #fff;
605 border-radius: 12px;
606 background: white;
607 padding: 15px;
608 min-height: 288px;
609 background: linear-gradient(174deg, #ffffff 70%, #e9e4ff 96%);
610 }
611
612 .wpbot_addon_title {
613 font-weight: bold;
614 font-size: 17px;
615 padding: 8px 0;
616 }
617
618 .qcld-main-wrapper span.wp_addon_notinstalled {
619 background: #fee3e2;
620 color: #202020;
621 padding: 3px 10px;
622 border-radius: 6px;
623 border: none;
624 margin: 0 0 10px 0;
625 display: inline-block;
626 font-weight: bold;
627 font-size: 13px;
628 }
629
630 .qcld-main-wrapper span.wp_addon_installed {
631 background: green;
632 color: #fff;
633 padding: 3px 10px;
634 border-radius: 6px;
635 border: none;
636 margin: 0 0 10px 0;
637 display: inline-block;
638 font-weight: bold;
639 font-size: 13px;
640 }
641
642 .wpbot_addon_image img {
643 height: 98px;
644 object-fit: cover;
645 }
646
647 .wpbot_single_addon a.button.button-secondary {
648 background: var(--woobot-primary);
649 color: #ffffff;
650 text-decoration: none;
651 border: 1px solid var(--woobot-primary);
652 }
653
654 .wp-chatbot-wrap .wpbot_single_addon p {
655 font-size: 14px;
656 height: 48px;
657 }
658
659 .wpbot_statistics_area {
660 border-radius: 16px;
661 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
662 padding: 8px;
663 text-align: center;
664 }
665
666
667 .qcld-main-wrapper ul.radio-list li label {
668 width: 100%;
669 margin: 0 auto;
670 display: flex;
671 flex-direction: column;
672 align-items: center;
673 }
674
675
676 section.wp-chatbot-tab-container-inner h4.panel-title a {
677 position: relative;
678 }
679
680 section.wp-chatbot-tab-container-inner h4.panel-title a.collapsed:after {
681 content: "\f10f";
682 font-family: dashicons;
683 position: absolute;
684 right: 18px;
685 top: 12px;
686 font-size: 25px;
687 font-weight: normal;
688 }
689
690 section.wp-chatbot-tab-container-inner h4.panel-title a:after {
691 content: "\f14f";
692 font-family: dashicons;
693 position: absolute;
694 right: 18px;
695 top: 12px;
696 font-size: 25px;
697 font-weight: normal;
698 }
699
700 .wpbot_single_addon_wrapper .wpbot_single_addon .wpbot_single_content:hover {
701 background: linear-gradient(1deg, #ffffff 70%, #e9e4ff 96%);
702 }
703
704 a.wp-chatbot-admin-pro-upgrade-button {
705 font-size: 15px;
706 }
707
708 a.wp-chatbot-admin-pro-upgrade-button:hover {
709 color: #fff;
710 background-color: #f0ad4e;
711 }
712
713
714 .qcld-wp-chatbot-wrap-header-doc {
715 display: flex;
716 column-gap: 15px;
717 row-gap: 10px;
718 background: #fff;
719 padding: 15px 15px;
720 margin: 20px 20px 20px 0;
721 border-radius: 16px;
722 align-items: center;
723 justify-content: flex-start;
724 display: flex;
725 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%);
726 border-radius: 16px;
727 gap: 30px;
728 }
729
730 .qcld-wp-chatbot-wrap-header-doc img {
731 max-width: 480px;
732 height: 250px;
733 object-fit: cover;
734 border-radius: 8px;
735 }
736
737
738 .qcld-wp-chatbot-wrap-header-doc-details a {
739 border: 2px solid var(--woobot-primary);
740 background: #fff;
741 color: var(--woobot-primary);
742 padding: 8px 20px;
743 border-radius: 8px;
744 display: inline-block;
745 margin: 4px 0 0 0;
746 }
747
748 .qcld-wp-chatbot-wrap-header-doc-details a:hover {
749 border: 2px solid var(--woobot-primary);
750 background: var(--woobot-primary);
751 color: #fff;
752 padding: 8px 20px;
753 border-radius: 8px;
754 display: inline-block;
755 margin: 4px 0 0 0;
756 text-decoration: none;
757 }
758
759
760 .qcld-wp-chatbot-wrap-header-doc-details {
761 width: 42%;
762 }
763
764 .qcld-wp-chatbot-wrap-header-doc-details h3 {
765 font-weight: bold;
766 }
767
768 .qcld-wp-chatbot-wrap-header-doc-details p {
769 font-size: 15px;
770 }
771
772
773 .qcld-goPreemium a {
774 display: block;
775 display: flex !important;
776 align-items: center;
777 gap: 8px;
778 background: #EEEDF4;
779 padding: 10px 25px !important;
780 border-radius: 8px;
781 width: 100%;
782 justify-content: center;
783 color: #000 !important;
784 font-weight: bold;
785 font-size: 16px !important;
786 }
787
788 .qcld-goPreemium a:hover {
789 display: block;
790 display: flex !important;
791 align-items: center;
792 gap: 8px;
793 background: var(--woobot-primary);
794 padding: 10px 25px !important;
795 border-radius: 8px;
796 width: 100%;
797 justify-content: center;
798 color: #fff !important;
799 font-weight: bold;
800 font-size: 16px !important;
801 text-decoration: none;
802 }
803
804
805 .qcld-Resetall input {
806 display: block;
807 width: 100%;
808 margin: 5px 0 0 0;
809 padding: 12px 0;
810 font-size: 16px;
811 border: 2px solid #f0ad4e;
812 background: #fff;
813 color: #f0ad4e;
814 border-radius: 8px;
815 }
816
817 .qcld-Resetall input:hover {
818 display: block;
819 width: 100%;
820 margin: 8px 0 0 0;
821 padding: 12px 0;
822 font-size: 16px;
823 border: 2px solid #f0ad4e;
824 background: #f0ad4e;
825 color: #fff;
826 border-radius: 8px;
827 }
828
829 .qcld-main-wrapper .alert.alert-warning {
830 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96% 96%);
831 border-radius: 6px;
832 }
833
834 .wp-chatbot-wrap button.btn.btn-primary {
835 padding: 14px 20px;
836 width: auto;
837 font-size: 16px;
838 font-weight: 500;
839 color: var(--woobot-nav-muted);
840 border-radius: 8px;
841 position: relative;
842 display: inline-block;
843 align-items: center;
844 gap: 15px;
845 background: var(--woobot-primary);
846 color: #ffffff;
847 text-decoration: none;
848 }
849
850 .qcld-main-wrapper h4.qc-opt-dcs {
851 font-size: 18px !important;
852 font-weight: bold !important;
853 padding: 12px 0 12px 0 !important;
854 }
855
856 .cxsc-settings-blocks-addon {
857 font-size: 16px;
858 padding: 6px 0 10px 0;
859 font-weight: bold;
860 }
861
862
863 .qcld-main-wrapper .qcld-seo-help-feature {
864 clear: both;
865 }
866
867 .qcld-main-wrapper .qcld-seo-help-feature H3 {
868 font-weight: bold;
869 font-size: 20px;
870 }
871
872 .qcld-main-wrapper .qcld-seo-help-feature UL {}
873
874 .qcld-main-wrapper .qcld-seo-help-feature UL li {
875 margin: 0;
876 padding: 4px 0;
877 font-size: 15px;
878 }
879
880 .qcld-recommendbot-conv-feature .plugin-card-top {
881 position: relative;
882 padding: 20px 20px 10px;
883 min-height: auto;
884 display: flex;
885 align-items: center;
886 justify-content: space-between;
887 }
888
889 .qcld-recommendbot-conv-feature .plugin-card .action-links {
890 position: relative;
891 top: auto;
892 right: auto;
893 width: auto;
894 }
895
896 .qcld-recommendbot-conv-feature .wrap.recommended-plugins .plugin-card.plugin-card-conversational-forms {
897 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%);
898 border-radius: 16px;
899 height: auto;
900 }
901
902 .qcld-recommendbot-conv-feature .plugin-icon {
903 position: relative;
904 top: auto;
905 left: auto;
906 width: auto;
907 height: auto;
908 margin: 0;
909 }
910
911 .qcld-recommendbot-conv-feature .plugin-card h3 a {
912 display: flex;
913 flex-direction: row-reverse;
914 align-items: center;
915 }
916
917 .qcld-recommendbot-conv-feature .plugin-icon {
918 position: relative;
919 top: auto;
920 left: auto;
921 width: 80px;
922 height: auto;
923 margin: 0 20px 0 0;
924 }
925
926 .qcld-recommendbot-conv-feature .plugin-card .desc>p,
927 .qcld-recommendbot-conv-feature .plugin-card .name {
928 margin-left: 0 !important;
929 }
930
931 .qcld-recommendbot-conv-feature .plugin-action-buttons {
932 margin-bottom: 0;
933 }
934
935 .qcld-recommendbot-conv-feature .plugin-action-buttons {
936 text-align: center;
937 }
938
939 .qc_menu_area_box {
940 display: flex;
941 justify-content: space-between;
942 border-radius: 16px;
943 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
944 padding: 15px;
945 gap: 15px;
946 overflow: hidden;
947 margin: 0 0 15px 0;
948 }
949
950 .qc_menu_area_box h4 {
951 text-align: center;
952 font-size: 18px !important;
953 font-weight: bold !important;
954 border-bottom: 2px solid #f7f7f7;
955 padding: 0 0 8px 0;
956 margin: 0 0 8px 0;
957 }
958
959 .qc_menu_area {
960
961 width: 50%;
962 background: #fff;
963 border-radius: 16PX;
964 padding: 12px;
965 }
966
967 .qc_menu_list_area.ui-droppable {
968
969 width: 50%;
970 background: #fff;
971 border-radius: 16PX;
972 padding: 12px;
973 }
974
975 .qc_menu_area_box ul li span {
976 background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
977 box-shadow: 0 5px 15px #c3c3c3;
978 border: 1px solid #ffffff;
979 color: #fff;
980 display: block;
981 margin: 8px auto;
982 padding: 12px 30px;
983 }
984
985 .qc_menu_area_box .qc_menu_area_container span {
986 background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
987 box-shadow: 0 5px 15px #c3c3c3;
988 border: 1px solid #ffffff;
989 color: #fff;
990 display: block;
991 margin: 8px auto;
992 padding: 12px 30px;
993 }
994
995 .qc_menu_area_box .qc_menu_area_container span:hover,
996 .qc_menu_area_box ul li span:hover {
997 background-image: linear-gradient(to right, var(--woobot-primary) 0%, #868afa 51%, #868afa 100%);
998 }
999
1000 .qc_menu_list_container {
1001 position: relative;
1002 }
1003
1004 .qc_menu_list_container p {
1005 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
1006 float: none;
1007 position: relative;
1008 transform: none;
1009 right: 0;
1010 top: 0;
1011 text-align: center;
1012 width: 100%;
1013 font-size: 12px;
1014 margin: 0;
1015 z-index: 999;
1016 color: #3c3b3b;
1017 font-weight: 600;
1018 line-height: 20px;
1019 border-radius: 0;
1020 padding: 6px 0;
1021 }
1022
1023
1024 .lp-submenu-wpbot_openAi .swal2-actions {
1025 display: flex;
1026 width: auto;
1027 }
1028
1029 /* Icon-only centered loading overlay for Save settings */
1030 .swal2-popup.qcld-swal-loading-only {
1031 background: transparent !important;
1032 box-shadow: none !important;
1033 padding: 0 !important;
1034 width: auto !important;
1035 min-width: 0 !important;
1036 }
1037 .swal2-popup.qcld-swal-loading-only .swal2-header,
1038 .swal2-popup.qcld-swal-loading-only .swal2-title,
1039 .swal2-popup.qcld-swal-loading-only .swal2-actions,
1040 .swal2-popup.qcld-swal-loading-only .swal2-footer,
1041 .swal2-popup.qcld-swal-loading-only .swal2-close {
1042 display: none !important;
1043 }
1044 .swal2-popup.qcld-swal-loading-only .swal2-html-container {
1045 margin: 0 !important;
1046 padding: 0 !important;
1047 overflow: visible !important;
1048 color: transparent !important;
1049 }
1050 .qcld-save-settings-spinner {
1051 position: relative;
1052 width: 56px;
1053 height: 56px;
1054 margin: 0 auto;
1055 }
1056 .qcld-save-settings-spinner::before,
1057 .qcld-save-settings-spinner::after {
1058 content: '';
1059 position: absolute;
1060 inset: 0;
1061 border-radius: 50%;
1062 border: 4px solid transparent;
1063 }
1064 .qcld-save-settings-spinner::before {
1065 border-top-color: #8b5cf6;
1066 border-right-color: #8b5cf6;
1067 animation: qcld-save-settings-spin 0.9s linear infinite;
1068 }
1069 .qcld-save-settings-spinner::after {
1070 inset: 8px;
1071 border-bottom-color: #ffffff;
1072 border-left-color: #ffffff;
1073 animation: qcld-save-settings-spin 0.7s linear infinite reverse;
1074 }
1075 @keyframes qcld-save-settings-spin {
1076 0% { transform: rotate(0deg); }
1077 100% { transform: rotate(360deg); }
1078 }
1079 .lp-submenu-wpbot_openAi button.swal2-confirm.btn.btn-lg.swal2-styled{
1080 width: auto !important;
1081 }
1082
1083 button.swal2-confirm.btn.btn-lg.swal2-styled {
1084 width: auto;
1085 }
1086
1087 div#qc_menu_area {
1088 min-height: 230px;
1089 }
1090 div#collapseTwoControl .row {
1091 padding: 8px 0;
1092 border-bottom: 1px solid #eee;
1093 margin: 0 0;
1094 }
1095
1096
1097 .wp-chatbot-wrap .form-group input[type=checkbox]+label {
1098 position: relative;
1099 width: 18px;
1100 height: 18px;
1101 border: 2px solid var(--woobot-primary);
1102 border-radius: 4px;
1103 top: 0;
1104 left: 0;
1105 transform: translate(0%, 0%);
1106 transition: all ease-out 200ms;
1107 text-indent: 28px;
1108 font: normal normal 30px / 60px "Helvetica";
1109 white-space: nowrap;
1110 color: #555;
1111 -webkit-user-select: none;
1112 -moz-user-select: none;
1113 -ms-user-select: none;
1114 user-select: none;
1115 display: flex;
1116 align-items: center;
1117 }
1118
1119 .wp-chatbot-wrap .form-group input[type=checkbox]+label:after {
1120 content: "";
1121 position: absolute;
1122 width: 0px;
1123 height: 8px;
1124 border-bottom: 3px solid #22b573;
1125 border-left: 3px solid #22b573;
1126 top: 25%;
1127 left: 50%;
1128 transform-origin: bottom left;
1129 transform: rotate(-45deg);
1130 opacity: 0;
1131 transition: all ease-out 200ms;
1132 }
1133
1134 .wp-chatbot-wrap .form-group input[type=checkbox]:checked+label {
1135 border: 2px solid #22b573;
1136 }
1137
1138 .wp-chatbot-wrap .form-group input[type=checkbox]:checked+label:after {
1139 opacity: 1;
1140 width: 22px;
1141 }
1142
1143 .wp-chatbot-wrap .form-group input[type=checkbox] {
1144 display: none;
1145 }
1146
1147
1148 .admin-maxwith.qcld-openai-main-box {
1149 margin: 0 20px 0 0;
1150 padding: 0 20px 15px 20px;
1151 max-width: initial;
1152 box-shadow: none;
1153 border: none;
1154 border-radius: 16px;
1155 }
1156
1157 .admin-maxwith.qcld-openai-main-box .card-body.p-sm-0 {
1158 display: flex;
1159 }
1160
1161 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li {
1162 display: inline-block;
1163 width: 360px;
1164 }
1165
1166 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs {
1167 margin: 0 0 20px 0;
1168 padding: 0;
1169 display: flex;
1170 flex-direction: column;
1171 align-content: flex-start;
1172 border: 15px solid var(--woobot-page-bg);
1173 border-radius: 16px;
1174 min-height: 480px;
1175 }
1176
1177 .col-auto.me-auto.ai-settings-title-container {
1178 display: flex;
1179 justify-content: space-between;
1180 padding: 20px;
1181 }
1182
1183 .qcld-wp-chatbot-wrap-header-aisection {
1184 margin: 0 0 0 0;
1185 }
1186
1187 .qcl-openai .row {
1188 margin-right: 0;
1189 margin-left: 0;
1190 }
1191
1192 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
1193 display: flex;
1194 justify-content: flex-start;
1195 padding: 8px 20px;
1196 border-radius: 16px;
1197 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
1198 margin: 20px 0 0 0;
1199 gap: 30px;
1200 }
1201
1202 .admin-maxwith.qcld-openai-main-box .tab-content {
1203 padding: 0 12px 0 12px;
1204 width: 100%;
1205 }
1206
1207 .admin-maxwith.qcld-openai-main-box div#qcldopenaiaccordion .card {
1208 width: 100%;
1209 max-width: inherit;
1210 margin: 0 0 8px 0;
1211 padding: 0;
1212 border: none;
1213 box-shadow: none;
1214 background: #fff !important;
1215 color: var(--woobot-primary) !important;
1216 text-decoration: none !important;
1217 border-radius: 8px;
1218 border: 2px solid var(--woobot-primary);
1219 }
1220
1221 .admin-maxwith.qcld-openai-main-box div#qcldopenaiaccordion .card h2 {
1222 margin: 0;
1223 padding: 0;
1224 font-weight: bold;
1225 }
1226
1227 .admin-maxwith.qcld-openai-main-box button.btn.btn-link {
1228 font-weight: bold;
1229 display: block;
1230 padding: 15px 12px;
1231 font-size: 16px;
1232 color: var(--woobot-primary);
1233 width: 100%;
1234 text-align: left;
1235 }
1236
1237
1238 .admin-maxwith.qcld-openai-main-box button.btn.btn-link:after {
1239 content: "\f14f";
1240 font-family: dashicons;
1241 position: absolute;
1242 right: 18px;
1243 top: 12px;
1244 font-size: 22px;
1245 font-weight: normal;
1246 }
1247
1248
1249 .admin-maxwith.qcld-openai-main-box button.btn.btn-link.collapsed:after{
1250
1251 content: "\f10f";
1252 font-family: dashicons;
1253 position: absolute;
1254 right: 18px;
1255 top: 12px;
1256 font-size: 22px;
1257 font-weight: normal;
1258 }
1259
1260
1261 .admin-maxwith.qcld-openai-main-box .btn.active.focus,
1262 .admin-maxwith.qcld-openai-main-box .btn.active:focus,
1263 .admin-maxwith.qcld-openai-main-box .btn.focus,
1264 .admin-maxwith.qcld-openai-main-box .btn:active.focus,
1265 .admin-maxwith.qcld-openai-main-box .btn:active:focus,
1266 .admin-maxwith.qcld-openai-main-box .btn:focus {
1267 outline: 0 auto -webkit-focus-ring-color;
1268 outline-offset: -2px;
1269 }
1270
1271 .admin-maxwith.qcld-openai-main-box .tab-content .card-body {
1272 padding: 15px;
1273 }
1274
1275 .admin-maxwith.qcld-openai-main-box .tab-content .card-body p {
1276 font-size: 15px;
1277 }
1278
1279 .admin-maxwith.qcld-openai-main-box .tab-content {
1280 font-size: 15px;
1281 }
1282
1283 .admin-maxwith.qcld-openai-main-box .tab-content .alert.alert-info {
1284 margin: 15px 0 0 0;
1285 }
1286 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li a {
1287 padding: 14px 20px;
1288 width: 100%;
1289 font-size: 16px;
1290 font-weight: 500;
1291 color: var(--woobot-nav-muted);
1292 border-radius: 8px;
1293 position: relative;
1294 display: flex;
1295 align-items: center;
1296 gap: 15px;
1297 background: #fff;
1298 text-decoration: none;
1299 border: none;
1300 margin: 2px 0;
1301 }
1302
1303 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li.active a,
1304 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li a:hover {
1305 padding: 14px 20px;
1306 width: 100%;
1307 font-size: 16px;
1308 font-weight: 500;
1309 color: var(--woobot-nav-muted);
1310 border-radius: 8px;
1311 position: relative;
1312 display: flex;
1313 align-items: center;
1314 gap: 15px;
1315 background: var(--woobot-primary);
1316 color: #ffffff;
1317 text-decoration: none;
1318 border: none;
1319 margin: 2px 0;
1320 }
1321
1322
1323 .wp-chatbot-wrap div#wp-chatbot-show-pages-list input[type=checkbox]+label,
1324 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]+label {
1325 position: relative;
1326 width: 18px;
1327 height: 18px;
1328 border: 2px solid var(--woobot-primary);
1329 border-radius: 4px;
1330 top: 0;
1331 left: 0;
1332 transform: translate(0%, 0%);
1333 transition: all ease-out 200ms;
1334 text-indent: 28px;
1335 font: normal normal 30px / 60px "Helvetica";
1336 white-space: nowrap;
1337 color: #555;
1338 -webkit-user-select: none;
1339 -moz-user-select: none;
1340 -ms-user-select: none;
1341 user-select: none;
1342 display: flex;
1343 align-items: center;
1344 line-height: 30px;
1345 }
1346
1347 .wp-chatbot-wrap div#wp-chatbot-show-pages-list input[type=checkbox]+label:after,
1348 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]+label:after {
1349 content: "";
1350 position: absolute;
1351 width: 0px;
1352 height: 8px;
1353 border-bottom: 3px solid #22b573;
1354 border-left: 3px solid #22b573;
1355 top: 25%;
1356 left: 50%;
1357 transform-origin: bottom left;
1358 transform: rotate(-45deg);
1359 opacity: 0;
1360 transition: all ease-out 200ms;
1361 }
1362
1363 .wp-chatbot-wrap div#wp-chatbot-show-pages-list input[type=checkbox]:checked+label,
1364 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]:checked+label {
1365 border: 2px solid #22b573;
1366 }
1367
1368 .wp-chatbot-wrap div#wp-chatbot-show-pages-list input[type=checkbox]:checked+label:after,
1369 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]:checked+label:after {
1370 opacity: 1;
1371 width: 22px;
1372 }
1373
1374 .wp-chatbot-wrap div#wp-chatbot-show-pages-list input[type=checkbox],
1375 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox] {
1376 display: none;
1377 }
1378
1379 div#wp-chatbot-show-pages-list ul li,
1380 div#wp-chatbot-exclude-post-list ul li {
1381 padding: 4px 0;
1382 }
1383
1384 .qcld-main-wrapper div#headingTwoControl a {
1385 font-weight: bold;
1386 }
1387
1388 .qcl-openai input[type=checkbox]+label {
1389 position: relative;
1390 width: 18px;
1391 height: 18px;
1392 border: 2px solid var(--woobot-primary);
1393 border-radius: 4px;
1394 top: 0;
1395 left: 0;
1396 transform: translate(0%, 0%);
1397 transition: all ease-out 200ms;
1398 text-indent: 28px;
1399 white-space: nowrap;
1400 color: #555;
1401 -webkit-user-select: none;
1402 -moz-user-select: none;
1403 -ms-user-select: none;
1404 user-select: none;
1405 display: flex;
1406 align-items: center;
1407 margin-bottom: 10px;
1408 line-height: 30px;
1409 }
1410
1411 .qcl-openai input[type=checkbox]+label:after {
1412 content: "";
1413 position: absolute;
1414 width: 0px;
1415 height: 8px;
1416 border-bottom: 3px solid #22b573;
1417 border-left: 3px solid #22b573;
1418 top: 25%;
1419 left: 50%;
1420 transform-origin: bottom left;
1421 transform: rotate(-45deg);
1422 opacity: 0;
1423 transition: all ease-out 200ms;
1424 }
1425
1426 .qcl-openai input[type=checkbox]:checked+label {
1427 border: 2px solid #22b573;
1428 }
1429
1430 .qcl-openai input[type=checkbox]:checked+label:after {
1431 opacity: 1;
1432 width: 22px;
1433 }
1434
1435 .qcl-openai input[type=checkbox] {
1436 display: none;
1437 }
1438
1439
1440 .qcl-openai .form-check {
1441 margin-bottom: 15px;
1442 border: 1px solid #E5E6F2;
1443 padding: 12px 12px;
1444 border-radius: 8px;
1445 }
1446
1447 .qcl-openai label.form-check-label span {
1448 font-size: 12px;
1449 }
1450
1451 .qcl-openai label.form-check-label span.pro-badge {
1452 font-size: 9px;
1453 font-weight: 400;
1454 color: #ffffff;
1455 background: var(--woobot-primary);
1456 border-radius: 20px;
1457 padding: 2px 8px;
1458 margin-left: 5px;
1459 text-transform: uppercase;
1460 text-indent: initial;
1461 line-height: 16px;
1462 }
1463
1464 .qcl-openai a#save_setting {
1465 margin: 0 0 0 0;
1466 }
1467
1468 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label {
1469 position: relative;
1470 width: 18px;
1471 height: 18px;
1472 border: 2px solid var(--woobot-primary);
1473 border-radius: 4px;
1474 top: 0;
1475 left: 0;
1476 transform: translate(0%, 0%);
1477 transition: all ease-out 200ms;
1478 text-indent: 28px;
1479 white-space: nowrap;
1480 color: #555;
1481 -webkit-user-select: none;
1482 -moz-user-select: none;
1483 -ms-user-select: none;
1484 user-select: none;
1485 display: flex;
1486 align-items: center;
1487 margin-bottom: 0;
1488 line-height: 30px;
1489 }
1490
1491 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label:after {
1492 content: "";
1493 position: absolute;
1494 width: 0px;
1495 height: 8px;
1496 border-bottom: 3px solid #22b573;
1497 border-left: 3px solid #22b573;
1498 top: 25%;
1499 left: 50%;
1500 transform-origin: bottom left;
1501 transform: rotate(-45deg);
1502 opacity: 0;
1503 transition: all ease-out 200ms;
1504 }
1505
1506 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]:checked+label {
1507 border: 2px solid #22b573;
1508 }
1509
1510 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]:checked+label:after {
1511 opacity: 1;
1512 width: 22px;
1513 }
1514
1515 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox] {
1516 display: none;
1517 }
1518
1519
1520 .qcl-openai div#wp-chatbot-openrouter-settings .form-check {
1521 margin-bottom: 15px;
1522 border: 1px solid #E5E6F2;
1523 padding: 12px 12px;
1524 border-radius: 8px;
1525 }
1526
1527 .qcl-openai div#wp-chatbot-openrouter-settings label.form-check-label span {
1528 font-size: 12px;
1529 }
1530
1531 .qcl-openai div#wp-chatbot-openrouter-settings label.form-check-label span.pro-badge {
1532 font-size: 9px;
1533 font-weight: 400;
1534 color: #ffffff;
1535 background: var(--woobot-primary);
1536 border-radius: 20px;
1537 padding: 2px 8px;
1538 margin-left: 5px;
1539 text-transform: uppercase;
1540 text-indent: initial;
1541 line-height: 16px;
1542 }
1543
1544 .qcl-openai div#wp-chatbot-openrouter-settings a#save_setting {
1545 margin: 0 0 15px 0;
1546 }
1547
1548 #qcld_save_openrouter_setting {
1549 margin: 0 0 15px 0;
1550 }
1551
1552
1553 div#openrouter-settings .tab-content {
1554 padding: 0 12px 0 12px;
1555 width: 100%;
1556 }
1557
1558 .qcl-openai .accordion {
1559 padding: 0 0 0 15px;
1560 }
1561
1562 .qcl-openai .card-body-openrouter {
1563 padding: 0 15px 0 15px;
1564 }
1565
1566
1567 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container h4 {
1568 width: 365px;
1569 }
1570
1571 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container select {
1572 display: none;
1573 }
1574
1575 /* Avatar Location Selector */
1576 .avatar-location-wrapper {
1577 background: #ffffff;
1578 border-radius: 12px;
1579 padding: 0 0 25px 0;
1580 margin: 0 0 0 0;
1581 }
1582
1583 .avatar-location-title {
1584 font-size: 13px;
1585 font-weight: 600;
1586 color: #6B7280;
1587 margin: 0 0 10px 0;
1588 text-transform: none;
1589 letter-spacing: 0;
1590 }
1591
1592 .avatar-location-cards {
1593 display: inline-flex;
1594 gap: 0;
1595 background: #F3F4F6;
1596 border-radius: 10px;
1597 padding: 4px;
1598 }
1599
1600 .avatar-location-card {
1601 display: flex;
1602 align-items: center;
1603 gap: 6px;
1604 padding: 8px 18px;
1605 border-radius: 8px;
1606 cursor: pointer;
1607 font-size: 13px;
1608 font-weight: 500;
1609 color: #6B7280;
1610 background: transparent;
1611 border: none;
1612 transition: all 0.2s ease;
1613 user-select: none;
1614 }
1615
1616 .avatar-location-card:hover {
1617 color: #374151;
1618 background: #E5E7EB;
1619 }
1620
1621 .avatar-location-card.active {
1622 background: #ffffff;
1623 color: #111827;
1624 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1625 }
1626
1627 .avatar-location-card svg {
1628 flex-shrink: 0;
1629 color: inherit;
1630 }
1631
1632 .avatar-location-card.active svg {
1633 color: #4B5563;
1634 }
1635
1636 /* AI Provider Cards Wrapper */
1637 .ai-provider-cards-wrapper {
1638 background: #ffffff;
1639 border-radius: 12px;
1640 padding: 20px 24px 20px 6px;
1641 margin: 0 0 0 0;
1642 }
1643
1644 .ai-provider-cards {
1645 display: flex;
1646 gap: 12px;
1647 flex-wrap: wrap;
1648 padding: 4px 0;
1649 }
1650
1651 .ai-provider-card {
1652 display: flex;
1653 flex-direction: column;
1654 align-items: center;
1655 justify-content: center;
1656 gap: 8px;
1657 padding: 8px 12px;
1658 min-width: 110px;
1659 background: #ffffff;
1660 border: 2px solid #E5E7EB;
1661 border-radius: 12px;
1662 cursor: pointer;
1663 position: relative;
1664 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1665 user-select: none;
1666 }
1667
1668 .ai-provider-card:hover {
1669 border-color: #93C5FD;
1670 background: #F0F7FF;
1671 transform: translateY(-2px);
1672 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10);
1673 }
1674
1675 .ai-provider-card.active {
1676 border-color: #2563EB;
1677 background: #EFF6FF;
1678 box-shadow: 0 2px 8px rgba(37, 99, 235, 0.13);
1679 }
1680
1681 .ai-provider-check {
1682 position: absolute;
1683 top: 6px;
1684 right: 6px;
1685 opacity: 0;
1686 transform: scale(0.5);
1687 transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1688 line-height: 0;
1689 }
1690
1691 .ai-provider-card.active .ai-provider-check {
1692 opacity: 1;
1693 transform: scale(1);
1694 }
1695
1696 .ai-provider-icon {
1697 width: 40px;
1698 height: 40px;
1699 display: flex;
1700 align-items: center;
1701 justify-content: center;
1702 }
1703
1704 .ai-provider-icon svg {
1705 width: 32px;
1706 height: 32px;
1707 }
1708
1709 .ai-provider-name {
1710 font-size: 12px;
1711 font-weight: 600;
1712 color: #4B5563;
1713 text-align: center;
1714 white-space: nowrap;
1715 line-height: 1.2;
1716 }
1717
1718 .ai-provider-card.active .ai-provider-name {
1719 color: #1E40AF;
1720 }
1721
1722
1723 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-openai-training-model .row.my-4 {
1724 font-size: 15px;
1725 display: flex;
1726 width: 100%;
1727 align-items: center;
1728 justify-content: center;
1729 min-height: 420px;
1730 text-align: center;
1731 }
1732
1733 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-data_post_converter .row.my-4 {
1734 font-size: 16px;
1735 display: flex;
1736 width: 100%;
1737 align-items: center;
1738 justify-content: center;
1739 min-height: 420px;
1740 text-align: center;
1741 }
1742
1743 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-img_generator .row.my-4 {
1744 font-size: 16px;
1745 display: flex;
1746 width: 100%;
1747 align-items: center;
1748 justify-content: center;
1749 min-height: 420px;
1750 text-align: center;
1751 }
1752
1753 .admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-content_writer .row.my-4 {
1754 font-size: 16px;
1755 display: flex;
1756 width: 100%;
1757 align-items: center;
1758 justify-content: center;
1759 min-height: 420px;
1760 text-align: center;
1761 }
1762
1763
1764 .qcld-wrap.swpm-admin-menu-wrap {
1765 display: flex;
1766 margin: 15px 0;
1767 }
1768
1769 .qcld_help_wppt_nav_container {
1770 display: flex;
1771 flex-direction: column;
1772 width: 320px;
1773 background: #fff;
1774 border-radius: 16px;
1775 margin: 0 20px 0 0;
1776 }
1777
1778 .content_qcbot_help_secion {
1779 position: relative;
1780 width: 79%;
1781 display: block;
1782 background: #fff;
1783 border-radius: 16px;
1784 padding: 15px 20px;
1785 }
1786
1787 .qcld_help_wppt_nav_container a {
1788 margin: 2px 10px;
1789 }
1790
1791 .qcld_help_wppt_nav_container a {
1792 margin: 2px 10px;
1793 font-size: 15px;
1794 font-weight: 500;
1795 border: none;
1796 padding: 14px 20px !important;
1797 display: flex;
1798 align-items: center;
1799 gap: 15px;
1800 }
1801
1802 .qcld_help_wppt_nav_container a:hover {
1803 margin: 2px 10px;
1804 font-size: 15px;
1805 font-weight: 500;
1806 border: none;
1807 background: var(--woobot-primary);
1808 color: #fff;
1809 padding: 14px 20px !important;
1810 display: flex;
1811 align-items: center;
1812 gap: 15px;
1813 }
1814
1815 .content_qcbot_help_secion .panel-default>.panel-heading {
1816 color: #333;
1817 background-color: #f5f5f5;
1818 border-color: var(--woobot-primary);
1819 background: #fff !important;
1820 color: var(--woobot-primary) !important;
1821 text-decoration: none !important;
1822 border-radius: 8px;
1823 border: 2px solid var(--woobot-primary);
1824 padding: 0;
1825 }
1826
1827
1828 .content_qcbot_help_secion .panel-default>.panel-heading:hover {
1829 background: var(--woobot-primary) !important;
1830 color: #ffffff !important;
1831 text-decoration: none !important;
1832 border-radius: 8px;
1833 }
1834
1835
1836 .content_qcbot_help_secion .panel-default>.panel-heading:hover a{
1837 color: #ffffff !important;
1838 }
1839 .content_qcbot_help_secion .panel-default {
1840 border-color: #dddddd00;
1841 margin-bottom: 10px;
1842 }
1843
1844 .content_qcbot_help_secion .panel-title a {
1845 padding: 10px 15px;
1846 display: block;
1847 position: relative;
1848 display: block;
1849 padding: 15px 12px;
1850 font-size: 16px;
1851 font-weight: bold;
1852 color: var(--woobot-primary);
1853 }
1854
1855 .content_qcbot_help_secion p {
1856 font-size: 15px;
1857 }
1858
1859 .content_qcbot_help_secion .panel-title a.collapsed:after {
1860 content: "\f10f";
1861 position: absolute;
1862 right: 18px;
1863 top: 12px;
1864 font-family: dashicons;
1865 font-size: 24PX;
1866 font-weight: normal;
1867 }
1868
1869 .content_qcbot_help_secion .panel-title a:after {
1870 content: "\f14f";
1871 position: absolute;
1872 right: 18px;
1873 top: 12px;
1874 font-family: dashicons;
1875 font-size: 24PX;
1876 font-weight: normal;
1877 }
1878
1879
1880 .content_qcbot_help_secion .panel-default>.panel-heading+.panel-collapse>.panel-body {
1881 border-top-color: transparent;
1882 background: linear-gradient(181deg, #ffffff 70%, #e9e4ff 96%);
1883 border-radius: 16px;
1884 border: 1px solid #eee;
1885 margin: 8px 0 0 0;
1886 padding: 20px 15px;
1887 }
1888
1889 .content_qcbot_help_secion .panel {
1890 box-shadow: none;
1891 }
1892
1893 .qcbot_help_secion h3 {
1894 font-size: 16px;
1895 font-weight: bold;
1896 }
1897
1898 .qcbot_help_secion ul li {
1899 list-style: inside;
1900 }
1901
1902 .notice.is-dismissible.qcbot-str-top-notic {
1903 width: 98.7%;
1904 }
1905
1906 .qcld-main-wrapper {
1907 margin: 10px 0px 0 2px !important;
1908 }
1909
1910 .content_qcbot_help_secion .section-container {
1911 display: flex;
1912 gap: 30px;
1913 }
1914
1915 .content-wrap .section-container {
1916 display: flex;
1917 gap: 30px;
1918 }
1919
1920 .wpbot_statistics_area h2 {
1921 font-size: 22px;
1922 font-weight: bold;
1923 }
1924
1925
1926 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading:hover a {
1927 color: #fff;
1928 }
1929
1930 .qcld-main-wrapper a {
1931 text-decoration: none !important;
1932 }
1933
1934 .admin-maxwith.qcld-openai-main-box button.btn.btn-link {
1935 text-decoration: none;
1936 }
1937
1938 .admin-maxwith.qcld-openai-main-box button.btn.btn-link:hover {
1939 font-weight: bold;
1940 display: block;
1941 padding: 15px 12px;
1942 font-size: 16px;
1943 color: #fff;
1944 background: var(--woobot-primary);
1945 width: 100%;
1946 text-align: left;
1947 }
1948
1949 .content-wrap .qcld-seo-help-feature ul {
1950 background: linear-gradient(178deg, #ffffff 70%, #e9e4ff 96%);
1951 border-radius: 6px;
1952 padding: 5px 8px;
1953 border: 1px solid #eee;
1954 }
1955
1956 .wp-chatbot-tabs nav ul li a {
1957 color: #695d99;
1958 }
1959
1960 .wp-chatbot-tabs nav .cxsc-settings_openai_border a {
1961 color: #695d99;
1962 }
1963
1964
1965 .qcld-main-wrapper .qcld_help_wppt_nav_container .nav-tab {
1966 float: left;
1967 border: 1px solid #c3c4c7;
1968 border-bottom: 1px;
1969 margin-left: .5em;
1970 font-size: 16px;
1971 line-height: 1.71428571;
1972 font-weight: 600;
1973 background: #ffffff;
1974 color: var(--woobot-primary);
1975 text-decoration: none;
1976 white-space: nowrap;
1977 border: 1px solid var(--woobot-primary);
1978 padding: 14px 20px !important;
1979 line-height: normal !important;
1980 border-radius: 6px;
1981
1982 }
1983
1984 .qcld-main-wrapper .qcld_help_wppt_nav_container .nav-tab:hover, .qcld-main-wrapper .qcld_help_wppt_nav_container .nav-tab.nav-tab-active {
1985 float: left;
1986 border: 1px solid #c3c4c7;
1987 border-bottom: 1px;
1988 margin-left: .5em;
1989 font-size: 16px;
1990 line-height: 1.71428571;
1991 font-weight: 600;
1992 background: var(--woobot-primary);
1993 color: #fff;
1994 text-decoration: none;
1995 white-space: nowrap;
1996 border: 1px solid var(--woobot-primary);
1997 padding: 14px 20px !important;
1998 line-height: normal !important;
1999
2000 }
2001
2002 .qcld_label_width_full{
2003 width: 100% !important;
2004 }
2005 .cxsc-settings-blocks-font-resize{
2006 font-size: 14px !important;
2007 }
2008
2009 .qcld_thumbnail_theme_prev label{
2010 width: 100% !important;
2011 position: relative;
2012 text-align: center;
2013 }
2014
2015 button.swal2-confirm.btn.btn-lg.swal2-styled {
2016 padding: 14px 20px;
2017 width: 100%;
2018 font-size: 16px;
2019 font-weight: 500;
2020 color: var(--woobot-nav-muted);
2021 border-radius: 8px;
2022 position: relative;
2023 display: flex;
2024 align-items: center;
2025 gap: 15px;
2026 background: var(--woobot-primary);
2027 color: #ffffff;
2028 text-decoration: none;
2029 border-color: var(--woobot-primary) !important;
2030 }
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]+label {
2041 position: relative;
2042 width: 18px;
2043 height: 18px;
2044 border: 2px solid var(--woobot-primary);
2045 border-radius: 4px;
2046 top: 0;
2047 left: 0;
2048 transform: translate(0%, 0%);
2049 transition: all ease-out 200ms;
2050 text-indent: 28px;
2051 font: normal normal 30px / 60px "Helvetica";
2052 white-space: nowrap;
2053 color: #555;
2054 -webkit-user-select: none;
2055 -moz-user-select: none;
2056 -ms-user-select: none;
2057 user-select: none;
2058 display: flex;
2059 align-items: center;
2060 }
2061
2062 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]+label:after {
2063 content: "";
2064 position: absolute;
2065 width: 0px;
2066 height: 8px;
2067 border-bottom: 3px solid #22b573;
2068 border-left: 3px solid #22b573;
2069 top: 25%;
2070 left: 50%;
2071 transform-origin: bottom left;
2072 transform: rotate(-45deg);
2073 opacity: 0;
2074 transition: all ease-out 200ms;
2075 }
2076
2077 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]:checked+label {
2078 border: 2px solid #22b573;
2079 }
2080
2081 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]:checked+label:after {
2082 opacity: 1;
2083 width: 22px;
2084 }
2085
2086 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox] {
2087 display: none;
2088 }
2089
2090 .cxsc-settings_openai_border {
2091 margin-bottom: 6px;
2092 }
2093
2094 div#wp-chatbot-custom-color-options .top-section .row .cxsc-settings-blocks {
2095 padding-top: 0;
2096 }
2097
2098 div#wp-chatbot-post-converter ul.checkbox-list {
2099 display: flex;
2100 flex-wrap: wrap;
2101 gap: 6px;
2102 }
2103 div#wp-chatbot-post-converter ul.checkbox-list .form-check.form-check-inline {
2104 display: inline-block;
2105 min-width: 290px;
2106 margin: 0;
2107 }
2108
2109
2110
2111 div#wp-chatbot-show-pages-list ul.checkbox-list {
2112 display: flex;
2113 flex-wrap: wrap;
2114 gap: 6px;
2115 }
2116
2117 div#wp-chatbot-exclude-post-list ul.checkbox-list {
2118 display: flex;
2119 flex-wrap: wrap;
2120 gap: 6px;
2121 }
2122
2123
2124 div#wp-chatbot-show-pages-list ul.checkbox-list li{
2125 display: inline-block;
2126 min-width: 310px;
2127 margin: 0;
2128 }
2129
2130 div#wp-chatbot-exclude-post-list ul.checkbox-list li{
2131 display: inline-block;
2132 min-width: 310px;
2133 margin: 0;
2134 }
2135 #rotationloader
2136 {
2137 display: none;
2138 rotate: initial;
2139 -webkit-animation: rotation 2s infinite linear;
2140 }
2141
2142 .docs_icon {
2143 position: absolute;
2144 top: 0;
2145 bottom: 0;
2146 left: 0;
2147 right: 0;
2148 z-index: 1;
2149 text-align: center;
2150 display: flex;
2151 align-items: center;
2152 justify-content: center;
2153 background: color-mix(in srgb, var(--woobot-primary) 56%, transparent);
2154 color: #ffffff;
2155 font-size: 60px;
2156 border-radius: 8px;
2157 }
2158 a.qcld-wp-chatbot-wrap--doc_logo {
2159 text-decoration: none !important;
2160 position: relative;
2161 }
2162 .docs_icon span {
2163 background: var(--woobot-primary);
2164 padding: 25px 25px;
2165 border-radius: 50%;
2166 font-size: 82px;
2167 width: auto;
2168 height: auto;
2169 }
2170
2171
2172 /* .lp-submenu-wpbot_openAi button.swal2-deny.swal2-styled {
2173 font-size: 18px;
2174 display: block !important;
2175 } */
2176
2177 .lp-submenu-wpbot_openAi .swal2-actions button {
2178 width: auto !important;
2179 padding: 10px 40px !important;
2180 line-height: normal !important;
2181 }
2182 .lp-submenu-wpbot_openAi .swal2-actions {
2183 display: flex;
2184 }
2185 .lp-submenu-wpbot_openAi button.swal2-deny.swal2-styled {
2186 font-size: 16px !important;
2187 font-weight: 500 !important;
2188 }
2189
2190 .wp-chatbot-wrap hr {
2191 margin-top: 10px;
2192 margin-bottom: 10px;
2193 }
2194
2195
2196 .wp-chatbot-wrap a.nav-tab.sld_click_handle {
2197 margin-right: .5em;
2198 line-height: 1.42857143;
2199 border: 1px solid var(--woobot-primary) !important;
2200 border-radius: 6px !important;
2201 border: 1px solid var(--woobot-primary) !important;
2202 padding: 10px 20px !important;
2203 border-radius: 8px !important;
2204 color: var(--woobot-primary) !important;
2205 font-size: 15px !important;
2206 font-weight: 600;
2207 line-height: normal !important;
2208 background: #fff;
2209 }
2210
2211 .wp-chatbot-wrap a.nav-tab.sld_click_handle:hover, .wp-chatbot-wrap a.nav-tab.sld_click_handle.nav-tab-active{
2212 margin-right: .5em;
2213 line-height: 1.42857143;
2214 border: 1px solid var(--woobot-primary) !important;
2215 border-radius: 6px !important;
2216 border: 1px solid var(--woobot-primary) !important;
2217 padding: 10px 20px !important;
2218 border-radius: 8px !important;
2219 color: #fff !important;
2220 font-size: 15px !important;
2221 font-weight: 600;
2222 line-height: normal !important;
2223 background: var(--woobot-primary);
2224 }
2225
2226
2227
2228
2229
2230
2231
2232
2233 .swal2-actions {
2234 display: flex;
2235 z-index: 1;
2236 box-sizing: border-box;
2237 flex-wrap: wrap;
2238 align-items: center;
2239 justify-content: center;
2240 width: 100%;
2241 margin: 1.25em auto 0;
2242 padding: 0;
2243 }
2244 button.swal2-deny.swal2-styled{
2245 border: 0;
2246 border-radius: .25em;
2247 background: initial;
2248 background-color: #d14529 !important;
2249 color: #fff;
2250 font-size: 1em;
2251 padding: 14px 20px;
2252 width: auto;
2253 font-size: 16px;
2254 font-weight: 500;
2255 color: var(--woobot-nav-muted);
2256 border-radius: 8px;
2257 position: relative;
2258 display: flex;
2259 align-items: center;
2260 gap: 15px;
2261 background: #d14529;
2262 color: #ffffff;
2263 text-decoration: none;
2264 border-color: var(--woobot-primary) !important;
2265 }
2266
2267
2268 button.swal2-confirm.btn.btn-lg.swal2-styled {
2269 width: auto !important;
2270 }
2271
2272 .chatbot-wpbot-lite_page_wpbot button.swal2-deny.swal2-styled {
2273 display: none !important;
2274 }
2275 a#qcld_save_openrouter_setting {
2276 background: var(--woobot-primary);
2277 color: #ffffff;
2278 border: none;
2279 padding: 12px 30px;
2280 }
2281
2282 a#save_setting {
2283 background: var(--woobot-primary);
2284 color: #ffffff;
2285 border: none;
2286 padding: 12px 30px;
2287 }
2288
2289 @media (max-width: 1280px) {
2290 .content-wrap {
2291 width: 50% !important;
2292 }
2293
2294 .wp-chatbot-admin-upgrade-pro-sidebar {
2295
2296 width: 24% !important;
2297 }
2298
2299 }
2300
2301 @media (max-width: 992px) {
2302 .wp-chatbot-tabs nav {
2303 width: 100% !important;
2304 margin-right: 0 !important;
2305 }
2306 .content-wrap {
2307 width: 100% !important;
2308 }
2309 .wp-chatbot-admin-upgrade-pro-sidebar {
2310 width: 100% !important;
2311 margin: 0 0 0 0 !important;
2312 }
2313 .wp-chatbot-tabs {
2314 display: flex;
2315 flex-wrap: wrap;
2316 gap: 20px;
2317 }
2318 .admin-maxwith.qcld-openai-main-box .card-body.p-sm-0 {
2319 display: flex;
2320 flex-wrap: wrap;
2321 }
2322 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs {
2323 width: 100%;
2324 }
2325 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
2326 padding: 12px 5px !important;
2327 }
2328 label.form-check-label span {
2329 display: none;
2330 }
2331 .qc-review-text img {
2332 width: 100%;
2333 }
2334
2335 .content_qcbot_help_secion {
2336 width: 100% !important;
2337 }
2338 .qcld_help_wppt_nav_container {
2339 width: 100% !important;
2340 }
2341 .qcld-wrap.swpm-admin-menu-wrap {
2342 display: flex
2343 ;
2344 margin: 15px 0;
2345 flex-direction: column;
2346 flex-wrap: wrap;
2347 }
2348 }
2349
2350
2351 @media (max-width: 640px) {
2352 .qcld-wp-chatbot-wrap-header {
2353 display: flex;
2354 column-gap: 15px;
2355 row-gap: 10px;
2356 background: #fff;
2357 padding: 15px 15px;
2358 margin: 20px 20px 20px 0;
2359 border-radius: 16px;
2360 align-items: center;
2361 justify-content: space-between;
2362 flex-direction: column;
2363 }
2364 ul.qcld-wp-chatbot-wrap-version-wrapper {
2365 display: block;
2366 margin: 15px 0 15px 0;
2367 }
2368 .qcld-wp-chatbot-wrap-header-doc {
2369 display: flex
2370 ;
2371 column-gap: 15px;
2372 row-gap: 10px;
2373 background: #fff;
2374 padding: 15px 15px;
2375 margin: 20px 20px 20px 0;
2376 border-radius: 16px;
2377 align-items: center;
2378 justify-content: flex-start;
2379 display: flex
2380 ;
2381 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96%);
2382 border-radius: 16px;
2383 gap: 30px;
2384 flex-direction: column;
2385 }
2386 .qcld-wp-chatbot-wrap-header-doc-details {
2387 width: 100%;
2388 }
2389 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
2390 padding: 12px 25px !important;
2391 }
2392 .admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li {
2393 display: inline-block;
2394 width: 100%;
2395 }
2396 }
2397
2398 .swal2-popup.swal2-modal.connection-modal button.swal2-deny.swal2-styled{display: none !important;}
2399 .swal2-popup.swal2-modal.connection-modal .swal2-styled.swal2-confirm {
2400 padding: 14px 20px;
2401 width: auto;
2402 font-size: 16px;
2403 align-items: center;
2404 gap: 15px;
2405 background: var(--woobot-primary);
2406 color: #ffffff;
2407 text-decoration: none;
2408 border-color: var(--woobot-primary) !important;
2409 }
2410
2411 .wrap.qcld-main-wrapper a:focus {
2412 outline: none !important;
2413 outline-offset: 0 !important;
2414 box-shadow: none !important;
2415 }
2416
2417 p.qc-opt-dcs-font-faq {
2418 font-weight: bold;
2419 }
2420
2421
2422 .qcld-general-settings-connection-notic {
2423 background: #eee;
2424 border: 2px solid var(--woobot-primary);
2425 border-radius: 8px;
2426 margin: 0 0 15px 0;
2427 padding: 12px;
2428 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
2429 position: relative;
2430 }
2431 .qcld-general-settings-connection-notic p{
2432 margin: 6px 0 6px 0;
2433 padding: 0;
2434 font-size: 15px;
2435 font-weight: 500;
2436 }
2437
2438
2439 .qcld-general-settings-close {
2440 position: absolute;
2441 top: -10px;
2442 right: 3px;
2443 transition: all 200ms;
2444 font-size: 30px;
2445 font-weight: bold;
2446 text-decoration: none;
2447 color: var(--woobot-primary);
2448 }
2449 .qcld-general-settings-close:hover {
2450 color: orange;
2451 }
2452 #qcld-show-more-wrapper-box {
2453 margin-top: 0;
2454 position:relative;
2455 }
2456 #qcld-show-more-wrapper-box .qcld-show-more-text {
2457 /* width: 660px; */
2458 margin-bottom: 5px;
2459 padding: 0 0;
2460 position:relative;
2461 display: block;
2462 }
2463 #qcld-show-more-wrapper-box .qcld-show-more-show-more {
2464 color: #ffffff;
2465 position: relative;
2466 padding: 60px 0 0 0;
2467 height: 60px;
2468 text-align: center;
2469 background: #f1f1f1;
2470 cursor: pointer;
2471 background: linear-gradient(to bottom, rgb(255 255 255 / 24%) 0%, rgb(188 174 255) 100%);
2472 margin: -39px 0 0 0;
2473 border-radius: 0 0 15px 15px;
2474 z-index: 99999;
2475 font-weight: bold;
2476 }
2477
2478 #qcld-show-more-wrapper-box .qcld-show-more-show-more-height {
2479 height: 338px;
2480 overflow:hidden;
2481 }
2482
2483 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
2484 display: block;
2485 padding: 0 0 0 0;
2486 background: var(--woobot-primary);
2487 width: 30px;
2488 height: 30px;
2489 line-height: 30px;
2490 border-radius: 50%;
2491 margin: -15px auto 0 auto;
2492 font-size: 18px !important;
2493 color: #fff;
2494 }
2495
2496 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]+label {
2497 position: relative;
2498 width: 18px;
2499 height: 18px;
2500 border: 2px solid var(--woobot-primary);
2501 border-radius: 4px;
2502 top: 0;
2503 left: 0;
2504 transform: translate(0%, 0%);
2505 transition: all ease-out 200ms;
2506 text-indent: 28px;
2507 white-space: nowrap;
2508 color: #555;
2509 -webkit-user-select: none;
2510 -moz-user-select: none;
2511 -ms-user-select: none;
2512 user-select: none;
2513 display: flex;
2514 align-items: center;
2515 margin-bottom: 0;
2516 line-height: 30px;
2517 }
2518
2519
2520 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]+label:after {
2521 content: "";
2522 position: absolute;
2523 width: 0px;
2524 height: 8px;
2525 border-bottom: 3px solid #22b573;
2526 border-left: 3px solid #22b573;
2527 top: 25%;
2528 left: 50%;
2529 transform-origin: bottom left;
2530 transform: rotate(-45deg);
2531 opacity: 0;
2532 transition: all ease-out 200ms;
2533 }
2534
2535 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]:checked+label {
2536 border: 2px solid #22b573;
2537 }
2538
2539 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]:checked+label:after {
2540 opacity: 1;
2541 width: 22px;
2542 }
2543
2544 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox] {
2545 display: none;
2546 }
2547
2548
2549 .qcl-openai div#wp-chatbot-gemini-settings .form-check {
2550 margin-bottom: 15px;
2551 border: 1px solid #E5E6F2;
2552 padding: 12px 12px;
2553 border-radius: 8px;
2554 }
2555
2556 .qcl-openai div#wp-chatbot-gemini-settings label.form-check-label span {
2557 font-size: 12px;
2558 }
2559
2560 .qcl-openai div#wp-chatbot-gemini-settings label.form-check-label span.pro-badge {
2561 font-size: 9px;
2562 font-weight: 400;
2563 color: #ffffff;
2564 background: var(--woobot-primary);
2565 border-radius: 20px;
2566 padding: 2px 8px;
2567 margin-left: 5px;
2568 text-transform: uppercase;
2569 text-indent: initial;
2570 line-height: 16px;
2571 }
2572
2573 .qcl-openai div#wp-chatbot-gemini-settings a#save_setting {
2574 margin: 0 0 15px 0;
2575 }
2576
2577
2578
2579 span.qcls_openAI_customized {
2580 background: yellow;
2581 }
2582 .admin-maxwith.qcld-openai-main-box .tab-content .card-body p {
2583 font-size: 16px;
2584 line-height: 28px;
2585 }
2586 textarea#qcld_openai_system_content {
2587 height: 120px;
2588 line-height: 28px;
2589 }
2590 .qcld-openai-system-presets {
2591 display: flex;
2592 gap: 10px;
2593 margin: 12px 0;
2594 overflow-x: auto;
2595 padding-bottom: 8px;
2596 scroll-snap-type: x proximity;
2597 flex-wrap: wrap;
2598 }
2599 .qcld-openai-system-preset {
2600 align-items: center;
2601 border: 1px solid #dcdcde;
2602 border-radius: 6px;
2603 cursor: pointer;
2604 display: flex;
2605 flex: 0 0 220px;
2606 gap: 10px;
2607 justify-content: center;
2608 margin: 0;
2609 min-height: 70px;
2610 padding: 12px;
2611 scroll-snap-align: start;
2612 text-align: center;
2613 }
2614 .qcld-openai-system-preset input {
2615 display: none;
2616 }
2617 .qcld-openai-system-preset.is-selected {
2618 background: #f0f6fc;
2619 border-color: #2271b1;
2620 }
2621 .qcld-openai-system-preset-content {
2622 display: grid;
2623 gap: 4px;
2624 line-height: 22px;
2625 }
2626 .qcld-openai-system-preset-title {
2627 color: #1d2327;
2628 font-weight: 600;
2629 }
2630 .qcld-openai-system-preset-value {
2631 display: none;
2632 }
2633 @media (max-width: 782px) {
2634 .qcld-openai-system-preset {
2635 flex-basis: 180px;
2636 }
2637 }
2638 .qcld-main-wrapper .alert.alert-warning {
2639 background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96% 96%);
2640 border-radius: 6px;
2641 color: #721c24;
2642 background: #f8d7da;
2643 border-color: #f5c6cb;
2644 font-weight: bold;
2645 }
2646 .qcld-wpbot-pricing-filter-form-check {
2647 display: flex;
2648 gap: 10px;
2649 }
2650
2651 .qcld-dialogflow-enable-notice {
2652 padding: 15px 0 15px 0;
2653 color: red;
2654 font-weight: bold;
2655 }
2656
2657 a#qcld_save_gemini_setting {
2658 background: var(--woobot-primary);
2659 color: #ffffff;
2660 border: none;
2661 padding: 12px 30px;
2662 }
2663 .card-body-gemini {
2664 padding: 0 15px;
2665 }
2666
2667 div#panelsStayOpen-collapseseven pre {
2668 width: 100%;
2669 display: block;
2670 max-width: 1120px;
2671 }
2672
2673 .card-body-gemini p {
2674 font-size: 16px;
2675 font-weight: bold;
2676 }
2677
2678 .card-body-openrouter p{
2679 font-size: 16px;
2680 font-weight: bold;
2681 }
2682 div#wp-chatbot-openai-assistants p {
2683 font-size: 16px;
2684 }
2685 button.btn{
2686 outline: none !important;
2687 }
2688 button.btn:focus{
2689 outline: none !important;
2690 }
2691 input:focus {
2692 border-color: #e1dbff;
2693 box-shadow: none !important;
2694 outline: none !important;
2695 }
2696
2697 .wp-chatbot-wrap .qc-opt-language-title{
2698 font-weight: bold !important;
2699 color: var(--woobot-primary) !important;
2700 font-size: 16px;
2701 }
2702
2703 button.qcld_chatbot_custom_icon_button.button, button.wp_chatbot_custom_agent_button.button {
2704 padding: 2px 20px;
2705 width: auto;
2706 font-size: 14px;
2707 font-weight: 500;
2708 color: var(--woobot-nav-muted);
2709 border-radius: 8px;
2710 background: #fff;
2711 color: var(--woobot-primary);
2712 text-decoration: none;
2713 margin: 0;
2714 border: 2px solid var(--woobot-primary);
2715
2716 }
2717
2718 button.qcld_chatbot_custom_icon_button.button:hover, button.wp_chatbot_custom_agent_button.button:hover {
2719 background: var(--woobot-primary);
2720 color: #fff;
2721 border: 2px solid var(--woobot-primary);
2722
2723 }
2724
2725
2726 @media (min-width: 993px) and (max-width: 1350px) {
2727 .wp-chatbot-admin-upgrade-pro-sidebar {
2728 width: 25%;
2729 }
2730 }
2731
2732 .wp-chatbot-tabs nav ul li a span.dashicons {
2733 font-size: 20px;
2734 width: auto;
2735 height: auto;
2736 }
2737 .wp-chatbot-tabs nav .cxsc-settings_openai_border a span.dashicons {
2738 font-size: 20px;
2739 }
2740
2741
2742 .dashicons, .dashicons-before:before {
2743 font-family: dashicons;
2744 display: inline-block;
2745 line-height: 1;
2746 font-weight: 400;
2747 font-weight: normal;
2748 }
2749
2750 .qcl-openai a:focus {
2751 outline: 0 auto -webkit-focus-ring-color;
2752 outline-offset: 0;
2753 border: none !important;
2754 outline: none !important;
2755 box-shadow: none;
2756 }
2757
2758 #qcld_check_connection i{
2759 animation: rotation infinite 3s linear;
2760 }
2761
2762 .wp-chatbot-wrap div#wp-chatbot-custom-color-options .form-group {
2763 min-height: 90px;
2764 }
2765
2766 div#promotion-wpchatbot .qc-review-text a {
2767 display: block;
2768 }
2769 .qcld-wp-chatbot-wrap-header-logo {
2770 display: flex;
2771 align-items: center;
2772 gap: 10px;
2773 }
2774 @keyframes rotation{
2775 from{
2776 transform:rotate(360deg);
2777 }
2778
2779 to{
2780 transform:rotate(0deg);
2781 }
2782 }
2783
2784 .qcld-btn-primary {
2785 padding: 14px 30px;
2786 width: auto;
2787 font-size: 16px;
2788 font-weight: 500;
2789 color: var(--woobot-nav-muted);
2790 border-radius: 8px;
2791 position: relative;
2792 display: inline-block;
2793 align-items: center;
2794 gap: 15px;
2795 background: var(--woobot-primary);
2796 color: #ffffff;
2797 text-decoration: none;
2798 border-color: var(--woobot-primary) !important;
2799 line-height: normal;
2800 }
2801 div#wpfooter {
2802 display: none;
2803 }
2804
2805 .qcld-btn-primary {
2806
2807 border: none;
2808 }
2809
2810 div#qcld-rag-settings-tab .wrap h3 {
2811 padding: 0 0 8px 0;
2812 margin: 20px 0 12px 0;
2813 font-weight: bold;
2814 font-size: 22px !important;
2815 color: var(--woobot-primary) !important;
2816 }
2817
2818 div#rag-sync .wrap h3 {
2819 padding: 0 0 8px 0;
2820 margin: 10px 0 12px 0;
2821 font-weight: bold;
2822 font-size: 22px !important;
2823 color: var(--woobot-primary) !important;
2824 }
2825
2826 div#rag-settings h2.nav-tab-wrapper a {
2827 margin-right: 0;
2828 line-height: 1.42857143;
2829 border: 1px solid var(--woobot-primary);
2830 border-radius: 6px;
2831 border: 1px solid var(--woobot-primary);
2832 padding: 10px 20px !important;
2833 border-radius: 8px;
2834 color: var(--woobot-primary);
2835 font-size: 15px;
2836 font-weight: 600;
2837 line-height: normal !important;
2838 background: #fff;
2839 }
2840
2841 div#rag-settings h2.nav-tab-wrapper {
2842 margin: 0;
2843 padding: 0;
2844 border: none;
2845 }
2846
2847 div#rag-settings h2.nav-tab-wrapper a:hover, div#rag-settings h2.nav-tab-wrapper a.nav-tab-active, div#rag-settings h2.nav-tab-wrapper a:focus {
2848 color: #fff;
2849 background: var(--woobot-primary);
2850 text-decoration: none !important;
2851 border: 1px solid var(--woobot-primary);
2852 }
2853
2854
2855
2856 button#rag-pdf-submit, button#rag-csv-submit, button#rag-xaml-submit, button#rag_embed_btn {
2857 padding: 8px 15px;
2858 width: auto;
2859 font-size: 16px;
2860 font-weight: 500;
2861 color: var(--woobot-nav-muted);
2862 border-radius: 8px;
2863 position: relative;
2864 display: inline-block;
2865 align-items: center;
2866 gap: 15px;
2867 background: var(--woobot-primary);
2868 color: #ffffff;
2869 text-decoration: none;
2870 border-color: var(--woobot-primary) !important;
2871 line-height: normal;
2872 }
2873
2874 div#rag-sync .wrap {
2875 border: 1px solid #eee;
2876 padding: 8px 12px;
2877 border-radius: 6px;
2878 }
2879
2880
2881
2882 div#qcld-rag-settings-tab .wrap:first-child {
2883 border: 1px solid #eee;
2884 padding: 8px 12px;
2885 border-radius: 6px;
2886 }
2887
2888
2889 .qcl-openai div#rag-database input[type=checkbox] {
2890 display: block;
2891 }
2892
2893 .tablenav-pages {
2894 text-align: right;
2895 padding: 8px 0;
2896 }
2897 button#botmaster_submit_sitemap_btn {
2898 background: var(--woobot-primary);
2899 border-color: var(--woobot-primary);
2900 }
2901 div#rag-database h3 {
2902 padding: 0 0 8px 0;
2903 margin: 15px 0 8px 0;
2904 font-weight: bold;
2905 font-size: 22px !important;
2906 color: var(--woobot-primary) !important;
2907 }
2908
2909 .qcl-openai div#rag-settings h2.nav-tab-wrapper a:focus {
2910 border: 1px solid var(--woobot-primary) !important;
2911 }
2912 button#rag-delete-all {
2913 background: var(--woobot-primary);
2914 color: #fff;
2915 border-color: var(--woobot-primary);
2916 }
2917
2918 div#rag-database table.widefat {
2919 border: 1px solid #ffffff;
2920 box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
2921 }
2922 div#rag-database .widefat thead td, div#rag-database .widefat thead th {
2923 border-bottom: 1px solid #ffffff;
2924 }
2925
2926 div#rag-database table.widefat thead {
2927 background: var(--woobot-primary);
2928 color: #fff;
2929 }
2930 div#rag-database table.widefat thead th {
2931 color: #fff;
2932 }
2933 .qcl-openai div#rag-database input[type=checkbox] {
2934 display: block;
2935 width: 18px;
2936 height: 18px;
2937 }
2938 div#wp-chatbot-openai-rag input[type=checkbox]+label {
2939 margin-bottom: 0;
2940 }
2941 .qcl-openai input[type=checkbox]+label {
2942 margin-bottom: 0;
2943 }
2944 div#qcld-rag-settings-tab .wrap .mb-3 {
2945 padding: 5px 0;
2946 }
2947 div#rag-database input#search-submit {
2948 background: var(--woobot-primary);
2949 color: #fff;
2950 border-color: var(--woobot-primary);
2951 }
2952 .rag_embed_cpts_wrapper {
2953 display: flex;
2954 flex-direction: column;
2955 gap: 6px;
2956 }
2957 div#wp-chatbot-gemini-settings .input-group {
2958 display: flex;
2959 gap: 10px;
2960 }
2961 div#wp-chatbot-grok-settings a#qcld_save_grok_setting {
2962 background: var(--woobot-primary);
2963 color: #ffffff;
2964 border: none;
2965 padding: 12px 30px;
2966 }
2967 button#qcld_gemini_fetch_models {
2968 background: var(--woobot-primary);
2969 color: #ffffff;
2970 border: none;
2971 }
2972 .wp-chatbot-wrap label.block.text-sm.font-medium.text-gray-700.mb-2.qc-opt-language-title {
2973 display: block;
2974 padding: 0 0 5px 0;
2975 }
2976 select#qcld_language_center_select {
2977 padding: 0 0 0 0;
2978 margin: 0 0 6px 0;
2979 padding: 0 4px;
2980 min-width: 220px;
2981 }
2982 select#qcld_language_center_select:focus {
2983 border-color: var(--woobot-primary);
2984 color: var(--woobot-primary);
2985 box-shadow: 0 0 0 1px var(--woobot-primary);
2986 }
2987 div#common-ai-settings h2 a {
2988 background: var(--woobot-primary);
2989 color: #ffffff;
2990 display: inline-block !important;
2991 font-size: 16px;
2992 padding: 8px 15px;
2993 border-radius: 8px;
2994 }
2995 div#common-ai-settings h2.nav-tab-wrapper {
2996 border: none;
2997 }
2998 div#qcld-rate-settings-tab {
2999 display: block !important;
3000 }
3001 div#common-ai-settings .form-check {
3002 margin-bottom: 15px;
3003 border: 0px solid #E5E6F2;
3004 padding: 12px 12px;
3005 border-radius: 8px;
3006 }
3007 .cxsc-settings-blocks.cxsc-settings-blocks-style input[type=radio]:checked::before {
3008 width: 1.5rem;
3009 height: 1.5rem;
3010 margin: -1px 0 0 -1px;
3011 }
3012 .cxsc-settings-blocks.cxsc-settings-blocks-style .radio-inline input[type=radio] {
3013 width: 1.5rem;
3014 height: 1.5rem;
3015 }
3016 button#rag-docx-submit, button#rag-migrate-btn, button#rag-media-docx-btn, button#qcld-rag-list-docx-btn, button#rag-media-pdf-btn, button#qcld-rag-list-pdf-btn {
3017 padding: 8px 15px;
3018 width: auto;
3019 font-size: 16px;
3020 font-weight: 500;
3021 color: var(--woobot-nav-muted);
3022 border-radius: 8px;
3023 position: relative;
3024 display: inline-block;
3025 align-items: center;
3026 gap: 15px;
3027 background: var(--woobot-primary);
3028 color: #ffffff;
3029 text-decoration: none;
3030 border-color: var(--woobot-primary) !important;
3031 line-height: normal;
3032 }
3033 button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
3034 background: var(--woobot-primary);
3035 border-color: var(--woobot-primary);
3036 }
3037 .wpbot-wizard-field select#wizard_ai_provider {
3038 background: transparent;
3039 color: #fff;
3040 width: 100%;
3041 display: block;
3042 max-width: unset;
3043 }
3044 .wpbot-wizard-field select#wizard_ai_provider:hover {
3045 border-color: var(--woobot-primary);
3046 color: var(--woobot-primary);
3047 box-shadow: 0 0 0 1px var(--woobot-primary);
3048 }
3049 div#wizard_api_key_container input#wizard_api_key {
3050 background: transparent;
3051 color: #fff;
3052 }
3053 div#collapseTwoControl input[type=radio]:checked::before {
3054 background-color: var(--woobot-primary);
3055 }
3056 .nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
3057 width: 320px !important;
3058 gap: 0;
3059 }
3060 div#rag-settings tbody#rag-knowledge-base-list tr td button {
3061 padding: 6px 20px;
3062 font-weight: bold;
3063 font-size: 12px;
3064 }
3065 div#rag-settings tbody#rag-knowledge-base-list tr td button.button.button-small.button-link-delete.rag-delete-doc{
3066 background: #d14529;
3067 color: #fff;
3068 border-color: #d14529;
3069 }
3070 button#ai-knowledge-base-tab {
3071 animation: pulse 2s infinite;
3072 }
3073 @keyframes pulse {
3074 0% {
3075 transform: scale(1);
3076 }
3077 50% {
3078 transform: scale(1.05);
3079 }
3080 100% {
3081 transform: scale(1);
3082 }
3083 }
3084 footer.wp-chatbot-admin-footer input#submit {
3085 background: var(--woobot-primary);
3086 padding: 12px 30px;
3087 }
3088 footer.wp-chatbot-admin-footer {
3089 padding: 0 20px 20px 20px;
3090 margin: 0 20px;
3091 }
3092 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
3093 padding: 8px 15px;
3094 background: #ffffff;
3095 color: var(--woobot-primary);
3096 border: 2px solid var(--woobot-primary);
3097 border-radius: 6px;
3098 font-weight: bold;
3099 position: absolute;
3100 top: 30px;
3101 left: 280px;
3102 line-height: normal;
3103 min-height: unset;
3104 }
3105 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
3106 padding: 8px 15px;
3107 background: var(--woobot-primary);
3108 color: #fff;
3109 border: 2px solid var(--woobot-primary);
3110 border-radius: 6px;
3111 font-weight: bold;
3112 position: absolute;
3113 top: 31px;
3114 left: 280px;
3115 }
3116 .qcld-session-history_menu_box .btn.btn-primary {
3117 background: var(--woobot-primary) !important;
3118 color: #fff !important;
3119 }
3120 .qcld-session-history_menu_box a.btn.btn-success {
3121 padding: 8px 24px;
3122 width: auto;
3123 font-size: 15px;
3124 font-weight: 500;
3125 border-radius: 8px;
3126 position: relative;
3127 background: #ffffff;
3128 color: var(--woobot-primary);
3129 text-decoration: none;
3130 line-height: normal;
3131 border: 2px solid var(--woobot-primary);
3132 }
3133 .qcld-session-history_menu_box a.btn.btn-success:hover {
3134 padding: 8px 24px;
3135 width: auto;
3136 font-size: 15px;
3137 font-weight: 500;
3138 border-radius: 8px;
3139 position: relative;
3140 background: var(--woobot-primary);
3141 color: #fff;
3142 text-decoration: none;
3143 line-height: normal;
3144 border: 2px solid var(--woobot-primary);
3145 }
3146 .Expandmore {
3147 background: #23ab10;
3148 display: inline-block;
3149 padding: 4px 10px;
3150 font-size: 14px;
3151 border-radius: 6px;
3152 position: relative;
3153 top: -15px;
3154 }
3155 .Collapsemore {
3156 background: #ff0000;
3157 display: inline-block;
3158 padding: 4px 10px;
3159 font-size: 14px;
3160 border-radius: 6px;
3161 position: relative;
3162 top: -15px;
3163 }
3164 .Expandmore span {
3165 color: #fff;
3166 margin: 0 0 0 8px;
3167 padding: 0 5px;
3168 font-size: 18px;
3169 }
3170 .admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
3171 display: flex;
3172 justify-content: flex-start;
3173 align-items: center;
3174 }
3175 .avatar-location-wrapper {
3176 padding: 0 0 25px 0;
3177 }
3178 .avatar-location-card.active {
3179 background: var(--woobot-primary);
3180 color: #ffffff;
3181 }
3182 .avatar-location-card.active svg {
3183 color: #ffffff;
3184 }
3185 .ai-provider-cards {
3186 margin: 0 0 0 0%;
3187 }
3188 .qcld-wp-chatbot-wrap-header_inn_heading a.button.page-title-action {
3189 margin: 0 0 0 4px;
3190 }
3191 label.qcld_label_width_full.qcld_label_width_half {
3192 font-size: 12px;
3193 padding: 6px 0 0 0;
3194 }
3195 .qc_menu_setup_area {
3196 margin: 40px 0 0 0;
3197 }
3198 input#chatbot_content_max_height, input#chatbot_content_max_height_responsive {
3199 width: 170px;
3200 border: 1px solid #eee;
3201 border-radius: 6px;
3202 }
3203 .ai-provider-cards-wrapper h4 {
3204 width: 410px;
3205 }
3206 .ai-provider-cards-wrapper {
3207 display: flex;
3208 }
3209
3210 /* AI Actions page — match WPBot Control Panel layout */
3211 body.chatbot-wpbot-lite_page_wpbot_ai_actions,
3212 body.chatbot-wpbot-lite_page_wbcs-botsessions-page,
3213 body.wpbot-panel_page_wbcs-botsessions-page {
3214 background-color: var(--woobot-page-bg);
3215 }
3216
3217 .wp-chatbot-tabs.qcld-ai-actions-layout {
3218 display: flex;
3219 align-items: flex-start;
3220 gap: 20px;
3221 overflow: visible;
3222 }
3223
3224 .wp-chatbot-tabs.qcld-ai-actions-layout > nav {
3225 width: 240px;
3226 min-width: 240px;
3227 flex-shrink: 0;
3228 float: none;
3229 margin-right: 0;
3230 position: sticky;
3231 top: 32px;
3232 }
3233
3234 .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3235 flex: 1 1 auto;
3236 min-width: 0;
3237 width: auto !important;
3238 float: none;
3239 padding: 24px;
3240 background: #fff;
3241 border-radius: 16px;
3242 }
3243
3244 .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3245 width: 360px;
3246 min-width: 320px;
3247 flex-shrink: 0;
3248 float: none;
3249 margin: 0;
3250 padding: 0;
3251 background: transparent;
3252 position: sticky;
3253 top: 32px;
3254 }
3255
3256 .qcld-ai-actions-layout .ai-saved-actions-submenu {
3257 list-style: none;
3258 margin: 4px 0 0;
3259 padding: 0 0 6px;
3260 }
3261
3262 .qcld-ai-actions-layout .ai-saved-actions-submenu li a {
3263 padding: 10px 12px 10px 48px;
3264 font-size: 14px;
3265 font-weight: 500;
3266 color: var(--woobot-nav-muted);
3267 border-radius: 8px;
3268 }
3269
3270 .qcld-ai-actions-layout .ai-saved-actions-submenu li.tab-current a,
3271 .qcld-ai-actions-layout .ai-saved-actions-submenu li a:hover {
3272 background: var(--woobot-primary);
3273 color: #fff;
3274 }
3275
3276 .qcld-ai-actions-layout .ai-no-saved-actions {
3277 padding: 8px 12px 8px 48px;
3278 color: var(--woobot-nav-muted);
3279 font-size: 13px;
3280 font-style: italic;
3281 }
3282
3283 .qcld-ai-actions-layout .ai-sidebar-parent-link {
3284 position: relative;
3285 }
3286
3287 .qcld-ai-actions-layout .qcld-ai-saved-toggle {
3288 margin-left: auto;
3289 font-size: 16px;
3290 width: 16px;
3291 height: 16px;
3292 }
3293
3294 .qcld-ai-template-grid {
3295 display: grid;
3296 grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
3297 gap: 16px;
3298 margin-top: 20px;
3299 }
3300
3301 .qcld-ai-actions-page .ai-template-card {
3302 background: #fff;
3303 border: 1px solid #E5E6F2;
3304 border-radius: 16px;
3305 padding: 22px 16px;
3306 cursor: pointer;
3307 text-align: center;
3308 transition: all 0.2s ease;
3309 }
3310
3311 .qcld-ai-actions-page .ai-template-card:hover {
3312 border-color: var(--woobot-primary);
3313 box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
3314 transform: translateY(-2px);
3315 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
3316 }
3317
3318 .qcld-ai-actions-page .ai-template-card-icon {
3319 color: var(--woobot-primary);
3320 margin-bottom: 12px;
3321 }
3322
3323 .qcld-ai-actions-page .ai-template-card-icon .dashicons {
3324 font-size: 36px;
3325 width: 36px;
3326 height: 36px;
3327 }
3328
3329 .qcld-ai-actions-page .ai-template-card h4 {
3330 margin: 0 0 8px;
3331 font-size: 15px;
3332 font-weight: 700;
3333 color: var(--woobot-primary);
3334 }
3335
3336 .qcld-ai-actions-page .ai-template-card p {
3337 margin: 0;
3338 font-size: 13px;
3339 color: #6b638f;
3340 line-height: 1.45;
3341 }
3342
3343 .qcld-ai-actions-alert {
3344 color: #fff;
3345 background: #e64340;
3346 padding: 12px 16px;
3347 border-radius: 8px;
3348 margin-bottom: 20px;
3349 }
3350
3351 .qcld-ai-action-edit-head {
3352 display: flex;
3353 justify-content: space-between;
3354 align-items: center;
3355 gap: 12px;
3356 margin-bottom: 16px;
3357 border-bottom: 1px solid #E5E6F2;
3358 padding-bottom: 12px;
3359 }
3360
3361 .qcld-ai-action-edit-head .qcld-wpbot-main-tabs-title {
3362 margin: 0;
3363 border-bottom: 0;
3364 padding: 0;
3365 }
3366
3367 .qcld-ai-action-edit-actions {
3368 display: flex;
3369 align-items: center;
3370 gap: 10px;
3371 flex-wrap: wrap;
3372 justify-content: flex-end;
3373 }
3374
3375 .qcld-ai-actions-page .qcld-ai-goto-new-action {
3376 padding: 10px 18px;
3377 font-size: 14px;
3378 line-height: 1.2;
3379 white-space: nowrap;
3380 }
3381
3382 .qcld-ai-actions-page .remove-ai-form {
3383 color: #e64340;
3384 border: 1px solid #e64340;
3385 background: #fff;
3386 border-radius: 8px;
3387 }
3388
3389 .qcld-ai-actions-page .remove-ai-form:hover {
3390 background: #e64340;
3391 color: #fff;
3392 }
3393
3394 .qcld-ai-actions-page .wpbot-ai-inner-tabs {
3395 margin-bottom: 20px;
3396 }
3397
3398 .qcld-ai-history-pro-tab {
3399 opacity: 0.65;
3400 cursor: not-allowed !important;
3401 }
3402
3403 .qcld-ai-actions-page .qc_wpbot_pro {
3404 background: #e64340;
3405 color: #fff;
3406 font-size: 10px;
3407 padding: 2px 6px;
3408 border-radius: 4px;
3409 margin-left: 5px;
3410 vertical-align: middle;
3411 }
3412
3413 .qcld-ai-actions-page .form-group label,
3414 .qcld-ai-actions-page .qcld-ai-email-field label {
3415 display: block;
3416 font-weight: 600;
3417 margin-bottom: 6px;
3418 color: var(--woobot-primary);
3419 }
3420
3421 .qcld-ai-actions-page .form-group.qcld-ai-email-toggle {
3422 display: flex;
3423 align-items: center;
3424 border: none;
3425 padding: 4px 0 10px;
3426 margin-bottom: 8px;
3427 }
3428
3429 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] {
3430 position: absolute;
3431 opacity: 0;
3432 width: 1px;
3433 height: 1px;
3434 pointer-events: none;
3435 }
3436
3437 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label {
3438 position: relative;
3439 display: flex;
3440 align-items: center;
3441 width: auto;
3442 height: auto;
3443 min-height: 22px;
3444 margin: 0;
3445 padding: 0 0 0 34px;
3446 border: none;
3447 border-radius: 0;
3448 text-indent: 0;
3449 font: 600 16px/22px "DM Sans", sans-serif;
3450 color: var(--woobot-primary);
3451 cursor: pointer;
3452 white-space: nowrap;
3453 user-select: none;
3454 }
3455
3456 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:before {
3457 content: "";
3458 position: absolute;
3459 left: 0;
3460 top: 50%;
3461 width: 22px;
3462 height: 22px;
3463 margin-top: -11px;
3464 border: 2px solid var(--woobot-primary);
3465 border-radius: 4px;
3466 background: #fff;
3467 box-sizing: border-box;
3468 transition: all ease-out 200ms;
3469 }
3470
3471 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:after {
3472 content: "";
3473 position: absolute;
3474 left: 7px;
3475 top: 8px;
3476 width: 6px;
3477 height: 11px;
3478 margin-top: -7px;
3479 border-bottom: 2px solid #fff;
3480 border-right: 2px solid #fff;
3481 border-left: none;
3482 transform: rotate(45deg);
3483 opacity: 0;
3484 transition: opacity ease-out 200ms;
3485 }
3486
3487 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label {
3488 border: none;
3489 }
3490
3491 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:before {
3492 background: #22b573;
3493 border-color: #22b573;
3494 }
3495
3496 .qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:after {
3497 opacity: 1;
3498 width: 6px;
3499 }
3500
3501 .qcld-ai-actions-page .form-group input[type="text"],
3502 .qcld-ai-actions-page .form-group textarea,
3503 .qcld-ai-actions-page .qcld-ai-email-field input[type="text"] {
3504 width: 100%;
3505 max-width: 100%;
3506 border: 1px solid #E5E6F2;
3507 border-radius: 8px;
3508 padding: 10px 12px;
3509 }
3510
3511 .qcld-ai-email-field {
3512 margin-top: 12px;
3513 }
3514
3515 .qcld-ai-field-hint,
3516 .qcld-ai-muted {
3517 margin: 6px 0 0;
3518 font-size: 13px;
3519 color: #888;
3520 font-style: italic;
3521 }
3522
3523 .qcld-ai-save-footer {
3524 display: flex;
3525 flex-direction: column;
3526 align-items: flex-start;
3527 gap: 12px;
3528 padding: 16px 0 0;
3529 }
3530
3531 .qcld-ai-save-footer .cxsc-settings-blocks-notic {
3532 width: 100%;
3533 }
3534
3535 .qcld-ai-save-footer .cxsc-settings-blocks-notic a {
3536 color: var(--woobot-primary);
3537 font-weight: 700;
3538 }
3539
3540 .qcld-ai-playground {
3541 background: #fff;
3542 border-radius: 16px;
3543 overflow: hidden;
3544 box-shadow: 0 8px 24px rgba(var(--woobot-primary-rgb), 0.08);
3545 border: 1px solid #E5E6F2;
3546 }
3547
3548 .qcld-ai-playground-header {
3549 background: var(--woobot-primary);
3550 color: #fff;
3551 padding: 14px 16px;
3552 font-weight: 700;
3553 text-align: center;
3554 position: relative;
3555 }
3556
3557 .qcld-ai-playground-header #ai-playground-refresh {
3558 position: absolute;
3559 right: 12px;
3560 top: 10px;
3561 background: transparent;
3562 border: none;
3563 color: #fff;
3564 cursor: pointer;
3565 padding: 0;
3566 }
3567
3568 .qcld-ai-playground-header #ai-playground-refresh .dashicons {
3569 font-size: 20px;
3570 width: 20px;
3571 height: 20px;
3572 }
3573
3574 #ai-actions-playground-container {
3575 padding: 16px;
3576 display: flex;
3577 flex-direction: column;
3578 height: 420px;
3579 overflow-y: auto;
3580 background: var(--woobot-page-bg);
3581 }
3582
3583 #ai-actions-playground-messages {
3584 display: flex;
3585 flex-direction: column;
3586 justify-content: flex-end;
3587 flex: 1;
3588 }
3589
3590 .qcld-ai-pg-bot-row {
3591 display: flex;
3592 gap: 10px;
3593 align-items: flex-end;
3594 margin-bottom: 12px;
3595 }
3596
3597 .qcld-ai-pg-user-row {
3598 display: flex;
3599 justify-content: flex-end;
3600 margin-bottom: 12px;
3601 }
3602
3603 .qcld-ai-pg-avatar {
3604 width: 36px;
3605 height: 36px;
3606 background: var(--woobot-primary);
3607 border-radius: 50%;
3608 flex-shrink: 0;
3609 background-size: cover;
3610 background-position: center;
3611 }
3612
3613 .qcld-ai-pg-bubble {
3614 background: #fff;
3615 padding: 12px;
3616 border-radius: 16px;
3617 border-bottom-left-radius: 4px;
3618 box-shadow: 0 2px 6px rgba(var(--woobot-primary-rgb), 0.08);
3619 width: 100%;
3620 max-width: 80%;
3621 font-size: 13px;
3622 color: #333;
3623 line-height: 1.45;
3624 overflow-wrap: break-word;
3625 }
3626
3627 .qcld-ai-pg-bubble p {
3628 margin: 0 0 10px;
3629 font-size: 13px;
3630 }
3631
3632 .qcld-ai-pg-bubble.is-loading {
3633 color: var(--woobot-nav-muted);
3634 }
3635
3636 .qcld-ai-pg-user-bubble {
3637 background: var(--woobot-primary);
3638 color: #fff;
3639 padding: 8px 12px;
3640 border-radius: 16px;
3641 border-bottom-right-radius: 4px;
3642 max-width: 80%;
3643 font-size: 13px;
3644 }
3645
3646 #ai-actions-live-preview {
3647 display: flex;
3648 flex-wrap: wrap;
3649 gap: 6px;
3650 }
3651
3652 .playground-ai-action-btn {
3653 background: #fff;
3654 border: 1px solid var(--woobot-primary);
3655 padding: 6px 12px;
3656 border-radius: 16px;
3657 font-size: 12px;
3658 color: var(--woobot-primary);
3659 cursor: pointer;
3660 display: inline-block;
3661 transition: all 0.2s;
3662 }
3663
3664 .playground-ai-action-btn:hover {
3665 background: var(--woobot-primary);
3666 color: #fff;
3667 }
3668
3669 .playground-ai-action-btn.is-empty {
3670 cursor: default;
3671 border-color: #E5E6F2;
3672 color: #888;
3673 background: #f7f7fb;
3674 }
3675
3676 .playground-ai-action-btn.is-empty:hover {
3677 background: #f7f7fb;
3678 color: #888;
3679 }
3680
3681 .qcld-ai-pg-form-data {
3682 background: var(--woobot-page-bg);
3683 padding: 10px;
3684 border-left: 3px solid var(--woobot-primary);
3685 margin: 10px 0;
3686 border-radius: 6px;
3687 }
3688
3689 .qcld-ai-pg-form-data strong {
3690 display: block;
3691 margin-bottom: 5px;
3692 color: var(--woobot-primary);
3693 text-transform: capitalize;
3694 }
3695
3696 .qcld-ai-pg-form-data ul {
3697 margin: 0;
3698 padding-left: 15px;
3699 font-size: 13px;
3700 color: #333;
3701 }
3702
3703 .qcld-ai-playground-footer {
3704 padding: 12px;
3705 background: #fff;
3706 border-top: 1px solid #E5E6F2;
3707 display: flex;
3708 gap: 8px;
3709 align-items: center;
3710 }
3711
3712 .qcld-ai-playground-footer #playground-input {
3713 width: 100%;
3714 background: var(--woobot-page-bg);
3715 border: 1px solid #E5E6F2;
3716 border-radius: 20px;
3717 padding: 10px 14px;
3718 color: #333;
3719 font-size: 13px;
3720 outline: none;
3721 }
3722
3723 .qcld-ai-playground-footer #playground-send-btn {
3724 border: none;
3725 border-radius: 50%;
3726 width: 40px;
3727 height: 40px;
3728 background: var(--woobot-primary);
3729 color: #fff;
3730 cursor: pointer;
3731 display: flex;
3732 align-items: center;
3733 justify-content: center;
3734 flex-shrink: 0;
3735 }
3736
3737 .qcld-ai-playground-footer #playground-send-btn .dashicons {
3738 font-size: 18px;
3739 width: 18px;
3740 height: 18px;
3741 line-height: 1;
3742 }
3743
3744 .qcld-ai-actions-page .ai-content-pane {
3745 animation: qcldAiFadeIn 0.3s ease-in-out;
3746 }
3747
3748 div#ai-saved-actions-container h2.nav-tab-wrapper.wpbot-ai-inner-tabs {
3749 padding: 0 0 12px 0;
3750 border: none;
3751 }
3752
3753 @keyframes qcldAiFadeIn {
3754 from { opacity: 0; transform: translateY(5px); }
3755 to { opacity: 1; transform: translateY(0); }
3756 }
3757
3758 @media (max-width: 1280px) {
3759 .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3760 width: auto !important;
3761 }
3762 .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3763 width: 300px;
3764 min-width: 280px;
3765 }
3766 }
3767
3768 @media (max-width: 992px) {
3769 .wp-chatbot-tabs.qcld-ai-actions-layout {
3770 flex-wrap: wrap;
3771 }
3772 .wp-chatbot-tabs.qcld-ai-actions-layout > nav,
3773 .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap,
3774 .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3775 width: 100% !important;
3776 min-width: 0;
3777 position: static;
3778 }
3779 }
3780
3781
3782