*{margin:0;padding:0;box-sizing:border-box;font-family:"Montserrat",sans-serif}.main-container{background-color:#e6e6e6;height:100vh;display:flex;flex-direction:column}.header-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#363636;color:#e0e0e0;box-shadow:0 4px 20px rgba(27,27,27,.25);height:9vh}.header-container .logo{margin-left:40px;font-weight:400;font-size:38px}.header-container .logo,.login-signup{color:#e4e4e4;margin-top:5px;margin-bottom:5px}.login-signup{display:flex;flex-direction:row;margin-right:40px}.login-signup span{text-decoration:none;color:#fff;margin-left:30px;font-weight:600;font-size:22px}.login-signup span:hover{color:#fff}.logout{margin:5px 40px 5px 30px;cursor:pointer}.logout,.name{font-weight:600;font-size:22px}.show-grid img{position:absolute;height:100%;border-radius:50%;overflow:hidden}.header-container i{display:none}@media screen and (max-width:600px){.header-container div:not(:first-child){display:none}.header-container i{display:block;margin:10px}.header-container.responsive{position:relative}.header-container.responsive i{position:absolute;right:0;top:0}.header-container.responsive .logo{display:block;margin:0}.header-container.responsive .name{display:block;font-weight:400}.header-container.responsive .logout{margin:0;display:block;float:none;text-align:center}.header-container.responsive .login-signup{margin:0;display:block;display:flex;flex-direction:column;align-items:center}.header-container.responsive .login-signup span{margin:10px}.header-container.responsive{height:auto;display:flex;flex-direction:column}}.home-container{position:relative;display:flex;flex-direction:row;height:91vh;width:100%}.users-list-container{position:relative;box-shadow:2px 0 10px rgba(0,0,0,.2);align-items:center;justify-content:space-between;width:25%;background-color:#fff;z-index:1}.users-list,.users-list-container{display:flex;flex-direction:column}.users-list{width:100%}.users-list .user{display:flex;flex-direction:row;align-items:center;width:100%;padding:5px 15px;cursor:pointer;transition:all .2s ease-in-out;font-size:15px}.users-list .online{font-weight:600;color:#00b900}.users-list .user:hover{border:none;transform:scale(1.03)}.users-list-container .add-user{display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer;width:100%;height:40px;text-align:center;transition:all .1s ease-in}.users-list-container .add-user:hover{background-color:#363636;color:#fff}.user-avatar{position:relative;height:50px;width:50px;margin-right:10px}.user-avatar img{position:absolute;height:100%;width:100%;border-radius:50%;overflow:hidden}.chat-screen{width:75%;display:flex;flex-direction:column;justify-content:space-between;overflow:scroll}.chat-screen .display-name{text-align:center;background-color:#b6b6b6;padding:10px 0;font-weight:600}.chat-screen .chat-controls{display:flex;align-items:center}.chat-screen textarea{width:80%}.chat-screen .chat-controls button{width:20%;height:100%}.message-section{display:flex;flex-direction:column}.message-recieved{align-self:flex-start;display:block;padding:5px 10px;max-width:50%}.message-recieved p{display:inline-block;max-width:500px;background-color:#fff;border-radius:20px;border-top-left-radius:0;padding:10px 15px;overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.message-sent{align-self:flex-end;text-align:right;padding:5px 10px;max-width:50%}.message-sent p{align-self:flex-end;display:inline-block;background-color:#fff;max-width:500px;padding:10px 15px;border-radius:20px;border-bottom-right-radius:0;overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.chat-screen span{font-size:12px;font-weight:600}.chat-controls textarea{border:none;padding:7px 12px;font-size:14px;font-weight:600;background-color:#fff;box-shadow:0 -3px 7px rgba(0,0,0,.2)}.chat-controls textarea:focus{outline:none;border:none;box-shadow:0 0 5px rgba(0,0,0,.1)}.chat-controls button{background-color:#363636;font-weight:600;font-size:16px;color:#fff;box-shadow:0 -3px 7px rgba(0,0,0,.2);cursor:pointer}.chat-controls button,.chat-controls button:focus{outline:none;border:none}.chat-controls button:active{color:#8f8f8f}.chat-controls button:hover{background-color:#2a2a2a}.show-grid .modal-img{height:50px}.show-grid .modal-name{display:flex;flex-direction:row;align-items:center;font-size:19px;font-weight:600}.show-grid .modal-list{cursor:pointer;padding:10px 0}.show-grid .modal-list:hover{background-color:#f0f0f0}.home-container i{display:none;top:0;right:0}@media screen and (max-width:600px){.home-container{display:flex;flex-direction:column}.chat-screen{width:100%}.home-container i{display:block;margin:10px}.home-container i:before{float:right}.users-list-container{display:none}.users-list-container.responsive{display:flex;flex-direction:column;width:100%}}.login-container{max-width:500px;margin:50px auto}.login-container .form-box{padding:20px;width:500px;height:370px;border:none;background-color:#494949;display:flex;flex-direction:column;align-items:center;box-shadow:-30px 25px 35px rgba(44,44,44,.3)}.login-container .form-box span{font-weight:600;font-size:35px;margin-top:8px;margin-bottom:30px;color:#f2f2f2}.login-container .form-box form{display:flex;flex-direction:column;width:392px}.login-container .form-box form label{font-size:17px;font-weight:500;color:#f2f2f2}.login-container .form-box form input{width:100%;height:35px;padding:5px 10px;font-weight:500;margin-bottom:20px;background-color:#cacaca;outline:none;border:none}.login-container .form-box form button{align-self:center;padding:5px;font-size:20px;font-weight:600;width:50%;color:#494949;background-color:#f2f2f2;outline:none;border:none;cursor:pointer;margin-top:15px}@media screen and (max-width:600px){.login-container{margin:auto}.login-container .form-box{max-width:80vw;height:auto}.login-container form{display:flex;flex-direction:column;align-items:center;height:40vh}.login-container .form-box form input{max-width:70%}}.signup-container{max-width:500px;margin:50px auto}.signup-container .form-box{padding:20px;width:500px;min-height:516px;border:none;background-color:#494949;display:flex;flex-direction:column;align-items:center;box-shadow:-30px 25px 35px rgba(44,44,44,.3)}.signup-container .form-box span{font-weight:600;font-size:35px;margin-top:8px;margin-bottom:30px;color:#f2f2f2}.signup-container .form-box form{display:flex;flex-direction:column;width:392px}.signup-container .form-box form label{font-size:17px;font-weight:500;color:#f2f2f2}.signup-container .form-box form input{width:100%;height:35px;padding:5px 10px;font-weight:500;margin-bottom:20px;background-color:#cacaca;outline:none;border:none}.signup-container .form-box form button{align-self:center;padding:5px;font-size:20px;font-weight:600;width:50%;color:#494949;background-color:#f2f2f2;outline:none;border:none;cursor:pointer;margin-top:15px}@media screen and (max-width:600px){.signup-container{margin:auto}.signup-container .form-box{max-width:80vw;height:auto}.signup-container form{display:flex;flex-direction:column;align-items:center;height:60vh}.signup-container .form-box form input{max-width:70%}}
/*# sourceMappingURL=main.c935ba80.chunk.css.map */