style.css for csPILLAI [1029663]

#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 */
}

/* old opener */

.chat-btn {
    position: fixed;
    bottom: /*2rem*/18px;
    right: /*2rem*/15px;
    z-index: 999999;
    text-decoration: none;
    display: -moz-flex;
    display: -o-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #42a5f5;
    color: #ffffff;
    border-radius: 50%;
    font-size: 30px;
}

.chat-btn div {
    display: inline;
    transition: transform 0.8s;
    visibility: visible;
    opacity: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateZ(0);
}

.chat-btn div.hide {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) rotateZ(180deg);
    transition: transform 0.8s;
}
    
/*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;
}

/* get rid of this? */
.chatbot {
  font-family: 'Poppins', sans-serif;
}

.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: 450px;
    /*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, .chat_header {
    font-family: 'Montserrat', sans-serif !important;
}

.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 {
  position: relative;
}

.chat_header h2 {
  font-size: 2.5em;
  margin: 0;
  padding: 8px 0 0 0; /* override document style */
  color: #ffffff;
}

.chat_header button {
  background: transparent;
  border: none;
  color: #fff;
  padding: 0;
  margin: 0;
  font-size: 20px !important;
}    
    
.chat_header button {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.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: 75%;
    font-size: 17px;
    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: 17px;
    line-height: 20px;
    font-weight: 400;
    font-family: inherit;
}

.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: 450px;
    min-height: 0;
    font-size: 17px; /* chat font size */
    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: 75%;
    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;
}

.chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo {
    background-color: #db4064;
    color: #ffffff;
}

img.chat_contentImage {
  width: 90%;
}


@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) and (max-width: 399px) {
    .chat {
        width: 275px;
    }
    .chat_field {
        width: 80%;/*65%;*/
    }
}

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

/* TABLETS PORTRAIT */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .chat {
        width: 300px;
    }
    .chat_field {
        width: 80%;/*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;
}

/* smaller heading on mobile */
@media (max-width: 614px) {
  .chat_header h2 {
    font-size: 1.5em;
  }
}

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

Snippet ID:	#1029663
Snippet name:	style.css for csPILLAI
Eternal ID of this version:	#1029663/1
Text MD5:	42caf35a59b907b3016ef44a6469b7cf
Author:	stefan
Category:	javax / css
Type:	Document
Public (visible to everyone):	Yes
Archived (hidden from active list):	No
Created/modified:	2020-09-05 17:04:29
Source code size:	12409 bytes / 633 lines
Pitched / IR pitched:	No / No
Views / Downloads:	148 / 107
Referenced in:	[show references]

< > BotCompany Repo | #1029663 // style.css for csPILLAI

Document

Author comment

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