@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);*{font-family:Josefin Sans,sans-serif}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.formContainer{align-items:center;background:linear-gradient(hsla(28,65%,88%,.604),#fac597);display:flex;height:100vh;justify-content:center;position:relative}@media screen and (max-width:550px){.formContainer{height:92.5vh}}.formContainer .formWrapper{align-items:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.6);border-radius:15px;display:flex;flex-direction:column;gap:10px;max-width:500px;min-width:20%;padding:30px 60px}@media screen and (max-width:550px){.formContainer .formWrapper{max-width:50%}}@media screen and (max-width:850px){.formContainer .formWrapper{min-width:35%}}.formContainer .formWrapper .logo{color:#5c2e5e;font-size:35px;font-weight:700;margin-bottom:20px}.formContainer .formWrapper .title{color:#5c2e5e;font-size:24px;margin-bottom:10px}.formContainer .formWrapper form{display:flex;flex-direction:column;gap:30px;position:relative;width:100%}.formContainer .formWrapper form .input-container{display:flex;margin:auto;position:relative;width:100%}.formContainer .formWrapper form .input-container .input-field{background-color:transparent;border:none;border-bottom:2px solid rgba(92,46,94,.227);color:#5c2e5e;display:block;font-size:16px;outline:none;padding:10px;width:100%}.formContainer .formWrapper form .input-container .input-field::-webkit-input-placeholder{color:rgba(92,46,94,.404)}.formContainer .formWrapper form .input-container .input-field::placeholder{color:rgba(92,46,94,.404)}.formContainer .formWrapper form .input-container .input-label{color:hsla(0,0%,80%,0);font-size:16px;left:0;pointer-events:none;position:absolute;top:0;transition:all .3s ease}.formContainer .formWrapper form .input-container .input-highlight{background-color:#5c2e5e;bottom:0;height:2px;left:0;position:absolute;transition:all .3s ease;width:0}.formContainer .formWrapper form .input-container .input-field:focus::-webkit-input-placeholder{color:transparent}.formContainer .formWrapper form .input-container .input-field:focus::placeholder{color:transparent}.formContainer .formWrapper form .input-container .input-field:focus+.input-label{color:rgba(92,46,94,.698);font-size:14px;left:5px;top:-12px}.formContainer .formWrapper form .input-container .input-field:focus+.input-label+.input-highlight{width:100%}.formContainer .formWrapper form button{background-color:#5c2e5e;border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:16px;margin:auto auto 10px;padding:10px;width:100%}.formContainer .formWrapper form label{align-items:center;color:rgba(92,46,94,.698);cursor:pointer;display:flex;font-size:13px;gap:10px}.formContainer .formWrapper form label svg{height:100%;width:32px}.formContainer .formWrapper form .error-username-password{color:red;margin:auto}.formContainer .formWrapper p{color:rgba(92,46,94,.698);font-size:14px;margin-top:20px}.formContainer .formWrapper p a{color:#5c2e5e}.home{align-items:center;background:linear-gradient(hsla(28,65%,88%,.604),#fac597);display:flex;height:100vh;justify-content:center;position:relative}@media screen and (max-width:550px){.home{height:92.5vh}}.home .container{border-radius:15px;display:flex;height:80%;overflow:hidden;width:65%}@media screen and (max-width:850px){.home .container{height:90%;width:80%}}@media screen and (max-width:550px){.home .container{height:90%;width:90%}}.home .container .sidebar{background-color:#814a7b;display:flex;flex:1 1;flex-direction:column;position:relative}.home .container .sidebar .navbar{align-items:center;background-color:#49274a;color:#ddddf7;display:flex;height:40px;justify-content:space-between;min-height:40px;padding:10px}.home .container .sidebar .navbar .logo{color:#f0f8ff;font-size:20px;font-weight:700}.home .container .sidebar .navbar .user{align-items:center;display:flex;font-size:17px;gap:10px}.home .container .sidebar .navbar .user img{background-color:#ddddf7;border-radius:50%;height:30px;object-fit:cover;width:30px}@media screen and (max-width:850px){.home .container .sidebar .navbar .user span{display:none}}@media screen and (max-width:550px){.home .container .sidebar .navbar .user span{display:block}}.home .container .sidebar .search{background-color:rgba(92,46,94,.698);border-bottom:2px solid #5b2a5e;min-height:40px;overflow-y:auto}.home .container .sidebar .search .searchForm{background-color:rgba(92,46,94,.698);display:flex;padding:10px;position:-webkit-sticky;position:sticky;top:0}.home .container .sidebar .search .searchForm input{background-color:transparent;border:none;color:#fff;flex:.95 1;font-size:15px;outline:none}.home .container .sidebar .search .searchForm input::-webkit-input-placeholder{color:#d3d3d3}.home .container .sidebar .search .searchForm input::placeholder{color:#d3d3d3}.home .container .sidebar .search .searchForm .search-icon{color:#fff;cursor:pointer;flex:.05 1}.home .container .sidebar .chats{flex-grow:1;margin-bottom:5px;overflow-y:scroll}.home .container .sidebar .userChat{align-items:center;color:#fff;cursor:pointer;display:flex;gap:10px;height:40px;padding:10px}.home .container .sidebar .userChat:hover{background-color:#5b2a5e}.home .container .sidebar .userChat img{border-radius:50%;height:50px;object-fit:cover;width:50px}.home .container .sidebar .userChat .userChatInfo span{font-size:18px;font-weight:500}.home .container .sidebar .userChat .userChatInfo p{color:#d3d3d3;font-size:14px;margin:0;padding:0}.home .container .sidebar .logout-button{bottom:0;display:flex;width:100%}.home .container .sidebar .logout-button button{background-color:#49274a;border:none;border-radius:25px;color:#ddddf7;cursor:pointer;font-size:17px;margin:auto auto 10px;padding:10px;width:90%}.home .container .sidebar .logout-button button:hover{background-color:#5b2a5e}.home .container .chat{flex:2 1;position:relative}.home .container .chat .chatHome{align-items:center;background:linear-gradient(#673b69,#49274a);display:flex;flex-direction:column;height:100%;justify-content:center;text-align:center;width:100%}.home .container .chat .chatHome .chatHomeWelcome{line-height:1.5}.home .container .chat .chatHome img{border-radius:100%;height:200px;margin:10px;object-fit:cover;pointer-events:none;width:200px}.home .container .chat .chatHome h1,.home .container .chat .chatHome h2{color:#f0ddf7;margin:5px}.home .container .chat .chatInfo{align-items:center;background-color:#814a7b;color:#fff;display:flex;height:40px;justify-content:space-between;padding:10px}.home .container .chat .chatInfo .chatInfoDiv{align-items:center;display:flex;gap:5px;justify-content:center}.home .container .chat .chatInfo .chatInfoDiv img{border-radius:100%;height:30px;object-fit:cover;pointer-events:none;width:30px}.home .container .chat .chatIcons{display:flex;gap:20px}.home .container .chat .chatIcons img{cursor:pointer;height:24px}.home .container .chat .chatIcons svg{color:#ddddf7;cursor:pointer}.home .container .chat .messages{background-color:rgba(247,189,240,.69);height:calc(100% - 130px);overflow-y:scroll;padding:10px}.home .container .chat .messages .dateDisplay{text-align:center}.home .container .chat .messages .dateDisplay span{background-color:#814a7b;border-radius:20px;color:#fff;padding:5px 10px}@media screen and (max-width:550px){.home .container .chat .messages .dateDisplay span{font-size:14px}}.home .container .chat .messages .message{display:flex;gap:20px;margin-bottom:20px}.home .container .chat .messages .message .messageInfo{color:#49274a;display:flex;flex-direction:column;font-weight:300}.home .container .chat .messages .message .messageInfo img{border-radius:50%;height:40px;object-fit:cover;width:40px}.home .container .chat .messages .message .messageInfo span{margin:3px}@media screen and (max-width:550px){.home .container .chat .messages .message .messageInfo span{font-size:14px}}.home .container .chat .messages .message .messageContent{display:flex;flex-direction:column;gap:10px;max-width:60%}.home .container .chat .messages .message .messageContent p{background-color:#fff;border-radius:0 10px 10px 10px;margin-bottom:0;max-width:-webkit-max-content;max-width:max-content;padding:10px 20px}@media screen and (max-width:550px){.home .container .chat .messages .message .messageContent p{font-size:14px}}.home .container .chat .messages .message .messageContent img{background-color:#fff;border-radius:0 20px 20px 20px;padding:5px;width:50%}@media screen and (max-width:850px){.home .container .chat .messages .message .messageContent img{width:90%}}.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:#814a7b;border-radius:10px 0 10px 10px;color:#fff}.home .container .chat .messages .message.owner .messageContent img{background-color:#814a7b;border-radius:20px 0 20px 20px}.home .container .chat .input-div{background-color:rgba(247,189,240,.69);height:40px;padding-bottom:10px;width:100%}.home .container .chat .input-div .input{align-items:center;background-color:#fff;border-radius:25px;display:flex;gap:10px;height:20px;justify-content:space-between;margin:0 10px;padding:10px}.home .container .chat .input-div .input input{border:none;color:#2f2d52;font-size:16px;outline:none;width:100%}.home .container .chat .input-div .input input::-webkit-input-placeholder{color:rgba(92,46,94,.404)}.home .container .chat .input-div .input input::placeholder{color:rgba(92,46,94,.404)}.home .container .chat .input-div .input .send{align-items:center;display:flex;gap:10px}.home .container .chat .input-div .input .send svg{color:#a9a9a9;cursor:pointer;height:100%;width:18px}.home .container .chat .input-div .input .send button{background-color:#49274a;border:none;border-radius:25px;color:#fff;cursor:pointer;padding:8px 13px}.home .imageViewer{align-items:center;background-color:rgba(80,46,94,.286);display:flex;height:100%;justify-content:center;position:absolute;width:100%}.home .imageViewer img{max-height:80%;max-width:95%}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:linear-gradient(transparent,#49274a);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(transparent,#5c2e5e)}:root{--c1:#5c2e5e;--background:#5c2e5e1e}@-webkit-keyframes honeycomb{0%,20%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}30%,70%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes honeycomb{0%,20%,80%,to{opacity:0;-webkit-transform:scale(0);transform:scale(0)}30%,70%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.loader{background-color:#5c2e5e1e;background-color:var(--background);display:block;height:100%;left:0;position:absolute;top:0;width:100%}.honeycomb{height:24px;left:50%;position:relative;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:24px}.honeycomb div{-webkit-animation:honeycomb 1s infinite backwards;animation:honeycomb 1s infinite backwards;background:#5c2e5e;background:var(--c1);height:12px;margin-top:6px;position:absolute;width:24px}.honeycomb div:after,.honeycomb div:before{border-left:12px solid transparent;border-right:12px solid transparent;content:"";left:0;position:absolute;right:0}.honeycomb div:after{border-bottom:6px solid #5c2e5e;border-bottom:6px solid var(--c1);top:-6px}.honeycomb div:before{border-top:6px solid #5c2e5e;border-top:6px solid var(--c1);bottom:-6px}.honeycomb div:first-child{-webkit-animation-delay:0s;animation-delay:0s;left:-28px;top:0}.honeycomb div:nth-child(2){-webkit-animation-delay:.05s;animation-delay:.05s;left:-14px;top:22px}.honeycomb div:nth-child(3){-webkit-animation-delay:.1s;animation-delay:.1s;left:14px;top:22px}.honeycomb div:nth-child(4){-webkit-animation-delay:.15s;animation-delay:.15s;left:28px;top:0}.honeycomb div:nth-child(5){-webkit-animation-delay:.2s;animation-delay:.2s;left:14px;top:-22px}.honeycomb div:nth-child(6){-webkit-animation-delay:.25s;animation-delay:.25s;left:-14px;top:-22px}.honeycomb div:nth-child(7){-webkit-animation-delay:.3s;animation-delay:.3s;left:0;top:0}