html, body {
  margin: 0;
}
.chat-container {
  width: 100%;
  height: calc(100vh - 70px);
  margin: 0; }
  .chat-container .user_id {
    display: none; }
    .chat-container .users {
      max-height: 100%;
      padding-right: 0;
      margin: 0 0 0 0;
    }
    .chat-container .users .users_user {
      justify-content: space-between;
      cursor: pointer; }
      .chat-container .users .users_user .users_user_info {
        pointer-events: none; }
      .chat-container .users .users_user .users_user_id {
        visibility: hidden;
        pointer-events: none; }
      .chat-container .users .users_user .users_user_pic {
        height: 100%;
        width: 20%;
        pointer-events: none; }

      .chat-container .users .users_user .status {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: black; }
      .chat-container .users .users_user .active {
        background-color: lime; }
    .chat-container .users .users_user:hover {
      background-color: #a2c6eb; }
    .chat-container .users .users_userold {
      display: none;
    }
  .chat-container .chat {
    display: flex;
    flex-direction: column;
    height: 100%; }
    .chat-container .chat .chat_history {
      width: 100%;
      height: 80%;
      display: flex;
      flex-direction: column; }
      .chat-container .chat .chat_history .chat_history_none {
        align-self: center;
        display: flex;
        height: 10%; }
        .chat-container .chat .chat_history .chat_history_none p {
          color: blue; }
      .chat-container .chat .chat_history .chat_history_user {
        width: 100%;
        height: 67px;
        background-color: #3949ab;
        display: flex;
        justify-content: space-between; }
        .chat-container .chat .chat_history .chat_history_user .chat_history_user_pic {
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          height:70px;
          width: 70px;
          margin: 0;
          scale: 0.7; }
        .chat-container .chat .chat_history .chat_history_user .chat_history_user_info {
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: bold;
          margin-right: 70px; }
        .chat-container .chat .chat_history .chat_history_user .chat_history_user_id {
          visibility: hidden; }
      .chat-container .chat .chat_history .chat_history_chat {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        background-color: #fafafa; }
        .chat-container .chat .chat_history .chat_history_chat .chat_history_chat_sent {
          width: 45%;
          display: flex;
          flex-direction: column;
          align-self: flex-end;
          background-color: #00ff99;
          border-radius: 4px;
          padding: 5px;
          margin-top: 5px;
          margin-right: 15px;
          word-wrap: break-word; }
        .chat-container .chat .chat_history .chat_history_chat .chat_history_chat_received {
          width: 45%;
          display: flex;
          flex-direction: column;
          align-self: flex-start;
          background-color: #56b0ff;
          border-radius: 4px;
          padding: 5px;
          margin-top: 5px;
          margin-left: 15px; 
          word-wrap: break-word; }
    .chat-container .chat .chat_box {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fafafa;
      border-top: 1px grey solid; }
      .chat-container .chat .chat_box form {
        display: flex;
        align-items: center;
        width: 90%;
        height: 90%; }