style.css for BookBetter [1028652]

#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;
  font-family: 'Montserrat', sans-serif;
}

.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 {
    display: block;
    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-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;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 5px 25px;
}

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

.chat-bottom .chat_field.chat_message {
    background: #ececec;
    height: 40px;
    border-radius: 50px;
    line-height: 35px;
    padding-left: 15px;
    width: 80%;
    margin: 0px;
}

.chat-bottom .send-icon {
    background: #15b5d4;
    border-radius: 50px;
    color: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
}
.chat-bottom a button {
    color: #fff;
    font-size: 16px;
}

.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: 400px;
    min-height: 0;
    font-size: 14px;
    line-height: 25px;
    overflow-y: auto;
    width: 100%;
    float: right;
    /*padding-bottom: 50px;*/
    padding: 10px;
}

.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: #f33c3c;
    color: #fff;
}

.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);
}

/* special opener button */

.chat-icon {
    width: auto;
    height: auto;
    border-radius: 50px;
    background: #f33c3c;
    transition: none;
}
.chat-icon button {
    width: auto;
    height: auto;
    font-size: 24px;
    padding: 0px 25px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: none;
}
.chat-icon button img {
    width: 25px;
    margin-right: 10px;
}
.chat-icon.is-float {
    width: 50px !important;
    height: 50px !important;
}
.chat-icon.is-float button {
    padding: 0px 14px !important;
    line-height: 45px;
}
.chat-icon.is-float button img, .chat-icon.is-float button .chat-icon-text {
    display: none;
}

/* new chat header */

.chat_header {
    background: #f33c3c;
    justify-content: space-between;
    padding: 0px 15px;
}
.chat_header h2 {
    font-size: 18px;
}
.chat_header button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 20px !important;
}

.fa-times:before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
}

/*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-bottom .chat_field.chat_message {
        width: 75% !important;
    }*/
}

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

/* TABLETS PORTRAIT */

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


/* TABLET LANDSCAPE / DESKTOP */

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

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

Snippet ID:	#1028652
Snippet name:	style.css for BookBetter
Eternal ID of this version:	#1028652/16
Text MD5:	91412406d27932ca2d54595bbf5568e7
Author:	stefan
Category:	javax / css
Type:	Document
Public (visible to everyone):	Yes
Archived (hidden from active list):	No
Created/modified:	2020-07-02 17:06:51
Source code size:	11031 bytes / 559 lines
Pitched / IR pitched:	No / No
Views / Downloads:	138 / 798
Version history:	15 change(s)
Referenced in:	[show references]

< > BotCompany Repo | #1028652 // style.css for BookBetter

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