*{box-sizing:border-box}body{background-color:#d2dbdc;font-family:Segoe UI,Helvetica,Lucida Grande,Arial;margin:0}.app-window{background-color:#ededed;display:flex;height:100vh}.sidebar{border-right:1px solid #ddd;display:flex;flex-direction:column;max-width:415px;width:35%}header{align-items:center;display:flex;height:60px;justify-content:space-between;padding:0 15px}.header-avatar{border-radius:50%;cursor:pointer;height:40px;width:40px}.header-btn,.header-buttons{display:flex}.header-btn{align-items:center;border-radius:50%;cursor:pointer;height:40px;justify-content:center;width:40px}.search{background-color:#f6f6f6;border-bottom:1px solid #eee;padding:5px 15px}.search-input{align-items:center;background-color:#fff;border-radius:20px;display:flex;height:40px;padding:0 10px}.search-input input{background-color:initial;border:0;flex:1 1;margin-left:10px;outline:0}.chatlist{background-color:#fff;flex:1 1;overflow-y:auto}.chatlist::-webkit-scrollbar{background-color:initial;border-radius:3px;height:6px;width:6px}.chatlist::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.contentarea{flex:1 1;min-width:0}@media (max-width:900px){.sidebar{max-width:none;width:40%}}@media (max-width:768px){.app-window{overflow:hidden;position:relative}.sidebar{border-right:none;bottom:0;left:0;max-width:none;position:absolute;right:0;top:0;transform:translateX(0);transition:transform .3s ease;width:100%;z-index:1}.app-window.chat-open .sidebar{pointer-events:none;transform:translateX(-100%)}.contentarea{bottom:0;left:0;position:absolute;right:0;top:0;transform:translateX(100%);transition:transform .3s ease;z-index:2}.app-window.chat-open .contentarea{transform:translateX(0)}header{background-color:#f0f2f5;height:56px;padding:0 12px}.header-btn{height:36px;width:36px}.search{padding:5px 10px}}@media (max-width:480px){.header-avatar{height:36px;width:36px}.search-input{height:36px}.search-input input{font-size:14px}}.chatListItem{align-items:center;cursor:pointer;display:flex;height:70px}.chatListItem:hover{background-color:#f5f5f5}.chatListItem.active{background-color:#ebebeb}.chatListItem--avatar{border-radius:50%;height:50px;margin-left:15px;width:50px}.chatListItem--lines{border-bottom:1px solid #eee;display:flex;flex:1 1;flex-direction:column;flex-wrap:wrap;height:100%;justify-content:center;margin-left:15px;min-width:0;padding-right:15px}.chatListItem--line{align-items:center;display:flex;justify-content:space-between;width:100%}.chatListItem--name{color:#000;font-size:17px}.chatListItem--date{color:#999;font-size:12px}.chatListItem--lastMessage{color:#999;display:flex;font-size:14px;width:100%}.chatListItem--lastMessage p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:480px){.chatListItem{height:62px}.chatListItem--avatar{height:44px;margin-left:12px;width:44px}.chatListItem--lines{margin-left:12px;padding-right:12px}.chatListItem--name{font-size:15px}.chatListItem--lastMessage{font-size:13px}}.chatIntro{align-items:center;background-color:#f8f9fa;border-bottom:6px solid #4adf83;display:flex;flex-direction:column;height:100%;justify-content:center}.chatIntro img{height:auto;margin-bottom:20px;width:250px}.chatIntro h1{color:#525252;font-size:32px;font-weight:400;margin-top:30px}.chatIntro h2{color:#777;font-size:14px;font-weight:400;line-height:20px;margin-top:20px;text-align:center}.chatWindow{display:flex;flex-direction:column;height:100%}.chatWindow--header{align-items:center;border-bottom:1px solid #ccc;display:flex;height:60px;justify-content:space-between}.chatWindow--headerinfo{align-items:center;cursor:pointer;display:flex}.chatWindow--avatar{border-radius:50%;height:40px;margin-left:15px;margin-right:15px;width:40px}.chatWindow--name{color:#000;font-size:17px}.chatWindow--headerbuttons{align-items:center;display:flex;margin-right:15px}.chatWindow--btn{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;overflow:hidden;transition:all .3s ease;width:40px}.chatWindow--body{background-color:#e5ddd5;background-image:url(https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png);background-position:50%;background-size:cover;flex:1 1;overflow-y:auto;padding:20px 30px}.chatWindow--body::-webkit-scrollbar{background-color:initial;border-radius:3px;height:6px;width:6px}.chatWindow--body::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.chatWindow--footer{align-items:center;display:flex;height:62px}.chatWindow--pre{display:flex;margin:0 15px}.chatWindow--inputarea{flex:1 1}.chatWindow--input{background-color:#fff;border:none;border-radius:20px;color:#4a4a4a;font-size:15px;height:40px;outline:none;padding-left:15px;width:100%}.chatWindow--pos{display:flex;margin:0 15px}.chatWindow--emojiarea{height:0;overflow-y:hidden;transition:all .3s ease}.EmojiPickerReact{width:auto!important}.EmojiPickerReact,.EmojiPickerReact .epr-emoji-category-label{background:none!important}@media (max-width:768px){.chatWindow--body{padding:10px 12px}.chatWindow--header{background-color:#f0f2f5;padding:0 4px}.chatWindow--avatar{margin-left:8px;margin-right:10px}.chatWindow--name{font-size:15px}.chatWindow--headerbuttons{margin-right:4px}.chatWindow--pos,.chatWindow--pre{margin:0 8px}}@media (max-width:480px){.chatWindow--input{font-size:14px;height:38px}.chatWindow--btn{height:36px;width:36px}.chatWindow--avatar{height:34px;width:34px}.chatWindow--name{font-size:14px}.messageItem{max-width:95%}}.messageLine{display:flex;margin-bottom:10px}.messageItem{background-color:#fff;border-radius:10px;box-shadow:0 1px 1px #ccc;display:flex;flex-direction:column;max-width:90%;min-width:0;padding:3px}.messageText{word-wrap:break-word;font-size:14px;margin:5px;min-width:0;overflow-wrap:break-word;word-break:break-word}.messageDateInline{color:#999;float:right;font-size:11px;margin-left:15px;margin-top:5px}.newChat{background-color:#fff;border-right:1px solid #ddd;bottom:0;display:flex;flex-direction:column;left:0;max-width:415px;position:fixed;top:0;transition:all .5s ease-in-out;width:35%;z-index:10}@media (max-width:768px){.newChat{border-right:none;max-width:none;width:100%}}.newChat--head{align-items:center;background-color:#00bfa5;display:flex;padding:60px 15px 15px}.newChat-backbutton{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:40px;justify-content:center;width:40px}.newChat-headtitle{color:#fff;flex:1 1;font-size:19px;font-weight:700;height:40px;line-height:40px;margin-left:20px}.newChat--list{flex:1 1;overflow-y:auto}.newChat--list::-webkit-scrollbar{background-color:initial;border-radius:3px;height:6px;width:6px}.newChat--list::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.newChat--item{align-items:center;cursor:pointer;display:flex;padding:15px}.newChat--item:hover{background-color:#f5f5f5}.newChat--item--avatar{border-radius:50%;height:50px;margin-right:15px;width:50px}.newChat--item--name{color:#000;font-size:17px}.login{align-items:center;background-color:#f0f2f5;background-image:linear-gradient(180deg,#00a884 0,#00a884 210px,#f0f2f5 0,#f0f2f5);display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:center;min-height:100vh;padding:20px}.login-container{background-color:#fff;border-radius:3px;box-shadow:0 17px 50px 0 #00000030,0 12px 15px 0 #0000003d;max-width:400px;padding:50px;text-align:center;width:90%}.login-logo{margin-bottom:10px;width:80px}.login-title{color:#41525d;font-size:24px;font-weight:300;margin-bottom:30px}.login-btn-google{align-items:center;background-color:#fff;border:1px solid #dadce0;border-radius:4px;color:#3c4043;cursor:pointer;display:flex;font-size:14px;font-weight:500;justify-content:center;margin-bottom:25px;padding:12px;transition:background-color .2s;width:100%}.login-btn-google img{margin-right:10px;width:18px}.login-btn-google:hover{background-color:#f7f8f8}.login-divider{align-items:center;color:#8696a0;display:flex;font-size:12px;margin-bottom:25px;text-align:center}.login-divider:after,.login-divider:before{border-bottom:1px solid #e9edef;content:"";flex:1 1}.login-divider span{padding:0 10px}.login-demo-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(2,1fr);margin-top:20px}.login-demo-item{align-items:center;background-color:#f7f8f8;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;padding:12px;transition:background-color .2s,transform .1s}.login-demo-item:hover{background-color:#f0f2f5;transform:translateY(-2px)}.login-demo-item img{border-radius:50%;height:40px;margin-bottom:8px;width:40px}.login-demo-item span{color:#41525d;font-size:13px;font-weight:500}.login-footer{color:#8696a0;font-size:13px;margin-top:25px;text-align:center}@media (max-width:480px){.login{background-image:linear-gradient(180deg,#00a884 0,#00a884 120px,#f0f2f5 0,#f0f2f5);padding:15px}.login-container{border-radius:8px;padding:30px 20px;width:100%}.login-title{font-size:20px;margin-bottom:20px}.login-demo-grid{gap:10px;grid-template-columns:repeat(2,1fr)}.login-demo-item{padding:10px 8px}.login-demo-item img{height:36px;width:36px}}