@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap";.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background-color:#1a1a1a}.login-header{width:100%;padding:20px;text-align:center}.login-header h1{color:#fff;font-size:24px}.login-box{background:#252525;padding:30px;border-radius:10px;box-shadow:0 4px 8px #0003;text-align:center;width:320px}.login-box h2{margin-bottom:20px;color:#fff;font-size:18px}.login-fields input{width:90%;color:#ccc;padding:10px;background-color:#3f434a;margin-bottom:15px;border:1px solid #ccc;border-radius:5px}.login-button{background-color:#845695;color:#ede0e0;padding:10px;width:100%;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.login-button:hover{background-color:#444}.error-message{color:red;margin-bottom:15px}#form__container{width:90%;max-width:600px;border-radius:10px;background-color:#262625;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#lobby__form{padding:2em}#form__container__header{border-radius:10px 10px 0 0;padding:10px;text-align:center;background-color:#363739;margin:0;font-size:18px;font-size:300;line-height:0}.form__field__wrapper{width:100%;box-sizing:border-box;margin-bottom:20px}.form__field__wrapper label{font-size:14px;line-height:1.7em;margin-bottom:10px;display:block}.form__field__wrapper input{box-sizing:border-box;color:#fff;width:100%;margin:0;border:none;border-radius:5px;padding:16px 20px;font-size:15px;background-color:#3f434a}.form__field__wrapper button[type=submit]{margin-top:32px;cursor:pointer;background-color:#845695;border:none;color:#fff;font-size:16px;width:100%;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:5px;gap:10px}.form__field__wrapper button[type=submit] svg{fill:#ede0e0;width:20px}#avatar__selection{margin-right:10px;display:flex;gap:1em}.avatar__option{height:50px;width:50px;border-radius:50%;cursor:pointer;transition:.3s;border:2px solid #797a79}.avatar__option__selected{border:3px solid #845695}.preview-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;margin-top:50px}.controls{margin-top:10px;display:flex;gap:10px}.video__container{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:0 4px 8px #0003;transition:transform .3s ease}.video-player{width:100%;height:100%;background-color:#2b2b2b;border-radius:8px}.video-overlay{position:absolute;bottom:0;left:0;width:100%;padding:8px;background:#0009;display:flex;justify-content:space-between;align-items:center}.video-name{color:#fff;font-size:14px;font-weight:600}.status-icons{display:flex;gap:10px;z-index:0}.status-icons span{font-size:20px;color:#fff;display:flex;align-items:center}.placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;background-color:#000000b3;padding:8px 16px;border-radius:4px;font-size:16px;text-align:center;display:none}.video__container:hover{transform:scale(1.02)}.fullscreen-btn-container{position:absolute;top:10px;right:10px;z-index:10;display:block}#stream__box:hover .fullscreen-btn-container{display:block}.fullscreen-btn{cursor:pointer;color:#fff;background-color:#00000080;border-radius:50%;padding:10px;transition:background-color .3s ease}.fullscreen-btn:hover{background-color:#000c}.agora_video_player{object-fit:contain!important;width:100%;height:100%;position:absolute;left:0;top:0}.placeholder{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;background:#000000b3;padding:8px 12px;border-radius:4px;font-size:14px;text-align:center}.container{margin-top:74px;width:100%;position:relative}#room__container{position:relative;gap:3rem}#members__container{background-color:#262625;border-right:1px solid #797a79;overflow-y:auto;width:100%;position:fixed;height:100%;z-index:999}#members__count{background-color:#1d1d1c;padding:7px 15px;font-size:14px;font-weight:600;border-radius:5px}#members__header{display:flex;justify-content:space-around;align-items:center;padding:0 1rem;position:fixed;font-size:18px;background-color:#323143;width:218px}#member__list{display:flex;flex-direction:column;gap:1rem;padding:1rem}.members__list::-webkit-scrollbar{height:14px}.member__wrapper{display:flex;align-items:center;column-gap:10px;padding-left:1em}.green__icon{display:block;height:8px;width:8px;border-radius:50%;background-color:#2aca3e}.member_name{color:#fff;font-size:14px;line-height:0}#messages__container{height:90vh;background-color:#262625;right:0;position:absolute;width:100%;max-width:25rem;overflow-y:auto;border-left:1px solid #111}#messages{width:100%;height:100%;overflow-y:auto}.message__wrapper:last-child{margin-bottom:6.5rem}.message__wrapper{display:flex;gap:10px;margin:1em}.message__body{background-color:#363739;border-radius:10px;padding:10px 15px;width:fit-content;max-width:900px}.message__body strong{font-weight:600;color:#ede0e0}.message__body__bot{padding:0 20px;max-width:900px;color:#bdbdbd}.message__author{margin-right:10px;color:#2aca3e!important}.message__author__bot{margin-right:10px;color:#a52aca!important}.message__text{margin:0;color:#fff}#message__form{width:23.2rem;position:fixed;bottom:0;display:block;background-color:#1a1a1a;padding:1em}#message__form input{color:#fff;width:100%;border:none;border-radius:5px;padding:18px;font-size:14px;box-sizing:border-box;background-color:#3f434a}#message__form input:focus{outline:none}#message__form input::placeholder{color:#707575}#stream__container{justify-self:center;width:100%;position:fixed;top:clac(100vh - 72px);overflow-y:auto;height:100%}#stream__box{background-color:#3f434a;height:60vh;display:none}#stream__box .video__container{border:2px solid #000;border-radius:0;height:100%!important;width:100%!important;background-size:300px}#stream__box video{border-radius:0}#streams__container{display:flex;flex-wrap:wrap;gap:2em;justify-content:center;align-items:center;margin-top:25px;margin-bottom:225px}.video__container{display:flex;justify-content:center;align-items:center;border:2px solid #b366f9;border-radius:5%;cursor:pointer;overflow:hidden;height:300px;width:300px;background-image:url(/images/camera-off.png);background-repeat:no-repeat;background-position:center;background-size:75px}.video-player{height:100%;width:100%}@media (max-width: 1400px){.video__container{height:200px;width:200px}}@media (max-width: 1200px){#members__button{display:block}#stream__container{width:100%;left:0}}@media (max-width: 980px){#stream__container{width:calc(100% - 20rem);left:0}}@media (max-width: 768px){#stream__container{width:100%}.video__container{height:100px;width:100px}#chat__button{display:block}}#stream__box{position:relative}.stream__focus,.stream__focus iframe{width:100%;height:100%}.stream__actions{position:fixed;bottom:1rem;border-radius:8px;background-color:#1a1a1a60;padding:1rem;left:50%;display:none;gap:1rem;transform:translate(-50%)}.stream__actions a,.stream__actions button{cursor:pointer;background-color:#262625;color:#fff;border:none;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;border-radius:5px;transition:all .2s ease-in-out}.stream__actions a svg,.stream__actions button svg{width:1.5rem;height:1.5rem;fill:#ede0e0}.stream__actions a.active,.stream__actions button.active,.stream__actions a:hover,.stream__actions button:hover{background-color:#845695}#join-btn{background-color:#845695;font-size:18px;padding:25px 50px;border:none;color:#fff;position:fixed;bottom:1rem;border-radius:8px;left:50%;transform:translate(-50%);cursor:pointer}.video__container{position:relative;width:300px;height:300px;overflow:hidden;border-radius:10px;box-shadow:0 4px 8px #0003}.video-player{width:100%;height:100%;object-fit:contain}.video-name{position:absolute;bottom:0;left:0;right:0;color:#fff;text-align:center;padding:5px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}*{font-family:Poppins,sans-serif}::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:10px}::-webkit-scrollbar-thumb{background:#797a79;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#845695}body{background-color:#1a1a1a;color:#fff;font-size:14px;padding:0;margin:0;box-sizing:border-box}p,a{font-weight:300}.avatar__md{height:40px;width:40px;object-fit:cover;border-radius:50%}.avatar__sm{height:30px;width:30px;object-fit:cover;border-radius:50%}#nav{position:fixed;top:0;width:100%;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #000000;background-color:#1a1a1a;text-decoration:none;padding:16px 5%;z-index:999}#logo{display:flex;align-items:center;gap:16px;font-size:22px;font-weight:700;line-height:0;margin:0;color:#ebe0e0}@media (max-width: 640px){#logo span{display:none}}#logo img{height:42px}#nav a{text-decoration:none}#nav__links{display:flex;align-items:center;column-gap:2em}.nav__link{color:#fff;text-decoration:none;transition:1s;border-bottom:2px solid transparent;transition:all .3s ease-in-out;padding-bottom:1px}@media (max-width: 520px){#nav__links{column-gap:3em}}.nav__link:hover{color:#e6e4e4;text-decoration:none;border-color:#845695}#create__room__btn{display:block;background-color:#845695;padding:8px 24px;font-size:14px;font-weight:500;border-radius:5px}#create__room__btn:hover{background-color:#845695}#copy__link__btn{display:block;background-color:#845695;padding:8px 24px;font-size:14px;font-weight:500;border-radius:5px}#copy__link__btn:hover{cursor:pointer;background-color:#845695}.nav--list{display:flex;gap:1rem;align-items:center}#members__button,#chat__button{display:none;cursor:pointer;background:transparent;border:none}#members__button:hover svg>path,#chat__button:hover svg,.nav__link:hover svg{fill:#845695}.nav__link svg{width:0;height:0}@media (max-width: 640px){#members__button{display:block}.nav__link svg{width:1.5rem;height:1.5rem}.nav__link,#create__room__btn{font-size:0;border:none}#create__room__btn{padding:0;background-color:transparent;border-radius:50%}#copy__link__btn{font-size:0;border:none}#copy__link__btn{padding:0;background-color:transparent;border-radius:50%}#copy__link__btn:hover{background-color:transparent}}