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

1,279 lines 29.8 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
574 div#wp-chatbot-desktop-reload {
575 top: -14px;
576 }
577 #wp-chatbot-desktop-close {
578 top: -14px;
579 }
580 div#wp-chatbot-ball-container {
581 box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px;
582 border-radius: 8px;
583 }
584
585
586 .wp-chatbot-tab-nav ul li a {
587 width: 32px;
588 height: 32px;
589 background: url(../../images/tab-btn-icon-new.png) no-repeat;
590
591 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
592 background-color: rgb(255 255 255 / 25%);
593 backdrop-filter: blur(0px);
594 isolation: isolate;
595
596
597 }
598 .wp-chatbot-tab-nav ul li a[data-option="help"] {
599 background-position: -125px -44px;
600 }
601 .wp-chatbot-tab-nav ul li a[data-option="support"] {
602 background-position: -166px -44px;
603 }
604
605 .wp-chatbot-board-container:after {
606 border-top: 30px solid #ffffff00;
607 }
608
609 .wp-chatbot-header {
610 padding: 6px 15px;
611 }
612 .wp-chatbot-ball {
613 box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
614 }
615
616 .wp-chatbot-tab-nav ul {
617 margin: 0 !important;
618 padding: 0 !important;
619 list-style: none;
620 text-align: center;
621 display: flex;
622 justify-content: space-between;
623 vertical-align: bottom;
624 }
625 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
626 border: 0 solid #1f8ceb;
627 }
628 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
629 border: 0px solid #1f8ceb;
630 }
631 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
632 background-position: -82px -41px;
633 }
634
635 .wp-chatbot-tab-nav {
636 padding: 4px 5px;
637 }
638
639 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
640 border-radius: 10px;
641 }
642 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
643 border-radius: 10px;
644 }
645
646 .wp-chatbot-board-container {
647 overflow: visible;
648 }
649
650
651
652 .wp-chatbot-header-welcome-text img {
653 border-radius: 50%;
654 padding: 3px;
655 }
656
657 .wp-chatbot-footer {
658 padding: 0;
659 }
660 .wp-chatbot-header-welcome-text {
661 align-items: center;
662 display: flex;
663 justify-content: center;
664 }
665 span.qcld-chatbot-wildcard {
666 width: 100%;
667 max-width: 255px;
668 }
669
670 .wp-chatbot-textanimation span {
671 display: inline-block;
672 width: auto;
673 margin: 3px 2px;
674 }
675
676 .wp-chatbot-textanimation span:hover {
677 color: rgb(255, 255, 255);
678 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
679 }
680
681
682
683 .wpb-search-result a {
684 color: #222 !important;
685 }
686 .wpbot_card_caption p {
687 color: #222 !important;
688 }
689
690
691 @media screen and (max-width: 768px) {
692 .wp-chatbot-editor-container button {
693 right: 0;
694 }
695
696 }
697
698
699 div#wp-chatbot-board-container {
700 background: url(../../images/bg-03.jpg) no-repeat;
701 position: relative;
702 background-size: 100% 100%;
703 background-position: center bottom;
704 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
705 backdrop-filter: blur(0px);
706 isolation: isolate;
707 box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
708 border-radius: 8px;
709 }
710
711 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded {
712 width: 620px;
713 max-width: calc(100vw - 40px);
714 }
715 div#wp-chatbot-board-container:before {
716 isolation: isolate;
717 content: '';
718 position: absolute;
719 height: 100%;
720 width: 100%;
721 backdrop-filter: blur(0px);
722 border-radius: 8px !important;
723 left: 0;
724 right: 0;
725 width: 100%;
726 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
727 backdrop-filter: blur(0px);
728 isolation: isolate;
729 }
730 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
731 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
732 background: rgb(255 255 255 / 30%);
733 backdrop-filter: blur(0px);
734 isolation: isolate;
735 }
736 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph{
737
738 background: rgb(255 255 255 / 30%);
739 backdrop-filter: blur(0px);
740 isolation: isolate;
741 }
742 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph{
743 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
744 background: rgb(255 255 255 / 30%);
745 backdrop-filter: blur(0px);
746 isolation: isolate;
747 }
748
749 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 {
750 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
751 background: rgb(255 255 255 / 25%);
752 backdrop-filter: blur(0px);
753 isolation: isolate;
754 color: #fff;
755 }
756
757 div#wp-chatbot-editor-container {
758 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
759 background: #5755bd61;
760 backdrop-filter: blur(0px);
761 isolation: isolate;
762 margin: 0 12px 0 12px;
763 border-radius: 6PX;
764 }
765 div#wp-chatbot-desktop-reload {
766 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
767 background: rgb(255 255 255 / 25%);
768 backdrop-filter: blur(0px);
769 isolation: isolate;
770 }
771 div#wp-chatbot-desktop-close {
772 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
773 background: rgb(255 255 255 / 25%);
774 backdrop-filter: blur(0px);
775 isolation: isolate;
776 }
777 div#wp-chatbot-desktop-reload {
778 right: 38px;
779 }
780 button#wp-chatbot-send-message {
781 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
782 background: #ffffff91;
783 backdrop-filter: blur(0px);
784 isolation: isolate;
785 color: #3f3f3f;
786 }
787
788 .wp-chatbot-textanimation span:hover {
789 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
790 background: rgb(255 255 255 / 25%);
791 backdrop-filter: blur(0px);
792 isolation: isolate;
793 backdrop-filter: blur(2px);
794 }
795 .wp-chatbot-editor-container input {
796 width:100%;
797 }
798
799 .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 {
800
801 color: #222 !important;
802
803 }
804 .wp-chatbot-header-welcome-text img {
805 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
806 background: rgb(255 255 255 / 25%);
807 backdrop-filter: blur(0px);
808 isolation: isolate;
809 }
810 .wp-chatbot-header-welcome-text img {
811 max-width: 38px !important;
812 }
813
814 div#wp-chatbot-editor-container input{
815 color: #222;
816 }
817 div#wp-chatbot-editor-container input::placeholder {
818 color: #fff;
819 }
820 div#wp-chatbot-editor-container input::-webkit-input-placeholder {
821 color: #fff;
822 }
823 div#wp-chatbot-editor-container input::-moz-placeholder {
824 color: #fff;
825 }
826 div#wp-chatbot-editor-container input:-ms-input-placeholder {
827 color: #fff;
828 }
829
830 /* Keep editor autofill transparent */
831 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill,
832 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:hover,
833 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:focus,
834 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:active,
835 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill,
836 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:hover,
837 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:focus,
838 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:active {
839 -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
840 box-shadow: 0 0 0 1000px transparent inset !important;
841 -webkit-text-fill-color: inherit !important;
842 background-color: transparent !important;
843 transition: background-color 9999s ease-out 0s;
844 }
845
846
847 .wp-chatbot-tab-nav ul li a:hover {
848 transform: scale(0.95);
849 }
850 .wp-chatbot-tab-nav ul li a{
851 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
852 }
853
854 .wp-chatbot-textanimation span:hover {
855 transform: scale(0.95);
856 }
857 .wp-chatbot-textanimation span{
858 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
859 }
860
861 button#wp-chatbot-send-message:hover {
862 transform: scale(0.95);
863 }
864 button#wp-chatbot-send-message{
865 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
866 }
867
868 .wp-chatbot-tab-nav ul li:before {
869 top: 0;
870 }
871
872 span.qcld-chatbot-wildcard:hover {
873 transform: scale(0.95);
874 }
875 span.qcld-chatbot-wildcard{
876 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
877 }
878
879 .wp-chatbot-tab-nav ul {
880 margin: 5px 0 !important;
881 padding: 0 !important;
882 list-style: none;
883 text-align: center;
884 display: flex;
885 gap: 30px;
886 vertical-align: bottom;
887 align-items: center;
888 justify-content: center;
889 width: 100%;
890 }
891
892 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
893 color: rgb(33 33 33);
894 }
895 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
896 color: rgb(33 33 33) ;
897 }
898
899
900 div#wp-chatbot-desktop-reload {
901 color: #3f3f3f;
902 }
903 #wp-chatbot-desktop-close {
904 color: #3f3f3f;
905
906 }
907 .wp-chatbot-ball {
908 background: #fbf7ff;
909 }
910 .wp-chatbot-ball {
911 background: #ffffff;
912 }
913 .wp-chatbot-ball:hover, .wp-chatbot-ball:focus {
914 background: #ffffff;
915 }
916 .wp-chatbot-header {
917 border-bottom: 1px solid #fff;
918 box-shadow: inset 1px 1px 0 rgb(255 255 255), inset 0 0 5px rgb(255 255 255);
919 }
920
921
922 .wpbot_chatopen_iconanimation .wp-chatbot-ball {
923 border: 1px solid #dadada;
924 background-color: #dadada;
925 }
926 div#wp-chatbot-desktop-reload {
927 top: -10px;
928 }
929 #wp-chatbot-desktop-close {
930 top: -10px;
931 right: 8px;
932 }
933 div#wp-chatbot-desktop-reload {
934 right: 45px;
935 }
936 div#wp-chatbot-desktop-expand {
937 top: -10px;
938 right: 45px;
939 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
940 background: rgb(255 255 255 / 25%);
941 backdrop-filter: blur(0px);
942 isolation: isolate;
943 color: #3f3f3f;
944 cursor: pointer;
945 }
946
947 div#wp-chatbot-desktop-expand span {
948 position: relative;
949 }
950 div#wp-chatbot-desktop-reload {
951 right: 82px;
952 }
953 #wp-chatbot-desktop-close {
954 right: 8px;
955 }
956
957
958 .notice.is-dismissible.qcbot-feedback {
959 display: flex;
960 column-gap: 15px;
961 row-gap: 10px;
962 background: #fff;
963 padding: 15px 15px;
964 margin: 20px 20px 20px 0;
965 border-radius: 16px;
966 align-items: center;
967 justify-content: space-between;
968 border: none;
969 }
970
971
972
973
974 .wp-chatbot-template-01 .wpbot_card_image span {
975 display: none !important;
976 }
977 .wp-chatbot-template-01 .wpbot_card_image a {
978 display: flex !important;
979 gap: 6px !important;
980 }
981 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas a{
982 display: flex !important;
983 gap: 6px !important;
984 }
985 .wp-chatbot-template-01 .wpbot_card_image img{
986 max-width: 25px !important;
987 height: 25px !important;
988 border-radius: 50%;
989 }
990 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas span {
991 display: flex !important;
992 gap: 10px !important;
993 margin: 0 10px 0 0 !important;
994 }
995 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas .wpbot_card_caption.wpbot_card_caption_saas p {
996 display: flex;
997 }
998 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper {
999 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1000 background: rgb(255 255 255 / 30%);
1001 backdrop-filter: blur(0px);
1002 isolation: isolate;
1003 margin: 5px 0;
1004 padding: 5px;
1005 }
1006 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper p.wpbot_card_caption_title{
1007 margin: 0;
1008 padding: 0;
1009 color: rgb(29 115 180) !important;
1010 font-weight: 600;
1011 }
1012 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas p.wpbot_card_description {
1013 padding: 0 0 0 28px;
1014 }
1015 .wp-chatbot-template-01 .wpbot_card_caption p.wpbot_card_description {
1016 margin: 0;
1017 padding: 0;
1018 }
1019 .wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption h2 {
1020 margin: 0;
1021 padding: 0;
1022 color: rgb(29 115 180) !important;
1023 font-weight: 600;
1024 font-size: 14px;
1025 }
1026
1027 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a{
1028 text-decoration: none !important;
1029 }
1030
1031 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a p:first-child {
1032 margin: 0;
1033 padding: 0;
1034 color: rgb(29 115 180) !important;
1035 font-weight: 600;
1036 }
1037
1038 .wp-chatbot-template-01 .wpb-search-result a p {
1039 margin: 0;
1040 }
1041 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
1042 color: rgb(0 0 0) ;
1043 background: transparent !important;
1044 backdrop-filter: none !important;
1045 }
1046 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 {
1047 color: #3289c8;
1048 }
1049
1050
1051 .wp-chatbot-textanimation span:hover {
1052 color: rgb(50 137 200);
1053 }
1054 @media screen and (max-width: 768px) {
1055 .wp-chatbot-editor-container button {
1056 right: 7px;
1057 }
1058 .wp-chatbot-template-01 #wp-chatbot-desktop-expand {
1059 display: none !important;
1060 }
1061 }
1062
1063 /* Template-00 open/expand/close motion (chatbot.com-like) */
1064 @keyframes wpbotTemplate00RevealMotion {
1065 0% {
1066 opacity: 0;
1067 transform: translate3d(0, 22px, 0) scale(0.96);
1068 }
1069 70% {
1070 opacity: 1;
1071 transform: translate3d(0, -2px, 0) scale(1.002);
1072 }
1073 100% {
1074 opacity: 1;
1075 transform: translate3d(0, 0, 0) scale(1);
1076 }
1077 }
1078
1079 @keyframes wpbotTemplate00HideMotion {
1080 0% {
1081 opacity: 1;
1082 transform: translate3d(0, 0, 0) scale(1);
1083 }
1084 100% {
1085 opacity: 0;
1086 transform: translate3d(0, 18px, 0) scale(0.97);
1087 }
1088 }
1089
1090 .wp-chatbot-template-01 #wp-chatbot-board-container {
1091 transform-origin: right bottom;
1092 will-change: transform, opacity, width, height;
1093 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);
1094 }
1095
1096 .wp-chatbot-template-01 #wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim,
1097 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expand-anim {
1098 animation: wpbotTemplate00RevealMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
1099 }
1100
1101 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-collapse-anim,
1102 .wp-chatbot-template-01 #wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
1103 animation: wpbotTemplate00HideMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
1104 }
1105
1106 /* Keep reset/expand/close grouped on right side */
1107 .wp-chatbot-template-01 .wp-chatbot-header {
1108 position: relative;
1109 }
1110
1111 .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1112 position: absolute;
1113 right: 8px;
1114 top: 50%;
1115 transform: translateY(-50%);
1116 display: flex;
1117 align-items: center;
1118 gap: 8px;
1119 z-index: 3;
1120 }
1121
1122 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-reload,
1123 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-expand,
1124 .wp-chatbot-template-01 .wp-chatbot-header-icon-right #wp-chatbot-desktop-close {
1125 position: static !important;
1126 top: auto !important;
1127 right: auto !important;
1128 transform: none !important;
1129 }
1130
1131
1132 .wp-chatbot-footer button#wp-chatbot-send-message {
1133 width: 34px !important;
1134 height: 34px !important;
1135 box-shadow: none !important;
1136 opacity: 0.9;
1137 padding: 0;
1138 }
1139
1140 .wp-chatbot-editor-container {
1141 padding: 4px 10px;
1142 }
1143
1144 .wp-chatbot-footer div#wp-chatbot-editor-container {
1145 display: flex;
1146 align-items: center;
1147 }
1148
1149 div#wp-chatbot-desktop-expand {
1150 width: 30px;
1151 height: 30px;
1152 border-radius: 50%;
1153 line-height: 30px;
1154 }
1155
1156 div#wp-chatbot-desktop-expand span.dashicons.dashicons-editor-expand {
1157 top: 5px;
1158 }
1159 div#wp-chatbot-desktop-expand span.dashicons.dashicons-editor-contract {
1160 top: 6px;
1161 }
1162
1163 .wp-chatbot-board-container.active-chat-board .dashicons-fullscreen-alt:before {
1164 content: "\f188";
1165 }
1166
1167
1168 .wp-chatbot-board-container.active-chat-board.wp-chatbot-expanded .dashicons-fullscreen-alt:before {
1169 content: "\f189";
1170 }
1171
1172 .wp-chatbot-send-message-active{
1173 background: #00000066 !important;
1174 color: #ffffff !important;
1175 }
1176 .wp-chatbot-footer button#wp-chatbot-send-message {
1177 border: none;
1178 }
1179 .wp-chatbot-template-01 div#wp-chatbot-board-container {
1180 width: 400px;
1181 }
1182 @media screen and (max-width: 480px) {
1183 .wp-chatbot-template-01 div#wp-chatbot-board-container {
1184 width: 100%;
1185 }
1186 }
1187
1188 .wp-chatbot-rtl .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1189 right: 95px;
1190 }
1191
1192
1193
1194
1195
1196
1197 .wp-chatbot-avatar-hidden .wp-chatbot-avatar {
1198 display: none;
1199 }
1200 .wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1201 padding-left: 0;
1202 }
1203
1204 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1205 padding-left: 0px;
1206 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1207 background: rgb(255 255 255 / 30%);
1208 backdrop-filter: blur(0px);
1209 isolation: isolate;
1210 border-radius: 10px;
1211 padding: 8px 15px;
1212 min-height: auto;
1213 }
1214
1215 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1216 box-shadow: none;
1217 background: rgba(255, 255, 255, 0);
1218 backdrop-filter: none;
1219 isolation: isolate;
1220 border-radius: 0px;
1221 padding: 0;
1222 }
1223
1224 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar{
1225 position: relative;
1226 }
1227
1228 .wp-chatbot-avatar-inside .wp-chatbot-avatar img, .wp-chatbot-avatar-inside .wp-chatbot-widget-avatar img {
1229 width: 32px !important;
1230 height: 32px !important;
1231 object-fit: cover;
1232 }
1233
1234
1235 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1236 padding-right: 0;
1237 }
1238
1239
1240 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1241 padding-left: 0px;
1242 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1243 background: rgb(255 255 255 / 30%);
1244 backdrop-filter: blur(0px);
1245 isolation: isolate;
1246 border-radius: 10px;
1247 padding: 8px 15px;
1248 min-height: auto;
1249 display: flex;
1250 flex-direction: column;
1251 align-content: flex-end;
1252 flex-wrap: wrap;
1253 }
1254
1255 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
1256 box-shadow: none;
1257 background: rgba(255, 255, 255, 0);
1258 backdrop-filter: none;
1259 isolation: isolate;
1260 border-radius: 0px;
1261 padding: 0;
1262 }
1263
1264 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
1265 width: 32px;
1266 height: 32px;
1267 text-align: right;
1268 margin: 0 0 6px auto;
1269 }
1270 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar {
1271 position: relative;
1272 border-radius: 0;
1273 }
1274 .wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar img{
1275 border-radius: 50%;
1276 }
1277 .wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1278 padding-right: 0;
1279 }