:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2);--section-background-light: #36404a;--section-background-dark: #303841;--primary-background: #f5f7fb;--secondary-background: #ffffff;--color-text-primary: #000;--color-text-secondary: #7a7f9a;--color-primary: #7269ef;--color-primary-light: #f5f7fb;--color-primary-white: #ffff;--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2);--section-background-light: #36404a;--section-background-dark: #303841;--primary-background: #f5f7fb;--secondary-background: #ffffff;--color-text-primary: #000;--color-text-secondary: #7a7f9a;--color-primary: #7269ef;--color-primary-light: #f5f7fb;--color-primary-white: #ffff}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;max-height:100vh;height:100vh;margin:0 auto;padding:0;font-weight:400}#app h2{font-size:28px}#app p{font-size:17px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#555}.feedback{color:#fff;padding:9px 12px;border-radius:6px;margin:5px 0;transition:.4 ease-in-out;opacity:1}a{text-decoration:none;color:var(--color-primary);transition:.4s;padding:3px}@media (min-width: 1024px){body{display:flex;place-items:center}#app{font-family:Public Sans,sans-serif}}.contact-name{font-weight:600;font-size:1rem;color:#fff;overflow-x:hidden;text-overflow:ellipsis}.scrollable{overflow-y:scroll;height:100%}.scrollable::-webkit-scrollbar{width:8px}.scrollable::-webkit-scrollbar-thumb{border-radius:6px}.scrollable::-webkit-scrollbar-thumb:hover{background:#555}.loader-container[data-v-d62b2aba]{width:100%;height:100%;display:flex;justify-content:center!important;align-items:center!important}.loader[data-v-d62b2aba]{border:10px solid #f3f3f3;border-radius:50%;border-top:10px solid var(--color-primary);width:80px;height:80px;-webkit-animation:spin-d62b2aba 2s linear infinite;animation:spin-d62b2aba 2s linear infinite}@-webkit-keyframes spin-d62b2aba{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin-d62b2aba{0%{transform:rotate(0)}to{transform:rotate(360deg)}}span{width:25%;height:100%;text-align:center;cursor:pointer}.form_container form{margin:0 auto;display:flex;justify-content:center!important;align-items:center!important;flex-direction:column;color:var(--color-primary-light);font-size:16px;gap:.3em;padding:2em;background:var(--section-background-light);border-radius:7px;box-shadow:0 4px 8px #0000000d;width:50%}.form_container form .field-wrapper .avatar-wrapper label .action-wrapper{position:absolute;top:0;width:9rem;height:9rem;border-radius:50%;display:flex;justify-content:center!important;align-items:center!important;background:transparent;transition:.3s ease-in;color:var(--color-text-primary)}.form_container form .field-wrapper .input-wrapper i{display:flex;justify-content:center!important;align-items:center!important;opacity:.7;position:absolute;width:10%;height:100%;top:0;left:0;text-align:center;color:var(--color-text-primary);background:var(--primary-background)}.form_container form .field-wrapper .check{display:flex;align-items:center;gap:0}.form_container form .field-wrapper .check input{margin-right:10px}.form_container form .field-wrapper .check label{font-size:16px!important}.form_container form input[type=submit]{background:var(--color-primary);color:var(--secondary-background);border:none;padding:12px;text-align:center;cursor:pointer}@media (max-width: 1400px){form{width:90%!important}}.container[data-v-0cbccc3b]{display:flex;justify-content:start;height:100vh}.container div[data-v-0cbccc3b]{display:flex;justify-content:start;align-items:center;flex-direction:column;height:100%}header{width:100%;line-height:1.5;min-height:100vh}header .wrapper{display:flex;justify-content:center;align-items:center}.logo{display:block;margin:0 auto 2rem}.wrapper{width:inherit;min-height:92vh;display:flex;justify-content:center!important;align-items:center!important;flex-direction:column;gap:2em}.wrapper{width:inherit;min-height:92vh;display:flex;justify-content:center!important;align-items:center!important;flex-direction:column;color:var(--color-primary-white);gap:2em}.wrapper .slogan{color:var(--color-text-secondary);font-size:18px}.wrapper .brand_container{text-align:center}.wrapper .rest_container{color:var(--color-text-secondary);line-height:1.9}.sidebar{position:relative;width:25%;background-color:#303841;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:10px;padding:15px}.sidebar h1{color:#fff}@media (max-width: 1200px){.sidebar{width:85%}}.chat-body{height:76%;width:100%;border-top:1px solid #303841;border-bottom:1px solid #303841;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:30px}.messageDetails{display:flex;justify-content:space-between;width:100%}.badge{background-color:var(--color-primary);color:#fff;padding:5px 20px;width:fit-content;border-radius:6px;font-size:9px}.chatcard{width:100%;display:flex;justify-content:start;align-items:start;gap:10px;padding:10px;background-color:#303841;border-radius:5px;cursor:pointer}.chatcard img{width:50px;height:50px;border-radius:50%}.chatcard .chatcard-info{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:5px;width:100%}.chatcard .contact-name{color:#fff}.active{background-color:#0b0b0b71}.img-container{height:100%;width:100%;display:flex;justify-content:center!important;align-items:center!important;flex-direction:column;gap:20px}.img-container img{width:300px;height:300px}@media (max-width: 1200px){.img-container{display:none}}.chat-footer{position:relative;min-height:12%;max-width:100%;width:95%;display:flex;align-items:center;justify-content:start;gap:3%}.chat-footer input[type=text]{max-width:80%;width:80%;border:none;padding:0 20px;font-size:1rem;border-radius:5px;background-color:#303841;color:#a6b0cf;min-height:60%;margin:0 10px;justify-content:center;align-items:center}.chat-footer .emoji-wrapper{position:absolute;display:flex;flex-wrap:wrap;width:55%;height:300px;overflow-y:scroll;background:#303841;bottom:100%;padding:5px;right:10%;border-radius:5px;box-shadow:0 2px 8px #0003}@media (max-width: 1200px){.chat-footer .emoji-wrapper{width:75%}}.chat-footer .emoji-wrapper span{margin-top:5px;width:10%;height:25%;text-align:center;cursor:pointer;font-size:30px!important;display:inline-block}.chat-footer .emoji-wrapper span:hover{background-color:#6159cb28}.chat-footer img{cursor:pointer;width:50px;height:50px;padding:15px;background-color:#6159cb00}.chat-footer img:hover{background-color:#6159cb28}.chat-footer .send-button{padding:0}.chat-footer .send-button:hover{opacity:.8}.avatar-wrapper{display:flex;justify-content:center!important;align-items:center!important}.avatar-wrapper label{position:relative;top:0;width:9rem;height:9rem;border-radius:50%;cursor:pointer}.avatar-wrapper label img{position:absolute;top:0;width:100%;height:100%;border-radius:50%}.fileShower{max-width:80%;width:80%;height:12%;display:flex;align-items:center}.fileShower p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fileShower i{font-size:35px;color:#fff;margin:20px}.fileShower .reset-wrapper{display:flex;justify-content:flex-end;width:100%}.fileShower .reset-wrapper i{color:red;cursor:pointer}.emoji-wrapper::-webkit-scrollbar{width:10px}.emoji-wrapper::-webkit-scrollbar-track{background-color:#f1f1f1}.emoji-wrapper::-webkit-scrollbar-thumb{background-color:#888;border-radius:5px}.emoji-wrapper::-webkit-scrollbar-thumb:hover{background-color:#555}.chat-header{height:12%;width:100%;display:flex;align-items:center;justify-content:start}.chat-header img{width:50px;height:50px;border-radius:50%;margin-right:10px}@media (min-width: 1200px){.chat-header img:first-of-type{display:none}}.chatroom{width:70%;gap:.2%;background-color:#262e35}@media (max-width: 1200px){.chatroom{display:none!important;width:100%}}span{min-width:fit-content;height:100%;text-align:center;cursor:pointer}span:hover{background-color:#6159cb28}emoji-wrapper{width:fit-content;background:#303841;padding:5px;position:absolute;border-radius:5px;top:50%;box-shadow:0 2px 8px #0003}emoji-wrapper .emoji-card{padding:12px;width:10px;height:10px;text-align:center;cursor:pointer;font-size:20px;display:inline-block}emoji-wrapper:hover{background-color:#6159cb28}.form_container{width:80%;padding:20px 0;margin:0 auto}.form_container form{margin:0 auto;display:flex;justify-content:center!important;align-items:center!important;flex-direction:column;color:#f5f7fb;font-size:16px;gap:.3em;padding:2em;background:#36404a;border-radius:7px;box-shadow:0 4px 8px #0000000d;width:50%}.form_container form .close-wrapper{width:100%;display:flex;justify-content:flex-end}.form_container form .close-wrapper i{cursor:pointer}.form_container form .field-wrapper{width:90%;margin:7px 0}.form_container form .field-wrapper .avatar-wrapper{display:flex;justify-content:center!important;align-items:center!important}.form_container form .field-wrapper .avatar-wrapper label{position:relative;width:9rem;height:9rem;border-radius:50%;cursor:pointer}.form_container form .field-wrapper .avatar-wrapper label img{position:absolute;top:0;width:100%;height:100%;border-radius:50%}.form_container form .field-wrapper .avatar-wrapper label .action-wrapper{position:absolute;top:0;width:9rem;height:9rem;border-radius:50%;display:flex;justify-content:center!important;align-items:center!important;background:transparent;transition:.3s ease-in;color:#000}.form_container form .field-wrapper .avatar-wrapper label .action-wrapper i{opacity:0}.form_container form .field-wrapper .avatar-wrapper label .action-wrapper:hover{background:#18181880}.form_container form .field-wrapper .avatar-wrapper label .action-wrapper:hover i{opacity:1}.form_container form .field-wrapper .input-wrapper{position:relative}.form_container form .field-wrapper .input-wrapper i{display:flex;justify-content:center!important;align-items:center!important;opacity:.7;position:absolute;width:10%;height:100%;top:0;left:0;text-align:center;color:#000;background:#f5f7fb}.form_container form .field-wrapper .input-wrapper label{text-align:left;opacity:.75}.form_container form .field-wrapper .input-wrapper input{border:.08px solid rgba(122,127,154,.2705882353);border-radius:3px;background:#fff;width:100%;height:100%;padding:15px 15px 15px 11%}.form_container form .field-wrapper input[type=submit]{background:#7269ef;color:#fff;border:none;padding:12px;text-align:center;cursor:pointer}.form_container form .check{display:flex;align-items:center;justify-content:flex-start;gap:10}.form_container form .check input{margin-right:10px}.form_container form .check label{font-size:16px!important}.form_container p{text-align:center;margin-top:20px;color:var(--color-text-secondary)}@media (max-width: 1400px){.form_container{width:90%!important}}.message{align-self:start;display:flex;justify-content:start;align-items:center;background-color:#7269ef;flex-direction:column;width:fit-content;min-width:120px;padding:5px;border-radius:5px;position:relative}.message i{color:#fff}.message .emoji-wrapper{position:absolute;right:-80%;top:30%;width:fit-content;background:#303841!important;padding:5px;border-radius:5px;box-shadow:0 2px 8px #0003}.message .emoji-wrapper .emoji-card{width:31px;height:fit-content;text-align:center;cursor:pointer;font-size:20px;display:inline-block}.message .emoji-wrapper:hover{background-color:#6159cb28}.message .message-content{width:100%;border-radius:10px;display:flex;align-items:center}.message .message-content p{padding:5px;color:#f0f0f0}.message .message-content i{font-size:50px;padding:10px}.message .message-sender{width:100%;display:flex;justify-content:start;padding:5px}.message .message-sender p{color:#283157;font-weight:700}.message .message-status{position:relative;width:100%;display:flex;justify-content:end}.message .message-status p{color:#abb4d2}.message .message-status span.reaction{position:absolute;top:70%;left:80%;font-size:20px}.message:hover i.fa-face-smile{visibility:visible}.receiver-msg:before{content:"";position:absolute;bottom:-7px;left:0!important;width:10px;height:10px;border:5px solid transparent;border-left-color:#7269ef;border-top-color:#7269ef;border-right-color:transparent;border-bottom-color:transparent}.usr-msg{background-color:#303841;color:#fff;align-self:end}.usr-msg .emoji-wrapper{position:absolute;left:-125%}.usr-msg:before{content:"";position:absolute;bottom:-7px;right:0!important;width:10px;height:10px;border:5px solid transparent;border-left-color:transparent;border-top-color:#303841;border-right-color:#303841;border-bottom-color:transparent}.usr-msg .message-sender{display:none}i{color:#7269ef}.modal-container{width:100%;height:100%;position:fixed;top:0;left:0;background:inherit;opacity:1;z-index:100000000000000000000;transition:.5s ease-in-out;background:#0009}.modal-container .form-container{position:fixed;opacity:1;top:25%;left:5%;width:70%;min-height:fit-content;background:transparent;border-radius:6px;z-index:9999999999;padding:0;transition:.5s ease-in-out;display:flex;flex-direction:column;gap:10%}@media (max-width: 1200px){.modal-container .form-container{width:95%}}.modal-container .close-wrapper{position:relative}.modal-container .close-wrapper .close-icon{position:absolute;top:-80px;right:-28px;width:30px;height:30px;cursor:pointer}.modal-container .close-wrapper .close-icon:hover{transform:scale(1.1)}.modal-container .type-wrapper{display:flex;justify-content:start;width:90%}.modal-container .type-wrapper .type{width:50%;padding:10px;border:none;text-align:center;cursor:pointer;background-color:#7269ef00;color:#f0f0f0;font-weight:600;border-bottom:1px solid #7269ef}.modal-container .type-wrapper .type:hover,.modal-container .type-wrapper .active{background:#7269ef;color:#fff}.modal-container .field-wrapper .input-wrapper{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:5px;padding:10px}.modal-container .field-wrapper .input-wrapper img{width:20px;height:20px}.modal-container .field-wrapper .input-wrapper input{position:relative;font-size:15px;width:100%;padding:7px;border:1.5px solid #6c63ff;border-radius:5px}.modal-container .field-wrapper .input-wrapper .submit{background:#7269ef;color:#fff;border:none;padding:12px;text-align:center;width:50%;cursor:pointer}.navbar{display:flex;align-items:center;min-width:65px;width:5%;background-color:#36404a;padding:15px 0;gap:20%}.navbar img{width:50px;height:50px;cursor:pointer}.navbar img.profile-avatar{border-radius:50%}.navbar .log-out{border-radius:5px;padding:5px;background-color:transparent;cursor:pointer}.navbar .log-out:hover{background-color:#0b0b0b71}.navbar ul.icons-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:40%;padding:0;gap:20%}.navbar ul.icons-container li{list-style:none;cursor:pointer;background-color:#36404a00;border-radius:5px;width:50px;height:50px;padding:10px}.navbar ul.icons-container li:hover{background-color:#7269ef}.navbar ul.icons-container li img{width:30px;height:30px}@media (max-width: 1200px){.navbar{width:15%}}.profile{display:flex;flex-direction:column;justify-content:flex-start;height:100vh;padding:100px 0;gap:5%}.profile h3{color:#f5f7fb;font-size:16px}.profile h5{font-size:12px;color:#a6b0cf}.profile .section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}@media (max-width: 768px){.profile .section{gap:15px;padding:50px 0}}.profile img{width:50px;height:50px;border-radius:50%;margin-right:10px}.chatlist{width:100%;background-color:#303841;display:flex;align-items:center;flex-direction:column;text-align:center;gap:10px;overflow-y:scroll}.chatlist .add-chat{position:absolute;right:20px;bottom:50px;width:50px;height:50px;cursor:pointer}.chatlist .add-chat:hover{transform:scale(1.1)}.chatlist h1{color:#fff}.chatlist .search-bar{display:flex;align-items:center;gap:10px;background-color:#36404a;padding:10px;width:100%;border-radius:5px}.chatlist .search-bar img{width:20px;height:20px}.chatlist .search-bar input{width:100%;height:30px;border:none;border-radius:5px;background-color:#36404a;color:#fff}.chatlist .search-bar input:focus{outline:none}.actions-wrapper{display:flex;justify-content:space-between;width:100%;gap:10px}.actions-wrapper i{width:10%;background:var(--color-primary);border:none;border-radius:5px;display:flex;justify-content:center;align-items:center;font-size:22px;cursor:pointer}