body{margin: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}*{box-sizing:border-box}.Join .form form{max-width:280px;margin:4rem auto 0;padding:1rem;box-shadow:0 3px 6px rgba(0,0,0,.1)}.Join .form form h2{font-weight:400;margin:0 0 1.2rem;border-left:3px solid #24acb8;border-left:3px solid var(--primary-color);padding-left:.3rem;font-size:1.06rem}.Join .form form>div{width:100%;height:38px;position:relative;margin:0 0 .9rem}.Join .form.checked form>div{pointer-events:none}.Join .form.checked form>div input{color:rgba(90,88,88,.5);transition:.3s ease-in}.Join .form form>div input{width:100%;height:100%;position:absolute;background:transparent;z-index:1;outline:none;border:0;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:.7rem;padding-left:.3rem}.Join .form form>div label{color:#6d8594;font-size:1.03rem;position:absolute;opacity:.7;top:.3rem;left:.4rem;background:#fff;transition:.1s ease-in}.Join .form form>div input:focus+label{transition:.1s ease-out}.Join .form form>div input.filled+label,.Join .form form>div input:focus+label{top:-.78rem;left:.3rem;z-index:1;opacity:1;padding:0 .1rem;font-size:.8rem}.Join .form form button{outline:none;background:#24acb8;background:var(--primary-color);color:#fff;border:0;padding:.7rem 1.4rem;border-radius:.7rem;cursor:pointer}.Join .form form button:hover{opacity:.8;transition:.2s ease}.Join .form form button.opacity,.Join .form form button.opacity:hover{opacity:.5}.Join .form form>div.loader{width:25px;height:25px;border:2px solid #ddd;border-top-color:#24acb8;border-top:2px solid var(--primary-color);border-radius:50%;float:right;-webkit-animation:loader 1s linear infinite;animation:loader 1s linear infinite}.reset{margin-left:20px;color:#24acb8;color:var(--primary-color);text-decoration:underline;cursor:pointer}.reset:hover{opacity:.8}@-webkit-keyframes loader{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes loader{0%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}:root{--primary-color:#24acb8;--dark-color-1:#111;--dark-color-2:#2c2e2e;--light-color-1:#9eaac2;--light-color-2:#5c5c5c}body{padding:0 1rem}.chat-container{max-width:700px;margin:2rem auto 0;display:-webkit-flex;display:flex;height:500px;box-shadow:0 3px 6px rgba(0,0,0,.2);border-radius:.7rem;overflow:hidden}.chat-container .side-bar{width:40%;background:#2c2e2e;background:var(--dark-color-2);height:100%;color:#fff;padding:2rem .6rem;position:relative}.chat-container .side-bar .user{width:100%;padding:0 1rem 1rem;border-bottom:2px solid hsla(0,0%,100%,.1);position:relative}.chat-container .side-bar .user,.chat-container .side-bar .user .avatar{display:-webkit-flex;display:flex;height:40px;-webkit-align-items:center;align-items:center}.chat-container .side-bar .user .avatar{width:40px;background:#24acb8;background:var(--primary-color);border-radius:50%;cursor:pointer;-webkit-justify-content:center;justify-content:center;font-size:1.1rem;border-bottom:2px solid hsla(0,0%,100%,.6)}.chat-container .side-bar .user .avatar:hover{opacity:.7}.chat-container .side-bar .user .name{color:#fff;opacity:.7;margin-left:.9rem}.chat-container .side-bar .user .add-btn{position:absolute;right:2rem;cursor:pointer}.chat-container .side-bar .user .settings-btn{position:absolute;right:.1rem;cursor:pointer}.chat-container .side-bar .user .add-btn:hover,.chat-container .side-bar .user .settings-btn:hover{opacity:.7}.chat-container .side-bar .search{margin:.9rem 0 3rem;height:30px;display:-webkit-flex;display:flex;width:100%;padding:0 .7rem;position:relative}.chat-container .side-bar .search:before{position:absolute;content:"";width:30px;background:#9eaac2;background:var(--light-color-1);height:3px;bottom:-2rem;left:50%;margin-left:-15px}.chat-container .side-bar .search input{width:75%;height:100%;outline:none;background-color:#9eaac2;background-color:var(--light-color-1);color:#fff;border:0;border-radius:1.2rem;padding:0 .5rem}.chat-container .side-bar .search input::-webkit-input-placeholder{color:#5c5c5c}.chat-container .side-bar .search input:-ms-input-placeholder{color:#5c5c5c}.chat-container .side-bar .search input::placeholder{color:#5c5c5c}.chat-container .side-bar .search .search-btn{cursor:pointer;width:17%;background-color:#9eaac2;background-color:var(--light-color-1);border-radius:1.2rem;margin-left:5%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.chat-container .side-bar .search .search-btn:hover{opacity:.7}.chat-container .side-bar .users{padding:0 .2rem}.chat-container .side-bar .users .scroll_div{overflow-y:scroll;height:255px}.chat-container .side-bar .users .scroll_div::-webkit-scrollbar-thumb{background:#9eaac2;background:var(--light-color-1)}.chat-container .side-bar .users .scroll_div::-webkit-scrollbar{background:#2c2e2e;background:var(--dark-color-2);width:3px}.chat-container .side-bar .all-users .user-container,.chat-container .side-bar .users .user-container{display:-webkit-flex;display:flex;height:60px;padding:.2rem .5rem;margin-bottom:1rem;border-radius:1rem;-webkit-align-items:center;align-items:center}.chat-container .side-bar .users .user-container:hover{background:#111;background:var(--dark-color-1);cursor:pointer;transition:.1s ease-in-out}.chat-container .side-bar .all-users .user-container:hover{background:#2c2e2e;background:var(--dark-color-2);cursor:pointer;transition:.1s ease-in-out}.side-bar .all-users .user-container .avatar,.side-bar .users .user-container .avatar{width:40px;height:40px;background:#24acb8;background:var(--primary-color);border-radius:50%;cursor:pointer;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;font-size:1.1rem;border-left:2px solid hsla(0,0%,100%,.6)}.side-bar .all-users .user-container .content,.side-bar .users .user-container .content{margin-left:.4rem;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;position:relative;width:70%}.side-bar .all-users .user-container .content .email,.side-bar .users .user-container .content .last-msg{font-size:.9rem;opacity:.8}.side-bar .users .user-container .content .new-msg{position:absolute;right:0;font-size:.8rem;display:block;width:6px;height:6px;background:red;border-radius:50%;text-align:center;line-height:16px;top:30%}.chat-container .side-bar .all-users{position:absolute;top:0;left:0;width:100%;height:100%;padding:1rem;background:#5c5c5c;background:var(--light-color-2);-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:.1s ease-out}.chat-container .side-bar .all-users.active{-webkit-transform:translateX(0);transform:translateX(0);transition:.1s ease-in}.chat-container .side-bar .all-users h2{font-size:1.04rem;margin-left:3rem}.chat-container .side-bar .all-users .back-btn{display:-webkit-flex;display:flex;cursor:pointer}.chat-container .side-bar .all-users .back-btn:hover{opacity:.7}.chat-container .side-bar .all-users .scroll_div{overflow-y:scroll;height:255px;overflow-x:hidden}.all-users .scroll_div::-webkit-scrollbar-thumb{background:#9eaac2;background:var(--light-color-1)}.all-users .scroll_div::-webkit-scrollbar{background:#5c5c5c;background:var(--light-color-2);width:3px}.all-users .no-users{text-align:center;margin:1rem 0;font-weight:600;color:#fff;opacity:.6}.all-users .no-result{text-align:center;color:#9eaac2;color:var(--light-color-1);font-weight:100}.chat-container .chat{width:60%;display:grid;grid-template-rows:10% 83% 35px}.chat .chatty-content{width:100%;height:40px;background:#eee;display:-webkit-flex;display:flex;padding:0 1rem;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;position:relative}.chat .chatty-content .options-items{position:absolute;right:.2rem;background:#fff;box-shadow:0 3px 3px rgba(0,0,0,.1);top:.2rem;border-radius:.3rem;padding:.3rem;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;text-align:center;z-index:99}.chat .chatty-content .options-items span{color:#5c5c5c}.chat .chatty-content .options-items span.unavailable{opacity:.5}.chat .chatty-content .options-items span.unavailable:hover{background:transparent;color:#5c5c5c}.chat .chatty-content .options-items span:hover{background:#9eaac2;background:var(--light-color-1);border-radius:.3rem;color:#fff;cursor:pointer;transition:.2 ease-in}.chat .chatty{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-align-items:center;align-items:center;-webkit-transform:scale(.8);transform:scale(.8);transition:.2s ease;opacity:0}.chat .chatty.active{transition:.2s ease;opacity:1;-webkit-transform:scale(1);transform:scale(1)}.chat .chatty .status{opacity:.9;font-size:.7rem;margin-left:.8rem;display:-webkit-flex;display:flex;position:relative}.chat .chatty .status:before{position:absolute;content:"";left:-.4rem;width:5px;height:5px;background:#24acb8;background:var(--primary-color);top:50%;border-radius:50%}.chat .chatty .status.offline:before{background:#5c5c5c}.chat .chatty-content .options{-webkit-transform:scale(.8);transform:scale(.8);color:#000;opacity:0;pointer-events:none;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;width:120px;-webkit-justify-content:space-between;justify-content:space-between}.chat .chatty-content .options div:hover{opacity:.7;transition:.3s;cursor:pointer}.chat .chatty-content .options .back,.chat .chatty-content .options .more{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}.chat .chatty-content .options .more{-webkit-transform:rotate(90deg) scale(1.2);transform:rotate(90deg) scale(1.2)}.chat .chatty-content .options.active{-webkit-transform:scale(1);transform:scale(1);opacity:1;pointer-events:visible}.chat .messages{position:relative}.chat .messages .welcome{width:100%;height:100%;display:-webkit-flex;display:flex;position:absolute;top:0;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.chat .messages .welcome.active{display:none}.chat .messages .welcome .content{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center}.chat .messages .welcome .content h3{font-size:1.06;font-weight:500;color:#5c5c5c;color:var(--light-color-2)}.chat .messages .welcome .content button{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;outline:none;padding:.6rem;border-radius:.4rem;cursor:pointer;background:#24acb8;background:var(--primary-color);border:0;box-shadow:2px 2px rgba(0,0,0,.5);color:#fff}.chat .messages .welcome .content button:hover{opacity:.8}.chat .messages .messages-container{width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;overflow-y:scroll;overflow-x:hidden;padding:1rem;-webkit-transform:scale(.9);transform:scale(.9);transition:0s ease;opacity:0}.chat .messages .messages-container.active{transition:.1s ease-in;-webkit-transform:scale(1);transform:scale(1);opacity:1}.chat .messages .messages-container::-webkit-scrollbar-thumb{background:#9eaac2;background:var(--light-color-1)}.chat .messages .messages-container::-webkit-scrollbar{background:#fff;width:3px}.chat .messages .msg-content{-webkit-align-self:flex-start;align-self:flex-start;display:-webkit-flex;display:flex;position:relative;margin:.4rem 0}.chat .messages .msg-content.me{-webkit-align-self:flex-end;align-self:flex-end}.chat .messages .msg-content:hover{opacity:.7;cursor:pointer}.chat .messages .msg-content .msg{background:#5c5c5c;background:var(--light-color-2);padding:.4rem .6rem;color:#fff;border-radius:.7rem;margin-left:.2rem;max-width:150px}.chat .messages .msg-content.me .name{display:none}.chat .messages .msg-content.me .msg{background:#24acb8;background:var(--primary-color)}.chat .messages .msg-content .info{position:absolute;width:100%;top:0}.chat .messages .msg-content .name{width:35px;height:35px;color:#fff;background:#24acb8;background:var(--primary-color);border-radius:50%;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.chat .messages .msg-content .date{opacity:.7;font-size:.7rem;color:#111;float:right;margin-top:-1rem;margin-right:.5rem;width:33px;text-align:right;pointer-events:none;opacity:0}.chat .messages .msg-content .date.see{opacity:1;pointer-events:visible}.chat .send-seaction{width:100%;display:-webkit-flex;display:flex;padding:0 .7rem;transition:.2s ease;-webkit-transform:scale(.9);transform:scale(.9);opacity:0}.chat .send-seaction.active{opacity:1;-webkit-transform:scale(1);transform:scale(1)}.chat .send-seaction input{width:85%;height:95%;border:0;background:#9eaac2;background:var(--light-color-1);padding:0 .5rem;border-radius:1rem;outline:none;color:#fff}.chat .send-seaction input::-webkit-input-placeholder{color:#5c5c5c}.chat .send-seaction input:-ms-input-placeholder{color:#5c5c5c}.chat .send-seaction input::placeholder{color:#5c5c5c}.chat .send-seaction .send-btn{width:12%;background:#24acb8;background:var(--primary-color);border-radius:1rem;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;margin-left:2%;height:95%;transition:.4s ease-in}.chat .send-seaction .send-btn.null{background:#9eaac2;background:var(--light-color-1);color:#5c5c5c;color:var(--light-color-2)}.chat .send-seaction .send-btn:hover{opacity:.7;cursor:pointer}.chat .send-seaction .send-btn.null:hover{opacity:1;cursor:none}.loading{height:100vh;-webkit-justify-content:center;justify-content:center;position:relative}.loading,.loading .logo{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.loading .logo{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-flex-direction:column;flex-direction:column}svg{width:135px;height:135px}circle{-webkit-transform:translate(6%,5%);transform:translate(6%,5%);stroke-width:8;fill:none;stroke:#0093ff;stroke-dasharray:20;stroke-dashoffset:0;-webkit-animation:ani 4s linear infinite;animation:ani 4s linear infinite}@-webkit-keyframes ani{0%{stroke-dashoffset:50;stroke-dasharray:200}50%{stroke-dashoffset:100;stroke-dasharray:50}}@keyframes ani{0%{stroke-dashoffset:50;stroke-dasharray:200}50%{stroke-dashoffset:100;stroke-dasharray:50}}.loading .homepage{border:0;background:#24acb8;color:#fff;padding:.4rem 1rem;border-radius:.3rem;cursor:pointer}.loading .homepage:hover{opacity:.8}.background{width:100%;height:100%;background:transparent;position:absolute;left:0;top:0;z-index:2}.refresh_users{-webkit-justify-content:flex-end;justify-content:flex-end;margin-bottom:.6rem;-webkit-align-items:center;align-items:center;margin-right:1rem}.refresh_users,.refresh_users span{display:-webkit-flex;display:flex}.refresh_users span:hover{cursor:pointer;opacity:.7;transition:.1s ease}.refresh_users span:active{color:#24acb8;color:var(--primary-color);transition:0s}.init-error-message{text-align:center}.init-error-message span{display:block;margin-bottom:1rem}@media only screen and (max-width:700px){body{padding:0}.chat-container{width:100%;position:absolute;height:100%;margin:0;box-shadow:none;border-radius:0}.chat-container .side-bar{width:100%;position:absolute;z-index:2}.chat-container .side-bar.hide{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.chat-container .chat{width:100%}}
/*# sourceMappingURL=main.2212801d.chunk.css.map */