body{background-color:#f5f5f5;font-family:sans-serif;-webkit-user-select:none;-ms-user-select:none;user-select:none}.signup-container{width:40vw;height:600px;background-color:#fff;border-radius:10px;box-shadow:0 3px 10px #000;margin:5vh auto}.logged-container{display:flex;justify-content:center;align-items:center;width:100%;height:90%}.logged-container{display:grid;place-items:center;text-align:center}.input{box-shadow:-5px -5px gray;border-radius:10px;border:1px solid black;height:20px;font-weight:700}.button-1{box-shadow:-5px -5px gray;border-radius:10px;border:1px solid black;height:26px;font-weight:700;color:#00f}.signup-header{display:flex;justify-content:center;align-items:center;height:100px;background-color:#000;color:#fff;border-radius:9px 9px 0 0}.signup-body{display:grid;place-items:center;height:400px}.form-div{display:grid;place-items:center}.label{margin:15px 0}.div-inside{display:flex;align-items:center;position:relative}.login-register{margin-top:15px;width:7vw;height:3vh;font-size:1rem;border-radius:10px;border:none;font-weight:700;box-shadow:0 3px 10px gray;cursor:pointer}.signup-footer{display:flex;justify-content:center;align-items:center;height:95px;border:1px solid black;background-color:#000;color:#fff;border-radius:0 0 9px 9px;margin-top:5px;cursor:pointer}#input1{resize:none;height:30px;width:200px;font-weight:700;border:none;outline:none;box-shadow:0 3px 10px gray;transition:all .5s ease;border-radius:10px}#input1:focus{box-shadow:0 3px 10px #000;width:250px}#input2{resize:none;height:30px;width:200px;font-weight:700;border:none;outline:none;box-shadow:0 3px 10px gray;transition:all .5s ease;border-radius:10px}#input2:focus{box-shadow:0 3px 10px #000;width:250px}.material-symbols-outlined:hover{cursor:pointer}.alert{color:red}::-webkit-scrollbar{width:0}::-webkit-input-placeholder{text-align:center}@media only screen and (max-width: 1024px){body{display:grid;place-items:center;box-sizing:border-box}.signup-container{width:60vw}.login-register{width:20vw}}@media only screen and (max-width: 450px){.signup-container,.signup-header,.signup-body,.signup-footer{width:90vw}.login-register{width:30vw;height:5vh}}@media only screen and (max-width: 280px){.signup-container,.signup-header,.signup-body,.signup-footer{width:90vw}.login-register{width:35vw;height:4vh}}.navbar{display:flex;justify-content:center;align-items:center;background-color:#000;width:95vw;height:12vh;border-radius:20px;text-align:center;margin:auto;box-shadow:0 3px 10px gray;color:#fff}.navbar-header{font-size:4rem;font-family:Yellowtail}@media only screen and (max-width: 450px){.navbar-header{font-size:2.5rem}}@media only screen and (max-width: 280px){.navbar-header{font-size:1.5rem}}.chat-container{display:grid;place-items:center;margin:1vh 0}.chatHead{display:flex;justify-content:center;align-items:center;height:80px;width:250px;margin:0 0 30px;border-radius:10px;background-color:#000;box-shadow:0 3px 10px gray}.chat-header{color:#fff}.user-head{width:40vw;text-align:center;border-radius:10px;margin-bottom:5px;background-color:#000;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #0073e6,0 0 20px #0073e6,0 0 25px #0073e6,0 0 30px #0073e6,0 0 35px #0073e6;box-shadow:0 3px 10px gray}.chat-body-inside{margin-bottom:5px;overflow-y:auto;padding-top:20px;width:40vw;height:50vh;box-shadow:0 3px 10px gray;border-radius:10px;background-color:#fff}.time{position:absolute;color:#000;bottom:0;right:4px;font-size:.6rem}.other-user{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:5px 20px}.other-user-chat{position:relative;background-color:#faa0a0;border-radius:10px;padding:10px;height:auto;width:fit-content;box-shadow:0 3px 10px gray}.user{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin:5px 20px}.user-chat{position:relative;background-color:#7d7;border-radius:10px;padding:10px;height:auto;width:fit-content;box-shadow:0 3px 10px gray}.chat-footer{width:40.1vw;display:flex;justify-content:center}.input-text{height:50px;padding-left:15px;display:flex;flex-wrap:wrap;overflow-y:auto;width:100%;border-radius:10px 0 0 10px;resize:none;box-shadow:0 3px 10px gray;font-weight:700;border:none;outline:none}.button{border-radius:0 10px 10px 0;width:60px;box-shadow:0 3px 10px gray;background-color:#000;color:#fff;border:none}.browse-button{display:none}.date{font-size:.6rem;display:flex;justify-content:flex-end;font-weight:700}.single-chat-user{display:flex;justify-content:flex-end}.single-chat-other-user{display:flex;justify-content:flex-start}@media only screen and (max-width: 1024px){.chat-body-inside,.user-head,.chat-footer{width:80vw}.browse-button{display:initial}}@media only screen and (max-width: 450px){.chat-users-container:focus-within{margin-bottom:25vh}.chat-body-inside,.chat-footer,.user-head{width:95vw}}.app-container{display:flex;justify-content:space-evenly;align-items:flex-start;height:80vh}.theme-container{margin-top:10px;border-radius:10px;background-color:#fff;box-shadow:0 3px 10px gray;height:80vh;width:11%}.chat-users-container{display:grid;place-items:center;height:80vh;width:45%}.users-header{display:flex;justify-content:center;align-items:center;width:100%;height:100px;border-radius:10px;background-color:#000;box-shadow:0 3px 10px gray;margin-bottom:10px}.search-container{display:grid;place-items:center}.search-input{margin-bottom:10px;width:50%;height:3vh;border:none;background-color:#fff;border-radius:10px;box-shadow:0 3px 10px gray;outline:none;transition:all .5s ease}.search-input:focus{width:80%;box-shadow:0 3px 10px #000}.users-container{width:33%;height:75vh;margin-top:10px}.all-users-container{width:100%;overflow-y:scroll;height:65vh}.all-users{display:flex;justify-content:center;align-items:center;padding:5px 0;width:100%;height:fit-content;flex-wrap:wrap}.username{display:flex;justify-content:space-evenly;align-items:center;width:100%;height:100%;border-radius:9px 9px 0 0;font-size:1.5rem}.createdAt{display:grid;place-items:center;width:100%;height:100%;border-radius:0 0 9px 9px;background-color:#000;color:#fff}.create{margin-bottom:-25px}.user-profile{display:grid;place-items:center;width:32%;height:22vh;background-color:#fff;box-shadow:0 3px 10px gray;border-radius:10px;margin:1px;transition:all .5s ease;cursor:pointer}.theme-header{margin-bottom:-3vh}.themes{display:grid;place-items:center;height:85%}.light{display:flex;justify-content:center;align-items:center;text-align:center;padding:1vw;color:#fff;background-color:#000;width:4vw;border:1px solid black;height:3vh;border-radius:10px;font-size:1rem;cursor:pointer}.logout{height:15%;background-color:#000;display:flex;justify-content:center;align-items:center;border-radius:0 0 10px 10px}.button1{background:transparent;color:#fff;font-size:1.5rem;border:none;cursor:pointer}.footer-container{display:flex;justify-content:center;margin:1vh 1vw}.footer{font-size:1rem}@media only screen and (max-width: 1024px){.users-container{width:95vw}.theme-container{display:flex;justify-content:space-evenly;align-items:center;width:90vw;height:10vh;margin:1vw -20vw}.user-profile{width:22.2vw;height:22vh}.light{font-size:10px;padding:1.5vh}.app-container{display:grid;place-items:center}.themes{display:flex;justify-content:space-evenly;align-items:center;width:85%}.logout{width:15%;height:100%;border-radius:0 1vw 1vw 0}.theme-header{margin-bottom:1.5vh}.chat-users-container{width:100%}.chat-container{margin:auto}}@media only screen and (max-width: 450px){.user-profile{width:30vw;height:22vh}.logout{width:15%;height:100%;border-radius:0 2vw 2vw 0}.button1{font-size:.8rem}.theme-header{margin-bottom:1.5vh;font-size:1rem}.light{font-size:.5rem}}@media only screen and (max-width: 280px){.user-profile{width:45vw;height:22vh}.light{font-size:.4rem;padding:1.5vh}.button1{font-size:.7rem}}