:root{--main-bg: #f1f1f1;--com-bg: #fbfbfb;--text: #191d1e;--col: #628eff65;--hovCol: #628eff1a;--mgs1: #191d1e;--mgs2: #fbfbfb;--mgsText: #fff;--chatBoxShadow: rgba(101, 101, 101, .25)}.dark:root{--main-bg: #212122;--com-bg: #181a1c;--text: #fff;--col: #00000079;--hovCol: #628eff28;--mgs1: #181a1c;--mgs2: #0f1011;--mgsText: #fff;--chatBoxShadow: rgba(100, 100, 100, .1)}*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none;color:inherit}input,button,textarea{outline:none;background:none;border:none}img{object-fit:cover}body{background-color:var(--main-bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.btnLoader{font-size:17px;margin:0 10px;animation:spinner 2s linear infinite}.formContainer{display:flex;align-items:center;justify-content:center;width:100vw;height:100vh}.formContainer .formWrapper{border-radius:20px;background:var(--com-bg);box-shadow:0 4px 20px -5.7170929909px #00000026;display:flex;flex-direction:column;width:100%;max-width:400px;padding:40px 24px 30px}.formContainer .formWrapper .error{color:red;font-size:.75em;font-style:italic;margin-bottom:16px;display:block}.formContainer .formWrapper .inputError{font-size:.75em;font-style:italic;color:red}.formContainer .formWrapper .link{margin-top:20px;font-size:.9em}.formContainer .formWrapper .link a:hover{color:#628eff;text-decoration:underline}.formContainer .formWrapper .logo{font-size:2em;font-weight:700;font-style:italic;text-align:center;margin-bottom:40px}.formContainer .formWrapper .title{font-size:1.6em;font-weight:600}.formContainer .formWrapper .desc{font-weight:500;margin-bottom:14px}.formContainer .formWrapper input{color:var(--text);display:block;width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--text);margin-bottom:25px;font-size:1em}.formContainer .formWrapper input:focus{border-color:#628eff}.formContainer .formWrapper label{margin-bottom:25px;display:flex;gap:16px;align-items:center}.formContainer .formWrapper label span{opacity:50%;font-size:14px}.formContainer .formWrapper label img{width:32px;height:32px}.formContainer .formWrapper button{cursor:pointer;width:100%;padding:14px 10px;border:none;border-radius:12px;font-size:1.2em;color:#fff;font-weight:600;background:linear-gradient(119deg,#628eff 0%,#8740cd 53.13%,#580475 100%)}.formContainer .formWrapper button:hover{background:linear-gradient(#628eff 100%,#8740cd 3.13%,#580475 0%)}.formContainer .formWrapper button:disabled{opacity:30%}.mainContainer{display:flex;width:100%;height:100vh}.sideBar{width:100%;flex:1;max-width:400px;height:100vh;background:var(--com-bg);box-shadow:var(--chatBoxShadow);z-index:10;display:flex;flex-direction:column}.sideBar .navBar{background-color:var(--col);padding:14px 16px;display:flex;align-items:center;justify-content:space-between}.sideBar .navBar>*{cursor:pointer}.sideBar .navBar .logo{font-weight:700;font-size:1.2em;display:flex;align-items:center}.sideBar .navBar .logo .icon{position:relative;height:35px;width:35px;padding-top:5px}.sideBar .navBar .logo .icon .D{position:absolute;left:9px;top:7px;font-size:14px;font-weight:900}.sideBar .navBar .themeToggle{width:64px;background-color:var(--text);color:var(--com-bg);display:flex;align-items:center;gap:4px;border-radius:17px;overflow:hidden}.sideBar .navBar .themeToggle>*{flex:none;width:30px;height:30px;padding:4px;border-radius:50%;transition:all .3s ease-in-out}.sideBar .navBar .themeToggle.system{background-color:#ffd9004d}.sideBar .navBar .themeToggle.system>:first-child{background-color:#628eff;order:1}.sideBar .navBar .themeToggle.system>:nth-child(2){opacity:30%;order:2}.sideBar .navBar .themeToggle.system>:last-child{order:3}.sideBar .navBar .themeToggle.light{background-color:#8080804d}.sideBar .navBar .themeToggle.light>:first-child{order:3}.sideBar .navBar .themeToggle.light>:nth-child(2){background-color:gold;order:1}.sideBar .navBar .themeToggle.light>:last-child{order:2;opacity:30%}.sideBar .navBar .themeToggle.dark{background-color:#618eff4d}.sideBar .navBar .themeToggle.dark>:first-child{opacity:30%;order:2}.sideBar .navBar .themeToggle.dark>:nth-child(2){order:3}.sideBar .navBar .themeToggle.dark>:last-child{background-color:gray;order:1}.sideBar .search{display:flex;flex-direction:column;background-color:var(--col)}.sideBar .search.searchResults{min-height:calc(100vh - 140px)}.sideBar .search.searchResults .searchBtn{display:block!important}.sideBar .search .userChatContainer{background-color:var(--com-bg)}.sideBar .search .userChatContainer .userChats{scroll-snap-align:start}.sideBar .search .userChatContainer .userChats:last-child .border{width:100%;right:0;height:10px}.sideBar .search .searchForm{margin:20px;position:relative}.sideBar .search .searchForm input{width:100%;font-size:16px;border:1px solid var(--mgs2);padding:10px;border-radius:30px;color:var(--text)}.sideBar .search .searchForm .searchBtn{position:absolute;display:none;top:0%;right:0%;height:100%;padding:10px}.sideBar .userChatContainer{height:100%;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:y mandatory}.sideBar .userChatContainer::-webkit-scrollbar{display:none}.sideBar .userChatContainer>div{scroll-snap-align:start}.sideBar .userChatContainer .userChats{scroll-snap-align:start;display:flex;gap:15px;padding:20px;cursor:pointer;position:relative;height:100%;transition:all .3s ease}.sideBar .userChatContainer .userChats:hover{background-color:var(--hovCol)}.sideBar .userChatContainer .userChats img{width:54px;height:54px;border-radius:50%}.sideBar .userChatContainer .userChats .border{height:1px;width:calc(100% - 100px);background:var(--text);opacity:30%;position:absolute;bottom:0;right:20px}.sideBar .userChatContainer .userChats .unread{background-color:green;position:absolute;color:#fff;font-size:.65em;font-weight:600;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;top:20px;left:60px}.sideBar .userChatContainer .userChats>.info{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.sideBar .userChatContainer .userChats>.info .username{font-weight:500}.sideBar .userChatContainer .userChats>.info .lastMgs{flex:1;opacity:50%;font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sideBar .userChatContainer .userChats>.info .lastMgs>span{display:flex;align-items:center;gap:8px}.sideBar .userChatContainer .userChats .dateTime{opacity:50;font-size:.75em}.sideBar .bottomNav{display:flex;align-items:center;gap:8px;background-color:var(--col);padding:20px}.sideBar .bottomNav>*{cursor:pointer}.sideBar .bottomNav img{width:32px;height:32px;border-radius:50%}.sideBar .bottomNav span{font-size:1.1em;font-weight:500;display:inline-block;border:1px solid rgba(255,255,255,0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50%}.sideBar .bottomNav button{margin-left:auto;height:100%;padding-top:6px;border:1px solid rgba(0,0,0,0);color:var(--text)}.sideBar .bottomNav button:hover{border:1px solid var(--text)}.chats{width:100%;height:100%;overflow:hidden;flex:2;position:relative;display:flex;flex-direction:column;justify-content:end}.chats .back{display:none;transition:all .3s ease-in-out;padding:4px 2px 0}.chats .back:hover{background-color:var(--text);background-color:var(--hovCol)}.chats .chatTop{background-color:var(--com-bg);padding:14px 16px;display:flex;align-items:center;gap:16px;width:100%;z-index:2;left:0;top:0;box-shadow:var(--chatBoxShadow)}.chats .chatTop>*{cursor:pointer}.chats .chatTop img{width:32px;height:32px;border-radius:50%}.chats .chatTop .username{font-weight:500}.chats .chatTop .icons{margin-left:auto;display:flex;gap:10px;font-size:20px;color:var(--text)}.chats .chatTop .icons>*:hover{color:var(--hovCol)}.chats .mgsContainer{display:flex;flex-direction:column-reverse;width:100%;height:100%;max-height:100vh;padding-top:20px;overflow:hidden;overflow-y:scroll}.chats .mgsContainer::-webkit-scrollbar{display:none}.chats .mgsContainer .message{scroll-behavior:smooth;margin:0 48px 20px;padding:24px 32px;background-color:var(--mgs1);color:var(--mgsText);-webkit-box-shadow:4px 7px 5px 1px var(--chatBoxShadow);-moz-box-shadow:4px 7px 5px 1px var(--chatBoxShadow);box-shadow:4px 7px 5px 1px var(--chatBoxShadow);height:auto;border-radius:20px;width:fit-content;max-width:410px;position:relative;display:flex;flex-direction:column;gap:10px}.chats .mgsContainer .message.image{border-radius:10px;padding:4px 4px 10px}.chats .mgsContainer .message>p{flex:6;width:100%;height:100%;white-space:wrap;word-break:break-all}.chats .mgsContainer .message>img{flex:1;width:100%;height:100%;max-width:406px;max-height:400px;object-fit:contain;z-index:2}.chats .mgsContainer .message .egde{display:inline-block;width:16px;height:16px;transform:rotate(45deg);background-color:var(--mgs1);position:absolute;left:-6px;top:24px}.chats .mgsContainer .message.own{background-color:var(--mgs2);align-self:flex-end;color:var(--text)}.chats .mgsContainer .message.own .egde{right:-6px;left:auto;background-color:var(--mgs2)}.chats .inputContainer{width:100%;background-color:var(--com-bg);height:auto;max-height:400px;min-height:70px;padding:22px 0;left:0;bottom:0;box-shadow:var(--chatBoxShadow)}.chats .inputContainer .imageContainer{background-color:#00000080;position:absolute;z-index:11;left:0;top:0;width:100%;height:100%;display:flex;padding:40px;align-items:center;justify-content:center}.chats .inputContainer .imageContainer .removeImg{position:absolute;font-size:30px;right:40px;top:40px}.chats .inputContainer .imageContainer .removeImg:hover{color:red}.chats .inputContainer .imageContainer .imagePreview{background-color:var(--main-bg);border-radius:10px;padding:20px 0 0;height:100%;width:100%;max-height:500px;max-width:500px}.chats .inputContainer .imageContainer .imagePreview img{width:90%;height:90%;padding:0 20px;object-fit:contain}.chats .inputContainer .imageContainer .imagePreview form{height:fit-content!important}.chats .inputContainer .imageContainer .imagePreview form input{background-color:var(--com-bg);width:100%;margin:0%}.chats .inputContainer form{width:100%;background-color:var(--com-bg);display:flex;height:100%;padding:0 20px;align-items:center}.chats .inputContainer form input{font-size:1em;width:100%;color:var(--text)}.chats .inputContainer form .inputIcon{color:var(--text);padding:5px;margin:0 5px}.chats .inputContainer form button{rotate:45deg;color:var(--text)}.chats .inputContainer form button:disabled{opacity:30%}.noChat .chats p{height:100%;font-size:5em;text-align:center;font-family:cursive;font-style:italic;font-weight:700;padding-top:20%;opacity:25%}@media screen and (max-width: 768px){.sideBar{position:absolute;width:100%;max-width:100%;height:100vh;left:-120%;top:0;transition:all .3s ease}.chats .back{display:block}.chats .mgsContainer .message{max-width:80%}.noChat .sideBar{left:0%}}@keyframes spinner{0%{rotate:0deg}50%{rotate:360deg}to{rotate:0deg}}