.messaging .card {
 transition: 0.5s !important;
 border-radius: 0.55rem !important;
 position: relative;
 width: 100%;
}

.chat-app .people-list {
 width: 300px;
 position: absolute;
 left: 0;
 top: 0;
 padding: 20px;
 z-index: 7;
}

.chat-app .chat {
 margin-left: 280px;
 border-left: 1px solid #eaeaea;
}

.people-list {
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 -webkit-transition: 0.5s;
 transition: 0.5s;
}

.people-list .chat-list li {
 padding: 10px 15px;
 list-style: none;
 border-radius: 3px;
}

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

.people-list .chat-list li.active {
 background: #efefef;
}

.people-list .chat-list li .name {
 font-size: 15px;
}

.people-list .chat-list img {
 width: 45px;
 border-radius: 50%;
}

.people-list img {
 float: left;
 border-radius: 50%;
}

.people-list .about {
 float: left;
 padding-left: 8px;
}

.people-list .status {
 color: #999;
 font-size: 13px;
}

.chat .chat-header {
 padding: 15px 20px;
 border-bottom: 2px solid #f4f7f6;
}

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

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

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

.online {
 color: #86c541;
}

.offline {
 color: #e47297;
}

.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 {
  height: 465px;
  width: 100%;
  overflow-x: auto;
  background: #fff;
  left: -400px;
  display: none;
 }

 .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 {
  height: 650px;
  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 {
  height: 480px;
  overflow-x: auto;
 }
}

.chat-message-input:focus,
.chat-message-input:active,
.chat-message-input:active:focus {
 border: none !important;
 outline: none !important;
 box-shadow: none !important;
 filter: none !important;
}

.chat-message-input {
 border: none !important;
 outline: none !important;
 box-shadow: none !important;
 filter: none !important;
}