@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);.App{background:#fff;color:#212121;display:grid;font-family:Open Sans,sans-serif;height:100vh;place-items:center;width:100vw}body{margin:0;padding:0}.joinChatContainer{display:flex;flex-direction:column;text-align:center}.joinChatContainer h3{font-size:2.5rem;margin-bottom:1rem}.joinChatContainer input{border:2px solid #52585e;border-radius:5px;font-size:16px;height:40px;margin:7px;padding:5px;width:210px}.joinChatContainer button{background:#52585e;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;height:50px;margin:7px;padding:5px;width:225px}.joinChatContainer button:hover{background:#2e7d32}.chat-window{height:420px;width:300px}.chat-window p{margin:0}.chat-window .chat-header{background:#06113c;border-radius:6px;cursor:pointer;height:45px;position:relative}.chat-window .chat-header p{color:#fff;display:block;font-weight:700;line-height:45px;padding:0 1em 0 2em}.chat-window .chat-body{background:#fff;border:1px solid #263238;height:335px;position:relative}.chat-window .chat-body .message-container{height:100%;overflow-x:hidden;overflow-y:scroll;width:100%}.chat-window .chat-body .message-container::-webkit-scrollbar{display:none}.chat-window .chat-body .message{display:flex;height:auto;padding:10px}.chat-window .chat-body .message .message-content{align-items:center;background-color:#efefef;border-radius:5px;color:#000;display:flex;height:auto;margin-left:5px;margin-right:5px;max-width:120px;min-height:40px;overflow-wrap:break-word;padding-left:5px;padding-right:5px;width:auto;word-break:break-word}#you,#you .message-content,#you .message-meta{justify-content:flex-start}#you .message-meta{margin-left:5px}#other,#other .message-content{justify-content:flex-end}#other .message-content{background-color:#e8f1f3}#other .message-meta{justify-content:flex-end;margin-right:5px}.message-meta #author{font-weight:700;margin-left:10px}.chat-window .chat-body .message .message-meta{display:flex;font-size:12px}.chat-window .chat-footer{border:1px solid #263238;border-top:none;display:flex;height:40px}.chat-window .chat-footer input{border:0;border-right:1px dotted #607d8b;flex:85% 1;font-family:Open Sans,sans-serif;font-size:1em;height:100%;outline:none;padding:0 .7em}.chat-window .chat-footer button{background:transparent;border:0;color:#d3d3d3;cursor:pointer;display:grid;flex:15% 1;font-size:25px;height:100%;outline:none;place-items:center}.chat-window .chat-footer button:hover{color:#52585e}.hide{opacity:0!important}body{background-color:#f4f7f6;margin-top:20px}.card{background:#fff;border:0;border-radius:.55rem;box-shadow:0 1px 2px 0 rgba(0,0,0,.1);margin-bottom:30px;position:relative;transition:.5s;width:100%}.chat-app .people-list{left:0;padding:20px;position:absolute;top:0;width:280px;z-index:7}.chat-app .chat{border-left:1px solid #eaeaea;margin-left:280px}.people-list{transition:.5s}.people-list .chat-list li{border-radius:3px;list-style:none;padding:10px 15px}.people-list .chat-list li:hover{background:#efefef;cursor:pointer}.people-list .chat-list li.active{background:#efefef}.people-list .chat-list li .name{font-size:15px}.people-list .chat-list img{border-radius:50%;width:45px}.people-list img{border-radius:50%;float:left}.people-list .about{float:left;padding-left:8px}.people-list .status{color:#999;font-size:13px}.chat .chat-header{border-bottom:2px solid #f4f7f6;padding:15px 20px}.chat .chat-header img{border-radius:40px;float:left;width:40px}.chat .chat-header .chat-about{float:left;padding-left:10px}.chat .chat-history{border-bottom:2px solid #fff;padding:20px}.chat .chat-history ul{padding:0}.chat .chat-history ul li{list-style:none;margin-bottom:30px}.chat .chat-history ul li:last-child{margin-bottom:0}.chat .chat-history .message-data{margin-bottom:15px}.chat .chat-history .message-data img{border-radius:40px;width:40px}.chat .chat-history .message-data-time{color:#434651;padding-left:6px}.chat .chat-history .message{border-radius:7px;color:#444;display:inline-block;font-size:16px;line-height:26px;padding:18px 20px;position:relative}.chat .chat-history .message:after{border:10px solid transparent;border-bottom-color:#fff;bottom:100%;content:" ";height:0;left:7%;margin-left:-10px;pointer-events:none;position:absolute;width:0}.chat .chat-history .my-message{background:#efefef}.chat .chat-history .my-message:after{border:10px solid transparent;border-bottom-color:#efefef;bottom:100%;content:" ";height:0;left:30px;margin-left:-10px;pointer-events:none;position:absolute;width:0}.chat .chat-history .other-message{background:#e8f1f3;text-align:right}.chat .chat-history .other-message:after{border-bottom-color:#e8f1f3;left:93%}.chat .chat-message{padding:20px}.me,.offline,.online{font-size:8px;margin-right:2px;vertical-align:middle}.online{color:#86c541}.offline{color:#e47297}.me{color:#1d8ecd}.float-right{float:right}.clearfix:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}@media only screen and (max-width:767px){.chat-app .people-list{background:#fff;display:none;height:465px;left:-400px;overflow-x:auto;width:100%}.chat-app .people-list.open{left:0}.chat-app .chat{margin:0}.chat-app .chat .chat-header{border-radius:.55rem .55rem 0 0}.chat-app .chat-history{height:300px;overflow-x:auto}}@media only screen and (min-width:768px) and (max-width:992px){.chat-app .chat-list{height:650px;overflow-x:auto}.chat-app .chat-history{height:600px;overflow-x:auto}}@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1){.chat-app .chat-list{height:480px;overflow-x:auto}.chat-app .chat-history{height:calc(100vh - 350px);overflow-x:auto}}
/*# sourceMappingURL=main.dd86b645.css.map*/