body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html{background:#fafafa}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.BG{height:100vh;background:#fafafa;justify-content:center}.BG,.BG .sign-wrapper{display:flex;align-items:center}.BG .sign-wrapper{justify-content:start;flex-direction:column;width:400px;height:335px;background:#fff;margin-top:-200px;box-shadow:0 0 10px #ddd}.BG .sign-wrapper>h3{font-size:24px;margin-top:30px}.BG .sign-wrapper input{border:1px solid #e5e5e5;display:inline-block;vertical-align:top;width:300px;height:35px;margin-top:10px;text-indent:1em;font-size:14px}.BG .sign-wrapper input:focus{outline:none;border:1px solid #4db1f4}.BG .sign-wrapper button{background:#4db1f4;color:#fff;border:none;width:300px;height:35px;display:block;vertical-align:top;font-size:15px;border-radius:3px;margin-top:30px}.BG .sign-wrapper button:focus{outline:none}.BG .sign-wrapper button:hover{background:#18a1e4;cursor:pointer}.BG .sign-wrapper>p{margin-top:13px;font-size:13px;display:inline-block;vertical-align:top;width:300px}.BG .sign-wrapper>p a{color:#4db1f4;cursor:pointer}.dialog{position:fixed;left:0;top:0;text-align:center;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;color:#fff;font-size:20px}.dialog:after{display:block;content:"";background:rgba(0,0,0,.4);height:100%;z-index:-1}.dialog:after,.tip{position:absolute;left:0;top:0;width:100%}.tip{display:flex;justify-content:center;align-items:center}.tip.success section{background:#4db1f4}.tip.error section{background:red}.tip section{padding:10px 50px;-webkit-animation:gradient 1s linear;animation:gradient 1s linear;color:#fff;border-radius:6px}@-webkit-keyframes gradient{0%{opacity:.5}to{opacity:1}}@keyframes gradient{0%{opacity:.5}to{opacity:1}}.room-wrapper{height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.room-wrapper .room{width:1025px;height:600px;background-color:#fff;box-shadow:0 0 10px #ddd;display:flex;justify-content:start}.sliderBar{background:#fcfdfb;width:80px;display:flex;flex-direction:column;align-items:center;height:100%;overflow:hidden;position:relative}.sliderBar .groupChat .icon,.sliderBar .singleChat .icon,.sliderBar header .icon{width:30px;height:30px;border-radius:50%;fill:#dbdbdb}.sliderBar .groupChat .icon.active,.sliderBar .singleChat .icon.active,.sliderBar header .icon.active{fill:#4db1f4}.sliderBar .groupChat .icon:hover,.sliderBar .singleChat .icon:hover,.sliderBar header .icon:hover{cursor:pointer}.sliderBar .setting .icon{width:20px;height:20px;border-radius:50%;fill:#dbdbdb}.sliderBar .setting .icon.active{fill:#4db1f4}.sliderBar .setting .icon:hover{cursor:pointer}.sliderBar header{display:flex;flex-direction:column;align-items:center;margin-top:10px}.sliderBar header .icon{padding:auto}.sliderBar header .username{margin-top:15px;font-size:13px}.sliderBar .singleChat{margin-top:60px}.sliderBar .groupChat{margin-top:20px}.sliderBar .setting{position:absolute;bottom:15px}.addfriend-wrapper{width:100vw;height:100vh;background-color:rgba(0,0,0,.2);display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0}.addfriend-wrapper .addfriend{width:400px;height:170px;background-color:#fff;border-radius:5px;box-shadow:0 0 5px #bfbfbf;display:flex;justify-content:start;flex-direction:column}.addfriend-wrapper .addfriend header{display:flex;justify-content:space-between;align-items:center;height:40px;border-bottom:1px solid #e5e5e5}.addfriend-wrapper .addfriend header span:first-child{margin-left:15px}.addfriend-wrapper .addfriend header span:nth-child(2){color:grey;margin-right:15px}.addfriend-wrapper .addfriend header span:nth-child(2):hover{cursor:pointer}.addfriend-wrapper .addfriend main{height:70px;border-bottom:1px solid #e5e5e5;display:flex;justify-content:start;align-items:center;margin-left:15px}.addfriend-wrapper .addfriend main input{border:1px solid #bfbfbf;width:220px;height:30px;border-radius:5px;text-indent:1em}.addfriend-wrapper .addfriend main input:focus{outline:none;border:1px solid #4db1f4}.addfriend-wrapper .addfriend footer{display:flex;justify-content:revert;align-items:center;flex-direction:row-reverse;flex-grow:1}.addfriend-wrapper .addfriend footer button{width:80px;height:30px;background:#4db1f4;color:#fff;border:none;border-radius:5px;margin-right:15px}.addfriend-wrapper .addfriend footer button:focus{outline:none}.addfriend-wrapper .addfriend footer button:hover{cursor:pointer}.people-wrapper{width:240px;border-right:1px solid #f2f2f2;border-left:1px solid #f2f2f2}.people-wrapper .bubbleitem-wrapper.active{background:#f3f6f6}.people-wrapper .bubbleitem-wrapper .bubbleitem-wrapper-a{text-decoration:none;color:inherit;display:flex;justify-content:start;align-items:center;height:60px;overflow:hidden}.people-wrapper .bubbleitem-wrapper .bubbleitem-wrapper-a .header{margin-left:10px}.people-wrapper .bubbleitem-wrapper .bubbleitem-wrapper-a .header .icon{fill:#dbdbdb;width:40px;height:40px}.people-wrapper .messageinfo{margin-left:10px;margin-right:5px}.receive-wrapper{background-color:rgba(0,0,0,.3);position:fixed;left:0;top:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.receive-wrapper .receive{width:400px;height:170px;background:#fff;border-radius:5px;display:flex;flex-direction:column}.receive-wrapper .receive header{line-height:40px;border-bottom:1px solid #e5e5e5;padding-left:15px}.receive-wrapper .receive main{line-height:70px;border-bottom:1px solid #e5e5e5;padding-left:15px}.receive-wrapper .receive footer{flex-grow:1;display:flex;flex-direction:row-reverse;align-items:center}.receive-wrapper .receive footer button{width:60px;height:30px;border-radius:5px;margin-right:15px;color:#fff;border:none}.receive-wrapper .receive footer button:focus{outline:none}.receive-wrapper .receive footer button:hover{cursor:pointer}.receive-wrapper .receive footer>button:nth-child(2){background:#4db1f4}.receive-wrapper .receive footer>button:first-child{background:red}.Bubblue-wrapper{width:705px;display:flex;flex-direction:column}.Bubblue-wrapper header{height:40px;text-align:center;line-height:40px;width:100%;border-bottom:1px solid #f2f2f2}.Bubblue-wrapper main{height:405px;overflow:auto}.Bubblue-wrapper main .list{overflow:scroll}.Bubblue-wrapper main .list .Bubblueitemwrapper{padding:10px;display:flex}.Bubblue-wrapper main .list .Bubblueitemwrapper.right{flex-direction:row-reverse}.Bubblue-wrapper main .list .Bubblueitemwrapper .header .icon{fill:#dbdbdb;width:40px;height:40px}.Bubblue-wrapper main .list .Bubblueitemwrapper .content-wrapper{padding:0 10px}.Bubblue-wrapper main .list .Bubblueitemwrapper .content-wrapper .name{font-size:16px}.Bubblue-wrapper main .list .Bubblueitemwrapper .content-wrapper .content{margin-top:10px;padding:10px;background:#f3f3f2;border-radius:5px}.Bubblue-wrapper footer{border-top:1px solid #f2f2f2;height:155px;position:relative}.Bubblue-wrapper footer .textarea{position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:70px}.Bubblue-wrapper footer .textarea textarea{width:100%;height:calc(100% - 10px);resize:none;border:none;font-size:16px}.Bubblue-wrapper footer .textarea textarea:focus{outline:none}.Bubblue-wrapper footer button{position:absolute;right:10px;bottom:5px;width:80px;height:25px;border:none;background:#4db1f4;color:#fff}.Bubblue-wrapper footer button:focus{outline:none}.Bubblue-wrapper footer button:hover{background:#18a1e4;cursor:pointer}
/*# sourceMappingURL=main.e700e4b4.chunk.css.map */