@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans:wght@400;600;700&family=Roboto:wght@400;700&family=Poppins:wght@400;600;700&display=swap";.list-option{position:absolute;z-index:5;right:8px;background-color:var(--secondary);border-radius:8px;padding:6px;box-shadow:0 0 16px #03070f5e}.list-option .list-item{display:flex;background-color:transparent;border:none;color:#fff;gap:10px;padding:8px;border-radius:8px;width:170px;text-align:left;align-items:center;transition:.15s background-color}.list-option .list-item svg{width:16px;height:auto}.list-option .list-item:hover{background-color:var(--secondary-darken)}.list-option .list-danger{color:var(--red)}.list-option .list-danger svg{fill:var(--red)}:root{--font-noto-sans: "Noto Sans", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-poppins: "Poppins", sans-serif}.font-noto-sans{font-family:var(--font-noto-sans)}.font-montserrat{font-family:var(--font-montserrat)}.font-poppins{font-family:var(--font-poppins)}:root{--primary: #277ae7;--primary-darken: #1b69cf;--primary-doomer: #277ae749;--secondary: #152130;--secondary-darken: #111720;--green: #19e6a2;--red: #ff275d;--red-dark: #ca103e;--text: white;--background: #03070f;--accent: #1761c1}.text-danger{color:var(--red)}.flex{display:flex;gap:8px}.flex-1-1>*{flex:1 1}.text-center{text-align:center}.font-bold{font-weight:700}.pb-normal{padding-bottom:10px}.pb-mid{padding-bottom:16px}.pb-large{padding-bottom:24px}body{margin:0 auto;padding:0;background-color:var(--background);font-family:var(--font-noto-sans);color:var(--text)}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0;padding:0}a{text-decoration:none;color:var(--primary)}a button{color:#000}button{cursor:pointer}::-webkit-scrollbar{width:10px}@media screen and (max-width: 560px){::-webkit-scrollbar{width:7px}}::-webkit-scrollbar-track{background:none}::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:20px}::-webkit-scrollbar-thumb:hover{background-color:var(--primary-darken)}.cover-bg{position:absolute;left:0;right:0;width:100vw;height:100vh;background-color:#00000080;z-index:10}.modal-side-notif{position:fixed;left:20px;top:20px;background-color:var(--secondary);padding:20px;border:1px solid var(--primary-doomer);border-radius:8px;transition:.5s left;z-index:50}.modal-side-notif h3{color:var(--primary);margin-bottom:8px}.modal-add-contact{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;padding:20px;background-color:var(--secondary);width:420px;height:fit-content;border-radius:12px}@media screen and (max-width: 560px){.modal-add-contact{margin:auto 30px;width:auto}}.modal-add-contact h2{margin-bottom:18px}.modal-add-contact .search-bar{margin-bottom:20px}.modal-add-contact .search-bar input{background-color:var(--secondary-darken);border:1px solid var(--primary-doomer);padding:16px;width:100%;border-radius:8px;color:#fff}.modal-add-contact .result-field{height:220px;overflow-y:scroll;position:relative}@media screen and (max-width: 560px){.modal-add-contact .result-field{height:180px}}.modal-add-contact .result-field .no-user{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.modal-logout{background-color:var(--secondary);padding:30px;width:fit-content;border-radius:8px}@media screen and (max-width: 560px){.modal-logout{width:auto}}.modal-logout h2{margin:20px}.modal-delete{background-color:var(--secondary);padding:20px;border-radius:8px;top:0;right:0;bottom:0;left:0;margin:auto;width:fit-content;height:fit-content;position:absolute}@media screen and (max-width: 560px){.modal-delete{width:auto;margin:auto 20px}}.desicion{display:flex;gap:8px;margin-top:30px}.desicion button{flex:1}.modal-image-viewer{position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:fit-content;height:fit-content;text-align:center}.modal-image-viewer img{height:75vh;width:auto;border-radius:8px;display:block}@media screen and (max-width: 560px){.modal-image-viewer img{height:auto;width:80vw}}.modal-image-viewer .show-more{margin-top:18px;border:none;padding:14px 24px;border-radius:99px;background-color:var(--secondary);color:#fff}.modal-image-viewer .show-more:hover{background-color:var(--secondary-darken)}.modal-image-viewer .btn-close{position:absolute;top:-40px;right:-40px}.close-panel{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer}.btn-close{background:none;border:none;margin-left:auto;display:block}.btn-close svg{width:2.5em;height:auto}.form-fadder{height:100vh;width:100vw;background-image:url(/assets/background-e4ac7bb6.svg);background-size:70%;display:flex}@media screen and (max-width: 560px){.form-fadder{height:fit-content;padding-top:90px}}.form-fadder .form-control{display:flex;flex-direction:column;gap:18px;width:100%}.form-fadder .form-control .form-item{display:flex;flex-direction:column;gap:8px}.form-fadder .form-control .form-item .multi-label{display:flex;font-size:14px;gap:8px}.form-fadder .form-control .form-item label{font-size:14px;display:block}.form-fadder .form-control .form-item input{background-color:var(--secondary-darken);font-family:var(--font-noto-sans);border:1px solid var(--primary-doomer);color:#fff}.form-fadder .form-control .form-item input::placeholder{font-size:14px}.form-fadder .form-control .form-item input,.form-fadder .form-control .form-item button{border-radius:6px;font-size:16px;padding:15px}.form-fadder .form-control .form-item[aria-required] label:after{content:" *";color:red}.form-fadder .form-control .form-error{color:var(--red)}.form-fadder .form-container{padding:30px;border-radius:12px;margin:auto;display:grid;grid-template-columns:30% 70%}@media screen and (max-width: 768px){.form-fadder .form-container{grid-template-columns:40% 60%}}@media screen and (max-width: 560px){.form-fadder .form-container{grid-template-columns:100%;margin:0;padding:0}}.form-fadder .form-container header{color:#fff;background-color:var(--accent);padding:30px;border-radius:15px 0 0 15px;display:flex;flex-direction:column;gap:12px;position:relative}@media screen and (max-width: 560px){.form-fadder .form-container header{border-radius:0;padding-bottom:150px}}.form-fadder .form-container header h1{font-family:var(--font-poppins);line-height:normal}.form-fadder .form-container header .form-auths{display:flex;flex-direction:column;gap:10px}.form-fadder .form-container .form-wrapper{background-color:#fff;padding:40px;border-radius:0 15px 15px 0;background-color:var(--secondary)}@media screen and (max-width: 560px){.form-fadder .form-container .form-wrapper{border-radius:0;padding:30px}}.form-fadder .form-container .form-wrapper form{display:flex;gap:30px;margin:0 auto}@media screen and (max-width: 560px){.form-fadder .form-container .form-wrapper form{flex-direction:column}}@media screen and (max-width: 768px){.form-fadder .form-container .form-wrapper form{flex-direction:column}}.form-fadder .form-container .form-wrapper form .form-file{width:200px;text-align:center}@media screen and (max-width: 560px){.form-fadder .form-container .form-wrapper form .form-file{width:100%}}.form-fadder .form-container .form-wrapper form .form-file label{fill:var(--primary);cursor:pointer;transition:.2s opacity;text-align:center}.form-fadder .form-container .form-wrapper form .form-file label .no-img,.form-fadder .form-container .form-wrapper form .form-file label img{width:200px;margin:0 auto}.form-fadder .form-container .form-wrapper form .form-file label .no-img{background-color:var(--secondary-darken);border-radius:999px;border:1px solid var(--primary-doomer);height:200px;display:flex;justify-content:center}.form-fadder .form-container .form-wrapper form .form-file label .no-img svg{width:100px;height:auto}.form-fadder .form-container .form-wrapper form .form-file label img{height:200px;object-fit:cover;border-radius:999px}.form-fadder .form-container .form-wrapper form .form-file label .desc{margin-top:16px}.form-fadder .form-container .form-wrapper form .form-file label:hover{opacity:.8}.form-fadder .form-container .form-wrapper form .form-file .info{font-size:small;width:fit-content;margin-top:10px;opacity:.8}.form-fadder .form-container .form-wrapper form .form-file input[type=file]{display:none}.form-fadder .form-container__w-auto{width:1080px}.form-fadder .form-container__w-auto-smol{width:800px}.form-fadder .form-container__h-auto{height:580px}.form-fadder .form-container__grid-slice-dope{grid-template-columns:40% 60%}@media screen and (max-width: 560px){.form-fadder .form-container__grid-slice-dope{grid-template-columns:100%}}@media screen and (max-width: 560px){.form-fadder .form-container__w-auto,.form-fadder .form-container__w-auto-smol{width:100%}.form-fadder .form-container__h-auto{height:100%}}.form-fadder .form-n-container{margin:auto}.form-fadder .form-n-container .form-n-wrapper{background-color:#fff;padding:30px;border-radius:12px;background-color:var(--secondary)}.btn-submit{border-radius:6px;padding:20px!important;border:none;background-color:var(--primary);padding:20px;font-family:var(--font-montserrat);font-weight:700;color:#fff;height:70px;transition:.2s background-color}.btn-submit:hover{background-color:var(--accent)}.btn-submit[disabled]{background-color:var(--primary-doomer)}.btn-auth-another{background-color:#fff;border-radius:6px;padding:12px;border:none;width:100%;display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:700;transition:.2s}.btn-auth-another svg,.btn-auth-another img{width:23px;height:auto}.btn-auth-another:hover{background-color:#ffffffe3}.btn-side-add{border:none;background-color:var(--primary);width:50px;height:50px;position:absolute;border-radius:8px;right:20px;bottom:20px;transition:.2s background-color}.btn-side-add svg{width:2.4em;height:auto}.btn-side-add:hover{background-color:var(--primary-darken)}.dsc-btn-primary,.dsc-btn-secondary,.dsc-btn-danger{border:none;padding:15px;border-radius:8px;font-size:medium;display:block;transition:.15s}.dsc-btn-primary{background-color:var(--primary);color:#fff}.dsc-btn-primary:hover{background-color:var(--primary-darken)}.dsc-btn-secondary{background-color:var(--secondary);color:var(--primary)}.dsc-btn-secondary:hover{background-color:var(--secondary-darken)}.dsc-btn-danger{background-color:var(--red);color:#fff}.dsc-btn-danger:hover{background-color:var(--red-dark)}.static__svg-flies{position:absolute;bottom:0;left:0}.static__svg-flies svg{position:absolute;bottom:20px;left:0}.container{width:1280px;margin:0 auto}@media screen and (max-width: 1280px){.container{width:768px}}@media screen and (max-width: 768px){.container{width:560px}}@media screen and (max-width: 560px){.container{width:auto;margin:0 40px}}.container-fo-nav{padding-top:100px}.home-body{background-color:var(--secondary)}.home-body a:hover{text-decoration:underline}.home-body a:hover *{text-decoration:none}.home-body .btn-primary,.home-body .btn-secondary{border:none;border-radius:5px;font-family:Roboto;font-size:16px;transition:.15s background-color}.home-body .btn-primary{background-color:var(--primary);color:#fff}.home-body .btn-primary:hover{background-color:var(--primary-darken)}.home-body .btn-secondary{background-color:var(--background);color:var(--primary)}.home-body .btn-secondary:hover{background-color:var(--secondary-darken)}.home-body iframe{border-radius:8px}@media screen and (max-width: 768px){.home-body img{width:100%!important}}.home-body h1,.home-body h2,.home-body h3,.home-body h4{letter-spacing:.02rem;font-family:Poppins}.home-body article{width:80%;margin:40px auto;letter-spacing:.02rem}@media screen and (max-width: 560px){.home-body article{width:auto}}.home-body article p,.home-body article li{font-size:large;line-height:2rem}@media screen and (max-width: 560px){.home-body article p,.home-body article li{font-size:normal}}.home-main-container picture img{pointer-events:none}.home-main-container h1.header{font-family:Poppins;font-weight:400;font-size:48px}@media screen and (max-width: 1280px){.home-main-container h1.header{font-size:32px}}.home-main-container p.content,.home-main-container div.content{font-family:Roboto;line-height:153.6%}.home-main-container .hero{height:100vh;display:flex;box-sizing:content-box;flex-direction:row-reverse;justify-content:space-between;align-items:center}@media screen and (max-width: 560px){.home-main-container .hero{flex-direction:column;justify-content:center;gap:20px;height:auto;padding-top:120px}}.home-main-container .hero .contain{display:flex;flex-direction:column;gap:20px}.home-main-container .hero .contain header h1{margin-bottom:-14px}.home-main-container .hero .contain .buttons{display:flex;gap:16px}.home-main-container .hero .contain .buttons .btn-primary,.home-main-container .hero .contain .buttons .btn-secondary{padding:14px 25px}.home-main-container .hero .image img{width:100%}.home-main-container .feature{display:flex;justify-content:space-between;align-items:center;margin:2cm auto}.home-main-container .feature .contain{width:45%}.home-main-container .feature .image{display:flex;justify-content:flex-end}@media screen and (max-width: 1280px){.home-main-container .feature{gap:30px}.home-main-container .feature .contain,.home-main-container .feature .image{flex:1}.home-main-container .feature .image img{width:100%}}@media screen and (max-width: 560px){.home-main-container .feature{margin:3cm 40px;flex-direction:column!important}.home-main-container .feature .contain{width:auto}}.home-main-container .qoutes{height:60vh}@media screen and (max-width: 560px){.home-main-container .qoutes{height:593px}}.home-main-container .lain-qoutes{background:#111720;position:relative}.home-main-container .lain-qoutes .text{position:absolute;width:100%;z-index:2;top:50%;transform:translateY(-50%)}.home-main-container .lain-qoutes .text h1,.home-main-container .lain-qoutes .text p{max-width:70%}@media screen and (max-width: 560px){.home-main-container .lain-qoutes .text h1,.home-main-container .lain-qoutes .text p{max-width:fit-content}}.home-main-container .lain-qoutes .text p{font-family:Roboto;font-size:24px}@media screen and (max-width: 768px){.home-main-container .lain-qoutes .text p{font-size:20px}}.home-main-container .lain-qoutes .lain-bg{height:100%;width:60%;right:0;top:0;position:absolute;background-size:cover;background-repeat:no-repeat}.home-main-container .lain-qoutes .lain-bg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(104deg,#111720 17.29%,rgba(17,23,32,.39) 89.97%)}@media screen and (max-width: 768px){.home-main-container .lain-qoutes .lain-bg{width:100%;background-position:50% 50%}.home-main-container .lain-qoutes .lain-bg:after{background:linear-gradient(0deg,#111720 0%,rgba(17,23,32,.39) 89.97%)}}.home-main-container section.last{height:100vh;position:relative}.home-main-container section.last .contain{text-align:center;position:absolute;width:fit-content;height:fit-content;top:0;right:0;bottom:0;left:0;margin:auto}.home-main-container section.last .contain h1{width:700px}@media screen and (max-width: 1280px){.home-main-container section.last .contain h1{width:380px}}.home-main-container section.last .contain .btn-primary{margin:20px auto auto;width:fit-content;font-size:20px;padding:18px 40px}.home-main-container section.last .in1,.home-main-container section.last .in2{position:absolute;top:50%;transform:translateY(-50%);height:auto}@media screen and (max-width: 768px){.home-main-container section.last .in1,.home-main-container section.last .in2{display:none}}.home-main-container section.last .in1{left:50px}.home-main-container section.last .in2{right:50px}@media screen and (max-width: 1280px){.home-main-container section.last .in1{width:20rem}.home-main-container section.last .in2{width:20rem}}.end{background:var(--background);box-sizing:content-box;padding:60px 0}.end .name{display:flex;align-items:center;gap:18px}.end .name h2{font-family:Poppins}.end .desc{margin-top:14px;width:452px;font-family:Roboto;line-height:153.7%}@media screen and (max-width: 560px){.end .desc{width:auto}}.end .copy{margin-top:28px;font-size:14px}.settings{padding:0 100px;position:relative;overflow-y:scroll}@media screen and (max-width: 560px){.settings{padding:0 40px}}.settings-form{width:520px;margin:0 auto;display:flex;flex-direction:column;gap:20px}@media screen and (max-width: 560px){.settings-form{width:auto}}.settings-item label{display:block;margin-bottom:10px;font-size:large}.settings-item input[type=text],.settings-item input[type=email]{width:100%;padding:15px;border:1px solid var(--primary-doomer);background-color:var(--background);color:#fff;font-size:medium;border-radius:8px}.settings-item input[type=text]:disabled,.settings-item input[type=email]:disabled{background-color:transparent}.settings-item button[type=submit]{background-color:var(--primary);color:#fff;border:none;padding:15px;border-radius:8px;transition:.15s background-color,opacity}.settings-item button[type=submit]:hover{background-color:var(--primary-darken)}.settings-item button[type=submit]:disabled{opacity:.8;background-color:var(--primary-doomer)}.settings-item .error-msg{color:var(--red)}.settings-item .desc{font-size:small;margin-top:10px;opacity:.8}.settings-item .fish{display:flex;gap:10px}.settings-item .bit-btn{background-color:var(--primary);color:#fff;border:none;border-radius:8px;width:50px}.settings-item .bit-btn svg{fill:#fff;width:1.2rem;height:auto}.settings h1,.settings h2{padding:1rem 0}.settings hr{opacity:.4}.user-settings{padding-bottom:80px}.user-settings .btn-back{background-color:transparent;border:none;margin:10px 0 0 auto;width:fit-content;display:block;padding:0}.user-settings .btn-back svg{fill:#fff;width:2.5rem;height:auto}.user-settings .profile-image{margin-top:60px}.user-settings .profile-image h2{text-align:center}.user-settings .form-file{margin:0 auto}.user-settings .form-file label img{width:300px;height:300px;border-radius:999px;object-fit:cover;transition:.1s opacity;margin:0 auto;display:block;cursor:pointer}@media screen and (max-width: 560px){.user-settings .form-file label img{width:240px;height:240px}}.user-settings .form-file label img:hover{opacity:.7}.user-settings .form-file label .desc{display:none}.user-settings .form-file .info{text-align:center;opacity:.8;margin-top:10px}.user-settings .form-file input[type=file]{display:none}.chat-intro{margin:auto;opacity:.8;text-align:center;width:80%}.chats{display:grid;margin:0 auto;width:1280px;height:100vh;grid-template-rows:100%;grid-template-columns:27% 73%}@media screen and (max-width: 1280px){.chats{width:auto;margin:0 20px}}@media screen and (max-width: 560px){.chats{display:flex;margin:0}}.chats .side-chats,.chats .main-chat{transition-duration:.5s;transition-property:flex}.chats .side-chats{background-color:var(--secondary)}@media screen and (max-width: 560px){.chats .side-chats{flex-grow:1;overflow-x:hidden}}.chats .side-chats .side-wrapper{position:relative;height:100%}@media screen and (max-width: 560px){.chats .side-chats .side-wrapper{width:100vw}}.chats .side-chats .side-wrapper .top-bar{display:flex;justify-content:space-between;align-items:center;color:#fff;background-color:var(--primary);padding:5px}.chats .side-chats .side-wrapper .top-bar .user{display:flex;align-items:center;gap:10px;background-color:transparent;color:#fff;padding:5px 15px 5px 5px;border-radius:12px}.chats .side-chats .side-wrapper .top-bar .user .text{font-family:var(--font-roboto);text-align:left}.chats .side-chats .side-wrapper .top-bar .user .text .username{font-weight:700;font-size:large}@media screen and (max-width: 560px){.chats .side-chats .side-wrapper .top-bar .user .text .username{font-size:medium}}.chats .side-chats .side-wrapper .top-bar .user img{width:50px;height:50px;object-fit:cover;background-color:var(--backgound);border-radius:999px}@media screen and (max-width: 560px){.chats .side-chats .side-wrapper .top-bar .user img{width:40px;height:40px}}.chats .side-chats .side-wrapper .top-bar .user:hover{background-color:var(--accent)}.chats .side-chats .side-wrapper .top-bar button{background:none;border:none}.chats .side-chats .side-wrapper .top-bar button svg{fill:#fff;width:1.3em;height:auto}.chats .side-chats .side-wrapper .searchbar,.chats .side-chats .side-wrapper .user-list{padding:0 14px}.chats .side-chats .side-wrapper .searchbar{position:relative;margin:20px 0}.chats .side-chats .side-wrapper .searchbar input{padding:12px 40px 12px 15px;width:100%;background-color:var(--secondary-darken);border:none;border-radius:12px;color:#fff}.chats .side-chats .side-wrapper .searchbar input::placeholder{color:#b3b9c1}.chats .side-chats .side-wrapper .searchbar svg{position:absolute;right:30px;top:50%;transform:translateY(-50%);fill:#b3b9c1;pointer-events:none}.chats .side-chats .side-wrapper .user-list{display:flex;flex-direction:column;gap:7px;position:relative}.chats .side-chats .side-wrapper .user-list .loading-component{margin:20px auto auto}.chats .side-chats .side-wrapper .no-user{margin-top:120px;text-align:center}.chats .main-chat{background-color:var(--secondary-darken)}@media screen and (max-width: 560px){.chats .main-chat{flex:3;overflow-x:hidden}}.chats .main-chat .chat-wrapper{display:flex;flex-direction:column;height:100%}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper{width:100vw}}.chats .main-chat .chat-wrapper .chat-top{color:#fff;padding:5px;display:flex;justify-content:space-between;align-items:center}.chats .main-chat .chat-wrapper .chat-top .field{display:flex;align-items:center;gap:10px}.chats .main-chat .chat-wrapper .chat-top .back-btn{position:sticky;left:10px;top:10px;border:none;background-color:transparent;width:40px;height:40px;border-radius:99px;display:block;transition:.15s background-color}.chats .main-chat .chat-wrapper .chat-top .back-btn:active{background-color:var(--secondary)}.chats .main-chat .chat-wrapper .chat-top .back-btn svg{width:2rem;height:auto;fill:#fff}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chat-top .back-btn{display:block}}.chats .main-chat .chat-wrapper .chat-top .user{display:flex;align-items:center;gap:10px;background-color:transparent;color:#fff;padding:5px 15px 5px 5px;border-radius:12px}.chats .main-chat .chat-wrapper .chat-top .user .text{font-family:var(--font-roboto);text-align:left;font-size:small}.chats .main-chat .chat-wrapper .chat-top .user .text .username{font-weight:700;font-size:medium}.chats .main-chat .chat-wrapper .chat-top .user img{width:50px;height:50px;object-fit:cover;background-color:var(--backgound);border-radius:999px}.chats .main-chat .chat-wrapper .chat-top .other{position:relative;background:none;border:none}.chats .main-chat .chat-wrapper .chat-top .other .other-btn{background-color:transparent;border:none;border-radius:44px;width:45px;height:45px;margin-right:10px}.chats .main-chat .chat-wrapper .chat-top .other .other-btn:hover{background-color:var(--secondary)}.chats .main-chat .chat-wrapper .chat-top .other .other-btn svg{fill:#fff;width:24px;height:auto}.chats .main-chat .chat-wrapper .chat-top .other .list-option{display:none}.chats .main-chat .chat-wrapper .chat-top .other:focus-within .list-option{display:block}.chats .main-chat .chat-wrapper .chats-body{flex-grow:1;position:relative;overflow-y:scroll}.chats .main-chat .chat-wrapper .chats-body .no-msg{position:absolute;width:fit-content;bottom:50px;opacity:.6;left:50%;transform:translate(-50%)}.chats .main-chat .chat-wrapper .chats-body .loading{margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%);text-align:center}.chats .main-chat .chat-wrapper .chats-body .loading .loading-component>svg{width:3em;height:auto}.chats .main-chat .chat-wrapper .chats-body .chat{margin:20px;display:flex;gap:12px;align-items:flex-start;justify-content:flex-end}.chats .main-chat .chat-wrapper .chats-body .chat-receiver{flex-direction:row-reverse}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat{margin:10px}}.chats .main-chat .chat-wrapper .chats-body .chat-content{display:flex;gap:12px}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper{max-width:60%}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper{max-width:60vw}}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .msgbox{background-color:var(--secondary);width:fit-content;padding:15px;border-radius:8px}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .msgbox .username{font-weight:700;color:var(--primary);margin-bottom:6px}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .msgbox .msg{word-wrap:break-word}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .msgbox{font-size:12px;padding:12px}}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .image{width:100%;margin-top:10px;display:flex;align-items:center;gap:20px}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .image{margin-top:5px;gap:10px}}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .image img{width:100%;height:auto;border-radius:8px;display:block;cursor:pointer}.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .date{opacity:.8;font-size:small;margin-top:6px}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat .chatbox-wrapper .date{font-size:10px}}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-content{justify-content:flex-end}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-content .username{padding-right:30px}.chats .main-chat .chat-wrapper .chats-body .chat-sender .date{text-align:right}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option{padding-top:20px;opacity:0;transition:.15s opacity}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option{padding-top:10px}}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button{border:none;height:40px;width:40px;border-radius:99px;background-color:var(--secondary);transition:.15s background-color}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button{width:32px;height:32px}}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button svg{fill:#fff;opacity:.6;width:1.3rem;height:auto}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button svg{width:1rem}}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button.danger svg{fill:var(--red);transition:.15s fill}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button.danger:hover{background-color:var(--red)}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chat-option button.danger:hover svg{fill:#fff}.chats .main-chat .chat-wrapper .chats-body .chat-sender:hover .chat-option{opacity:1}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chatbox-wrapper{margin-left:auto}.chats .main-chat .chat-wrapper .chats-body .chat-sender .chatbox-wrapper .msgbox .username{color:var(--green)}.chats .main-chat .chat-wrapper .chats-body .chat-sender .image{margin-left:auto;justify-content:flex-end}.chats .main-chat .chat-wrapper .chats-body .chat .profile{border-radius:99px;width:60px;height:60px;object-fit:cover}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .chats-body .chat .profile{width:40px;height:40px}}.chats .main-chat .chat-wrapper .msg-input{margin:10px}.chats .main-chat .chat-wrapper .msg-input .file-preview{background-color:var(--secondary);padding:10px;margin-bottom:10px;border-radius:8px;display:flex;flex-wrap:nowrap;overflow-y:scroll;gap:10px}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item{position:relative;width:fit-content;height:fit-content}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item img{height:200px;width:auto;border-radius:8px;transition:.2s opacity;display:block}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item:hover img{opacity:.7}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item .option{position:absolute;right:8px;top:8px;opacity:0;display:flex;transition:.2s opacity}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item .option svg{width:2rem;height:auto}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item .option button{background-color:transparent;border:none}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item .option .expand svg{width:1rem;margin:auto}.chats .main-chat .chat-wrapper .msg-input .file-preview .img-item:hover .option{opacity:1}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper{display:flex;padding:5px;border-radius:10px;gap:5px;background-color:var(--secondary)}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper input[type=text]{height:45px;padding:0 10px;background-color:transparent;border:none;border-radius:8px;flex-grow:1;color:#fff;font-size:medium;outline:none}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .msg-input .msg-wrapper input[type=text]{font-size:small;height:40px}}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input{width:50px;display:flex}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input{width:30px}}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input label{cursor:pointer}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input label svg{fill:var(--primary);height:100%;padding:10%;width:auto}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input label svg{width:30px}}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .file-input input[type=file]{display:none}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button{height:45px;width:45px;background-color:var(--primary);border:none;border-radius:8px;position:relative}@media screen and (max-width: 560px){.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button{width:40px;height:40px}}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button.loading{background-color:var(--primary-doomer)}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button svg{fill:var(--text);position:absolute;left:50%;top:52%;transform:translate(-50%,-50%)}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button .loading-component{transform:translate(-50%) translateY(1px)}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper button .loading-component svg{fill:var(--text);position:relative;transform:translate(0)}.chats .main-chat .chat-wrapper .msg-input .msg-wrapper .blocked{padding:15px;opacity:.7}.chats .main-chat .chat-wrapper .no-user{margin:auto;text-align:center}.chats .main-chat .chat-wrapper .no-user button{margin-top:14px;color:#fff;border:none;border-radius:8px;background-color:var(--primary);padding:12px 30px}button.user-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:12px;background-color:transparent;border:none;color:#fff;text-align:left;font-family:var(--font-noto-sans);width:100%;cursor:pointer}button.user-item .info{display:flex;align-items:center;gap:10px}button.user-item .info img{width:40px;height:40px;object-fit:cover;border-radius:99px}button.user-item .info .text .username{font-weight:700}button.user-item .info .text .chat{font-size:small}button.user-item .btn .btn-add{border:none;background-color:var(--primary);padding:8px;border-radius:6px;transition:.2s}button.user-item .btn .btn-add svg{fill:#fff;width:1.8em;height:auto}button.user-item .btn .btn-add:hover{background-color:var(--primary-darken)}button.user-item .btn .btn-add[disabled]{background-color:var(--primary-doomer)}button.user-item .count{display:flex;align-items:center;justify-content:center;border-radius:99px;background-color:var(--primary);color:var(--secondary-darken);font-weight:700;font-size:10px;width:24px;height:24px}button.user-item:hover{background-color:var(--secondary-darken)}@keyframes loading-anim{0%{rotate:0deg}to{rotate:360deg}}.loading-component svg{width:1.8em;height:1.8em;animation:.5s loading-anim infinite ease-in-out}.auth-btn{display:flex;gap:14px}.auth-btn .btn{padding:14px 30px;font-family:Roboto;color:#fff;font-size:16px;border-radius:8px}@media screen and (max-width: 1280px){.auth-btn .btn{padding:10px 20px;font-size:14px}}.auth-btn .btn-login,.auth-btn .btn-signup{border:2px solid var(--primary, #277AE7);transition:.15s}.auth-btn .btn-login{background-color:var(--primary)}.auth-btn .btn-login:hover{background-color:var(--primary-darken)}.auth-btn .btn-signup{background-color:transparent}.auth-btn .btn-signup:hover{background-color:var(--secondary-darken);border-color:transparent}.navbar{position:fixed;width:100vw;background-color:#152130be;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:20px 0;z-index:10}@media screen and (max-width: 1280px){.navbar .app_logo{width:2.5rem;height:auto}}.navbar .container{width:1280px;justify-content:space-between;align-items:center;margin:0 auto;display:flex}@media screen and (max-width: 1280px){.navbar .container{width:768px}}@media screen and (max-width: 768px){.navbar .container{width:560px}}@media screen and (max-width: 560px){.navbar .container{width:auto;margin:0 40px}}.navbar .logo a{display:flex;align-items:center;gap:18px;color:#fff}.navbar .logo a .name{font-size:24px;font-family:Poppins;font-weight:700}@media screen and (max-width: 1280px){.navbar .logo a{gap:12px}.navbar .logo a .name{font-size:20px}}.navbar .desktop-nav{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:60px}@media screen and (max-width: 1280px){.navbar .desktop-nav{gap:40px}}@media screen and (max-width: 768px){.navbar .desktop-nav{display:none}}.navbar .desktop-nav li a{color:#fff;transition:.15s opacity;opacity:.8;font-family:Roboto;font-size:18px}@media screen and (max-width: 1280px){.navbar .desktop-nav li a{font-size:14px}}.navbar .desktop-nav li a:hover{opacity:1}.navbar .burgir{background:none;border:none;position:relative;width:55px;height:55px;display:none}@media screen and (max-width: 768px){.navbar .burgir{display:block}}.navbar .burgir #bar-1,.navbar .burgir #bar-2{width:40px;height:5px;border-radius:20px;background-color:#fff;position:absolute;transform:translate(-50%,-50%);left:50%;transition-duration:.1s;transition-property:top transform;transition-timing-function:ease-out}.navbar-mobile{position:fixed;display:none;background-color:#152130d9;-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);padding:120px 40px 40px;width:100vw;height:100vh;z-index:5;box-sizing:border-box;transition:.2s right}@media screen and (max-width: 768px){.navbar-mobile{display:flex;flex-direction:column;justify-content:space-between}}.navbar-mobile .navs{display:flex;flex-direction:column}.navbar-mobile .navs a{color:#fff;width:auto;display:block;padding:18px;font-size:18px;border-radius:8px}.navbar-mobile .navs a:hover{background-color:var(--secondary-darken)}.navbar-mobile .auth-btn{display:flex}.navbar-mobile .auth-btn .btn{flex:1;display:block;padding:16px 30px;font-size:18px}