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

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

1,714 lines 43.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 1. Global Common and Reset CSS
3 2. Ball Selector
4 3. Message container
5 4. Tab
6 5. Message Editor
7 6. Message Item
8 - Link Item
9 - Message module Featured products
10 - Order List
11 - Cart List
12 7. Product Details
13 - Popup Product Details for ShortCode
14 8. Short Code Overnight
15 9. App ShortCode
16 10. Notification
17 11. Responsive
18 */
19
20 /***********************************************************************
21 1. Global Common and Reset CSS
22 ************************************************************************/
23 @font-face {
24 font-family: 'quicksandregular';
25 src: url('../fonts/quicksand-regular-webfont.woff2') format('woff2'), url('../fonts/quicksand-regular-webfont.woff') format('woff');
26 font-weight: normal;
27 font-style: normal;
28 }
29
30 #wp-chatbot-shortcode-template-container img, #wp-chatbot-chat-container img {
31 max-width: 100%;
32 height: auto;
33 box-shadow: none !important;
34 }
35
36 .clear {
37 width: 100%;
38 clear: both;
39 float: none;
40 }
41
42 .wp-chatbot-chat-container, .wp-chatbot-shortcode-template-container {
43 font-size: 14px;
44 line-height: 1.8;
45 }
46
47 .wp-chatbot-chat-container a, .wp-chatbot-shortcode-template-container a {
48 text-decoration: none;
49 border: none;
50 outline: none;
51 color: inherit;
52 background: none;
53 box-shadow: none;
54 }
55
56 .wp-chatbot-chat-container a:active, .wp-chatbot-chat-container a:hover, .wp-chatbot-shortcode-template-container a:active, .wp-chatbot-shortcode-template-container a:hover {
57 outline: 0;
58 }
59
60 .wp-chatbot-chat-container p, .wp-chatbot-shortcode-template-container p {
61 background: none;
62 font-weight: normal;
63 line-height: 1.8;
64 letter-spacing: 0;
65 margin: 10px 0;
66 padding: 0;
67 }
68
69 .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 {
70 color: inherit;
71 background: none;
72 font-weight: normal;
73 line-height: 1.1;
74 letter-spacing: 0;
75 padding: 0;
76 }
77
78 .wp-chatbot-chat-container h1, .wp-chatbot-chat-container h2, .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h1, .wp-chatbot-shortcode-template-container h2, .wp-chatbot-shortcode-template-container h3 {
79 margin-top: 20px;
80 margin-bottom: 10px;
81 }
82
83 .wp-chatbot-chat-container h4, .wp-chatbot-chat-container h5, .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h4, .wp-chatbot-shortcode-template-container h5, .wp-chatbot-shortcode-template-container h6 {
84 margin-top: 10px;
85 margin-bottom: 10px;
86 }
87
88 .wp-chatbot-chat-container h1, .wp-chatbot-shortcode-template-container h1 {
89 font-size: 42px;
90 }
91
92 .wp-chatbot-chat-container h2, .wp-chatbot-shortcode-template-container h2 {
93 font-size: 28px;
94 }
95
96 .wp-chatbot-chat-container h3, .wp-chatbot-shortcode-template-container h3 {
97 font-size: 24px;
98 }
99
100 .wp-chatbot-chat-container h4, .wp-chatbot-shortcode-template-container h4 {
101 font-size: 18px;
102 }
103
104 .wp-chatbot-chat-container h5, .wp-chatbot-shortcode-template-container h5 {
105 font-size: 14px;
106 }
107
108 .wp-chatbot-chat-container h6, .wp-chatbot-shortcode-template-container h6 {
109 font-size: 12px;
110 }
111
112 .wp-chatbot-chat-container button, .wp-chatbot-chat-container input, .wp-chatbot-chat-container optgroup, .wp-chatbot-chat-container select, .wp-chatbot-chat-container textarea, .wp-chatbot-shortcode-template-container button, .wp-chatbot-shortcode-template-container input, .wp-chatbot-shortcode-template-container optgroup, .wp-chatbot-shortcode-template-container select, .wp-chatbot-shortcode-template-container textarea {
113 color: inherit;
114 margin: 0;
115 box-shadow: none;
116 border: none;
117 background: inherit;
118 }
119
120 .wp-chatbot-chat-container button:focus, .wp-chatbot-chat-container input:focus, .wp-chatbot-chat-container optgroup:focus, .wp-chatbot-chat-container select:focus, .wp-chatbot-chat-container textarea:focus, .wp-chatbot-shortcode-template-container button:focus, .wp-chatbot-shortcode-template-container input:focus, .wp-chatbot-shortcode-template-container optgroup:focus, .wp-chatbot-shortcode-template-container select:focus, .wp-chatbot-shortcode-template-container textarea:focus {
121 outline: none;
122 }
123
124 /**************************************************************************
125 2. Ball Selector
126 **************************************************************************/
127
128 #wp-chatbot-chat-container {
129 position: fixed;
130 z-index: 999998;
131 }
132
133 .wp-chatbot-ball {
134 float: right;
135 position: relative;
136 cursor: pointer;
137 background: #ffffff;
138 box-shadow: 0 0 15px #ccc;
139 width: 60px;
140 height: 60px;
141 border-radius: 50%;
142 margin-top: 10px;
143 box-shadow: #767580 0px 4px 20px;
144 }
145
146 #wp-chatbot-ball .wp-chatbot-ball img {
147 width: 56px !important;
148 height: 56px !important;
149 display: block;
150 border-radius: 50%;
151 margin: 2px ;
152 }
153
154 .wp-chatbot-ball-animator {
155 position: relative;
156 border-radius: 50%;
157 }
158
159 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
160 opacity: 1;
161 width: 100%;
162 height: 100%;
163 position: absolute;
164 animation: spin 2s linear infinite;
165 border: 3px solid transparent;
166 border-top-color: #9370DB;
167 }
168
169 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
170 content: "";
171 position: absolute;
172 top: -9px;
173 left: -9px;
174 right: -9px;
175 bottom: -9px;
176 border-radius: 50%;
177 border: 3px solid transparent;
178 border-top-color: #BA55D3;
179 animation: spin 3s linear infinite;
180 }
181
182 .wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
183 content: "";
184 position: absolute;
185 top: -15px;
186 left: -15px;
187 right: -15px;
188 bottom: -15px;
189 border-radius: 50%;
190 border: 3px solid transparent;
191 border-top-color: #FF00FF;
192 animation: spin 1.5s linear infinite;
193 }
194 .wp-chatbot-footer div#wp-chatbot-editor-container {
195 display: flex;
196 }
197 @keyframes spin {
198 0% {
199 -webkit-transform: rotate(0deg);
200 -ms-transform: rotate(0deg);
201 transform: rotate(0deg);
202 }
203 100% {
204 -webkit-transform: rotate(360deg);
205 -ms-transform: rotate(360deg);
206 transform: rotate(360deg);
207 }
208 }
209
210 @keyframes spinHide {
211 0% {
212 opacity: 0;
213 }
214 100% {
215 opacity: 0;
216 }
217 }
218
219 /*******************************************************************************
220 3. Message container
221 *********************************************************************************/
222 .wp-chatbot-board-container {
223 display: none;
224 font-family: "quicksandregular", "Helvetica Neue", Helvetica, Aria;
225 height: auto;
226 width: 370px;
227 position: relative;
228 box-sizing: border-box; /*margin-bottom: 10px;*/
229 }
230
231 .wp-chatbot-board-container.active-chat-board {
232 display: inline-block;
233 vertical-align: top;
234 }
235
236 .wp-chatbot-header {
237 border-radius: 5px 5px 0 0;
238 margin: 0;
239 padding: 15px 15px;
240 box-sizing: border-box;
241 text-align: center;
242 position: relative; /*height: 63px;*/
243 }
244
245 .wp-chatbot-header h3 {
246 margin: 0 !important;
247 padding: 0 !important;
248 }
249
250 .wp-chatbot-content {
251 height: calc(100vh - 277px);
252 position: relative;
253 padding: 15px;
254 box-sizing: border-box;
255 max-height: 564px;
256 }
257
258 .wp-chatbot-product-reload.wp-chatbot-product-loading {
259 display: block;
260 position: absolute;
261 background: rgba(255, 255, 255, 0.50);
262 padding: 3px;
263 border-radius: 5px;
264 top: 0;
265 bottom: 0;
266 left: 0;
267 right: 0;
268 z-index: 999;
269 }
270
271 .wp-chatbot-product-loading img {
272 display: table;
273 left: 50%;
274 top: 50%;
275 position: absolute;
276 margin: -10px -45px;
277 }
278
279 ul.wp-chatbot-messages-container {
280 padding: 0 !important;
281 margin: 0 !important;
282 overflow: hidden;
283 }
284
285 @keyframes messageAnim {
286 0% {
287 transform: translateY(80px) scaleX(0.5);
288 opacity: 0;
289 }
290 100% {
291 transform: translateY(0) scaleX(1);
292 opacity: 1;
293 }
294 }
295
296 ul.wp-chatbot-messages-container > li {
297 position: relative;
298 box-sizing: border-box;
299 word-wrap: break-word;
300 list-style: none;
301 display: block;
302 clear: both;
303 line-height: 150%;
304 min-height: 50px;
305 margin: 0 0 10px 0;
306 animation: messageAnim 0.5s;
307 opacity: 1;
308 }
309
310 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph h3 {
311 padding: 0 0 5px !important;
312 margin: 0 !important;
313 font-weight: bold;
314 font-size: 16px;
315 }
316
317 ul.wp-chatbot-messages-container > li.wp-chatbot-msg::before {
318 left: 19px;
319 }
320
321 ul.wp-chatbot-messages-container > li.wp-chat-user-msg::before {
322 right: 19px;
323 }
324
325 ul.wp-chatbot-messages-container > li:before {
326 content: "";
327 display: block;
328 width: 5px;
329 height: 5px;
330 background: red;
331 top: 19px;
332 z-index: 999;
333 position: absolute;
334 border-radius: 50%;
335 box-shadow: -38px 0 #f35b5c, -28px 8px #88bfc9, -14px 35px #f35b5c, -4px 28px #88bfc9, 30px 32px #f35b5c, 28px 22px #88bfc9, 43px 0px #f35b5c, 35px -5px #88bfc9, 20px -30px #f35b5c, 10px -22px #88bfc9, -18px -30px #f35b5c, -14px -22px #88bfc9;
336 animation: 0.9s bang ease-out backwards, 0.9s linear dothide;
337 opacity: 0;
338 /*animation-delay: 0s, 0.2s;*/
339 animation-duration: 0.5s, 0.5s;
340 }
341
342 @keyframes dothide {
343 0% {
344 opacity: 1;
345 }
346 90% {
347 opacity: 1;
348 }
349 100% {
350 opacity: 1;
351 }
352 }
353
354 @keyframes bang {
355 from {
356 box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white;
357 }
358 }
359
360 ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-avatar, ul.wp-chatbot-messages-container > li:first-child .wp-chatbot-agent {
361 display: none;
362 overflow: hidden;
363 }
364
365 ul.wp-chatbot-messages-container > li.wp-chat-user-msg:after, ul.wp-chatbot-messages-container > li .wp-chatbot-products:after {
366 clear: both;
367 display: block;
368 content: "";
369 height: 1px;
370 }
371
372 ul.wp-chatbot-messages-container > li .wp-chatbot-agent, .wp-chatbot-agent-profile .wp-chatbot-widget-agent {
373 display: none;
374 }
375
376 #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
377 width: 40px !important;
378 height: 40px !important;
379 }
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 .wp-chatbot-editor-container button {
537 display: inline-block;
538 height: 40px;
539 background: transparent url("../images/send-button.png") no-repeat right !important;
540 color: transparent !important;
541 width: 20%;
542 cursor: pointer;
543 margin: 0 0 0 -8px;
544 padding: 0;
545 border: none;
546 outline: none;
547 }
548
549 .wp-chatbot-editor-container button:hover {
550 background: transparent url("../images/send-button.png") no-repeat center;
551 color: transparent;
552 }
553
554 .wp-chatbot-editor-container button:focus {
555 outline: none;
556 border: none;
557 box-shadow: none;
558 background: transparent url("../images/send-button.png") no-repeat center;
559 }
560
561 /*****************************************************************************************
562 6. Message Item
563 *********************************************************************************************/
564 /*Load More Product*/
565 #wp-chatbot-loadmore {
566 display: table;
567 margin: 0 auto;
568 padding: 8px 20px !important;
569 }
570
571 .qcld-chatbot-support-or {
572 text-align: center;
573 font-weight: 700;
574 color: #1f8ceb;
575 }
576
577 .qcld-chatbot-user-confirmation {
578 color: #494949;
579 }
580
581 /************Link Item*************/
582 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 {
583 display: block;
584 margin: 8px auto;
585 padding: 12px 30px;
586 }
587
588 .qcld-chatbot-reset-btn {
589 display: inline-block;
590 padding: 5px 12px;
591 min-width: 100px;
592 }
593
594 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 {
595 font-weight: bold;
596 cursor: pointer;
597 text-align: center;
598 border-radius: 50px;
599 transition: 0.2s linear;
600 }
601
602 /******* Message module Featured products *******/
603
604 .wp-chatbot-products-area {
605 clear: both;
606 height: auto;
607 margin-bottom: 15px;
608 }
609
610 .wp-chatbot-products-area ul {
611 margin: 0 !important;
612 padding: 0 !important;
613 font-size: 0;
614 }
615
616 .wp-chatbot-products-area ul li {
617 position: relative;
618 display: inline-block;
619 width: 48%;
620 margin: 2% 0;
621 box-sizing: border-box;
622 padding: 2px;
623 background-color: #eee;
624 border-radius: 5px;
625 }
626
627 .wp-chatbot-products-area ul li:nth-child(2n+2) {
628 margin-left: 4%;
629 }
630
631 .wp-chatbot-products-area ul li img {
632 display: block;
633 box-shadow: none;
634 }
635
636 .wp-chatbot-products-area ul li .wp-chatbot-product-summary {
637 background: rgba(0, 0, 0, 0.51);
638 bottom: 0;
639 left: 0;
640 position: absolute;
641 right: 0;
642 text-align: center;
643 top: 0;
644 z-index: 999;
645 visibility: hidden;
646 font-size: 12px;
647 }
648
649 .wp-chatbot-products-area ul li:hover .wp-chatbot-product-summary {
650 visibility: visible;
651 }
652
653 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table {
654 display: table;
655 height: 100%;
656 width: 100%;
657 }
658
659 .wp-chatbot-products-area ul li .wp-chatbot-product-summary .wp-chatbot-product-table .wp-chatbot-product-table-cell {
660 display: table-cell;
661 vertical-align: middle;
662 }
663
664 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
665 padding: 0;
666 margin: 0 0 10px 0;
667 font-size: 16px;
668 line-height: 1.2;
669 }
670
671 .wp-chatbot-products-area ul li .wp-chatbot-product-summary h3.wp-chatbot-product-title {
672 color: #ffffff;
673 text-decoration: none;
674 }
675
676 .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 {
677 background-color: transparent !important;
678 color: #ffffff;
679 font-size: 14px;
680 }
681
682 /********* Order List and Cart List *******/
683 .wp-chatbot-orders-container, .wp-chatbot-cart-container {
684 width: 100%;
685 }
686
687 .wp-chatbot-orders-single, .wp-chatbot-orders-header, .wp-chatbot-cart-header, .wp-chatbot-cart-single {
688 display: block;
689 font-size: 0;
690 }
691
692 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div, .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
693 display: inline-block;
694 font-size: 10px;
695 padding: 8px;
696 vertical-align: middle;
697 min-height: 30px;
698 box-sizing: border-box;
699 }
700
701 .wp-chatbot-cart-header div, .wp-chatbot-cart-single div {
702 width: 20%;
703 }
704
705 .wp-chatbot-cart-header div:nth-child(1), .wp-chatbot-cart-single div:nth-child(1) {
706 width: 45%;
707 }
708
709 .wp-chatbot-cart-header div:nth-child(3), .wp-chatbot-cart-single div:nth-child(3) {
710 text-align: right;
711 }
712
713 .wp-chatbot-cart-header div:nth-child(4), .wp-chatbot-cart-single div:nth-child(4) {
714 width: 15%;
715 text-align: right;
716 }
717
718 .wp-chatbot-orders-single div, .wp-chatbot-orders-header div {
719 width: 25%;
720 }
721
722 .wp-chatbot-orders-single div:nth-child(1), .wp-chatbot-orders-header div:nth-child(1) {
723 width: 15%;
724 }
725
726 .wp-chatbot-orders-single div:nth-child(3), .wp-chatbot-orders-header div:nth-child(3) {
727 width: 35%;
728 }
729
730 .wp-chatbot-orders-container .order-items p {
731 margin: 2px 0;
732 padding: 0;
733 line-height: 14px;
734 }
735
736 .wp-chatbot-cart-container h3 {
737 font-size: 12px !important;
738 margin: 0 !important;
739 padding: 0 !important;
740 }
741
742 .wp-chatbot-cart-container input[type="number"] {
743 width: 100%;
744 height: 20px;
745 padding: 0;
746 margin: 0;
747 text-align: center;
748 }
749
750 .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 {
751 vertical-align: middle;
752 }
753
754 .wp-chatbot-remove-cart-item {
755 display: inline-block;
756 font-size: 14px;
757 width: 20px;
758 height: 20px;
759 line-height: 20px;
760 text-align: center;
761 cursor: pointer;
762 border-radius: 50%;
763 }
764
765 .wp-chatbot-remove-cart-item:hover {
766 background-color: red;
767 color: #ffffff;
768 }
769
770 .wp-chatbot-cart-title, .wp-chatbot-recent-view-title {
771 margin: 0 0 10px;
772 text-align: center;
773 font-size: 18px;
774 }
775
776 .wp-chatbot-cart-footer {
777 clear: both;
778 font-size: 0;
779 }
780
781 .wp-chatbot-cart-footer div {
782 display: inline-block;
783 font-size: 14px;
784 width: 50%;
785 min-height: 1px;
786 }
787
788 .wp-chatbot-cart-footer div a {
789 display: block;
790 text-align: center;
791 font-size: 14px;
792 padding: 8px 20px;
793 }
794
795 .wp-chatbot-no-cart-item {
796 margin: 10px auto;
797 text-align: center;
798 }
799
800 /***********************************************************************************************
801 7. Product details
802 ************************************************************************************************/
803 /**********Product Details (Left)******/
804 .wp-chatbot-product-container {
805 margin-top: 50px;
806 display: none;
807 z-index: 9999999;
808 }
809
810 .wp-chatbot-product-container.active-chatbot-product-details {
811 display: inline-block;
812 vertical-align: top;
813 }
814
815 .wp-chatbot-product-details {
816 width: 600px;
817 position: relative;
818 margin: 50px auto;
819 font-size: 0;
820 min-height: 300px;
821 padding: 15px;
822 }
823
824 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
825 display: inline-block;
826 vertical-align: top;
827 width: 50%;
828 font-size: 15px;
829 box-sizing: border-box;
830 padding: 15px;
831 }
832
833 #wp-chatbot-product-image {
834 text-align: center;
835 }
836
837 .wp-chatbot-product-image-large:hover a {
838 cursor: zoom-in;
839 }
840
841 .wp-chatbot-product-image-large a:focus {
842 outline: none;
843 }
844
845 .wp-chatbot-product-image-thumbs {
846 overflow-x: auto;
847 text-align: left;
848 padding: 5px 0;
849 }
850
851 .wp-chatbot-product-image-thumbs ul {
852 margin: 0;
853 padding: 0;
854 white-space: nowrap;
855 }
856
857 .wp-chatbot-product-image-thumbs ul li {
858 list-style: none;
859 display: inline-table;
860 max-width: 80px;
861 margin: 0 2px;
862 background-color: #000;
863 }
864
865 .wp-chatbot-product-image-thumbs ul li img {
866 display: block;
867 }
868
869 .wp-chatbot-product-image-thumbs ul li a {
870 display: block;
871 opacity: .5;
872 }
873
874 .wp-chatbot-product-image-thumbs ul li a:focus {
875 outline: none;
876 }
877
878 .wp-chatbot-product-image-thumbs ul li.wp-chatbot-product-active-image-thumbs a {
879 opacity: 1;
880 }
881
882 .wp-chatbot-product-title h2 {
883 margin: 0 0 5px;
884 font-size: 24px;
885 }
886
887 .wp-chatbot-product-price p {
888 margin: 5px 0 10px;
889 padding: 0;
890 }
891
892 .wp-chatbot-product-price ins, .wp-chatbot-product-price del {
893 background: transparent;
894 color: inherit;
895 }
896
897 .wp-chatbot-product-description {
898 max-height: 150px;
899 overflow-x: auto;
900 }
901
902 .wp-chatbot-product-description, .wp-chatbot-product-description p {
903 font-size: 12px;
904 line-height: 1.8;
905 color: #999999;
906 margin: 5px 0;
907 padding: 0;
908 }
909
910 .wp-chatbot-product-quantity, .wp-chatbot-product-variable > div {
911 margin: 10px 0;
912 font-size: 0;
913 }
914
915 .wp-chatbot-product-quantity label, .wp-chatbot-product-variable label {
916 display: inline-block;
917 width: 90px;
918 text-transform: uppercase;
919 font-size: 14px;
920 margin-right: 10px;
921 }
922
923 .wp-chatbot-product-quantity input, .wp-chatbot-product-variable select {
924 display: inline-block;
925 width: 140px;
926 box-sizing: border-box;
927 padding: 5px 10px;
928 height: 35px;
929 border: 1px solid #eeeeee;
930 margin: 0;
931 font-size: 14px !important;
932 }
933
934 .wp-chatbot-product-quantity input:focus, .wp-chatbot-product-variable select:focus {
935 outline: none;
936 }
937
938 .wp-chatbot-product-cart-button input[type="button"] {
939 display: table;
940 padding: 8px 20px;
941 text-transform: uppercase;
942 font-size: 14px;
943 margin: 20px 0 0;
944 }
945
946 .wp-chatbot-product-cart-button input[type="button"]:focus {
947 box-shadow: none !important;
948 }
949
950 a.wp-chatbot-product-close {
951 position: absolute;
952 top: 0;
953 right: 0;
954 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
955 width: 30px;
956 height: 30px;
957 cursor: pointer;
958 }
959
960 .wp-chatbot-board-container {
961 display: none;
962 }
963
964 @keyframes chatbotProductAnimation {
965 0% {
966 transform: translate(200px);
967 }
968 95% {
969 transform: translate(-10px);
970 }
971 100% {
972 transform: translate(0);
973 }
974 }
975
976 .active-chatbot-product-details {
977 display: block;
978 position: absolute;
979 right: 100%;
980 animation: 0.5s chatbotProductAnimation;
981 z-index: -1;
982 }
983
984 /********Popup Product Details for ShortCode***********/
985 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
986 position: fixed;
987 animation: none;
988 right: 0;
989 left: 0;
990 top: 0;
991 border: 0;
992 width: 100%;
993 height: 100%;
994 background-color: rgba(1, 1, 1, 0.79);
995 z-index: 99999999;
996 margin: 0;
997 }
998
999 /****************************************************************************************************
1000 8 App ShortCode
1001 ****************************************************************************************************/
1002 #wp-chatbot-chat-app-shortcode-container {
1003 position: fixed;
1004 z-index: 99999999;
1005 top: 0;
1006 bottom: 0;
1007 left: 0;
1008 right: 0;
1009 background: #FFF;
1010 }
1011
1012 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container, #wp-chatbot-chat-app-shortcode-container .wp-chatbot-container {
1013 width: 100% !important;
1014 }
1015
1016 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-board-container:after {
1017 display: none;
1018 }
1019
1020 #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 {
1021 border-radius: 0;
1022 }
1023
1024 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-header {
1025 display: none;
1026 }
1027
1028 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product img {
1029 margin: 0 auto;
1030 }
1031
1032 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-container {
1033 margin-top: 0;
1034 }
1035
1036 #wp-chatbot-chat-app-shortcode-container .active-chatbot-product-details {
1037 left: 0;
1038 right: 0;
1039 top: 0;
1040 bottom: 0;
1041 z-index: 999999999;
1042 background: rgba(0, 0, 0, 0.80);
1043 margin: 0;
1044 }
1045
1046 #wp-chatbot-chat-app-shortcode-container .wp-chatbot-product-details {
1047 margin: 0 auto;
1048 }
1049
1050 #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 {
1051 position: absolute;
1052 top: 50%;
1053 left: 50%;
1054 margin-left: -45px;
1055 }
1056
1057 .wpchatbot-app-order-confirmation .wpchatbot-wpcommerce-order, #wp-chatbot-app-checkout-container {
1058 font-size: 14px;
1059 box-sizing: border-box;;
1060 padding: 15px;
1061 position: absolute;
1062 left: 0;
1063 right: 0;
1064 top: 0;
1065 /*bottom: 0;*/
1066 z-index: 999999;
1067 background: #ffffff;
1068 }
1069
1070 .wpchatbot-wpcommerce-order .wpcommerce-notice {
1071 padding: 10px;
1072 border: 1px solid #cccccc;
1073 color: #FFF;
1074 }
1075
1076 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-received {
1077 background: #58a093;
1078 }
1079
1080 .wpchatbot-wpcommerce-order .wpcommerce-notice.wpcommerce-thankyou-order-failed {
1081 background: #db4771;
1082 }
1083
1084 .wpchatbot-wpcommerce-order .wpcommerce-order-details, .wpchatbot-wpcommerce-order .wpcommerce-customer-details {
1085 padding: 20px 0;
1086 }
1087
1088 .wpchatbot-app-order-confirmation #wp-chatbot-chat-container, .wpchatbot-app-checkout #wp-chatbot-chat-container {
1089 display: none;
1090 }
1091
1092 .wpchatbot-wpcommerce-order table {
1093 width: 100%;
1094 }
1095
1096 .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 {
1097 text-align: left;
1098 }
1099
1100 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details {
1101 margin: 0;
1102 padding: 0;
1103 }
1104
1105 .wpchatbot-app-home-back {
1106 display: table;
1107 padding: 8px 20px;
1108 background: #9a3a87;
1109 color: white;
1110 font-size: 14px;
1111 text-transform: uppercase;
1112 border: none;
1113 }
1114
1115 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li {
1116 list-style: none;
1117 padding: 5px 0;
1118 border-bottom: 1px solid #eaeaea;
1119 }
1120
1121 .wpchatbot-app-order-confirmation .wpcommerce-thankyou-order-details li:last-child {
1122 border-bottom: none;
1123 }
1124
1125 #wp-chatbot-cart-short-code .coupon {
1126 width: 100%;
1127 max-width: 400px;
1128 text-align: left;
1129 }
1130
1131 #wp-chatbot-cart-short-code .coupon input[type="text"], #wp-chatbot-cart-short-code .coupon input[type="submit"] {
1132 width: 45%;
1133 height: 50px;
1134 box-sizing: border-box;
1135 padding: 5px;
1136 margin-right: 4%;
1137 vertical-align: middle;
1138 font-size: 16px;
1139 }
1140
1141 #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 {
1142 width: 100%;
1143 max-width: 100% !important;
1144 margin: 0 !important;
1145 }
1146
1147 #wp-chatbot-cart-short-code .cross-sells {
1148 display: none;
1149 }
1150
1151 #wp-chatbot-cart-short-code .wc-proceed-to-checkout {
1152 margin: 15px 0;
1153 }
1154
1155 /****************************************************************************************************
1156 9 ShortCode OverRight
1157 ****************************************************************************************************/
1158 .wp-chatbot-shortcode-template-container .wp-chatbot-content {
1159 height: 452px;
1160 }
1161
1162 .wp-chatbot-shortcode-template-container {
1163 }
1164
1165 /************Link Item*************/
1166 .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 {
1167 color: #000000;
1168 background-size: 200% auto;
1169 background-color: #ffffff7d;
1170 border: 1px solid #ffffff;
1171 display: inline-block;
1172 margin: 3px auto;
1173 padding: 6px 11px;
1174 margin-right: 4px;
1175 }
1176
1177 .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 {
1178 background-position: right center;
1179 box-shadow: none;
1180 background-color: #a1c4fd;
1181 }
1182
1183 /****************************************************************************************************
1184 10. Notification
1185 ****************************************************************************************************/
1186 .wp-chatbot-notification-container {
1187 position: relative;
1188 padding: 35px 15px 10px;
1189 box-shadow: 0 0 5px #d5d5d5;
1190 transition: 0.8s;
1191 background-color: #fff;
1192 font-size: 14px;
1193 line-height: 1.5;
1194 transform: translateX(500px);
1195 opacity: 0.1;
1196 border-radius: 5px;
1197 width: 320px;
1198 }
1199
1200 .wp-chatbot-notification-container.wp-chatbot-notification-container-sliding {
1201 opacity: 0.9;
1202 transform: translateX(0);
1203 }
1204
1205 .wp-chatbot-notification-container-disable {
1206 display: none;
1207 }
1208
1209 .wp-chatbot-notification-agent-profile {
1210 position: absolute;
1211 top: -40px;
1212 left: 15px;
1213 right: 15px;
1214 }
1215
1216 .wp-chatbot-notification-widget-avatar, .wp-chatbot-notification-welcome {
1217 display: inline-block;
1218 }
1219
1220 .wp-chatbot-notification-widget-avatar {
1221 width: 60px;
1222 height: 60px;
1223 background-color: #fff;
1224 border-radius: 50%;
1225 overflow: hidden;
1226 box-shadow: 0 5px 5px #d5d5d5;
1227 }
1228
1229 .wp-chatbot-notification-welcome {
1230 font-size: 12px;
1231 }
1232
1233 .wp-chatbot-notification-message {
1234 transition: opacity 0.5s;
1235 }
1236
1237 div#wp-chatbot-desktop-reload {
1238 background: transparent;
1239 width: 30px;
1240 height: 30px;
1241 border-radius: 50%;
1242 position: absolute;
1243 top: -21px;
1244 right: 25px;
1245 color: #ffffff;
1246 cursor: pointer;
1247 text-align: center;
1248 box-sizing: border-box;
1249 transition: 0.2s;
1250 transform: translateY(20px);
1251 }
1252 div#wp-chatbot-desktop-close span{
1253 position: relative;
1254 }
1255 div#wp-chatbot-desktop-reload span {
1256 position: relative;
1257 top: 6px;
1258 }
1259 #wp-chatbot-desktop-close {
1260 display: block;
1261 position: absolute;
1262 right: 3px;
1263 padding: 5px;
1264 font-size: 14px;
1265 font-family: "Arial";
1266 line-height: 20px;
1267 top: -20px;
1268 width: 30px;
1269 height: 30px;
1270 background-color: transparent;
1271 border-radius: 50%;
1272 color: #ffffff;
1273 cursor: pointer;
1274 text-align: center;
1275 box-sizing: border-box;
1276 transition: 0.2s;
1277 transform: translateY(20px);
1278 }
1279
1280 span.chatbot_intent_reload {
1281 position: absolute;
1282 left: 80%;
1283 -webkit-transform: translate(-80%, -50%);
1284 transform: translate(-80%, -50%);
1285 top: 50%;
1286 color: #9a9a9a;
1287 cursor: pointer;
1288 line-height: normal;
1289 }
1290
1291 .wp-chatbot-notification-close {
1292 display: block;
1293 position: absolute;
1294 right: 0;
1295 padding: 5px;
1296 font-size: 14px;
1297 font-family: "Arial";
1298 line-height: 20px;
1299 top: -35px;
1300 width: 30px;
1301 height: 30px;
1302 background-color: #7d8999;
1303 border-radius: 50%;
1304 color: #ffffff;
1305 cursor: pointer;
1306 text-align: center;
1307 box-sizing: border-box;
1308 transition: 0.2s;
1309 visibility: hidden;
1310 transform: translateY(20px);
1311 }
1312
1313 .wp-chatbot-notification-close:hover {
1314 background-color: #5f6a76;
1315 }
1316
1317 .wp-chatbot-notification-container:hover .wp-chatbot-notification-close {
1318 visibility: visible;
1319 transform: translateY(0px);
1320 }
1321 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph{
1322 display: block !important;
1323 }
1324 .wp-chatbot-ball-cart-items {
1325 bottom: -8px;
1326 left: -11px;
1327 position: absolute;
1328 width: 22px;
1329 height: 22px;
1330 line-height: 22px;
1331 font-size: 14px;
1332 background-color: #43c0ed;
1333 color: #ffffff;
1334 display: block;
1335 border-radius: 50%;
1336 text-align: center;
1337 }
1338
1339 .wp-chatbot-rtl ul li.wp-chatbot-msg:after, .wp-chatbot-rtl ul li.wp-chat-user-msg:after {
1340 content: "";
1341 display: table;
1342 clear: both;
1343 width: 100%;
1344 height: 3px;
1345 }
1346
1347 .wp-chatbot-rtl .wp-chatbot-notification-close {
1348 right: auto;
1349 left: 0;
1350 }
1351
1352 #wp-chatbot-product-title h2 a {
1353 color: #2ea3f2;
1354 }
1355
1356 /**
1357 #Integration
1358 */
1359
1360 .wp-chatbot-integration-button-container {
1361 position: absolute;
1362 left: -35px;
1363 top: 100px;
1364 z-index: -1;
1365 }
1366
1367 .wp-chatbot-integration-button-container span {
1368 cursor: pointer;
1369 width: 40px;
1370 height: 40px;
1371 background-image: url("../images/tab-btn-icon.png");
1372 background-repeat: no-repeat;
1373 border-radius: 50%;
1374 display: block;
1375 }
1376
1377 .wp-chatbot-messages-container .wp-chatbot-msg-flat .facebook-messenger-chat {
1378 cursor: pointer;
1379 width: 40px;
1380 height: 40px;
1381 background-image: url(../images/tab-btn-icon.png);
1382 background-repeat: no-repeat;
1383 background-size: auto;
1384 border-radius: 50%;
1385 display: table;
1386 margin: 0 auto;
1387 background-position: 0 -80px;
1388 border: none !important;
1389 box-shadow: none !important;
1390 }
1391
1392 .facebook-messenger {
1393 background-position: 0 -80px;
1394 }
1395
1396 .intergration-weblink {
1397 background-position: -120px -80px;
1398 }
1399
1400 .intergration-phone {
1401 background-position: -81px -80px;
1402 }
1403
1404 .inetegration-skype-btn {
1405 background-position: -162px -80px;
1406 }
1407
1408 .intergration-whats {
1409 background-position: -40px -80px;
1410 }
1411
1412 .intergration-viber {
1413 background-position: 0px -120px;
1414 }
1415
1416 .fb_dialog {
1417 /*right: 85px !important;
1418 bottom: 47px !important;*/
1419 visibility: hidden;
1420 width: 35px !important;
1421 height: 35px !important;
1422 background: #017cff url('../images/tab-btn-icon.png') no-repeat -43px -122px !important;
1423 }
1424
1425 .fb_dialog > .fb_dialog_content {
1426 opacity: 0.01;
1427 }
1428
1429
1430
1431
1432 /**********************************************************************************************
1433 **********************************************************************************************
1434 ************************************* text writing animation ************************************
1435 ***********************************************************************************************
1436 ***********************************************************************************************/
1437 /* @keyframes letters {
1438 from {
1439 left: 0;
1440 }
1441 to {
1442 left: 100%;
1443 }
1444 }
1445 @keyframes lines {
1446 from {
1447 top: 0;
1448 }
1449 to {
1450 top: 100%;
1451 }
1452 }
1453 @keyframes cursor-type {
1454 50% {
1455 border-color: #1f8ceb00;
1456 }
1457 }
1458 @keyframes cursor-wait {
1459 0% {
1460 box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
1461 }
1462 1% {
1463 box-shadow: inset 2px 0 0 0 #1f8ceb00;
1464 }
1465 40% {
1466 box-shadow: inset 2px 0 0 0 #1f8ceb00;
1467 }
1468 }
1469
1470
1471 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation {
1472 position: relative;
1473 width: 100%;
1474 line-height: 1.2;
1475 word-break: break-all;
1476 overflow: hidden;
1477 }
1478 @supports (width: 1ch) {
1479 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before, li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1480 box-sizing: border-box;
1481 content: "";
1482 position: absolute;
1483 z-index: 1;
1484 display: block;
1485 height: 1.2em;
1486 width: 100%;
1487 background-color: #1f8ceb;
1488 }
1489 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1490 border-left: 2px solid transparent;
1491 top: 100%;
1492 animation-name: letters, lines, cursor-type, cursor-wait;
1493 animation-fill-mode: both, both, both, backwards;
1494 }
1495 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1496 content: "";
1497 height: 100%;
1498 top: 100%;
1499 left: 0;
1500 margin-top: 1.2em;
1501 }
1502 }
1503
1504 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1505 animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
1506 animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
1507 animation-iteration-count: 1, 1, 35, 2;
1508 animation-delay: 0.6s, 0.6s, 0.6s, 1.0s;
1509 }
1510 li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1511 animation: lines 1.4285714286s steps(1, end) 1;
1512 animation-fill-mode: backwards;
1513 animation-delay: 1.0s;
1514 }
1515
1516
1517 ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child{
1518 background-color: #fff;
1519 }
1520
1521
1522 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 {
1523 box-sizing: border-box;
1524 content: "";
1525 position: absolute;
1526 z-index: 1;
1527 display: block;
1528 height: 1.2em;
1529 width: 100%;
1530 background-color: #1f8ceb00;
1531 } */
1532
1533 /****************************************************************************************************
1534 11 Responsive
1535 ****************************************************************************************************/
1536 @media screen and (max-width: 1200px) {
1537 /******************Product Details Popup*****************/
1538 #wp-chatbot-ball-container .wp-chatbot-product-container {
1539 position: absolute;
1540 animation: none;
1541 right: 0;
1542 left: 0;
1543 top: 0;
1544 bottom: 0;
1545 width: 100%;
1546 height: 100%;
1547 background-color: rgba(1, 1, 1, 0.79);
1548 z-index: 9999;
1549 margin: 0;
1550 }
1551
1552 /******product details layout******/
1553 .wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
1554 overflow-y: scroll;
1555 }
1556
1557 .wp-chatbot-products-area .slimScrollDiv, .wp-chatbot-products-area .wp-chatbot-products {
1558 height: auto !important;
1559 }
1560
1561 #wp-chatbot-ball-container .wp-chatbot-product-container {
1562 overflow-x: auto;
1563 }
1564
1565 .wp-chatbot-product-details {
1566 width: 100%;
1567 box-sizing: border-box;
1568 }
1569
1570 .wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
1571 width: 100%;
1572 box-sizing: border-box;
1573 }
1574
1575 }
1576
1577
1578 @media screen and (max-width: 767px) {
1579 div#wp-chatbot-ball-container {
1580 max-width: 99%;
1581 }
1582 .wp-chatbot-header {
1583 padding-left: 50px;
1584 padding-right: 50px;
1585 }
1586
1587 .wp-chatbot-board-container{
1588 width: 310px;
1589 }
1590 .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1591 width: 100%;
1592 }
1593
1594
1595
1596 #wp-chatbot-mobile-close {
1597 position: absolute;
1598 right: 12px;
1599 top: 9px;
1600 display: table;
1601 background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
1602 width: 30px;
1603 height: 30px;
1604 cursor: pointer;
1605 color: transparent;
1606 }
1607 #wp-chatbot-mobile-close{
1608 display: none;
1609 }
1610
1611
1612
1613 .wp-chatbot-notification-close {
1614 visibility: visible;
1615 }
1616
1617 .chatbot-sidebar {
1618 display: none !important;
1619 }
1620 }
1621
1622 @media screen and (max-width: 500px) {
1623 .wp-chatbot-integration-button-container {
1624 position: absolute;
1625 left: 15px;
1626 top: 5px;
1627 right: 43px;
1628 text-align: center;
1629 }
1630
1631 .wp-chatbot-integration-button-container span {
1632 display: inline-block !important;
1633 }
1634
1635 .wp-chatbot-header {
1636 padding-top: 15px;
1637 }
1638
1639 #wp-chatbot-chat-container {
1640 right: 30px;
1641 bottom: 30px;
1642 }
1643
1644 .fb_dialog {
1645 z-index: 21999 !important;
1646 right: 46px !important;
1647 bottom: 3px !important;
1648
1649 }
1650 }
1651
1652 @media screen and (max-width: 400px) {
1653 .wp-chatbot-notification-container {
1654 width: 250px;
1655 padding-top: 55px;
1656 }
1657 /*#wp-chatbot-desktop-close{
1658 right: 8px !important;
1659 top: 8px !important;
1660 }*/
1661 /*.wp-chatbot-mobile-full-screen #wp-chatbot-desktop-close{
1662 display:none !important;
1663 }*/
1664 .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1665 padding-top: 15px !important;
1666 }
1667 }
1668 .wpb-search-result{
1669
1670 }
1671 .wpb-search-result p{
1672
1673 }
1674 .wpb-search-result a{
1675 display: block;
1676 background: #fff;
1677 margin-bottom: 7px;
1678 padding: 5px;
1679 }
1680 @media screen and (-webkit-min-device-pixel-ratio:0) {
1681 .qcwp-chatbot-search-article input:focus,
1682 .qcwp-chatbot-search-article input {
1683 font-size: 14px;
1684 }
1685
1686 input#wp-chatbot-editor:focus,
1687 input#wp-chatbot-editor {
1688 font-size: 14px;
1689 }
1690
1691 }
1692
1693
1694 /*modal form*/
1695
1696
1697 .plugin-card{
1698 width: 77% !important;
1699 height: 186px;
1700 }
1701 .plugin-action-buttons li a{
1702 font-size: 13px;
1703 }
1704 .name a{
1705 text-decoration: none !important;
1706 }
1707
1708 .cxsc-settings-blocks-addon {
1709 width: 100% !important;
1710 }
1711 .plugin-card {
1712 width: 100% !important;
1713 }
1714