@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";:root{--primary-color: #5aa75a;--secondary-color: #8ad28a;--background-color: #f0ebeb;--font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif}body,html{min-height:100vh;position:fixed;min-width:100vw;background-image:url(../resources/chitthi_bcgjpg.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;font-family:var(--font-family);margin:0;padding:0;color:#ffffffde;background-color:var(--background-color);overflow:hidden}header{margin:0;padding:0 1.5rem;align-items:center;display:flex;justify-content:space-between;width:100%;height:64px;border-bottom:1px solid white;box-sizing:border-box;transition:all .3s ease}.logo_mainPage img{width:120px;height:auto;max-height:50px;animation:spinOnce 5s infinite;animation-delay:5s;animation-timing-function:ease-in-out;transform-origin:center}.search_bar{width:30%}.search_bar input{width:100%;height:35px;border:none;border-radius:10px;padding:0 10px;font-size:1rem}.search_bar input:focus{outline:none;box-shadow:0 0 0 2px #8ad28ac4}.user_info{width:auto;height:100%}.user_info button{width:42px;height:42px;background:#5aa75a;border:none;border-radius:50%;cursor:pointer}.dashboard_main{display:flex;height:92dvh}.Profile_page{display:flex;flex-direction:column;align-items:center;padding:2rem;background-color:#f9f9f9;max-width:600px;height:70dvh;margin:auto;font-family:Arial,sans-serif}.Profile_page .avatar{border:2px solid #8ad28ac4;width:150px;height:150px;margin-bottom:1rem;border-radius:50%;overflow:hidden;box-shadow:0 4px 10px #0000001a}.Profile_page .avatar img{position:relative;width:100%;height:100%;object-fit:cover}.avatar_img_hndle{position:relative}.avatar_cam{color:red;position:absolute;top:3%;right:20%;z-index:2}#avatar_input{display:none}#avatar_button{color:#f20a0a;font-weight:bolder;z-index:3;border-radius:0%;width:fit-content;background-color:#333}.Profile_page .user_info{width:80%;text-align:center;color:#8ad28ac4}.Profile_page .user_info h1{margin:0;font-size:2rem}.Profile_page .user_info h3{margin-top:.5rem;font-size:1.2rem}.image_preview_dp{display:flex;flex-direction:column;align-items:center;color:#d01b18;background-color:#388e3c;width:100%}.chats-sideBar{position:relative;width:25%;background:#f0f0f0;border-right:1px solid #ddd;height:100dvh;color:#000;display:flex;flex-direction:column;padding:0}.side_bar{position:relative;width:100%;margin-bottom:2%;background:#f0f0f0;border-right:1px solid #ddd;height:100dvh;color:#000;display:flex;flex-direction:column}.side-bar-header{display:flex;align-items:center;width:100%;height:64px;background-color:#8ad28ac4;border-bottom:1px solid #ddd}.side-bar-content{flex:1;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#8ad28ac4 #f5f5d8;margin-bottom:70px}.side-bar-content ul{padding:0;margin:0;list-style:none}.side-bar-content li{height:60px;width:100%;margin-bottom:4px;padding:0;font-size:1.2rem;border:2px solid #8ad28ac4;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .2s ease}.side-bar-content li:hover{background-color:#5aa75a;color:#f5f5d8}.chat-item{display:flex;align-items:center;padding:10px;margin-bottom:10px;border-radius:5px;border:1px solid #ddd;cursor:pointer;transition:background .3s}.chat-item:hover{background:#e0e0e0}.chat-avatar{width:50px;height:50px;margin-right:10px;border-radius:50%;overflow:hidden}.chat-avatar img{width:100%;height:100%;object-fit:cover}.chat-info{display:flex;flex-grow:1}.chat-info h3{margin:0;font-size:16px;color:#333}.chat-info p{margin:0;font-size:14px;color:#777}.chat_board{width:75%;height:100%;padding:1rem;box-sizing:border-box;color:#000}.chat_page{display:flex;flex-direction:column;height:100%;width:100%;color:#000}.starter_div{padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f0f0f0;margin:auto;width:60%;height:60%;border-radius:1rem;opacity:.95}.starter_div .slogan{font-size:2rem;font-weight:700;color:#8ad28ac4}.starter_div img{width:50%;height:50%;border-radius:5%}.chat_header{position:sticky;display:flex;align-items:center;width:100%;height:64px;padding:10px 15px;background:#fff;border-bottom:1px solid #ddd;box-shadow:0 2px 4px #0000001a}.chat_header h2{font-size:18px;margin-left:.8rem}.message-loader{display:flex;justify-content:center;align-items:center;padding:10px 0;height:30%}.chat_content{flex:1;padding:12px;overflow-y:scroll;background-color:#f0f0f0;display:flex;flex-direction:column;height:calc(100dvh - 128px);max-height:calc(100dvh - 128px);position:relative}.chat_content>div{overflow-anchor:none}.scroll-anchor{overflow-anchor:auto;height:1px}.sent,.received{padding:8px 12px;margin-bottom:6px;border-radius:18px;max-width:55%;word-wrap:break-word;font-size:15px;line-height:1.4}.received{background-color:#dcf8c6;color:#000;align-self:flex-start}.sent{background-color:#e6e6e6;color:#000;align-self:flex-end}.sent figure,.received figure{margin:0;display:flex;flex-direction:column;align-items:flex-start;width:200px;height:auto;border-radius:10px;overflow:hidden;background:#fff}.sent figure img,.received figure img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:10px 10px 0 0}.sent figcaption,.received figcaption{padding:5px 8px;width:100%;font-size:14px;color:inherit;background-color:inherit;border-radius:0 0 10px 10px}.imageViewer{width:100vw;height:98dvh;margin:auto;display:flex;justify-content:center;align-items:center;background:#000}.imageViewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.chat_footer{display:flex;position:relative;align-items:center;width:100%;padding:10px;background:#fff;border-top:1px solid #ddd;box-sizing:border-box;gap:10px}#msg_txt{flex:1;padding:10px;border:1px solid #ddd;border-radius:20px;outline:none;font-size:15px}#msg_img{display:none}#msg_icon{cursor:pointer;font-size:22px;color:#555}.msg_btn{padding:6px 12px;background-color:#4caf50;color:#fff;border:none;border-radius:16px;font-size:14px;cursor:pointer;width:15%}.msg_btn:hover{background-color:#388e3c}.image-preview{width:20%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.image-preview img{width:100%;height:auto;border-radius:6px;border:1px solid #ccc}.image-preview svg{cursor:pointer;color:#d01b18}.dark{background-color:#333;color:#fff}@media screen and (max-width: 600px){header{height:56px;padding:0 1rem}.logo_mainPage img{width:100px;max-height:45px}.search_bar{width:26%}.user_info{width:auto}.user_info button{width:36px;height:36px}.dashboard_main{flex-direction:column}.chat_board{display:none}.chats-sideBar{width:100%;height:100dvh}.chat_page{height:99dvh;width:100vw}.chat_header{height:56px}.chat_content{height:calc(99dvh - 112px);margin-bottom:10px}.imageViewer{width:100vw;height:98dvh;margin:auto;display:flex;justify-content:center;align-items:center;background:#000}.imageViewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.chat_footer{display:flex;align-items:center;width:100%;padding:10px;background:#fff;border-top:1px solid #ddd;box-sizing:border-box;gap:10px}.image_preview{width:20%;position:absolute;bottom:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-bottom:10px}.image-preview img{width:100%;height:auto;border-radius:6px;border:1px solid #ccc}.side-bar-content li{height:56px;font-size:1rem}.chat-avatar{width:48px;height:48px}.chat-info h3,.chat-info p{font-size:14px}}@keyframes spinOnce{0%{transform:rotate(0)}10%{transform:rotate(360deg)}to{transform:rotate(360deg)}}*{font-family:var(--font-family)}.body_cover{height:100dvh;width:100vw;font-family:var(--font-family);margin:0;padding:0;color:var(--primary-color);background-image:url(/resources/chitthi_bcgjpg.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden}.body_cover form{opacity:.95;background-color:#fff;width:40%;height:max-content;margin:2% auto;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;box-shadow:0 4px 8px #0000001a}.body_cover form h1{margin-top:0}.body_cover form input{display:block;margin:1% auto auto;height:10%;width:50%;padding:10px;border:1px solid #ccc;border-radius:5px}.body_cover form .Avatar{height:28%;width:40%;margin-bottom:2%}.body_cover form .Avatar img{width:100%;height:100%;border-radius:5%}.border{width:100%;height:5px;background-color:var(--primary-color)}form button[type=submit]{background-color:var(--primary-color);color:#fff;border:none;padding:.75rem;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:1rem;margin-top:1.5rem;width:50%}form button[type=submit]:hover{transform:scale(1.02);box-shadow:0 5px 15px rgba(var(--primary-color-rgb),.3)}form button[type=submit]:disabled{opacity:.7;cursor:not-allowed;transform:none}.error-message{color:#e74c3c;background-color:#fdecea;padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;width:100%;text-align:center;font-size:.9rem}@media screen and (max-width: 600px){.body_cover form{width:80%}.body_cover form .Avatar{height:28%;width:55%}}:root{--primary-color: #5aa75a;--background-color: #f0ebeb;--font-family: "Open Sans", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif}.home{height:100vh;width:100vw;overflow:hidden;background-image:url(/resources/chitthi_bcgjpg.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;justify-content:center;align-items:center;font-family:var(--font-family)}.landingPage{height:auto;min-height:60vh;width:50vw;max-width:600px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fbfdfce6;color:var(--primary-color);padding:2rem;box-shadow:0 4px 8px #0000001a;text-align:center;gap:1rem}.landingPage img{width:50%;height:auto;border-radius:5%;margin-bottom:1rem}.landingPage h1{margin:0;font-size:2rem}.landingPage p{margin:.5rem 0;width:100%;line-height:1.6}.landingPage button{background-color:var(--primary-color);color:#fff;border:none;padding:10px 20px;margin:.5rem 0;border-radius:5px;cursor:pointer;transition:transform .3s}.landingPage button:hover{transform:scale(1.05)}@media (max-width: 768px){.landingPage{width:80vw;padding:1.5rem}.landingPage img{width:70%}.landingPage h1{font-size:1.5rem}.landingPage button{padding:8px 16px}}@media (max-width: 480px){.landingPage{margin:auto;width:80vw;padding:1rem}.landingPage img{width:80%}.landingPage h1{font-size:1.2rem}.landingPage p{font-size:.95rem}.landingPage button{width:40%;font-size:1rem}}