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:#006eff}.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:#006eff;border:1px solid #006eff;color:#fff;letter-spacing:1px}.container-box{margin-left:200px;margin-right:300px;position:relative}.local-video{margin:0 4.62963vh;position:relative}.local-video video{height:70.82353vh;width:100%;display:block;background-color:#000}.remote-user-list{position:absolute;left:0;top:0;width:200px;height:100%;background:#333;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{position:relative;font-size:20px;height:40px;line-height:40px;text-align:center}.remote-user-list .user-ul .user-ul-li:hover{background:#666}.remote-user-list .menu{position:absolute;z-index:100;left:200px;text-align:left;top:1px;background-color:#333;border-radius:8px}.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:#333;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{position:absolute;top:0;right:0;bottom:0;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}