.chat-app .people-list {
	-moz-transition: .5s;
	-o-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s
}

.chat-app .people-list .chat-list li {
	padding: 15px;
	list-style: none;
	border-radius: .1875rem;
	background-color: #fff;
	margin-bottom: 5px
}

.chat-app .people-list .chat-list li:hover {
	background: #e0eff5;
	cursor: pointer
}

.chat-app .people-list .chat-list li.active {
	color: white;
	background: #2D4057;
}

.chat-app .people-list .chat-list li .name {
	font-size: 15px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden
}

.chat-app .people-list .chat-list li .msg {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 12px
}

.chat-app .people-list .chat-list .img-preview {
	float: left;
	width: 45px;
	border-radius: 100%;
	position: relative
}

.chat-app .people-list .chat-list .img-preview img {
	max-width: 100%;
	border-radius: 100%
}

.chat-app .people-list .chat-list .img-preview .status {
	position: absolute;
	top: -5px;
	right: 2px
}

.chat-app .people-list .chat-list .list-left {
	width: calc(100% - 50px)
}

.chat-app .people-list .about {
	float: left;
	padding-left: 8px;
	width: calc(100% - 50px)
}

.chat {
	position: relative;
	border-radius: .1875rem
}

.chat .chat-header {
	padding: 13px 20px;
	border-bottom: 1px solid #dee2e6
}

.chat .chat-header img {
	float: left;
	border-radius: 40px;
	width: 40px
}

.chat .chat-header .chat-about {
	float: left;
	padding-left: 10px
}

.chat .chat-history {
	padding: 20px;
	border-bottom: 2px solid #fff
}

.chat .chat-history ul {
	padding: 0
}

.chat .chat-history ul li {
	list-style: none;
	margin-bottom: 15px
}

.chat .chat-history ul li:last-child {
	margin-bottom: 0px
}

.chat .chat-history ul li:nth-child(odd) .detail-right {
	margin-right: 0px
}

.chat .chat-history ul li:nth-child(even) .detail-right {
	margin-left: 20px
}

.chat .chat-history ul li:nth-child(odd) .detail-left {
	margin-right: 0px
}

.chat .chat-history ul li:nth-child(even) .detail-left {
	margin-left: 20px
}

.chat .chat-history .message-data {
	width: 50px;
	float: right
}

.chat .chat-history .message-data img {
	border-radius: 40px;
	width: 40px
}

.chat .chat-history .detail-right {
	width: calc(100% - 70px);
	float: right
}

.chat .chat-history .detail-left {
	width: calc(100% - 70px);
	float: right
}

.chat .chat-history .message-data-time {
	color: #434651;
	font-size: 12px
}

.chat .chat-history .message p {
	color: #444;
	padding: 18px 20px;
	line-height: 26px;
	font-size: 16px;
	border-radius: 7px;
	display: inline-block;
	position: relative;
}

.chat .chat-history .my-message p {
	background: #efefef;
  margin-bottom: 0px;
}

.chat .chat-history .other-message {
	width: 100%;
	text-align: right
}

.chat .chat-history .other-message p {
	background: #e8f1f3
}

.chat .chat-history .other-message:after {
	border-bottom-color: #e8f1f3;
	left: 93%
}

.chat .chat-message {
	padding: 20px;
	width: 100%
}

.chat-list .fa.fa-circle {
	visibility: hidden;
}

.chat-list .fa.fa-circle.online,
.chat-list .fa.fa-circle.offline,
.chat-list .fa.fa-circle.me,
.chat-list .fa.fa-circle.out {
	visibility: visible;
}

.online,
.offline,
.out,
.me {
	margin-right: 2px;
	font-size: 8px;
	vertical-align: middle
}

.online {
	color: #86c541
}

.offline {
	color: #e47297
}

.out {
	color: #f2c01d
}

.me {
	color: #1d8ecd
}

.float-right {
	float: right
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0
}

@media only screen and (max-width: 767px) {
	.chat-app .people-list.open {
		left: 0
	}
	.chat-app .chat {
		margin: 0
	}
	.chat-app .chat .chat-header {
		border-radius: 0.55rem 0.55rem 0 0
	}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.chat-app .chat-list {
		overflow-x: auto
	}
	.chat-app .chat-history {
		overflow-x: auto
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	.chat-app .chat-list {
		overflow-x: auto
	}
	.chat-app .chat-history {
		overflow-x: auto
	}
}

.m-b-0 {
	margin-bottom: 0px
}

.m-b-0 {
	margin-bottom: 0px
}

.chatinfo {
	padding-left: 50px;
}

.chat-app.cp-main-menu ul.chat-list {
	padding: 0px;
}

.chat-app.cp-main-menu ul li.more{
	text-align: center;
	color: white;
	padding: 0px;
	border-top-right-radius: 0px;
	border-top-left-radius: 0px;
	margin-bottom: 0px;
}
.chat-app.cp-main-menu ul li.more a{
	color: white!important;
}




@media only screen and (max-width: 767px) {
  .chat-app.msg-list .chat-msg-left{
		display: block;
	}
  .chat-app.msg-list .chat-msg-right{
		display: none;
	}
  .chat-app.msg-history .chat-msg-left{
		display: none;
	}
  .chat-app.msg-history .chat-msg-right{
		display: block;
	}

}





.btn-attached input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}