Projektmanagement-Game/public/css/chat.css

#chat {
    display: flex;
    flex-flow: column;
    overflow: hidden;

    border-left: #7d7d7d solid 2px;
    height: 100%;
}

#messages_received {
    flex: 1 1 90%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 5px;
}

#message_add {
    flex: 0 0 10%;
}

#message_add form {
    height: 100%;
    width: 100%;
}

#message_input {
    height: calc(100% - 10px - 2em - 6px);
    width: calc(100% - 10px);
}

#message_send {
    height: 2em;
    width: 100%;
}

.log_message {
    list-style-type: none;
    padding: 5px;
    font-weight: bold;
    color: #424242;
    text-align: center;
}

.chat_message {
    list-style-type: none;
    margin: 5px;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    background: #0672e6;
    color: #fff;
    position: relative;
}

.me {
    margin-left: 2em;
}

.me:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid #0672e6;
    border-right: 10px solid transparent;
    border-top: 10px solid #0672e6;
    border-bottom: 10px solid transparent;
    right: -10px;
    top: 0;
}

.others {
    margin-right: 2em;
}

.others:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid #0672e6;
    border-top: 10px solid #0672e6;
    border-bottom: 10px solid transparent;
    left: -10px;
    top: 0;
}

.username {
    font-weight: bold;
}

.messageBody {

}

.messageBody::before {
    content: '\A';
    white-space: pre;
}

@media only screen and (max-width: 980px) {
    #chat {
      display: flex;
      flex-flow: column-reverse;
      overflow: hidden;
      border-left: #7d7d7d solid 2px;
      height: 100%;
      margin-bottom: 10px;
    }
  }