.relations-wrap{background-color:#f5f5f5;padding:24px;display:flex}.relations-wrap .relations-list-wrap{display:flex;justify-content:center;margin:0 8px}.relations-list-subheader{display:flex;align-items:center}.relations-list-subheader .search-text-field .MuiInputBase-root{padding-right:0}.channels-wrap{display:flex;width:900px;height:650px}.channels-wrap .left{flex-shrink:0;overflow-y:auto}.channels-wrap .right{flex-grow:1;overflow-y:auto}.channel-info{display:flex;flex-direction:column;padding:0 0 24px;width:520px}.channel-info .header{display:flex;flex-direction:row;align-items:center;padding:0 32px}.channel-info .header .group-name{margin:0 0 0 8px}.channel-info .members{max-height:500px;overflow-y:auto}.channels-wrap .channels-list{width:280px;border-right:1px solid #bdbdbd;min-height:100%}.channels-wrap .channels-list .active-channel{border-left:4px solid #1976d2}.channels-wrap .conversation-wrap{width:100%;height:100%;display:flex;flex-direction:column}.channels-wrap .conversation-wrap .messages{flex-grow:1;overflow-y:auto;padding:8px}.channels-wrap .conversation-wrap .input-area{flex-shrink:0;height:56px;display:flex;flex-direction:row}.channels-wrap .conversation-wrap .input-area .send-btn{flex-shrink:0;width:120px}.conversation-wrap .conversation-header{padding:8px;display:flex;border-bottom:1px solid #f5f5f5}.message-bubble-wrap{display:flex;flex-direction:row;margin-bottom:12px}.message-bubble-wrap.my-self{flex-direction:row-reverse}.message-content{display:flex;flex-direction:column}.message-content .message-from{max-width:256px;margin-left:8px}.message-sys{display:flex;justify-content:center;align-items:center;margin-bottom:16px}.message-sys .message-sys-content{max-width:360px;color:#0000004d;border-radius:16px;padding:8px 16px;word-wrap:break-word}.message-bubble{display:inline-flex;max-width:256px;border-radius:6px;background-color:#f5f5f5;padding:12px 18px;white-space:normal;word-break:break-all;margin-left:8px}.message-bubble.message-join-group{flex-direction:column}.message-bubble-wrap.my-self .message-bubble{background-color:#e5f6fd;margin-left:0;margin-right:8px}.message-bubble-wrap.my-self .message-from{margin-right:8px}.custom-step-content{margin-left:12px;padding-left:20px;padding-right:8px;border-left:1px solid #bdbdbd}.chat-btn-wrap{margin-top:24px}html,body{margin:0;padding:0}div{box-sizing:border-box}.App{display:flex;min-height:100vh;justify-content:center;align-items:center;flex-direction:column;padding:64px 0}.MuiListItemText-root .MuiListItemText-primary,.MuiListItemText-root .MuiListItemText-secondary,.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.MuiListItem-root.MuiListItem-padding>.MuiListItemButton-root{padding-right:64px}