#root{display:flex}button{min-width:130px;border-radius:8px;border:1px solid #1a1a1a;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}.hide-btn{display:none}.join-btn button{float:right}input{border-radius:8px;border:1px solid #1a1a1a;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;transition:border-color .25s}button:hover{background-color:#ddd}button:active{background-color:#ccc}#root .left-side{margin:10px;padding:10px;display:none}#root .right-side .waiting{margin:10px;padding:10px;display:flex}#root .right-side{display:flex;margin:10px;padding:10px;flex-wrap:wrap}#root button,#root input{margin:10px;padding:10px}#root h3{padding:0 10px}#root .button-on{background-color:#079eff;color:#fff}#root .right-side video{height:300px!important;max-width:400px;margin:10px;border-radius:4px;aspect-ratio:16/9}.buttons{position:fixed;bottom:11%;text-align:center;width:100vw;left:0}.common{background-color:#00f;height:9%;width:100vw}.footer{position:fixed;left:0;bottom:0}.header{position:fixed;left:0;top:0}.content{position:absolute;left:0;top:9%;bottom:0%;width:98%;background:black;overflow:auto;color:#fff;padding:0 1%}.activeuser{height:35%;overflow:auto}.alluser{height:64%;border-top:1px solid;width:100%;overflow:auto}.nojoin{text-align:center;margin-top:8%}.join-btn{display:flex;width:100%;height:100%;justify-content:end}.userslist{float:left;width:10vw;height:10vw;background:green;border-radius:15px;margin-right:1vw;margin-top:1vw}.userTile{width:160px;height:160px;border-radius:12px;background:#16a34a;color:#0b0b0b;padding:12px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 18px #00000040}.userTile-small{width:140px;height:140px;border-radius:10px;float:left;margin:3px 2px}.avatar-circle{width:72px;height:72px;border-radius:999px;background:rgba(255,255,255,.85);display:grid;place-items:center;font-weight:700;font-size:18px;color:#000;box-shadow:inset 0 -6px 12px #0000000f,0 6px 18px #0000001f;margin-bottom:8px}.tile-username{position:absolute;left:10px;bottom:10px;font-size:13px;color:#0b57a4}.tile-uid{position:absolute;right:10px;bottom:10px;font-size:11px;color:#ffffffe6}.mic-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;box-shadow:0 4px 10px #00000040;z-index:5}.mic-badge.mic-off{background:#ef4444;color:#fff}.mic-badge.mic-on{background:#10b981;color:#fff}.userTile.speaking{transform:translateY(-8px) scale(1.03);box-shadow:0 16px 40px #00000059}.userTile-speakingColor{background:#fb923c;color:#000}@media (max-width: 600px){.userTile,.userTile-small{width:120px;height:120px}.avatar-circle{width:56px;height:56px;font-size:16px}.tile-username{font-size:12px}}.center-mic-wrapper{margin-top:20px;display:flex;justify-content:center}.mic-button{width:60px;height:60px;min-width:60px;border-radius:999px;border:none;outline:none;background:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s ease;box-shadow:0 6px 18px #0003,0 0 0 5px #ffffff80 inset}.mic-button.mic-on{background:#1e90ff;box-shadow:0 8px 25px #1e90ff99,0 0 0 5px #fff6 inset}.mic-button.mic-off{background:#ef4444;box-shadow:0 8px 25px #ef444499,0 0 0 5px #fff6 inset}.mic-button:hover{transform:scale(1.1)}.mic-button:active{transform:scale(.92)}