.clearfix:after{content:"";clear:both;display:block}html,body{letter-spacing:-.23px;background:#0d0d0e url(https://www.toptal.com/designers/subtlepatterns/patterns/nami.png);margin:0;padding:0;font-family:Quicksand,sans-serif}.auth-container{-webkit-backdrop-filter:blur(10px);background-color:#16161b99;border:1px solid #ffffff1a;border-radius:8px;max-width:400px;margin:4rem auto;padding:2rem;box-shadow:0 10px 20px #0000004d}.auth-container h2{text-align:center;color:#fff;margin-bottom:1.5rem;font-size:24px;font-weight:700}.auth-container form{flex-direction:column;gap:1rem;display:flex}.auth-container form label{color:#fff;font-weight:700}.auth-container form input{color:#fff;background-color:#ffffff26;border:1px solid #fff3;border-radius:4px;padding:.75rem;font-size:16px;transition:background-color .3s}.auth-container form input::placeholder{color:#b1b1b1}.auth-container form input:focus{background-color:#fff3;outline:none}.auth-container form button{color:#fff;cursor:pointer;background-color:#4870df;border:none;border-radius:4px;padding:.75rem;font-size:16px;font-weight:700;transition:background-color .3s}.auth-container form button:hover{background-color:#3c559c}.auth-container .error-text{color:red;text-align:center;margin-top:.5rem;font-size:14px}.auth-container p{text-align:center;color:#fff}.auth-container p button{color:#4870df;cursor:pointer;background:0 0;border:none;font-weight:700;text-decoration:none}.navbar{box-sizing:border-box;-webkit-backdrop-filter:blur(10px);background-color:#16161b99;border:1px solid #ffffff1a;justify-content:space-between;align-items:center;width:100%;padding:1.5rem 2rem;display:flex}.navbar ul{margin:0;padding:0;list-style:none;display:flex}.navbar ul li{margin-right:1.5rem}.navbar ul li a{color:#fff;font-size:16px;font-weight:700;text-decoration:none}.navbar ul li a:hover{text-decoration:none}.loader-wrapper{text-align:center;margin:80px auto}.loader-text{color:#4870df;font-weight:700}.loader,.loader:before,.loader:after{border-radius:1em;width:1em;height:1em;animation:1.8s ease-in-out infinite loading}.loader{color:#4870df;margin:auto;font-size:12px;animation-delay:-.16s;position:relative}.loader:before,.loader:after{content:"";position:absolute;top:0}.loader:before{animation-delay:-.32s;left:-1.5em}.loader:after{left:1.5em}.chat-app{width:100vw;height:100vh}.room{place-content:flex-start center;padding:5rem 20rem;animation:.6s ease-in-out forwards fadeChatApp;display:flex}.conv{-webkit-backdrop-filter:blur(10px);background-color:#16161b99;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;max-width:800px;margin:2rem auto;padding:1rem;display:flex;box-shadow:0 35px 20px -30px #0000001a}.conv .conv-title{color:#fff;text-align:center;text-shadow:0 2px 4px #00000080;border-bottom:2px solid #4870dfcc;margin-bottom:1.5rem;padding:.5rem;font-size:24px;font-weight:700}.conv-timeline{height:400px;padding-bottom:1rem;overflow-y:auto}.conv-message-item{flex-direction:column;margin:1rem 0;display:flex}.conv-message-details{color:#fff;text-align:right;margin-top:.3rem;font-size:14px}.conv-message-value{color:#fff;-webkit-backdrop-filter:blur(5px);word-wrap:break-word;background-color:#ffffff26;border:1px solid #fff3;border-radius:8px;max-width:100%;padding:1rem;font-size:16px;line-height:1.4}.conv-message-item--left .conv-message-value,.conv-message-item--left .conv-message-details{text-align:left;align-self:flex-start;display:flex}.conv-message-item--right .conv-message-value,.conv-message-item--right .conv-message-details{text-align:right;flex-direction:column;align-self:flex-end;display:flex}.conv-send-message{border-bottom-right-radius:8px;border-bottom-left-radius:8px;flex-direction:row;padding-top:2rem;display:flex}.conv-send-message form{background-color:#16161b99;border-bottom-right-radius:8px;border-bottom-left-radius:8px;flex-direction:row;width:100%;display:flex}.conv-input{-webkit-backdrop-filter:blur(5px);color:#fff;box-sizing:border-box;background-color:#ffffff26;border:1px solid #fff3;border-radius:8px;flex-grow:1;margin-right:1rem;padding:.75rem 1rem;font-family:Quicksand,sans-serif;font-size:16px;font-weight:700;transition:background-color .3s}.conv-input::placeholder{color:#b1b1b1}.conv-button{color:#fff;cursor:pointer;background-color:#4870df;border:none;border-radius:8px;justify-content:center;align-items:center;width:80px;height:40px;transition:background-color .3s;display:flex}.conv-button:hover{background-color:#3c559c}.error-text{color:red;margin-top:.5rem;font-size:14px}.room-list{-webkit-backdrop-filter:blur(10px);background-color:#16161b99;border:1px solid #ffffff1a;border-radius:8px;max-width:600px;margin:2rem auto;padding:2rem}.room-list h2{color:#fff;text-align:center;margin-bottom:1rem}.room-list ul{margin:0;padding:0;list-style:none}.room-list ul li{margin-bottom:.75rem;padding:0}.room-list ul li a{color:#fff;text-align:center;background-color:#4870df;border-radius:4px;margin:0;padding:.75rem 1rem;font-size:16px;text-decoration:none;transition:background-color .3s;display:block}.room-list ul li a:hover{background-color:#3c559c}.create-room{-webkit-backdrop-filter:blur(10px);background-color:#16161b99;border:1px solid #ffffff1a;border-radius:8px;max-width:400px;margin:2rem auto;padding:2rem}.create-room h2{text-align:center;color:#fff;margin-bottom:1rem}.create-room form{flex-direction:column;display:flex}.create-room form label{color:#fff;margin-bottom:.5rem;font-weight:700}.create-room form input[type=text]{color:#000;text-align:center;background-color:#fffc;border:1px solid #dedfed;border-radius:4px;width:95%;margin:0 auto 1rem;padding:.5rem;font-size:16px;display:block}.create-room form button{color:#fff;cursor:pointer;background-color:#4870df;border:none;border-radius:4px;padding:.75rem;font-size:16px;transition:background-color .3s}.create-room form button:hover{background-color:#3c559c}.logout-button{color:#fff;cursor:pointer;float:right;background:0 0;border:none;font-size:12px}.error-text{color:red;font-size:14px}.message-date{color:#888;margin-top:4px;font-size:.8em}@keyframes loading{0%,80%,to{box-shadow:0 1em 0 -1.3em}40%{box-shadow:0 1em}}@keyframes fadeChatApp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes fadeNewMessage{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes loadSendMessage{0%{opacity:1;width:4px;height:4px}to{opacity:0;width:100%;height:100%}}@keyframes typingMessage{0%{background-color:#606060}50%{background-color:#fff}60%{background-color:#606060}}