PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services / 8.3.8
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services v8.3.8
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 8.5.0 8.4.9 All 531 releases
chatbot / css / common-style.css

common-style.css in WPBot – AI ChatBot for Live Support, Lead Generation, AI Services 8.3.8, at css/common-style.css

1,969 lines 49.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 1. Global Common and Reset CSS
3 2. Ball Selector
4 3. Message container
5 4. Tab
6 5. Message Editor
7 6. Message Item
8 - Link Item
9 - Message module Featured products
10 - Order List
11 - Cart List
12 7. Product Details
13 - Popup Product Details for ShortCode
14 8. Short Code Overnight
15 9. App ShortCode
16 10. Notification
17 11. Responsive
18 */
19
20 /***********************************************************************
21 1. Global Common and Reset CSS
22 ************************************************************************/
23 @font-face {
24 font-family: 'quicksandregular';
25 src: url('../fonts/quicksand-regular-webfont.woff2') format('woff2'), url('../fonts/quicksand-regular-webfont.woff') format('woff');
26 font-weight: normal;
27 font-style: normal;
28 }
29
30 #wp-chatbot-shortcode-template-container img, #wp-chatbot-chat-container img {
31 max-width: 100%;
32 height: auto;
33 box-shadow: none !important;
34 }
35
36 .clear {
37 width: 100%;
38 clear: both;
39 float: none;
40 }
41
42 .wp-chatbot-chat-container, .wp-chatbot-shortcode-template-container {
43 font-size: 14px;
44 line-height: 1.8;
45 }
46
47 .wp-chatbot-chat-container a, .wp-chatbot-shortcode-template-container a {
48 text-decoration: none;
49 border: none;
50 outline: none;
51 color: inherit;
52 background: none;
53 box-shadow: none;
54 }
55
56 .wp-chatbot-chat-container a:active, .wp-chatbot-chat-container a:hover, .wp-chatbot-shortcode-template-container a:active, .wp-chatbot-shortcode-template-container a:hover {
57 outline: 0;
58 }
59
60 .wp-chatbot-chat-container p, .wp-chatbot-shortcode-template-container p {
61 background: none;
62 font-weight: normal;
63 line-height: 1.8;
64 letter-spacing: 0;
65 margin: 10px 0;
66 padding: 0;
67 }
68
69 .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 {
70 color: inherit;
71 background: none;
72 font-weight: normal;
73 line-height: 1.1;
74 letter-spacing: 0;
75 padding: 0;
76 }
77
78 .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3 {
79 margin-top: 20px;
80 margin-bottom: 10px;
81 }
82
83 .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 {
84 margin-top: 10px;
85 margin-bottom: 10px;
86 }
87
88 .wp-chatbot-chat-container h1, .wp-chatbot-shortcode-template-container h1 {
89 font-size: 42px;
90 }
91
92 .wp-chatbot-chat-container h2, .wp-chatbot-shortcode-template-container h2 {
93 font-size: 28px;
94 }
95
96 .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h3 {
97 font-size: 24px;
98 }
99
100 .wp-chatbot-chat-container h4, .wp-chatbot-shortcode-template-container h4 {
101 font-size: 18px;
102 }
103
104 .wp-chatbot-chat-container h5, .wp-chatbot-shortcode-template-container h5 {
105 font-size: 14px;
106 }
107
108 .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h6 {
109 font-size: 12px;
110 }
111
112 .wp-chatbot-chat-container button, .wp-chatbot-chat-container input, .wp-chatbot-chat-container optgroup, .wp-chatbot-chat-container select, .wp-chatbot-chat-container textarea, .wp-chatbot-shortcode-template-container button, .wp-chatbot-shortcode-template-container input, .wp-chatbot-shortcode-template-container optgroup, .wp-chatbot-shortcode-template-container select, .wp-chatbot-shortcode-template-container textarea {
113 color: inherit;
114 margin: 0;
115 box-shadow: none;
116 border: none;
117 background: inherit;
118 }
119
120 .wp-chatbot-chat-container button:focus, .wp-chatbot-chat-container input:focus, .wp-chatbot-chat-container optgroup:focus, .wp-chatbot-chat-container select:focus, .wp-chatbot-chat-container textarea:focus, .wp-chatbot-shortcode-template-container button:focus, .wp-chatbot-shortcode-template-container input:focus, .wp-chatbot-shortcode-template-container optgroup:focus, .wp-chatbot-shortcode-template-container select:focus, .wp-chatbot-shortcode-template-container textarea:focus {
121 outline: none;
122 }
123
124 /**************************************************************************
125 2. Ball Selector
126 **************************************************************************/
127
128 #wp-chatbot-chat-container {
129 position: fixed;
130 z-index: 999998;
131 }
132
133 .wp-chatbot-ball {
134 float: right;
135 position: relative;
136 cursor: pointer;
137 background: #ffffff;
138 box-shadow: 0 0 15px #ccc;
139 width: 60px;
140 height: 60px;
141 border-radius: 50%;
142 margin-top: 10px;
143 box-shadow: #767580 0px 4px 20px;
144 }
145
146 #wp-chatbot-ball .wp-chatbot-ball img {
147 width: 56px !important;
148 height: 56px !important;
149 display: block;
150 border-radius: 50%;
151 margin: 2px ;
152 }
153
154 .wp-chatbot-ball-animator {
155 position: relative;
156 border-radius: 50%;
157 }
158
159 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
160 opacity: 1;
161 width: 100%;
162 height: 100%;
163 position: absolute;
164 animation: spin 2s linear infinite;
165 border: 3px solid transparent;
166 border-top-color: #9370DB;
167 }
168
169 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
170 content: "";
171 position: absolute;
172 top: -9px;
173 left: -9px;
174 right: -9px;
175 bottom: -9px;
176 border-radius: 50%;
177 border: 3px solid transparent;
178 border-top-color: #BA55D3;
179 animation: spin 3s linear infinite;
180 }
181
182 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
183 content: "";
184 position: absolute;
185 top: -15px;
186 left: -15px;
187 right: -15px;
188 bottom: -15px;
189 border-radius: 50%;
190 border: 3px solid transparent;
191 border-top-color: #FF00FF;
192 animation: spin 1.5s linear infinite;
193 }
194 .wp-chatbot-footer div#wp-chatbot-editor-container {
195 display: flex;
196 }
197 @keyframes spin {
198 0% {
199 -webkit-transform: rotate(0deg);
200 -ms-transform: rotate(0deg);
201 transform: rotate(0deg);
202 }
203 100% {
204 -webkit-transform: rotate(360deg);
205 -ms-transform: rotate(360deg);
206 transform: rotate(360deg);
207 }
208 }
209
210 @keyframes spinHide {
211 0% {
212 opacity: 0;
213 }
214 100% {
215 opacity: 0;
216 }
217 }
218
219 /*******************************************************************************
220 3. Message container
221 *********************************************************************************/
222 .wp-chatbot-board-container {
223 display: none;
224 font-family: "quicksandregular", "Helvetica Neue", Helvetica, Aria;
225 height: auto;
226 width: 370px;
227 position: relative;
228 box-sizing: border-box; /*margin-bottom: 10px;*/
229 }
230
231 .wp-chatbot-board-container.active-chat-board {
232 display: inline-block;
233 vertical-align: top;
234 }
235
236 .wp-chatbot-header {
237 border-radius: 5px 5px 0 0;
238 margin: 0;
239 padding: 15px 15px;
240 box-sizing: border-box;
241 text-align: center;
242 position: relative; /*height: 63px;*/
243 }
244
245 .wp-chatbot-header h3 {
246 margin: 0 !important;
247 padding: 0 !important;
248 }
249
250 .wp-chatbot-content {
251 height: calc(100vh - 277px);
252 position: relative;
253 padding: 15px;
254 box-sizing: border-box;
255 max-height: 564px;
256 }
257
258 .wp-chatbot-product-reload.wp-chatbot-product-loading {
259 display: block;
260 position: absolute;
261 background: rgba(255, 255, 255, 0.50);
262 padding: 3px;
263 border-radius: 5px;
264 top: 0;
265 bottom: 0;
266 left: 0;
267 right: 0;
268 z-index: 999;
269 }
270
271 .wp-chatbot-product-loading img {
272 display: table;
273 left: 50%;
274 top: 50%;
275 position: absolute;
276 margin: -10px -45px;
277 }
278
279 ul.wp-chatbot-messages-container {
280 padding: 0 !important;
281 margin: 0 !important;
282 overflow: hidden;
283 }
284
285 @keyframes messageAnim {
286 0% {
287 transform: translateY(80px) scaleX(0.5);
288 opacity: 0;
289 }
290 100% {
291 transform: translateY(0) scaleX(1);
292 opacity: 1;
293 }
294 }
295
296 ul.wp-chatbot-messages-container > li {
297 position: relative;
298 box-sizing: border-box;
299 word-wrap: break-word;
300 list-style: none;
301 display: block;
302 clear: both;
303 line-height: 150%;
304 min-height: 50px;
305 margin: 0 0 10px 0;
306 animation: messageAnim 0.5s;
307 opacity: 1;
308 }
309
310 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph h3 {
311 padding: 0 0 5px !important;
312 margin: 0 !important;
313 font-weight: bold;
314 font-size: 16px;
315 }
316
317 ul.wp-chatbot-messages-container > li.wp-chatbot-msg::before {
318 left: 19px;
319 }
320
321 ul.wp-chatbot-messages-container > li.wp-chat-user-msg::before {
322 right: 19px;
323 }
324
325 ul.wp-chatbot-messages-container > li:before {
326 content: "";
327 display: block;
328 width: 5px;
329 height: 5px;
330 background: red;
331 top: 19px;
332 z-index: 999;
333 position: absolute;
334 border-radius: 50%;
335 box-shadow: -38px 0 #f35b5c, -28px 8px #88bfc9, -14px 35px #f35b5c, -4px 28px #88bfc9, 30px 32px #f35b5c, 28px 22px #88bfc9, 43px 0px #f35b5c, 35px -5px #88bfc9, 20px -30px #f35b5c, 10px -22px #88bfc9, -18px -30px #f35b5c, -14px -22px #88bfc9;
336 animation: 0.9s bang ease-out backwards, 0.9s linear dothide;
337 opacity: 0;
338 /*animation-delay: 0s, 0.2s;*/
339 animation-duration: 0.5s, 0.5s;
340 }
341
342 @keyframes dothide {
343 0% {
344 opacity: 1;
345 }
346 90% {
347 opacity: 1;
348 }
349 100% {
350 opacity: 1;
351 }
352 }
353
354 @keyframes bang {
355 from {
356 box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
357 }
358 }
359
360 ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-avatar, ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-agent {
361 display: none;
362 overflow: hidden;
363 }
364
365 ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after, ul.wp-chatbot-messages-container > li .wp-chatbot-products:after {
366 clear: both;
367 display: block;
368 content: "";
369 height: 1px;
370 }
371
372 ul.wp-chatbot-messages-container > li .wp-chatbot-agent, .wp-chatbot-agent-profile .wp-chatbot-widget-agent {
373 display: none;
374 }
375
376 #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
377 width: 40px !important;
378 height: 40px !important;
379 object-fit: cover;
380 }
381
382 /*********************************************************************************
383 4. Tab
384 *********************************************************************************/
385 .wp-chatbot-footer {
386 border-radius: 5px;
387 }
388
389 .wp-chatbot-tab-nav {
390 padding: 15px 5px; /*background-color: #9ec3c0;*/
391 }
392
393 .wp-chatbot-tab-nav ul {
394 margin: 0 !important;
395 padding: 0 !important;
396 list-style: none;
397 text-align: center;
398 display: flex;
399 justify-content: space-around;
400 vertical-align: bottom;
401 }
402
403 .wp-chatbot-tab-nav ul li {
404 display: inline-block;
405 vertical-align: middle;
406 position: relative;
407 transition: 0.2s;
408 margin: 0 !important;
409 padding: 0 !important;
410 }
411
412 .wp-chatbot-tab-nav ul li a {
413 display: block;
414 width: 24px;
415 height: 24px;
416 margin: 5px;
417 background: url("../images/tab-btn-icon.png") no-repeat;
418 border-radius: 50%;
419 position: relative;
420 border-bottom: none;
421 }
422
423 .wp-chatbot-tab-nav ul li a:focus {
424 outline: none;
425 }
426
427 .wp-chatbot-tab-nav ul li a[data-option="recent"] {
428 background-position: -7px -7px;
429 }
430
431 .wp-chatbot-tab-nav ul li a[data-option="cart"] {
432 background-position: -47px -7px;
433 }
434
435 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
436 background-position: -82px -2px;
437 width: 35px;
438 height: 35px;
439 margin: 0;
440 }
441
442 .wp-chatbot-tab-nav ul li a[data-option="help"] {
443 background-position: -129px -7px;
444 }
445
446 .wp-chatbot-tab-nav ul li a[data-option="support"] {
447 background-position: -169px -49px;
448 }
449
450 .wp-chatbot-tab-nav ul li:before {
451 content: "";
452 display: block;
453 width: 74px;
454 /*background: linear-gradient(transparent 50%, #9ec3c0 50%);*/
455 background-size: 200%, 100%;
456 transition: all 0.2s linear;
457 height: 26px;
458 position: absolute;
459 left: 0;
460 top: -25px;
461 margin-left: -20px;
462 border-radius: 50%;
463 }
464
465 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
466 content: "";
467 position: absolute;
468 border-radius: 50%;
469 border: 3px solid #FFF;
470 left: -9px;
471 right: -9px;;
472 bottom: -9px;
473 top: -9px;
474 }
475
476 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
477 content: "";
478 position: absolute;
479 left: -4px;
480 right: -4px;;
481 bottom: -4px;
482 top: -4px;
483 border-radius: 50%;
484 border: 3px solid #FFF;
485 transition: 0.2s;
486 }
487
488 .wp-chatbot-tab-nav ul li:hover:before, .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active:before {
489 background-position: bottom;
490 }
491
492 .wp-chatbot-tab-nav ul li a span#wp-chatbot-cart-numbers {
493 position: absolute;
494 top: -6px;
495 right: -11px;
496 background: #da165d;
497 color: #fff;
498 display: block;
499 width: 16px;
500 height: 16px;
501 border-radius: 50%;
502 font-size: 10px;
503 line-height: 16px;
504 }
505
506 /*************************************************************************************
507 5. Message Editor
508 ************************************************************************************/
509 .wp-chatbot-editor-container {
510 border-radius: 0 0 5px 5px;
511 margin: 0;
512 padding: 4px 15px;
513 position: relative;
514 }
515
516 .wp-chatbot-editor-container input {
517 display: inline-block;
518 border: none;
519 box-shadow: none;
520 height: 40px;
521 font-family: 'Montserrat', sans-serif;
522 width: 80%;
523 background-color: transparent;
524 font-size: 14px;
525 margin: 0;
526 padding: 0;
527 outline: none;
528 }
529
530 .wp-chatbot-editor-container input:focus {
531 outline: none;
532 border: none;
533 box-shadow: none;
534 background: none;
535 }
536
537 /*****************************************************************************************
538 6. Message Item
539 *********************************************************************************************/
540 /*Load More Product*/
541 #wp-chatbot-loadmore {
542 display: table;
543 margin: 0 auto;
544 padding: 8px 20px !important;
545 }
546
547 .qcld-chatbot-support-or {
548 text-align: center;
549 font-weight: 700;
550 color: #1f8ceb;
551 }
552
553 .qcld-chatbot-user-confirmation {
554 color: #494949;
555 }
556
557 /************Link Item*************/
558 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email,span.qcld-chatbot-site-search, span.qcld-chatbot-suggest-phone, span.qcld-chat-common {
559 display: block;
560 margin: 8px auto;
561 padding: 12px 30px;
562 }
563
564 .qcld-chatbot-reset-btn {
565 display: inline-block;
566 padding: 5px 12px;
567 min-width: 100px;
568 }
569
570 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email,span.qcld-chatbot-site-search,span.qcld-chatbot-suggest-phone, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, span.qcld-chat-common {
571 font-weight: bold;
572 cursor: pointer;
573 text-align: center;
574 border-radius: 50px;
575 transition: 0.2s linear;
576 }
577
578 /******* Message module Featured products *******/
579
580 .wp-chatbot-products-area {
581 clear: both;
582 height: auto;
583 margin-bottom: 15px;
584 }
585
586 .wp-chatbot-products-area ul {
587 margin: 0 !important;
588 padding: 0 !important;
589 font-size: 0;
590 }
591
592 .wp-chatbot-products-area ul li {
593 position: relative;
594 display: inline-block;
595 width: 48%;
596 margin: 2% 0;
597 box-sizing: border-box;
598 padding: 2px;
599 background-color: #eee;
600 border-radius: 5px;
601 }
602
603 .wp-chatbot-products-area ul li:nth-child(2n+2) {
604 margin-left: 4%;
605 }
606
607 .wp-chatbot-products-area ul li img {
608 display: block;
609 box-shadow: none;
610 }
611
612 .wp-chatbot-products-area ul li .wp-chatbot-product-summary {
613 background: rgba(0, 0, 0, 0.51);
614 bottom: 0;
615 left: 0;
616 position: absolute;
617 right: 0;
618 text-align: center;
619 top: 0;
620 z-index: 999;
621 visibility: hidden;
622 font-size: 12px;
623 }
624
625 .wp-chatbot-products-area ul li:hover .wp-chatbot-product-summary {
626 visibility: visible;
627 }
628
629 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table {
630 display: table;
631 height: 100%;
632 width: 100%;
633 }
634
635 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table .wp-chatbot-product-table-cell {
636 display: table-cell;
637 vertical-align: middle;
638 }
639
640 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
641 padding: 0;
642 margin: 0 0 10px 0;
643 font-size: 16px;
644 line-height: 1.2;
645 }
646
647 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
648 color: #ffffff;
649 text-decoration: none;
650 }
651
652 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price span, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price ins, .wp-chatbot-products-area ul li .wp-chatbot-product-summary .price del {
653 background-color: transparent !important;
654 color: #ffffff;
655 font-size: 14px;
656 }
657
658 /********* Order List and Cart List *******/
659 .wp-chatbot-orders-container, .wp-chatbot-cart-container {
660 width: 100%;
661 }
662
663 .wp-chatbot-orders-single, .wp-chatbot-orders-header, .wp-chatbot-cart-header, .wp-chatbot-cart-single {
664 display: block;
665 font-size: 0;
666 }
667
668 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div, .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
669 display: inline-block;
670 font-size: 10px;
671 padding: 8px;
672 vertical-align: middle;
673 min-height: 30px;
674 box-sizing: border-box;
675 }
676
677 .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
678 width: 20%;
679 }
680
681 .wp-chatbot-cart-header div:nth-child(1), .wp-chatbot-cart-single div:nth-child(1) {
682 width: 45%;
683 }
684
685 .wp-chatbot-cart-header div:nth-child(3), .wp-chatbot-cart-single div:nth-child(3) {
686 text-align: right;
687 }
688
689 .wp-chatbot-cart-header div:nth-child(4), .wp-chatbot-cart-single div:nth-child(4) {
690 width: 15%;
691 text-align: right;
692 }
693
694 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div {
695 width: 25%;
696 }
697
698 .wp-chatbot-orders-single div:nth-child(1), .wp-chatbot-orders-header div:nth-child(1) {
699 width: 15%;
700 }
701
702 .wp-chatbot-orders-single div:nth-child(3), .wp-chatbot-orders-header div:nth-child(3) {
703 width: 35%;
704 }
705
706 .wp-chatbot-orders-container .order-items p {
707 margin: 2px 0;
708 padding: 0;
709 line-height: 14px;
710 }
711
712 .wp-chatbot-cart-container h3 {
713 font-size: 12px !important;
714 margin: 0 !important;
715 padding: 0 !important;
716 }
717
718 .wp-chatbot-cart-container input[type="number"] {
719 width: 100%;
720 height: 20px;
721 padding: 0;
722 margin: 0;
723 text-align: center;
724 }
725
726 .wp-chatbot-cart-single div:last-child span.wp-chatbot-cart-price, .wp-chatbot-cart-single div:last-child span.wp-chatbot-remove-cart-item {
727 vertical-align: middle;
728 }
729
730 .wp-chatbot-remove-cart-item {
731 display: inline-block;
732 font-size: 14px;
733 width: 20px;
734 height: 20px;
735 line-height: 20px;
736 text-align: center;
737 cursor: pointer;
738 border-radius: 50%;
739 }
740
741 .wp-chatbot-remove-cart-item:hover {
742 background-color: red;
743 color: #ffffff;
744 }
745
746 .wp-chatbot-cart-title, .wp-chatbot-recent-view-title {
747 margin: 0 0 10px;
748 text-align: center;
749 font-size: 18px;
750 }
751
752 .wp-chatbot-cart-footer {
753 clear: both;
754 font-size: 0;
755 }
756
757 .wp-chatbot-cart-footer div {
758 display: inline-block;
759 font-size: 14px;
760 width: 50%;
761 min-height: 1px;
762 }
763
764 .wp-chatbot-cart-footer div a {
765 display: block;
766 text-align: center;
767 font-size: 14px;
768 padding: 8px 20px;
769 }
770
771 .wp-chatbot-no-cart-item {
772 margin: 10px auto;
773 text-align: center;
774 }
775
776 /***********************************************************************************************
777 7. Product details
778 ************************************************************************************************/
779 /**********Product Details (Left)******/
780 .wp-chatbot-product-container {
781 margin-top: 50px;
782 display: none;
783 z-index: 9999999;
784 }
785
786 .wp-chatbot-product-container.active-chatbot-product-details {
787 display: inline-block;
788 vertical-align: top;
789 }
790
791 .wp-chatbot-product-details {
792 width: 600px;
793 position: relative;
794 margin: 50px auto;
795 font-size: 0;
796 min-height: 300px;
797 padding: 15px;
798 }
799
800 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
801 display: inline-block;
802 vertical-align: top;
803 width: 50%;
804 font-size: 15px;
805 box-sizing: border-box;
806 padding: 15px;
807 }
808
809 #wp-chatbot-product-image {
810 text-align: center;
811 }
812
813 .wp-chatbot-product-image-large:hover a {
814 cursor: zoom-in;
815 }
816
817 .wp-chatbot-product-image-large a:focus {
818 outline: none;
819 }
820
821 .wp-chatbot-product-image-thumbs {
822 overflow-x: auto;
823 text-align: left;
824 padding: 5px 0;
825 }
826
827 .wp-chatbot-product-image-thumbs ul {
828 margin: 0;
829 padding: 0;
830 white-space: nowrap;
831 }
832
833 .wp-chatbot-product-image-thumbs ul li {
834 list-style: none;
835 display: inline-table;
836 max-width: 80px;
837 margin: 0 2px;
838 background-color: #000;
839 }
840
841 .wp-chatbot-product-image-thumbs ul li img {
842 display: block;
843 }
844
845 .wp-chatbot-product-image-thumbs ul li a {
846 display: block;
847 opacity: .5;
848 }
849
850 .wp-chatbot-product-image-thumbs ul li a:focus {
851 outline: none;
852 }
853
854 .wp-chatbot-product-image-thumbs ul li.wp-chatbot-product-active-image-thumbs a {
855 opacity: 1;
856 }
857
858 .wp-chatbot-product-title h2 {
859 margin: 0 0 5px;
860 font-size: 24px;
861 }
862
863 .wp-chatbot-product-price p {
864 margin: 5px 0 10px;
865 padding: 0;
866 }
867
868 .wp-chatbot-product-price ins, .wp-chatbot-product-price del {
869 background: transparent;
870 color: inherit;
871 }
872
873 .wp-chatbot-product-description {
874 max-height: 150px;
875 overflow-x: auto;
876 }
877
878 .wp-chatbot-product-description, .wp-chatbot-product-description p {
879 font-size: 12px;
880 line-height: 1.8;
881 color: #999999;
882 margin: 5px 0;
883 padding: 0;
884 }
885
886 .wp-chatbot-product-quantity, .wp-chatbot-product-variable > div {
887 margin: 10px 0;
888 font-size: 0;
889 }
890
891 .wp-chatbot-product-quantity label, .wp-chatbot-product-variable label {
892 display: inline-block;
893 width: 90px;
894 text-transform: uppercase;
895 font-size: 14px;
896 margin-right: 10px;
897 }
898
899 .wp-chatbot-product-quantity input, .wp-chatbot-product-variable select {
900 display: inline-block;
901 width: 140px;
902 box-sizing: border-box;
903 padding: 5px 10px;
904 height: 35px;
905 border: 1px solid #eeeeee;
906 margin: 0;
907 font-size: 14px !important;
908 }
909
910 .wp-chatbot-product-quantity input:focus, .wp-chatbot-product-variable select:focus {
911 outline: none;
912 }
913
914 .wp-chatbot-product-cart-button input[type="button"] {
915 display: table;
916 padding: 8px 20px;
917 text-transform: uppercase;
918 font-size: 14px;
919 margin: 20px 0 0;
920 }
921
922 .wp-chatbot-product-cart-button input[type="button"]:focus {
923 box-shadow: none !important;
924 }
925
926 a.wp-chatbot-product-close {
927 position: absolute;
928 top: 0;
929 right: 0;
930 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
931 width: 30px;
932 height: 30px;
933 cursor: pointer;
934 }
935
936 .wp-chatbot-board-container {
937 display: none;
938 }
939
940 @keyframes chatbotProductAnimation {
941 0% {
942 transform: translate(200px);
943 }
944 95% {
945 transform: translate(-10px);
946 }
947 100% {
948 transform: translate(0);
949 }
950 }
951
952 .active-chatbot-product-details {
953 display: block;
954 position: absolute;
955 right: 100%;
956 animation: 0.5s chatbotProductAnimation;
957 z-index: -1;
958 }
959
960 /********Popup Product Details for ShortCode***********/
961 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
962 position: fixed;
963 animation: none;
964 right: 0;
965 left: 0;
966 top: 0;
967 border: 0;
968 width: 100%;
969 height: 100%;
970 background-color: rgba(1, 1, 1, 0.79);
971 z-index: 99999999;
972 margin: 0;
973 }
974
975 /****************************************************************************************************
976 8 App ShortCode
977 ****************************************************************************************************/
978 #wp-chatbot-chat-app-shortcode-container {
979 position: fixed;
980 z-index: 99999999;
981 top: 0;
982 bottom: 0;
983 left: 0;
984 right: 0;
985 background: #FFF;
986 }
987
988 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container {
989 width: 100% !important;
990 }
991
992 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container:after {
993 display: none;
994 }
995
996 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-footer, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container {
997 border-radius: 0;
998 }
999
1000 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header {
1001 display: none;
1002 }
1003
1004 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product img {
1005 margin: 0 auto;
1006 }
1007
1008 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-container {
1009 margin-top: 0;
1010 }
1011
1012 #wp-chatbot-chat-app-shortcode-container .active-chatbot-product-details {
1013 left: 0;
1014 right: 0;
1015 top: 0;
1016 bottom: 0;
1017 z-index: 999999999;
1018 background: rgba(0, 0, 0, 0.80);
1019 margin: 0;
1020 }
1021
1022 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-details {
1023 margin: 0 auto;
1024 }
1025
1026 #wp-chatbot-chat-app-shortcode-container #wp-chatbot-cart-short-code .wp-chatbot-comment-loader, #wp-chatbot-chat-app-shortcode-container #wp-chatbot-checkout-short-code .wp-chatbot-comment-loader {
1027 position: absolute;
1028 top: 50%;
1029 left: 50%;
1030 margin-left: -45px;
1031 }
1032
1033 .wpchatbot-app-order-confirmation .wpchatbot-wpcommerce-order, #wp-chatbot-app-checkout-container {
1034 font-size: 14px;
1035 box-sizing: border-box;;
1036 padding: 15px;
1037 position: absolute;
1038 left: 0;
1039 right: 0;
1040 top: 0;
1041 /*bottom: 0;*/
1042 z-index: 999999;
1043 background: #ffffff;
1044 }
1045
1046 .wpchatbot-wpcommerce-order .wpcommerce-notice {
1047 padding: 10px;
1048 border: 1px solid #cccccc;
1049 color: #FFF;
1050 }
1051
1052 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-received {
1053 background: #58a093;
1054 }
1055
1056 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-failed {
1057 background: #db4771;
1058 }
1059
1060 .wpchatbot-wpcommerce-order .wpcommerce-order-details, .wpchatbot-wpcommerce-order .wpcommerce-customer-details {
1061 padding: 20px 0;
1062 }
1063
1064 .wpchatbot-app-order-confirmation #wp-chatbot-chat-container, .wpchatbot-app-checkout #wp-chatbot-chat-container {
1065 display: none;
1066 }
1067
1068 .wpchatbot-wpcommerce-order table {
1069 width: 100%;
1070 }
1071
1072 .wpchatbot-wpcommerce-order .wpcommerce-table.order_details tbody tr td, .wpchatbot-wpcommerce-order .wpcommerce-table.order_details tfoot tr th, .wpchatbot-wpcommerce-order .wpcommerce-table.order_details tfoot tr td {
1073 text-align: left;
1074 }
1075
1076 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details {
1077 margin: 0;
1078 padding: 0;
1079 }
1080
1081 .wpchatbot-app-home-back {
1082 display: table;
1083 padding: 8px 20px;
1084 background: #9a3a87;
1085 color: white;
1086 font-size: 14px;
1087 text-transform: uppercase;
1088 border: none;
1089 }
1090
1091 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li {
1092 list-style: none;
1093 padding: 5px 0;
1094 border-bottom: 1px solid #eaeaea;
1095 }
1096
1097 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li:last-child {
1098 border-bottom: none;
1099 }
1100
1101 #wp-chatbot-cart-short-code .coupon {
1102 width: 100%;
1103 max-width: 400px;
1104 text-align: left;
1105 }
1106
1107 #wp-chatbot-cart-short-code .coupon input[type="text"], #wp-chatbot-cart-short-code .coupon input[type="submit"] {
1108 width: 45%;
1109 height: 50px;
1110 box-sizing: border-box;
1111 padding: 5px;
1112 margin-right: 4%;
1113 vertical-align: middle;
1114 font-size: 16px;
1115 }
1116
1117 #wp-chatbot-cart-short-code .cart_totals table, #wp-chatbot-cart-short-code .cart_totals table tr, #wp-chatbot-cart-short-code .cart_totals table td, #wp-chatbot-cart-short-code .cart_totals table th {
1118 width: 100%;
1119 max-width: 100% !important;
1120 margin: 0 !important;
1121 }
1122
1123 #wp-chatbot-cart-short-code .cross-sells {
1124 display: none;
1125 }
1126
1127 #wp-chatbot-cart-short-code .wc-proceed-to-checkout {
1128 margin: 15px 0;
1129 }
1130
1131 /****************************************************************************************************
1132 9 ShortCode OverRight
1133 ****************************************************************************************************/
1134 .wp-chatbot-shortcode-template-container .wp-chatbot-content {
1135 height: 452px;
1136 }
1137
1138 .wp-chatbot-shortcode-template-container {
1139 }
1140
1141 /************Link Item*************/
1142 .wp-chatbot-shortcode-template-container span.qcld-chatbot-product-category, .wp-chatbot-shortcode-template-container span.qcld-chatbot-support-items, .wp-chatbot-shortcode-template-container span.qcld-chatbot-wildcard, .wp-chatbot-shortcode-template-container span.qcld-chatbot-suggest-email,span.qcld-chatbot-site-search,span.qcld-chatbot-suggest-phone, .wp-chatbot-shortcode-template-container span.qcld-chatbot-reset-btn, .wp-chatbot-shortcode-template-container #wp-chatbot-loadmore, span.qcld-chat-common {
1143 color: #000000;
1144 background-size: 200% auto;
1145 background-color: #ffffff7d;
1146 border: 1px solid #ffffff;
1147 display: inline-block;
1148 margin: 3px auto;
1149 padding: 6px 11px;
1150 margin-right: 4px;
1151 }
1152
1153 .wp-chatbot-shortcode-template-container span.qcld-chatbot-product-category:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-support-items:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-wildcard:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-suggest-email:hover,span.qcld-chatbot-site-search:hover,span.qcld-chatbot-suggest-phone:hover, .wp-chatbot-shortcode-template-container span.qcld-chatbot-reset-btn:hover, .wp-chatbot-shortcode-template-container #wp-chatbot-loadmore:hover, span.qcld-chat-common:hover {
1154 background-position: right center;
1155 box-shadow: none;
1156 background-color: #a1c4fd;
1157 }
1158
1159 /****************************************************************************************************
1160 10. Notification
1161 ****************************************************************************************************/
1162 .wp-chatbot-notification-container {
1163 position: relative;
1164 padding: 35px 15px 10px;
1165 box-shadow: 0 0 5px #d5d5d5;
1166 transition: 0.8s;
1167 background-color: #fff;
1168 font-size: 14px;
1169 line-height: 1.5;
1170 transform: translateX(500px);
1171 opacity: 0.1;
1172 border-radius: 5px;
1173 width: 320px;
1174 }
1175
1176 .wp-chatbot-notification-container.wp-chatbot-notification-container-sliding {
1177 opacity: 0.9;
1178 transform: translateX(0);
1179 }
1180
1181 .wp-chatbot-notification-container-disable {
1182 display: none;
1183 }
1184
1185 .wp-chatbot-notification-agent-profile {
1186 position: absolute;
1187 top: -40px;
1188 left: 15px;
1189 right: 15px;
1190 }
1191
1192 .wp-chatbot-notification-widget-avatar, .wp-chatbot-notification-welcome {
1193 display: inline-block;
1194 }
1195
1196 .wp-chatbot-notification-widget-avatar {
1197 width: 60px;
1198 height: 60px;
1199 background-color: #fff;
1200 border-radius: 50%;
1201 overflow: hidden;
1202 box-shadow: 0 5px 5px #d5d5d5;
1203 }
1204
1205 .wp-chatbot-notification-welcome {
1206 font-size: 12px;
1207 }
1208
1209 .wp-chatbot-notification-message {
1210 transition: opacity 0.5s;
1211 }
1212
1213 div#wp-chatbot-desktop-reload {
1214 background: transparent;
1215 width: 30px;
1216 height: 30px;
1217 border-radius: 50%;
1218 position: absolute;
1219 top: -21px;
1220 right: 25px;
1221 color: #ffffff;
1222 cursor: pointer;
1223 text-align: center;
1224 box-sizing: border-box;
1225 transition: 0.2s;
1226 transform: translateY(20px);
1227 }
1228 div#wp-chatbot-desktop-close span{
1229 position: relative;
1230 }
1231 div#wp-chatbot-desktop-reload span {
1232 position: relative;
1233 top: 6px;
1234 }
1235 #wp-chatbot-desktop-close {
1236 display: block;
1237 position: absolute;
1238 right: 3px;
1239 padding: 5px;
1240 font-size: 14px;
1241 font-family: "Arial";
1242 line-height: 20px;
1243 top: -20px;
1244 width: 30px;
1245 height: 30px;
1246 background-color: transparent;
1247 border-radius: 50%;
1248 color: #ffffff;
1249 cursor: pointer;
1250 text-align: center;
1251 box-sizing: border-box;
1252 transition: 0.2s;
1253 transform: translateY(20px);
1254 }
1255
1256 span.chatbot_intent_reload {
1257 position: absolute;
1258 left: 80%;
1259 -webkit-transform: translate(-80%, -50%);
1260 transform: translate(-80%, -50%);
1261 top: 50%;
1262 color: #9a9a9a;
1263 cursor: pointer;
1264 line-height: normal;
1265 }
1266
1267 .wp-chatbot-notification-close {
1268 display: block;
1269 position: absolute;
1270 right: 0;
1271 padding: 5px;
1272 font-size: 14px;
1273 font-family: "Arial";
1274 line-height: 20px;
1275 top: -35px;
1276 width: 30px;
1277 height: 30px;
1278 background-color: #7d8999;
1279 border-radius: 50%;
1280 color: #ffffff;
1281 cursor: pointer;
1282 text-align: center;
1283 box-sizing: border-box;
1284 transition: 0.2s;
1285 visibility: hidden;
1286 transform: translateY(20px);
1287 }
1288
1289 .wp-chatbot-notification-close:hover {
1290 background-color: #5f6a76;
1291 }
1292
1293 .wp-chatbot-notification-container:hover .wp-chatbot-notification-close {
1294 visibility: visible;
1295 transform: translateY(0px);
1296 }
1297 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph{
1298 display: block !important;
1299 }
1300 .wp-chatbot-ball-cart-items {
1301 bottom: -8px;
1302 left: -11px;
1303 position: absolute;
1304 width: 22px;
1305 height: 22px;
1306 line-height: 22px;
1307 font-size: 14px;
1308 background-color: #43c0ed;
1309 color: #ffffff;
1310 display: block;
1311 border-radius: 50%;
1312 text-align: center;
1313 }
1314
1315 .wp-chatbot-rtl ul li.wp-chatbot-msg:after, .wp-chatbot-rtl ul li.wp-chat-user-msg:after {
1316 content: "";
1317 display: table;
1318 clear: both;
1319 width: 100%;
1320 height: 3px;
1321 }
1322
1323 .wp-chatbot-rtl .wp-chatbot-notification-close {
1324 right: auto;
1325 left: 0;
1326 }
1327
1328 #wp-chatbot-product-title h2 a {
1329 color: #2ea3f2;
1330 }
1331
1332 /**
1333 #Integration
1334 */
1335
1336 .wp-chatbot-integration-button-container {
1337 position: absolute;
1338 left: -35px;
1339 top: 100px;
1340 z-index: -1;
1341 }
1342
1343 .wp-chatbot-integration-button-container span {
1344 cursor: pointer;
1345 width: 40px;
1346 height: 40px;
1347 background-image: url("../images/tab-btn-icon.png");
1348 background-repeat: no-repeat;
1349 border-radius: 50%;
1350 display: block;
1351 }
1352
1353 .wp-chatbot-messages-container .wp-chatbot-msg-flat .facebook-messenger-chat {
1354 cursor: pointer;
1355 width: 40px;
1356 height: 40px;
1357 background-image: url(../images/tab-btn-icon.png);
1358 background-repeat: no-repeat;
1359 background-size: auto;
1360 border-radius: 50%;
1361 display: table;
1362 margin: 0 auto;
1363 background-position: 0 -80px;
1364 border: none !important;
1365 box-shadow: none !important;
1366 }
1367 .swal2-container {
1368 z-index: 99999999;
1369 }
1370 .facebook-messenger {
1371 background-position: 0 -80px;
1372 }
1373
1374 .intergration-weblink {
1375 background-position: -120px -80px;
1376 }
1377
1378 .intergration-phone {
1379 background-position: -81px -80px;
1380 }
1381
1382 .inetegration-skype-btn {
1383 background-position: -162px -80px;
1384 }
1385
1386 .intergration-whats {
1387 background-position: -40px -80px;
1388 }
1389
1390 .intergration-viber {
1391 background-position: 0px -120px;
1392 }
1393
1394 .fb_dialog {
1395 /*right: 85px !important;
1396 bottom: 47px !important;*/
1397 visibility: hidden;
1398 width: 35px !important;
1399 height: 35px !important;
1400 background: #017cff url('../images/tab-btn-icon.png') no-repeat -43px -122px !important;
1401 }
1402
1403 .fb_dialog > .fb_dialog_content {
1404 opacity: 0.01;
1405 }
1406
1407
1408
1409
1410 /**********************************************************************************************
1411 **********************************************************************************************
1412 ************************************* text writing animation ************************************
1413 ***********************************************************************************************
1414 ***********************************************************************************************/
1415 /* @keyframes letters {
1416 from {
1417 left: 0;
1418 }
1419 to {
1420 left: 100%;
1421 }
1422 }
1423 @keyframes lines {
1424 from {
1425 top: 0;
1426 }
1427 to {
1428 top: 100%;
1429 }
1430 }
1431 @keyframes cursor-type {
1432 50% {
1433 border-color: #1f8ceb00;
1434 }
1435 }
1436 @keyframes cursor-wait {
1437 0% {
1438 box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
1439 }
1440 1% {
1441 box-shadow: inset 2px 0 0 0 #1f8ceb00;
1442 }
1443 40% {
1444 box-shadow: inset 2px 0 0 0 #1f8ceb00;
1445 }
1446 }
1447
1448
1449 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation {
1450 position: relative;
1451 width: 100%;
1452 line-height: 1.2;
1453 word-break: break-all;
1454 overflow: hidden;
1455 }
1456 @supports (width: 1ch) {
1457 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before, li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1458 box-sizing: border-box;
1459 content: "";
1460 position: absolute;
1461 z-index: 1;
1462 display: block;
1463 height: 1.2em;
1464 width: 100%;
1465 background-color: #1f8ceb;
1466 }
1467 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1468 border-left: 2px solid transparent;
1469 top: 100%;
1470 animation-name: letters, lines, cursor-type, cursor-wait;
1471 animation-fill-mode: both, both, both, backwards;
1472 }
1473 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1474 content: "";
1475 height: 100%;
1476 top: 100%;
1477 left: 0;
1478 margin-top: 1.2em;
1479 }
1480 }
1481
1482 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1483 animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
1484 animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
1485 animation-iteration-count: 1, 1, 35, 2;
1486 animation-delay: 0.6s, 0.6s, 0.6s, 1.0s;
1487 }
1488 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1489 animation: lines 1.4285714286s steps(1, end) 1;
1490 animation-fill-mode: backwards;
1491 animation-delay: 1.0s;
1492 }
1493
1494
1495 ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child{
1496 background-color: #fff;
1497 }
1498
1499
1500 ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child .wp-chatbot-paragraph .wp-chatbot-textanimation:before, ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1501 box-sizing: border-box;
1502 content: "";
1503 position: absolute;
1504 z-index: 1;
1505 display: block;
1506 height: 1.2em;
1507 width: 100%;
1508 background-color: #1f8ceb00;
1509 } */
1510
1511 /****************************************************************************************************
1512 11 Responsive
1513 ****************************************************************************************************/
1514 @media screen and (max-width: 1200px) {
1515 /******************Product Details Popup*****************/
1516 #wp-chatbot-ball-container .wp-chatbot-product-container {
1517 position: absolute;
1518 animation: none;
1519 right: 0;
1520 left: 0;
1521 top: 0;
1522 bottom: 0;
1523 width: 100%;
1524 height: 100%;
1525 background-color: rgba(1, 1, 1, 0.79);
1526 z-index: 9999;
1527 margin: 0;
1528 }
1529
1530 /******product details layout******/
1531 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
1532 overflow-y: scroll;
1533 }
1534
1535 .wp-chatbot-products-area .slimScrollDiv, .wp-chatbot-products-area .wp-chatbot-products {
1536 height: auto !important;
1537 }
1538
1539 #wp-chatbot-ball-container .wp-chatbot-product-container {
1540 overflow-x: auto;
1541 }
1542
1543 .wp-chatbot-product-details {
1544 width: 100%;
1545 box-sizing: border-box;
1546 }
1547
1548 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
1549 width: 100%;
1550 box-sizing: border-box;
1551 }
1552
1553 }
1554
1555
1556 @media screen and (max-width: 767px) {
1557 body div#wp-chatbot-ball-container {
1558 max-width: 98%;
1559 margin: 0 auto 3px auto;
1560 }
1561 .wp-chatbot-header {
1562 padding-left: 50px;
1563 padding-right: 50px;
1564 }
1565
1566 .wp-chatbot-board-container{
1567 width: 310px;
1568 }
1569 .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1570 width: 100%;
1571 }
1572
1573 #wp-chatbot-mobile-close {
1574 position: absolute;
1575 right: 12px;
1576 top: 9px;
1577 display: table;
1578 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
1579 width: 30px;
1580 height: 30px;
1581 cursor: pointer;
1582 color: transparent;
1583 }
1584 #wp-chatbot-mobile-close{
1585 display: none;
1586 }
1587
1588
1589
1590 .wp-chatbot-notification-close {
1591 visibility: visible;
1592 }
1593
1594 .chatbot-sidebar {
1595 display: none !important;
1596 }
1597 }
1598
1599 @media screen and (max-width: 500px) {
1600 .wp-chatbot-integration-button-container {
1601 position: absolute;
1602 left: 15px;
1603 top: 5px;
1604 right: 43px;
1605 text-align: center;
1606 }
1607
1608 .wp-chatbot-integration-button-container span {
1609 display: inline-block !important;
1610 }
1611
1612 .wp-chatbot-header {
1613 padding-top: 15px;
1614 }
1615
1616 #wp-chatbot-chat-container {
1617 right: 30px;
1618 bottom: 30px;
1619 }
1620
1621 .fb_dialog {
1622 z-index: 21999 !important;
1623 right: 46px !important;
1624 bottom: 3px !important;
1625
1626 }
1627 }
1628
1629 @media screen and (max-width: 400px) {
1630 .wp-chatbot-notification-container {
1631 width: 250px;
1632 padding-top: 55px;
1633 }
1634 .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1635 padding-top: 15px !important;
1636 }
1637 }
1638 .wpb-search-result a{
1639 display: block;
1640 background: #fff;
1641 margin-bottom: 0;
1642 padding: 5px;
1643 }
1644 @media screen and (-webkit-min-device-pixel-ratio:0) {
1645 .qcwp-chatbot-search-article input:focus,
1646 .qcwp-chatbot-search-article input {
1647 font-size: 14px;
1648 }
1649
1650 input#wp-chatbot-editor:focus,
1651 input#wp-chatbot-editor {
1652 font-size: 14px;
1653 }
1654
1655 }
1656 /*modal form*/
1657 .plugin-card{
1658 width: 77% !important;
1659 height: 186px;
1660 }
1661 .plugin-action-buttons li a{
1662 font-size: 13px;
1663 }
1664 .name a{
1665 text-decoration: none !important;
1666 }
1667
1668 .cxsc-settings-blocks-addon {
1669 width: 100% !important;
1670 }
1671 .plugin-card {
1672 width: 100% !important;
1673 }
1674 span.chatbotquote-info {
1675 font-size: 38px;
1676 padding: 20px 0 0 0;
1677 position: absolute;
1678 left: 0;
1679 top: 32px;
1680 }
1681 .wp-chatbot-textanimation {
1682 position: relative;
1683 }
1684 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph .wp-chatbot-textanimation h3 {
1685 padding: 0 0 0 22px !important;
1686 }
1687 span.chatbotquote-info-foot {
1688 font-size: 38px;
1689 padding: 0px 0 0 130px;
1690 position: static;
1691 bottom: -20px;
1692 display: grid;
1693 line-height: 0;
1694 }
1695 wp-chatbot-editor-container input::placeholder {
1696 color: #181818 !important;
1697 }
1698 .wp-chatbot-editor-container input::-ms-input-placeholder {
1699 color: #181818 !important;
1700 }
1701 .wpb-search-result a {
1702 display: block;
1703 background: #eeeeee00 !important;
1704 padding: 4px 5px;
1705 line-height: 20px;
1706 padding-left: 0px !important;
1707 margin-bottom: 0;
1708 color: #222 !important;
1709 }
1710 .wpb-search-result a p {
1711 margin-bottom: 0;
1712 }
1713 .wpb-search-result a {
1714 color: #222;
1715 }
1716 .wpbot_card_caption p {
1717 color: #222;
1718 }
1719
1720
1721 .wp-chatbot-textanimation ul {
1722 margin: 12px 0 8px 20px !important;
1723 }
1724 .wp-chatbot-textanimation ul li {
1725 list-style-type: "";
1726 padding-left: 6px;
1727 }
1728
1729 .wp-chatbot-textanimation ul li::marker {
1730 color: #1d73b4;
1731 font-weight: bold;
1732 }
1733
1734 /** like dislike thumbs icons**/
1735
1736
1737
1738 .qcld-like-dislike-icon {
1739 display: none;
1740 }
1741
1742 .qcld-like-dislike-icon a {
1743 padding: 0 5px;
1744 }
1745
1746 .qcld-like-dislike-icon i {
1747 color: #1d73b4;
1748 }
1749
1750 ul.wp-chatbot-messages-container>li>.wp-chatbot-paragraph,
1751 .wp-chatbot-agent-profile .wp-chatbot-bubble {
1752 padding: 8px 15px 15px 15px;
1753 }
1754
1755 /* ul.wp-chatbot-messages-container>li.wp-chatbot-msg:hover .qcld-like-dislike-icon {
1756 opacity: 1;
1757 } */
1758 .qcld-share {
1759 position: relative;
1760 display: inline-block;
1761 }
1762
1763 .qcld-share .share-menu {
1764 position: absolute;
1765 bottom: 100%;
1766 left: -6px;
1767 background: #fff;
1768 border: 1px solid #ddd;
1769 padding: 5px;
1770 display: flex;
1771 gap: 8px;
1772 border-radius: 5px;
1773 }
1774
1775 .qcld-share .share-menu a {
1776 color: #333;
1777 font-size: 16px;
1778 }
1779
1780 /**Modal style**/
1781 #wpbot-report-modal>div {
1782 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%) !important;
1783 background: #1d73b4 !important;
1784 backdrop-filter: blur(0px);
1785 isolation: isolate;
1786 }
1787
1788 #wpbot-report-modal input#wpbot-report-email {
1789 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1790 background: #ffffff61;
1791 backdrop-filter: blur(0px);
1792 isolation: isolate;
1793 margin: 0 0;
1794 border-radius: 6PX;
1795 padding: 10px 10px;
1796 border: none;
1797 width: 96% !important;
1798 color: #fff;
1799 }
1800
1801 #wpbot-report-modal textarea#wpbot-report-text {
1802 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1803 background: #ffffff61;
1804 backdrop-filter: blur(0px);
1805 isolation: isolate;
1806 margin: 0 0;
1807 border-radius: 6PX;
1808 padding: 10px 10px;
1809 border: none;
1810 width: 96% !important;
1811 color: #fff;
1812 }
1813
1814 #wpbot-report-modal textarea#wpbot-report-text:focus-visible {
1815 box-shadow: none;
1816 outline: none;
1817 }
1818
1819 #wpbot-report-modal input#wpbot-report-email:focus-visible {
1820 box-shadow: none;
1821 outline: none;
1822 }
1823
1824 #wpbot-report-modal>div h3 {
1825 font-size: 20px;
1826 font-weight: bold;
1827 color: #fff;
1828 }
1829
1830 #wpbot-report-modal>div label {
1831 font-size: 16px;
1832 font-weight: bold;
1833 color: #fff;
1834 }
1835
1836 #wpbot-report-modal>div button {
1837 transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
1838 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1839 background: rgb(255 255 255 / 25%);
1840 backdrop-filter: none;
1841 isolation: isolate;
1842 color: rgb(29 115 180) !important;
1843 margin: 2px 2px;
1844 border: 1px solid #fff !important;
1845 padding: 8px 15px;
1846 border-radius: 8px;
1847 color: #ffffff !important;
1848 font-size: 14px;
1849 font-weight: bold;
1850 cursor: pointer;
1851 }
1852
1853 #wpbot-report-modal>div button:hover {
1854 transform: scale(0.95);
1855 }
1856
1857 .qcld-like-dislike-icon a .liked {
1858 color: green;
1859 cursor: default;
1860 pointer-events: none;
1861 }
1862
1863 .qcld-like-dislike-icon a .disliked {
1864 color: red;
1865 cursor: default;
1866 pointer-events: none;
1867 }
1868
1869 ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container .wp-chatbot-paragraph {
1870 box-shadow: none;
1871 background: transparent;
1872 backdrop-filter: none;
1873 isolation: inherit;
1874 }
1875
1876
1877
1878 ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1879 box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1880 background: rgb(255 255 255 / 30%);
1881 backdrop-filter: blur(0px);
1882 isolation: isolate;
1883 border-radius: 10px;
1884 padding: 8px 15px;
1885 }
1886
1887 .qcld-like-dislike-icon {
1888 padding: 6px 0 0 0;
1889 }
1890
1891
1892
1893 .qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked {
1894 position: relative;
1895 font-size: 0px !important;
1896 }
1897
1898 .qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1899 content: "\f164" !important;
1900 left: 0px;
1901 bottom: 0;
1902 font-size: 16px !important;
1903 }
1904
1905 .qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked {
1906 position: relative;
1907 font-size: 0px !important;
1908 }
1909
1910 .qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before {
1911 content: "\f165" !important;
1912 left: 0px;
1913 bottom: 0;
1914 font-size: 16px !important;
1915 }
1916
1917 .qcld-like-dislike-icon a {
1918 padding: 0 0px;
1919 }
1920
1921 .qcld-like-dislike-icon a i {
1922 transition: all 0.2s ease-in-out;
1923 }
1924
1925 .qcld-like-dislike-icon a i:hover {
1926 transform: scale(1.5);
1927 }
1928
1929 .qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1930 transition: all 0.2s ease-in-out;
1931 }
1932
1933 .qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before:hover {
1934 transform: scale(1.5);
1935 }
1936
1937 .qcld-like-dislike-icon a {
1938 outline: none !important;
1939 }
1940
1941
1942 .qcld-like-dislike-icon a {
1943 padding: 0 10px 0 0;
1944 }
1945
1946 .qcld-like-dislike-icon .share-menu a {
1947 padding: 0 0 0 0 !important;
1948 }
1949
1950 .qcld-like-dislike-icon i {
1951 color: #ffffff;
1952 }
1953
1954 .wp-chatbot-textanimation ul {
1955 margin: 12px 0 8px 20px !important;
1956 padding: 0;
1957 }
1958 .qcld-like-dislike-icon i {
1959 color: #1e74b3;
1960 }
1961 .qcld-like-dislike-icon a i {
1962 font-size: 16px;
1963 padding: 0;
1964 height: auto;
1965 }
1966 .qcld-like-dislike-icon a {
1967 padding: 0 5px 0 0;
1968 height: 15px;
1969 }