html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#card {
    width: 100%;
    height: 50%;
}

#windowBox {
    width: 100%;
    height:100%;
    /*object-fit: fill;*/
    display: inline-block !important;
    background-color: black;
}

.row{
    --bs-gutter-x:0 !important;
}


#video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.vjs-poster {
    width: 100%;
    height: 100%;
}

/* chrome下的滚动条样式 */

::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 滚动槽 */

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #2BD7EB;
    /*-webkit-box-shadow: inset 0 0 6px #11828B;*/
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #17cbae;
}

::-webkit-scrollbar-corner {
    background-color: transparent; // 颜色
}

.col-20{
    flex: 0 0 auto;
    width: 20%;

}

#video_html5_api{
    width: 100%;
   /* height: 100%;*/
}
#windowBox_video{
    width: 100%;
   /* height: 100%;*/
}

.card{
    height:100%;
}
/*.card-body{
    height:120%;
}*/

.rotate{
    transform: rotate(90deg);
}