.chat-container {
  width: 100%;
  height: 500px; }
  .chat-container .user_id {
    display: none; }
    .chat-container .users {
      height: 100%;
      padding-right: 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 .chat {
    display: flex;
    flex-direction: column;
    height: 500px; }
    .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: 70px;
        background-color: #455a64;
        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:100%;
          width: 70px;
          margin-left: 15px; }
        .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; }
        .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: 80%;
        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: #26a69a;
          border-radius: 10px;
          padding: 5px;
          margin-top: 5px;
          margin-right: 15px;}
        .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: #26c6da;
          border-radius: 10px;
          padding: 5px;
          margin-top: 5px;
          margin-left: 15px; }
    .chat-container .chat .chat_box {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fafafa; }
      .chat-container .chat .chat_box form {
        display: flex;
        align-items: center;
        width: 90%;
        height: 90%; }