PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.3.8
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.3.8
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 / templates / template-00 / style.css

style.css in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 8.3.8, at templates/template-00/style.css

1,188 lines 26.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2
3 01. Ball content
4
5 02. wp Chat bot Message container
6
7 -A Link Item
8
9 -B Loading
10
11 03. wp Chat bot Message Editor
12
13 04. wp Chat bottom Tab Nav Editor
14 05. Tab Feature Product
15
16 06. Tab Cart
17
18 07. Product Details
19
20 */
21
22 /*********************
23
24 01. ball content wrapper
25
26 **********************/
27
28 .wp-chatbot-board-container {
29 border-radius: 5px;
30 overflow: hidden;
31 }
32
33 .wp-chatbot-board-container:after {
34 content: "";
35 position: absolute;
36 right: 0;
37 bottom: -26px;
38 width: 0;
39 height: 0;
40 border-left: 30px solid transparent;
41 border-right: 0 solid transparent;
42 border-top: 30px solid #ffffff;
43
44 }
45
46 /******************************
47
48 02. wp Chat bot Message container
49
50 *********************************/
51
52
53 .wp-chatbot-header h3 {
54
55 color: #ffffff;
56
57 font-size: 18px !important;
58
59 letter-spacing: 1px;
60
61 }
62
63
64 ul.wp-chatbot-messages-container li {
65
66 font-size: 14px;
67
68 }
69
70 ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
71
72 padding-left: 50px;
73
74 }
75
76 ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
77
78 padding-right: 50px;
79
80 }
81 ul li .wp-chatbot-avatar {
82 margin-top: 0 !important;
83 }
84 ul.wp-chatbot-messages-container > li .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
85
86 position: absolute;
87
88 top: 0;
89
90 width: 40px;
91
92 height: 40px;
93
94 overflow: hidden;
95
96 border-radius: 50%;
97
98 }
99
100 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
101
102 left: 0;
103
104 }
105
106 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
107
108 right: 0;
109
110 }
111
112 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
113
114 padding: 8px 15px;
115
116 max-width: 90%;
117
118 box-shadow: 0 2px 8px #bfbfbf;
119
120 line-height: 150%;
121
122 display: table;
123
124 }
125
126 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
127
128 text-align: right;
129
130 float: right;
131
132 }
133
134 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
135
136 background-color: #eaf1f6;
137
138 color: #494949;
139
140 margin-left: 10%;
141
142 border-radius: 10px 10px 0 10px;
143
144 }
145
146 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
147
148 background-color: #1f8ceb;
149
150 color: #ffffff;
151
152 border-radius: 0 10px 10px 10px;
153 width: 100%;
154 }
155
156 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
157
158 background-color: transparent;
159
160 }
161
162 /************ 02 (A). Link Item *************/
163
164 span.qcld-chatbot-product-category,
165 span.qcld-chatbot-support-items,
166 span.qcld-chatbot-wildcard,
167 span.qcld-chatbot-suggest-email,
168 span.qcld-chatbot-reset-btn,
169 #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
170
171 color: #000000;
172 background-size: 200% auto;
173 border: 1px solid #ffffff;
174 display: inline-block;
175 margin: 3px auto;
176 padding: 6px 11px;
177
178
179 }
180
181 span.qcld-chatbot-product-category:hover,
182 span.qcld-chatbot-support-items:hover,
183 span.qcld-chatbot-wildcard:hover,
184 span.qcld-chatbot-suggest-email:hover,
185 span.qcld-chatbot-reset-btn:hover,
186 #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover {
187
188 background-position: right center;
189
190
191 }
192
193 /**************** 02. (B) Loading **********/
194
195 ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
196
197 background-color: #fff;
198
199 padding: 1px;
200
201 border-radius: 5px;
202
203 margin: 0 auto;
204
205 display: block;
206
207 }
208
209 /*******************************
210
211 03. wp Chat bot Message Editor
212
213 **********************************/
214
215
216
217 .wp-chatbot-editor-container input, .wp-chatbot-editor-area input::-webkit-input-placeholder, .wp-chatbot-editor-area input::-moz-placeholder, .wp-chatbot-editor-area input:-ms-input-placeholder, .wp-chatbot-editor-area input:-moz-placeholder {
218
219 color: #fff;
220
221 }
222
223 /*******************************
224
225 04. wp Chat bottom Tab Nav Editor
226
227 **********************************/
228
229 .wp-chatbot-footer {
230
231 padding: 0;
232
233 }
234
235 .wp-chatbot-tab-nav ul li a[data-option="recent"] {
236
237 background-position: -7px -47px;
238
239 }
240
241 .wp-chatbot-tab-nav ul li a[data-option="cart"] {
242
243 background-position: -47px -47px;
244
245 }
246
247 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
248
249 background-position: -82px -42px;
250
251 }
252
253 .wp-chatbot-tab-nav ul li a[data-option="help"] {
254
255 background-position: -129px -47px;
256
257 }
258
259
260
261 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
262
263 content: "";
264
265 position: absolute;
266
267 border-radius: 50%;
268
269 border: 3px solid #1f8ceb;
270
271 left: -9px;
272
273 right: -9px;;
274
275 bottom: -9px;
276
277 top: -9px;
278
279 }
280
281 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
282
283 border: 2px solid #1f8ceb;
284
285 }
286
287 /***************************
288
289 05. Tab Feature Product
290
291 ***************************/
292
293 .wp-chatbot-agent-profile {
294
295 position: relative;
296
297 padding-left: 50px;
298
299 box-sizing: border-box;
300
301 word-wrap: break-word;
302
303 list-style: none;
304
305 display: block;
306
307 clear: both;
308
309 line-height: 150%;
310
311 min-height: 50px;
312
313 margin: 0 0 10px 0;
314
315 }
316
317 .wp-chatbot-widget-title {
318
319 color: #353535;
320
321 text-align: center;
322
323 padding-bottom: 10px;
324
325 }
326
327 /**************************
328
329 06. Tab Cart
330
331 *************************/
332
333 .wp-chatbot-cart-header {
334
335 background-color: #F5F5F5;
336
337 }
338
339 .wp-chatbot-cart-single {
340
341 background-color: rgba(245, 245, 245, 0.1);
342
343 border-bottom: 1px solid #dddddd;
344
345 }
346
347 .wp-chatbot-cart-single:nth-child(2n+1) {
348
349 background-color: rgba(245, 245, 245, 0.5);
350
351 }
352
353 .wp-chatbot-cart-footer div a {
354
355 text-decoration: none;
356
357 background: #1f8ceb;
358
359 color: #ffffff;
360
361 }
362
363 .wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
364
365 background: #1c7ed4;
366
367 }
368
369 /**************************
370
371 07. Product Details
372
373 ***************************/
374
375 .wp-chatbot-product-details {
376
377 box-shadow: 0 0 10px #ccc;
378
379 background-color: #ffffff;
380
381 }
382
383 .wp-chatbot-product-cart-button input[type="button"] {
384
385 border: 1px solid #e4e5e7;
386
387 background: #1f8ceb;
388
389 color: #ffffff;
390
391 box-shadow: 0 0 2px #999;
392
393 }
394
395 .wp-chatbot-product-cart-button input[type="button"]:hover {
396
397 background: #1c7ed4;
398
399 color: #ffffff;
400
401 }
402
403 /*************************
404
405 Right-to-left text direction
406
407 **************************/
408
409 .wp-chatbot-rtl {
410
411 text-align: right;
412
413 direction: RTL;
414
415 }
416
417 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg, .wp-chatbot-rtl .wp-chatbot-agent-profile {
418
419 padding: 0 50px 0 0;
420
421 }
422
423 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
424
425 padding: 0;
426
427 }
428
429 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
430
431 display: table;
432
433 max-width: 90%;
434
435 float: right;
436
437 text-align: right;
438
439 }
440
441 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
442 .wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
443
444 right: 0;
445
446 left: auto;
447
448 }
449
450 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
451
452 padding: 0 0 0 50px;
453
454 }
455
456 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
457
458 left: 0;
459
460 right: auto;
461
462 }
463
464 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
465
466 display: table;
467
468 max-width: 90%;
469
470 float: left;
471
472 text-align: left;
473
474 }
475
476 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
477
478 margin-left: 0;
479
480 }
481
482 .wp-chatbot-rtl .wp-chatbot-editor-container input {
483
484 text-align: right;
485
486 direction: RTL;
487
488 }
489
490 .wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
491
492 margin: auto;
493
494 }
495 .wp-chatbot-rtl .wp-chatbot-products-area ul li {
496 margin: 1%;
497 vertical-align: middle;
498 }
499
500 .wpb-search-result a {
501 display: block;
502 background: #eee;
503 padding: 4px 5px;
504 line-height: 20px;
505 padding-left: 20px;
506 margin-bottom: 0;
507 }
508 .wpb-search-result a:before {
509 content: "";
510 font-style: normal;
511 font-weight: normal;
512 text-decoration: inherit;
513 color: #000;
514 font-size: 18px;
515 position: absolute;
516 left: 68px;
517 line-height: 1;
518 font-weight: bold;
519 color: #7d7b7b;
520 }
521 .wpbot-saas-live-chat{
522 width: 310px !important;
523 height: 500px;
524 box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
525 display:none;
526 }
527 .wpchat_header_left{
528 display:inline-block;
529 }
530 .wpchat_header_left span{ font-size: 22px;
531 padding: 0px 10px; }
532 .wpchat_header_right {
533 float: right;
534 margin-right: 12px;
535 }
536
537
538 /* Css Updated - 06-06-24 */
539
540 .wp-chatbot-header {
541 color: rgb(255, 255, 255);
542 }
543 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
544 color: rgb(255, 255, 255);
545 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
546 }
547 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
548 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
549 }
550
551 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
552 color: rgb(255, 255, 255);
553 background: linear-gradient(135deg, rgb(0, 204, 255) 0%, rgb(42, 39, 218) 100%);
554 }
555 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
556 background: rgba(0, 0, 0, 0);
557 padding: 8px 12px 6px 12px;
558 }
559
560 h2.oneline {
561 font-size: 18px;
562 color: #fff;
563 }
564
565 h2.oneline img{
566 margin: 0 0 0 10px !important;
567 }
568 .wp-chatbot-header {
569 display: flex;
570 align-content: center;
571 align-items: center;
572 }
573 .wp-chatbot-content {
574 height: calc(100vh - 320px) !important;
575 }
576 div#wp-chatbot-desktop-reload {
577 top: -14px;
578 }
579 #wp-chatbot-desktop-close {
580 top: -14px;
581 }
582 div#wp-chatbot-ball-container {
583 box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px;
584 border-radius: 8px;
585 }
586
587
588 .wp-chatbot-tab-nav ul li a {
589 width: 32px;
590 height: 32px;
591 background: url(../../images/tab-btn-icon-new.png) no-repeat;
592
593 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
594 background-color: rgb(255 255 255 / 25%);
595 backdrop-filter: blur(0px);
596 isolation: isolate;
597
598
599 }
600 .wp-chatbot-tab-nav ul li a[data-option="help"] {
601 background-position: -125px -44px;
602 }
603 .wp-chatbot-tab-nav ul li a[data-option="support"] {
604 background-position: -166px -44px;
605 }
606
607 .wp-chatbot-board-container:after {
608 border-top: 30px solid #ffffff00;
609 }
610
611 .wp-chatbot-header {
612 padding: 6px 15px;
613 }
614 .wp-chatbot-ball {
615 box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
616 }
617
618 .wp-chatbot-tab-nav ul {
619 margin: 0 !important;
620 padding: 0 !important;
621 list-style: none;
622 text-align: center;
623 display: flex;
624 justify-content: space-between;
625 vertical-align: bottom;
626 }
627 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
628 border: 0 solid #1f8ceb;
629 }
630 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
631 border: 0px solid #1f8ceb;
632 }
633 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
634 background-position: -82px -41px;
635 }
636
637 .wp-chatbot-tab-nav {
638 padding: 4px 5px;
639 }
640
641 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
642 border-radius: 10px;
643 }
644 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
645 border-radius: 10px;
646 }
647
648 .wp-chatbot-board-container {
649 overflow: visible;
650 }
651
652
653
654 .wp-chatbot-header-welcome-text img {
655 border-radius: 50%;
656 padding: 3px;
657 }
658
659 .wp-chatbot-footer {
660 padding: 0;
661 }
662 .wp-chatbot-header-welcome-text {
663 align-items: center;
664 display: flex;
665 justify-content: center;
666 }
667 span.qcld-chatbot-wildcard {
668 width: 100%;
669 max-width: 255px;
670 }
671
672 .wp-chatbot-textanimation span {
673 display: inline-block;
674 width: auto;
675 margin: 3px 2px;
676 }
677
678 .wp-chatbot-textanimation span:hover {
679 color: rgb(255, 255, 255);
680 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
681 }
682
683
684
685 .wpb-search-result a {
686 color: #222 !important;
687 }
688 .wpbot_card_caption p {
689 color: #222 !important;
690 }
691
692
693 @media screen and (max-width: 768px) {
694 .wp-chatbot-editor-container button {
695 right: 0;
696 }
697 .wp-chatbot-content {
698 height: calc(100vh - 220px) !important;
699 }
700 }
701
702
703 div#wp-chatbot-board-container {
704 background: url(../../images/bg-03.jpg) no-repeat;
705 position: relative;
706 background-size: 100% 100%;
707 background-position: center bottom;
708 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
709 backdrop-filter: blur(0px);
710 isolation: isolate;
711 box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
712 border-radius: 8px;
713 }
714
715 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded {
716 width: 700px;
717 max-width: calc(100vw - 40px);
718 }
719 div#wp-chatbot-board-container:before {
720 isolation: isolate;
721 content: '';
722 position: absolute;
723 height: 100%;
724 width: 100%;
725 backdrop-filter: blur(0px);
726 border-radius: 8px !important;
727 left: 0;
728 right: 0;
729 width: 100%;
730 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
731 backdrop-filter: blur(0px);
732 isolation: isolate;
733 }
734 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
735 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
736 background: rgb(255 255 255 / 30%);
737 backdrop-filter: blur(0px);
738 isolation: isolate;
739 }
740 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph{
741
742 background: rgb(255 255 255 / 30%);
743 backdrop-filter: blur(0px);
744 isolation: isolate;
745 }
746 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph{
747 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
748 background: rgb(255 255 255 / 30%);
749 backdrop-filter: blur(0px);
750 isolation: isolate;
751 }
752
753 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
754 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
755 background: rgb(255 255 255 / 25%);
756 backdrop-filter: blur(0px);
757 isolation: isolate;
758 color: #fff;
759 }
760
761 div#wp-chatbot-editor-container {
762 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
763 background: #5755bd61;
764 backdrop-filter: blur(0px);
765 isolation: isolate;
766 margin: 0 12px 0 12px;
767 border-radius: 6PX;
768 }
769 div#wp-chatbot-desktop-reload {
770 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
771 background: rgb(255 255 255 / 25%);
772 backdrop-filter: blur(0px);
773 isolation: isolate;
774 }
775 div#wp-chatbot-desktop-close {
776 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
777 background: rgb(255 255 255 / 25%);
778 backdrop-filter: blur(0px);
779 isolation: isolate;
780 }
781 div#wp-chatbot-desktop-reload {
782 right: 38px;
783 }
784 button#wp-chatbot-send-message {
785 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
786 background: #ffffff91;
787 backdrop-filter: blur(0px);
788 isolation: isolate;
789 color: #3f3f3f;
790 }
791
792 .wp-chatbot-textanimation span:hover {
793 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
794 background: rgb(255 255 255 / 25%);
795 backdrop-filter: blur(0px);
796 isolation: isolate;
797 backdrop-filter: blur(2px);
798 }
799 .wp-chatbot-editor-container input {
800 width:100%;
801 }
802
803 .wp-chatbot-editor-container input, .wp-chatbot-editor-area input::-webkit-input-placeholder, .wp-chatbot-editor-area input::-moz-placeholder, .wp-chatbot-editor-area input:-ms-input-placeholder, .wp-chatbot-editor-area input:-moz-placeholder {
804
805 color: #222 !important;
806
807 }
808 .wp-chatbot-header-welcome-text img {
809 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
810 background: rgb(255 255 255 / 25%);
811 backdrop-filter: blur(0px);
812 isolation: isolate;
813 }
814 .wp-chatbot-header-welcome-text img {
815 max-width: 38px !important;
816 }
817
818 div#wp-chatbot-editor-container input{
819 color: #222;
820 }
821 div#wp-chatbot-editor-container input::placeholder {
822 color: #fff;
823 }
824 div#wp-chatbot-editor-container input::-webkit-input-placeholder {
825 color: #fff;
826 }
827 div#wp-chatbot-editor-container input::-moz-placeholder {
828 color: #fff;
829 }
830 div#wp-chatbot-editor-container input:-ms-input-placeholder {
831 color: #fff;
832 }
833
834 /* Keep editor autofill transparent */
835 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill,
836 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:hover,
837 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:focus,
838 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:active,
839 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill,
840 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:hover,
841 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:focus,
842 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:active {
843 -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
844 box-shadow: 0 0 0 1000px transparent inset !important;
845 -webkit-text-fill-color: inherit !important;
846 background-color: transparent !important;
847 transition: background-color 9999s ease-out 0s;
848 }
849
850
851 .wp-chatbot-tab-nav ul li a:hover {
852 transform: scale(0.95);
853 }
854 .wp-chatbot-tab-nav ul li a{
855 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
856 }
857
858 .wp-chatbot-textanimation span:hover {
859 transform: scale(0.95);
860 }
861 .wp-chatbot-textanimation span{
862 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
863 }
864
865 button#wp-chatbot-send-message:hover {
866 transform: scale(0.95);
867 }
868 button#wp-chatbot-send-message{
869 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
870 }
871
872 .wp-chatbot-tab-nav ul li:before {
873 top: 0;
874 }
875
876 span.qcld-chatbot-wildcard:hover {
877 transform: scale(0.95);
878 }
879 span.qcld-chatbot-wildcard{
880 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
881 }
882
883 .wp-chatbot-tab-nav ul {
884 margin: 5px 0 !important;
885 padding: 0 !important;
886 list-style: none;
887 text-align: center;
888 display: flex;
889 gap: 30px;
890 vertical-align: bottom;
891 align-items: center;
892 justify-content: center;
893 width: 100%;
894 }
895
896 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
897 color: rgb(33 33 33);
898 }
899 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
900 color: rgb(33 33 33) ;
901 }
902
903
904 div#wp-chatbot-desktop-reload {
905 color: #3f3f3f;
906 }
907 #wp-chatbot-desktop-close {
908 color: #3f3f3f;
909
910 }
911 .wp-chatbot-ball {
912 background: #fbf7ff;
913 }
914 .wp-chatbot-ball {
915 background: #ffffff;
916 }
917 .wp-chatbot-ball:hover, .wp-chatbot-ball:focus {
918 background: #ffffff;
919 }
920 .wp-chatbot-header {
921 border-bottom: 1px solid #fff;
922 box-shadow: inset 1px 1px 0 rgb(255 255 255), inset 0 0 5px rgb(255 255 255);
923 }
924
925
926 .wpbot_chatopen_iconanimation .wp-chatbot-ball {
927 border: 1px solid #dadada;
928 background-color: #dadada;
929 }
930 div#wp-chatbot-desktop-reload {
931 top: -10px;
932 }
933 #wp-chatbot-desktop-close {
934 top: -10px;
935 right: 8px;
936 }
937 div#wp-chatbot-desktop-reload {
938 right: 45px;
939 }
940 div#wp-chatbot-desktop-expand {
941 top: -10px;
942 right: 45px;
943 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
944 background: rgb(255 255 255 / 25%);
945 backdrop-filter: blur(0px);
946 isolation: isolate;
947 color: #3f3f3f;
948 cursor: pointer;
949 }
950
951 div#wp-chatbot-desktop-expand span {
952 position: relative;
953 }
954 div#wp-chatbot-desktop-reload {
955 right: 82px;
956 }
957 #wp-chatbot-desktop-close {
958 right: 8px;
959 }
960
961
962 .notice.is-dismissible.qcbot-feedback {
963 display: flex;
964 column-gap: 15px;
965 row-gap: 10px;
966 background: #fff;
967 padding: 15px 15px;
968 margin: 20px 20px 20px 0;
969 border-radius: 16px;
970 align-items: center;
971 justify-content: space-between;
972 border: none;
973 }
974
975
976
977
978 .wp-chatbot-template-01 .wpbot_card_image span {
979 display: none !important;
980 }
981 .wp-chatbot-template-01 .wpbot_card_image a {
982 display: flex !important;
983 gap: 6px !important;
984 }
985 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas a{
986 display: flex !important;
987 gap: 6px !important;
988 }
989 .wp-chatbot-template-01 .wpbot_card_image img{
990 max-width: 25px !important;
991 height: 25px !important;
992 border-radius: 50%;
993 }
994 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas span {
995 display: flex !important;
996 gap: 10px !important;
997 margin: 0 10px 0 0 !important;
998 }
999 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas .wpbot_card_caption.wpbot_card_caption_saas p {
1000 display: flex;
1001 }
1002 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper {
1003 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1004 background: rgb(255 255 255 / 30%);
1005 backdrop-filter: blur(0px);
1006 isolation: isolate;
1007 margin: 5px 0;
1008 padding: 5px;
1009 }
1010 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper p.wpbot_card_caption_title{
1011 margin: 0;
1012 padding: 0;
1013 color: rgb(29 115 180) !important;
1014 font-weight: 600;
1015 }
1016 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas p.wpbot_card_description {
1017 padding: 0 0 0 28px;
1018 }
1019 .wp-chatbot-template-01 .wpbot_card_caption p.wpbot_card_description {
1020 margin: 0;
1021 padding: 0;
1022 }
1023 .wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption h2 {
1024 margin: 0;
1025 padding: 0;
1026 color: rgb(29 115 180) !important;
1027 font-weight: 600;
1028 font-size: 14px;
1029 }
1030
1031 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a{
1032 text-decoration: none !important;
1033 }
1034
1035 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a p:first-child {
1036 margin: 0;
1037 padding: 0;
1038 color: rgb(29 115 180) !important;
1039 font-weight: 600;
1040 }
1041
1042 .wp-chatbot-template-01 .wpb-search-result a p {
1043 margin: 0;
1044 }
1045 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
1046 color: rgb(0 0 0) ;
1047 }
1048 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
1049 color: #3289c8;
1050 }
1051
1052
1053 .wp-chatbot-textanimation span:hover {
1054 color: rgb(50 137 200);
1055 }
1056 @media screen and (max-width: 768px) {
1057 .wp-chatbot-editor-container button {
1058 right: 7px;
1059 }
1060 .wp-chatbot-template-01 #wp-chatbot-desktop-expand {
1061 display: none !important;
1062 }
1063 }
1064
1065 /* Template-00 open/expand/close motion (chatbot.com-like) */
1066 @keyframes wpbotTemplate00RevealMotion {
1067 0% {
1068 opacity: 0;
1069 transform: translate3d(0, 22px, 0) scale(0.96);
1070 }
1071 70% {
1072 opacity: 1;
1073 transform: translate3d(0, -2px, 0) scale(1.002);
1074 }
1075 100% {
1076 opacity: 1;
1077 transform: translate3d(0, 0, 0) scale(1);
1078 }
1079 }
1080
1081 @keyframes wpbotTemplate00HideMotion {
1082 0% {
1083 opacity: 1;
1084 transform: translate3d(0, 0, 0) scale(1);
1085 }
1086 100% {
1087 opacity: 0;
1088 transform: translate3d(0, 18px, 0) scale(0.97);
1089 }
1090 }
1091
1092 .wp-chatbot-template-01 #wp-chatbot-board-container {
1093 transform-origin: right bottom;
1094 will-change: transform, opacity, width, height;
1095 transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.34s cubic-bezier(0.16, 1, 0.3, 1), height 0.34s cubic-bezier(0.16, 1, 0.3, 1);
1096 }
1097
1098 .wp-chatbot-template-01 #wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim,
1099 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expand-anim {
1100 animation: wpbotTemplate00RevealMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
1101 }
1102
1103 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-collapse-anim,
1104 .wp-chatbot-template-01 #wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
1105 animation: wpbotTemplate00HideMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
1106 }
1107
1108 /* Keep reset/expand/close grouped on right side */
1109 .wp-chatbot-template-01 .wp-chatbot-header {
1110 position: relative;
1111 }
1112
1113 .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1114 position: absolute;
1115 right: 8px;
1116 top: 50%;
1117 transform: translateY(-50%);
1118 display: flex;
1119 align-items: center;
1120 gap: 8px;
1121 z-index: 3;
1122 }
1123
1124 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-reload,
1125 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-expand,
1126 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-close {
1127 position: static !important;
1128 top: auto !important;
1129 right: auto !important;
1130 transform: none !important;
1131 }
1132
1133
1134 .wp-chatbot-footer button#wp-chatbot-send-message {
1135 width: 34px !important;
1136 height: 34px !important;
1137 box-shadow: none !important;
1138 opacity: 0.9;
1139 padding: 0;
1140 }
1141
1142 .wp-chatbot-editor-container {
1143 padding: 4px 10px;
1144 }
1145
1146 .wp-chatbot-footer div#wp-chatbot-editor-container {
1147 display: flex;
1148 align-items: center;
1149 }
1150
1151 div#wp-chatbot-desktop-expand {
1152 width: 30px;
1153 height: 30px;
1154 border-radius: 50%;
1155 line-height: 30px;
1156 }
1157
1158 div#wp-chatbot-desktop-expand span.dashicons.dashicons-editor-expand {
1159 top: 5px;
1160 }
1161 div#wp-chatbot-desktop-expand span.dashicons.dashicons-editor-contract {
1162 top: 6px;
1163 }
1164
1165 .wp-chatbot-board-container.active-chat-board .dashicons-fullscreen-alt:before {
1166 content: "\f188";
1167 }
1168
1169
1170 .wp-chatbot-board-container.active-chat-board.wp-chatbot-expanded .dashicons-fullscreen-alt:before {
1171 content: "\f189";
1172 }
1173
1174 .wp-chatbot-send-message-active{
1175 background: #00000066 !important;
1176 color: #ffffff !important;
1177 }
1178 .wp-chatbot-footer button#wp-chatbot-send-message {
1179 border: none;
1180 }
1181 .wp-chatbot-template-01 div#wp-chatbot-board-container {
1182 width: 400px;
1183 }
1184 @media screen and (max-width: 480px) {
1185 .wp-chatbot-template-01 div#wp-chatbot-board-container {
1186 width: 100%;
1187 }
1188 }