.direct-chat .card-body {
      overflow-x: hidden;
      padding: 0;
      position: relative;
    }

    .direct-chat.chat-pane-open .direct-chat-contacts {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    .direct-chat.timestamp-light .direct-chat-timestamp {
      color: #30465f;
    }

    .direct-chat.timestamp-dark .direct-chat-timestamp {
      color: #cccccc;
    }

    .direct-chat-messages {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      height: 100%;
      overflow: auto;
      padding: 10px;
    }

    .my-direct-chat-text{
      background-color: lightgreen !important;
    }

    .direct-chat-msg,
    .direct-chat-text {
      display: block;
    }

    .direct-chat-msg {
      margin-bottom: 10px;
    }

    .direct-chat-msg::after {
      display: block;
      clear: both;
      content: "";
    }

    .direct-chat-messages,
    .direct-chat-contacts {
      transition: -webkit-transform .5s ease-in-out;
      transition: transform .5s ease-in-out;
      transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
    }

    .direct-chat-text {
      border-radius: 0.3rem;
      background: #d2d6de;
      border: 1px solid #d2d6de;
      color: #444;
      margin: 5px 0 0 50px;
      padding: 5px 10px;
      position: relative;
    }

    .direct-chat-text::after,
    .direct-chat-text::before {
      border: solid transparent;
      border-right-color: #d2d6de;
      content: ' ';
      height: 0;
      pointer-events: none;
      position: absolute;
      right: 100%;
      top: 15px;
      width: 0;
    }

    .direct-chat-text::after {
      border-width: 5px;
      margin-top: -5px;
    }

    .direct-chat-text::before {
      border-width: 6px;
      margin-top: -6px;
    }

    .right .direct-chat-text {
      margin-left: 0;
      margin-right: 50px;
    }

    .right .direct-chat-text::after,
    .right .direct-chat-text::before {
      border-left-color: #d2d6de;
      border-right-color: transparent;
      left: 100%;
      right: auto;
    }

    .direct-chat-img {
      border-radius: 50%;
      float: left;
      height: 40px;
      width: 40px;
    }

    .right .direct-chat-img {
      float: right;
    }

    .direct-chat-infos {
      display: block;
      font-size: 0.875rem;
      margin-bottom: 2px;
    }

    .direct-chat-name {
      font-weight: 600;
    }

    .direct-chat-timestamp {
      color: #697582;
    }

    .direct-chat-contacts-open .direct-chat-contacts {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }

    .direct-chat-contacts {
      -webkit-transform: translate(101%, 0);
      transform: translate(101%, 0);
      background: #343a40;
      bottom: 0;
      color: #ffffff;
      height: 250px;
      overflow: auto;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .direct-chat-contacts-light {
      background: #f8f9fa;
    }

    .direct-chat-contacts-light .contacts-list-name {
      color: #495057;
    }

    .direct-chat-contacts-light .contacts-list-date {
      color: #6c757d;
    }

    .direct-chat-contacts-light .contacts-list-msg {
      color: #545b62;
    }