@import "https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap";@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";.App{text-align:center}.App-logo{pointer-events:none;height:40vmin}@media (prefers-reduced-motion:no-preference){.App-logo{animation:20s linear infinite App-logo-spin}}.App-header{color:#fff;background-color:#282c34;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-size:calc(10px + 2vmin);display:flex}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body{overflow-y:hidden}.container-back-img{z-index:-2;background-image:url(/assets/quick-chat-app-background-B5wyzBdD.jpg);background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.container-back-color{opacity:.7;z-index:-1;background-color:#e74c3c;width:100%;height:100%;position:absolute}.container{justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.card{background-color:#fff;border-radius:10px;width:400px;padding:10px 30px;box-shadow:0 5px 10px #0000004d}.column{flex-wrap:wrap;justify-content:space-between;display:flex}.form .column input{width:calc(50% - 2px)}.card_title{text-align:center;padding:10px}.card_title h1{font-size:26px;font-weight:700}.form input{background-color:#efefef;border:none;border-radius:4px;outline:none;width:100%;margin-bottom:5px;padding:12px 20px}.form button{color:#fff;background-color:#e74c3c;border:none;border-radius:5px;outline:none;width:100%;margin-top:10px;padding:8px 15px;font-size:16px}.card_terms{align-items:center;padding:10px;display:flex}.card_terms input[type=checkbox]{background-color:#e2e2e2}.card_terms span{margin:5px;font-size:13px}.card a{color:#4796ff;margin-left:5px;text-decoration:none}.loader-overlay{z-index:2;background-color:#e74c3cb3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;inset:0}.loader-spinner,.loader-spinner:after{box-sizing:border-box}.loader-spinner{width:80px;height:80px;display:inline-block;position:relative}.loader-spinner:after{content:" ";box-sizing:border-box;border:32px solid #fff;border-color:#fff #0000;border-radius:50%;width:0;height:0;margin:8px;animation:1.2s infinite loader-spinner;display:block}@keyframes loader-spinner{0%{animation-timing-function:cubic-bezier(.55,.055,.675,.19);transform:rotate(0)}50%{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(900deg)}to{transform:rotate(1800deg)}}.home-page{background-color:#fdedec;flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;width:90%;margin:10px auto;padding:10px;display:flex}.app-header{border-bottom:1px solid #bbb;flex-wrap:wrap;justify-content:space-between;width:100%;padding:10px 30px;display:flex}.app-logo{color:#28282b;flex-wrap:nowrap;font-size:25px;font-weight:700;display:flex}i{margin:5px 10px}.app-user-profile{display:flex}.logged-user-name{color:#28282b;margin-left:15px;padding-top:10px;padding-right:20px;font-weight:700}.logged-user-profile-pic{color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#e74c3c;border-radius:50%;width:40px;height:40px;font-size:20px;font-weight:700;line-height:40px}.app-sidebar{width:30%;padding:0 20px}.user-search-area{margin-bottom:20px;position:relative}.user-search-text{color:#28282b;border:1px solid #ddd;border-radius:20px;width:100%;height:40px;padding:10px 20px}.user-search-btn{color:#e74c3c;font-size:25px;position:absolute;right:10px}.filtered-user{color:#28282b;cursor:pointer;background-color:#fff;border-bottom:1px solid #ccc;padding:10px}.selected-user{color:#fff;cursor:pointer;background-color:#e74c3c;border-bottom:1px solid #ccc;padding:10px}.filter-user-display{flex-wrap:wrap;display:flex}.filter-user-details{width:60%}.user-display-name{padding:1px 20px;font-size:16px;font-weight:700}.user-display-email{padding:1px 20px;font-size:12px}.user-default-avatar,.user-profile-image,.user-selected-avatar{text-align:center;vertical-align:middle;border-radius:50%;width:50px;height:50px;font-size:22px;font-weight:700;line-height:50px}.user-default-avatar{color:#fff;background-color:#e74c3c}.user-selected-avatar{color:#e74c3c;background-color:#fff}.user-start-chat{padding:10px 0}.user-start-chat-btn{color:#fff;background-color:#e74c3c;border:none;border-radius:3px;padding:10px 5px}.app-chat-area{background-color:#fff;border-radius:10px;flex-direction:column;width:70%;height:85vh;padding:20px 30px;display:flex}.app-chat-area-header{text-align:right;color:#e74c3c;border-bottom:1px solid #bbb;margin-bottom:20px;padding:10px 30px;font-weight:700}.main-chat-area{flex:1;padding:10px 20px;overflow-y:scroll}.send-message-div{margin-top:20px;position:relative}.send-message-input{color:#28282b;border:1px solid #ddd;border-radius:5px;width:100%;height:40px;padding:10px 20px}.send-message-btn{color:#e74c3c;cursor:pointer;background-color:#0000;border:none;margin-top:5px;font-size:25px;position:absolute;right:10px}.send-emoji-btn{color:#e74c3c;cursor:pointer;background-color:#0000;border:none;margin-top:5px;font-size:25px;position:absolute;right:50px}.send-image-btn{color:#e74c3c;cursor:pointer;background-color:#0000;border:none;margin-top:5px;font-size:25px;position:absolute;right:80px}.main-chat-area::-webkit-scrollbar{width:5px}.main-chat-area::-webkit-scrollbar-track{border-radius:10px;box-shadow:inset 0 0 2px gray}.main-chat-area::-webkit-scrollbar-thumb{background:#e74c3c;border-radius:10px}.main-chat-area::-webkit-scrollbar-thumb:hover{background:#e74c3c}.message-container{display:flex}.send-message,.received-message{border-radius:10px;width:fit-content;margin-top:5px;padding:10px 20px;font-size:14px}.send-message{color:#fff;background-color:#e74c3c;border-top-right-radius:0;margin-left:100px}.received-message{color:#28282b;background-color:#ddd;border-bottom-left-radius:0;margin-right:100px}.message-timestamp{width:fit-content;font-size:13px}.last-message-timestamp{font-size:13px}@media only screen and (width<=1000px){.filter-user-details,.last-message-timestamp,.user-search-area,.unread-message-counter{display:none}.app-sidebar{width:15%}.app-chat-area{width:85%}}.unread-message-counter{text-align:center;float:right;color:#fff;background-color:#e74c3c;border-radius:50%;width:25px;height:25px;padding-top:3px;font-size:13px;font-weight:700}.typing-indicator{color:gray;font-size:13px}.profile-page-container{color:#28282b;border-radius:10px;width:80%;margin:100px auto;padding:20px;display:flex;box-shadow:0 5px 15px #00000059}.profile-pic-container{justify-content:center;width:30%;display:flex}.profile-info-container{width:70%;padding:30px 10px}.user-profile-pic-upload,.user-default-profile-avatar{color:#28282b;text-align:center;vertical-align:middle;border:5px solid #ddd;border-radius:50%;width:240px;height:240px;font-size:120px;font-weight:700;line-height:240px}.user-profile-name{border-bottom:1.5px solid #cdcdcd;margin-bottom:30px;padding:10px 0}.select-profile-pic-container{padding:30px 0}input[type=file]::file-selector-button{cursor:pointer;color:#fff;background-color:#28282b;border:1px solid #00000029;border-radius:4px;height:40px;margin-right:16px;padding:0 16px;transition:background-color .2s;box-shadow:0 1px #0000000d}input[type=file]::file-selector-button:hover{color:#28282b;background-color:#f3f4f6}input[type=file]::file-selector-button:active{color:#28282b;background-color:#e5e7eb}.logout-button{color:#e74c3c;cursor:pointer;background-color:#0000;border:none;font-size:18px}