#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}#messages_received div:last-child{margin-bottom:5em}#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::before{content:'\A';white-space:pre}@media only screen and (max-width:980px){#chat{flex-flow:column-reverse;border-top:#7d7d7d solid 2px;height:100%;margin-bottom:10px}.log_message{font-size:2em}.chat_message .username{font-size:2em}.chat_message .messageBody{font-size:2em}#message_input{font-size:2em}#message_send{font-size:2em}}