.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}