@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap";*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.mx-\[5px\]{margin-left:5px;margin-right:5px}.mx-auto{margin-left:auto;margin-right:auto}.my-\[10px\]{margin-top:10px;margin-bottom:10px}.ml-\[10px\]{margin-left:10px}.ml-\[16px\]{margin-left:16px}.mt-\[10px\]{margin-top:10px}.mt-\[20px\]{margin-top:20px}.mt-\[30px\]{margin-top:30px}.mt-\[80px\]{margin-top:80px}.block{display:block}.inline{display:inline}.flex{display:flex}.h-\[20px\]{height:20px}.h-\[240px\]{height:240px}.h-\[40px\]{height:40px}.h-full{height:100%}.h-screen{height:100vh}.w-\[150px\]{width:150px}.w-\[20px\]{width:20px}.w-full{width:100%}.max-w-\[210px\]{max-width:210px}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-y-auto{overflow-y:auto}.rounded-\[10px\]{border-radius:10px}.border{border-width:1px}.bg-bg-blue{--tw-bg-opacity: 1;background-color:rgb(10 38 71 / var(--tw-bg-opacity))}.bg-blue{--tw-bg-opacity: 1;background-color:rgb(32 82 149 / var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.px-\[34px\]{padding-left:34px;padding-right:34px}.px-\[40px\]{padding-left:40px;padding-right:40px}.px-\[50px\]{padding-left:50px;padding-right:50px}.px-\[64px\]{padding-left:64px;padding-right:64px}.py-\[10px\]{padding-top:10px;padding-bottom:10px}.py-\[30px\]{padding-top:30px;padding-bottom:30px}.pl-\[20px\]{padding-left:20px}.pr-\[20px\]{padding-right:20px}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-\[14px\]{font-size:14px}.text-\[18px\]{font-size:18px}.text-\[24px\]{font-size:24px}.text-\[26px\]{font-size:26px}.text-\[30px\]{font-size:30px}.font-bold{font-weight:700}.font-light{font-weight:300}.font-semibold{font-weight:600}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-light-blue{--tw-text-opacity: 1;color:rgb(44 116 179 / var(--tw-text-opacity))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--bg-dark-blue: rgb(3, 16, 30);--bg-blue: rgb(10, 38, 71);--dark-blue: rgb(20, 66, 114);--blue: rgb(32, 82, 149);--light-blue: rgb(44, 116, 179);--dark-hover: rgb(7, 25, 47);--user: rgb(210, 210, 210);--red: rgb(179, 44, 44);background-color:var(--bg-dark-blue)}*{font-family:Nunito Sans}.back{height:22px;width:22px;opacity:1;cursor:pointer;margin-right:20px}.back:hover{opacity:.7}.login-box{background:var(--bg-blue);margin:150px auto 0;width:320px;padding:30px 20px;box-shadow:0 4px 14px #000000a6;border-radius:10px}.register-box{background:var(--bg-blue);margin:70px auto 0;width:320px;padding:30px 20px;box-shadow:0 4px 14px #000000a6;border-radius:10px}.login-box a{box-shadow:0 4px 14px #000000a6}.login-box a:hover{background:var(--dark-blue)}.register-btn{box-shadow:0 4px 14px #000000a6;padding:8px 14px;background:var(--blue);color:#fff;border-radius:10px;margin-top:10px;cursor:pointer}.register-btn-disabled{background-color:var(--dark-hover);cursor:default}.register-btn:hover{background:var(--dark-blue)}.register-btn-disabled:hover{background-color:var(--dark-hover)}#username-input,#password-input{display:flex;flex-grow:1;height:38px;width:200px;background-color:var(--bg-dark-blue);border-radius:16px;padding:6px 16px;resize:none;margin:10px 0;color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:none}::-webkit-scrollbar-thumb{background:rgb(67,67,67)}::-webkit-scrollbar-thumb:hover{background:#383838}.chat-box{background-color:var(--bg-blue);color:#fff;height:100%;display:flex;flex-direction:column}.nav-bar{background:var(--bg-blue);padding:0 20px;display:flex;align-items:center;color:#fff;font-size:20px;font-weight:500;z-index:1;justify-content:space-between}.nav-bar-profile{display:flex;align-items:center;cursor:pointer;opacity:1}.nav-bar-profile:hover{background:var(--dark-hover);opacity:.8}.nav-bar-profile img{height:32px;width:32px;min-height:32px;min-width:32px;-o-object-fit:cover;object-fit:cover;border-radius:100%;margin-right:12px}.new-chat{height:24px;width:24px;cursor:pointer;opacity:1}.new-chat:hover{background-color:#000000a6;opacity:.6}.chat-header{box-shadow:0 4px 14px #000000a6;display:flex;align-items:center;padding:0 20px}.chat-list{display:flex;flex-direction:column;flex-grow:1;color:#fff;overflow-y:auto}.chat-input{box-shadow:0 -4px 14px #000000a6;display:flex;align-items:center;padding:10px 14px}.chat-search{background:var(--bg-blue);box-shadow:0 4px 14px #000000a6;padding:14px 20px;display:flex;flex-direction:column;justify-content:space-between}#chat-search-input{width:100%;height:28px;background-color:var(--bg-dark-blue);border-radius:16px;color:#fff;padding:0 16px}#chat-search-input:focus{outline:none}.chat-card{border-bottom:3px solid var(--bg-dark-blue);display:flex;align-items:center;padding:0 20px;flex-grow:1;cursor:pointer}.chat-card:hover,.chat-list a.active{background:var(--dark-hover)}.chat-img{height:100px;width:100px;min-height:100px;min-width:100px;border-radius:100%;-o-object-fit:cover;object-fit:cover}.chat-card-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-weight:600;flex:1;width:0}.chat-card-last-msg{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;font-weight:600;flex:1;width:0}.chat-card-last-msg-seen{color:gray;font-weight:500}.profile-back{display:flex;height:60px;align-items:center}.profile-img{height:120px;width:120px;min-height:120px;min-width:120px;margin-right:20px;border-radius:100%;-o-object-fit:cover;object-fit:cover}.upload-label{height:120px;width:120px;padding:0 10px;background-color:#00000057;position:absolute;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:100%;cursor:pointer;opacity:0;font-size:14px}.upload-label:hover{opacity:1}input[type=file]{display:none}.chat-header-img{height:40px;width:40px;min-height:40px;min-width:40px;-o-object-fit:cover;object-fit:cover;border-radius:100%;margin-right:20px}.chat-header-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:22px;font-weight:600;flex:1;width:0}.chat-info-img{height:28px;width:28px;opacity:1;cursor:pointer;margin-left:10px}.chat-info-img:hover{opacity:.7}.chat-messages{width:100%;padding:10px 12px 20px;display:flex;flex-direction:column-reverse}.other-user h1{margin-left:52px;font-size:14px;height:16px;color:var(--user);margin-top:20px}.other-user img{margin-top:8px;height:34px;width:34px;min-height:34px;min-width:34px;-o-object-fit:cover;object-fit:cover;border-radius:100%}.other-user .chat-message{background:var(--dark-hover)}.curr-user{display:flex;flex-direction:column}.curr-user h1,.curr-user img{display:none}.curr-user .flex{flex-direction:row-reverse}.curr-user .chat-message{background:var(--dark-blue);margin-top:30px}.chat-message{max-width:240px;display:flex;align-items:center;padding:8px 14px;margin:6px 6px 1px;border-radius:10px}.chat-message p{overflow-wrap:break-word;word-wrap:break-word;max-width:100%}.chat-message-time{color:var(--user);display:flex;align-items:flex-end;font-size:12px;padding-bottom:8px}.consecutive-msg h1{display:none}.consecutive-msg img{opacity:0}.consecutive-msg .chat-message{margin:1px 6px}.chat-convo{display:flex;flex-direction:column;flex-grow:1;overflow-y:auto;flex-direction:column-reverse}.chat-message-input{display:flex;flex-grow:1;height:38px;background-color:var(--bg-dark-blue);border-radius:16px;color:#fff;padding:6px 16px;resize:none}.chat-message-input:focus{outline:none}.chat-send-img{height:30px;width:30px;opacity:1;cursor:pointer;margin-left:14px}.chat-send-img:hover{opacity:.7}.chat-send-img-disabled{opacity:.4;cursor:default}.chat-send-img-disabled:hover{opacity:.4}.chat-announcement{padding:20px 40px;color:#9ca3af;text-align:center;font-size:14px}.chat-typing{padding:10px 58px 16px;color:#9ca3af;box-shadow:0 -4px 14px var(--bg-blue);max-width:500px;display:flex;align-items:center}.chat-typing img{margin:0 4px;height:30px;width:30px;min-height:30px;min-width:30px;border-radius:100%;-o-object-fit:cover;object-fit:cover}.chat-typing-invisible{display:none}.info-img{height:140px;width:140px;min-height:140px;min-width:140px;border-radius:100%;-o-object-fit:cover;object-fit:cover}.change-info-img{height:140px;width:140px;background-color:#00000057;position:absolute;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer;opacity:0;font-size:14px;top:0}.change-info-img:hover{opacity:1}.chat-info-name{font-size:28px;font-weight:600;cursor:pointer;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:center;flex:1;width:0}.chat-info-name:hover{color:#9ca3af}.popup-bg{height:100%;width:100%;position:absolute;background:var(--dark-hover);border-radius:10px;opacity:0;display:none;z-index:3}.open-popup-bg{opacity:.7;display:block}.popup{height:180px;width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-blue);border-radius:10px;box-shadow:0 4px 14px #000000a6;opacity:0;display:none;z-index:4;color:#fff}.open-popup{opacity:1;display:flex;align-items:center;justify-content:center;flex-direction:column}#name-popup-input{display:flex;flex-grow:1;height:38px;width:200px;background-color:var(--bg-dark-blue);border-radius:16px;padding:6px 16px;resize:none;margin:10px 0}#name-popup-input:focus{outline:none}.name-send-img{height:24px;width:24px;margin-left:10px;cursor:pointer}.name-send-img:hover{opacity:.7}.name-send-img-disabled{cursor:default;opacity:.4}.name-send-img-disabled:hover{opacity:.4}.member-card{height:60px;width:100%;display:flex;align-items:center}.member-card img{width:40px;height:40px;min-width:40px;min-height:40px;-o-object-fit:cover;object-fit:cover;border-radius:100%;margin-right:20px}.add-member{cursor:pointer}.add-member:hover{opacity:.7}.leave-group{text-align:center;color:var(--red);display:flex;align-items:center;justify-content:center;padding:40px 0}.leave-group div{cursor:pointer}.leave-group div:hover{opacity:.8}.leave-group img{height:22px;width:22px;margin-left:10px}.member-popup{min-height:200px;width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-blue);border-radius:10px;box-shadow:0 4px 14px #000000a6;opacity:0;display:none;z-index:4;color:#fff;padding:20px 26px}.open-member-popup{opacity:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.add-members-btn{margin-top:20px;background-color:var(--light-blue);padding:6px 14px;border-radius:10px;cursor:pointer}.add-members-btn:hover{background-color:var(--blue)}.add-members-btn-disabled{cursor:default;background-color:#9ca3af}.add-members-btn-disabled:hover{background-color:#9ca3af}.leave-popup{height:140px;width:300px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-blue);border-radius:10px;box-shadow:0 4px 14px #000000a6;opacity:0;display:none;z-index:4;color:#fff;padding:20px 26px}.open-leave-popup{opacity:1;display:flex;align-items:center;justify-content:center;flex-direction:column}.open-leave-popup input[type=button]{border-radius:10px;padding:6px 14px;margin:10px 6px;cursor:pointer}.create-convo-main{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;padding:40px 20px;overflow-y:auto}.create-convo-main p{text-align:center;color:var(--red);margin-top:10px;max-width:300px}#convo-name-input{width:300px;margin:10px 0;background:none;border-bottom:2px solid var(--light-blue)}#convo-name-input:focus{outline:none}.char-counter{color:#9ca3af;text-align:left;width:300px;font-size:14px;margin-top:-6px}.char-counter-red{color:var(--red)}.typing{width:64px;height:30px;position:relative;margin-left:5px;background:var(--dark-blue);border-radius:20px;display:flex;justify-content:space-around;padding:0 10px;align-items:center}.typing__dot{float:left;width:12px;height:12px;background:#b6b5b8;border-radius:50%;opacity:0;animation:typingFade 1s infinite}.typing__dot:nth-child(1){animation-delay:0s}.typing__dot:nth-child(2){animation-delay:.2s}.typing__dot:nth-child(3){animation-delay:.4s}@keyframes typingFade{0%{opacity:0}50%{opacity:.8}to{opacity:0}}.loading{width:90px;height:30px;position:relative;margin-left:5px;border-radius:20px;display:flex;justify-content:space-around;padding:0 10px;align-items:center}.loading__dot{float:left;width:12px;height:12px;background:#b6b5b8;border-radius:50%;opacity:0;animation:loadingFade 1s infinite}.loading__dot:nth-child(1){animation-delay:0s}.loading__dot:nth-child(2){animation-delay:.2s}.loading__dot:nth-child(3){animation-delay:.4s}@keyframes loadingFade{0%{opacity:0}50%{opacity:.8}to{opacity:0}}@media screen and (min-width: 640px){.chat-box{flex-grow:1}.box-shadow{box-shadow:0 4px 14px #000000a6;border-radius:10px}.chat-box{border-top-right-radius:10px;border-bottom-right-radius:10px}.chat-list{border-bottom-left-radius:10px}.chat-card{height:96px}.chat-img{height:62px;width:62px;min-height:62px;min-width:62px}.chat-card-name,.chat-card-last-msg{font-size:16px}.chat-search{height:90px}.nav-bar{height:60px;border-top-left-radius:10px}.nav-bar,.chat-list,.chat-search{border-right:3px solid var(--bg-dark-blue)}.chat-header{min-height:70px;border-top-right-radius:10px}.chat-input{border-bottom-right-radius:10px}.chat-header-img{height:34px;width:34px;min-height:34px;min-width:34px}.chat-send-img{height:24px;width:24px}}@media screen and (max-width: 639px){::-webkit-scrollbar{width:0px}.chat-box{z-index:2;position:fixed;top:0;right:0;transform:translate(100%);width:100%;overflow-y:auto;transition:transform .2s}.chat-box-show{transform:translate(0)}.chat-card{height:112px}.chat-img{height:72px;width:72px;min-height:72px;min-width:72px}.chat-card-name{font-size:20px}.chat-card-last-msg{font-size:18px}.chat-search{height:14%}.nav-bar{height:7%}.new-chat{height:30px;width:30px}.chat-header{min-height:8%}#chat-search-input{height:38px}#convo-name-input{font-size:24px}.chat-typing{padding:10px 30px 16px}.chat-typing img{margin:0 4px;height:36px;width:36px;min-height:36px;min-width:36px}.typing{height:36px}.profile-img{height:100px;width:100px;min-height:100px;min-width:100px}.upload-label{height:100px;width:100px}}.hover\:bg-dark-blue:hover{--tw-bg-opacity: 1;background-color:rgb(20 66 114 / var(--tw-bg-opacity))}.hover\:bg-slate-900:hover{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.hover\:underline:hover{text-decoration-line:underline}@media (min-width: 640px){.sm\:my-\[50px\]{margin-top:50px;margin-bottom:50px}.sm\:hidden{display:none}.sm\:h-\[300px\]{height:300px}.sm\:h-\[700px\]{height:700px}.sm\:min-w-\[350px\]{min-width:350px}.sm\:min-w-\[640px\]{min-width:640px}.sm\:max-w-\[300px\]{max-width:300px}.sm\:max-w-\[450px\]{max-width:450px}.sm\:max-w-\[800px\]{max-width:800px}.sm\:text-\[14px\]{font-size:14px}.sm\:text-\[20px\]{font-size:20px}.sm\:text-\[22px\]{font-size:22px}}