/*Chat UI*/
/* line 4, ../sass/cp_chart_ui.scss */
.chat-search {
  width: 100%;
  border-bottom: 1px solid #dedede;
}
/* line 7, ../sass/cp_chart_ui.scss */
.chat-search .input-group {
  width: 100%;
}
/* line 9, ../sass/cp_chart_ui.scss */
.chat-search .input-group .form-control {
  height: 36px;
  border-radius: 50px;
  padding-right: 30px;
  background: #fff;
}
/* line 15, ../sass/cp_chart_ui.scss */
.chat-search .input-group .input-group-btn {
  position: absolute;
  right: 22px;
  top: 8px;
  z-index: 4;
}
/* line 20, ../sass/cp_chart_ui.scss */
.chat-search .input-group .input-group-btn > .btn {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  padding: 0;
}
/* line 24, ../sass/cp_chart_ui.scss */
.chat-search .input-group .input-group-btn > .btn i {
  color: #878787;
  font-size: 20px;
}

/* line 33, ../sass/cp_chart_ui.scss */
.add-friend {
  margin-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
/* line 37, ../sass/cp_chart_ui.scss */
.add-friend span {
  text-transform: capitalize;
  font-size: 16px;
  width: 33.33%;
  float: left;
  text-align: center;
  vertical-align: middle;
}
/* line 46, ../sass/cp_chart_ui.scss */
.add-friend a {
  width: 33.33%;
  float: left;
  font-size: 18px;
}

/* line 55, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body > a {
  border-bottom: 1px solid #dedede;
  display: block;
}
/* line 59, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data {
  padding: 10px 15px;
  position: relative;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  transition: 0.2s ease;
}
/* line 63, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data:hover {
  background: rgba(33, 33, 33, 0.05);
}
/* line 66, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data.active-user {
  background: rgba(33, 33, 33, 0.05);
}
/* line 69, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .user-img {
  height: 35px;
  width: 35px;
  float: left;
  margin-right: 15px;
}
/* line 75, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .user-data {
  float: left;
}
/* line 77, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .user-data .time {
  font-size: 12px;
  margin-top: 2px;
  width: 165px;
}
/* line 83, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .status {
  border: 2px solid #fff;
  border-radius: 50%;
  height: 10px;
  position: absolute;
  left: 40px;
  top: 37px;
  width: 10px;
}
/* line 91, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .status.away {
  background: #f8b32d;
}
/* line 94, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .status.offline {
  background: #f33923;
}
/* line 97, ../sass/cp_chart_ui.scss */
.chat-list-wrap .chat-body .chat-data .status.online {
  background: #4aa23c;
}

/* line 106, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .panel-heading {
  padding: 0;
  background: transparent;
}
/* line 109, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .panel-heading .goto-back {
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  border-bottom: 1px solid #dedede;
}
/* line 114, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .panel-heading .goto-back span {
  text-transform: capitalize;
  font-size: 16px;
  width: 33.33%;
  float: left;
  text-align: center;
  vertical-align: middle;
}
/* line 123, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .panel-heading .goto-back a {
  width: 33.33%;
  float: left;
  font-size: 18px;
}
/* line 131, ../sass/cp_chart_ui.scss */
.recent-chat-wrap.card-view {
  border: none;
  padding: 0;
  margin: 0;
}
/* line 136, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group {
  width: 100%;
  display: block;
}
/* line 139, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-msg-send {
  background: rgba(33, 33, 33, 0.05);
  border: medium none;
  height: 60px;
  padding-right: 60px;
}
/* line 145, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-group-btn {
  position: absolute;
  right: 22px;
  top: 20px;
  z-index: 4;
}
/* line 150, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-group-btn .btn {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  padding: 0;
}
/* line 154, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-group-btn .btn:hover, .recent-chat-wrap .input-group .input-group-btn .btn:active, .recent-chat-wrap .input-group .input-group-btn .btn:focus {
  background: transparent none repeat scroll 0 0;
}
/* line 157, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-group-btn .btn i {
  color: rgba(33, 33, 33, 0.2);
  font-size: 20px;
}
/* line 162, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .input-group .input-group-btn.emojis {
  right: 50px;
}
/* line 168, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content .user-img {
  height: 27px;
  width: 27px;
  position: absolute;
}
/* line 174, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content ul li {
  padding: 0 15px;
  margin-bottom: 20px;
  position: relative;
}
/* line 180, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content .msg {
  padding: 7px 15px;
  color: #212121;
  max-width: 100%;
  overflow-wrap: break-word;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
/* line 187, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content .msg .msg-per-detail span {
  font-size: 10px;
  text-transform: uppercase;
}
/* line 195, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content .friend .friend-msg-wrap .msg {
  margin-left: 37px;
  background: rgba(33, 33, 33, 0.04) none repeat scroll 0 0;
  border-radius: 15px;
}
/* line 205, ../sass/cp_chart_ui.scss */
.recent-chat-wrap .chat-content .self .self-msg-wrap .msg {
  background: rgba(74, 162, 60, 0.24) none repeat scroll 0 0;
  margin-left: 100px;
  border-radius: 15px;
}

/* line 216, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap {
  position: relative;
}
/* line 218, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap .chat-box-wrap {
  left: 0;
  position: relative;
  -webkit-transition: left 0.4s ease 0s;
  -moz-transition: left 0.4s ease 0s;
  transition: left 0.4s ease 0s;
}
/* line 223, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap .recent-chat-box-wrap {
  position: absolute;
  right: -300px;
  top: 0;
  -webkit-transition: right 0.4s ease 0s;
  -moz-transition: right 0.4s ease 0s;
  transition: right 0.4s ease 0s;
  width: 100%;
  z-index: 2;
}
/* line 232, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-box-slide .chat-box-wrap {
  left: -300px;
}
/* line 235, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-box-slide .recent-chat-box-wrap {
  right: 0;
}
/* line 239, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets, .chat-cmplt-wrap.chat-for-widgets-1 {
  height: 370px;
  overflow: hidden;
}
/* line 242, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets .recent-chat-box-wrap, .chat-cmplt-wrap.chat-for-widgets-1 .recent-chat-box-wrap {
  position: absolute;
  right: -100%;
}
/* line 247, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets.chat-box-slide .chat-box-wrap, .chat-cmplt-wrap.chat-box-slide.chat-for-widgets-1 .chat-box-wrap {
  left: -100%;
}
/* line 250, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets.chat-box-slide .recent-chat-box-wrap, .chat-cmplt-wrap.chat-box-slide.chat-for-widgets-1 .recent-chat-box-wrap {
  right: 0;
}
/* line 255, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 {
  height: 596px;
}
/* line 257, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 .chat-search {
  padding: 0;
}
/* line 260, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 .chat-search .input-group input {
  height: 52px;
  border-radius: 0;
  border: none;
}
/* line 265, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 .chat-search .input-group .input-group-btn {
  top: 18px;
}
/* line 271, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 .chat-box-wrap {
  float: left;
  width: 30%;
}
/* line 275, ../sass/cp_chart_ui.scss */
.chat-cmplt-wrap.chat-for-widgets-1 .recent-chat-box-wrap {
  border-left: 1px solid rgba(33, 33, 33, 0.05);
  float: left;
  position: relative;
  right: 0;
  width: 70%;
}