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