.multiroom-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
.multiroom-container .rtc-room {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}
.rtc-room .view-container {
    position: relative;
}
.stream-0 .view-container {
    width: 100%;
    height: 100%;
}
.stream-1 .view-container {
    width: 100vw;
    height: 50vh;
}
.stream-2 .view-container {
    width: 50vw;
    height: 50vh;
}
.stream-2 .pusher-container {
    width: 100vw;
    height: 50vh;
}
.stream-3 .view-container {
    width: 50vw;
    height: 50vh;
}
.stream-4 .view-container {
    width: 50vw;
    height: 33.3vh;
}
.stream-4 .pusher-container {
    width: 100vw;
    height: 33.3vh;
}
.stream-5 .view-container {
    width: 50vw;
    height: 33.3vh;
}

.remote-view.full {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
}
.view-container .voice-container {
    position: absolute;
    top: 30.8rpx;
    left: 30.8rpx;
    width: 36.23rpx;
    height: 36.23rpx;
    opacity: .9;
    background: #1b1b1b;
    border-radius: 30.5px;
}

.voice-container .voice-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 36.23rpx;
    height: 36.23rpx;
}

.voice-container .voice-icon-off {
    background-image: url(http://b.bdstatic.com/searchbox/icms/searchbox/img/voice-off.png);
}

.voice-container .voice-icon-on {
    background-image: url(http://b.bdstatic.com/searchbox/icms/searchbox/img/voice-on.png);
}

.view-container .operation-bar {
    position: absolute;
    bottom: 30.8rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    z-index: 10;
}

.stream-0 .view-container .operation-bar {
    bottom: 61.59rpx;
}

.operation-bar .btn-normal {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 18.12rpx;
    width: 76.09rpx;
    height: 76.09rpx;
    border-radius: 50%;
    opacity: .9;
    background: #1b1b1b;
}

.view-container .camera-off-mask {
    width: 100%;
    height: 100%;
    background: #2d2d2d;
    display: flex;
    justify-content: center;
    align-items: center;
}
.camera-off-mask .camera-off-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.camera-off-container .camera-off-image {
    width: 144.93rpx;
    height: 144.93rpx;
}
.camera-off-container .camera-off-text {
    font-size: 28.99rpx;
    color: #999;
    letter-spacing: 0;
    text-align: center;
    line-height: 28.99rpx;
    margin-top: 36.23rpx;
}

.view-container .pause-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pause-mask .pause-content {
    font-size: 28.99rpx;
    color: #999;
    text-align: center;
    line-height: 28.99rpx;
}

.stream-0 .view-container .operation-bar .btn-normal,
.stream-1 .view-container .operation-bar .btn-normal {
    width: 97.83rpx;
    height: 97.83rpx;
}

.operation-bar .btn-active {
    background: #fff;
}

.btn-normal .btn-image {
    width: 39.86rpx;
    height: 39.86rpx;
}
.stream-0 .view-container .operation-bar .btn-normal .btn-image,
.stream-1 .view-container .operation-bar .btn-normal .btn-image {
    width: 54.35rpx;
    height: 54.35rpx;
}

.view-container .btn-hangup {
    background: #f7534f;
}

.multiroom-container .panel {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 18.12rpx 36.232rpx 18.12rpx;
    width: 100vw;
    color: #fff;
    opacity: .98;
    background: #1b1b1b;
    border-radius: 28.99rpx 28.99rpx 0 0;
    z-index: 999;
}

.panel .panel-header {
    padding: 30.8rpx 0 27.17rpx 0;
    font-size: 28.99rpx;
    letter-spacing: 0;
    text-align: center;
    line-height: 28.99rpx;
}
.panel .panel-body {
    flex: 1;
    font-size: 28.99rpx;
    letter-spacing: 0;
    line-height: 27.78rpx;
}
.panel-body .scroll-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.panel-body .panel-tips {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #999;
    text-align: center;
}

.setting-panel .panel-section {
    border-radius: 28.99rpx;
    background: #222;
    margin-top: 14.49rpx;
}
.setting-panel .setting-option {
    box-sizing: border-box;
    width: 713.77rpx;
    height: 86.96rpx;
    display: flex;
    justify-content: space-between;
    padding: 23.55rpx;
}
.setting-panel .setting-option .label {
    line-height: 64rpx;
}
.setting-panel .setting-switch {
    margin-right: -12rpx;
}

.multiroom-container .memberlist-panel {
    height: 487.32rpx;
}
.memberlist-panel .member-item {
    display: flex;
    margin: 16rpx 16rpx 16rpx 32rpx;
}
.memberlist-panel .member-id {
    width: 30%;
}

.multiroom-container .panel-mask {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .4);
}

.multiroom-container .top-mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 115.94rpx;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}
.multiroom-container .bottom-mask {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 188.41rpx;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    z-index: 2;
}

.none {
    display: none !important;
}