@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap";body{background:#f7f7f7;margin:0}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif;text-decoration:none}body{background:#f7f7f7;justify-content:center;align-items:center;min-height:100vh;padding:0 10px;display:flex}#root{text-align:left;box-sizing:border-box;border:none;justify-content:center;align-items:center;width:100%;max-width:100%;min-height:100vh;margin:0;display:flex}.wrapper{background:#fff;border-radius:16px;width:100%;max-width:450px;box-shadow:0 0 128px #0000001a,0 32px 64px -48px #00000080}.form{padding:25px 30px}.form header{border-bottom:1px solid #e6e6e6;padding-bottom:10px;font-size:25px;font-weight:600}.form form{margin:20px 0}.form form .error-text{color:#721c24;text-align:center;background:#f8d7da;border:1px solid #f5c6cb;border-radius:5px;margin-bottom:10px;padding:8px 10px;display:none}.form form .name-details{display:flex}.form .name-details .field:first-child{margin-right:10px}.form .name-details .field:last-child{margin-left:10px}.form form .field{flex-direction:column;margin-bottom:10px;display:flex;position:relative}.form form .field label{margin-bottom:2px}.form form .input input{border:1px solid #ccc;border-radius:5px;width:100%;height:40px;padding:0 10px;font-size:16px}.form form .field input{outline:none}.form form .image input{font-size:17px}.form form .button input{color:#fff;cursor:pointer;background:#333;border:none;border-radius:5px;height:45px;margin-top:13px;font-size:17px}.form form .field i{color:#ccc;cursor:pointer;position:absolute;top:70%;right:15px;transform:translateY(-50%)}.form form .field i.active:before{color:#333;content:""}.form .link{text-align:center;margin:10px 0;font-size:17px}.form .link a{color:#333}.form .link a:hover{text-decoration:underline}.users{padding:25px 30px}.users header,.users-list a{border-bottom:1px solid #e6e6e6;justify-content:space-between;align-items:center;padding-bottom:20px;display:flex}.wrapper img{object-fit:cover;border-radius:50%}.users header img{width:50px;height:50px}:is(.users,.users-list) .content{align-items:center;display:flex}:is(.users,.users-list) .content .details{color:#000;margin-left:20px}:is(.users,.users-list) .details span{font-size:18px;font-weight:500}.users header .logout{color:#fff;cursor:pointer;background:#333;border:none;border-radius:5px;outline:none;padding:7px 15px;font-size:17px;text-decoration:none;display:block}.users .search{justify-content:space-between;align-items:center;margin:20px 0;display:flex;position:relative}.users .search .text{font-size:18px}.users .search input{opacity:0;pointer-events:none;border:1px solid #e6e6e6;border-radius:5px 0 0 5px;outline:none;width:calc(100% - 50px);height:42px;padding:0 13px;font-size:16px;transition:all .2s;position:absolute}.users .search input.show{opacity:1;pointer-events:auto}.users .search button{z-index:1;cursor:pointer;color:#333;background:#fff;border:none;border-radius:0 5px 5px 0;outline:none;width:47px;height:42px;font-size:17px;transition:all .2s;position:relative}.users .search button.active{color:#fff;background:#333}.search button.active i:before{content:""}.users-list{max-height:350px;overflow-y:auto}:is(.users-list,.chat-box)::-webkit-scrollbar{width:0}.users-list a{border-bottom-color:#f1f1f1;margin-bottom:15px;padding-bottom:10px;padding-right:15px}.users-list a:last-child{border-bottom:none;margin-bottom:0}.users-list a img{width:40px;height:40px}.users-list a .details p{color:#67676a}.users-list a .status-dot{color:#468669;padding-left:10px;font-size:12px}.users-list a .status-dot.offline{color:#ccc}.chat-area header{align-items:center;padding:18px 30px;display:flex}.chat-area header .back-icon{color:#333;font-size:18px}.chat-area header img{width:45px;height:45px;margin:0 15px}.chat-area header .details span{font-size:17px;font-weight:500}.chat-box{background:#f7f7f7;min-height:500px;max-height:500px;padding:10px 30px 20px;position:relative;overflow-y:auto;box-shadow:inset 0 32px 32px -32px #0000000d,inset 0 -32px 32px -32px #0000000d}.chat-box .text{text-align:center;width:calc(100% - 50px);position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.chat-box .chat{margin:15px 0}.chat-box .chat p{word-wrap:break-word;padding:8px 16px;box-shadow:0 0 32px #00000014,0 16px 16px -16px #0000001a}.chat-box .outgoing{display:flex}.chat-box .outgoing .details{max-width:calc(100% - 130px);margin-left:auto}.outgoing .details p{color:#fff;background:#333;border-radius:18px 18px 0}.chat-box .incoming{align-items:flex-end;display:flex}.chat-box .incoming img{width:35px;height:35px}.chat-box .incoming .details{max-width:calc(100% - 130px);margin-left:10px;margin-right:auto}.incoming .details p{color:#333;background:#fff;border-radius:18px 18px 18px 0}.typing-area{justify-content:space-between;padding:18px 30px;display:flex}.typing-area input{border:1px solid #e6e6e6;border-radius:5px 0 0 5px;outline:none;width:calc(100% - 58px);height:45px;padding:0 13px;font-size:16px}.typing-area button{color:#fff;cursor:pointer;opacity:.7;pointer-events:none;background:#333;border:none;border-radius:0 5px 5px 0;outline:none;width:55px;font-size:19px;transition:all .3s}.typing-area button.active{opacity:1;pointer-events:auto}@media screen and (width<=450px){.form,.users{padding:20px}.form header{text-align:center}.form form .name-details{flex-direction:column}.form .name-details .field:first-child{margin-right:0}.form .name-details .field:last-child{margin-left:0}.users header img{width:45px;height:45px}.users header .logout{padding:6px 10px;font-size:16px}:is(.users,.users-list) .content .details{margin-left:15px}.users-list a{padding-right:10px}.chat-area header{padding:15px 20px}.chat-box{min-height:400px;padding:10px 15px 15px 20px}.chat-box .chat p{font-size:15px}.chat-box .outogoing .details{max-width:230px}.chat-box .incoming .details{max-width:265px}.incoming .details img{width:30px;height:30px}.chat-area form{padding:20px}.chat-area form input{width:calc(100% - 48px);height:40px}.chat-area form button{width:45px}}