body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}}body{background-color:var(--white)}.modal-popup{width:min(350px,80%);font-family:var(--main-font);color:var(--black);text-align:center;font-size:1.4rem;height:200px;display:none;background-color:var(--white);border-width:4px;font-weight:600;height:220px}.modal-popup[open]{display:flex;flex-direction:column;justify-content:space-between;align-items:end}.modal-popup form{display:flex;gap:1rem;margin-top:12px}.modal-popup .dialog-btn{border-radius:6px;border:none;cursor:pointer;transition-duration:.1s;font-size:1.1rem;padding:4px 8px}.dialog-btn.close{background-color:transparent;border:1px solid transparent;color:var(--black)}.dialog-btn.delete{background-color:var(--black);color:var(--white)}.dialog-btn.close:hover{color:#2e2e2e;border:1px solid #2e2e2e;transform:scale(1)}.dialog-btn.delete:hover{background-color:#2e2e2e;transform:scale(1)}main{height:100vh;position:relative}nav{background-color:var(--white);font-family:var(--main-font);color:var(--black);width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 6vw;height:fit-content;height:70px;border:.5px solid var(--black)}nav .logo{height:100%}nav .normal-menu{display:flex;justify-content:space-between;height:100%;width:300px;padding:0}nav .burger-menu{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:44px;right:0;padding:0;width:150px;color:var(--black);background-color:var(--white);max-height:0;overflow:hidden;transition:max-height .4s ease;z-index:2}nav .burger-menu.open{max-height:200px}.burger-li{width:100%;height:40px;display:flex;align-items:center;justify-content:center;text-align:center;border-bottom:1px solid var(--black);border-top:1px solid var(--black)}.navbar-li{height:100%;font-size:16px;display:flex;align-items:center;justify-content:center;width:120px;cursor:pointer;transition-duration:.2s;border-radius:6px;text-align:center}.navbar-li:hover,.navbar-li.navbar-active{background-color:var(--black);color:var(--white)}.nav-btn{width:35px;height:35px;display:none;cursor:pointer}.nav-btn:hover{background-color:#c9c9c9}.main{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%;height:calc(100% - 130px);padding-inline:6rem;gap:30px}.main .groups{padding:0;margin:0;display:flex;flex-direction:column;justify-content:space-between;height:85%;width:fit-content}.group{background-color:var(--white);box-shadow:-6px -6px 10px #dcdcdc,6px 6px 10px #00000064;color:var(--black);font-family:var(--main-font);width:200px;height:80px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;border:4px solid transparent;opacity:0;animation:simpleFade .6s ease-in forwards;transition-duration:.1s}.group.active{background-color:var(--white);color:var(--black);box-shadow:-2px -2px 2px #00000030,2px 2px 2px #dcdcdc}.group:nth-child(1){animation-delay:.3s}.group:nth-child(2){animation-delay:.6s}.group:nth-child(3){animation-delay:.9s}.group:nth-child(4){animation-delay:1.2s}.group:hover{background-color:var(--white);color:var(--black);box-shadow:-2px -2px 2px #00000064,2px 2px 2px #dcdcdc}.group span{background-color:var(--black);color:var(--white);margin-left:15px;border-radius:6px;width:45px;text-align:center;font-size:.9rem}@keyframes simpleFade{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.chat-box{height:85%;width:70%;border:6px solid var(--black);border-radius:1rem;position:relative;background-color:var(--white);overflow-x:hidden}.group-name{background-color:var(--white);font-family:var(--main-font);color:var(--black);position:absolute;top:0;left:50%;transform:translate(-50%);width:200px;text-align:center;font-weight:700;box-shadow:0 0 6px .01px #000;border-bottom-left-radius:4px;border-bottom-right-radius:4px;z-index:2;display:flex;align-items:center;justify-content:space-evenly}.group-name.logged{width:100%}.group-name p{font-weight:900;letter-spacing:1px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connected-dot{border-radius:50%;width:10px;height:10px}.connected-dot.connected{background-color:#03d703;box-shadow:0 0 4px .01px #03d703}.connected-dot.disconnected{background-color:#dc0000;box-shadow:0 0 4px .01px #dc0000}.input-area{position:absolute;display:flex;justify-content:end;gap:10px;align-items:center;background-color:var(--black);bottom:0;height:50px;width:100%;border-top:2px solid var(--black);padding:4px 2px 2px 0}.chat-box textarea{height:100%;width:calc(100% - 70px);outline:none;font-size:1.2rem;font-weight:600;background-color:var(--white);border:2px solid #8b8b8b;border-radius:4px;font-family:var(--main-font);color:var(--black);padding:6px 10px;resize:none;overflow-y:auto;white-space:pre-wrap;line-height:1}.chat-box textarea:focus{border-width:3px}.chat-box button{background-color:var(--white);padding:8px;height:100%;width:50px;border:none;border-radius:4px 4px 10px;cursor:pointer}.chat-box button:hover{background-color:var(--white)}.chat-box button img{height:20px;margin-inline:auto}.chat-box button:disabled{cursor:default;opacity:.7}.chat-box button:hover:disabled{background-color:var(--white)}.log-message{position:absolute;bottom:50px;right:0;color:var(--white);z-index:4;background-color:#121212;font-family:var(--main-font);border-top-left-radius:6px;padding:2px 6px;font-size:.85rem}.log-message span{font-weight:600;cursor:pointer}.log-message span:hover{text-decoration:underline}.chat{height:calc(100% - 50px);position:relative;overflow-y:auto;display:flex;flex-direction:column-reverse;gap:4px;padding:2px;width:100%;scrollbar-width:thin;-ms-overflow-style:none}.chat-container::-webkit-scrollbar{display:none}.chat .message{font-family:var(--main-font);background-color:var(--white);border-radius:10px;max-width:50%;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;padding:4px 10px}.message-content{display:flex;flex-direction:column}.message.sent{align-self:flex-end;border:.5px solid var(--black)}.message.received{align-self:flex-start;background-color:#121212;color:var(--white)}.messanger-name{font-size:.75rem;font-family:var(--main-font)}.back-button{position:absolute;top:2rem;left:1.5rem;width:50px;height:50px;border:none;background-color:transparent;transition-duration:.1s;cursor:pointer}.back-button:hover{transform:scale(1.15)}.notifications{position:absolute;bottom:5px;right:5px;display:flex;align-items:center;gap:5px;width:150px;font-family:var(--main-font);cursor:pointer}.notifications input{display:none}.check-box{width:20px;height:20px;background-color:var(--black);position:relative;border-radius:6px}.check-box svg{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px}.check-box svg.on{display:block}.list-header{position:absolute;top:20px;left:50%;transform:translate(-50%);font-family:var(--main-font);color:var(--black);font-weight:700;font-size:2rem;width:80%;text-align:center}.main .list{position:absolute;top:54%;left:50%;transform:translate(-50%,-50%);border:3px solid #252525;height:85%;width:60%;display:flex;flex-direction:column;margin:0;padding:0;overflow-y:auto;scrollbar-width:thin}.list li{display:grid;grid-template-columns:3fr 3fr 1fr;gap:8px;padding:20px;align-items:center;border-bottom:1px solid var(--black);font-family:var(--main-font);background-color:#ededed;transition-duration:.15s;height:70px;z-index:1}.list li:hover{background-color:#c7c7c7}.list li span:nth-child(1){font-weight:600;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list button{background-color:var(--black);color:var(--white);border:none;border-radius:4px;padding:4px 6px;cursor:pointer;transition-duration:.05s}.list button:hover{transform:scale(1.1)}footer{background-color:var(--black);color:var(--white);height:60px;display:flex;justify-content:center;width:100%;align-items:center;position:absolute;bottom:0}footer p{text-align:center}footer>div{height:fit-content;border-right:2px solid #f2f2f2;padding-inline:1rem}footer>div>div{display:flex;justify-content:space-around}footer a{color:var(--white)}footer .logo{filter:invert(1) brightness(2);height:40px;margin-left:1rem}.loading-section{z-index:3;position:absolute;inset:0;background-color:#f2f2f24d;display:flex;justify-content:center;align-items:center}.loading-circle{background-color:transparent;border-radius:50%;border:1rem solid var(--black);border-top-color:transparent;z-index:4;width:100px;height:100px;animation:rotate .6s infinite linear}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 64rem){.group{width:170px;font-size:1rem}.group span{width:35px;font-size:.75rem}.navbar-li{font-size:.8rem}.main{padding-inline:3rem;height:calc(100% - 140px)}footer{height:70px}}@media (max-width: 48rem){.list-header{font-size:1.8rem}.main .list{width:80%}}@media (max-width: 40rem){nav{height:60px}.nav-btn{display:block}.log-message{font-size:.6rem;bottom:40px;width:50%}.back-button{top:0;left:2px}nav .normal-menu{display:none}nav img{height:80%}.navbar-li{font-size:.8rem}.main{flex-direction:column;height:calc(100% - 160px);padding:1rem 1rem 3rem}.main .groups{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:fit-content}.notifications{font-size:.85rem}.group{width:150px;font-size:.9rem;height:45px}.input-area{height:40px}.group span{font-size:.7rem}.chat-box{width:100%;height:610px}.group-name{font-size:.5rem}.group-name .connected-dot{height:5px;width:5px}.chat-box textarea{font-size:.9rem;letter-spacing:1px}.chat{height:calc(100% - 40px)}.chat .messanger-name{font-size:.6rem}.chat .message{font-size:.7rem}.list-header{top:10px}.main .list{width:95%;gap:0}.list li{height:50px;font-size:.8rem;padding:8px 1rem}.list li:hover{background-color:#c7c7c7}.list li span:nth-child(1){max-width:140px}footer{flex-direction:column;height:95px;padding:6px;font-size:.8rem}footer>div{border-right:none;width:320px;border-bottom:2px solid var(--white)}footer .logo{margin-top:5px;height:30px}footer p{border-right:none;padding:0 0 5px}}:root{--black: #121212;--white: #f2f2f2;--main-font: "Roboto", sans-serif}*,*:before,*:after{box-sizing:border-box}.auth-form{position:absolute;top:53%;left:50%;transform:translate(-50%,-50%);box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;width:min(400px,90%);height:420px;padding:8px 0;background-color:#dfdfdf}.auth-form.register{height:510px}.auth-form *{margin-inline:auto;width:fit-content;font-family:var(--main-font);color:var(--black)}.auth-form>div{width:80%;margin:12px auto}.auth-form.login>div{margin:1rem auto}.auth-form h2{font-size:clamp(2rem,2px + 6vw,2.5rem);margin-top:20px;margin-bottom:-10px;text-transform:uppercase}.auth-form.login h2{font-size:clamp(2rem,2px + 6vw,2.5rem);margin:1rem auto}.auth-input-div{position:relative;width:100%}.auth-form input{width:100%;height:37px;padding-inline:40px;border:2px solid var(--black);outline:none}.auth-form input:focus{border:3px solid var(--black)}.auth-form label{font-size:1.2rem;font-weight:600}.icons{position:absolute;top:53%;transform:translateY(-50%);width:20px;left:14px}.eye-icons{position:absolute;width:30px;right:6px;top:53%;transform:translateY(-50%);cursor:pointer}.auth-form button{position:relative;left:50%;margin-top:50px;transform:translate(-50%);background-color:#dfdfdf;color:var(--black);font-size:1.4rem;width:80%;letter-spacing:1px;font-weight:600;cursor:pointer;transition-duration:.2s;padding:4px 0;border:none}.register-btn{top:-50px}.auth-form button:after{position:absolute;content:"";height:100%;top:0;left:50%;transform:translate(-50%);background-color:#dfdfdf;width:100%;z-index:-1;transition-duration:.2s}.auth-form button:hover:after{width:200px;background-color:var(--black)}.auth-form button:hover{color:var(--white)}.auth-form p{position:absolute;bottom:1rem;width:100%;text-align:center;left:50%;transform:translate(-50%)}.auth-form span{font-weight:600;cursor:pointer}.auth-form span:hover{text-decoration:underline}.error-msg{color:#de2626;font-size:.8rem;top:40px}.success-msg{background-color:var(--black);font-family:var(--main-font);color:var(--white);border-radius:6px;font-size:1rem;position:absolute;top:75px;padding:2px 8px;left:50%;transform:translate(-50%);z-index:2;animation:fadeOut 1s ease-in forwards;animation-delay:4s;opacity:1}.auth-form .checkbox-label{font-size:.7rem;position:relative;top:-10px;left:40px;gap:10px;margin:0;display:flex;align-items:center;cursor:pointer}.auth-form .check-box{width:18px;height:18px;background-color:var(--black);border-radius:6px;transition:border-color .2s ease,box-shadow .2s ease}.auth-form .check-box.checkbox-error{border-color:red;box-shadow:0 0 4px red;animation:shake .3s ease;background-color:red}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@media (max-width: 40rem){.auth-form p{font-size:.8rem}}