.component_group-chat{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;margin:auto;background-color:#f5f5f5;overflow:hidden;height:100%}.component_group-chat .widow{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;padding:12px 12px 12px 12px;height:560px;border-bottom:1px solid #eee;overflow:auto}.component_group-chat .widow .message-item{display:-webkit-box;display:-ms-flexbox;display:flex}.component_group-chat .widow .message-item .item-avatar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:12px;width:34px;height:34px;border-radius:4px;overflow:hidden}.component_group-chat .widow .message-item .item-avatar>img{width:100%;height:100%}.component_group-chat .widow .message-item .item-message .message-top{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:24px;font-size:14px;color:#242f42}.component_group-chat .widow .message-item .item-message .message-top .message-time{margin-left:12px;font-size:14px;color:#999}.component_group-chat .widow .message-item .item-message .message-body{margin-top:7px;font-size:12px;color:#666}.component_group-chat .widow .message-item .other-box{-webkit-box-flex:1;-ms-flex:1;flex:1}.component_group-chat .widow .message-item+.message-item{margin-top:7px}.component_group-chat .input-box{bottom:0;left:0;width:100%}.component_group-chat .input-box .emoji{position:relative;background-color:#fff}.component_group-chat .input-box .emoji>i{padding:5px 0;margin-left:5px;font-size:24px;display:inline-block;color:#666;cursor:pointer}.component_group-chat .input-box .emoji #EmojiPicker{position:absolute;top:0;left:0;z-index:9;-webkit-transform:translateY(-100%);transform:translateY(-100%);width:100%}.component_group-chat .input-box .input-container .el-textarea{width:100%}.component_group-chat .input-box .input-container .el-textarea .el-textarea__inner{border:none}.component_group-chat .input-box .input-container .btn-box{background-color:#fff;text-align:right}body{height:100%;width:100%}body,li,ul{margin:0;padding:0}li,ul{list-style:none}.login{min-height:100vh;position:relative;background-color:#324157}.login .main{width:420px;background-color:#fff;padding:30px 26px 24px 26px;-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;top:40%;left:50%;-webkit-transform:translate(-50%,-60%);transform:translate(-50%,-50%);font-size:14px}.main .main-title{font-size:30px;text-align:center;color:#333;letter-spacing:1px}.main .main-input{margin:33px 0 13px 0}.main-input input{color:#888;border:1px solid #ddd;position:relative;margin-bottom:10px;-ms-touch-action:none;touch-action:none}.main-input input,.main .main-button button{padding:0 14px;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:38.5px;height:38.5px}.main .main-button button{background-color:#324157;border:1px solid #324157;color:#fff;letter-spacing:1px}.container-box{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative}.local-video{margin:0 4.62963vh;position:relative}.local-video video{height:70.82353vh;width:100%;display:block;background-color:#000}.main-web{display:-webkit-box;display:-ms-flexbox;display:flex}.remote-user-list{width:260px;height:85vh;background:#242f42;color:#fff}.remote-user-list h2{font-size:20px;line-height:36px;font-weight:weight;text-align:center}.remote-user-list .user-ul{display:block}.remote-user-list .user-ul .user-ul-li{padding:0 12px;position:relative;font-size:16px;height:40px;line-height:40px;text-align:left}.remote-user-list .user-ul .user-ul-li .text{font-size:16px;line-height:40px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.remote-user-list .user-ul .user-ul-li:hover{background:#666}.remote-user-list .menu{position:absolute;z-index:100;left:100%;text-align:left;top:1px;background-color:#242f42;border-radius:8px;width:200px;height:40px}.remote-user-list .menu li{padding:0 10px;min-width:165px;height:40px;line-height:40px;color:#ddd;text-indent:10px;cursor:pointer}.remote-user-list .menu li span{cursor:pointer}.remote-user-list .menu li span:hover{color:#38f}.local-display-name{height:50px;background:#242f42;width:100%;color:#fff;font-weight:400}.local-display-name span{margin:0 30px;line-height:50px;font-size:15px}.publisher{margin:20px 0 20px 4.62963vh}.publisher input[type=text]{border:2px solid #456879;border-radius:10px;height:40px;width:95px}.publisher button{font-family:arial;color:#fff!important;font-size:12px;width:68px;height:26px;background:#00bfff;border:none;outline:none}.publisher button:hover{background:#006eff;cursor:pointer}.streamType label{font-family:arial;font-size:16px}.video-container{width:260px;background-color:#eee;color:#fff;padding:20px;overflow-y:scroll}.video-container::-webkit-scrollbar{display:none}.video-container .remote-subscriber{margin:10px 0;position:relative}.video-container video{background:#000;width:100%;height:195px}.video-container .display-name{position:absolute;top:35px;left:30px;padding:5px;background:rgba(0,0,0,.1);color:#fff}.alert{display:none;position:fixed;top:8%;left:50%;min-width:300px;max-width:600px;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:99999;text-align:center;padding:10px 15px;border-radius:3px}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.el-loading-mask{display:none}.component_live-console{background-color:#000}.component_live-console .action-item{padding:0 5px;cursor:pointer}.component_live-console .action-item>i{font-size:16px;color:#fff}.component_live-console .action-item-active>i{color:#999}.component_live-console .el-button{color:#fff}.component_live-console .top-bar{display:-webkit-box;display:-ms-flexbox;display:flex;height:55px;background-color:#262626}.component_live-console .top-bar .channel-info{-webkit-box-flex:1;-ms-flex:1;flex:1}.component_live-console .top-bar .pannel-top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:270px}.component_live-console .top-bar .pannel-top .btn-panel{background-color:transparent}.component_live-console .top-content{margin-top:2px;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh}.component_live-console .top-content .pannel{width:65px;height:100%;background-color:#262626}.component_live-console .top-content .content-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;margin-left:2px;-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%;background-color:#000}.component_live-console .top-content .content-body .camera-box{display:-webkit-box;display:-ms-flexbox;display:flex;padding:12px 0;width:100%;height:85px}.component_live-console .top-content .content-body .camera-box .drag-box{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 20px}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item{border-radius:4px;width:165px;height:85px;background-color:#fff;overflow:hidden}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-content{position:relative;z-index:9;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:50px;color:#999}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-content .btn-action{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-content .btn-action .el-button{border-color:#409eff;color:#409eff}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-content .btn-action>button{background-color:transparent}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .css-hover>button{display:none;background-color:transparent}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .css-hover:hover>button{display:inline-block;border-color:#409eff;color:#409eff}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .css-reset{-webkit-box-pack:start!important;-ms-flex-pack:start!important;justify-content:flex-start!important}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .css-reset .action-item{-webkit-box-flex:unset!important;-ms-flex:unset!important;flex:unset!important}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-action{position:relative;z-index:9;display:-webkit-box;display:-ms-flexbox;display:flex;height:25px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:rgba(0,0,0,.4);font-size:16px;color:#010101}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .info-action .action-item{-webkit-box-flex:1;-ms-flex:1;flex:1}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .others-video{position:absolute;top:0;left:0;width:100%;height:100%}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item .item-info .others-video>video{width:165px;height:auto}.component_live-console .top-content .content-body .camera-box .drag-box .camera-item+.camera-item{margin-left:12px}.component_live-console .top-content .content-body .video-box{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:0 24px 24px}.component_live-console .top-content .content-body .video-box>video{width:100%}.component_live-console .top-content .content-body .share-video-box{padding:0 24px 24px}.component_live-console .top-content .content-body .share-video-box>video{width:100%;height:auto}.component_live-console .top-content .intereact{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:270px;height:100%;background-color:#262626}.component_live-console .top-content .intereact .self-video{position:relative;height:152px;overflow:hidden}.component_live-console .top-content .intereact .self-video>video{width:100%}.component_live-console .top-content .intereact .self-video .video-action{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:9;top:0;left:0;width:100%;height:100%;background-color:transparent}.component_live-console .top-content .intereact .self-video .video-action .action-panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%}.component_live-console .top-content .intereact .self-video .video-action .action-panel .btn-panel{background:transparent}.component_live-console .top-content .intereact .self-video .video-action .action-status{display:-webkit-box;display:-ms-flexbox;display:flex;padding:3px 5px;width:100%;height:20px;background-color:rgba(0,0,0,.4)}