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

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

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