/************************************************
	************************************************
										Web Font
	************************************************
************************************************/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");


/************************************************
	************************************************
								Table of Contents             
	************************************************
************************************************/


/*----------------------------
	---------------------
	-----------------
1. Search Box
2. Users Container
3. Chat Container
	 --------------------
	-------------------------
----------------------*/


/******************* Search Box ********************/

.search-box {
	-webkit-border-radius: 3px 0 0 0;
	-moz-border-radius: 3px 0 0 0;
	border-radius: 3px 0 0 0;
	padding: 0 1rem .75rem 1rem;
}

.search-box .input-group .form-control {
	-webkit-border-radius: 2px 0 0 2px;
	-moz-border-radius: 2px 0 0 2px;
	border-radius: 2px 0 0 2px;
	border-right: 0;
}

.search-box .input-group .form-control:focus {
	border-right: 0;
}

.search-box .input-group .input-group-btn .btn {
	-webkit-border-radius: 0 2px 2px 0;
	-moz-border-radius: 0 2px 2px 0;
	border-radius: 0 2px 2px 0;
	margin: 0;
}

.search-box .input-group .input-group-btn .btn i {
	font-size: 1.5rem;
	line-height: 100%;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.search-box {
		display: none;
	}
}




/******************* Users Container ********************/

.users-container {
	position: relative;
	padding: 1rem 0;
	border-right: 1px solid #e6ecf3;
}

.users {
	padding: 0;
}

.users .person {
	position: relative;
	width: 100%;
	padding: 10px 1rem;
	cursor: pointer;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f4f8;
}

.users .person:hover {
	background-color: #ffffff;
	/* Fallback Color */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e9eff5), to(#ffffff));
	/* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(right, #e9eff5, #ffffff);
	/* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(right, #e9eff5, #ffffff);
	/* FF3.6 */
	background-image: -ms-linear-gradient(right, #e9eff5, #ffffff);
	/* IE10 */
	background-image: -o-linear-gradient(right, #e9eff5, #ffffff);
	/* Opera 11.10+ */
	background-image: linear-gradient(right, #e9eff5, #ffffff);
}

.users .person.active-user {
	background-color: #ffffff;
	/* Fallback Color */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f4f8), to(#ffffff));
	/* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(right, #f0f4f8, #ffffff);
	/* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(right, #f0f4f8, #ffffff);
	/* FF3.6 */
	background-image: -ms-linear-gradient(right, #f0f4f8, #ffffff);
	/* IE10 */
	background-image: -o-linear-gradient(right, #f0f4f8, #ffffff);
	/* Opera 11.10+ */
	background-image: linear-gradient(right, #f0f4f8, #ffffff);
}

.users .person:last-child {
	border-bottom: 0;
}

.users .person .user {
	display: inline-block;
	position: relative;
	margin-right: 10px;
}

.users .person .user img {
	width: 48px;
	height: 48px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.users .person .user .status {
	width: 10px;
	height: 10px;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background: #e6ecf3;
	position: absolute;
	top: 0;
	right: 0;
}

.users .person .user .status.online {
	background: #50b924;
}

.users .person .user .status.offline {
	background: #c4d2e2;
}

.users .person .user .status.away {
	background: #ffda3e;
}

.users .person .user .status.busy {
	background: #ff0000;
}

.users .person p.name-time {
	font-weight: 600;
	font-size: .85rem;
	display: inline-block;
}

.users .person p.name-time .time {
	font-weight: 400;
	font-size: .7rem;
	text-align: right;
	color: #8796af;
}

@media (max-width: 767px) {
	.users .person p.name-time {
		display: none;
	}

	.users .person p.name-time .time {
		display: none;
	}
}

.selected-user {
	width: 100%;
	padding: 0 15px;
	min-height: 64px;
	line-height: 64px;
	border-bottom: 1px solid #e6ecf3;
	-webkit-border-radius: 0 3px 0 0;
	-moz-border-radius: 0 3px 0 0;
	border-radius: 0 3px 0 0;
}

.selected-user span {
	line-height: 100%;
}

.selected-user span.name {
	font-weight: 700;
}






/******************* Chat Container ********************/

.chat-container {
	position: relative;
	padding: 1rem;
}

.chat-container li.chat-left,
.chat-container li.chat-right {
	display: flex;
	flex: 1;
	flex-direction: row;
	margin-bottom: 40px;
}

.chat-container li img {
	width: 48px;
	height: 48px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.chat-container li .chat-avatar {
	margin-right: 20px;
}

.chat-container li.chat-right {
	justify-content: flex-end;
}

.chat-container li.chat-right>.chat-avatar {
	margin-left: 20px;
	margin-right: 0;
}

.chat-container li .chat-name {
	font-size: .75rem;
	color: #999999;
	text-align: center;
}

.chat-container li .chat-text {
	padding: .4rem 1rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #ebf8ff;
	font-weight: 300;
	line-height: 150%;
	position: relative;
}

.chat-container li .chat-text:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 10px;
	left: -20px;
	border: 10px solid;
	border-color: transparent #ebf8ff transparent transparent;
}

.chat-container li.chat-right>.chat-text {
	text-align: right;
	background-color: #fff3f3;
}

.chat-container li.chat-right>.chat-text:before {
	right: -20px;
	border-color: transparent transparent transparent #fff3f3;
	left: inherit;
}

.chat-container li .chat-hour {
	padding: 0;
	margin-bottom: 10px;
	font-size: .75rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 15px;
}

.chat-container li .chat-hour>span {
	font-size: 16px;
	color: #50b924;
}

.chat-container li.chat-right>.chat-hour {
	margin: 0 15px 0 0;
}

.chat-form {
	padding: 15px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1px solid white;
}