@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";.login{height:100dvh;display:flex;justify-content:center;align-items:center;background-color:#222831}.login .login_card{display:flex;flex-direction:column;background-color:#31363f;align-items:center;padding:20px;border-radius:12px;gap:10px;width:360px}.login .login_card img{width:auto;height:36px}.login .login_card h4{font-size:20px;color:#eee}.login .login_card .login_card-con{width:100%}.login .login_card .login_card-con form{display:flex;flex-direction:column;gap:10px;align-items:center}.login .login_card .login_card-con form input{border:none;background-color:#eee;padding:12px 16px;border-radius:20px;color:#222831;width:90%;font-size:16px}.login .login_card .login_card-con form input::placeholder{color:#222831}.login .login_card .login_card-con form input:focus{outline:none}.login .login_card .login_card-con form button{border:none;border-radius:20px;padding:10px;font-size:14px;font-weight:600;width:90%;color:#eee;background-color:#222831;cursor:pointer}.login .login_card .login_card-con form button:hover{border:1px solid #eeeeee}@media screen and (max-width: 768px){.login .login_card .login_card-con form button{padding:14px;font-weight:600;font-size:16px}}.login .login_card .login_card-con form a{font-weight:400;font-size:14px;text-decoration:none;color:#eee}.login .login_card .login_card-con form span{font-size:12px;color:#eee}.login .login_card .login_card-con p{font-size:14px;text-align:center;margin-top:12px;color:#eee}.login .login_card .login_card-con p a{font-weight:500;text-decoration:none;color:#eee}.register{height:100dvh;display:flex;justify-content:center;align-items:center;background-color:#222831}.register .register_card{display:flex;flex-direction:column;background-color:#31363f;align-items:center;padding:20px;border-radius:12px;gap:10px;width:360px}.register .register_card img{width:auto;height:36px}.register .register_card h4{font-size:20px;color:#eee}.register .register_card .register_card-con{width:100%}.register .register_card .register_card-con form{display:flex;flex-direction:column;gap:10px;align-items:center}.register .register_card .register_card-con form input{border:none;background-color:#eee;padding:12px 16px;border-radius:20px;color:#222831;width:90%;font-size:16px}.register .register_card .register_card-con form input::placeholder{color:#222831}.register .register_card .register_card-con form input:focus{outline:none}.register .register_card .register_card-con form label{display:flex;justify-content:start;align-items:center;width:90%;column-gap:8px;padding-left:6px}.register .register_card .register_card-con form label .reg-defaultimg{width:32px;height:32px;cursor:pointer;border-radius:none;object-fit:cover}.register .register_card .register_card-con form label .reg-userimg{border-radius:50%;width:32px;height:32px;cursor:pointer;object-fit:cover}.register .register_card .register_card-con form label span{font-size:14px;color:#222831;font-weight:500}.register .register_card .register_card-con form button{border:none;border-radius:20px;padding:10px;font-size:14px;font-weight:600;width:90%;color:#eee;background-color:#222831;cursor:pointer}.register .register_card .register_card-con form button:hover{border:1px solid #eeeeee}@media screen and (max-width: 768px){.register .register_card .register_card-con form button{padding:14px;font-weight:600;font-size:16px}}.register .register_card .register_card-con form span{font-size:12px;color:#eee}.register .register_card .register_card-con p{font-size:14px;text-align:center;margin-top:12px;color:#eee}.register .register_card .register_card-con p a{font-weight:500;text-decoration:none;color:#eee}.search{position:fixed;width:100%;height:100%;background-color:#00000080}.search .search_con{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);background-color:#eee;border-radius:6px;padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.search .search_con .search_con-icon{display:flex;width:100%;justify-content:flex-end;padding:0 10px 10px 0}.search .search_con form{width:250px}.search .search_con form input{width:100%;border:none;padding:8px 12px;border-radius:20px;font-size:14px}.search .search_con form input:focus{outline:none}.search .search_con .err{font-size:14px;text-align:center;padding:6px 0 0;color:#222831}.search .search_con .chatbox{display:flex;align-items:center;gap:10px;padding:8px;margin-top:8px;border-bottom:1px solid rgba(219,219,219,.897);cursor:pointer;background-color:#222831;width:100%;border-radius:20px}.search .search_con .chatbox img{width:36px;height:36px;object-fit:cover;border-radius:50%}.search .search_con .chatbox span{font-size:18px;color:#eee}@media screen and (max-width: 768px){.search .search_con .search_con-icon svg{width:24px;height:24px}.search .search_con form input{padding:14px 10px}}.navinfo{display:flex;justify-content:center;align-items:center}.navinfo .navinfo_con{display:flex;justify-content:space-between;align-items:center;padding:16px 0 16px 8px;width:90%}.navinfo .navinfo_con img{height:32px;cursor:pointer}.navinfo .navinfo_con .navinfo_con-box{display:flex;justify-content:center;align-items:center;gap:16px}.navinfo .navinfo_con .navinfo_con-user img{width:36px;height:36px;object-fit:cover;border:1px solid white;border-radius:50%}@media screen and (max-width: 768px){.navinfo_con-box svg{width:24px;height:24px}}.search_internal{padding:0 20px 10px}.search_internal .search_internal-con{display:flex;justify-content:center;flex-direction:column}.search_internal .search_internal-con form{width:100%}.search_internal .search_internal-con form .search_internal-input{width:100%;border:none;padding:8px 12px;border-radius:20px;font-size:14px}.search_internal .search_internal-con form .search_internal-input:focus{outline:none}@media screen and (max-width: 768px){.search_internal .search_internal-con form .search_internal-input{padding:12px;font-size:16px}}.chatlist{display:flex;flex-direction:column;align-items:center;justify-content:center}.chatlist .chatlist_con{width:90%;padding:0 10px;overflow-y:scroll;max-height:80dvh}.chatlist .chatlist_con::-webkit-scrollbar{background:none}.chatlist .chatlist_con .chatbox{display:flex;align-items:center;gap:10px;padding:12px 0;color:#76abae;border-bottom:1px solid rgba(119,176,170,.2);cursor:pointer}.chatlist .chatlist_con .chatbox img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid #eeeeee}.chatlist .chatlist_con .chatbox span{font-size:16px;color:#eee}.chatlist .chatlist_con .chatbox p{font-size:13px;color:#77b0aa}@media screen and (max-width: 768px){.chatlist .chatlist_con .chatbox img{width:40px;height:40px}.chatlist .chatlist_con .chatbox span{font-size:18px}.chatlist .chatlist_con .chatbox p{font-size:15px}}.sidebar{flex:.7;background-color:#31363f;height:100%;transform:translate(0)}@media screen and (max-width: 768px){.sidebar_mobile{flex:auto;background-color:#31363f;width:100%}.sidebar-hide{display:none}}.senderinfo{padding:16px 20px;letter-spacing:.4px}.senderinfo .senderinfo_con{display:flex;justify-content:space-between;align-items:center;gap:14px}.senderinfo .senderinfo_con .senderinfo_con-back{display:flex;justify-content:center;align-items:center}.senderinfo .senderinfo_con .senderinfo_con-back svg{color:#fff;height:26px;width:26px}.senderinfo .senderinfo_con .senderinfo_con-detail{display:flex;justify-content:start;align-items:center;gap:14px}.senderinfo .senderinfo_con .senderinfo_con-detail img{width:40px;height:40px;border-radius:50%;object-fit:cover}.senderinfo .senderinfo_con .senderinfo_con-detail span{font-size:18px;color:#eee;font-weight:700}@media screen and (max-width: 768px){.senderinfo .senderinfo_con .senderinfo_con-detail{gap:6px}.senderinfo .senderinfo_con .senderinfo_con-detail img{width:30px;height:30px}.senderinfo .senderinfo_con .senderinfo_con-detail span{font-size:16px}}.messages{height:79dvh}.messages .messages_con{padding:12px 20px 0;overflow-x:hidden;overflow-y:scroll;height:100%}.messages .messages_con::-webkit-scrollbar{background:none}.messages .messages_con .message{display:flex;gap:14px;margin-bottom:20px}.messages .messages_con .message .message_info img{width:40px;height:40px;border-radius:50%;object-fit:cover}.messages .messages_con .message .message_con{max-width:80%;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.messages .messages_con .message .message_con a{display:flex;flex-direction:row;width:50%}.messages .messages_con .message .message_con a img{height:200px;width:200px;border-radius:8px}.messages .messages_con .message .message_con a svg{color:#eee}.messages .messages_con .message .message_con .message_text{background-color:#31363f;color:#eee;border-radius:0 10px 10px;padding:6px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.messages .messages_con .message .message_con .message_text p{font-size:16px}.messages .messages_con .message .message_con .message_text span{font-size:10px;font-weight:500}.messages .messages_con .message.owner{flex-direction:row-reverse}.messages .messages_con .message.owner .message_con{align-items:flex-end}.messages .messages_con .message.owner .message_con a{flex-direction:row-reverse;width:50%}.messages .messages_con .message.owner .message_con a img{height:200px;width:200px;border-radius:8px}.messages .messages_con .message.owner .message_con .message_text{background-color:#eee;color:#222831;border-radius:10px 0 10px 10px;align-items:flex-end}.messages .messages_con .message.owner .message_con .message_text p{padding-left:0}.messages .messages_con .message.owner .message_con .message_text span{font-weight:500}@media screen and (max-width: 768px){.messages .messages_con .message{gap:10px}.messages .messages_con .message .message_info img{width:32px;height:32px}.messages .messages_con .message .message_con{max-width:70%}.messages .messages_con .message .message_con .message_text{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word}}.inputbox{padding:10px;margin-bottom:8px}.inputbox .inputbox_con{height:100%;display:flex;justify-content:center}.inputbox .inputbox_con form{display:flex;justify-content:space-between;align-items:center;border:1px solid #ebeaea;border-radius:20px;padding:2px 0 2px 20px;width:90%;background-color:#f7f7f7}.inputbox .inputbox_con form .input_msg-box{font-size:15px;border:none;height:100%;width:80%;color:#222831;background:transparent}.inputbox .inputbox_con form .input_msg-box:focus{outline:none}.inputbox .inputbox_con form .input_btn{display:flex;justify-content:center;align-items:center;gap:8px}.inputbox .inputbox_con form .input_btn .input_attach span{color:#222831;font-size:12px;cursor:pointer}.inputbox .inputbox_con form .input_btn .input_attach label{display:flex;justify-content:center;align-items:center}.inputbox .inputbox_con form .input_btn .input_attach label svg{color:#222831;cursor:pointer}.inputbox .inputbox_con form .input_btn .input_emoji svg{display:flex;align-items:center;justify-content:center;color:#222831}.inputbox .inputbox_con form .input_btn .input_emoji .input_emoji-box{position:fixed;left:50%;bottom:20%}.inputbox .inputbox_con form .input_btn .input_emoji .input_emoji-box .input_emoji-picker{position:absolute;bottom:100%;z-index:10}.inputbox .inputbox_con form .input_btn .input_send{border-radius:50%;padding:7px 7px 2px;background-color:#222831;display:flex;justify-content:center;align-items:center;cursor:pointer}.inputbox .inputbox_con form .input_btn .input_send label svg{color:#eee;cursor:pointer}.inputbox .inputbox_con form img{width:32px;height:32px}@media screen and (max-width: 768px){.inputbox .inputbox_con form .input_msg-box{padding:10px 0}.inputbox .inputbox_con form .input_btn{gap:5px}.inputbox .inputbox_con form .input_btn .input_emoji .input_emoji-box{left:0;bottom:14%}.inputbox .inputbox_con form .input_btn .input_send{padding:8px 8px 4px}.inputbox .inputbox_con form .input_btn .input_send svg{width:20px;height:20px}}.divider{width:100%;display:flex;justify-content:center}.divider .divider_line{width:90%;height:1px;background:#fdececb3}.chatpanel{flex:2;background:#222831;height:auto}.chatpanel .chatpanel_con{display:flex;flex-direction:column;height:fit-content}@media screen and (max-width: 768px){.chatpanel_mobile{flex:auto;width:100%}.chatpanel-hide{display:none}.chatpanel-show{display:block}}.home{height:100dvh;display:flex;align-items:center;justify-content:center;background-color:#222831}.home .home_con{width:100%;height:100%;display:flex;overflow:hidden}.userinfo{background-color:#222831;height:100dvh}.userinfo .userinfo_redirect{display:flex;flex-direction:row;justify-content:space-between;padding:2rem 5rem}.userinfo .userinfo_redirect img{width:30px;height:30px}.userinfo .userinfo_redirect .userinfo-logout{display:flex;justify-content:center;align-items:center}.userinfo .userinfo_redirect .userinfo-logout button{background:none}.userinfo .userinfo_redirect .userinfo-logout button .btn-logout{box-shadow:#32325d40 0 6px 12px -2px,#0000004d 0 3px 7px -3px;padding:6px 12px;border-radius:6px;color:#222831;font-size:14px;font-weight:500;background-color:#eee}.userinfo .userinfo_redirect .userinfo-logout button .btn-logout:hover{box-shadow:#00000059 0 5px 15px;background-color:#31363f;color:#eee}@media screen and (max-width: 768px){.userinfo .user_redirect{padding:1.4rem 2rem}}.userinfo .userinfo-profile{display:flex;flex-direction:column;justify-content:center;align-items:center}.userinfo .userinfo-profile .userinfo-profileImg img{width:160px;height:160px;border-radius:50%;object-fit:cover}.userinfo .userinfo-profile .userinfo-col{font-size:18px;padding:20px 0;row-gap:10px;display:flex;flex-direction:column}.userinfo .userinfo-profile .userinfo-col .userinfo-con{display:flex;gap:10px;align-items:center;color:#76abae}.userinfo .userinfo-profile .userinfo-col .userinfo-con span{border-radius:4px;padding:4px;font-size:20px;font-weight:600;letter-spacing:.25px}.userinfo .userinfo-profile .userinfo-btn{margin-top:20px;display:flex;justify-content:center}.userinfo .userinfo-profile .userinfo-btn .reset_btn{width:100%;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#eee;border-radius:8px;border-style:none;box-shadow:#0003 0 3px 5px -1px,#00000024 0 6px 10px,#0000001f 0 1px 18px;box-sizing:border-box;color:#222831;cursor:pointer;fill:currentColor;font-size:14px;font-weight:500;letter-spacing:.25px;line-height:normal;max-width:100%;overflow:visible;padding:10px 16px;position:relative;text-align:center;text-transform:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity 15ms linear 30ms,transform .27s cubic-bezier(0,0,.2,1) 0ms;user-select:none;-webkit-user-select:none;touch-action:manipulation;will-change:transform,opacity}.userinfo .userinfo-profile .userinfo-btn .reset_btn:hover{background-color:#31363f;color:#eee}.userinfo .userinfo-profile .userinfo-btn .reset_btn:active{box-shadow:0 4px 4px #3c40434d,0 8px 12px 6px #3c404326;outline:none}.userinfo .userinfo-profile .userinfo-btn .reset_btn:focus{outline:none;border:2px solid #4285f4}@media screen and (max-width: 768px){.userinfo .userinfo_redirect{padding:14px 18px}}.reset_pass{background:#222831;height:100dvh;display:flex;justify-content:center}.reset_pass .reset_pass-box{background-color:#31363f;width:420px;height:fit-content;padding:30px 20px 40px;margin-top:4rem;border-radius:20px;box-shadow:#0000003d 0 3px 8px}.reset_pass .reset_pass-box .reset_pass-top{display:flex;justify-content:space-between;align-items:center;padding:0 20px}.reset_pass .reset_pass-box .reset_pass-top a{display:flex;align-items:center;justify-content:center}.reset_pass .reset_pass-box .reset_pass-top a img{height:24px;width:24px}.reset_pass .reset_pass-box .reset_pass-top .reset_pass-logo{width:auto;height:28px}.reset_pass .reset_pass-box .reset_pass-con{display:flex;flex-direction:column;gap:1.1rem;margin-top:20px;align-items:center;color:#eee}.reset_pass .reset_pass-box .reset_pass-con span{font-size:24px;font-weight:500}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-mail{width:80%}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-mail input{margin-top:2px;border:none;padding:8px 12px;border-radius:6px;width:100%;color:#222831;font-size:14px;font-weight:400}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-mail input::placeholder{color:a1a1a1}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-mail input:focus{outline:none}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-btn{width:80%;text-align:center}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-btn button{width:100%;padding:10px;border-radius:6px;background-color:#222831;color:#eee;cursor:pointer;font-weight:600;font-size:14px}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-btn button:hover{border:1px solid #eeeeee}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-btn p{margin-top:6px;font-size:14px}@media screen and (max-width: 768px){.reset_pass .reset_pass-box{width:90%}.reset_pass .reset_pass-box .reset_pass-top{padding:0}.reset_pass .reset_pass-box .reset_pass-con{margin-top:10px}.reset_pass .reset_pass-box .reset_pass-con .reset_pass-mail,.reset_pass .reset_pass-box .reset_pass-con .reset_pass-btn{width:90%}}*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}a{text-decoration:none}button{border:none}