@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap);:root{--primairy-color:#eef2f5;--secondary-color:#0051ff}body{margin:0;font-family:"Open Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.app,.join{display:flex;width:100%;height:100vh}.join{justify-content:center;align-items:center;background:var(--primairy-color)}.join_container{width:500px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0;background-color:#fff;border-radius:10px;border:1px solid var(--primairy-color);box-shadow:5px 5px 5px 0 #bbb}.heading{width:100%;height:25%;background:var(--secondary-color);color:#fff;margin:0;border-radius:10px 10px 0 0;padding:0;line-height:2em;text-align:center}.form{height:100%;display:flex;justify-content:center;align-items:center}.join_button{border:0;background-color:var(--secondary-color);height:30px;color:#fff;border-radius:5px;margin-left:5px}.joinInput{border:1px solid #c7c7c7;height:28px;width:200px;padding:0}.load{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.loading_message{position:absolute}.loader{margin:100px auto;font-size:25px;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;-webkit-animation:load5 1.1s ease infinite;animation:load5 1.1s ease infinite;-webkit-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load5{0%,to{box-shadow:0 -2.6em 0 0 #0051ff,1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.5),-1.8em -1.8em 0 0 rgba(0,81,255,.7)}12.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.7),1.8em -1.8em 0 0 #0051ff,2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.5)}25%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.5),1.8em -1.8em 0 0 rgba(0,81,255,.7),2.5em 0 0 0 #0051ff,1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}37.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.5),2.5em 0 0 0 rgba(0,81,255,.7),1.75em 1.75em 0 0 #0051ff,0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}50%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.5),1.75em 1.75em 0 0 rgba(0,81,255,.7),0 2.5em 0 0 #0051ff,-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}62.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.5),0 2.5em 0 0 rgba(0,81,255,.7),-1.8em 1.8em 0 0 #0051ff,-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}75%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.5),-1.8em 1.8em 0 0 rgba(0,81,255,.7),-2.6em 0 0 0 #0051ff,-1.8em -1.8em 0 0 rgba(0,81,255,.2)}87.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.5),-2.6em 0 0 0 rgba(0,81,255,.7),-1.8em -1.8em 0 0 #0051ff}}@keyframes load5{0%,to{box-shadow:0 -2.6em 0 0 #0051ff,1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.5),-1.8em -1.8em 0 0 rgba(0,81,255,.7)}12.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.7),1.8em -1.8em 0 0 #0051ff,2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.5)}25%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.5),1.8em -1.8em 0 0 rgba(0,81,255,.7),2.5em 0 0 0 #0051ff,1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}37.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.5),2.5em 0 0 0 rgba(0,81,255,.7),1.75em 1.75em 0 0 #0051ff,0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}50%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.5),1.75em 1.75em 0 0 rgba(0,81,255,.7),0 2.5em 0 0 #0051ff,-1.8em 1.8em 0 0 rgba(0,81,255,.2),-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}62.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.5),0 2.5em 0 0 rgba(0,81,255,.7),-1.8em 1.8em 0 0 #0051ff,-2.6em 0 0 0 rgba(0,81,255,.2),-1.8em -1.8em 0 0 rgba(0,81,255,.2)}75%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.5),-1.8em 1.8em 0 0 rgba(0,81,255,.7),-2.6em 0 0 0 #0051ff,-1.8em -1.8em 0 0 rgba(0,81,255,.2)}87.5%{box-shadow:0 -2.6em 0 0 rgba(0,81,255,.2),1.8em -1.8em 0 0 rgba(0,81,255,.2),2.5em 0 0 0 rgba(0,81,255,.2),1.75em 1.75em 0 0 rgba(0,81,255,.2),0 2.5em 0 0 rgba(0,81,255,.2),-1.8em 1.8em 0 0 rgba(0,81,255,.5),-2.6em 0 0 0 rgba(0,81,255,.7),-1.8em -1.8em 0 0 #0051ff}}.content{width:85%;height:100%;display:flex;flex-direction:column}.header{width:100%;display:flex;background-color:var(--primairy-color);height:4em;color:var(--secondary-color);justify-content:space-between;border-bottom:2px solid #d6d6d6;border-top-right-radius:15px}.headertext{margin:0;padding-top:.5em;padding-left:.5em}.headerUser{margin:.4em .4em 0 0}.chatContainer{width:100%;height:95%}.rooms{list-style:none;padding:0}.room{padding:0;height:3em;margin:5px;border-radius:10px;display:flex;align-items:center;background-color:var(--primairy-color);cursor:pointer;border-bottom:1px solid #d4d4d4}.title{color:#545457;margin-left:.5rem}.chatRoom{display:flex;width:100%;height:100%}.usersList{padding:0;width:30%;background-color:var(--primairy-color);margin:0;color:var(--secondary-color);list-style:none;font-size:1.5em;border-bottom-right-radius:15px}.username{border-bottom:1px solid hsla(0,0%,65.5%,.5);padding:.2em .2em .2em .5em;font-size:.8em}.users-icon{margin:auto;display:flex;justify-content:center;align-items:center;height:2.5em}.chatArea{height:100%;flex-wrap:wrap}.chatArea,.messages{width:100%;display:flex}.messages{height:90%;background-color:#fff;margin:0;list-style:none;padding:0;flex-direction:column;overflow-y:hidden}.message{margin:.5em;font-size:1em;padding:0}.message.others{float:left}.message.me{float:right}.text{background-color:#ddd;padding:.5em;border-radius:10px}.text.me{background-color:var(--secondary-color);color:#fff}.text.admin{text-align:center;background-color:#d3f0ff}.sender{padding-left:.3em;color:#5e5a5a}.inputform{width:100%;height:10%;align-items:center;justify-content:center;display:flex;background-color:var(--primairy-color)}.textInput{width:100%;height:50%;border:1px solid #d1d1d1}.sideBar{width:15%;display:flex;flex-direction:column;color:#fff;background-color:var(--secondary-color);border-top-left-radius:15px;border-bottom-left-radius:15px}.myChatRoomList{list-style:none;cursor:pointer;padding:0}.mychat{padding:1em;display:flex;justify-content:space-between;border-bottom:1px solid #002f94}.mychat:hover{background-color:var(--primairy-color);color:var(--secondary-color)}.isNew{border-radius:10em;width:1em;height:1em;display:none}.isNew.true{display:block}.buttons{display:flex;width:100%;height:10%;cursor:pointer}.btn_newchat,.btn_roomlist{width:50%;text-align:center;line-height:10vh}.btn_newchat:hover,.btn_roomlist:hover{background-color:var(--primairy-color);color:var(--secondary-color)}.make-form{height:10%;width:100%}.make-form input{width:80%;margin-left:1em;margin-top:1em}.form_buttons{display:flex;width:90%;margin-left:.7em}.button{width:40%;height:2em;margin-top:.2em;margin-left:.4em;display:flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:10px;color:#fff}
/*# sourceMappingURL=main.53e3179a.chunk.css.map */