PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services / 7.9.0
WPBot – AI ChatBot for Live Support, Lead Generation, AI Services v7.9.0
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 7.9.0, at css/common-style.css

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