PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services / 3.4.2
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services v3.4.2
8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 8.5.0 8.4.9 All 531 releases
chatbot / css / common-style.css

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

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