@import '~antd/es/style/themes/default.less';

@ptcWidth: 250px;
@btnAreaHeight: 50px;
@videoPanelMargin: 5px;
@cardTitleHeight: 30px;

.main {
  width: 100%;
  height: 100%;
}

.top {
  width: 100%;
  height: calc(100% - @btnAreaHeight);
  display: flex;
  flex-wrap: wrap;
}

.bottom {
  width: 100%;
  height: @btnAreaHeight;
}

.control_Button {
  margin: 2px;
}

.video_panel(@count) {
  width: calc(100% / @count - @videoPanelMargin * 4);
  height: calc(100% / @count - @videoPanelMargin * 4);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: @videoPanelMargin;
  position: relative;

  .cardCheckHelp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .cardtitle {
    padding:@videoPanelMargin;
    height: @cardTitleHeight;
    background: #0EB7A7;
    color: white;
    display: flex;
    justify-content: space-between;
  }

  iframe {
    width: 100%;
    height: calc(100% - @cardTitleHeight);
    background: black;
  }

  .cardHoverMenu {
    width: 100%;
    background: #ccc;
    margin-top: -35px;
    padding-left: 20px;
    display: none;

    Button {
      margin-right: calc(@videoPanelMargin * 2);
    }
  }

  .cardHoverMenuShow {
    display: block;
  }
}

.video_panel_click {  
  border: 2px solid darkorange;
}

// 1*1
.video_panel1 {
  .video_panel(1);
}

// 2*2
.video_panel2 {
  .video_panel(2);
}

// 3*3
.video_panel3 {
  .video_panel(3);
}

// 4*4
.video_panel4 {
  .video_panel(4);
}
