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

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

1,526 lines 38.9 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 }
144
145 #wp-chatbot-ball .wp-chatbot-ball img {
146 width: 60px !important;
147 height: 60px !important;
148 display: block;
149 border-radius: 50%;
150 }
151
152 .wp-chatbot-ball-animator {
153 position: relative;
154 border-radius: 50%;
155 }
156
157 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
158 opacity: 1;
159 width: 100%;
160 height: 100%;
161 position: absolute;
162 animation: spin 2s linear infinite;
163 border: 3px solid transparent;
164 border-top-color: #9370DB;
165 }
166
167 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
168 content: "";
169 position: absolute;
170 top: -9px;
171 left: -9px;
172 right: -9px;
173 bottom: -9px;
174 border-radius: 50%;
175 border: 3px solid transparent;
176 border-top-color: #BA55D3;
177 animation: spin 3s linear infinite;
178 }
179
180 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
181 content: "";
182 position: absolute;
183 top: -15px;
184 left: -15px;
185 right: -15px;
186 bottom: -15px;
187 border-radius: 50%;
188 border: 3px solid transparent;
189 border-top-color: #FF00FF;
190 animation: spin 1.5s linear infinite;
191 }
192
193 @keyframes spin {
194 0% {
195 -webkit-transform: rotate(0deg);
196 -ms-transform: rotate(0deg);
197 transform: rotate(0deg);
198 }
199 100% {
200 -webkit-transform: rotate(360deg);
201 -ms-transform: rotate(360deg);
202 transform: rotate(360deg);
203 }
204 }
205
206 @keyframes spinHide {
207 0% {
208 opacity: 0;
209 }
210 100% {
211 opacity: 0;
212 }
213 }
214
215 /*******************************************************************************
216 3. Message container
217 *********************************************************************************/
218 .wp-chatbot-board-container {
219 display: none;
220 font-family: "quicksandregular", "Helvetica Neue", Helvetica, Aria;
221 height: auto;
222 width: 370px;
223 position: relative;
224 box-sizing: border-box; /*margin-bottom: 10px;*/
225 }
226
227 .wp-chatbot-board-container.active-chat-board {
228 display: inline-block;
229 vertical-align: top;
230 }
231
232 .wp-chatbot-header {
233 border-radius: 5px 5px 0 0;
234 margin: 0;
235 padding: 15px 15px;
236 box-sizing: border-box;
237 text-align: center;
238 position: relative; /*height: 63px;*/
239 }
240
241 .wp-chatbot-header h3 {
242 margin: 0 !important;
243 padding: 0 !important;
244 }
245
246 .wp-chatbot-content {
247 height: calc(100vh - 277px);
248 position: relative;
249 padding: 15px;
250 box-sizing: border-box;
251 max-height: 564px;
252 }
253
254 .wp-chatbot-product-reload.wp-chatbot-product-loading {
255 display: block;
256 position: absolute;
257 background: rgba(255, 255, 255, 0.50);
258 padding: 3px;
259 border-radius: 5px;
260 top: 0;
261 bottom: 0;
262 left: 0;
263 right: 0;
264 z-index: 999;
265 }
266
267 .wp-chatbot-product-loading img {
268 display: table;
269 left: 50%;
270 top: 50%;
271 position: absolute;
272 margin: -10px -45px;
273 }
274
275 ul.wp-chatbot-messages-container {
276 padding: 0 !important;
277 margin: 0 !important;
278 overflow: hidden;
279 }
280
281 @keyframes messageAnim {
282 0% {
283 transform: translateY(80px) scaleX(0.5);
284 opacity: 0;
285 }
286 100% {
287 transform: translateY(0) scaleX(1);
288 opacity: 1;
289 }
290 }
291
292 ul.wp-chatbot-messages-container > li {
293 position: relative;
294 box-sizing: border-box;
295 word-wrap: break-word;
296 list-style: none;
297 display: block;
298 clear: both;
299 line-height: 150%;
300 min-height: 50px;
301 margin: 0 0 10px 0;
302 animation: messageAnim 0.5s;
303 opacity: 1;
304 }
305
306 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph h3 {
307 padding: 0 0 5px !important;
308 margin: 0 !important;
309 font-weight: bold;
310 font-size: 16px;
311 }
312
313 ul.wp-chatbot-messages-container > li.wp-chatbot-msg::before {
314 left: 19px;
315 }
316
317 ul.wp-chatbot-messages-container > li.wp-chat-user-msg::before {
318 right: 19px;
319 }
320
321 ul.wp-chatbot-messages-container > li:before {
322 content: "";
323 display: block;
324 width: 5px;
325 height: 5px;
326 background: red;
327 top: 19px;
328 z-index: 999;
329 position: absolute;
330 border-radius: 50%;
331 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;
332 animation: 0.9s bang ease-out backwards, 0.9s linear dothide;
333 opacity: 0;
334 /*animation-delay: 0s, 0.2s;*/
335 animation-duration: 0.5s, 0.5s;
336 }
337
338 @keyframes dothide {
339 0% {
340 opacity: 1;
341 }
342 90% {
343 opacity: 1;
344 }
345 100% {
346 opacity: 1;
347 }
348 }
349
350 @keyframes bang {
351 from {
352 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;
353 }
354 }
355
356 ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-avatar, ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-agent {
357 display: none;
358 overflow: hidden;
359 }
360
361 ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after, ul.wp-chatbot-messages-container > li .wp-chatbot-products:after {
362 clear: both;
363 display: block;
364 content: "";
365 height: 1px;
366 }
367
368 ul.wp-chatbot-messages-container > li .wp-chatbot-agent, .wp-chatbot-agent-profile .wp-chatbot-widget-agent {
369 display: none;
370 }
371
372 #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
373 width: 40px !important;
374 height: 40px !important;
375 }
376
377 /*********************************************************************************
378 4. Tab
379 *********************************************************************************/
380 .wp-chatbot-footer {
381 border-radius: 5px;
382 }
383
384 .wp-chatbot-tab-nav {
385 padding: 15px 5px; /*background-color: #9ec3c0;*/
386 }
387
388 .wp-chatbot-tab-nav ul {
389 margin: 0 !important;
390 padding: 0 !important;
391 list-style: none;
392 text-align: center;
393 display: flex;
394 justify-content: space-around;
395 vertical-align: bottom;
396 }
397
398 .wp-chatbot-tab-nav ul li {
399 display: inline-block;
400 vertical-align: middle;
401 position: relative;
402 transition: 0.2s;
403 margin: 0 !important;
404 padding: 0 !important;
405 }
406
407 .wp-chatbot-tab-nav ul li a {
408 display: block;
409 width: 24px;
410 height: 24px;
411 margin: 5px;
412 background: url("../images/tab-btn-icon.png") no-repeat;
413 border-radius: 50%;
414 position: relative;
415 border-bottom: none;
416 }
417
418 .wp-chatbot-tab-nav ul li a:focus {
419 outline: none;
420 }
421
422 .wp-chatbot-tab-nav ul li a[data-option="recent"] {
423 background-position: -7px -7px;
424 }
425
426 .wp-chatbot-tab-nav ul li a[data-option="cart"] {
427 background-position: -47px -7px;
428 }
429
430 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
431 background-position: -82px -2px;
432 width: 35px;
433 height: 35px;
434 margin: 0;
435 }
436
437 .wp-chatbot-tab-nav ul li a[data-option="help"] {
438 background-position: -129px -7px;
439 }
440
441 .wp-chatbot-tab-nav ul li a[data-option="support"] {
442 background-position: -169px -49px;
443 }
444
445 .wp-chatbot-tab-nav ul li:before {
446 content: "";
447 display: block;
448 width: 74px;
449 /*background: linear-gradient(transparent 50%, #9ec3c0 50%);*/
450 background-size: 200%, 100%;
451 transition: all 0.2s linear;
452 height: 26px;
453 position: absolute;
454 left: 0;
455 top: -25px;
456 margin-left: -20px;
457 border-radius: 50%;
458 }
459
460 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
461 content: "";
462 position: absolute;
463 border-radius: 50%;
464 border: 3px solid #FFF;
465 left: -9px;
466 right: -9px;;
467 bottom: -9px;
468 top: -9px;
469 }
470
471 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
472 content: "";
473 position: absolute;
474 left: -4px;
475 right: -4px;;
476 bottom: -4px;
477 top: -4px;
478 border-radius: 50%;
479 border: 3px solid #FFF;
480 transition: 0.2s;
481 }
482
483 .wp-chatbot-tab-nav ul li:hover:before, .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active:before {
484 background-position: bottom;
485 }
486
487 .wp-chatbot-tab-nav ul li a span#wp-chatbot-cart-numbers {
488 position: absolute;
489 top: -6px;
490 right: -11px;
491 background: #da165d;
492 color: #fff;
493 display: block;
494 width: 16px;
495 height: 16px;
496 border-radius: 50%;
497 font-size: 10px;
498 line-height: 16px;
499 }
500
501 /*************************************************************************************
502 5. Message Editor
503 ************************************************************************************/
504 .wp-chatbot-editor-container {
505 border-radius: 0 0 5px 5px;
506 margin: 0;
507 padding: 4px 15px;
508 position: relative;
509 }
510
511 .wp-chatbot-editor-container input {
512 display: inline-block;
513 border: none;
514 box-shadow: none;
515 height: 40px;
516 font-family: 'Montserrat', sans-serif;
517 width: 80%;
518 background-color: transparent;
519 font-size: 14px;
520 margin: 0;
521 padding: 0;
522 outline: none;
523 }
524
525 .wp-chatbot-editor-container input:focus {
526 outline: none;
527 border: none;
528 box-shadow: none;
529 background: none;
530 }
531
532 .wp-chatbot-editor-container button {
533 display: inline-block;
534 height: 40px;
535 background: transparent url("../images/send-button.png") no-repeat center;
536 color: transparent;
537 width: 20%;
538 cursor: pointer;
539 margin: 0 0 0 -8px;
540 padding: 0;
541 border: none;
542 outline: none;
543 }
544
545 .wp-chatbot-editor-container button:hover {
546 background: transparent url("../images/send-button.png") no-repeat center;
547 color: transparent;
548 }
549
550 .wp-chatbot-editor-container button:focus {
551 outline: none;
552 border: none;
553 box-shadow: none;
554 background: transparent url("../images/send-button.png") no-repeat center;
555 }
556
557 /*****************************************************************************************
558 6. Message Item
559 *********************************************************************************************/
560 /*Load More Product*/
561 #wp-chatbot-loadmore {
562 display: table;
563 margin: 0 auto;
564 padding: 8px 20px !important;
565 }
566
567 .qcld-chatbot-support-or {
568 text-align: center;
569 font-weight: 700;
570 color: #1f8ceb;
571 }
572
573 .qcld-chatbot-user-confirmation {
574 color: #494949;
575 }
576
577 /************Link Item*************/
578 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 {
579 display: block;
580 margin: 8px auto;
581 padding: 12px 30px;
582 }
583
584 .qcld-chatbot-reset-btn {
585 display: inline-block;
586 padding: 5px 12px;
587 min-width: 100px;
588 }
589
590 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 {
591 font-weight: bold;
592 cursor: pointer;
593 text-align: center;
594 border-radius: 50px;
595 transition: 0.2s linear;
596 }
597
598 /******* Message module Featured products *******/
599
600 .wp-chatbot-products-area {
601 clear: both;
602 height: auto;
603 margin-bottom: 15px;
604 }
605
606 .wp-chatbot-products-area ul {
607 margin: 0 !important;
608 padding: 0 !important;
609 font-size: 0;
610 }
611
612 .wp-chatbot-products-area ul li {
613 position: relative;
614 display: inline-block;
615 width: 48%;
616 margin: 2% 0;
617 box-sizing: border-box;
618 padding: 2px;
619 background-color: #eee;
620 border-radius: 5px;
621 }
622
623 .wp-chatbot-products-area ul li:nth-child(2n+2) {
624 margin-left: 4%;
625 }
626
627 .wp-chatbot-products-area ul li img {
628 display: block;
629 box-shadow: none;
630 }
631
632 .wp-chatbot-products-area ul li .wp-chatbot-product-summary {
633 background: rgba(0, 0, 0, 0.51);
634 bottom: 0;
635 left: 0;
636 position: absolute;
637 right: 0;
638 text-align: center;
639 top: 0;
640 z-index: 999;
641 visibility: hidden;
642 font-size: 12px;
643 }
644
645 .wp-chatbot-products-area ul li:hover .wp-chatbot-product-summary {
646 visibility: visible;
647 }
648
649 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table {
650 display: table;
651 height: 100%;
652 width: 100%;
653 }
654
655 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table .wp-chatbot-product-table-cell {
656 display: table-cell;
657 vertical-align: middle;
658 }
659
660 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
661 padding: 0;
662 margin: 0 0 10px 0;
663 font-size: 16px;
664 line-height: 1.2;
665 }
666
667 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
668 color: #ffffff;
669 text-decoration: none;
670 }
671
672 .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 {
673 background-color: transparent !important;
674 color: #ffffff;
675 font-size: 14px;
676 }
677
678 /********* Order List and Cart List *******/
679 .wp-chatbot-orders-container, .wp-chatbot-cart-container {
680 width: 100%;
681 }
682
683 .wp-chatbot-orders-single, .wp-chatbot-orders-header, .wp-chatbot-cart-header, .wp-chatbot-cart-single {
684 display: block;
685 font-size: 0;
686 }
687
688 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div, .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
689 display: inline-block;
690 font-size: 10px;
691 padding: 8px;
692 vertical-align: middle;
693 min-height: 30px;
694 box-sizing: border-box;
695 }
696
697 .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
698 width: 20%;
699 }
700
701 .wp-chatbot-cart-header div:nth-child(1), .wp-chatbot-cart-single div:nth-child(1) {
702 width: 45%;
703 }
704
705 .wp-chatbot-cart-header div:nth-child(3), .wp-chatbot-cart-single div:nth-child(3) {
706 text-align: right;
707 }
708
709 .wp-chatbot-cart-header div:nth-child(4), .wp-chatbot-cart-single div:nth-child(4) {
710 width: 15%;
711 text-align: right;
712 }
713
714 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div {
715 width: 25%;
716 }
717
718 .wp-chatbot-orders-single div:nth-child(1), .wp-chatbot-orders-header div:nth-child(1) {
719 width: 15%;
720 }
721
722 .wp-chatbot-orders-single div:nth-child(3), .wp-chatbot-orders-header div:nth-child(3) {
723 width: 35%;
724 }
725
726 .wp-chatbot-orders-container .order-items p {
727 margin: 2px 0;
728 padding: 0;
729 line-height: 14px;
730 }
731
732 .wp-chatbot-cart-container h3 {
733 font-size: 12px !important;
734 margin: 0 !important;
735 padding: 0 !important;
736 }
737
738 .wp-chatbot-cart-container input[type="number"] {
739 width: 100%;
740 height: 20px;
741 padding: 0;
742 margin: 0;
743 text-align: center;
744 }
745
746 .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 {
747 vertical-align: middle;
748 }
749
750 .wp-chatbot-remove-cart-item {
751 display: inline-block;
752 font-size: 14px;
753 width: 20px;
754 height: 20px;
755 line-height: 20px;
756 text-align: center;
757 cursor: pointer;
758 border-radius: 50%;
759 }
760
761 .wp-chatbot-remove-cart-item:hover {
762 background-color: red;
763 color: #ffffff;
764 }
765
766 .wp-chatbot-cart-title, .wp-chatbot-recent-view-title {
767 margin: 0 0 10px;
768 text-align: center;
769 font-size: 18px;
770 }
771
772 .wp-chatbot-cart-footer {
773 clear: both;
774 font-size: 0;
775 }
776
777 .wp-chatbot-cart-footer div {
778 display: inline-block;
779 font-size: 14px;
780 width: 50%;
781 min-height: 1px;
782 }
783
784 .wp-chatbot-cart-footer div a {
785 display: block;
786 text-align: center;
787 font-size: 14px;
788 padding: 8px 20px;
789 }
790
791 .wp-chatbot-no-cart-item {
792 margin: 10px auto;
793 text-align: center;
794 }
795
796 /***********************************************************************************************
797 7. Product details
798 ************************************************************************************************/
799 /**********Product Details (Left)******/
800 .wp-chatbot-product-container {
801 margin-top: 50px;
802 display: none;
803 z-index: 9999999;
804 }
805
806 .wp-chatbot-product-container.active-chatbot-product-details {
807 display: inline-block;
808 vertical-align: top;
809 }
810
811 .wp-chatbot-product-details {
812 width: 600px;
813 position: relative;
814 margin: 50px auto;
815 font-size: 0;
816 min-height: 300px;
817 padding: 15px;
818 }
819
820 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
821 display: inline-block;
822 vertical-align: top;
823 width: 50%;
824 font-size: 15px;
825 box-sizing: border-box;
826 padding: 15px;
827 }
828
829 #wp-chatbot-product-image {
830 text-align: center;
831 }
832
833 .wp-chatbot-product-image-large:hover a {
834 cursor: zoom-in;
835 }
836
837 .wp-chatbot-product-image-large a:focus {
838 outline: none;
839 }
840
841 .wp-chatbot-product-image-thumbs {
842 overflow-x: auto;
843 text-align: left;
844 padding: 5px 0;
845 }
846
847 .wp-chatbot-product-image-thumbs ul {
848 margin: 0;
849 padding: 0;
850 white-space: nowrap;
851 }
852
853 .wp-chatbot-product-image-thumbs ul li {
854 list-style: none;
855 display: inline-table;
856 max-width: 80px;
857 margin: 0 2px;
858 background-color: #000;
859 }
860
861 .wp-chatbot-product-image-thumbs ul li img {
862 display: block;
863 }
864
865 .wp-chatbot-product-image-thumbs ul li a {
866 display: block;
867 opacity: .5;
868 }
869
870 .wp-chatbot-product-image-thumbs ul li a:focus {
871 outline: none;
872 }
873
874 .wp-chatbot-product-image-thumbs ul li.wp-chatbot-product-active-image-thumbs a {
875 opacity: 1;
876 }
877
878 .wp-chatbot-product-title h2 {
879 margin: 0 0 5px;
880 font-size: 24px;
881 }
882
883 .wp-chatbot-product-price p {
884 margin: 5px 0 10px;
885 padding: 0;
886 }
887
888 .wp-chatbot-product-price ins, .wp-chatbot-product-price del {
889 background: transparent;
890 color: inherit;
891 }
892
893 .wp-chatbot-product-description {
894 max-height: 150px;
895 overflow-x: auto;
896 }
897
898 .wp-chatbot-product-description, .wp-chatbot-product-description p {
899 font-size: 12px;
900 line-height: 1.8;
901 color: #999999;
902 margin: 5px 0;
903 padding: 0;
904 }
905
906 .wp-chatbot-product-quantity, .wp-chatbot-product-variable > div {
907 margin: 10px 0;
908 font-size: 0;
909 }
910
911 .wp-chatbot-product-quantity label, .wp-chatbot-product-variable label {
912 display: inline-block;
913 width: 90px;
914 text-transform: uppercase;
915 font-size: 14px;
916 margin-right: 10px;
917 }
918
919 .wp-chatbot-product-quantity input, .wp-chatbot-product-variable select {
920 display: inline-block;
921 width: 140px;
922 box-sizing: border-box;
923 padding: 5px 10px;
924 height: 35px;
925 border: 1px solid #eeeeee;
926 margin: 0;
927 font-size: 14px !important;
928 }
929
930 .wp-chatbot-product-quantity input:focus, .wp-chatbot-product-variable select:focus {
931 outline: none;
932 }
933
934 .wp-chatbot-product-cart-button input[type="button"] {
935 display: table;
936 padding: 8px 20px;
937 text-transform: uppercase;
938 font-size: 14px;
939 margin: 20px 0 0;
940 }
941
942 .wp-chatbot-product-cart-button input[type="button"]:focus {
943 box-shadow: none !important;
944 }
945
946 a.wp-chatbot-product-close {
947 position: absolute;
948 top: 0;
949 right: 0;
950 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
951 width: 30px;
952 height: 30px;
953 cursor: pointer;
954 }
955
956 .wp-chatbot-board-container {
957 display: none;
958 }
959
960 @keyframes chatbotProductAnimation {
961 0% {
962 transform: translate(200px);
963 }
964 95% {
965 transform: translate(-10px);
966 }
967 100% {
968 transform: translate(0);
969 }
970 }
971
972 .active-chatbot-product-details {
973 display: block;
974 position: absolute;
975 right: 100%;
976 animation: 0.5s chatbotProductAnimation;
977 z-index: -1;
978 }
979
980 /********Popup Product Details for ShortCode***********/
981 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
982 position: fixed;
983 animation: none;
984 right: 0;
985 left: 0;
986 top: 0;
987 border: 0;
988 width: 100%;
989 height: 100%;
990 background-color: rgba(1, 1, 1, 0.79);
991 z-index: 99999999;
992 margin: 0;
993 }
994
995 /****************************************************************************************************
996 8 App ShortCode
997 ****************************************************************************************************/
998 #wp-chatbot-chat-app-shortcode-container {
999 position: fixed;
1000 z-index: 99999999;
1001 top: 0;
1002 bottom: 0;
1003 left: 0;
1004 right: 0;
1005 background: #FFF;
1006 }
1007
1008 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container {
1009 width: 100% !important;
1010 }
1011
1012 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container:after {
1013 display: none;
1014 }
1015
1016 #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 {
1017 border-radius: 0;
1018 }
1019
1020 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header {
1021 display: none;
1022 }
1023
1024 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product img {
1025 margin: 0 auto;
1026 }
1027
1028 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-container {
1029 margin-top: 0;
1030 }
1031
1032 #wp-chatbot-chat-app-shortcode-container .active-chatbot-product-details {
1033 left: 0;
1034 right: 0;
1035 top: 0;
1036 bottom: 0;
1037 z-index: 999999999;
1038 background: rgba(0, 0, 0, 0.80);
1039 margin: 0;
1040 }
1041
1042 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-details {
1043 margin: 0 auto;
1044 }
1045
1046 #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 {
1047 position: absolute;
1048 top: 50%;
1049 left: 50%;
1050 margin-left: -45px;
1051 }
1052
1053 .wpchatbot-app-order-confirmation .wpchatbot-wpcommerce-order, #wp-chatbot-app-checkout-container {
1054 font-size: 14px;
1055 box-sizing: border-box;;
1056 padding: 15px;
1057 position: absolute;
1058 left: 0;
1059 right: 0;
1060 top: 0;
1061 /*bottom: 0;*/
1062 z-index: 999999;
1063 background: #ffffff;
1064 }
1065
1066 .wpchatbot-wpcommerce-order .wpcommerce-notice {
1067 padding: 10px;
1068 border: 1px solid #cccccc;
1069 color: #FFF;
1070 }
1071
1072 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-received {
1073 background: #58a093;
1074 }
1075
1076 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-failed {
1077 background: #db4771;
1078 }
1079
1080 .wpchatbot-wpcommerce-order .wpcommerce-order-details, .wpchatbot-wpcommerce-order .wpcommerce-customer-details {
1081 padding: 20px 0;
1082 }
1083
1084 .wpchatbot-app-order-confirmation #wp-chatbot-chat-container, .wpchatbot-app-checkout #wp-chatbot-chat-container {
1085 display: none;
1086 }
1087
1088 .wpchatbot-wpcommerce-order table {
1089 width: 100%;
1090 }
1091
1092 .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 {
1093 text-align: left;
1094 }
1095
1096 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details {
1097 margin: 0;
1098 padding: 0;
1099 }
1100
1101 .wpchatbot-app-home-back {
1102 display: table;
1103 padding: 8px 20px;
1104 background: #9a3a87;
1105 color: white;
1106 font-size: 14px;
1107 text-transform: uppercase;
1108 border: none;
1109 }
1110
1111 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li {
1112 list-style: none;
1113 padding: 5px 0;
1114 border-bottom: 1px solid #eaeaea;
1115 }
1116
1117 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li:last-child {
1118 border-bottom: none;
1119 }
1120
1121 #wp-chatbot-cart-short-code .coupon {
1122 width: 100%;
1123 max-width: 400px;
1124 text-align: left;
1125 }
1126
1127 #wp-chatbot-cart-short-code .coupon input[type="text"], #wp-chatbot-cart-short-code .coupon input[type="submit"] {
1128 width: 45%;
1129 height: 50px;
1130 box-sizing: border-box;
1131 padding: 5px;
1132 margin-right: 4%;
1133 vertical-align: middle;
1134 font-size: 16px;
1135 }
1136
1137 #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 {
1138 width: 100%;
1139 max-width: 100% !important;
1140 margin: 0 !important;
1141 }
1142
1143 #wp-chatbot-cart-short-code .cross-sells {
1144 display: none;
1145 }
1146
1147 #wp-chatbot-cart-short-code .wc-proceed-to-checkout {
1148 margin: 15px 0;
1149 }
1150
1151 /****************************************************************************************************
1152 9 ShortCode OverRight
1153 ****************************************************************************************************/
1154 .wp-chatbot-shortcode-template-container .wp-chatbot-content {
1155 height: 452px;
1156 }
1157
1158 .wp-chatbot-shortcode-template-container {
1159 }
1160
1161 /************Link Item*************/
1162 .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 {
1163 color: #000000;
1164 background-size: 200% auto;
1165 background-color: #ffffff7d;
1166 border: 1px solid #ffffff;
1167 display: inline-block;
1168 margin: 3px auto;
1169 padding: 6px 11px;
1170 margin-right: 4px;
1171 }
1172
1173 .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 {
1174 background-position: right center;
1175 box-shadow: none;
1176 background-color: #a1c4fd;
1177 }
1178
1179 /****************************************************************************************************
1180 10. Notification
1181 ****************************************************************************************************/
1182 .wp-chatbot-notification-container {
1183 position: relative;
1184 padding: 35px 15px 10px;
1185 box-shadow: 0 0 5px #d5d5d5;
1186 transition: 0.8s;
1187 background-color: #fff;
1188 font-size: 14px;
1189 line-height: 1.5;
1190 transform: translateX(500px);
1191 opacity: 0.1;
1192 border-radius: 5px;
1193 width: 320px;
1194 }
1195
1196 .wp-chatbot-notification-container.wp-chatbot-notification-container-sliding {
1197 opacity: 0.9;
1198 transform: translateX(0);
1199 }
1200
1201 .wp-chatbot-notification-container-disable {
1202 display: none;
1203 }
1204
1205 .wp-chatbot-notification-agent-profile {
1206 position: absolute;
1207 top: -40px;
1208 left: 15px;
1209 right: 15px;
1210 }
1211
1212 .wp-chatbot-notification-widget-avatar, .wp-chatbot-notification-welcome {
1213 display: inline-block;
1214 }
1215
1216 .wp-chatbot-notification-widget-avatar {
1217 width: 60px;
1218 height: 60px;
1219 background-color: #fff;
1220 border-radius: 50%;
1221 overflow: hidden;
1222 box-shadow: 0 5px 5px #d5d5d5;
1223 }
1224
1225 .wp-chatbot-notification-welcome {
1226 font-size: 12px;
1227 }
1228
1229 .wp-chatbot-notification-message {
1230 transition: opacity 0.5s;
1231 }
1232
1233 #wp-chatbot-desktop-close {
1234 display: block;
1235 position: absolute;
1236 right: 3px;
1237 padding: 5px;
1238 font-size: 14px;
1239 font-family: "Arial";
1240 line-height: 20px;
1241 top: -20px;
1242 width: 30px;
1243 height: 30px;
1244 background-color: #7d8999;
1245 border-radius: 50%;
1246 color: #ffffff;
1247 cursor: pointer;
1248 text-align: center;
1249 box-sizing: border-box;
1250 transition: 0.2s;
1251 transform: translateY(20px);
1252 }
1253
1254 span.chatbot_intent_reload {
1255 position: absolute;
1256 left: 80%;
1257 -webkit-transform: translate(-80%, -50%);
1258 transform: translate(-80%, -50%);
1259 top: 50%;
1260 color: #9a9a9a;
1261 cursor: pointer;
1262 line-height: normal;
1263 }
1264
1265 .wp-chatbot-notification-close {
1266 display: block;
1267 position: absolute;
1268 right: 0;
1269 padding: 5px;
1270 font-size: 14px;
1271 font-family: "Arial";
1272 line-height: 20px;
1273 top: -35px;
1274 width: 30px;
1275 height: 30px;
1276 background-color: #7d8999;
1277 border-radius: 50%;
1278 color: #ffffff;
1279 cursor: pointer;
1280 text-align: center;
1281 box-sizing: border-box;
1282 transition: 0.2s;
1283 visibility: hidden;
1284 transform: translateY(20px);
1285 }
1286
1287 .wp-chatbot-notification-close:hover {
1288 background-color: #5f6a76;
1289 }
1290
1291 .wp-chatbot-notification-container:hover .wp-chatbot-notification-close {
1292 visibility: visible;
1293 transform: translateY(0px);
1294 }
1295
1296 .wp-chatbot-ball-cart-items {
1297 bottom: -8px;
1298 left: -11px;
1299 position: absolute;
1300 width: 22px;
1301 height: 22px;
1302 line-height: 22px;
1303 font-size: 14px;
1304 background-color: #43c0ed;
1305 color: #ffffff;
1306 display: block;
1307 border-radius: 50%;
1308 text-align: center;
1309 }
1310
1311 .wp-chatbot-rtl ul li.wp-chatbot-msg:after, .wp-chatbot-rtl ul li.wp-chat-user-msg:after {
1312 content: "";
1313 display: table;
1314 clear: both;
1315 width: 100%;
1316 height: 3px;
1317 }
1318
1319 .wp-chatbot-rtl .wp-chatbot-notification-close {
1320 right: auto;
1321 left: 0;
1322 }
1323
1324 #wp-chatbot-product-title h2 a {
1325 color: #2ea3f2;
1326 }
1327
1328 /**
1329 #Integration
1330 */
1331
1332 .wp-chatbot-integration-button-container {
1333 position: absolute;
1334 left: -35px;
1335 top: 100px;
1336 z-index: -1;
1337 }
1338
1339 .wp-chatbot-integration-button-container span {
1340 cursor: pointer;
1341 width: 40px;
1342 height: 40px;
1343 background-image: url("../images/tab-btn-icon.png");
1344 background-repeat: no-repeat;
1345 border-radius: 50%;
1346 display: block;
1347 }
1348
1349 .wp-chatbot-messages-container .wp-chatbot-msg-flat .facebook-messenger-chat {
1350 cursor: pointer;
1351 width: 40px;
1352 height: 40px;
1353 background-image: url(../images/tab-btn-icon.png);
1354 background-repeat: no-repeat;
1355 background-size: auto;
1356 border-radius: 50%;
1357 display: table;
1358 margin: 0 auto;
1359 background-position: 0 -80px;
1360 border: none !important;
1361 box-shadow: none !important;
1362 }
1363
1364 .facebook-messenger {
1365 background-position: 0 -80px;
1366 }
1367
1368 .intergration-weblink {
1369 background-position: -120px -80px;
1370 }
1371
1372 .intergration-phone {
1373 background-position: -81px -80px;
1374 }
1375
1376 .inetegration-skype-btn {
1377 background-position: -162px -80px;
1378 }
1379
1380 .intergration-whats {
1381 background-position: -40px -80px;
1382 }
1383
1384 .intergration-viber {
1385 background-position: 0px -120px;
1386 }
1387
1388 .fb_dialog {
1389 /*right: 85px !important;
1390 bottom: 47px !important;*/
1391 visibility: hidden;
1392 width: 35px !important;
1393 height: 35px !important;
1394 background: #017cff url('../images/tab-btn-icon.png') no-repeat -43px -122px !important;
1395 }
1396
1397 .fb_dialog > .fb_dialog_content {
1398 opacity: 0.01;
1399 }
1400
1401 /****************************************************************************************************
1402 11 Responsive
1403 ****************************************************************************************************/
1404 @media screen and (max-width: 1200px) {
1405 /******************Product Details Popup*****************/
1406 #wp-chatbot-ball-container .wp-chatbot-product-container {
1407 position: absolute;
1408 animation: none;
1409 right: 0;
1410 left: 0;
1411 top: 0;
1412 bottom: 0;
1413 width: 100%;
1414 height: 100%;
1415 background-color: rgba(1, 1, 1, 0.79);
1416 z-index: 9999;
1417 margin: 0;
1418 }
1419
1420 /******product details layout******/
1421 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
1422 overflow-y: scroll;
1423 }
1424
1425 .wp-chatbot-products-area .slimScrollDiv, .wp-chatbot-products-area .wp-chatbot-products {
1426 height: auto !important;
1427 }
1428
1429 #wp-chatbot-ball-container .wp-chatbot-product-container {
1430 overflow-x: auto;
1431 }
1432
1433 .wp-chatbot-product-details {
1434 width: 100%;
1435 box-sizing: border-box;
1436 }
1437
1438 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
1439 width: 100%;
1440 box-sizing: border-box;
1441 }
1442
1443 }
1444
1445
1446 @media screen and (max-width: 767px) {
1447 .wp-chatbot-header {
1448 padding-left: 50px;
1449 padding-right: 50px;
1450 }
1451
1452 .wp-chatbot-board-container{
1453 width: 310px;
1454 }
1455 .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1456 width: 100%;
1457 }
1458
1459
1460
1461 #wp-chatbot-mobile-close {
1462 position: absolute;
1463 right: 12px;
1464 top: 9px;
1465 display: table;
1466 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
1467 width: 30px;
1468 height: 30px;
1469 cursor: pointer;
1470 color: transparent;
1471 }
1472
1473
1474
1475 .wp-chatbot-notification-close {
1476 visibility: visible;
1477 }
1478
1479 .chatbot-sidebar {
1480 display: none !important;
1481 }
1482 }
1483
1484 @media screen and (max-width: 500px) {
1485 .wp-chatbot-integration-button-container {
1486 position: absolute;
1487 left: 15px;
1488 top: 5px;
1489 right: 43px;
1490 text-align: center;
1491 }
1492
1493 .wp-chatbot-integration-button-container span {
1494 display: inline-block !important;
1495 }
1496
1497 .wp-chatbot-header {
1498 padding-top: 50px;
1499 }
1500
1501 #wp-chatbot-chat-container {
1502 right: 30px;
1503 bottom: 30px;
1504 }
1505
1506 .fb_dialog {
1507 z-index: 21999 !important;
1508 right: 46px !important;
1509 bottom: 3px !important;
1510
1511 }
1512 }
1513
1514 @media screen and (max-width: 400px) {
1515 .wp-chatbot-notification-container {
1516 width: 250px;
1517 padding-top: 55px;
1518 }
1519 }
1520 .wpb-search-result{}
1521 .wpb-search-result p{}
1522 .wpb-search-result a{display: block;
1523 background: #fff;
1524 margin-bottom: 7px;
1525 padding: 5px;}
1526