html,body{height:100%;margin:0;padding:0}#container{flex-direction:column;height:100vh;display:flex;overflow:hidden}#header{border-bottom:1px solid #000;flex-direction:row;flex:none;justify-content:space-between;width:100%;display:flex}#logo{align-items:center;display:flex}#header_controls{justify-content:flex-end;align-items:center;width:200px;margin-right:0;display:flex}#sidebar_toggle,#user_sidebar_toggle{margin-right:5px}#header h1{margin:0 0 0 10px;padding:0}#error{flex-direction:row;flex:none;align-items:center;height:37px;display:flex}#error_text p{color:red;max-width:300px}#error_button{margin:10px}#content{flex-direction:row;flex:auto;display:flex;overflow:hidden}#sidebar{border-right:0 solid;flex-direction:column;flex:0 0 200px;display:flex;overflow:hidden}#chats_container{flex-direction:column;flex:auto;display:flex;overflow:hidden}#chats{border-bottom:1px solid;border-right:1px solid;flex:auto;padding-left:10px;overflow-y:auto}#login{border-right:1px solid;flex-direction:column;flex:none;padding:10px;display:flex}#user_container{border-right:1px solid;flex-direction:row;display:flex}#username{flex:auto}#username h3{margin:0;padding:10px}#logout{flex:none;padding:10px}#chatbox{flex-direction:column;flex:auto;display:flex;overflow:hidden}#chat_header{border-bottom:1px solid;flex:none;padding-left:10px}#chat_window{flex:auto;padding:10px;overflow-y:auto}#chat_input{border-top:1px solid;flex:none;padding:10px;display:flex}#chat_input input{flex:auto;margin-right:10px}#chat_input button{flex:none}#login_inputs{flex-direction:column;margin-bottom:3px;display:flex}#login_inputs input{box-sizing:border-box;width:100%;margin-bottom:5px}#login_buttons{justify-content:space-between;display:flex}#login_buttons button{width:48%}#new_chat{border-bottom:1px solid;border-right:1px solid;flex:none;padding:10px;display:flex}#new_chat_input{flex:auto;margin-right:10px}#new_chat_input input{box-sizing:border-box;width:100%}#new_chat_button{flex:none}#chat_header{border-bottom:1px solid;flex-direction:row;flex:none;justify-content:space-between;align-items:center;padding:5px;display:flex}#chat_header h3{margin:2px}#chat_options{flex-direction:row;display:flex}#chat_options p{margin:0}#users_container{background:#fff;border-left:1px solid;flex-direction:column;flex:0 0 120px;display:flex;overflow:hidden}#users_header{background:#fff;border-bottom:1px solid;flex-direction:row;flex:none;align-items:center;padding-left:10px;display:flex}#users_text{flex:auto}#users_text h3{margin:7px 0;padding:0}#users{flex:auto;padding-left:10px;overflow-y:auto}.user{margin:8px 0;padding:0}.user p{color:#222;margin:0;padding:0;font-size:1rem}#sidebar_mode{border-right:1px solid;flex:none;padding:10px 10px 0;display:flex}#sidebar_mode button{width:50%}#sidebar_mode button:first-child{margin-right:5px}.chat_option{margin-right:10px}.msg_delete{color:red}#add_member{border-top:1px solid;flex:none;padding:5px;display:flex}#add_member input{width:60%;min-width:0;margin-right:5px}.online{color:green}.offline{color:#bbb}#typing{flex:none;padding:0 10px}#typing p{color:#555;margin:2px 0}.chat_image{border:1px solid;max-width:300px;max-height:300px;margin:3px 0;display:block}#chat_input button{margin-left:5px}#image_button svg{vertical-align:middle;height:14px}.msg_time{opacity:.55;font-size:.8em}.date_header{align-items:center;margin:8px 5px;font-size:.8em;display:flex}.date_header:before,.date_header:after{content:"";border-top:1px solid #000;flex:auto}.date_header:before{margin-right:8px}.date_header:after{margin-left:8px}#chat_input .join_button{flex:auto;margin-left:0}