.sidebar-container{grid-gap:50px;display:grid;gap:50px;grid-template-rows:1fr 6fr;height:90vh}.left-panel-box{overflow-y:scroll;scrollbar-width:none}.left-panel-box::-webkit-scrollbar{display:none}.panel-chats-container{display:flex;flex-direction:column;gap:5px}.panel-chats-container hr{margin:0 20px}.panel-chats-box{padding:0 10px}.chat-box{align-items:flex-start;background-color:#fff;border-radius:5px;box-shadow:0 0 1px #000;cursor:pointer;display:grid;grid-template-columns:1fr 5fr;justify-content:flex-start;margin:2px 0;padding:10px 0}.chat-box:hover{background-color:#e4e4e4}.chat-avatar img,.chat-avatar svg{border-radius:50%;height:35px;width:35px}.chat-avatar svg{background-color:#e7e7e7;color:#c8c8c8}.chat-avatar{align-self:center;display:flex;justify-content:center}.chat-name-and-desc h3{margin:0}.last-message{display:flex;justify-content:space-between;margin:0 20px 0 0}.chat-name-and-desc p{color:#b4b4b4;font-size:14px;margin:5px 0}.chat-name-and-desc span{color:#b4b4b4;font-size:12px;margin:5px 0}@media (max-width:1100px){.chat-name-and-desc h3{font-size:.95rem}.last-message p{font-size:12px}.last-message span{font-size:10px}.chat-avatar img{height:32px;width:32px}.chat-box{gap:5px}}@media (max-width:900px){.chat-name-and-desc h3{font-size:.9rem}.last-message p{font-size:11px}.last-message span{font-size:9px}.chat-avatar img{height:28px;width:28px}.chat-box{padding:10px 0 10px 2px}}@media (max-width:800px){.chat-name-and-desc h3{font-size:1.1rem}.last-message p{font-size:14px}.last-message span{font-size:12px}.chat-avatar img{height:35px;width:35px}.chat-box{grid-template-columns:1fr 6.5fr}}@media (max-width:600px){.chat-box{grid-template-columns:1fr 5fr}}@media (max-width:500px){.chat-name-and-desc h3{font-size:1rem}.last-message p{font-size:13px}.last-message span{font-size:11px}.chat-avatar img{height:28px;width:28px}}.options-container{display:flex;flex-direction:column;margin-top:10px}.options-container hr{margin:10px 20px 20px}.user-profile{align-items:center;display:flex;gap:20px;justify-content:flex-start;padding-left:20px;padding-right:20px}.user-image img,.user-image svg{border-radius:50%;cursor:pointer;height:55px;width:55px}.username h2{cursor:pointer}.search-bar-and-options{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.options-div{align-items:center;display:flex;gap:10px;justify-content:space-around}.options-div svg{padding:3px}.options-div svg:hover{background-color:#a8a8a8;border-radius:100%;cursor:pointer}.search-bar{align-items:center;display:flex;justify-content:flex-start}#search{border:1px solid #d2d2d2;border-radius:27px;box-shadow:0 0 2px #d2d2d2;color:#000;height:1.7rem;text-align:center;width:11.75rem}.search-results{background-color:#fff;border-radius:5px;box-shadow:3px 3px 3px #999;display:flex;flex-direction:column;gap:2px;min-width:100px;position:absolute;width:11.75rem;z-index:5}.searched-names{cursor:pointer;display:flex;gap:5px;margin-left:10px;overflow:hidden;padding:3px;text-overflow:ellipsis;white-space:nowrap}.searched-user-image img,.searched-user-image svg{border-radius:50%;height:20px;width:20px}.user-image svg{background-color:#e7e7e7;color:#c8c8c8}.search-result-hr{margin:3px 10px!important}@media (max-width:1300px){.search-bar-and-options{align-items:center;display:flex;flex-direction:column;gap:10px;justify-content:center}.search-bar{padding-left:0}}@media (max-width:1100px){.username h2{font-size:1.25rem}.user-image img,.user-image svg{border-radius:50%;cursor:pointer;height:45px;width:45px}}@media (max-width:800px){.search-bar-and-options{align-items:center;display:flex;flex-direction:row;gap:10px;justify-content:space-between;padding:0 20px;width:calc(100% - 40px)}.username h2{font-size:1.5rem}.user-image img,.user-image svg{border-radius:50%;cursor:pointer;height:55px;width:55px}#search{width:15rem}.search-results{min-width:100px;width:15rem}}@media (max-width:550px){.search-bar-and-options{align-items:center;display:flex;flex-direction:column;gap:10px;justify-content:center}}@media (max-width:450px){.username h2{font-size:1.25rem}.user-image img,.user-image svg{border-radius:50%;cursor:pointer;height:45px;width:45px}}@media (max-width:350px){#search{width:11.75rem}.search-results{min-width:100px;width:11.75rem}}.modal-image{max-height:90%;max-width:100%}.change-profile-pic-div{margin:10px auto}.change-profile-pic-div button{background-color:#4444ba;border:none;border-radius:17px;color:#fff;padding:5px 7px}.change-profile-pic-div button:hover{background-color:#1616ff}.auth-page{display:grid;grid-template-columns:3fr 1fr;height:100vh}.auth-page-mobile{align-items:center;background:url(/static/media/Login-Image.65398807d24277780780.avif) 50% no-repeat;background-size:cover;display:flex;height:100vh;justify-content:center}.auth-page img{height:100%;width:auto}.auth-image{background:url(/static/media/Login-Image.65398807d24277780780.avif) 50% no-repeat;background-size:cover}.auth-sidebar{align-items:center;display:flex;height:100%;padding:0 3rem}.auth-sidebar-mobile{align-items:center;display:flex;padding:.5rem 2rem}.auth-container{align-items:flex-start;display:flex;flex-direction:column;justify-content:space-evenly}.auth-toggle-link{cursor:pointer}.signup-comp{display:flex;flex-direction:column;width:370px}.signup-comp h1{background-color:rgba(0,0,255,.237);color:#fff;margin:40px 0 30px;padding:5px;text-align:center}.login-form-box,.register-form-box{display:flex;flex-direction:column;font-size:1.2rem;gap:20px}.login-form-box input,.register-form-box input{border-radius:5px}.form-email{height:30px;margin:10px 0!important}.btn-register{border:1px;border:1px solid rgba(0,0,255,.237);border-radius:5px;color:blue;font-size:1.2rem;margin:15px 0;padding:5px 7px}.btn-register:hover{border:1px solid blue;cursor:pointer}.form-password{height:30px;margin:10px 0!important}#form-picture{background-image:none;border:none}.picture-input-container{display:flex;gap:20px;margin:10px 0 -10px}.picture-input-div{align-items:center;display:flex;justify-content:flex-start;padding-left:1px}@media (max-width:1000px){.signup-comp{width:320px}}@media (max-width:600px){.signup-comp h1{font-size:1.6rem}}@media (max-width:500px){.signup-comp{width:300px}.form-email input,.form-password input{height:1.1rem}}@media (max-width:400px){.signup-comp{width:250px}.signup-comp h1{font-size:1.4rem}.picture-input-container label{font-size:1rem}.auth-toggle-paragraph{font-size:.9rem}}@media (max-width:360px){.signup-comp{width:200px}.signup-comp h1{font-size:1.3rem}.picture-input-container label{font-size:.95rem}#form-picture,.auth-toggle-paragraph{font-size:.8rem}.picture-input-container{display:flex;flex-direction:column;gap:10px;margin:10px 0 -10px}}.welcome-container{align-items:center;border-radius:20px;color:#0000008a;display:flex;flex:0.7 1;flex-direction:column;gap:20px;justify-content:center}.welcome-container img{height:20vw;width:auto}.create-group-container{align-items:center;background-color:#fff;border-radius:20px;display:flex;flex:0.7 1;flex-direction:column;gap:10px;justify-content:space-between;margin:10px;padding:20px 10px}.add-members{width:75%}.create-group{width:100%}.create-group,.create-group-name-input{border:1px solid #d2d2d2;border-radius:17px;box-shadow:0 0 2px #d2d2d2;color:#000;height:2.5rem;min-width:15rem;text-align:center}.create-group-name-input{width:75%}.create-group-search-bar{align-items:center;display:flex;justify-content:center;width:100%}.create-group-btn{background-color:#919191!important;color:#fff!important}.create-group-btn:hover{background-color:#373743!important}.selected-user-cards-container{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;width:75%}.selected-user-cards{background-color:grey;border:1px solid grey;border-radius:5px;color:#fff;cursor:pointer;padding:3px 5px}@media (max-width:350px){.create-group,.create-group-name-input{min-width:12rem}}body{margin:auto;width:100%}#AppContainer{background-color:#fff;border-radius:4px;box-shadow:0 3px 1px -2px #0003,0 2px 2px 0 #00000024,0 1px 5px 0 #0000001f;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:20px 50px;padding:25px 30px 40px}.App{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 2fr}.App,.App-mobile-view{max-height:100%}#left-panel{background-color:#f4f4ee;border-radius:7px;box-shadow:0 2px 4px -1px #0003,0 4px 5px 0 #00000024,0 1px 10px 0 #0000001f;max-height:90vh;min-width:220px;padding:0 10px}#right-panel,#welcome-panel{background-color:#f4f4ee;border-radius:7px;box-shadow:0 2px 4px -1px #0003,0 4px 5px 0 #00000024,0 1px 10px 0 #0000001f;height:90vh;max-height:90vh;padding:0 30px}#welcome-panel{align-items:center;display:flex;justify-content:center}@media (min-width:400px){.chat p{width:330px}}@media (max-width:300px){.header p{font-size:.8rem}.header span{font-size:1rem}.header .avatar img{border-radius:50%;max-width:30px;min-width:20px}.chatText,.myChatText{font-size:.6rem}}@media (max-width:350px){.header p{font-size:1rem}.header span{font-size:1.2rem}.header .avatar img{border-radius:50%;max-width:45px;min-width:30px}.chatText,.myChatText{font-size:.7rem}}@media (max-width:400px){.header p{font-size:1.1rem}.header span{font-size:1.3rem}.header .avatar img{border-radius:50%;max-width:60px;min-width:40px}#right-panel{padding:0 15px}}@media (max-width:450px){#AppContainer{margin:20px 10px!important;padding:10px!important}}@media (max-width:500px){.chatText,.myChatText{font-size:.8rem}}@media (max-width:850px){#AppContainer{margin:20px;padding:20px}.App{gap:20px}}@media (max-width:1100px){.App{grid-template-columns:1fr 1.5fr}}.join-group-container{text-align:center}.join-group{width:75%}.join-group-search-bar{align-items:center;display:flex;justify-content:center;width:100%}.join-group-input{border:1px solid #d2d2d2;border-radius:17px;box-shadow:0 0 2px #d2d2d2;color:#000;height:2.5rem;min-width:15rem;text-align:center;width:100%}.searched-groups{background-color:#fff;border-radius:5px;box-shadow:3px 3px 3px #999;display:flex;flex-direction:column;gap:2px;position:absolute;z-index:5}.return-arrow-div{align-items:center;display:flex;justify-content:flex-start;width:100%}.return-arrow{cursor:pointer}.return-arrow:hover{border-radius:50%;box-shadow:0 0 3px #545454;padding:2px}@media (max-width:350px){.join-group-input{min-width:12rem}}
/*# sourceMappingURL=main.ba3c463f.css.map*/