@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap);*{box-sizing:border-box;font-family:Poppins,sans-serif;margin:0;padding:0}.title{font-size:30px;text-align:center}.nav{color:#333;font-weight:500;height:60px;margin:0 100px}.container{align-items:center;height:calc(100vh - 60px);justify-content:center;width:100%}.container,.form{display:flex;flex-direction:column}.form{border:1px solid #d7d7d7;border-radius:5px;gap:20px;padding:30px;width:500px}.inputs{display:flex;gap:10px;justify-content:space-between}.input{border:1px solid #a4a4a4;border-radius:5px;font-size:20px;font-weight:300;outline:none;padding:10px;width:100%}.input:focus{border:none;outline:7px solid #cdffc5}.btn{align-items:center;align-self:flex-start;background-color:#03ca00;border:1px solid #03ca00;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:15px;justify-content:center;padding:10px 20px;transition:.3s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.btn:hover{background-color:#fff;color:#03ca00}.sendIcon{font-size:25px}.msgs{border:1px solid #ededed;display:flex;flex-direction:column-reverse;height:400px;overflow-x:hidden;overflow-y:scroll;width:100%}.msg_body{border:none;border-radius:5px;display:flex;margin:2px 5px;max-width:70%;padding:10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.msg_body.img{flex-direction:column;gap:10px}.msg_body.voice{align-items:center}.msg_body.voice .username{align-self:center}#other{background-color:#2295dc;color:#fff}#me{align-self:flex-end;background-color:#00c74c;color:#fff}.username{align-self:flex-start;background-color:#fff;border-radius:70px;font-size:10px;font-weight:500;font-weight:900;margin-right:5px;padding:5px 7px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.msg_body#me .username{color:#00963a}.msg_body#other .username{color:#1971a8}@media (max-width:500px){.form{gap:20px;padding:20px;width:95%}.container{height:calc(100vh - 60px)}}.flex{align-items:center;display:flex;gap:10px}.small{color:#9d9d9d;font-size:15px;font-weight:300}.greendot{-webkit-animation:graw 1s ease infinite;animation:graw 1s ease infinite;background-color:#25f700;border-radius:50%;height:12px;width:12px}@-webkit-keyframes graw{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@keyframes graw{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}.img-container{height:200px;overflow:hidden;position:relative;width:200px}.img-container img{height:100%;left:50%;object-fit:cover;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}input[type=file]{display:none}.file-btn{align-self:flex-start;cursor:pointer;display:grid;padding:0;place-items:center}.attachIcon{color:#a0a0a0;font-size:30px}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c7c7c7;border-radius:60px}::-webkit-scrollbar-thumb:hover{background:#8b8b8b}.record-btn{cursor:pointer}.record-icon{color:#a0a0a0;font-size:30px}.isRecording-container{align-items:center;display:flex;justify-content:center;position:relative}.isRecording-container:after{-webkit-animation:grawRecord .8s ease infinite;animation:grawRecord .8s ease infinite;background-color:#ff006a;border:1px solid #760031;border-radius:50%;content:"";left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1}.isRecording-text{font-size:20px;font-weight:300}.isRecording-icon{color:red;cursor:pointer;font-size:30px;position:relative}@-webkit-keyframes grawRecord{0%{height:0;opacity:.5;width:0}to{height:70px;opacity:0;width:70px}}@keyframes grawRecord{0%{height:0;opacity:.5;width:0}to{height:70px;opacity:0;width:70px}}.popups-container{gap:10px;position:fixed;right:40px;top:20px}.popup-card,.popups-container{background-color:#fff;display:flex;flex-direction:column}.popup-card{-webkit-animation:popup-in .5s cubic-bezier(.39,1.47,.62,1.34) forwards;animation:popup-in .5s cubic-bezier(.39,1.47,.62,1.34) forwards;border:1px solid rgba(243,0,93,.197);border-radius:5px;box-shadow:5px 5px 10px rgba(243,0,93,.189);gap:5px;padding:20px 30px;position:relative;right:-500px;width:300px}.popup-title{color:#f3005d;font-size:25px;font-weight:700}.popup-msg{color:#454545;font-size:15px;font-weight:300}@-webkit-keyframes popup-in{0%{right:-500px}to{right:40px}}@keyframes popup-in{0%{right:-500px}to{right:40px}}@-webkit-keyframes popup-out{0%{right:40px}50%{right:60px}to{right:-500px}}@keyframes popup-out{0%{right:40px}50%{right:60px}to{right:-500px}}
/*# sourceMappingURL=main.25758d3b.css.map*/