.room-loading {
    width: 100vw;
    height: 100vh;
}
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-top: 60px;
    width: 100%;
    height: 100%;
    background-image: url(http://b.bdstatic.com/searchbox/icms/searchbox/img/rtc-bg.png);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.loading-title {
    width: 100%;
    padding-top: 60.386rpx;
    line-height: 47.1rpx;
    font-family: PingFangSC-Medium;
    font-size: 47.1rpx;
}

.loading-title text {
    margin-left: 36.23rpx;
    color: #fff;
}

.input-box {
    position: relative;
    box-sizing: border-box;
    margin-top: 82.13rpx;
    width: 677.54rpx;
    text-align: left;
    background-color: transparent;
}

.username-input {
    margin-top: 61.59rpx;
}

.input-box .input-title {
    margin-bottom: 30.8rpx;
    line-height: 23.551rpx;
    font-size: 23.551rpx;
    font-family: PingFangSC-Regular;
    color: #ccc;
}

.input-box .input-text {
    margin: auto;
    font-size: 34.42rpx;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;
    color: #fff;
}

.input-box .placeholder {
    font-size: 34.42rpx;
    color: #999;
}

.input-box .underline {
    margin-top: 19.93rpx;
    width: 677.54rpx;
    height: 1.81rpx;
    background: #999;
    opacity: .6;
}

.username-input .input-container {
    position: relative;
    height: 50.72rpx;
}

.input-container .btn-random {
    position: absolute;
    top: 0;
    right: 0;
    margin-bottom: 11.47rpx;
    width: 90%;
    height: 50.72rpx;
    font-size: 23.55rpx;
    line-height: 50.72rpx;
    text-align: center;
    color: #fff;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 25.36rpx;
    z-index: 99;
}

.enter-room-btn {
    margin-top: 126.81rpx;
    width: 90%;
    height: .5rem;
    font-family: PingFangSC-Regular;
    font-size: .18rem;
    color: #fff;
    line-height: .18rem;
    background: #3388ff;
    border-radius: 15.1rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

.setting-panel .panel-header {
    height: 72.464rpx;
    font-size: 14.49rpx;
}

.panel-header image {
    margin: 27.54rpx 0 0 322.46rpx;
    width: 68.36rpx;
    height: 14.49rpx;
}

.setting-panel .panel-body {
    flex: 1;
    font-size: 28.99rpx;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;
    line-height: 27.78rpx;
}

.panel-body .panel-remain {
    height: 100%;
    margin-bottom: 72.464rpx;
}

.setting-panel .panel-section {
    margin-top: 14.49rpx;
    border-radius: 28.99rpx;
    background: #222;
}

.panel-section .setting-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22.95rpx 23.55rpx 22.34rpx;
    box-sizing: border-box;
    width: 713.77rpx;
    height: 86.96rpx;
}

.setting-option .select-more {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 23.55rpx;
    line-height: 23.55rpx;
}

.setting-option .collapse-icon {
    width: 32.61rpx;
    height: 32.61rpx;
    opacity: .4;
}

.setting-option .collapse-menu {
    margin-right: 38.04rpx;
    width: 27.174rpx;
    height: 19.928rpx;
}

button.btn.active {
    color: #f2f2f2;
    background-color: #006eff;
}

button.btn-hover {
    background-color: #d1d1d1;
}