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

1,745 lines 44.5 KB 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	.swal2-container {
1392	z-index: 99999999;
1393	}
1394	.facebook-messenger {
1395	background-position: 0 -80px;
1396	}
1397
1398	.intergration-weblink {
1399	background-position: -120px -80px;
1400	}
1401
1402	.intergration-phone {
1403	background-position: -81px -80px;
1404	}
1405
1406	.inetegration-skype-btn {
1407	background-position: -162px -80px;
1408	}
1409
1410	.intergration-whats {
1411	background-position: -40px -80px;
1412	}
1413
1414	.intergration-viber {
1415	background-position: 0px -120px;
1416	}
1417
1418	.fb_dialog {
1419	/*right: 85px !important;
1420	bottom: 47px !important;*/
1421	visibility: hidden;
1422	width: 35px !important;
1423	height: 35px !important;
1424	background: #017cff url('../images/tab-btn-icon.png') no-repeat -43px -122px !important;
1425	}
1426
1427	.fb_dialog > .fb_dialog_content {
1428	opacity: 0.01;
1429	}
1430
1431
1432
1433
1434	/**********************************************************************************************
1435	**********************************************************************************************
1436	*********************************** text writing animation **********************************
1437	***********************************************************************************************
1438	***********************************************************************************************/
1439	/* @keyframes letters {
1440	from {
1441	left: 0;
1442	}
1443	to {
1444	left: 100%;
1445	}
1446	}
1447	@keyframes lines {
1448	from {
1449	top: 0;
1450	}
1451	to {
1452	top: 100%;
1453	}
1454	}
1455	@keyframes cursor-type {
1456	50% {
1457	border-color: #1f8ceb00;
1458	}
1459	}
1460	@keyframes cursor-wait {
1461	0% {
1462	box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
1463	}
1464	1% {
1465	box-shadow: inset 2px 0 0 0 #1f8ceb00;
1466	}
1467	40% {
1468	box-shadow: inset 2px 0 0 0 #1f8ceb00;
1469	}
1470	}
1471
1472
1473	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation {
1474	position: relative;
1475	width: 100%;
1476	line-height: 1.2;
1477	word-break: break-all;
1478	overflow: hidden;
1479	}
1480	@supports (width: 1ch) {
1481	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before, li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1482	box-sizing: border-box;
1483	content: "";
1484	position: absolute;
1485	z-index: 1;
1486	display: block;
1487	height: 1.2em;
1488	width: 100%;
1489	background-color: #1f8ceb;
1490	}
1491	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1492	border-left: 2px solid transparent;
1493	top: 100%;
1494	animation-name: letters, lines, cursor-type, cursor-wait;
1495	animation-fill-mode: both, both, both, backwards;
1496	}
1497	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1498	content: "";
1499	height: 100%;
1500	top: 100%;
1501	left: 0;
1502	margin-top: 1.2em;
1503	}
1504	}
1505
1506	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1507	animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
1508	animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
1509	animation-iteration-count: 1, 1, 35, 2;
1510	animation-delay: 0.6s, 0.6s, 0.6s, 1.0s;
1511	}
1512	li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1513	animation: lines 1.4285714286s steps(1, end) 1;
1514	animation-fill-mode: backwards;
1515	animation-delay: 1.0s;
1516	}
1517
1518
1519	ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child{
1520	background-color: #fff;
1521	}
1522
1523
1524	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 {
1525	box-sizing: border-box;
1526	content: "";
1527	position: absolute;
1528	z-index: 1;
1529	display: block;
1530	height: 1.2em;
1531	width: 100%;
1532	background-color: #1f8ceb00;
1533	} */
1534
1535	/****************************************************************************************************
1536	11 Responsive
1537	****************************************************************************************************/
1538	@media screen and (max-width: 1200px) {
1539	/****************Product Details Popup***************/
1540	#wp-chatbot-ball-container .wp-chatbot-product-container {
1541	position: absolute;
1542	animation: none;
1543	right: 0;
1544	left: 0;
1545	top: 0;
1546	bottom: 0;
1547	width: 100%;
1548	height: 100%;
1549	background-color: rgba(1, 1, 1, 0.79);
1550	z-index: 9999;
1551	margin: 0;
1552	}
1553
1554	/****product details layout****/
1555	.wp-chatbot-shortcode-template-container .wp-chatbot-product-container {
1556	overflow-y: scroll;
1557	}
1558
1559	.wp-chatbot-products-area .slimScrollDiv, .wp-chatbot-products-area .wp-chatbot-products {
1560	height: auto !important;
1561	}
1562
1563	#wp-chatbot-ball-container .wp-chatbot-product-container {
1564	overflow-x: auto;
1565	}
1566
1567	.wp-chatbot-product-details {
1568	width: 100%;
1569	box-sizing: border-box;
1570	}
1571
1572	.wp-chatbot-product-image-col, .wp-chatbot-product-info-col {
1573	width: 100%;
1574	box-sizing: border-box;
1575	}
1576
1577	}
1578
1579
1580	@media screen and (max-width: 767px) {
1581	body div#wp-chatbot-ball-container {
1582	max-width: 98%;
1583	margin: 0 auto 3px auto;
1584	}
1585	.wp-chatbot-header {
1586	padding-left: 50px;
1587	padding-right: 50px;
1588	}
1589
1590	.wp-chatbot-board-container{
1591	width: 310px;
1592	}
1593	.wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1594	width: 100%;
1595	}
1596
1597	#wp-chatbot-mobile-close {
1598	position: absolute;
1599	right: 12px;
1600	top: 9px;
1601	display: table;
1602	background: rgba(252, 67, 3, 0.8) url("../images/wp-boat-product-close-icon.png") no-repeat center;
1603	width: 30px;
1604	height: 30px;
1605	cursor: pointer;
1606	color: transparent;
1607	}
1608	#wp-chatbot-mobile-close{
1609	display: none;
1610	}
1611
1612
1613
1614	.wp-chatbot-notification-close {
1615	visibility: visible;
1616	}
1617
1618	.chatbot-sidebar {
1619	display: none !important;
1620	}
1621	}
1622
1623	@media screen and (max-width: 500px) {
1624	.wp-chatbot-integration-button-container {
1625	position: absolute;
1626	left: 15px;
1627	top: 5px;
1628	right: 43px;
1629	text-align: center;
1630	}
1631
1632	.wp-chatbot-integration-button-container span {
1633	display: inline-block !important;
1634	}
1635
1636	.wp-chatbot-header {
1637	padding-top: 15px;
1638	}
1639
1640	#wp-chatbot-chat-container {
1641	right: 30px;
1642	bottom: 30px;
1643	}
1644
1645	.fb_dialog {
1646	z-index: 21999 !important;
1647	right: 46px !important;
1648	bottom: 3px !important;
1649
1650	}
1651	}
1652
1653	@media screen and (max-width: 400px) {
1654	.wp-chatbot-notification-container {
1655	width: 250px;
1656	padding-top: 55px;
1657	}
1658	.wp-chatbot-mobile-full-screen .wp-chatbot-header{
1659	padding-top: 15px !important;
1660	}
1661	}
1662	.wpb-search-result a{
1663	display: block;
1664	background: #fff;
1665	margin-bottom: 0;
1666	padding: 5px;
1667	}
1668	@media screen and (-webkit-min-device-pixel-ratio:0) {
1669	.qcwp-chatbot-search-article input:focus,
1670	.qcwp-chatbot-search-article input {
1671	font-size: 14px;
1672	}
1673
1674	input#wp-chatbot-editor:focus,
1675	input#wp-chatbot-editor {
1676	font-size: 14px;
1677	}
1678
1679	}
1680	/modal form/
1681	.plugin-card{
1682	width: 77% !important;
1683	height: 186px;
1684	}
1685	.plugin-action-buttons li a{
1686	font-size: 13px;
1687	}
1688	.name a{
1689	text-decoration: none !important;
1690	}
1691
1692	.cxsc-settings-blocks-addon {
1693	width: 100% !important;
1694	}
1695	.plugin-card {
1696	width: 100% !important;
1697	}
1698	span.chatbotquote-info {
1699	font-size: 38px;
1700	padding: 20px 0 0 0;
1701	position: absolute;
1702	left: 0;
1703	top: 32px;
1704	}
1705	.wp-chatbot-textanimation {
1706	position: relative;
1707	}
1708	ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph .wp-chatbot-textanimation h3 {
1709	padding: 0 0 0 22px !important;
1710	}
1711	span.chatbotquote-info-foot {
1712	font-size: 38px;
1713	padding: 0px 0 0 130px;
1714	position: static;
1715	bottom: -20px;
1716	display: grid;
1717	line-height: 0;
1718	}
1719	wp-chatbot-editor-container input::placeholder {
1720	color: #181818 !important;
1721	}
1722	.wp-chatbot-editor-container input::-ms-input-placeholder {
1723	color: #181818 !important;
1724	}
1725	.wpb-search-result a {
1726	display: block;
1727	background: #eeeeee00 !important;
1728	padding: 4px 5px;
1729	line-height: 20px;
1730	padding-left: 0px !important;
1731	margin-bottom: 0;
1732	color: #222 !important;
1733	}
1734	.wpb-search-result a p {
1735	margin-bottom: 0;
1736	}
1737	.wpb-search-result a {
1738	color: #222;
1739	}
1740	.wpbot_card_caption p {
1741	color: #222;
1742	}
1743
1744
1745