.main-section{
	width: 300px;
	position: fixed;
	right:50px;
	bottom:-350px;
	box-shadow: -3px 3px 10px 0px grey;
}

.first-section:hover{
	cursor: pointer;
}

.open-more{
	bottom:0px;
	transition:2s;
}

.border-chat{
	/*border:1px solid white;*/
	margin: 0px;
}

.first-section{
	background-color:rgb(239 239 239);
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.first-section h3{
	color:rgb(0, 0, 0);
	margin:0px;
	padding: 5px 0px;
}

.first-section h3:hover{
	color:rgb(67, 160, 196);
	cursor: pointer;
}

.right-first-section{
	text-align: center;
	width: 50px;
}

.right-first-section i{
	color:#fff;
	font-size: 15px;
	padding: 12px 3px;
}

.right-first-section i:hover{
	color:#fff;
}

.chat-section ul li{
	list-style: none;
	margin-top:10px;
	position: relative;
}

.chat-section{
	overflow-y:scroll;
	height:300px;
}

.chat-section ul{
	padding: 0px;
}

.left-chat img,.right-chat img{
	width:50px;
	height:50px;
	float:left;
	margin:0px 10px;
}

.right-chat img{
	float:right;
}

.second-section{
	padding: 0px;
	margin: 0px;
	background-color: #ffffff;
	height: 300px;
}

.left-first-section{
	width: 250px;
}
.left-chat,.right-chat{
	overflow: hidden;
}

.left-chat p,.right-chat p{
	background-color:#f5f6f7;
	padding: 10px;
	color:black;
	border-radius: 5px;
	float:left;
	width:60%;
	margin-bottom:0px;
	font-size: 12px;
}

.left-chat span,.right-chat span{
	position: absolute;
	left:70px;
	top:60px;
	color:#B7BCC5;
}

.left-chat-time {
	font-size: 12px;
	margin-left: 25%;
	color:#B7BCC5;
}

.right-chat-time {
	font-size: 12px;
	margin-left: 60%;
	color:#B7BCC5;
}

.right-chat span{
	left:45px;
}

.right-chat p{
	float:right;
	background-color: #f5f6f7;
	color:black;
}

.third-section{
	border-top: 1px solid #EEEEEE;
	background-color: #ffa900;
}

.third-section button{
	border: 0px;
	background-color: #ffa900;
}

.text-bar input{
	width:94%;
	margin-left:-12px;
	padding:10px 10px;
	border:1px solid #fff;
	outline: none;
}

.text-bar a i{
	background-color:#FD8468;
	color:#fff;
	width:30px;
	height:30px;
	padding:7px 0px;
	border-radius: 50%;
	text-align: center;
}

.left-chat:before{
	content: " ";
	position:absolute;
	top:0px;
	left:55px;
	bottom:150px;
	border:15px solid transparent;
	border-top-color:#b1a374;
}

.right-chat:before{
	content: " ";
	position:absolute;
	top:0px;
	right:55px;
	bottom:150px;
	border:15px solid transparent;
	border-top-color:#5294e2;
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
    .main-section{
		width: 300px;
		position: fixed;
		right:50px;
		bottom:-350px;
		box-shadow: -3px 3px 10px 0px grey;
	}
	
	.first-section:hover{
		cursor: pointer;
	}
	
	.open-more{
		bottom:0px;
		transition:2s;
	}
	
	.border-chat{
		/*border:1px solid white;*/
		margin: 0px;
	}
	
	.first-section{
		background-color:rgb(239 239 239);
		border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	}
	
	.first-section h3{
		color:rgb(0, 0, 0);
		margin:0px;
		padding: 5px 0px;
	}
	
	.first-section h3:hover{
		color:rgb(67, 160, 196);
		cursor: pointer;
	}
	
	.right-first-section{
		text-align: center;
		width: 50px;
	}
	
	.right-first-section i{
		color:#fff;
		font-size: 15px;
		padding: 12px 3px;
	}
	
	.right-first-section i:hover{
		color:#fff;
	}
	
	.chat-section ul li{
		list-style: none;
		margin-top:10px;
		position: relative;
	}
	
	.chat-section{
		overflow-y:scroll;
		height:300px;
	}
	
	.chat-section ul{
		padding: 0px;
	}
	
	.left-chat img,.right-chat img{
		width:50px;
		height:50px;
		float:left;
		margin:0px 10px;
	}
	
	.right-chat img{
		float:right;
	}
	
	.second-section{
		padding: 0px;
		margin: 0px;
		background-color: #ffffff;
		height: 300px;
	}
	
	.left-first-section{
		width: 250px;
	}
	.left-chat,.right-chat{
		overflow: hidden;
	}
	
	.left-chat p,.right-chat p{
		background-color:#f5f6f7;
		padding: 10px;
		color:black;
		border-radius: 5px;
		float:left;
		width:60%;
		margin-bottom:0px;
		font-size: 12px;
	}
	
	.left-chat span,.right-chat span{
		position: absolute;
		left:70px;
		top:60px;
		color:#B7BCC5;
	}
	
	.left-chat-time {
		font-size: 12px;
		margin-left: 25%;
		color:#B7BCC5;
	}
	
	.right-chat-time {
		font-size: 12px;
		margin-left: 60%;
		color:#B7BCC5;
	}
	
	.right-chat span{
		left:45px;
	}
	
	.right-chat p{
		float:right;
		background-color: #f5f6f7;
		color:black;
	}
	
	.third-section{
		border-top: 1px solid #EEEEEE;
		background-color: #ffa900;
	}
	
	.third-section button{
		border: 0px;
		background-color: #ffa900;
	}
	
	.text-bar input{
		width:94%;
		margin-left:-12px;
		padding:10px 10px;
		border:1px solid #fff;
		outline: none;
	}
	
	.text-bar a i{
		background-color:#FD8468;
		color:#fff;
		width:30px;
		height:30px;
		padding:7px 0px;
		border-radius: 50%;
		text-align: center;
	}
	
	.left-chat:before{
		content: " ";
		position:absolute;
		top:0px;
		left:55px;
		bottom:150px;
		border:15px solid transparent;
		border-top-color:#b1a374;
	}
	
	.right-chat:before{
		content: " ";
		position:absolute;
		top:0px;
		right:55px;
		bottom:150px;
		border:15px solid transparent;
		border-top-color:#5294e2;
	}
	
}