.chat {
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 10000;
}

.chat .header {
	margin: 0 auto;
	background: #f0f0f0;
	width: 400px;
	border: 2px solid var(--link);
	border-bottom: 0px;
	cursor: pointer;
}

.chat .header table {
	width: 100%;
}

.chat .header .agent {
	color: #291e00;
	padding: 3px 4%;
	border-bottom: 1px solid #a7a7a7;
}

.chat .header .agent span.of {
	color: #494949;
}

@keyframes newMessage {
	0% {
		background: #b20202;
	}

	50% {
		background: #f00;
	}

	100% {
		background: #b20202;
	}

}

.chat .header .caret {
	color: #291e00;
	text-align: right;
	padding: 3px 10px;
	border-bottom: 1px solid #a7a7a7;
}

.chat .messages {
	margin: 0 auto;
	background: #f7f7f7;
	width: 400px;
	max-height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-color: #c0c0c0 #f7f7f7;
	padding-bottom: 10px;
	border-left: 2px solid var(--link);
	border-right: 2px solid var(--link);
}

.chat .messages.hide {
	display: none;
}

.chat .messages .message {
	font-size: 15px;
	padding: 4px 8px;
	width: 80%;
	position: relative;
	margin-top: 10px;
}

.chat .messages .message.active {
	border-bottom: 2px solid var(--link) !important;
}

.chat .messages .message div.time {
	width: 100%;
	font-size: 10px;
	line-height: 10px;
	text-align: right;
	color: #404040;
}

.chat .messages .message img {
	margin: 8px 0px;
	border-radius: 8px;
}

.chat .messages .message.messageLeft {
	background: #FFCD36;
	color: #291e00;
	margin-left: 3%;
	border-color: 1px solid #ddb027;
	border-radius: 0px 8px 8px 8px;
	-webkit-border-radius: 0px 8px 8px 8px;
	-moz-border-radius: 0px 8px 8px 8px;
}

.chat .messages .message.messageRight {
	background: #f0f0f0;
	color: #000;
	border: 1px solid #e7e7e7;
	margin-right: 3%;
	margin-left: 17%;
	border-radius: 8px 0px 8px 8px;
	-webkit-border-radius: 8px 0px 8px 8px;
	-moz-border-radius: 8px 0px 8px 8px;
}

.chat .status {
	margin: 0 auto;
	width: 400px;
	background: #f7f7f7;
}

.chat .status .message {
	padding: 4px 8px;
	text-align: center;
	font-size: 13px;
	color: #870303;
	font-style: italic;
	border-left: 2px solid var(--link);
	border-right: 2px solid var(--link);
}

.chat .preview {
	margin: 0 auto;
	width: 400px;
	border-top: 1px solid #c0c0c0;
	text-align: center;
	background: #f7f7f7;
	border-left: 2px solid var(--link);
	border-right: 2px solid var(--link);
}

.chat .preview.hide {
	display: none;
}

.chat .controls {
	margin: 0 auto;
	width: 400px;
	border-top: 1px solid #c0c0c0;
}

.chat .controls.hide {
	display: none;
}

.chat .controls .field {
	width: 72%;
	float: left;
	height: 50px;
	border-left: 2px solid var(--link);
}

.chat .controls .field #chat_controls_message_field {
	background: #fff;
	color: #101010;
	width: 100%;
	height: 30px;
	border: 0px solid #bdbdbd;
	border-bottom: 0px;
	border-top: 0px;
	padding: 3px 10px;
	height: 50px;
}

.chat .controls .field #chat_controls_message_field:focus {
	outline: none !important;
	border-bottom: 2px solid #FFCD36;
}

.chat .controls .btn {
	cursor: pointer;
	border-radius: 0px;
	height: 35px;
	float: left;
	padding: 13px 0px;
	text-align: center;
	width: 14%;
	height: 50px;
}

.chat .controls .btnAttach {
	color: #101010;
	background: #f5f5f5;
}

.chat .controls .btnAttach:hover {
	background: #f0f0f0;
}

.chat .controls .btnSend {
	background: #FFCD36;
	color: #101010;
	border-right: 2px solid var(--link);
}

.chat .controls .btnSend:hover {
	background: #e9b821;
}

@media only screen and (min-width:0px) and (max-width:575px) {
	.chat .header {
		width: 250px;
		margin: 0px;
	}

	.chat .messages {
		width: 250px;
		margin: 0px;
	}

	.chat .status {
		width: 250px;
		margin: 0px;
	}

	.chat .preview {
		width: 250px;
		margin: 0px;
	}

	.chat .controls {
		width: 250px;
		margin: 0px;
	}

	.chat .controls .field {
		width: 100%;
		border-right: 2px solid var(--link);
	}

	.chat .controls .btn {
		width: 50%;
	}

	.chat .controls .btnAttach {
		border-left: 2px solid var(--link);
	}

}