@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap";*{margin:0;padding:0}:root{--theme-color: #00b9fd}body{background-color:#181818;color:#ccc;font-family:Roboto,sans-serif}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background-color:var(--theme-color, aqua)}.MainPage{box-sizing:border-box;width:100vw;height:100svh;display:grid;grid-template-columns:min(50vw,var(--userListSection-width, 25vw)) 3px auto}.MainPage .sectionWidthAdjustLine{background-color:#ccc;opacity:.5;cursor:ew-resize!important}.MainPage .sectionWidthAdjustLine:hover,.MainPage .sectionWidthAdjustLine:active{opacity:1;background-color:var(--theme-color)}.userMoreOptionMenu{display:grid;position:absolute;height:fit-content;background-color:#444;border-radius:10px;padding:10px 0;top:var(--moreOption-top, 30px);left:var(--moreOption-left, 100px);z-index:15;width:170px;transform-origin:top right;scale:0;transition:all .3s ease-in-out,top 0s linear,left 0s linear}.userMoreOptionMenu>button{background-color:transparent;color:#ccc;font-size:1.2em;border:none;padding:10px 30px;text-align:left}.userMoreOptionMenu>button:hover{background-color:#333}.showUserMoreOptionMenu{scale:1}@media (max-width : 1000px){.MainPage{grid-template-columns:100vw 0vw}.sectionWidthAdjustLine{display:none}.showChatSection{grid-template-columns:0vw 100vw!important}.showChatSection .ChatSectionNav{grid-template-columns:50px 100px auto 50px 50px!important}.showChatSection .ChatSectionNav .BackToUserListSectionBtn{display:block!important}}.ChatSection{overflow:hidden;display:grid;grid-template-rows:75px auto 75px;position:relative}.ChatSection .ChatSectionNav{border-bottom:2px solid #ccc;height:75px;display:grid;grid-template-columns:100px auto 50px 50px;align-items:center}.ChatSection .ChatSectionNav .profilePicDiv{height:60px;width:60px;font-size:3em;display:flex;align-items:center;justify-content:center;justify-self:center;border-radius:50%}.ChatSection .ChatSectionNav .userNameHeading{display:flex;flex-direction:column;gap:5px}.ChatSection .ChatSectionNav .userNameHeading>p{color:#0f0;font-size:.8em;height:0em;overflow:hidden;transition:.3s ease-in-out}.ChatSection .ChatSectionNav .showTyping>p{height:1.2em!important}.ChatSection .ChatSectionNav>button{background-color:transparent;color:#ccc;font-size:1.3em;border:none;padding:10px;transition:.3s ease-in-out}.ChatSection .ChatSectionNav>button:hover{scale:1.2}.ChatSection .ChatSectionNav>.BackToUserListSectionBtn{display:none;margin-left:15px}.ChatSection .ChatSectionNav>.BackToUserListSectionBtn>i{font-size:1.5em}.ChatSection .conversationSection{scroll-behavior:smooth;box-sizing:border-box;padding:20px 10px 75px;overflow-y:scroll;display:flex;flex-direction:column;gap:1em}.ChatSection .conversationSection>.ReadMoreBtn{display:flex;gap:1em;width:fit-content;align-self:center;padding:5px 20px;background-color:#333;color:#ccc;font-size:1.1em;border:none;border-radius:10px}.ChatSection .conversationSection #readMoreLoadingIcon{display:none}.ChatSection .conversationSection .chatDateHeading{align-self:center;background-color:#333;padding:5px 10px;position:sticky;top:0;border-radius:5px;width:100px;text-align:center}.ChatSection .conversationSection .receivedMessage,.ChatSection .conversationSection .sendMessage,.ChatSection .conversationSection>.typingPreview{border:2px solid #f00;height:min-content;max-width:60%;padding:10px 20px;border-radius:20px 20px 20px 0;color:red;width:fit-content;word-wrap:break-word}.ChatSection .conversationSection .receivedMessage>.senderName,.ChatSection .conversationSection .sendMessage>.senderName,.ChatSection .conversationSection>.typingPreview>.senderName{color:#fff;font-size:.8em}.ChatSection .conversationSection .receivedMessage>.messagePara,.ChatSection .conversationSection .sendMessage>.messagePara,.ChatSection .conversationSection>.typingPreview>.messagePara{margin-right:30px}.ChatSection .conversationSection .receivedMessage>.messageTime,.ChatSection .conversationSection .sendMessage>.messageTime,.ChatSection .conversationSection>.typingPreview>.messageTime{font-size:.6em;color:#ccc;text-align:right;display:flex;justify-content:end;gap:5px}.ChatSection .conversationSection .receivedMessage .messageViewStatus,.ChatSection .conversationSection .sendMessage .messageViewStatus,.ChatSection .conversationSection>.typingPreview .messageViewStatus{position:relative;width:2em}.ChatSection .conversationSection .receivedMessage .messageViewStatus>i,.ChatSection .conversationSection .sendMessage .messageViewStatus>i,.ChatSection .conversationSection>.typingPreview .messageViewStatus>i{font-size:1.6em;position:absolute;top:0;left:0}.ChatSection .conversationSection .receivedMessage .messageViewStatus>i:last-child,.ChatSection .conversationSection .sendMessage .messageViewStatus>i:last-child,.ChatSection .conversationSection>.typingPreview .messageViewStatus>i:last-child{top:1px;left:5px}.ChatSection .conversationSection .sendMessage{align-self:flex-end;border-radius:20px 20px 0;color:var(--theme-color);border-color:var(--theme-color)}.ChatSection .conversationSection .typingPreview{display:flex;justify-content:space-evenly;padding:1em;gap:10px}.ChatSection .conversationSection .typingPreview>p{border:3px solid #f00;border-radius:50%;animation:typingPreviewDotAnimation 2s linear infinite}.ChatSection .conversationSection .typingPreview>p:nth-child(2){animation-delay:.25s}.ChatSection .conversationSection .typingPreview>p:nth-child(3){animation-delay:.5s}.ChatSection .MessageBox{background-color:#232323;display:grid;grid-template-columns:50px 50px auto 75px;align-items:center;gap:1em;padding:0 20px 0 10px;position:relative}.ChatSection .MessageBox>button{justify-self:center;color:#ccc;font-size:1.8em;border:none;background-color:transparent;padding:10px;transition:.3s ease-in-out}.ChatSection .MessageBox>input{background-color:#333;color:#ccc;border:none;outline:none;padding:12px 20px;border-radius:5px;font-size:1.2em;width:95%}.ChatSection .MessageBox>button:hover{scale:1.2}.ChatSection .MessageBox .EmojiPickerReact{position:absolute;bottom:110%;left:20px}.ChatSection .MessageBox .scrollDownBtn{position:absolute;right:30px;bottom:120%;background-color:#333;border-radius:50%;font-size:2em;transition:.2s ease-in-out}.ChatSection .MessageBox .uploadingProgressDiv{position:absolute;bottom:100%;background-color:var(--theme-color, #09f);color:#000;width:90%;left:50%;translate:-50%;border-radius:10px;padding:10px 20px;display:flex;justify-content:space-between;font-size:1.2em;font-weight:600}@keyframes typingPreviewDotAnimation{0%{transform:translateY(0)}10%{transform:translateY(-5px)}30%,50%,to{transform:translateY(0)}}.PreLoader{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#000000c5;display:flex;align-items:center;justify-content:center;z-index:10}.PreLoader .loadingAnimation{display:flex;gap:1em}.PreLoader .loadingAnimation>.animationSphere{border-radius:50%;background-color:var(--theme-color, aqua);padding:.5em;animation:sphereAnimate 1s ease-in-out calc(var(--i) * .1s) infinite}.hideLoading{display:none}@keyframes sphereAnimate{0%{transform:translateY(0)}50%{transform:translateY(-1em)}to{transform:translateY(0)}}.UserListSection{display:grid;grid-template-rows:75px 60px auto;overflow-x:hidden;gap:1em}.UserListSection .UserListSectionNav{border-bottom:2px solid #ccc;height:75px;padding:0 2em;display:grid;grid-template-columns:1fr 5fr 1fr 1fr;align-items:center;justify-content:space-between;gap:1em}.UserListSection .UserListSectionNav>a,.UserListSection .UserListSectionNav>button{color:#ccc;font-size:1.3em}.UserListSection .UserListSectionNav>button{padding:10px;background-color:transparent;border:none}.UserListSection .userSearchBar{display:grid;grid-template-columns:20px auto;align-items:center;margin:10px;padding:0 20px;width:90%;box-sizing:border-box;justify-self:center;border-radius:10px;gap:1em;background-color:#333}.UserListSection .userSearchBar>input,.UserListSection .userSearchBar>button{background-color:transparent;border:none;font-size:1.2em;color:#ccc;outline:none;width:100%}.UserListSection .UserList{position:relative;width:100%;overflow-y:scroll;overflow-x:hidden}.UserListSection .UserList .UserDiv{height:75px;width:100%;box-sizing:border-box;display:grid;position:relative;grid-template-columns:50px auto 50px;align-items:center;gap:1em;padding:0 10px}.UserListSection .UserList .activeUser{background-color:#333}.UserListSection .UserList .UserDiv:not(.activeUser):hover{background-color:#222}.UserListSection .UserList .UserDiv>.profilePicDiv{display:flex;align-items:center;justify-content:center}.UserListSection .UserList .UserDiv>.profilePicDiv>i{font-size:2.2em}.UserListSection .UserList .UserDiv>.UserDetail{height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly;padding:10px 0}.UserListSection .UserList .UserDiv>.UserDetail>p{font-size:.7em;word-wrap:break-word;display:flex;gap:1em}.UserListSection .UserList .UserDiv>.lastMessageTime{box-sizing:border-box;font-size:.6em;display:grid;gap:5px;text-align:center;width:max-content;background-color:inherit;word-wrap:break-word;overflow:hidden}.UserListSection .UserList .UserDiv>.lastMessageTime>.userMoreOptionBtn{background-color:transparent;color:#ccc;border:none;font-size:2.5em;transform:translate(100%);transition:.2s ease-in-out}.UserListSection .UserList .UserDiv:hover>.lastMessageTime>.userMoreOptionBtn{transform:translate(0)}.UserListSection .UserList .messageViewStatus{position:relative;width:2em}.UserListSection .UserList .messageViewStatus>i{font-size:1em;position:absolute;top:0;left:0}.UserListSection .UserList .messageViewStatus>i:last-child{top:1px;left:5px}.createGroupModelDiv{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 20px;border-radius:10px;background-color:#232323;color:#ccc;width:400px;z-index:15;font-size:1.2em;display:flex;flex-direction:column;scale:0;gap:2em;transition:scale .3s ease-in-out;transform-origin:-10% -10%;box-shadow:0 0 #00000080}.showCreateGroupModel{scale:1!important;box-shadow:0 0 50vw 50vw #00000080}.groupDetailSet{display:grid;grid-template-columns:50px auto 50px;gap:1em}.groupDetailSet>label{display:flex;align-items:center;justify-content:center}.groupDetailSet>label>img{width:50px;height:50px;border-radius:50%;position:absolute;background-color:#000}.groupDetailSet>label>img[src=""]{display:none}.groupDetailSet>label>input[type=file]{display:none}.groupDetailSet>label>i{font-size:2em}.createGroupModelDiv input[type=text],.groupDetailSet>button{font-size:1.2em;background-color:#333;color:inherit;outline:none;border:none;border-radius:10px;padding:10px;width:90%;transition:.2s ease-in-out}.groupDetailSet>button{background-color:#0f0;border-radius:50%;color:#000;opacity:.8}.groupDetailSet>button:hover{opacity:1}.membersListDiv{display:flex;flex-flow:row wrap;align-items:center;gap:1em}.membersListDiv>.selectedMemberDiv{padding:10px;background-color:#333;border-radius:50px;display:flex;gap:10px}.membersListDiv>.selectedMemberDiv>button{background-color:transparent;color:#ccc;border:none;font-size:1em}.selectUserForGroup{display:flex;flex-direction:column;gap:1em}.searchUserList{display:grid;overflow-y:scroll;max-height:50vh}.searchUserList>.SearchLoadingDiv{display:flex;justify-content:center;gap:2em;align-items:center;padding:10px}.searchUserList>.SearchLoadingDiv>i{font-size:1.2em}.searchUserList>.searchedUser{padding:10px;border-radius:10px;display:flex;justify-content:space-between;align-items:center}.searchUserList>.searchedUser>.profilePicDiv{display:flex;align-items:center;justify-content:center}.searchUserList>.searchedUser>.profilePicDiv>i{font-size:2.2em}.searchUserList>.searchedUser:hover{background-color:#333}.ConfirmModel{position:fixed;top:-100%!important;transition:.3s ease-in-out;left:50%;min-width:400px;transform:translate(-50%,-50%);background-color:#333;border-radius:7px;padding:20px;z-index:100;box-shadow:0 0 10px #000;display:grid;gap:2em}.ConfirmModel>div{display:flex;justify-content:flex-end;gap:1em}.ConfirmModel>div>button{padding:10px 30px;border-radius:10px;font-size:1.1em;border:1px solid #fff;background-color:transparent;color:#fff}.ConfirmModel>div>.confirmBtn{border:none;background-color:var(--theme-color, aqua);color:#000}.showConfirmModel{top:40%!important}