style.css for NewChatBotDesign [1028274]

#screenreadertrick {
  position: absolute !important; /* Outside the DOM flow */
  height: 1px; width: 1px; /* Nearly collapsed */
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
  clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
}
    
/*Chatbot Starts*/

.chat-icon button {
  font-size: 32px;
  line-height: 55px;
  -webkit-transition: all .7s ease-out;
  -moz-transition: all .7s ease-in-out;
  transition: all .7s ease-in-out;
  color: #fff;
  background: transparent;
  border: none;
  /*width: 50px;*/
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
}

.chat-bottom a button {
    color: #737373;
    transition: 0.4s all ease-in;
    cursor: pointer;
    font-size: 18px;
}

.chat-bottom a button:hover {
    color: #f16e00;
}

button.fa-paper-plane {
  border: none;
  padding: 0;
  background: none;
  height: 30px;
}

.chatbot {
  font-family: 'Poppins', sans-serif;
  /*background-color: #f4faff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;*/
}

.chatbot .chat-box {
    bottom: 20px;
    position: fixed;
    margin: 1em;
    right: 0;
    z-index: 10998;
}

.chat-icon {
    /* latest fixes */
    /*display: block;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 56px;
    height: 56px;
    border-radius: 50%;
    text-align: center;
    color: #f0f0f0;
    margin: 25px auto 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    cursor: pointer;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    position: relative;
    z-index: 10998;
    overflow: hidden;
    background: #42a5f5;
}

.chat-icon i {
    font-size: 2em;
    line-height: 55px;
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

/*Chatbox*/

.chat {
    position: fixed;
    right: 85px;
    bottom: 20px;
    width: 400px;
    font-size: 14px;
    line-height: 25px;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    display: none; /* XXX */
    box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
    border-radius: 10px;
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.chat_fullscreen {
    position: fixed;
    right: 0px;
    bottom: 0px;
    top: 0px;
}

.chat_header {
    text-align: center;
    font-weight: 500;
    color: #fff;
    height: 55px;
    background: #42a5f5;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat_header h2 {
  font-size: 2.5em;
  margin: 0;
}

.chat_header .span {
    float: right;
}

.chat.is-visible {
    display: block; /* XXX */
    opacity: 1;
    -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}

.is-hide {
    opacity: 0
}

.chat_field {
    position: relative;
    margin: 5px 0 5px 0;
    width: 50%;
    font-size: 14px;
    line-height: 30px;
    font-weight: 500;
    color: #4b4b4b;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    border: none;
    outline: none;
    display: inline-block;
}

.chat_field.chat_message {
    height: 30px;
    resize: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.chat-bottom {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.chat-bottom a {
    display: inline-block;
    text-align: center;
}

.chat-bottom .camera-icon {
    float: left;
    background: rgba(0, 0, 0, 0);
}

.chat-bottom .send-icon {
    float: right;
    background: rgba(0, 0, 0, 0);
}

.chat-bottom a {
    width: 35px;
    height: 35px;
    box-shadow: none;
    margin: 5px;
}

.chat-bottom a i {
    font-size: 1.6em;
    line-height: 35px;
    color: #bbb;
}

.chat-bottom a i:hover {
    color: #42a5f5;
}

.chat_converse:focus, button.fas:focus, .chat_message:focus {
  outline: .2rem solid #f16e00;
}

.chat-icon button:focus {
  outline: none !important;
  box-shadow: 0 0 3pt 2pt #f16e00;
}

.chat-icon {
  padding: 3px;
}

.chat_converse {
    position: relative;
    background: #fff;
    margin: 0; /*margin: 6px 0 0px 0;*/
    height: 300px;
    min-height: 0;
    font-size: 14px;
    line-height: 25px;
    overflow-y: auto;
    width: 100%;
    float: right;
    padding-bottom: 50px;
}

.chat .chat_converse .chat_msg_item {
    position: relative;
    margin: 8px 0 15px 0;
    padding: 8px 10px;
    max-width: 60%;
    display: block;
    word-wrap: break-word;
    border-radius: 3px;
    -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
    clear: both;
    z-index: 10999;
}

.status {
    margin: 45px -50px 0 0;
    float: right;
    font-size: 11px;
    opacity: 0.3;
}

.status2 {
    margin: -10px 20px 0 0;
    float: right;
    display: block;
    font-size: 11px;
    opacity: 0.3;
    clear: both;
}

.chat .chat_converse .chat_msg_item .chat_avatar {
    position: absolute;
    top: 0;
}

.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
    left: -52px;
    background: rgba(0, 0, 0, 0.03);
}

.chat .chat_converse .chat_msg_item .chat_avatar,
.chat_avatar img {
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
}

.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
    margin-left: 60px;
    float: left;
    background: rgba(0, 0, 0, 0.03);
    color: #666;
}

.chat .chat_converse .chat_msg_item.chat_msg_item_user {
    margin-right: 20px;
    float: right;
    background: #42a5f5;
    color: #eceff1;
}

.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
    content: '';
    position: absolute;
    top: 15px;
    left: -12px;
    z-index: 10998;
    border: 6px solid transparent;
    border-right-color: rgba(255, 255, 255, .4);
}

#otherSideTyping {
    background-color: #fff;
    margin-left: 30px;
    display: flex;
    width: 100%;
    align-items: center;
}

#otherSideTyping h4 {
  margin-right: 10px;
  margin-left: 15px;
}

#otherSideTyping .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 3px;
    background: #303131;
    animation: wave 1.3s linear infinite;
}

#otherSideTyping .dot:nth-child(2) {
    animation-delay: -1.1s;
}

#otherSideTyping .dot:nth-child(3) {
    animation-delay: -0.9s;
}

.chat_username {
    clear: both;
}
.chat_username p {
    position: relative;
    float: right;
    margin: 0px 20px -5px 0px;
    font-size: 12px;
    color: #ccc;
}

.chat_botname {
  clear: both;
}

.chat_botname p {
    position: relative;
    float: left;
    margin: 0px 0px -6px 60px;
    font-size: 12px;
    color: #42a5f5;
}

@keyframes wave {
    0%,
    60%,
    100% {
        transform: initial;
    }
    30% {
        transform: translateY(-15px);
    }
}


/*Chatbox scrollbar*/
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    margin: 2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}


/*Element state*/
.is-active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.is-float {
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}


/*Animation*/

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes load {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }
    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@media only screen and (min-width: 360px) {
    .chat {
        width: 275px;
    }
    .chat_field {
        width: 80%;/*65%;*/
    }
}

@media only screen and (min-width: 400px) {
    .chat {
        width: 300px;
    }
}

/* TABLETS PORTRAIT */

@media only screen and (min-width: 768px) {
    .chat {
        width: 300px;
    }
    .chat_field {
        width: 80%;/*65%;*/
    }
}


/* TABLET LANDSCAPE / DESKTOP */

@media only screen and (min-width: 1024px) {
    .chat {
        width: 300px;
    }
    .chat_field {
        width: 65%;
    }
    
}

/* safari fixes */

@media (min-width: 375px) and (max-width: 812px){
.chat-icon {
    
    width: 90px!important;
    height: 90px!important;
}

.chat-icon button {
    margin-top: 17px;
    margin-left: -47px;
    font-size: 48px!important;
}
  /* Shift comment icon on the left a bit */
  /*.chat-icon button.fa-comment-dots {
      margin: 0 0 0 -5px !important;
  }*/
}

@media (min-width: 768px) and (max-width: 1024px){
.chat-icon {
    
    width: 90px!important;
    height: 90px!important;
}

.chat-icon button {
    margin-top: 17px;
    margin-left: -47px;
    font-size: 48px!important;
}

}


/* Make the icon link position relative*/
.chat-icon {
    position: relative;
}

/* Make the icon link position absolute and position it in center */
.chat-icon button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
}

Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv

Snippet ID:	#1028274
Snippet name:	style.css for NewChatBotDesign
Eternal ID of this version:	#1028274/54
Text MD5:	0d360589bcadd9e22916fa2168c15ece
Author:	stefan
Category:	javax / css
Type:	Document
Public (visible to everyone):	Yes
Archived (hidden from active list):	No
Created/modified:	2020-07-02 18:49:07
Source code size:	10872 bytes / 563 lines
Pitched / IR pitched:	No / No
Views / Downloads:	251 / 1897
Version history:	53 change(s)
Referenced in:	[show references]

1	#screenreadertrick {
2	position: absolute !important; /* Outside the DOM flow */
3	height: 1px; width: 1px; /* Nearly collapsed */
4	overflow: hidden;
5	clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */
6	clip: rect(1px, 1px, 1px, 1px); /* All other browsers */
7	}
8
9	/Chatbot Starts/
10
11	.chat-icon button {
12	font-size: 32px;
13	line-height: 55px;
14	-webkit-transition: all .7s ease-out;
15	-moz-transition: all .7s ease-in-out;
16	transition: all .7s ease-in-out;
17	color: #fff;
18	background: transparent;
19	border: none;
20	/width: 50px;/
21	height: 50px;
22	line-height: 50px;
23	border-radius: 50px;
24	}
25
26	.chat-bottom a button {
27	color: #737373;
28	transition: 0.4s all ease-in;
29	cursor: pointer;
30	font-size: 18px;
31	}
32
33	.chat-bottom a button:hover {
34	color: #f16e00;
35	}
36
37	button.fa-paper-plane {
38	border: none;
39	padding: 0;
40	background: none;
41	height: 30px;
42	}
43
44	.chatbot {
45	font-family: 'Poppins', sans-serif;
46	/*background-color: #f4faff;
47	height: 100vh;
48	display: flex;
49	justify-content: center;
50	align-items: center;*/
51	}
52
53	.chatbot .chat-box {
54	bottom: 20px;
55	position: fixed;
56	margin: 1em;
57	right: 0;
58	z-index: 10998;
59	}
60
61	.chat-icon {
62	/* latest fixes */
63	/display: block;/
64	display: flex;
65	align-items: center;
66	justify-content: center;
67
68	width: 56px;
69	height: 56px;
70	border-radius: 50%;
71	text-align: center;
72	color: #f0f0f0;
73	margin: 25px auto 0;
74	box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
75	cursor: pointer;
76	-webkit-transition: all .1s ease-out;
77	transition: all .1s ease-out;
78	position: relative;
79	z-index: 10998;
80	overflow: hidden;
81	background: #42a5f5;
82	}
83
84	.chat-icon i {
85	font-size: 2em;
86	line-height: 55px;
87	-webkit-transition: all .2s ease-out;
88	-webkit-transition: all .2s ease-in-out;
89	transition: all .2s ease-in-out;
90	}
91
92	/Chatbox/
93
94	.chat {
95	position: fixed;
96	right: 85px;
97	bottom: 20px;
98	width: 400px;
99	font-size: 14px;
100	line-height: 25px;
101	font-weight: 500;
102	-webkit-font-smoothing: antialiased;
103	font-smoothing: antialiased;
104	opacity: 0;
105	display: none; /* XXX */
106	box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
107	border-radius: 10px;
108	-webkit-transition: all .2s ease-out;
109	-webkit-transition: all .2s ease-in-out;
110	transition: all .2s ease-in-out;
111	}
112
113	.chat_fullscreen {
114	position: fixed;
115	right: 0px;
116	bottom: 0px;
117	top: 0px;
118	}
119
120	.chat_header {
121	text-align: center;
122	font-weight: 500;
123	color: #fff;
124	height: 55px;
125	background: #42a5f5;
126	border-top-left-radius: 10px;
127	border-top-right-radius: 10px;
128	display: flex;
129	align-items: center;
130	justify-content: center;
131	}
132
133	.chat_header h2 {
134	font-size: 2.5em;
135	margin: 0;
136	}
137
138	.chat_header .span {
139	float: right;
140	}
141
142	.chat.is-visible {
143	display: block; /* XXX */
144	opacity: 1;
145	-webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
146	animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
147	}
148
149	.is-hide {
150	opacity: 0
151	}
152
153	.chat_field {
154	position: relative;
155	margin: 5px 0 5px 0;
156	width: 50%;
157	font-size: 14px;
158	line-height: 30px;
159	font-weight: 500;
160	color: #4b4b4b;
161	-webkit-font-smoothing: antialiased;
162	font-smoothing: antialiased;
163	border: none;
164	outline: none;
165	display: inline-block;
166	}
167
168	.chat_field.chat_message {
169	height: 30px;
170	resize: none;
171	font-size: 14px;
172	line-height: 20px;
173	font-weight: 400;
174	}
175
176	.chat-bottom {
177	width: 100%;
178	display: inline-block;
179	text-align: center;
180	background: #fff;
181	border-top: 1px solid #eee;
182	border-bottom-right-radius: 10px;
183	border-bottom-left-radius: 10px;
184	}
185
186	.chat-bottom a {
187	display: inline-block;
188	text-align: center;
189	}
190
191	.chat-bottom .camera-icon {
192	float: left;
193	background: rgba(0, 0, 0, 0);
194	}
195
196	.chat-bottom .send-icon {
197	float: right;
198	background: rgba(0, 0, 0, 0);
199	}
200
201	.chat-bottom a {
202	width: 35px;
203	height: 35px;
204	box-shadow: none;
205	margin: 5px;
206	}
207
208	.chat-bottom a i {
209	font-size: 1.6em;
210	line-height: 35px;
211	color: #bbb;
212	}
213
214	.chat-bottom a i:hover {
215	color: #42a5f5;
216	}
217
218	.chat_converse:focus, button.fas:focus, .chat_message:focus {
219	outline: .2rem solid #f16e00;
220	}
221
222	.chat-icon button:focus {
223	outline: none !important;
224	box-shadow: 0 0 3pt 2pt #f16e00;
225	}
226
227	.chat-icon {
228	padding: 3px;
229	}
230
231	.chat_converse {
232	position: relative;
233	background: #fff;
234	margin: 0; /margin: 6px 0 0px 0;/
235	height: 300px;
236	min-height: 0;
237	font-size: 14px;
238	line-height: 25px;
239	overflow-y: auto;
240	width: 100%;
241	float: right;
242	padding-bottom: 50px;
243	}
244
245	.chat .chat_converse .chat_msg_item {
246	position: relative;
247	margin: 8px 0 15px 0;
248	padding: 8px 10px;
249	max-width: 60%;
250	display: block;
251	word-wrap: break-word;
252	border-radius: 3px;
253	-webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
254	animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1);
255	clear: both;
256	z-index: 10999;
257	}
258
259	.status {
260	margin: 45px -50px 0 0;
261	float: right;
262	font-size: 11px;
263	opacity: 0.3;
264	}
265
266	.status2 {
267	margin: -10px 20px 0 0;
268	float: right;
269	display: block;
270	font-size: 11px;
271	opacity: 0.3;
272	clear: both;
273	}
274
275	.chat .chat_converse .chat_msg_item .chat_avatar {
276	position: absolute;
277	top: 0;
278	}
279
280	.chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
281	left: -52px;
282	background: rgba(0, 0, 0, 0.03);
283	}
284
285	.chat .chat_converse .chat_msg_item .chat_avatar,
286	.chat_avatar img {
287	width: 40px;
288	height: 40px;
289	text-align: center;
290	border-radius: 50%;
291	}
292
293	.chat .chat_converse .chat_msg_item.chat_msg_item_admin {
294	margin-left: 60px;
295	float: left;
296	background: rgba(0, 0, 0, 0.03);
297	color: #666;
298	}
299
300	.chat .chat_converse .chat_msg_item.chat_msg_item_user {
301	margin-right: 20px;
302	float: right;
303	background: #42a5f5;
304	color: #eceff1;
305	}
306
307	.chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
308	content: '';
309	position: absolute;
310	top: 15px;
311	left: -12px;
312	z-index: 10998;
313	border: 6px solid transparent;
314	border-right-color: rgba(255, 255, 255, .4);
315	}
316
317	#otherSideTyping {
318	background-color: #fff;
319	margin-left: 30px;
320	display: flex;
321	width: 100%;
322	align-items: center;
323	}
324
325	#otherSideTyping h4 {
326	margin-right: 10px;
327	margin-left: 15px;
328	}
329
330	#otherSideTyping .dot {
331	display: inline-block;
332	width: 12px;
333	height: 12px;
334	border-radius: 50%;
335	margin-right: 3px;
336	background: #303131;
337	animation: wave 1.3s linear infinite;
338	}
339
340	#otherSideTyping .dot:nth-child(2) {
341	animation-delay: -1.1s;
342	}
343
344	#otherSideTyping .dot:nth-child(3) {
345	animation-delay: -0.9s;
346	}
347
348	.chat_username {
349	clear: both;
350	}
351	.chat_username p {
352	position: relative;
353	float: right;
354	margin: 0px 20px -5px 0px;
355	font-size: 12px;
356	color: #ccc;
357	}
358
359	.chat_botname {
360	clear: both;
361	}
362
363	.chat_botname p {
364	position: relative;
365	float: left;
366	margin: 0px 0px -6px 60px;
367	font-size: 12px;
368	color: #42a5f5;
369	}
370
371	@keyframes wave {
372	0%,
373	60%,
374	100% {
375	transform: initial;
376	}
377	30% {
378	transform: translateY(-15px);
379	}
380	}
381
382
383	/Chatbox scrollbar/
384	::-webkit-scrollbar {
385	width: 6px;
386	}
387
388	::-webkit-scrollbar-track {
389	border-radius: 0;
390	}
391
392	::-webkit-scrollbar-thumb {
393	margin: 2px;
394	border-radius: 10px;
395	background: rgba(0, 0, 0, 0.2);
396	}
397
398
399	/Element state/
400	.is-active {
401	-webkit-transform: rotate(180deg);
402	transform: rotate(180deg);
403	-webkit-transition: all 1s ease-in-out;
404	transition: all 1s ease-in-out;
405	}
406
407	.is-float {
408	box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
409	}
410
411
412	/Animation/
413
414	@-webkit-keyframes zoomIn {
415	0% {
416	-webkit-transform: scale(0);
417	transform: scale(0);
418	opacity: 0.0;
419	}
420	100% {
421	-webkit-transform: scale(1);
422	transform: scale(1);
423	opacity: 1;
424	}
425	}
426
427	@keyframes zoomIn {
428	0% {
429	-webkit-transform: scale(0);
430	transform: scale(0);
431	opacity: 0.0;
432	}
433	100% {
434	-webkit-transform: scale(1);
435	transform: scale(1);
436	opacity: 1;
437	}
438	}
439
440	@-webkit-keyframes load {
441	0% {
442	-webkit-transform: scale(0);
443	transform: scale(0);
444	opacity: 0.0;
445	}
446	50% {
447	-webkit-transform: scale(1.5);
448	transform: scale(1.5);
449	opacity: 1;
450	}
451	100% {
452	-webkit-transform: scale(1);
453	transform: scale(1);
454	opacity: 0;
455	}
456	}
457
458	@keyframes load {
459	0% {
460	-webkit-transform: scale(0);
461	transform: scale(0);
462	opacity: 0.0;
463	}
464	50% {
465	-webkit-transform: scale(1.5);
466	transform: scale(1.5);
467	opacity: 1;
468	}
469	100% {
470	-webkit-transform: scale(1);
471	transform: scale(1);
472	opacity: 0;
473	}
474	}
475
476	@media only screen and (min-width: 360px) {
477	.chat {
478	width: 275px;
479	}
480	.chat_field {
481	width: 80%;/65%;/
482	}
483	}
484
485	@media only screen and (min-width: 400px) {
486	.chat {
487	width: 300px;
488	}
489	}
490
491	/* TABLETS PORTRAIT */
492
493	@media only screen and (min-width: 768px) {
494	.chat {
495	width: 300px;
496	}
497	.chat_field {
498	width: 80%;/65%;/
499	}
500	}
501
502
503	/* TABLET LANDSCAPE / DESKTOP */
504
505	@media only screen and (min-width: 1024px) {
506	.chat {
507	width: 300px;
508	}
509	.chat_field {
510	width: 65%;
511	}
512
513	}
514
515	/* safari fixes */
516
517	@media (min-width: 375px) and (max-width: 812px){
518	.chat-icon {
519
520	width: 90px!important;
521	height: 90px!important;
522	}
523
524	.chat-icon button {
525	margin-top: 17px;
526	margin-left: -47px;
527	font-size: 48px!important;
528	}
529	/* Shift comment icon on the left a bit */
530	/*.chat-icon button.fa-comment-dots {
531	margin: 0 0 0 -5px !important;
532	}*/
533	}
534
535	@media (min-width: 768px) and (max-width: 1024px){
536	.chat-icon {
537
538	width: 90px!important;
539	height: 90px!important;
540	}
541
542	.chat-icon button {
543	margin-top: 17px;
544	margin-left: -47px;
545	font-size: 48px!important;
546	}
547
548	}
549
550
551	/* Make the icon link position relative*/
552	.chat-icon {
553	position: relative;
554	}
555
556	/* Make the icon link position absolute and position it in center */
557	.chat-icon button {
558	position: absolute;
559	top: 50%;
560	left: 50%;
561	transform: translate(-50%, -50%);
562	margin: 0 !important;
563	}

< > BotCompany Repo | #1028274 // style.css for NewChatBotDesign

Document