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

1,192 lines 27.4 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 .wp-chatbot-content {
696 height: calc(100vh - 220px) !important;
697 }
698 }
699
700
701 div#wp-chatbot-board-container {
702 background: url(../../images/bg-03.jpg) no-repeat;
703 position: relative;
704 background-size: 100% 100%;
705 background-position: center bottom;
706 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
707 backdrop-filter: blur(0px);
708 isolation: isolate;
709 box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
710 border-radius: 8px;
711 }
712
713 .wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded {
714 width: 620px;
715 max-width: calc(100vw - 40px);
716 }
717 div#wp-chatbot-board-container:before {
718 isolation: isolate;
719 content: '';
720 position: absolute;
721 height: 100%;
722 width: 100%;
723 backdrop-filter: blur(0px);
724 border-radius: 8px !important;
725 left: 0;
726 right: 0;
727 width: 100%;
728 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
729 backdrop-filter: blur(0px);
730 isolation: isolate;
731 }
732 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
733 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
734 background: rgb(255 255 255 / 30%);
735 backdrop-filter: blur(0px);
736 isolation: isolate;
737 }
738 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph{
739
740 background: rgb(255 255 255 / 30%);
741 backdrop-filter: blur(0px);
742 isolation: isolate;
743 }
744 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph{
745 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
746 background: rgb(255 255 255 / 30%);
747 backdrop-filter: blur(0px);
748 isolation: isolate;
749 }
750
751 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 {
752 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
753 background: rgb(255 255 255 / 25%);
754 backdrop-filter: blur(0px);
755 isolation: isolate;
756 color: #fff;
757 }
758
759 div#wp-chatbot-editor-container {
760 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
761 background: #5755bd61;
762 backdrop-filter: blur(0px);
763 isolation: isolate;
764 margin: 0 12px 0 12px;
765 border-radius: 6PX;
766 }
767 div#wp-chatbot-desktop-reload {
768 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
769 background: rgb(255 255 255 / 25%);
770 backdrop-filter: blur(0px);
771 isolation: isolate;
772 }
773 div#wp-chatbot-desktop-close {
774 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
775 background: rgb(255 255 255 / 25%);
776 backdrop-filter: blur(0px);
777 isolation: isolate;
778 }
779 div#wp-chatbot-desktop-reload {
780 right: 38px;
781 }
782 button#wp-chatbot-send-message {
783 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
784 background: #ffffff91;
785 backdrop-filter: blur(0px);
786 isolation: isolate;
787 color: #3f3f3f;
788 }
789
790 .wp-chatbot-textanimation span:hover {
791 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
792 background: rgb(255 255 255 / 25%);
793 backdrop-filter: blur(0px);
794 isolation: isolate;
795 backdrop-filter: blur(2px);
796 }
797 .wp-chatbot-editor-container input {
798 width:100%;
799 }
800
801 .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 {
802
803 color: #222 !important;
804
805 }
806 .wp-chatbot-header-welcome-text img {
807 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
808 background: rgb(255 255 255 / 25%);
809 backdrop-filter: blur(0px);
810 isolation: isolate;
811 }
812 .wp-chatbot-header-welcome-text img {
813 max-width: 38px !important;
814 }
815
816 div#wp-chatbot-editor-container input{
817 color: #222;
818 }
819 div#wp-chatbot-editor-container input::placeholder {
820 color: #fff;
821 }
822 div#wp-chatbot-editor-container input::-webkit-input-placeholder {
823 color: #fff;
824 }
825 div#wp-chatbot-editor-container input::-moz-placeholder {
826 color: #fff;
827 }
828 div#wp-chatbot-editor-container input:-ms-input-placeholder {
829 color: #fff;
830 }
831
832 /* Keep editor autofill transparent */
833 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill,
834 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:hover,
835 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:focus,
836 .wp-chatbot-template-01 #wp-chatbot-editor-container input:-webkit-autofill:active,
837 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill,
838 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:hover,
839 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:focus,
840 .wp-chatbot-template-01 #wp-chatbot-editor-container textarea:-webkit-autofill:active {
841 -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
842 box-shadow: 0 0 0 1000px transparent inset !important;
843 -webkit-text-fill-color: inherit !important;
844 background-color: transparent !important;
845 transition: background-color 9999s ease-out 0s;
846 }
847
848
849 .wp-chatbot-tab-nav ul li a:hover {
850 transform: scale(0.95);
851 }
852 .wp-chatbot-tab-nav ul li a{
853 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
854 }
855
856 .wp-chatbot-textanimation span:hover {
857 transform: scale(0.95);
858 }
859 .wp-chatbot-textanimation span{
860 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
861 }
862
863 button#wp-chatbot-send-message:hover {
864 transform: scale(0.95);
865 }
866 button#wp-chatbot-send-message{
867 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
868 }
869
870 .wp-chatbot-tab-nav ul li:before {
871 top: 0;
872 }
873
874 span.qcld-chatbot-wildcard:hover {
875 transform: scale(0.95);
876 }
877 span.qcld-chatbot-wildcard{
878 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
879 }
880
881 .wp-chatbot-tab-nav ul {
882 margin: 5px 0 !important;
883 padding: 0 !important;
884 list-style: none;
885 text-align: center;
886 display: flex;
887 gap: 30px;
888 vertical-align: bottom;
889 align-items: center;
890 justify-content: center;
891 width: 100%;
892 }
893
894 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
895 color: rgb(33 33 33);
896 }
897 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
898 color: rgb(33 33 33) ;
899 }
900
901
902 div#wp-chatbot-desktop-reload {
903 color: #3f3f3f;
904 }
905 #wp-chatbot-desktop-close {
906 color: #3f3f3f;
907
908 }
909 .wp-chatbot-ball {
910 background: #fbf7ff;
911 }
912 .wp-chatbot-ball {
913 background: #ffffff;
914 }
915 .wp-chatbot-ball:hover, .wp-chatbot-ball:focus {
916 background: #ffffff;
917 }
918 .wp-chatbot-header {
919 border-bottom: 1px solid #fff;
920 box-shadow: inset 1px 1px 0 rgb(255 255 255), inset 0 0 5px rgb(255 255 255);
921 }
922
923
924 .wpbot_chatopen_iconanimation .wp-chatbot-ball {
925 border: 1px solid #dadada;
926 background-color: #dadada;
927 }
928 div#wp-chatbot-desktop-reload {
929 top: -10px;
930 }
931 #wp-chatbot-desktop-close {
932 top: -10px;
933 right: 8px;
934 }
935 div#wp-chatbot-desktop-reload {
936 right: 45px;
937 }
938 div#wp-chatbot-desktop-expand {
939 top: -10px;
940 right: 45px;
941 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
942 background: rgb(255 255 255 / 25%);
943 backdrop-filter: blur(0px);
944 isolation: isolate;
945 color: #3f3f3f;
946 cursor: pointer;
947 }
948
949 div#wp-chatbot-desktop-expand span {
950 position: relative;
951 }
952 div#wp-chatbot-desktop-reload {
953 right: 82px;
954 }
955 #wp-chatbot-desktop-close {
956 right: 8px;
957 }
958
959
960 .notice.is-dismissible.qcbot-feedback {
961 display: flex;
962 column-gap: 15px;
963 row-gap: 10px;
964 background: #fff;
965 padding: 15px 15px;
966 margin: 20px 20px 20px 0;
967 border-radius: 16px;
968 align-items: center;
969 justify-content: space-between;
970 border: none;
971 }
972
973
974
975
976 .wp-chatbot-template-01 .wpbot_card_image span {
977 display: none !important;
978 }
979 .wp-chatbot-template-01 .wpbot_card_image a {
980 display: flex !important;
981 gap: 6px !important;
982 }
983 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas a{
984 display: flex !important;
985 gap: 6px !important;
986 }
987 .wp-chatbot-template-01 .wpbot_card_image img{
988 max-width: 25px !important;
989 height: 25px !important;
990 border-radius: 50%;
991 }
992 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas span {
993 display: flex !important;
994 gap: 10px !important;
995 margin: 0 10px 0 0 !important;
996 }
997 .wp-chatbot-template-01 .wpbot_card_image.wpbot_card_image_saas .wpbot_card_caption.wpbot_card_caption_saas p {
998 display: flex;
999 }
1000 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper {
1001 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1002 background: rgb(255 255 255 / 30%);
1003 backdrop-filter: blur(0px);
1004 isolation: isolate;
1005 margin: 5px 0;
1006 padding: 5px;
1007 }
1008 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper p.wpbot_card_caption_title{
1009 margin: 0;
1010 padding: 0;
1011 color: rgb(29 115 180) !important;
1012 font-weight: 600;
1013 }
1014 .wp-chatbot-template-01 .wpbot_card_caption.wpbot_card_caption_saas p.wpbot_card_description {
1015 padding: 0 0 0 28px;
1016 }
1017 .wp-chatbot-template-01 .wpbot_card_caption p.wpbot_card_description {
1018 margin: 0;
1019 padding: 0;
1020 }
1021 .wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption h2 {
1022 margin: 0;
1023 padding: 0;
1024 color: rgb(29 115 180) !important;
1025 font-weight: 600;
1026 font-size: 14px;
1027 }
1028
1029 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a{
1030 text-decoration: none !important;
1031 }
1032
1033 .wp-chatbot-template-01 .wpb-search-result .wpbot_card_wraper a p:first-child {
1034 margin: 0;
1035 padding: 0;
1036 color: rgb(29 115 180) !important;
1037 font-weight: 600;
1038 }
1039
1040 .wp-chatbot-template-01 .wpb-search-result a p {
1041 margin: 0;
1042 }
1043 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
1044 color: rgb(0 0 0) ;
1045 background: transparent !important;
1046 backdrop-filter: none !important;
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 }
1189
1190 .wp-chatbot-rtl .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1191 right: 95px;
1192 }