.chat{
    max-width: 100%;
}

.messages,
.chat-messages,
.chat-textarea,
.chat-name {
    border:1px solid #bbb;
}

/* Home */
.chat-list {
    width:100%;
    height:350px;
    overflow-y:scroll;
}

/* Conversation */
.chat-name {
    width:100%;
    height:50px;
    padding:10px;
    margin:0;
    border-bottom:0;
}

.chat-messages {
    width:100%;
    height:500px;
    overflow-y:scroll;
}

.chat-textarea {
    width:100%;
    height:50px;
    padding:10px;
    margin:0;
    border-top:0;
}

/* -------------------------------------------------------------------------- */

.messages .message {
  padding: 15px;
  border-bottom: 1px solid #EBEEF1;
  position: relative;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear; }
  .messages .message.active, .messages .message:hover {
    background: #F7F9FD; }
  .messages .message .time {
    position: absolute;
    top: 13px;
    right: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #809bca; }
  .messages .message .avatar {
    width: 23%; }
    @media (max-width: 991px) {
      .messages .message .avatar {
        display: none; } }
    .messages .message .avatar img {
      width: 50px;
      border-radius: 50%; }
  .messages .message .info {
    width: 76%;
    display: block;
    text-decoration: none;
    color: #444; }
    @media (max-width: 991px) {
      .messages .message .info {
        width: 95%; } }
    .messages .message .info .name {
      font-weight: 600; }
      /*display: block; }*/
    .messages .message .info .subject {
      font-weight: 600;
      color: #7B8085;
      margin-top: 3px;
      display: block; }
    .messages .message .info .intro {
      font-size: 13px;
      line-height: 20px;
      margin-top: 7px;
      width: 80%;
      color: #707780;
      display: block; }
      @media (max-width: 991px) {
        .messages .message .info .intro {
          width: 90%; } }

/* -------------------------------------------------------------------------- */
section {
    max-width: 90%;
    margin: 0px auto;
}
section div {
    // max-width: 90%;
    // max-width: 255px;
    word-wrap: break-word;
    margin-bottom: 20px;
    line-height: 24px;
}

.clear {
    clear: both;
}

.from-me {
    position: relative;
    padding: 10px 20px;
    color: white;
    background: #0B93F6;
    border-radius: 25px;
    float: right;
}
.from-me:before {
    content: "";
    position: absolute;
    // z-index: -1;
    bottom: -2px;
    right: -7px;
    height: 20px;
    border-right: 20px solid #0B93F6;
    border-bottom-left-radius: 16px 14px;
    -webkit-transform: translate(0, -2px);
}
.from-me:after {
    content: "";
    position: absolute;
    // z-index: 1;
    bottom: -2px;
    right: -56px;
    width: 26px;
    height: 20px;
    background: white;
    border-bottom-left-radius: 10px;
    -webkit-transform: translate(-30px, -2px);
}

.from-them {
    position: relative;
    padding: 10px 20px;
    background: #E5E5EA;
    border-radius: 25px;
    color: black;
    float: left;
}
.from-them:before {
    content: "";
    position: absolute;
    // z-index: 2;
    bottom: -2px;
    left: -7px;
    height: 20px;
    border-left: 20px solid #E5E5EA;
    border-bottom-right-radius: 16px 14px;
    -webkit-transform: translate(0, -2px);
}
.from-them:after {
    content: "";
    position: absolute;
    // z-index: 3;
    bottom: -2px;
    left: 4px;
    width: 26px;
    height: 20px;
    background: white;
    border-bottom-right-radius: 10px;
    -webkit-transform: translate(-30px, -2px);
}
