.navbar{align-items:center;background:#fff;display:flex;height:80px;justify-content:space-between;margin:0 auto;padding:10px;position:relative;width:100%;z-index:5}.navbar span{font-size:20px}.navbar div.status-div{align-items:center;border-radius:40px;box-shadow:0 0 3px #818181;display:flex;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:14px;gap:5px;justify-content:center;padding:5px 10px;position:absolute;right:20px}.navbar div.status-div span{background-color:grey;border-radius:10px;height:8px;width:8px}.navbar div.status-div span.success-true{background-color:green}.navbar div.status-div span.success-false{background-color:red}.navbar a.logo-div{align-items:center;display:flex;gap:5px;justify-content:center;margin:0 auto}.navbar img.logo{max-height:80px;max-width:80px}@media (max-width:450px){.navbar div.status-div{right:10px}}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;padding:5px;text-decoration:none}.App{height:100dvh;position:relative}.App .alert-div{left:50%;padding:0 20px;position:absolute;top:70px;transform:translateX(-50%);z-index:12}.vds{border:1px solid #000;display:flex;max-height:80dvh;max-width:100%;overflow:auto}footer{bottom:0;box-shadow:0 0 5px grey;font-family:Roboto,Helvetica,Arial,sans-serif;padding:10px;position:fixed;text-align:center;width:100%}main.main{--base:#0e3e7c24;--shade:hsl(from var(--base) calc(h + 8) 25 calc(l - 5));--perfect-shadow:0 0 0 1px var(--base),0 1px 1px -0.5px var(--shade),0 3px 3px -1.5px var(--shade),0 6px 6px -3px var(--shade),0 12px 12px -6px var(--base),0 24px 24px -12px var(--base);border-radius:5px;box-shadow:var(--perfect-shadow);display:flex;flex-direction:column;gap:5px;height:calc(100dvh - 90px);margin:0 auto;max-width:max(80%,600px);padding:5px;position:relative;top:2px}main.main .inner-nav{border:1px solid #ccc;border-radius:2.5px;display:flex;flex-direction:row;height:65px;justify-content:space-between;padding:5px 10px}main.main .inner-nav .username{grid-gap:4px;display:grid;font-size:1.5rem;font-weight:400;gap:4px;grid-auto-flow:column;padding-left:5px;place-items:center}main.main .inner-nav .username .otheruser-status{background:red;border-radius:10px;height:10px;width:10px}main.main .inner-nav .username .otheruser-status.online{background:#00b500}main.main .inner-nav .icons-div{grid-gap:5px;display:grid;gap:5px;grid-auto-flow:column;place-items:center}main.main .inner-nav .icons-div button{margin:0;padding:10px 0}main.main .inner-nav .icons-div .icon{font-size:2rem}main.main .inner-nav .icons-div .icon:hover{border-radius:10px}main.main .inner-nav .icons-div .icon.call-icon{color:green}main.main .inner-nav .icons-div .icon.video-icon{color:#1565c0}main.main .inner-nav .icons-div button[data-ongoing=yes]{border-color:red}main.main .inner-nav .icons-div button[data-ongoing=yes] .icon{animation:beat .8s ease-in-out infinite;color:red}main.main .bottom-box{border-radius:2.5px;bottom:5px;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;left:5px;position:absolute;width:calc(100% - 10px)}main.main .bottom-box .message-input-box{border-radius:5px;display:flex;gap:10px;height:55px;justify-content:space-around;width:100%}main.main .bottom-box .message-input-box input{width:100%}main.main .bottom-box .message-input-box button{width:30px}main.main section.window-msg-section{border:1px solid #ccc;border-radius:2.5px;display:flex;flex-direction:column;height:calc(100% - 130px);overflow-y:auto;position:relative;width:100%}main.main .window-msg-section .video-section{left:50%;margin:0 auto;max-height:100%;max-width:100%;overflow:hidden;position:absolute;top:0;transform:translate(-50%);z-index:-1}main.main .video-section .remote-stream{align-items:start;display:grid;justify-content:start;margin:0 auto;position:relative}main.main .video-section .localVideo{position:absolute}main.main div.video-section .remoteVideo{margin:0 auto}main.main .messages-box{background:linear-gradient(#fff 30%,#fff0),linear-gradient(#fff0,#fff 70%) 0 100%,radial-gradient(farthest-side at 50% 0,#0003,#0000),radial-gradient(farthest-side at 50% 100%,#0003,#0000) 0 100%;background-color:#fff;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 14px,100% 14px;border-radius:5px;bottom:0;max-height:100%;overflow-y:auto;padding:20px 10px 50px;position:absolute;scroll-behavior:smooth;width:100%}main.main .messages-box::-webkit-scrollbar{height:5px;width:5px}main.main .messages-box::-webkit-scrollbar-track{background:#0000}main.main .messages-box::-webkit-scrollbar-thumb{background:#0000;border-radius:10px;transition-duration:5s}main.main .messages-box::-webkit-scrollbar-thumb:hover{background:#555}main.main .messages-box:hover::-webkit-scrollbar-thumb{background:#888}main.main .messages-box .msg{display:grid;max-width:75%;padding:2px 0;position:relative}main.main .messages-box .msg p{border-radius:2px;font-size:1.05rem;line-height:26px;padding:5px 15px;position:relative}main.main .messages-box .msg .name{margin-top:0;position:sticky;top:0}main.main .messages-box .left-msg{grid-template-columns:45px auto;justify-content:flex-start;left:5px}main.main .messages-box .right-msg .name{order:2}main.main .messages-box .right-msg{gap:5px;grid-template-columns:auto 45px;justify-content:flex-end;margin-left:auto}main.main .messages-box .msg .msgs span.timestamp{color:#000;font-size:10px;font-weight:700;letter-spacing:1px;opacity:.6;padding-inline:15px;position:relative;text-align:right;top:-6px}main.main .messages-box .msg .msgs:hover span.copy-icon{display:block}main.main .messages-box .msg .msgs span.copy-icon{cursor:pointer;display:none;padding:5px 5px 5px 10px;position:absolute;right:-35px;top:50%;translate:0 -50%}main.main .messages-box .msg .msgs span.copy-icon[data-done="0"] .copy{display:block}main.main .messages-box .msg .msgs span.copy-icon[data-done="0"] .check,main.main .messages-box .msg .msgs span.copy-icon[data-done="1"] .copy{display:none}main.main .messages-box .msg .msgs span.copy-icon[data-done="1"] .check{color:green;display:block}main.main .messages-box .right-msg .msgs span.timestamp{text-align:left}main.main .messages-box .msg .msgs a{color:blue;text-decoration:underline}main.main .messages-box .msg .msgs{grid-gap:5px;background:#d9cbf0;border-radius:10px;display:grid;gap:5px;position:relative}main.main .messages-box .right-msg .msgs{background:#c4f1bb}main.main div.text-alert-div{text-align:center}main.main div.text-alert-div.me p{color:#6000ff}main.main div.text-alert-div.other p{color:#22910c}main.main div.text-alert-div p{color:#333;display:inline;font-size:15px;font-weight:600}main.main div.text-alert-div p span{color:#666}main.main button.scroll-btm-tbn{background:#1565c0;border:none;border-radius:50%;bottom:95px;color:#fff;cursor:pointer;display:grid;outline:none;padding:8px;place-items:center;position:fixed;right:20px}@media (max-width:599px){main.main .messages-box{padding-inline:0;padding-bottom:60px}main.main .messages-box .msg{grid-template-columns:auto auto;max-width:85%}main.main .messages-box .msg .name{display:none}main.main .messages-box .msg p{font-size:15px}}@media (max-width:299px){main.main .messages-box .msg{max-width:90%}}@keyframes beat{0%,to{transform:scale(1.1)}50%{transform:scale(.9)}}