/** 
  div.video-box                         盒模型,子类名继承该前缀
  ├─ form.video-box-login               用户登录表单
  │  ├─ div.form-group                  ip,user,password
  │  │  ├─ label               
  │  │  └─ input               
  │  ├─ div.form-group ...              div.form-group                  
  │  ├─ label.checkbox                  是否记住密码  
  │  │  └─ input
  │  └─ button.video-box-submit         表单提交
  │
  ├─ div.video-box-wrap                 容器,等比缩放
  │  ├─ div.video-box-player            播放器
  │  └─ div.video-box-controller        播放控制
  │     ├─ div                          云台控制及播放状态
  │     └─ iframe                       用于遮挡视频               
  │
  ├─ ul.video-box-list                  播放列表
  │  ├─ li.video-box-list-item          列表项   
  │  │  └─ div.video-box-wrap           容器,等比缩放
  │  │     ├─ h3.@video-state           视频名称       z-index = 0
  │  │     ├─ div.video-box-player      播放器         z-index = -1
  │  │     └─ div.video-box-controller  播放控制       z-index = 0
  │  │        ├─ div                    云台控制及播放状态    
  │  │        └─ iframe                 用于遮挡视频   z-index = -1 
  │  └─ li ...
  │ 
  ├─ div.video-box-logout               退出登录
  │  └─ button.video-box-submit         表单提交
  │
  └─ textarea.video-box-logs            日志
*/
.video-box {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  font-family: "微软雅黑", arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
}
.video-box * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.video-box-login {
  width: 80%;
  max-width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 0px 10px #ccc;
}
.video-box-login div {
  margin-bottom: 10px;
}
.video-box-login label {
  display: block;
}
.video-box-login label.checkbox {
  float: right;
  padding-top: 5px;
}
.video-box-login input {
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font: inherit;
  color: inherit;
}
.video-box-login input[type="text"],
.video-box-login input[type="password"] {
  width: 100%;
  height: 35px;
}
.video-box-login input[type="text"]:focus,
.video-box-login input[type="password"]:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.video-box-submit {
  margin: 0;
  padding: 5px 10px;
  font: inherit;
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-color: #2e6da4;
}
.video-box-submit:active {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.video-box-submit:hover {
  font-weight: bold;
}
.video-box-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 61.8%;
  background-color: #000;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}
.video-box-wrap i {
  position: absolute;
  margin: 0;
  padding: 0 5px;
  top: 5px;
  right: 5px;
  font: inherit;
  color: #fff;
}
.video-box-wrap i.online {
  background-color: #52c41a;
  font-size: 12px;
}
.video-box-wrap i.offline {
  background-color: #ff4d4f;
  font-size: 12px;
}
.video-box-player {
  position: absolute;
  display: block;
  object-fit: fill;
  width: 100%;
  height: 100%;
  background: #000;
}
.video-box-controller {
  position: absolute;
  width: 100%;
  height: 100%;
}
.video-box-controller iframe {
  position: absolute;
  visibility: inherit;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  filter: alpha(opacity=0);
  background: rgba(0, 0, 0, 0);
}
.video-box-controller div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.video-box-controller div.onpause {
  background-image: url(/images/onpause.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.video-box-controller div.onload {
  background-image: url(/images/onload.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.video-box-controller div.onend {
  background-image: url(/images/onend.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.video-box-controller div.up {
  background-image: url(/images/up.png);
  background-position: top center;
  background-repeat: no-repeat;
}
.video-box-controller div.down {
  background-image: url(/images/down.png);
  background-position: bottom center;
  background-repeat: no-repeat;
}
.video-box-controller div.left {
  background-image: url(/images/left.png);
  background-position: center left;
  background-repeat: no-repeat;
}
.video-box-controller div.right {
  background-image: url(/images/right.png);
  background-position: center right;
  background-repeat: no-repeat;
}
.video-box-controller div.zoomin {
  background-image: url(/images/zoomin.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.video-box-controller div.zoomout {
  background-image: url(/images/zoomout.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.video-box-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.video-box-list h3 {
  margin: 0;
  padding: 5px 0 0 5px;
  background-color: #eee;
  font: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 5px 5px 0 0;
}
.video-box-list .video-box-wrap {
  border-radius: 0 0 5px 5px;
}
.divided-1 h3 {
  white-space: normal;
}
.video-box-list-item {
  position: relative;
  float: left;
  width: 50%;
  min-height: 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  list-style: none;
}
/*logs*/
.video-box-logs {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 160px;
  padding: 10px;
  font: inherit;
}
.clearfix:before,
.clearfix:after,
.video-box-list:before,
.video-box-list:after {
  content: " ";
  display: table;
}
.clearfix:after,
.video-box-list:after {
  clear: both;
}