*{margin:0;padding:0;box-sizing:border-box}:root{--bodyPadding: 0px;--participantCount: 2;--localPartVideoWidth: calc(98vw / var(--participantCount));--remotePartVideoWidth: calc( var(--localPartVideoWidth) * calc(var(--participantCount) - 1) )}body{padding:var(--bodyPadding);background:#000;display:flex;justify-content:center;align-items:center;color:#fff;height:100vh}#status{position:absolute;left:50%;top:50%;margin-right:-50%;transform:translate(-50%,-50%);text-align:center;font-size:80px;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;color:#fff}.flex{display:flex}.videoWrapper{display:flex;flex-direction:row;width:100%;height:100%;align-items:stretch;margin:auto}#localVideo{display:none}.not-sharing>#remote-view-video{width:var(--remotePartVideoWidth)}.not-sharing>.videoContainer{width:var(--localPartVideoWidth);height:100vh;margin:auto;display:flex;align-items:center}.not-sharing #localVideo{width:var(--localPartVideoWidth);height:100%}.not-sharing>#remote-view-video{height:100%;margin:auto}.not-sharing #remote-video-stream{display:none}.sharing>#remote-view-video{width:90%;margin:0 auto auto}.sharing #remote-video-stream{display:block}.sharing>.videoContainer{width:10%;display:flex;flex-direction:column;justify-content:center}.sharing #localVideo{width:100%}#remote-video-stream{width:100%;margin-bottom:1rem}#roomName{justify-content:center;width:100%;height:50%;align-items:center;font-size:40px}@media (min-width: 1920px) and (max-width: 3840px){body{padding:var(--bodyPadding)}.videoContainer{bottom:var(--bodyPadding);right:var(--bodyPadding)}}@media (min-width: 3480px) and (max-width: 7680px){body{padding:calc(var(--bodyPadding) * 2)}.videoContainer{bottom:calc(var(--bodyPadding) * 2);right:calc(var(--bodyPadding) * 2)}}@media all and (min-width: 7680px){body{padding:calc(var(--bodyPadding) * 4)}.videoContainer{bottom:calc(var(--bodyPadding) * 4);right:calc(var(--bodyPadding) * 4)}}.overlay-wrapper{position:absolute;top:0;width:100%;display:flex;justify-content:center;visibility:hidden}.overlay-wrapper.active{visibility:visible}#overlay-room-id{margin-top:20px;padding:10px;background-color:#000;color:#fff;font-family:montserrat_semibold,montserrat semibold;font-size:36px;border-radius:5px}@media only screen and (min-width: 1080px){#overlay-room-id{margin-top:20px;padding:10px;font-size:48px}}@media only screen and (min-width: 2160px){#overlay-room-id{margin-top:40px;padding:20px;font-size:96px}}@media only screen and (min-width: 4320px){#overlay-room-id{margin-top:60px;padding:30px;font-size:192px}}