@import url(https://use.fontawesome.com/releases/v5.8.1/css/all.css);
.wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}
body{font-family:Segoe UI;background:#e4e4e6;margin:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;height:100vh}.login-form,body{display:-webkit-box;display:-ms-flexbox;display:flex}.login-form{width:40vh;height:55vh;background:#54b0ff;border-radius:4vh;-webkit-box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.login-form h1{margin:0;font-size:3.5vh;padding:3vh 4vh}.controls{background:#fff;border-radius:4vh;height:100%;padding:4vh}.input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.controls input{width:85%;height:5vh;margin:.5vh 0;padding:0 1.5vh;border:1px solid #a8c3f3;border-radius:.5vh;font-size:1.7vh;font-family:Segoe UI;font-weight:100;outline:none}.controls input:focus{border:1px solid #6e9ff7}.controls button{color:#fff;background:#3f8ed2;border-radius:2vh;border:none;padding:1.3vh 6vh;margin-top:20vh;width:90%;font-size:1.6vh;font-family:Segoe UI;font-weight:500;outline:none}.chat-board{width:120vh;height:85vh;background:#3a3d44;border-radius:4vh;-webkit-box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);box-shadow:0 8px 17px 2px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.2);display:-webkit-box;display:-ms-flexbox;display:flex}.user-info{color:#fff;width:25vh;min-width:25vh;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.user-info h2{font-weight:100}.chat-wrapper{background:#eceff1;border-radius:4vh;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.chat-wrapper h1{padding:3vh;margin:0;font-weight:400;font-size:3.4vh}.chat-window{background:#e3e6ea;border-radius:4vh;height:100%;max-height:100%;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.message-list{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:3;-ms-flex-positive:3;flex-grow:3;outline:1px orange;padding:3vh;overflow-y:scroll;overflow-x:hidden}.message{margin:1vh 0;max-width:80%}.self-message{margin:1vh 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.self-message .text{background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);display:inline-block;padding:2vh;border-radius:1vh;max-width:80%;font-size:1.6vh}.self-message .message-name{text-align:right}.self-message .message-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.self-message .text-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.self-message .message-date{color:#7b7b7b}.message-date{text-align:right;color:#d2d2d2;font-size:1vh;margin-top:.5vh}.message-name{font-weight:100;font-size:2vh;margin:.5vh 0}.message .text{display:inline-block;background:#039be5;color:#fff;padding:2vh;border-radius:1vh;font-size:1.6vh}.message-input{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:1vh 3vh;background:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:10}.message-input input{-webkit-box-flex:3;-ms-flex-positive:3;flex-grow:3;padding:1.5vh 0;border:none;outline:none;font-size:1.6vh}.message-input button{border:none;outline:none;background:rgba(0,0,0,0);font-size:2.5vh;cursor:pointer;color:#6fa1d4}.user-avatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:2.5vh 0}.user-avatar img{width:7vh;height:7vh;border-radius:200px}.info-header{padding:3vh}.info-header h1{margin:0;font-weight:400;font-size:3.4vh}.login{font-weight:400;color:#6994c1}.login,.nickname{text-align:center;font-size:1.7vh}.nickname{font-weight:100}.chat-menu ul{list-style:none;padding:0;margin:0}.chat-menu a{text-decoration:none;color:#fff;display:block;padding:1.5vh 2vh;font-size:1.7vh}.chat-menu .title{margin:1vh 0;padding:0 2vh;color:#b9b9b9;font-size:1.5vh}.user-menu ul{list-style:none;padding:0;margin:0 0 2vh}.user-menu a{background:-webkit-gradient(linear,left top,right top,from(rgba(114,119,123,.36)),to(rgba(0,0,0,0)));background:-o-linear-gradient(left,rgba(114,119,123,.36),rgba(0,0,0,0));background:linear-gradient(90deg,rgba(114,119,123,.36),rgba(0,0,0,0));text-decoration:none;color:#fff;display:block;padding:1.5vh 2vh;font-size:1.7vh}.current{background:-webkit-gradient(linear,left top,right top,from(rgba(49,144,226,.36)),to(rgba(0,0,0,0)));background:-o-linear-gradient(left,rgba(49,144,226,.36),rgba(0,0,0,0));background:linear-gradient(90deg,rgba(49,144,226,.36),rgba(0,0,0,0));position:relative}.current a:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:#039be5;border-radius:0 4px 4px 0}