@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap";.formContainer{background-color:#d1ebd3;height:100vh;display:flex;align-items:center;justify-content:center}.formContainer .formWrapper{background-color:#fcfcf5;padding:20px 60px;border-radius:10px;display:flex;flex-direction:column;gap:10px;align-items:center}@media screen and (max-width: 480px){.formContainer .formWrapper{padding:15px 30px;margin:10px}}.formContainer .formWrapper .logo{color:#5c413f;font-weight:700;font-size:24px}@media screen and (max-width: 480px){.formContainer .formWrapper .logo{font-size:20px}}.formContainer .formWrapper .title{color:#9e6f6d;font-size:12px}.formContainer .formWrapper form{display:flex;flex-direction:column;gap:15px}@media screen and (max-width: 480px){.formContainer .formWrapper form{width:100%}}.formContainer .formWrapper form input{padding:15px;border:none;width:250px;border-bottom:1px solid #9e6f6d;background-color:#fcfcf5}@media screen and (max-width: 480px){.formContainer .formWrapper form input{width:100%;padding:12px}}.formContainer .formWrapper form input::placeholder{color:#afafaf}.formContainer .formWrapper form button{background-color:#e9c695fe;color:#fff;padding:10px;font-weight:700;border:none;cursor:pointer}@media screen and (max-width: 480px){.formContainer .formWrapper form button{padding:12px;font-size:16px}}.formContainer .formWrapper form label{display:flex;align-items:center;gap:10px;color:#9e6f6d;font-size:12px;cursor:pointer}.formContainer .formWrapper form img{width:32px}.formContainer .formWrapper p{color:#9e6f6d;font-size:12px;margin-top:10px}.formContainer .formWrapper p a{color:#5c413f;text-decoration:none}.formContainer .formWrapper p a:hover{text-decoration:underline;color:#8b5c4a}.home{background-color:#fff7e7;height:100vh;display:flex;align-items:center;justify-content:center}.home .container{border:1px solid white;border-radius:10px;width:65%;height:80%;display:flex;overflow:hidden}@media screen and (max-width: 768px) and (min-width: 481px){.home .container{width:90%;height:85%}}@media screen and (max-width: 480px){.home .container{width:95%;height:90%;border-radius:5px}}.home .container .sidebar{flex:1;background-color:#d1ebd3;position:relative;overflow-y:auto;max-height:100%;scroll-behavior:smooth}@media screen and (max-width: 480px){.home .container .sidebar{flex:0 0 100%;min-width:100%}}.home .container .sidebar .navbar{display:flex;align-items:center;background-color:#b8d8be;height:50px;padding:10px;justify-content:space-between;color:#5c413f}.home .container .sidebar .navbar .logo{font-weight:700}@media screen and (max-width: 768px) and (min-width: 481px){.home .container .sidebar .navbar .logo{display:none}}.home .container .sidebar .navbar .user{display:flex;gap:10px;align-items:center}.home .container .sidebar .navbar .user img{background-color:#ddddf7;height:24px;width:24px;border-radius:50%;object-fit:cover}.home .container .sidebar .navbar .user button{background-color:#e9c695fe;color:#fff;font-size:10px;border:None;cursor:pointer;padding:5px 10px}@media screen and (max-width: 768px) and (min-width: 481px){.home .container .sidebar .navbar .user button{position:absolute;bottom:10px}}@media screen and (max-width: 480px){.home .container .sidebar .navbar .user button{font-size:12px;padding:8px 12px}}.home .container .sidebar .navbar .search{border-bottom:1px solid gray}.home .container .sidebar .navbar .search .searchForm{padding:10px}.home .container .sidebar .navbar .search .searchForm input{background-color:transparent;border:none;color:#fff;outline:none;width:100%}.home .container .sidebar .navbar .search .searchForm input::placeholder{color:#d3d3d3}.home .container .sidebar .userChat{padding:10px;display:flex;align-items:center;gap:10px;color:#5c413f;cursor:pointer;position:relative}.home .container .sidebar .userChat:hover{background-color:#e0f0e3}.home .container .sidebar .userChat img{width:50px;height:50px;border-radius:50%;object-fit:cover}@media screen and (max-width: 480px){.home .container .sidebar .userChat img{width:40px;height:40px}}.home .container .sidebar .userChat .userChatInfo span{font-size:18px;font-weight:500}@media screen and (max-width: 480px){.home .container .sidebar .userChat .userChatInfo span{font-size:16px}}.home .container .sidebar .userChat .userChatInfo p{font-size:14px;color:#9e6f6d}@media screen and (max-width: 480px){.home .container .sidebar .userChat .userChatInfo p{font-size:12px}}.home .container .sidebar .userChat .userChatInfo .close-icon{position:absolute;right:10px;top:10px;width:20px;height:20px;cursor:pointer;opacity:0;transition:opacity .2s ease;flex-shrink:0}@media screen and (max-width: 480px){.home .container .sidebar .userChat .userChatInfo .close-icon{width:18px;height:18px;right:5px;top:5px}}.home .container .sidebar .userChat .userChatInfo:hover .close-icon{opacity:1}.home .container .chat{flex:2}@media screen and (max-width: 480px){.home .container .chat{flex:0 0 100%;min-width:100%}}.home .container .chat .EmojiPickerReact .epr-category-nav .epr-cat-btn{background-color:#f7f7f7;border-radius:8px;padding:6px;margin:2px;transition:background-color .3s}.home .container .chat .EmojiPickerReact .epr-category-nav .epr-cat-btn:hover{background-color:#e9c695;color:#fff}.home .container .chat .EmojiPickerReact .epr-category-nav .epr-cat-btn.epr-active{background-color:#d1ebd3;color:#333}.home .container .chat .EmojiPickerReact{--epr-bg-color: white}.home .container .chat .EmojiPickerReact .epr-emoji{background-color:#fff}.home .container .chat .EmojiPickerReact .epr-emoji:hover{background-color:#e9c695fe}.home .container .chat .chatInfo{height:50px;background-color:#d1ebd3;display:flex;align-items:center;justify-content:space-between;padding:10px;color:#5c413f}@media screen and (max-width: 480px){.home .container .chat .chatInfo{padding:8px 10px}}.home .container .chat .chatIcons{display:flex;gap:10px}.home .container .chat .chatIcons img{height:24px;cursor:pointer}@media screen and (max-width: 480px){.home .container .chat .chatIcons img{height:20px}}.home .container .chat .messages{background-color:#e8f4ea;padding:10px;height:calc(100% - 160px);overflow:scroll}@media screen and (max-width: 480px){.home .container .chat .messages{height:calc(100% - 140px);padding:8px}}.home .container .chat .messages .message{display:flex;gap:20px;margin-bottom:20px}@media screen and (max-width: 480px){.home .container .chat .messages .message{gap:10px;margin-bottom:15px}}.home .container .chat .messages .message .messageInfo{display:flex;flex-direction:column;color:gray;font-weight:300}.home .container .chat .messages .message .messageInfo img{width:40px;height:40px;border-radius:50%;object-fit:cover}@media screen and (max-width: 480px){.home .container .chat .messages .message .messageInfo img{width:32px;height:32px}}.home .container .chat .messages .message .messageContent{max-width:80%;display:flex;flex-direction:column;gap:10px}@media screen and (max-width: 480px){.home .container .chat .messages .message .messageContent{max-width:85%}}.home .container .chat .messages .message .messageContent p{background-color:#fff;padding:10px 20px;border-radius:0 10px 10px;max-width:max-content;word-wrap:break-word}@media screen and (max-width: 480px){.home .container .chat .messages .message .messageContent p{padding:8px 15px;font-size:14px}}.home .container .chat .messages .message .messageContent img{width:50%}@media screen and (max-width: 480px){.home .container .chat .messages .message .messageContent img{width:70%}}.home .container .chat .messages .message .messageContent .clickableImage{cursor:pointer;max-width:200px;border-radius:8px;transition:transform .2s}@media screen and (max-width: 480px){.home .container .chat .messages .message .messageContent .clickableImage{max-width:150px}}.home .container .chat .messages .message .messageContent .clickableImage:hover{transform:scale(1.02)}.home .container .chat .messages .message.owner{flex-direction:row-reverse}.home .container .chat .messages .message.owner .messageContent{align-items:flex-end}.home .container .chat .messages .message.owner .messageContent p{background-color:#b8d8be;color:#fff;border-radius:10px 0 10px 10px}.home .container .chat .imageModal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1050}.home .container .chat .imageModal img{max-width:90%;max-height:90%;border-radius:10px}.home .container .chat .input{height:50px;background-color:#fff;padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}@media screen and (max-width: 480px){.home .container .chat .input{height:60px;padding:8px;gap:5px}}.home .container .chat .input input{flex:1;border:none;outline:none;color:#2f2d52;font-size:18px;min-width:0}@media screen and (max-width: 480px){.home .container .chat .input input{font-size:16px}}.home .container .chat .input::placeholder{color:#d3d3d3}.home .container .chat .input .emoji-picker-wrapper{position:absolute;bottom:100%;right:0;margin-bottom:10px;z-index:1000}@media screen and (max-width: 480px){.home .container .chat .input .emoji-picker-wrapper{right:-10px;margin-bottom:5px}}.home .container .chat .input .emoji-picker-wrapper .EmojiPickerReact{--epr-search-input-border-color: #d1ebd3;--epr-search-input-bg-color: white}.home .container .chat .input .emoji-picker-wrapper .EmojiPickerReact .epr-search-container input{color:#2f2d52!important;font-size:14px;background-color:#fff!important;border:1px solid #d1ebd3!important}.home .container .chat .input .emoji-picker-wrapper .EmojiPickerReact .epr-search-container input::placeholder{color:#d3d3d3!important}.home .container .chat .input .emoji-picker-wrapper .EmojiPickerReact .epr-emoji-category-label{color:#2f2d52}.home .container .chat .send{display:flex;align-items:center;gap:10px;flex-shrink:0}@media screen and (max-width: 480px){.home .container .chat .send{gap:5px}}.home .container .chat .send label{display:flex;align-items:center;cursor:pointer}.home .container .chat .send img{height:30px;width:30px;cursor:pointer;object-fit:contain}@media screen and (max-width: 480px){.home .container .chat .send img{height:24px;width:24px}}.home .container .chat .send button{border:none;padding:10px 15px;color:#fff;background-color:#e9c695fe;cursor:pointer;white-space:nowrap}@media screen and (max-width: 480px){.home .container .chat .send button{padding:8px 12px;font-size:14px}}