body{margin:0;padding:0}.formContainer{background-color:#a7bcff;height:100vh;display:flex;align-items:center;justify-content:center}.formContainer .formWrapper{background-color:#fff;padding:20px 60px;border-radius:10px;display:flex;flex-direction:column;gap:10px;align-items:center}.formContainer .formWrapper .logo{color:#5d5b8d;font-weight:700;font-size:24px}.formContainer .formWrapper .title{color:#5d5b8d;font-size:12px}.formContainer .formWrapper form{display:flex;flex-direction:column;gap:15px}.formContainer .formWrapper form input{padding:15px;border:none;width:250px;border-bottom:1px solid #a7bcff}.formContainer .formWrapper form input::placeholder{color:#afafaf}.formContainer .formWrapper form label{display:flex;align-items:center;gap:10px;color:#8da4f1;font-size:12px;cursor:pointer}.formContainer .formWrapper form label img{width:32px}.formContainer .formWrapper form .show{display:flex;align-items:center}.formContainer .formWrapper form .show img{height:2rem;width:2rem}.formContainer .formWrapper form button{background-color:#7b96ec;color:#fff;padding:10px;font-weight:700;border:none;cursor:pointer}.formContainer .formWrapper p{color:#5d5b8d;font-size:12px;margin-top:10px}.formContainer .formWrapper .err{color:red}.home{background-color:#a7bcff;height:100vh;display:flex;align-items:center;justify-content:center}.home .container{border:0px solid white;border-radius:0;width:100vw;height:100vh;display:flex;overflow:hidden}@media screen and (max-width: 768px){.home .container{width:100vw}}.home .container .sidebar{flex:1;background-color:#3e3c61;position:relative}.home .container .sidebar .navbar{display:flex;align-items:center;background-color:#2f2d52;height:10%;padding:.1rem .5rem;justify-content:space-between;color:#ddddf7}.home .container .sidebar .navbar .logo{font-weight:700}@media screen and (max-width: 768px){.home .container .sidebar .navbar .logo{display:none}}.home .container .sidebar .navbar .user{display:flex;gap:.5rem;cursor:pointer;padding:.1rem}.home .container .sidebar .navbar .user img{background-color:#ddddf7;height:1.5rem;width:1.5rem;border-radius:50%;object-fit:cover}.home .container .sidebar .navbar .user button{background-color:#5d5b8d;color:#ddddf7;font-size:80%;border:none;cursor:pointer}@media screen and (max-width: 768px){.home .container .sidebar .navbar .user button{position:absolute;bottom:.7rem}}.home .container .sidebar .search{border-bottom:1px solid gray}.home .container .sidebar .search .searchForm{padding:.7rem}.home .container .sidebar .search .searchForm input{background-color:transparent;border:none;color:#fff;outline:none}.home .container .sidebar .search .searchForm input::placeholder{color:#d3d3d3}.home .container .sidebar .search .err{color:#fff}.home .container .sidebar .userChat{padding:.5rem;display:flex;align-items:center;gap:1rem;color:#fff;cursor:pointer}.home .container .sidebar .userChat:hover{background-color:#2f2d52}.home .container .sidebar .userChat img{width:3rem;height:3rem;border-radius:50%;object-fit:cover}.home .container .sidebar .userChat .userChatInfo{display:flex;align-items:center;justify-content:space-around;max-width:20rem}.home .container .sidebar .userChat .userChatInfo .div1,.home .container .sidebar .userChat .userChatInfo .div2{display:flex;flex-direction:column;justify-content:center}.home .container .sidebar .userChat .userChatInfo .div1{align-items:flex-start;min-width:15vw}.home .container .sidebar .userChat .userChatInfo .div1 span{font-size:1rem;font-weight:500}.home .container .sidebar .userChat .userChatInfo .div1 p{margin-top:.5rem;font-size:.8em;color:#d3d3d3;text-overflow:ellipsis;overflow:hidden;text-wrap:nowrap;width:20vw}.home .container .sidebar .userChat .userChatInfo .div2{align-items:flex-end;min-width:11vw}.home .container .sidebar .userChat .userChatInfo .div2 span{font-size:.7em;display:inline-block}.home .container .sidebar .userChat .userChatInfo .div2 p{font-size:.8rem;height:auto;border-radius:50px;padding:.1rem .3rem;background-color:#fff;color:#2f2d52}.home .container .welcome{flex:2;background-color:#5d5b8d}.home .container .welcome .welcomecontainer{margin:1rem;height:95vh;background-color:#fff;display:flex;align-items:center;flex-direction:column;justify-content:center;color:#3e3c61}@media screen and (max-width: 768px){.home .container .welcome .welcomecontainer{width:90%}}.home .container .chat{flex:2}.home .container .chat .chatInfo{height:10%;padding:.1rem .5rem;background-color:#5d5b8d;display:flex;align-items:center;justify-content:space-between;color:#d3d3d3}.home .container .chat .chatInfo h3{cursor:pointer;padding:1rem}.home .container .chat .chatIcons{display:flex;gap:1rem;margin-right:.5rem}.home .container .chat .chatIcons img{height:1.5rem;cursor:pointer}.home .container .chat .messages{background-color:#ddddf7;padding:.1rem .5rem;height:calc(80% - .5rem);overflow-y:scroll}.home .container .chat .messages::-webkit-scrollbar{width:.3rem}.home .container .chat .messages::-webkit-scrollbar-track{background-color:#ddddf7}.home .container .chat .messages::-webkit-scrollbar-thumb{background-color:#3e3c61;border-radius:25px}.home .container .chat .messages .sayhello{min-height:auto;padding:2rem 1rem;justify-self:center;align-self:center}.home .container .chat .messages .sayhello img{height:18rem}@media screen and (max-width: 768px){.home .container .chat .messages .sayhello img{height:10rem}}.home .container .chat .messages .message{display:flex;gap:1rem;margin-bottom:1rem}.home .container .chat .messages .message .messageInfo{display:flex;flex-direction:column;color:gray;font-weight:300}.home .container .chat .messages .message .messageInfo img{width:2rem;height:2rem;border-radius:50%;object-fit:cover}.home .container .chat .messages .message .messageInfo .timestamp{font-size:.8rem}.home .container .chat .messages .message .messageContent{max-width:50%;display:flex;flex-direction:column;gap:10px}.home .container .chat .messages .message .messageContent div{background-color:#fff;padding:10px 20px;border-radius:0 10px 10px;max-width:28vw;word-wrap:break-word;position:relative}.home .container .chat .messages .message .messageContent div .arrow{position:absolute;height:.8rem;width:.8rem;right:0;top:0;padding:.1rem;cursor:pointer;visibility:hidden}.home .container .chat .messages .message .messageContent div p{margin:0}.home .container .chat .messages .message .messageContent div img{width:10rem}.home .container .chat .messages .message .messageContent div:hover .arrow{visibility:visible}.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 div{background-color:#8da4f1;color:#fff;border-radius:10px 0 10px 10px}.home .container .chat .input{height:10%;padding:.1rem .5rem;background-color:#fff;display:flex;align-items:center;justify-content:space-between}.home .container .chat .input input{width:100%;border:none;outline:none;color:#2f2d52;font-size:18px}.home .container .chat .input input::placeholder{color:#d3d3d3}.home .container .chat .input .send{display:flex;align-items:center;gap:10px}.home .container .chat .input .send img{height:24px;cursor:pointer}.home .container .chat .input .send .button{height:30px;cursor:pointer;padding:10px 5px}.home .container .profile{flex:1;display:flex;align-items:center;flex-direction:column;background-color:#5d5b8d;border-right:.1rem solid #ddddf7;gap:2rem;overflow-y:scroll;overflow-x:hidden;position:relative}.home .container .profile::-webkit-scrollbar{width:.3rem}.home .container .profile::-webkit-scrollbar-track{background-color:#fff}.home .container .profile::-webkit-scrollbar-thumb{background-color:#3e3c61;border-radius:25px}.home .container .profile .header{position:sticky;top:0;display:flex;justify-content:flex-start;align-items:center;height:10%;width:calc(100% - 1rem);padding:.1rem .5rem;gap:1rem;background-color:#3e3c61;color:#ddddf7}.home .container .profile .header .back{cursor:pointer;height:1.5rem}.home .container .profile .pic{background-color:#ddddf7;height:10rem;margin:1rem;border:.1rem solid #ddddf7;border-radius:50%}.home .container .profile .display,.home .container .profile .about{color:#3e3c61;padding:1rem;background-color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;width:calc(100% - 2rem);box-shadow:.1rem}.home .container .profile .display h3,.home .container .profile .about h3{margin:.5rem}.home .container .profile .display div,.home .container .profile .about div{display:flex;width:calc(100% - 2rem);margin:1rem 0;justify-content:space-between}.home .container .profile .display div input,.home .container .profile .about div input{font-size:1.2rem;border:none}.home .container .profile .display div img,.home .container .profile .about div img{height:1.5rem;cursor:pointer}.home .container .profile .note{color:#ddddf7;font-size:1rem;margin:-1rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:999}.modal-content{position:relative;background-color:#717475;padding:2rem;border-radius:10px;box-shadow:0 0 10px #0000004d;text-align:center;display:flex;flex-direction:column;align-items:flex-start}.modal-content img{height:70vh;width:40vw;border-radius:10px}.modal-content button{font-size:larger;position:absolute;top:10px;right:10px;background-color:transparent;border:none;cursor:pointer;z-index:1}.camera-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;width:300px;height:200px;display:flex;justify-content:center;align-items:center;padding:20px}.camera-capture{width:100%;height:100%;position:relative}.camera-capture video{width:100%;height:100%;object-fit:cover}