.select {
    width: 120px;
    font-size: inherit;
    color: #16b7ff;
    background-color: #000000;
    border: 1px solid rgba(22, 183, 255, 1);
    padding: 4px 0;
    margin: 0px 0px;
    width: 100px;
}

.left_nav {
    width: 100%;
    color: #16b7ff;
    /* float: left; */
}

.left_nav li {
    text-align: center;
    border: 1px solid #16b7ff;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
}

.left_cam {
    width: 100%;
    color: #16b7ff;
    float: left;
}

.left_cam li {
    text-align: center;
    border: 1px solid #16b7ff;
    height: 50px;
    line-height: 50px;
    margin-bottom: 10px;
}

.right_content {
    width: 89%;
    border: 1px solid #16b7ff;
    float: right;
    height: 540px;
}

.right_content>div {
    width: 32%;
    height: 200px;
    display: inline-block;
    background: url(../../../img/jzjn_bg02.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-right: 15px;
}

.vid_div {
    /* margin-left: 295px;
    margin-top: -780px; */
    overflow-y: auto;
}

.vid_div {
    margin-right: -50px;
    width: 82%;
}


/* //隐藏的样式 */

.active1 {
    display: none !important;
    color: #00baff;
}




/* main的页面部分 */

.box {
    width: 100%;
    overflow: hidden;
}

.left {
    height: 868px;
    flex: 12;
    background: url(../../../img/video-bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 28px 0;
}

.left ul.videolist {
    width: 100%;
    /* height: 600px; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 24px;
}

.left ul.videolist li {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.left ul.videolist li:last-child {
    margin-bottom: 0;
}

.left ul.videolist li .img {
    width: calc(50% - 12px);
}

.left ul.videolist li video {
    width: 100%;
}


/* 一宫格样式 */

.left ul.videolist1 {
    padding: 0 24px;
}

.left ul.videolist1 li {
    width: 100%;
    height: 100%;
}

.left ul.videolist1 li video {
    width: 100%;
}


/* 九宫格样式 */

.videolist9 {
    margin-left: 30px;
}

.left ul.videolist9 {
    width: 100%;
    /* height: 600px; */
    /* overflow: hidden; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
}

.left ul.videolist9 li {
    width: 33%;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
    margin-bottom: 10px;
}

.left ul.videolist9 li p {
    font-size: 16px;
    color: #fff;
    /* text-align: center; */
}

.left ul.videolist9 li:last-child {
    margin-bottom: 0;
}

.left ul.videolist9 li video {
    width: 100%;
}


/* 六宫格样式 */

.left ul.videolist6 {
    width: 100%;
    /* height: 600px; */
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* display: flex;
    justify-content: space-between; */
    /* flex-wrap: wrap; */
}

.left ul.videolist6 .videolist6-t {
    width: 100%;
    /* flex: 1; */
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 8px;
}

.left ul.videolist6 .videolist6-t .videolist6-l {
    flex: 2;
    margin-right: 4px;
    /* align-items: center; */
}

.left ul.videolist6 .videolist6-t .videolist6-l video {
    width: 100%;
}

.left ul.videolist6 .videolist6-t .videolist6-r {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left ul.videolist6 .videolist6-t .videolist6-r video {
    width: 100%;
    padding-left: 3px;
    margin-bottom: 2px;
}

.left ul.videolist6 .videolist6-b {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.left ul.videolist6 .videolist6-b li {
    width: 33%;
}

.left ul.videolist6 .videolist6-b li video {
    width: 100%;
}

.left ul.videolistquan li {
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.left ul.videolistquan li video {
    width: 100%;
}


/* .left ul.videolist6 .videolist-b div video {
    width: 100%;
  } */


/* 左下 */

.left .libottom {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.left .libottom ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left .libottom ul li {
    margin-bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 15px;
}

.left .libottom ul li em {
    display: inline-block;
    height: 40px;
    margin-right: 20px;
}

.left .libottom ul li em:last-child {
    margin-right: 0;
}

.left .libottom ul li em img {
    width: 40px;
    cursor: pointer;
}


/* .left .libottom ul li em img {
    width: 40px;
  } */

.left .libottom ul li.shuxian {
    border-right: solid 2px #135596;
}

.left .libottom ul li span {
    display: inline-block;
    height: 36px;
    width: 36px;
    background: rgba(16, 28, 59, 1);
    border: 1px solid rgba(19, 85, 150, 1);
    font-size: 12px;
    color: #fff;
    line-height: 36px;
    text-align: center;
    margin-right: 5px;
}

.left .libottom ul li div {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left .libottom ul li div button {
    font-size: 14px;
    height: 36px;
    white-space: nowrap;
}

.right {
    flex: 4;
    /* background: pink; */
    /* margin-right: 5px; */
    background-image: none;
}

.right .right-top {
    color: #ffffff;
    padding: 10px 15px;
    background-image: url("../../../img/video-right.png");
    position: relative;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
}

.video-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.video-search label {
    font-size: 16px;
    white-space: nowrap;
    margin-right: 10px;
    margin-bottom: 0;
}

.video-search .search-input {
    background-color: #071937;
    border: solid 1px #385db7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    width: 100%;
}

.video-search .search-input input {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    line-height: 36px;
}


/* 按钮样式 */

.bottomxhh {
    background: url(../../../imgshipinbg.png) center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    float: left;
}

.le-xh2 h2 {
    color: #51fcfd;
    font-size: 16px;
    padding: 10px 0 0 36px;
}

.videobg {
    padding: 24px 154px 54px 154px;
}

video {
    margin: 9px;
    width: 31% !important;
    height: 166px;
    object-fit: fill;
}

.loading {
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: transparent;
    background-image: url(../../../img/jiankong.png);
    background-size: 100% 100%
}

.loading.hover {
    background-image: url(../../../img/jiankong.png);
}

.stop {
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: transparent;
    border: 0px;
    background-color: transparent;
    background-image: url(../../../img/tingzhi.png);
    background-size: 100% 100%
}

.stop.hover {
    background-image: url(../../../img/tingzhi1.png);
}

.pause {
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: transparent;
    border: 0px;
    background-color: transparent;
    background-image: url(../../../img/zanting.png);
    background-size: 100% 100%
}

.pause.hover {
    background-image: url(../../../img/zanting1.png);
}

.play {
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: transparent;
    border: 0px;
    background-color: transparent;
    background-image: url(../../../img/bofang.png);
    background-size: 100% 100%
}

.play.hover {
    background-image: url(../../../img/bofang1.png);
}

.full {
    width: 40px;
    height: 40px;
    border: 0px;
    background-color: transparent;
    border: 0px;
    background-color: transparent;
    background-image: url(../../../img/quanping.png);
    background-size: 100% 100%
}

.full.hover {
    background-image: url(../../../img/quanping1.png);
}

.chartone {
    float: left;
    width: 32%;
    height: 155px;
    background: url(../../../img/jzjn_bg02.png);
    background-size: 100% 100%;
    margin: 0px auto;
    padding: 8px 10px 8px 10px;
    white-space: nowrap;
}

.tree {
    color: #46cfb0;
}

.tree li,
.tree li>a,
.tree li>span {
    padding: 4pt;
    border-radius: 4px;
    cursor: pointer;
}

.tree li a {
    color: #46cfb0;
    text-decoration: none;
    line-height: 20pt;
    border-radius: 4px;
}

.tree li a:hover {
    background-color: #34bc9d;
    color: #fff;
}

.active {
    /* background-color: #34495e; */
    color: white;
}

.active a {
    color: #fff;
}

.tree li a.active:hover {
    background-color: #34bc9d;
}

::-webkit-scrollbar-track-piece {
    background-color: #dddddd;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-thumb {
    background-color: #34bc9d;
    background-clip: padding-box;
    min-height: 28px;
}

.toptietabgment {
    float: right;
    text-align: center;
    display: inline-block;
    background: url(../../../img/costControl_top_left.png);
    background-size: 100% 100%;
    padding: 14px 2px;
    width: 100px;
    height: 50px;
    margin-right: 11px;
}

.titleming {
    /* display: inline-flex; */
    font-size: 14px;
    color: #51FCFD;
}

.toptietabg_img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 3px;
    float: right !important;
    cursor: pointer;
}

.opton1 option:hover {
    background-color: #34bc9d;
    color: #fff;
}

.opton1 {
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #9bd1c5;
    border-bottom: 1px solid #9bd1c5;
}

.modal-content {
    width: 1100px;
    background: url(../../../img/bgh.png) center no-repeat;
    background-size: 100% 100%;
    padding: 20px;
}

.modal-content {
    background-color: transparent!important;
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        max-width: 82%;
    }
    #myModalB .modal-lg,
    #myModalB .modal-xl {
        max-width: 50%;
    }
}


/* 表格 */

tr,
td {
    white-space: nowrap;
    border: 1px solid rgba(2, 62, 144, 0.5);
    text-align: center;
    /* color: #fff; */
}

th {
    color: #ffffff;
    background: #023e90;
}

th,
td,
tr {
    border: 1px solid rgba(2, 62, 144, 0.5);
    height: 30px;
    width: 100px;
    text-align: center;
    padding: 10px 8px;
    font-size: 14px;
}

td {
    color: #ffffff;
}


/* tbody>tr:nth-of-type(n) {
	background: #09284d;
} */

tbody>tr:nth-of-type(2n) {
    background: #002F67;
}

.modal-header {
    border: none;
    position: absolute;
    top: -16px;
    right: 6px;
    background: url(../../../img/closexh.png) center no-repeat;
    background-size: 100%;
}

.datepickers2 {
    border: 1px solid rgba(22, 183, 255, 1);
    background-color: transparent;
    color: #16b7ff;
    padding: 3px 0;
    width: 80px;
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
    opacity: 0;
}

.modal-header .close {
    opacity: 0;
}

.fade {
    transition: opacity .15s linear;
}

.modal-dialog {
    position: absolute;
    left: 12%;
    top: 0;
}

.modal-ead {
    position: absolute;
    left: 12%;
    top: 12%;
}

.cjbtn {
    width: 90px;
    height: 30px;
    background-color: #040A19;
    color: #16B7FF;
    border: 1px solid #16B7FF;
    margin-right: 10px;
}

.cjbtn {
    width: 80px;
    height: 37px;
}

.sp2 {
    font-size: 12px;
    color: #ffffff;
}

.aoeyuv {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

.aoeyuv div {
    width: 217px;
    padding-left: 10px;
    height: 60px;
    margin-bottom: 20px;
}

.cjbottom {
    position: absolute;
    bottom: 0px;
    left: 43%;
}
.pagination-sm {
    margin-top: 10px;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: transparent;
}

.addcjbottomright {
    height: 54px;
    width: 131px;
    float: right;
    margin-right: 52px;
}

.addcjbottomright .btn {
    width: 156px;
    height: 38px;
    margin-left: 10px;
    border: 1px solid #385DB7;
    border-radius: 5px;
    color: #51FCFD;
}

.addcjbottomright .btn img {
    margin-bottom: 4px;
    display: inline-block;
}