.landing-page{display:flex;justify-content:space-evenly;width:100vw;height:100vh;overflow-x:hidden}.left-side{width:40%}.right-side{width:60%;background-color:#bbdbf7;height:100%;scroll-behavior:smooth;overflow-y:scroll}.right-side::-webkit-scrollbar{width:0}.conversation-container{display:flex;align-items:center;width:100%;justify-content:space-around;height:5rem;border:1px solid rgb(255,255,255);border-radius:5px;background-color:#14395cbe;background-color:transparent;gap:10px;cursor:pointer}.conversation-container-select{display:flex;align-items:center;width:100%;justify-content:space-around;height:5rem;border:1px solid rgb(255,255,255);border-radius:5px;background-color:transparent;gap:10px;cursor:pointer;background-color:#14395cbe}.conversation-container:active{border:2px solid rgb(0,0,0)}.conversation-left{display:flex;align-items:center;justify-content:flex-start;width:25%;margin-left:10px}.conversation-left img{border:50%;width:80%}.conversation-right{display:grid;align-items:center;justify-content:flex-start;gap:5px;width:75%}.conversation-name{font-size:medium;font-weight:700;font-family:sans-serif;color:#fff}.conversaton-status-off{color:#e94141;font-style:italic}.conversaton-status-on{color:#52fa6e;font-style:italic}.allusers-container{display:grid;grid-template-rows:10% 10% 80%;align-content:center;justify-content:space-around;height:100vh;width:40%;position:fixed;background-color:#0d4c86d7;border-right:1px solid}.users-headding{display:flex;align-items:center;justify-content:space-between}.users-headding p{font-size:larger;font-family:Courier New,Courier,monospace;font-weight:700;filter:drop-shadow(0px 0px 5px white)}.app-logo{display:flex;align-items:center;justify-content:start}.app-logo img{border-radius:50%;width:50px}.app-name{display:flex;align-items:center;justify-content:start}.app-name img{width:18%;margin-left:10px;filter:invert(100%) brightness(200%);cursor:pointer}.app-name img:hover{cursor:pointer;filter:drop-shadow(0px 0px 5px) invert(100%) brightness(200%)}.usersblock-second-section{display:flex;align-items:center;justify-content:space-around}.search-people{display:flex;align-items:center;justify-content:center}.search-people input{height:2rem;border-radius:5px;outline:none;border:1px solid rgb(255,255,255);cursor:pointer}.search-people input:focus{border:2px solid rgb(255,255,255);cursor:pointer}.settigs{display:flex;align-items:center;justify-content:center}.settigs img{border-radius:50%;width:50%;cursor:pointer;filter:contrast(10%) invert(100%) brightness(200%)}.conversation-box{display:grid;gap:5px;align-content:flex-start;overflow-y:scroll;scroll-behavior:smooth;scrollbar-color:#ffff}.conversation-box::-webkit-scrollbar{width:0px}.modal-conversation-box{margin:2px;background-color:#246fb4d7;border-radius:8px}.update-input{margin-top:20px;width:100%;height:20px;border-radius:5px;outline:none;border:1px solid green}.update-image{display:flex;align-items:center;justify-content:center}.update-image img{width:20%}.update-image input{width:80%}.update-btn{width:100%}.logout-btn{margin-top:10px;width:100%}.logout-btn:hover{background-color:#f73939}.modal-container{background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);height:100vh;width:100%;position:fixed;top:0}.modal-content{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;height:100vh}.modal-ss{background-color:#f0f8ff;padding:25px;border-radius:6px;box-shadow:1px 1px 8px 2px;display:grid;overflow-y:scroll}.modal-hedding{display:flex;align-items:center;justify-content:space-around;gap:5px}.modal-close-btn{border:0;background-color:transparent;width:10px;cursor:pointer;font-weight:bolder;color:red;font-size:20px}.modal-ss::-webkit-scrollbar{width:0}@media (max-width: 500px){.right-side,.left-side{width:100%}.landing-page-block{display:none;width:100%}.input-section-container{width:100%!important}.media-picker{display:flex;justify-content:center;align-items:flex-start}.media-picker img{width:40%;cursor:pointer;filter:invert(100%) brightness(200%)}.chatheadding-container{width:100%!important}.chat-window-container,.allusers-container{width:100%}}.chatheadding-container{display:flex;align-items:center;padding-top:20px;padding-bottom:20px;position:fixed;top:0;width:60%;justify-content:space-between;background-color:#3b79b3;border-bottom:1px solid black;color:#fff;right:0}.profile-pic{display:flex;align-items:center;justify-content:space-around}.profile-pic img:nth-child(1){width:30%;border-radius:50%;cursor:pointer;filter:invert(100%) brightness(200%);display:none}.profile-pic img:nth-child(2){width:90%;border-radius:50%}.profile-name p:nth-child(1){font-weight:700;font-family:sans-serif;letter-spacing:1px}.profile-name p:nth-child(2){font-weight:lighter;font-family:sans-serif;font-style:italic;color:#fff}.profile-options{display:flex;align-items:center;justify-content:space-around}.profile-options img{width:80%;border-radius:50%;cursor:pointer;filter:invert(100%) brightness(200%)}@media (max-width: 500px){.profile-pic img:nth-child(1){width:30px;border-radius:50%;cursor:pointer;filter:invert(100%) brightness(200%);display:block!important}.profile-pic img:nth-child(2){width:40px;border-radius:50%}}.chat-space-container{margin-top:10px;overflow-x:hidden;scroll-behavior:smooth}.receive-message{display:flex;justify-content:flex-start;margin:10px;overflow:hidden}.receive-message p{background-color:#fff;padding:18px;word-break:break-word;max-width:80%;border-radius:2px 15px 15px;color:#000}.send-message{display:flex;justify-content:flex-end;margin:10px}.send-message p{background-color:#618ff3;padding:18px;word-break:break-word;max-width:300px;border-radius:15px 15px 2px;color:#fff}.input-section-container{display:flex;align-items:center;justify-content:space-evenly;position:fixed;bottom:10px;width:60%;background-color:#fff;margin-bottom:-10px;padding-bottom:20px;padding-top:10px;border-top:1px solid;background-color:#3b79b3;right:0}.media-picker{width:20%;display:flex;justify-content:center;align-items:center}.media-picker img{width:2rem;cursor:pointer;filter:invert(100%) brightness(200%)}.input-box{width:60%;display:flex;justify-content:center;align-items:center}.input-box textarea{height:50px;width:100%;border-radius:5px}.input-box textarea:focus{outline:none;border:2px solid rgb(64,175,240)}.send-btn{width:10%;display:flex;align-items:center;justify-content:center}.send-btn button{height:50px;width:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out;outline:none;border:0;box-shadow:1px .5px 5px}.send-btn button:hover{cursor:pointer;background-color:#2b84c0;color:#fff;box-shadow:1px .5px 30px #000}.send-btn button img{width:100%}.send-btn button img:hover{width:110%;filter:brightness(300%) invert(100%)}.chat-window-container{display:grid;grid-template-rows:20% 60% 20%;overflow-x:hidden}.chatwindow-middle{margin-top:100px;margin-bottom:80px}.empty-conv{text-align:center;font-size:20px}.empty-space{padding:30px;height:20px}.login-container{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;background-color:#396894f8}.login-outer-box{background-color:#75bae2cb;border-radius:12px;padding:28px 28px 80px;box-shadow:1px 1px 8px 15px #194964}.login-form{display:flex;flex-wrap:wrap}.signup-link{margin-top:15px}.signup-link-color{color:#fff;font-weight:800}.signup-container{display:flex;align-items:center;justify-content:center;height:100vh;flex-wrap:wrap;background-color:#396894f8}.form-outbox{background-color:#75bae2cb;box-shadow:1px 1px 8px 15px #194964;padding:20px;border-radius:5px}.signup-headder{display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-wrap:wrap;gap:5px}.signup-headder img{border-radius:50%;width:30px}.signup-headder p{font-size:larger;font-weight:700;color:green;font-family:Courier New,Courier,monospace}.signup-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%}.signup-form form{display:grid;gap:15px;flex:auto}.inputrow{display:grid;align-items:center;justify-content:center;gap:10px;flex:auto}.inputrow label{font-family:sans-serif}.inputrow input,button{height:30px;border-radius:6px;width:20rem;outline:none;border:1px solid green;transition:background-color .8s ease-in-out}.inputrow input:focus{border:2px solid green;cursor:pointer}.inputrow small{color:red;letter-spacing:2px;opacity:1}.label-indicator{color:green}.inputrow button:hover{background-color:#1ca01c;color:#fff;font-weight:bolder;cursor:pointer;box-shadow:1px 0 8px #0c860c}.login-link{margin-top:10px;margin-left:3px}.login-link-color{color:#fff;font-weight:800}.Otp-container{display:grid}.Otp-input{margin:8px;width:100%;height:30px;border-radius:5px;outline:none;border:1px solid green}.Otp-input:focus{border:2px solid green}.Otp-btn{margin:8px;width:100%;cursor:pointer}@media (max-width: 350px){.inputrow input,button{height:30px;border-radius:6px;width:14rem;outline:none;border:1px solid green;transition:background-color .8s ease-in-out}.signup-container{background-color:#396894f8}.signup-headder{display:grid;align-items:center;justify-content:center;margin-bottom:20px;flex-wrap:wrap;gap:5px;align-content:center}.signuplogo{display:flex;align-items:center;justify-content:center}}@media (max-width: 250px){.inputrow input,button{height:30px;border-radius:6px;width:10rem;outline:none;border:1px solid green;transition:background-color .8s ease-in-out}.signup-container{background-color:#396894f8}}*{margin:0;padding:0;box-sizing:border-box}