*{margin:0;padding:0;font-family:Quicksand,sans-serif;font-weight:700}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.body-container{background-color:#0000;background-image:linear-gradient(#000000b3,#000000b3),url(/login-banner.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;justify-content:center;align-items:center;height:100vh;display:flex}.container{color:#fff;border-radius:10px;flex-direction:column;row-gap:20px;padding:30px;display:flex;box-shadow:1px 2px 10px #fff}.container .content{flex-direction:column;align-items:center;row-gap:5px;display:flex}.container .content h1{text-align:center;font-family:Caprasimo;font-size:25px;font-weight:400}.container .content p{font-size:10px}.container .content img{width:100px}.container .form{flex-direction:column;row-gap:20px;display:flex}.container .form div{flex-direction:column;row-gap:10px;display:flex;position:relative}.container .form div .formik-message{color:#fb9898;font-size:12px}.container .form div label{font-size:14px}.container .form div .icon{position:absolute;top:36px;left:8px}.container .form div input{color:#fff;letter-spacing:2px;background-color:#0000;border:2px solid #fff;border-radius:5px;outline:none;padding:5px 5px 5px 35px;font-size:15px}.container .form button{color:#fff;letter-spacing:2px;background:linear-gradient(90deg,red,#f1118c);border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:5px;padding:8px 0;font-family:Rowdies;display:flex}.container .form button:hover{background:linear-gradient(to top right,#f1118c,red)}.container a{text-align:center;color:#fff;text-decoration:none}footer{color:gray;justify-content:space-between;padding:10px;font-size:13px;display:flex;position:fixed;bottom:0;left:0;right:0}@media (width<=500px){.container{width:70%;padding:20px}.container .content h1{font-size:18px}.container .content img{width:30%}.container .form{row-gap:10px}.container .form div label{font-size:12px}.container .form div input{font-size:13px}.container .form div .icon{top:31px}.container .form button,.container a{font-size:12px}footer{font-size:10px}}.loading,.error,.success{background:0 0;border-radius:5px;align-items:center;column-gap:10px;padding:8px;display:flex}.loading{color:#78e5f6;border:2px solid #78e5f6}.error{color:#fb9898;border:2px solid #fb9898;align-self:stretch}.success{color:#7af971;border:2px solid #7af971}@media (width<=500px){.loading,.error,.success{padding:5px;font-size:12px}}.main-container{height:100vh;display:flex;position:relative;overflow:hidden}.main-container .left-section{color:#fff;background-color:#000;flex-direction:column;justify-content:space-between;align-items:center;width:80px;height:100%;display:flex}.main-container .left-section .top-part{flex-direction:column;align-items:center;row-gap:40px;padding-top:10px;display:flex}.main-container .left-section .top-part div{flex-direction:column;row-gap:20px;display:flex}.main-container .left-section .top-part div .icon{padding:20px;font-size:20px;transition:all .3s}.main-container .left-section .top-part div .icon:hover{background-color:#323232;border-radius:5px}.main-container .left-section .top-part img{border-radius:50%;width:80%}.main-container .left-section .icon{margin-bottom:20px;padding:20px;font-size:20px;transition:all .3s}.main-container .left-section .icon:hover{background-color:#323232;border-radius:5px}.main-container .middle-section{color:#fff;background-color:#1a1a1a;flex-direction:column;width:550px;height:100%;display:flex;overflow:hidden}.main-container .middle-section .top-part{background-color:#151515;align-items:center;column-gap:10px;height:70px;padding:0 20px;display:flex;position:relative}.main-container .middle-section .top-part h2{letter-spacing:2px;flex:1;justify-content:center;align-items:center;column-gap:10px;font-family:Rowdies,sans-serif;display:flex}.main-container .middle-section .top-part img{height:85%;display:none}.main-container .middle-section .top-part .fa-magnifying-glass{position:absolute;top:27px;right:45px}.main-container .middle-section .top-part input{color:#fff;background-color:#0000;border:2px solid #fff;border-radius:20px;outline:none;flex:1;padding:8px 8px 8px 20px;font-size:15px}.main-container .middle-section .middle-part{flex-direction:column;row-gap:20px;padding:15px;display:flex;overflow-y:scroll}.main-container .middle-section .middle-part .each-chat{cursor:pointer;background-color:#292929;border-radius:10px;flex-direction:row;align-items:center;column-gap:15px;padding:10px;font-size:12px;display:flex}.main-container .middle-section .middle-part .each-chat:hover{background:linear-gradient(90deg,#f50967,#f83274,#b71af5)}.main-container .middle-section .middle-part .each-chat img{border-radius:50%;width:60px;height:60px}.main-container .middle-section .middle-part .each-chat .chat-details{white-space:nowrap;text-overflow:ellipsis;flex-direction:column;flex:1;row-gap:10px;display:flex;overflow:hidden}.main-container .middle-section .middle-part .each-chat .chat-details div{justify-content:space-between;align-items:center;display:flex}.main-container .middle-section .middle-part .each-chat .chat-details div h2{align-items:center;column-gap:20px;font-family:Rowdies,sans-serif;display:flex}.main-container .middle-section .middle-part .each-chat .chat-details div h2 span{background-color:#de084c;border-radius:50%;padding:2px 9px 3px 8px;font-size:14px}.main-container .middle-section .other-messages{text-align:center;margin-top:10px}.main-container .right-section{color:#fff;flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.main-container .right-section .top-part{background-color:#1f1f1f;flex-direction:row;align-items:center;column-gap:10px;height:70px;padding-left:20px;padding-right:20px;display:flex}.main-container .right-section .top-part img{border-radius:50%;width:55px;height:75%}.main-container .right-section .top-part .user-details{flex-direction:column;row-gap:5px;display:flex}.main-container .right-section .top-part .user-details .user-name{flex-direction:row;align-items:center;column-gap:10px;font-family:Rowdies,sans-serif;display:flex}.main-container .right-section .top-part .user-details .user-name span{font-size:7px}.main-container .right-section .top-part .user-details .user-status{font-size:13px}.main-container .right-section .top-part .delete-section{flex-direction:row;flex:1;justify-content:end;display:flex}.main-container .right-section .top-part .delete-section>button{color:red;background-color:#530a0a85;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px 20px;font-size:15px;display:flex}.main-container .right-section .top-part .delete-section>button span{display:none}.main-container .right-section .top-part .delete-section div{flex-direction:row;column-gap:20px;display:flex}.main-container .right-section .top-part .delete-section div button{border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px 20px;font-size:15px;display:flex}.main-container .right-section .top-part .delete-section div .cancel{color:red;background-color:#530a0a85}.main-container .right-section .top-part .delete-section div .cancel span{display:none}.main-container .right-section .top-part .delete-section div .confirm{color:#0ddd0d;background-color:#12631298}.main-container .right-section .top-part .delete-section div .confirm span{display:none}.main-container .right-section .middle-part{background:linear-gradient(#0006,#0006),url(/chat-background.png);flex-direction:column;flex:1;row-gap:20px;padding:10px;font-size:13px;display:flex;overflow-y:scroll}.main-container .right-section .middle-part .current-date{color:gray;background-color:#1a1a1a;border-radius:5px;align-self:center;padding:8px 15px}.main-container .right-section .middle-part .sender-message{flex-direction:column;align-self:self-end;row-gap:3px;max-width:500px;line-height:1.3;display:flex}.main-container .right-section .middle-part .receiver-message{flex-direction:column;align-self:self-start;row-gap:3px;max-width:500px;line-height:1.3;display:flex}.main-container .right-section .middle-part .sender-message p{background:linear-gradient(to bottom right,#f50967,#f83274,#b71af5);border-top-left-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;padding:10px}.main-container .right-section .middle-part .receiver-message p{background:linear-gradient(to bottom right,#fa8f3e,#bd5302);border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;padding:10px}.main-container .right-section .middle-part .receiver-message div{align-self:self-end;font-size:10px}.main-container .right-section .middle-part .sender-message div{align-self:self-start;font-size:10px}.main-container .right-section .bottom-part{background-color:#151515;flex-direction:row;justify-content:center;align-items:center;column-gap:15px;padding:12px;display:flex}.main-container .right-section .bottom-part textarea{color:#fff;resize:none;white-space:pre-wrap;word-break:break-word;background-color:#0000;border:2px solid gray;border-radius:5px;outline:none;flex:1;height:20px;max-height:50px;padding:8px;font-size:15px;line-height:1.3;overflow-y:auto}.main-container .right-section .bottom-part .icon{font-size:19px}.main-container .right-section .bottom-part .icon:hover{color:#8c8a8a}.main-container .right-section .middle-part .typing-indicator{background-color:#111;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;align-items:center;gap:5px;width:fit-content;padding:10px;display:flex}.main-container .right-section .middle-part .typing-indicator span{background-color:#fff;border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite bounce;display:inline-block}.main-container .right-section .middle-part .typing-indicator span:first-child{animation-delay:0s}.main-container .right-section .middle-part .typing-indicator span:nth-child(2){animation-delay:.2s}.main-container .right-section .middle-part .typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{opacity:.4;transform:scale(.5)}40%{opacity:1;transform:scale(1.4)}}.main-container .landing-section{color:#fff;background-color:#0000;background-image:linear-gradient(#0009,#0009),url(/landing-image.png);background-position:100%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;flex-direction:column;flex:1;justify-content:center;align-items:start;row-gap:20px;height:100%;padding-left:30px;display:flex}.main-container .landing-section h2{font-family:Caprasimo,sans-serif;font-size:50px;font-weight:300}.main-container .landing-section h2 span{color:violet;font-family:Caprasimo,sans-serif;font-weight:300}.main-container .landing-section p{width:500px;font-size:13px}.main-container .landing-section .features{column-gap:20px;font-size:12px;display:flex}.main-container .landing-section .features div{color:violet;border:2px solid violet;border-radius:5px;justify-content:center;align-items:center;column-gap:7px;padding:10px;display:flex}@media (width<=1200px){.main-container .right-section,.main-container .landing-section{display:none}.main-container .middle-section{flex:1}.main-container .left-section{z-index:3;transition:transform .35s;position:fixed;top:0;left:0;transform:translate(-100%)}.main-container .left-section.show-sidebar{transform:translate(0)}.main-container .middle-section .top-part img{display:block}.main-container .middle-section .top-part .fa-magnifying-glass{right:40px}.main-container .hide-middle-mobile{display:none}.main-container .show-right-mobile{display:flex}}@media (width>=700px){.main-container .right-section .top-part .delete-section>button span,.main-container .right-section .top-part .delete-section div .cancel span,.main-container .right-section .top-part .delete-section div .confirm span{display:block}}@media (width>=1201px){.main-container .left-section{display:flex}.main-container .right-section .top-part .fa-arrow-left{display:none}}.loader-card{background-color:#111;flex-direction:column;justify-content:center;align-items:center;row-gap:25px;width:100%;height:100%;display:flex}.loader-card .spinner{border:6px solid #4a0671bc;border-top-color:#3ba5f6;border-radius:50%;width:70px;height:70px;animation:1s linear infinite spin}.loader-card h2{color:#fff;letter-spacing:4px;font-family:Rowdies,sans-serif;font-size:20px;font-weight:600}.loader-card p{color:#ffffffb3;text-align:center;font-size:.95rem}.loader-card .loading-dots{gap:8px;display:flex}.loader-card .loading-dots span{background:#60a5fa;border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite bounce}.loader-card .loading-dots span:nth-child(2){animation-delay:.2s}.loader-card .loading-dots span:nth-child(3){animation-delay:.4s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-container .profile-section{color:#fff;background-color:#1b1b1b;flex-direction:column;flex:1;row-gap:20px;height:100vh;padding:30px 20px 0;display:flex;overflow-y:auto}.main-container .profile-section .banner{justify-content:space-between;align-items:center;display:flex}.main-container .profile-section .banner div{flex-direction:column;row-gap:10px;display:flex}.main-container .profile-section .banner div h2{font-family:Rowdies,sans-serif;font-size:20px;font-weight:300}.main-container .profile-section .banner div p{color:gray;font-size:12px}.main-container .profile-section .banner button{color:#fff;background-color:#0000;border:2px solid #c00ff0;border-radius:20px;justify-content:center;align-items:center;column-gap:7px;padding:10px 18px;display:flex}.main-container .profile-section .profile-image-section{border:2px solid #64057b;border-radius:10px;column-gap:30px;height:180px;padding:10px 15px;display:flex}.main-container .profile-section .profile-image-section .image-section{justify-content:center;align-items:center;width:150px;height:100%;display:flex;position:relative}.main-container .profile-section .profile-image-section .image-section img{object-fit:cover;border-radius:50%;width:100%;height:80%}.main-container .profile-section .profile-image-section .image-section label{background-color:#282828;border-radius:50%;padding:8px;position:absolute;bottom:18px;right:6px}.main-container .profile-section .profile-image-section .details{flex-direction:column;flex:1;justify-content:center;align-items:start;row-gap:15px;display:flex}.main-container .profile-section .profile-image-section .details .username{font-family:Rowdies,sans-serif;font-size:20px}.main-container .profile-section .profile-image-section .details .date{color:#a213ce;font-size:13px}.main-container .profile-section .profile-image-section .details .status{color:gray;font-size:14px}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section{justify-content:space-between;width:100%;display:flex}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .change{color:#fff;background-color:#0e87d8;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:10px;padding:10px 15px;display:flex}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .upload{color:#fff;background-color:#11c611;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:10px;padding:10px 15px;display:flex}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .remove{color:#fff;background-color:red;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:10px;padding:10px 15px;display:flex}.main-container .profile-section form{border:2px solid #64057b;border-radius:10px;flex-direction:column;row-gap:15px;padding:20px;display:flex}.main-container .profile-section form h2{font-family:Rowdies,sans-serif;font-size:20px;font-weight:300}.main-container .profile-section form div{border-bottom:1px solid gray;justify-content:space-between;padding-bottom:10px;display:flex}.main-container .profile-section form span{color:#f56464;align-self:flex-end;font-size:12px}.main-container .profile-section form div input{color:#fff;background-color:#0000;border:none;outline:none;font-size:15px}.main-container .profile-section form button{color:#fff;letter-spacing:2px;background:linear-gradient(90deg,#ad056f,#e30429);border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px;font-family:Rowdies,sans-serif;display:flex}.main-container .profile-section .delete-section{border:2px solid red;border-radius:10px;justify-content:space-between;align-items:center;column-gap:20px;padding:20px;display:flex}.main-container .profile-section .delete-section .description{flex-direction:column;row-gap:10px;display:flex}.main-container .profile-section .delete-section .description h2{color:red;font-family:Rowdies,sans-serif;font-size:20px;font-weight:300}.main-container .profile-section .delete-section .description p{color:gray;font-size:11px}.main-container .profile-section .delete-section .button-section{flex-direction:row;column-gap:20px;display:flex}.main-container .profile-section .delete-section .button-section .delete{color:red;background-color:#6d1313ac;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px 20px;display:flex}.main-container .profile-section .delete-section .button-section .delete span{display:none}.main-container .profile-section .delete-section .button-section .confirm{color:#0ddf0d;background-color:#146814ab;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px 20px;display:flex}.main-container .profile-section .delete-section .button-section .confirm span{display:none}.main-container .profile-section .delete-section .button-section .cancel{color:red;background-color:#771515a0;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:8px;padding:10px 20px;display:flex}.main-container .profile-section .delete-section .button-section .cancel span{display:none}@media (width>=800px){.main-container .profile-section .delete-section .button-section .delete span,.main-container .profile-section .delete-section .button-section .confirm span,.main-container .profile-section .delete-section .button-section .cancel span{display:block}.main-container .profile-section .delete-section .description p{font-size:13px}}@media (width>=1201px){.profile-section .fa-arrow-left{display:none}}@media (width<=500px){.main-container .profile-section .banner div h2{font-size:15px}.main-container .profile-section .banner div p{font-size:10px}.main-container .profile-section .banner button{padding:8px 15px;font-size:10px}.main-container .profile-section .profile-image-section{height:150px}.main-container .profile-section .profile-image-section .image-section{width:117px}.main-container .profile-section .profile-image-section .image-section img{height:75%}.main-container .profile-section .profile-image-section .image-section label{bottom:10px;right:0}.main-container .profile-section .profile-image-section .details{row-gap:10px}.main-container .profile-section .profile-image-section .details .username{font-size:13px}.main-container .profile-section .profile-image-section .details .date,.main-container .profile-section .profile-image-section .details .status{font-size:12px}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section{padding-top:10px}.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .change span,.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .upload span,.main-container .profile-section .profile-image-section .details .profile-pic-buttons-section .remove span{display:none}.main-container .profile-section form h2{font-size:15px}.main-container .profile-section form div label,.main-container .profile-section form div input{font-size:12px}.main-container .profile-section form button{padding:7px;font-size:12px}.main-container .profile-section form span{font-size:10px}.main-container .profile-section .delete-section .description h2{font-size:13px}.main-container .profile-section .delete-section .description p{font-size:8px}}.password-container{background-color:#0000;background-image:linear-gradient(#000000b3,#000000b3),url(/login-banner.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;justify-content:center;align-items:center;height:100vh;display:flex}.password-container form{border-radius:8px;flex-direction:column;align-items:center;row-gap:20px;width:400px;padding:20px;display:flex;box-shadow:1px 2px 10px #fff}.password-container form img{width:30%;height:30%}.password-container form p{color:gray;text-align:center;font-size:13px}.password-container form input{color:#fff;letter-spacing:2px;background-color:#0000;border:2px solid #fff;border-radius:5px;outline:none;align-self:stretch;padding:5px 5px 5px 10px;font-size:15px}.password-container form span{color:#fb9898;align-self:self-start;padding:4px;font-size:13px}.password-container form button{color:#fff;letter-spacing:2px;background:linear-gradient(90deg,red,orange);border:none;border-radius:5px;outline:none;justify-content:center;align-self:stretch;align-items:center;column-gap:5px;padding:8px;font-family:Rowdies,sans-serif;display:flex}.password-container form button:hover{background:linear-gradient(270deg,red,orange)}@media (width<=500px){.password-container form{width:80%}}.loading-container{color:#fff;background-color:#000;flex-direction:column;justify-content:center;align-items:center;row-gap:20px;height:100vh;display:flex}.loading-container img{height:50%}.loading-container h1{letter-spacing:10px;font-family:Rowdies,sans-serif;font-weight:400}.loading-container .dots-section{column-gap:20px;margin-top:30px;display:flex}.loading-container .dots-section span{background:linear-gradient(135deg,#00e5ff,#b026ff);border-radius:20px;padding:5px;animation:1.2s ease-in-out infinite bounce}.loading-container .dots-section span:nth-child(2){animation-delay:.1s}.loading-container .dots-section span:nth-child(3){animation-delay:.2s}.loading-container .dots-section span:nth-child(4){animation-delay:.3s}.loading-container .dots-section span:nth-child(5){animation-delay:.4s}.loading-container .dots-section span:nth-child(6){animation-delay:.5s}.loading-container .dots-section span:nth-child(7){animation-delay:.6s}.loading-container .dots-section span:nth-child(8){animation-delay:.7s}.loading-container .dots-section span:nth-child(9){animation-delay:.8s}.loading-container .dots-section span:nth-child(10){animation-delay:.9s}.error-container{justify-content:center;align-items:center;height:100vh;display:flex}.error-container>section{text-align:center;border-radius:10px;flex-direction:column;align-items:center;width:380px;padding:20px;display:flex;box-shadow:2px 2px 30px #7c7c7c}.error-container>section>img{width:50%;height:50%}.error-container>section>h2{font-family:Rowdies,sans-serif;font-size:20px}.error-container>section p{color:gray;margin-top:20px;font-size:13px}.error-container section button{color:#fff;background-color:#07b0e8;border:none;border-radius:5px;justify-content:center;align-items:center;column-gap:5px;margin-top:40px;padding:10px 20px;font-family:Rowdies,cursive;display:flex}@media (width<=500px){.error-container>section{width:75%}.error-container>section>h2{font-size:15px}}