html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0;vertical-align:middle}caption,th,td{text-align:left;font-weight:400;vertical-align:middle}a img{border:none}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(/fonts/Roboto-light-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:300;src:local("Roboto Light"),local("Roboto-Light"),url(/fonts/Roboto-light.woff2) format("woff2"),url(/fonts/Roboto-light.ttf) format("ttf");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(/fonts/Roboto-regular-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url(/fonts/Roboto-regular.woff2) format("woff2"),url(/fonts/Roboto-regular.ttf) format("ttf");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(/fonts/Roboto-medium-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto;font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium"),url(/fonts/Roboto-medium.woff2) format("woff2"),url(/fonts/Roboto-medium.ttf) format("ttf");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}*{box-sizing:border-box;outline:none}body{background:none;line-height:1}input{padding:0;font-family:inherit;background-color:transparent}html{height:100%;box-sizing:border-box;background:#141e30;background:linear-gradient(to top,#243b55,#141e30);font-family:Roboto;font-weight:300}@media (min-device-width: 721px){html{font-size:16px}}@media (max-device-width: 720px){html{font-size:12px}}body{height:100%}#mediasoup-demo-app-container{height:100%;width:100%}#mediasoup-demo-app-container [data-component=Room]{position:relative;height:100%;width:100%;will-change:opacity}#mediasoup-demo-app-container [data-component=Room].Appear-appear{opacity:0}#mediasoup-demo-app-container [data-component=Room].Appear-appear.Appear-appear-active{transition-property:opacity;transition-duration:.3s;opacity:1}#mediasoup-demo-app-container [data-component=Room]>.state{position:fixed;z-index:100;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:25px;background-color:#243b55bf}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.state{top:20px;left:20px;width:124px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.state{top:10px;left:10px;width:110px}}#mediasoup-demo-app-container [data-component=Room]>.state>.icon{flex:0 0 auto;border-radius:100%}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.state>.icon{margin:6px 0 6px 6px;height:16px;width:16px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.state>.icon{margin:4px 0 4px 4px;height:16px;width:16px}}#mediasoup-demo-app-container [data-component=Room]>.state>.icon.new,#mediasoup-demo-app-container [data-component=Room]>.state>.icon.closed{background-color:#aaaaaa80}#mediasoup-demo-app-container [data-component=Room]>.state>.icon.connecting{animation:Room-info-state-connecting .75s infinite linear}#mediasoup-demo-app-container [data-component=Room]>.state>.icon.connected{background-color:#30bd18bf}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.state>.icon.connected{display:none}}#mediasoup-demo-app-container [data-component=Room]>.state>.text{flex:100 0 auto;-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;text-align:center;text-transform:uppercase;font-family:Roboto;font-weight:400;color:#ffffffbf}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.state>.text{font-size:12px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.state>.text{font-size:10px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.state>.text.connected{display:none}}#mediasoup-demo-app-container [data-component=Room]>.info{position:fixed;z-index:100}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.info{top:55px;left:20px;width:124px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.info{top:40px;height:18px;width:110px}}#mediasoup-demo-app-container [data-component=Room]>.info>p.text{height:18px;left:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;flex:100 0 auto;-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;text-align:center;font-family:Roboto;font-weight:400;color:#ffffffbf;border-radius:25px;background-color:#243b55bf;margin-bottom:2px}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.info>p.text{font-size:11px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.info>p.text{font-size:9px}}#mediasoup-demo-app-container [data-component=Room]>.info>p.text>span.label{color:#ffffff73}#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper{pointer-events:none;position:absolute;z-index:1;top:0;left:0;right:0;display:flex;flex-direction:row;justify-content:center}#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper>.room-link{width:auto;background-color:#243b55bf;border-bottom-right-radius:4px;border-bottom-left-radius:4px;box-shadow:0 3px 12px 2px #1116}#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper>.room-link>a.link{display:block;-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:auto;text-transform:uppercase;font-family:Roboto;font-weight:400;color:#ffffffbf;cursor:pointer;text-decoration:none;transition-property:color;transition-duration:.1s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper>.room-link>a.link{padding:10px 20px;font-size:12px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper>.room-link>a.link{padding:6px 10px;font-size:10px}}#mediasoup-demo-app-container [data-component=Room]>.room-link-wrapper>.room-link>a.link:hover{color:#fff;text-decoration:underline}#mediasoup-demo-app-container [data-component=Room]>.me-container{position:fixed;z-index:100;overflow:hidden;box-shadow:0 5px 12px 2px #11111180;transition-property:border-color;transition-duration:.2s}#mediasoup-demo-app-container [data-component=Room]>.me-container.active-speaker{border-color:#fff}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.me-container{height:250px;width:294px;bottom:60px;left:20px;border:1px solid rgba(255,255,255,.15)}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.me-container{height:220px;width:200px;bottom:50px;left:10px;border:1px solid rgba(255,255,255,.25)}}#mediasoup-demo-app-container [data-component=Room]>.chat-input-container{bottom:20px;right:20px;width:300px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:8px;overflow:hidden;background-color:#fff;transition:height .3s ease;box-shadow:0 4px 8px #0000001a;position:fixed;z-index:100}#mediasoup-demo-app-container [data-component=Room]>.sidebar{position:fixed;z-index:101;top:calc(50% - 60px);height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.sidebar{left:20px;width:36px;margin-top:-60px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.sidebar{left:10px;width:32px;margin-top:-80px}}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button{flex:0 0 auto;margin:4px 0;background-position:center;background-size:75%;background-repeat:no-repeat;background-color:#243b55bf;cursor:pointer;transition-property:opacity,background-color;transition-duration:.2s;border-radius:100%}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button{height:36px;width:36px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button{height:32px;width:32px}}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.on{background-color:#ffffffb3}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.disabled{pointer-events:none;opacity:.5;transition-duration:0s}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.hide-videos{background-image:url(/images/icon_video_white_on.svg)}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.hide-videos.on{background-image:url(/images/icon_video_black_off.svg)}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.mute-audio{background-image:url(/images/icon_volume_white_on.svg)}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.mute-audio.on{background-image:url(/images/icon_volume_black_off.svg)}#mediasoup-demo-app-container [data-component=Room]>.sidebar>.button.restart-ice{background-image:url(/images/icon_restart_ice_white.svg)}@keyframes Room-info-state-connecting{50%{background-color:#ffa500bf}}#mediasoup-demo-app-container [data-component=Me]{position:relative;height:100%;width:100%}#mediasoup-demo-app-container [data-component=Me]>.controls{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;pointer-events:none}#mediasoup-demo-app-container [data-component=Me]>.controls>.button{flex:0 0 auto;margin:4px 4px 4px 0;border-radius:2px;pointer-events:auto;background-position:center;background-size:75%;background-repeat:no-repeat;background-color:#00000080;cursor:pointer;transition-property:opacity,background-color;transition-duration:.15s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Me]>.controls>.button{width:28px;height:28px;opacity:.85}#mediasoup-demo-app-container [data-component=Me]>.controls>.button:hover{opacity:1}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Me]>.controls>.button{width:26px;height:26px}}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.unsupported{pointer-events:none}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.disabled{pointer-events:none;opacity:.5}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.on{background-color:#ffffffd9}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.mic.on{background-image:url(/images/icon_mic_black_on.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.mic.off{background-image:url(/images/icon_mic_white_off.svg);background-color:#d42241b3}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.mic.unsupported{background-image:url(/images/icon_mic_white_unsupported.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.webcam.on{background-image:url(/images/icon_webcam_black_on.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.webcam.off{background-image:url(/images/icon_webcam_white_on.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.webcam.unsupported{background-image:url(/images/icon_webcam_white_unsupported.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.change-webcam.on{background-image:url(/images/icon_change_webcam_black.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.change-webcam.unsupported{background-image:url(/images/icon_change_webcam_white_unsupported.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.share.on{background-image:url(/images/icon_share_black_on.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.share.off{background-image:url(/images/icon_share_white_on.svg)}#mediasoup-demo-app-container [data-component=Me]>.controls>.button.share.unsupported{background-image:url(/images/icon_share_white_unsupported.svg)}#mediasoup-demo-app-container [data-component=ChatInput]{position:relative;height:100%;width:100%}#mediasoup-demo-app-container [data-component=ChatInput]>textarea{height:100%;width:100%;padding:4px 8px;resize:none;outline:none;background-color:#243b55;color:#fff;font-family:inherit;font-size:13px;font-weight:400;line-height:22px;border:none}#mediasoup-demo-app-container [data-component=ChatInput]>textarea::-webkit-input-placeholder{color:#ffffff59}#mediasoup-demo-app-container [data-component=ChatInput]>textarea:-moz-placeholder{color:#ffffff59}#mediasoup-demo-app-container [data-component=ChatInput]>textarea::-moz-placeholder{color:#ffffff59}#mediasoup-demo-app-container [data-component=ChatInput]>textarea:-ms-input-placeholder{color:#ffffff59}#mediasoup-demo-app-container [data-component=ChatInput]>textarea:disabled{opacity:.65}#mediasoup-demo-app-container .chat-window{position:fixed;bottom:20px;right:20px;width:300px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:8px;overflow:hidden;background-color:#fff;transition:height .3s ease;box-shadow:0 4px 8px #0000001a;z-index:1000}#mediasoup-demo-app-container .chat-window.expanded{height:400px}#mediasoup-demo-app-container .chat-window.collapsed{height:50px}@media (max-width: 768px){#mediasoup-demo-app-container .chat-window{width:250px;bottom:10px;right:10px}#mediasoup-demo-app-container .chat-window.expanded{height:300px}}#mediasoup-demo-app-container .chat-header{display:flex;align-items:center;padding:10px;background-color:#f1f1f1;border-bottom:1px solid #ccc;cursor:pointer}#mediasoup-demo-app-container .toggle-button{background:none;border:none;font-size:16px;cursor:pointer;margin-right:10px}#mediasoup-demo-app-container textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;resize:none}#mediasoup-demo-app-container .message-list{flex:1;padding:10px;overflow-y:auto;background-color:#f9f9f9}#mediasoup-demo-app-container .message{margin-bottom:10px;padding:8px 12px;border-radius:8px;max-width:70%}#mediasoup-demo-app-container .message.sent{background-color:#dcf8c6;margin-left:auto}#mediasoup-demo-app-container .message.received{background-color:#fff;margin-right:auto}#mediasoup-demo-app-container .message-sender{font-weight:700;font-size:.9em}#mediasoup-demo-app-container .message-content{margin:5px 0}#mediasoup-demo-app-container .message-timestamp{font-size:.8em;color:#666;text-align:right}#mediasoup-demo-app-container .chat-input-container{padding:10px;background-color:#fff;border-top:1px solid #ccc}#mediasoup-demo-app-container [data-component=Peers]{min-height:100%;width:100%}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Peers]{width:100%;padding:40px 0 220px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Peers]{min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}}#mediasoup-demo-app-container [data-component=Peers]>.peer-container{overflow:hidden;will-change:opacity}#mediasoup-demo-app-container [data-component=Peers]>.peer-container.Appear-appear{opacity:0}#mediasoup-demo-app-container [data-component=Peers]>.peer-container.Appear-appear.Appear-appear-active{transition-property:opacity;transition-duration:1s;opacity:1}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Peers]>.peer-container{flex:0 0 auto;height:382px;width:450px;margin:6px;border:1px solid rgba(255,255,255,.15);box-shadow:0 5px 12px 2px #11111180;transition-property:border-color;transition-duration:.35s}#mediasoup-demo-app-container [data-component=Peers]>.peer-container.active-speaker{border-color:#fff}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Peers]>.peer-container{flex:100 100 auto;order:2;min-height:25vh;width:100%;display:100 100 auto;flex-direction:column;justify-content:center;align-items:center}#mediasoup-demo-app-container [data-component=Peers]>.peer-container.active-speaker{order:1}}#mediasoup-demo-app-container [data-component=Peer]{flex:100 100 auto;position:relative;height:100%;width:100%}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Peer]{display:100 100 auto;flex-direction:column;justify-content:center;align-items:center}}#mediasoup-demo-app-container [data-component=Peer]>.indicators{position:absolute;z-index:10;top:0;right:0;width:150px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center}#mediasoup-demo-app-container [data-component=Peer]>.indicators>.icon{flex:0 0 auto;margin:4px 4px 4px 0;width:32px;height:32px;background-position:center;background-size:75%;background-repeat:no-repeat;transition-property:opacity;transition-duration:.15s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Peer]>.indicators>.icon{opacity:.85}}#mediasoup-demo-app-container [data-component=Peer]>.indicators>.icon.mic-off{background-image:url(/images/icon_remote_mic_white_off.svg)}#mediasoup-demo-app-container [data-component=Peer]>.indicators>.icon.webcam-off{background-image:url(/images/icon_remote_webcam_white_off.svg)}#mediasoup-demo-app-container [data-component=Peer] .incompatible-video{position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center}#mediasoup-demo-app-container [data-component=Peer] .incompatible-video>p{padding:6px 12px;border-radius:6px;-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:15px;color:#ffffff8c}#mediasoup-demo-app-container [data-component=PeerView]{position:relative;flex:100 100 auto;height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;background-color:#243b55bf;background-image:url(/images/buddy.svg);background-position:bottom;background-size:auto 80%;background-repeat:no-repeat}#mediasoup-demo-app-container [data-component=PeerView]>.info{position:absolute;pointer-events:none;z-index:5;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(to bottom,#0000,#0000 70%,#0000001a 80%,#00000080)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons{display:flex;flex-direction:row}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon{pointer-events:auto;margin:4px 0 4px 4px;background-position:center;background-size:100%;background-repeat:no-repeat;cursor:pointer;transition-property:opacity,background-color;transition-duration:.15s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon{width:28px;height:28px;opacity:.75}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon:hover{opacity:1}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon{width:26px;height:26px}}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon.info.on{background-image:url(/images/icon_info_white_on.svg)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon.info:not(.on){background-image:url(/images/icon_info_white_off.svg)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.icons>.icon.stats{background-image:url(/images/icon_stats_white_on.svg)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box{pointer-events:auto;position:absolute;left:4px;right:4px;bottom:4px;padding:4px 6px 50px;border-radius:2px;background-color:#000000a6;opacity:1;overflow:auto;transform-origin:left top;transition:.1s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.box{top:36px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.box{top:34px}}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box:not(.visible){z-index:-1;opacity:0;transform:scale(0)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>h1{pointer-events:none;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;font-weight:400}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p{pointer-events:none;margin-bottom:2px;color:#ffffffbf;font-size:11px}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p:last-child{margin-bottom:0}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p.clickable,#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p .clickable{pointer-events:auto;-ms-user-select:none;-webkit-user-select:none;user-select:none;color:#44c5d6}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p.clickable:hover,#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p .clickable:hover{cursor:pointer;color:#73feff;text-decoration:underline}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p.copiable,#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p .copiable{pointer-events:auto;cursor:text}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p.copiable:hover,#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p .copiable:hover{color:#44c5d6;text-decoration:underline}#mediasoup-demo-app-container [data-component=PeerView]>.info>.box>p.indent{margin-left:10px}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer{flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-end}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer.is-me{padding:10px;align-items:flex-start}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer:not(.is-me){padding:20px;align-items:flex-start;pointer-events:none}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer.is-me{padding:10px;align-items:flex-start}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer:not(.is-me){padding:10px;align-items:flex-end}}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.display-name{font-size:14px;font-weight:400;color:#ffffffd9}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>span.display-name{-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:text}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>span.display-name:not(.editable){cursor:default}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>span.display-name.editable{pointer-events:auto}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>span.display-name.editable:hover{background-color:#aeff0040}}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>span.display-name.loading{opacity:.5}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>input.display-name{border:none;border-bottom:1px solid #aeff00;background-color:transparent}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row{margin-top:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon{height:16px;width:16px;margin-right:5px;-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat;background-image:url(/images/devices/unknown.svg)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.chrome{background-image:url(/images/devices/chrome_16x16.png)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.firefox{background-image:url(/images/devices/firefox_16x16.png)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.safari{background-image:url(/images/devices/safari_16x16.png)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.msedge{background-image:url(/images/devices/edge_16x16.png)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.opera{background-image:url(/images/devices/opera_16x16.png)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-icon.broadcaster{height:18px;width:18px;background-image:url(/images/devices/broadcaster.svg)}#mediasoup-demo-app-container [data-component=PeerView]>.info>.peer>.row>.device-version{-ms-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:11px;color:#ffffff8c}#mediasoup-demo-app-container [data-component=PeerView]>video{flex:100 100 auto;height:100%;width:100%;object-fit:cover;-ms-user-select:none;-webkit-user-select:none;user-select:none;transition-property:opacity;transition-duration:.5s;background-color:#000000bf}#mediasoup-demo-app-container [data-component=PeerView]>video.is-me{transform:scaleX(-1)}#mediasoup-demo-app-container [data-component=PeerView]>video.hidden{opacity:0;transition-duration:0s}#mediasoup-demo-app-container [data-component=PeerView]>video.network-error{filter:grayscale(100%) brightness(135%) blur(5px)}#mediasoup-demo-app-container [data-component=PeerView]>audio{display:none;position:absolute;top:0;bottom:0;right:0;z-index:1;border:2px solid red}#mediasoup-demo-app-container [data-component=PeerView]>canvas.face-detection{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;pointer-events:none}#mediasoup-demo-app-container [data-component=PeerView]>canvas.face-detection.is-me{transform:scaleX(-1)}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container{position:absolute;top:0;bottom:0;right:2px;width:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar{width:6px;border-radius:6px;background:#ffff00a6;transition-property:height background-color;transition-duration:.25s}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level0{height:0;background-color:#ffff00a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level1{height:10%;background-color:#ffff00a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level2{height:20%;background-color:#ffff00a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level3{height:30%;background-color:#ffff00a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level4{height:40%;background-color:#ffa500a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level5{height:50%;background-color:#ffa500a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level6{height:60%;background-color:#ff0000a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level7{height:70%;background-color:#ff0000a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level8{height:80%;background-color:#000000a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level9{height:90%;background-color:#000000a6}#mediasoup-demo-app-container [data-component=PeerView]>.volume-container>.bar.level10{height:100%;background-color:#000000a6}#mediasoup-demo-app-container [data-component=PeerView]>.spinner-container{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;background-color:#000000bf}#mediasoup-demo-app-container [data-component=PeerView]>.spinner-container .react-spinner{position:relative;width:48px;height:48px;top:50%;left:50%}#mediasoup-demo-app-container [data-component=PeerView]>.spinner-container .react-spinner .react-spinner_bar{position:absolute;width:20%;height:7.8%;top:-3.9%;left:-10%;animation:PeerView-spinner 1.2s linear infinite;border-radius:5px;background-color:#ffffff80}#mediasoup-demo-app-container [data-component=PeerView]>.video-elem-paused{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;background-position:center;background-image:url(/images/icon_video_elem_paused.svg);background-size:35%;background-color:#00000040;background-repeat:no-repeat}@keyframes PeerView-spinner{0%{opacity:1}to{opacity:.15}}#mediasoup-demo-app-container [data-component=Stats]{position:fixed;z-index:1000;top:0;bottom:0;right:0;overflow:hidden;pointer-events:none}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Stats]{width:470px;padding-left:20px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Stats]{left:0}}#mediasoup-demo-app-container [data-component=Stats]>.content{position:relative;height:100%;pointer-events:auto;background:#ffffffec;-ms-scroll-chaining:none;overscroll-behavior:contain;transition-property:transform opacity;transition-duration:.25s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Stats]>.content{width:450px;box-shadow:-4px 0 12px 2px #00000080}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Stats]>.content{width:100%}}#mediasoup-demo-app-container [data-component=Stats]>.content:not(.visible){transform:translate(100%);opacity:0}#mediasoup-demo-app-container [data-component=Stats]>.content>.header{position:absolute;z-index:2;top:0;left:0;right:0;padding:0 28px;background:linear-gradient(to bottom,#fff,#fff,#ffffffe6,#fff0)}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.info{height:80px;display:flex;flex-direction:row;justify-content:center;align-items:center}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.info>.close-icon{flex:0 0 auto;width:28px;height:28px;margin-left:-6px;margin-right:20px;cursor:pointer;background-position:left;background-size:100%;background-repeat:no-repeat;background-image:url(/images/icon_close_black.svg);opacity:.75}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.info>.close-icon:hover{opacity:1}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.info>h1{flex:100 100 auto;text-transform:uppercase;color:#444;font-size:14px;font-weight:500;text-align:right;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.list{height:150px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.list>p{margin-bottom:5px;color:#243b55bf;font-size:14px;font-weight:400;-ms-user-select:none;-webkit-user-select:none;user-select:none}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.list>p>a{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:500;color:#6b93c0bf;cursor:pointer}#mediasoup-demo-app-container [data-component=Stats]>.content>.header>.list>p>a.disabled{opacity:.5;cursor:not-allowed}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats{padding:0 28px;height:100%;overflow:auto}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items{margin-bottom:40px;will-change:opacity}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items.Appear-appear{opacity:0}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items.Appear-appear.Appear-appear-active{transition-property:opacity;transition-duration:.15s;opacity:1}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items:after{content:"";display:block;visibility:hidden;margin-bottom:-230px}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>h2{margin-bottom:20px;text-transform:uppercase;color:#141e30a6;font-size:13px;font-weight:500;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>h2:before{content:"";display:block;visibility:hidden;height:230px}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>.item{padding-bottom:10px;margin-bottom:20px;border-bottom:1px solid #e5e5e5}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>.item>.line{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:8px}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>.item>.line>.key{flex:0 0 auto;width:38.5%;color:#141e30a6;font-size:11px;font-weight:400;word-break:break-all;text-align:right}#mediasoup-demo-app-container [data-component=Stats]>.content>.stats>.items>.item>.line>.value{flex:0 0 auto;width:58.5%;color:#6b93c0bf;font-size:11px;font-weight:400;word-break:break-all;text-align:left}#mediasoup-demo-app-container [data-component=Notifications]{position:fixed;z-index:9999;pointer-events:none;top:0;right:0;bottom:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Notifications]{padding:10px;width:300px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Notifications]{padding:4px;width:65%;max-width:220px}}#mediasoup-demo-app-container [data-component=Notifications]>.notification{pointer-events:auto;margin-top:4px;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Notifications]>.notification{min-width:75%}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Notifications]>.notification{width:100%}}#mediasoup-demo-app-container [data-component=Notifications]>.notification.Appear-appear{visibility:hidden;opacity:0;transition:all .15s ease-in-out 0s,visibility 0s linear .25s;transform:translate(200px)}#mediasoup-demo-app-container [data-component=Notifications]>.notification.Appear-appear.Appear-appear-active{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0);transition-delay:0s,0s}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Notifications]>.notification{padding:16px 24px 16px 12px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Notifications]>.notification{padding:6px 16px 6px 12px}}#mediasoup-demo-app-container [data-component=Notifications]>.notification>.icon{flex:0 0 auto;height:24px;width:24px;margin-right:12px;background-position:center;background-size:100%;background-repeat:no-repeat}#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.title{font-weight:500;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:default;line-height:1.35em;margin-bottom:10px}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.title{font-size:14px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.title{font-size:12px}}#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.text{-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:default;line-height:1.35em}@media (min-device-width: 721px){#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.text{font-size:13px}}@media (max-device-width: 720px){#mediasoup-demo-app-container [data-component=Notifications]>.notification>.body>.text{font-size:12px}}#mediasoup-demo-app-container [data-component=Notifications]>.notification.info{background-color:#141e30a6;color:#ffffffbf}#mediasoup-demo-app-container [data-component=Notifications]>.notification.info>.icon{opacity:.65;background-image:url(/images/icon_notification_info_white.svg)}#mediasoup-demo-app-container [data-component=Notifications]>.notification.error{background-color:#ff1914bf;color:#fff}#mediasoup-demo-app-container [data-component=Notifications]>.notification.error>.icon{opacity:.85;background-image:url(/images/icon_notification_error_white.svg)}#mediasoup-demo-app-container [data-component=NetworkThrottle]{position:absolute;top:0;left:0;z-index:99999;padding:0 20px;background:#fffffff2;border-radius:4px;box-shadow:0 5px 12px 2px #11111180;font-family:Roboto}#mediasoup-demo-app-container [data-component=NetworkThrottle]>h1.draggable{padding:20px;text-align:center;text-transform:uppercase;font-weight:400;font-size:12px;color:#111;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:move}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row{display:flex;justify-content:center;align-items:center;height:20px;margin-bottom:8px}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row:last-child{margin-bottom:0}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.key{margin-right:4px;flex:0 0 auto;width:100px;font-weight:400;font-size:11px;text-align:right;color:#243b55bf}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value{margin-left:4px;flex:0 0 auto;width:100px;padding:4px 8px;font-size:11px;text-align:right;color:#141e30a6;border:none;background:#6666661a;border-radius:2px;transition-property:opacity;transition-duration:.1s}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value:disabled{opacity:.5}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value:-ms-input-placeholder{color:#141e3040}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value::placeholder{color:#141e3040}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value:focus:-ms-input-placeholder{color:transparent}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.inputs>.row>.value:focus::placeholder{color:transparent}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.buttons{display:flex;justify-content:center;align-items:center;padding:20px}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.buttons>button{margin:0 4px;flex:0 0 auto;width:66px;height:20px;display:flex;justify-content:center;align-items:center;border:none;border-radius:2px;font-weight:400;font-size:11px;color:#fff;text-align:center;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:pointer;transition-property:opacity;transition-duration:.1s}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.buttons>button:disabled{opacity:.5;cursor:default}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.buttons>button.apply{background:#e9736e}#mediasoup-demo-app-container [data-component=NetworkThrottle]>.buttons>button.reset{background:#3b608bbf}#mediasoup-demo-app-media-query-detector{position:relative;z-index:-1000;bottom:0;left:0;height:1px;width:1px}@media (max-device-width: 720px){#mediasoup-demo-app-media-query-detector{display:none;position:fixed}}