/*
    for <input button>
*/
.newButton:active{
    padding-top:2px;
}
.newButton{
    background:rgb(34,171,223);
    color: white;
    height: 28px;
    min-width: 105px;
    cursor: pointer;
    border: 1px solid #a09e9e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.newButton:hover{
    background:rgb(0, 165, 255);
}
.ms_newButton{
    padding-left:0px !important;
}
.newBrower{
    border: 0px;
}

.smallButton{
    background:rgb(34,171,223);
    color: white; 
    /*height: 22px;*/ 
    min-width: 105px; 
    cursor: pointer; 
    border: 1px solid #a09e9e; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
}

.smallButton:hover{
    background:rgb(0, 165, 255);
}

/*
    for <input>
*/
input[type="checkbox"]{
    vertical-align: middle;
    margin-top: 0px;
}
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    input{
        padding-left:5px !important; 
    }
}*/
input{
    padding-left: 3px;
    background:white;
    border: 1px solid #a9a9a9;
    color:gray;
}
input:hover{
    border-color:#BFEFFF;
}
input[disabled="disabled"]{
    background:rgb(219,219,219);
}
input[disabled=""]{
    background:rgb(219,219,219);
}
input[disabled="disabled"]:hover{
    border: 1px solid #a9a9a9 !important;
    background:rgb(219,219,219);
}
input[disabled=""]:hover{
    /*border: 1px solid #a9a9a9 !important;*/
    /*background:rgb(219,219,219);*/
}
/*
    for <select>
*/
/*clear the default of IE*/

select::-ms-expand { 
    display: none; 
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select{
        padding-left:5px !important; 
    }
}

select{
    border: solid 1px #a9a9a9;
    overflow: hidden;
    /*The reserved space for arrow*/
    height:22px;
    padding-right: 20px;
    padding-right: 0px\9;
    align-items:center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    background-size: 20px 100% !important;
    /*the arrow on the right shows*/
    background: url(/image/public/select_arrow.png) no-repeat scroll right center white;
    /*clear the default style*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    -ms-appearance:none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -khtml-border-radius:0;
}
select[disabled="disabled"]{
    background: url(/image/public/select_arrow.png) no-repeat scroll right center rgb(219,219,219);
}
select[disabled=""]{
    background: url(/image/public/select_arrow.png) no-repeat scroll right center rgb(219,219,219);
}
select:hover{
    border-color:#BFEFFF;
}
select[disabled="disabled"]:hover{
    border: 1px solid #a9a9a9 !important;
}
/*
    for <table>
*/
.tableHeader{
    width:100%;;
    /*border: solid rgb(136, 136, 136);
    border-width: 0px 3px 0px 3px;*/
    border-collapse: collapse;
    border-spacing:0;
    background: rgb(136,136,136);
}
.tableHeader label{
    color:white;
}
.tableHeader th{  
    padding:0;  
}
.tableHeader tr{  
    text-align:center;
    padding:0;  
    height:30px;
}
.tableHeader td{  
    padding:0;  
    border:solid rgb(209,209,209); 
    border-width: 0px 2px 0px 2px;
    word-break: break-all;
}

.tableContent{
    width:100%;;
    /*border: solid rgb(136, 136, 136);
    border-width: 0px 3px 0px 3px;*/
    border-collapse: collapse;
    border-spacing:0;
    /*background: rgb(136,136,136);*/

    border:solid rgb(255,255,255); 
    border-width: 0px 0px 1px 0px;
}
.tableContent label{
    color:rgb(193,193,193);
}
.tableContent th{  
    padding:0;  
    text-align:center;
}
.tableContent tr{  
    cursor:pointer;
    height:30px;
}
.tableContent tr:nth-of-type(odd){  
    background: rgb(245,245,245);
}
.tableContent tr:nth-of-type(even){  
    background: rgb(255,255,255);
}

.tableContent .oddTr:hover{  
    background: rgb(219,236,243) !important;
}

.tableContent .oddTr{  
    background: rgb(245,245,245) !important;
}

.tableContent .evenTr:hover{  
    background: rgb(228,245,252) !important;
}

.tableContent .evenTr{  
    background: rgb(255,255,255) !important;
}
.tableContent .SelectOddTr{  
    background: rgb(219,236,243) !important;
}

.tableContent .oddTr_disable:hover{  
    background: rgb(219,236,243) !important;
}

.tableContent .oddTr_disable{  
    background: rgb(245,245,245) !important;
}

.tableContent .oddTr_disable td{  
    color:rgb(200,200,200) !important;
}

.tableContent .evenTr_disable:hover{  
    background: rgb(228,245,252) !important;
}

.tableContent .evenTr_disable{  
    background: rgb(255,255,255) !important;
}

.tableContent .evenTr_disable td{  
    color:rgb(200,200,200) !important;
}

.tableContent .SelectEvenTr{  
    background: rgb(228,245,252) !important;
    color:rgb(200,200,200);
}
/*********add for user**********/
.tableContent .SelectOddTr_User{  
    background: rgb(228,245,252) !important;
}
.tableContent .SelectEvenTr_User{  
    background: rgb(228,245,252) !important;
}
.tableContent .canHoveroddTr{  
    background: rgb(245,245,245) !important;
}
.tableContent .canHoverevenTr{  
    background: rgb(255,255,255) !important;
}
.tableContent .canHoveroddTr:hover{  
    background: rgb(219,236,243) !important;
}
.tableContent .canHoverevenTr:hover{  
    background: rgb(228,245,252) !important;
}
.tableContent .mySelectOddTr{  
    background: rgb(219,236,243) !important;
}
.tableContent .mySelectEvenTr{  
    background: rgb(228,245,252) !important;
    color:rgb(200,200,200);
}
.tableContent .Disable{  
}
.tableContent .Disable td{ 
    color:rgb(200,200,200);
}
.tableContent td{  
    padding:0;  
    border:solid rgb(240,240,240); 
    border-width: 2px 2px 2px 2px;
    text-align:center;
    word-break: break-all;
    font-size:12px;
}

.tableContent a{  
    font-size:12px;
}
/*ptz style 2017-07-18 yun*/
.PTZ-tableContent{
    width:100%;;
    border-collapse: collapse;
    border-spacing:0;
}
.PTZ-tableContent tr{  
    cursor:pointer;
    height:25px;
}
.PTZ-tableContent td{  
    padding:0;  
    word-break: break-all;
}
.PTZ-tableContent .PTZoddTr{  
    background: rgb(245,245,245) !important;
}
.PTZ-tableContent .PTZevenTr{  
    background: rgb(255,255,255) !important;
}
.PTZ-tableContent .PTZevenTr_Click{  
    background: #e3e3e3 !important;
}
/*
    for controller's Table 
*/

.TableStyle{
    /*width:100%;*/
    border:1px solid;
    overflow:hidden;
    position:relative;
    min-width:1000px;
    border:solid; 
    border-width: 1px 1px 1px 1px;
    border-top-color:rgb(193,193,193);
    border-right-color:rgb(193,193,193);
    border-bottom-color:rgb(193,193,193);
    border-left-color:rgb(193,193,193);
    
}
.TableStyle .TableHead{
    width:100%;;
    height:auto;
    /*height:20px;
    border:1px solid;*/
    background:white;
    position:absolute;
    z-index: 2;
}
.TableStyle .content{
    width:100%;;
    height: auto;
    position:absolute;
    z-index: 1;
}
.TableStyle .scrollbarframe{
    display:none;
    position:absolute;
    height:100%;
    width:15px;
    right:0;
    top:0;
    background: white;
    border: 1px solid #928e8e;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.TableStyle .scrollbarframe .scrollbar{
    position:absolute;
    width:15px;
    height:50%;
    right:0;
    top:0;
    background:rgb(10,169,227);
}
.TableStyle .scrollbar .whitebar0{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:-7px;
    top:50%;
    background:white;
}
.TableStyle .scrollbar .whitebar1{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:-3px;
    top:50%;
    background:white;
}
.TableStyle .scrollbar .whitebar2{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:1px;
    top:50%;
    background:white;
}
.TableStyle .scrollbar .whitebar3{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:5px;
    top:50%;
    background:white;
}

/*timebar*/
.timeBar{
    width:100%;
    height:80px;
    position:relative;
    overflow: hidden;
    background:rgb(65,70,76);
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.timeBar .timeShaft{
    height:20px;
    width:98%;
    position:absolute;
    left:1%;
    right:1%;
}

.timeBar .timeScale{
    height:20px;
    width:100%;
    position:absolute;
    left: 1%;
    right:1%;
}
.timeBar .timeScale .timeText{
    height:12px;
    width:100%;
    position:relative;
}
.timeBar .timeText div{
    height:12px;
    position:absolute;
}
.timeBar .timeText div label{
    height:12px;
    width:20px;
    color: white;
    font-size: 9px;
    left:-15px;
    position:absolute;
    text-align: center;
}

.timeBar .timeText.time5Min{
    display:none;
}
.timeBar .timeText .time10Min{
    display:none;
}

.timeBar .timeText .time30Min{
    display:none;
}
.timeBar .timeText .time1Hour{
    display:block;
}

.timeBar .timeScale .timeStick{
    height:8px;
    width:100%;
    position:relative;
}


.timeBar .timeStick div{
    height:8px;
    width:1px;
    position:absolute;
    /*display:none;*/
}

.timeBar .timeStick stick5min{
    display:none;
}

.timeBar .timeStick stick10min{
    display:none;
}

.timeBar .timeStick stick30min{
    display:none;
}

.timeBar .timeStick stick1Hour{
    display:none;
}

.timeBar .borderFrame{
    height:60px;
    position:absolute;
    bottom:0px;
    left: 1%;
    right:1%;
    overflow: hidden;
}
.timeBar .borderFrame .timeRecord{
    height:100%;
    position:absolute;
    width:100%;
}
.timeBar .timeConcave{
    height:20px;
    width:100%;
    background:rgb(204,204,204);
    position:absolute;
    top:20px;
}
.timeBar .lock{
    height: 3px;
    width:100%;
    position: absolute;
    top: 11px;
}
.timeBar .lock .lockLine{
    height:100%;
    border: solid;
    border-width: 1px 1px 0px 1px;
    border-color:#FF7F24;
    position: absolute;
}
.timeBar .lock .lockPng{
    width:9px;
    height:9px;
    position: absolute;
    background:url(/image/playback/timebar/lock.png) no-repeat;
    top:-10px;
    margin-left:-4px;
}

.timeBar .tag{
    height: 2px;
    width:100%;
    position: absolute;
    top: 12px;
}
.timeBar .tag .tagPng{
    width:14px;
    height:14px;
    position: absolute;
    background:url(/image/playback/timebar/tag.png) no-repeat;
    top:-9px;
    margin-left:-7px;
}

.timeBar .event{
    height: 30px;
    width:100%;
    position: absolute;
    top: 15px;
}

.timeBar .event .evt{
    background:rgb(255, 0, 0);
    height:100%;
    position: absolute;
}

.timeBar .event .filter-evt {
    background:#2741b1;
    height:100%;
    position: absolute;
}

.timeBar .common{
    height: 30px;
    width:100%;
    position: absolute;
    top: 15px;
}
.timeBar .common .timing{
    background:rgb(10, 169, 226);
    height:100%;
    position: absolute;
}

.timeBar .common .anr{
    background: #FF7F24;
    height:100%;
    position: absolute;
}

.timeBar .common .others{
    background:rgb(255, 0, 0);
    height:100%;
    position: absolute;
}

.timeBar .common .motion{
    background:rgb(82, 202, 78);
    height: 7px;
    position: absolute;
    top: 5px;
}
.timeBar .common .alarm{
    height: 6px;
    background:rgb(253, 104, 39);
    position: absolute;
    top: 12px;
}
.timeBar .common .emergency{
    background:rgb(3,107,144);
    height: 7px;
    position: absolute;
    top: 18px;
}
.timeBar .time{
    display:none;
    height: 20px;
    width: 56px;
    position: absolute;
    color: white;
    font-size: 14px;
}
.timeBar .time label{
    height: 20px;
    width: 56px;
    position: absolute;
    color: white;
    font-size: 14px;
    left:-28px;
}
.timeBar .time[name=timebar_start_time] label{
    height: 20px;
    width: 56px;
    position: absolute;
    color: white;
    font-size: 14px;
    left:0px !important;
}
.timeBar .time[name=timebar_end_time] label{
    height: 20px;
    width: 56px;
    position: absolute;
    color: white;
    font-size: 14px;
    left:-56px !important;
}
.timeBar .timePointer{
    width:20px;
    height:55px;
    position: absolute;
}
.timeBar .timePointer div{
    width:20px;
    height:55px;
    left:-10px;
    position: absolute;
    background:url(/image/playback/timebar/pointer.png) no-repeat;
}
.timeBar .leftflag{
    display:none;
    width:0px;
    height:45px;
    position: absolute;
    cursor: ew-resize;
}
.timeBar .leftflag div{
    width:20px;
    height:45px;
    position: absolute;
    left:-7px;
    background:url(/image/playback/timebar/left_flag.png) no-repeat;
}

.timeBar .rightflag{
    display:none;
    width:0px;
    height:45px;
    position: absolute;
    cursor: ew-resize;
}
.timeBar .rightflag div{
    width:20px;
    height:45px;
    position: absolute;
    left:-14px;
    background:url(/image/playback/timebar/right_flag.png) no-repeat;
}
.timeBar .mask{
    display:none;
    height: 45px;
    position: absolute;
    background:black;
    opacity:0.2;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

/*LineList*/
.LineHr{
    border:none !important;
    margin-left:5% !important;
    width:80% !important;
    height:1px !important;
    background-color:rgb(230,230,230) !important;
}

.LineHrPreview{
    border:none !important;
    margin-left:4% !important;
    width:90% !important;
    height:1px !important;
    background-color:rgb(230,230,230) !important;
}

/*ScrollBar*/
.settingScrollBarStyle{
    border: none !important;
}
.ScrollBarStyle{
    overflow: hidden;
    border: 1px solid #928e8e;
    position:relative;
    width:100%;
    height:100%;
}
.ScrollBarStyle .content{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    min-height:1px;
}
.ScrollBarStyle .scrollbarframe{
    display:none;
    position:absolute;
    height:100%;
    width:15px;
    right:0;
    top:0;
    background: white;
    border: 1px solid #928e8e;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.ScrollBarStyle .scrollbarframe .scrollbar{
    position:absolute;
    width:15px;
    height:50%;
    right:0;
    top:0;
    background:rgb(10,169,227);
}
.ScrollBarStyle .scrollbar .whitebar0{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:-7px;
    top:50%;
    background:white;
}
.ScrollBarStyle .scrollbar .whitebar1{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:-3px;
    top:50%;
    background:white;
}
.ScrollBarStyle .scrollbar .whitebar2{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:1px;
    top:50%;
    background:white;
}
.ScrollBarStyle .scrollbar .whitebar3{
    position:absolute;
    width:12px;
    left:2px;
    height:2px;
    margin-top:5px;
    top:50%;
    background:white;
}
/*checkbox*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
    .CheckBoxStyle0{
        margin-top: -16px !important;
    }
}*/
.CheckBoxStyle0{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 40%;
    margin-top: -7px;
    overflow: hidden;
}
.CheckBoxStyle0 input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle0 label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle0 label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0 input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0 input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.CheckBoxStyle0_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -9px;
    overflow: hidden;
}
.CheckBoxStyle0_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle0_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle0_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}

.CheckBoxStyle0_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}

/*for copy*/
.CheckBoxStyle0_S0_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -2px;
    overflow: hidden;
}
.CheckBoxStyle0_S0_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle0_S0_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle0_S0_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_S0_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_S0_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}

.CheckBoxStyle0_S0_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_S0_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_S0_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}


.CheckBoxStyle0_S1_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -10px;
    overflow: hidden;
}
.CheckBoxStyle0_S1_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle0_S1_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle0_S1_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_S1_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_S1_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}

.CheckBoxStyle0_S1_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle0_S1_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle0_S1_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 1;
}



.CheckBoxStyle1{
    width: 8px !important;
    height: 8px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -10px;
    overflow: hidden;
}
.CheckBoxStyle1 input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle1 label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle1 label:hover {
    opacity: 0.2;
}
.CheckBoxStyle1 input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle1 input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
}

.CheckBoxStyle2{
    width: 15px !important;
    height: 15px !important;
    /*border:1px solid #928e8e;*/
    /*background: black;*/
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -7px;
    overflow: hidden;
}
.CheckBoxStyle2 input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle2 label {
    opacity: 1;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:url(/image/public/schedule_tick.png);
 
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle2 span{
    height: 100%;
    width: 100%;
    opacity: 0;
    display: block;
    background: rgb(58,202,255);
}
.CheckBoxStyle2 div{
    height: 5px;
    width: 100%;
    background: rgb(58,202,255);
}
.CheckBoxStyle2 label:span {
    opacity: 0.2;
}
.CheckBoxStyle2 input[type=checkbox]:checked + span{
    opacity: 1;
}
.CheckBoxStyle2 input[disabled] + span{
    background: rgb(136,136,136);
    opacity: 0.3;
}

.CheckBoxStyle3{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: absolute;
    left: 49%;
    margin-left: -7px;
    top: 40%;
    margin-top: -7px;
    overflow: hidden;
}
.CheckBoxStyle3 input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle3 label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle3 label:hover {
    opacity: 0.2;
}
.CheckBoxStyle3 input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle3 input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
    cursor: default;
}
.CheckBoxStyle3_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -2px;
    overflow: hidden;
}
.CheckBoxStyle3_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle3_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle3_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle3_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle3_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
    cursor: default;
}

.CheckBoxStyle7{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 49%;
    margin-left: -7px;
    top: 40%;
    margin-top: -7px;
    overflow: hidden;
}
.CheckBoxStyle7 input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle7 label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle7 label:hover {
    opacity: 0.2;
}
.CheckBoxStyle7 input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle7 input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
    cursor: default;
}

.CheckBoxStyle7_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: relative;
    left: 50%;
    margin-left: -7px;
    top: 25%;
    margin-top: -2px;
    overflow: hidden;
}
.CheckBoxStyle7_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle7_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle7_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle7_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle7_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
    cursor: default;
}

.CheckBoxStyle6_for_safari{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: 7%;
    margin-top: -2px;
    overflow: hidden;
}
.CheckBoxStyle6_for_safari input[type=checkbox] {
    visibility: hidden;
    float: left;
}
.CheckBoxStyle6_for_safari label {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(58,202,255);
    /*-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;*/
}
.CheckBoxStyle6_for_safari label:hover {
    opacity: 0.2;
}
.CheckBoxStyle6_for_safari input[type=checkbox]:checked + label{
    opacity: 1;
}
.CheckBoxStyle6_for_safari input[disabled] + label{
    background: rgb(136,136,136);
    opacity: 0.3;
    cursor: default;
}
/*TabPage*/
.Tabpage{
    height:50px;
    margin-left:-10px;
    position: relative;
}
.Tabpage .Tab{
    height:28px;
    margin-left: 30px;
    z-index: 3;
    position: absolute;
}
.Tabpage .Tab div{
    float:left;
    width:150px;
    margin-left:6px;
    height:100%;
    cursor: pointer;
    text-align: center;
    background: #efefef none repeat scroll 0% 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px 5px 0px 0px;
}
.Tabpage .Tab div:hover{
    background: #dedede none repeat scroll 0% 0%;
}

.Tabpage .Tab .TabSel{
    float:left;
    width:150px;
    margin-left:6px;
    margin-top:-7px;
    height:125%;
    cursor: pointer;
    text-align: center;
    background: #33b4e5 none repeat scroll 0% 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 5px 5px 0px 0px;
}
.Tabpage .Tab .TabSel:hover{
    background: #33b4e5 none repeat scroll 0% 0%;
}

.Tabpage .Tab div label{
    color:grey;
    line-height:30px;
    cursor: pointer;
}
.Tabpage .Tab .TabSel label{
    color:white;
    line-height:42px;
    cursor: pointer;
}

.Tabpage .line{
    margin-left: 20px;
    height: 1px;
    border: 0px none;
    background-color: rgb(103,103,103);
    color: rgb(103,103,103);
    z-index: 2;
    top: 28px;
    position: absolute;
}
.Tabpage .Tri{
    margin-left: -30px;
    position: absolute;
    z-index: 1;
    top: 40px;
}
.Tabpage .Tri .triangle{
    opacity:0;
    height: 20px;
    width: 20px;
    background: rgb(17, 147, 196);
    margin-top: -18px;
    margin-left: 135px;
    float: left;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/*number box*/
.numberbox{
    position: relative;
    background-color: white;
    width: 80px;
    height: auto;
}
.numberbox input{
    width: 80px;
    height:24px;
    border: 1px solid #d4d4d4;
    /*padding-right: 13px;*/
    padding-left:3px;
}
.numberbox-up{
    width: 10px;
    line-height: 0px;
    height: 10px;
    position: absolute;
    right: -3px;
    top:3px;
    background:url(/image/public/numberbox-up.png) left top no-repeat;
    font-size: 0px;
}
.numberbox-down{
    width: 10px;
    line-height: 0px;
    height: 10px;
    position: absolute;
    right: -3px;
    bottom:3px;
    background:url(/image/public/numberbox-down.png) left bottom no-repeat;
    font-size: 0px;
}

/*vertical menu*/
.vmenu{
    width:100%;
    height:100%;
    background-color: white;
    /*border-left: 1px solid #d4d4d4;
    border-right: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;*/
    border-left: 1px solid rgb(54,61,67);
    border-right: 1px solid rgb(54,61,67);
    border-top: 1px solid rgb(54,61,67);
    background: url(/image/public/vmenu-border.png) left bottom repeat-x white;
}
.vmenu .line{
    width:100%;
    margin:0; 
    height:1px;
    background:url(/image/setting/menu_line_0.png) center no-repeat rgb(76,81,87);
    background-size:90%;
}

.vmenu-title{
    /*font-weight: bold;*/
    width: 100%;
    height: 44px; 
    line-height: 50px;
    cursor: pointer;
    text-align: left;
    /*color:#555;*/
    color:white;
    /*background-color: #f2f2f2;*/
    background-color:rgb(76,81,87);
    /*border-bottom: 1px solid #d4d4d4;*/
    position: relative;
    /*background-color: #e0e0e0;*/
}
.sel_vmenu-title{
    background-color:rgb(43,43,43) !important;
}
.vmenu-title-btn{
    width: 22px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 20px;
    /*background: url(/image/public/vmenu-title-btn.png);*/
    background: url(/image/setting/arrows.png);
}
.vmenu-title:hover .vmenu-title-btn{
    background: url(/image/setting/arrows2.png);
}
.vmenu-title-btn-sel{
    /*background: url(/image/public/vmenu-title-btn-sel.png);*/
    background: url(/image/setting/arrows2.png);
}
.vmenu-title-btn-gif{
    width: 22px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 27px;
    background: url(/image/setting/arrows.gif);
}
.vmenu-title img{
    margin-left: 20px;
    margin-top: 15px;
    position: absolute;
}
.vmenu-title label{
    cursor: pointer;
    margin-left: 50px;
    position: absolute;
    font-size: 13px;
}
.vmenu-content{
    width: 100%;
    height: auto;
/*  background-color: white;*/
    display: none;
    /*overflow: auto;*/
    border-bottom: 1px solid #d4d4d4;
}

/*slider*/
.vslider{
    width: 100%;
    /*background-color: #eee;*/
    background-color: white;
    /*margin: 5px auto;*/
}
.vslider-ptz{
    width: 100%;
    /*background-color: #eee;*/
    background-color: white;
    /*margin: 5px auto;*/
}
.vslider-value{
    color:#777;
    text-align: right;
    width: 20px;
}
.vslider-ptz-value{
    color:#777;
    text-align: center;
    width: 8px;
    height:12px;
    line-height:12px;
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius:2px;

}
.vslider td{
    padding: 3px 10px;
    /*text-align: left;*/
    line-height: 20px;
}
.vslider-ptz td{
    padding: 2px 3px;
    /*text-align: left;*/
    line-height: 20px;
}
.vslider label{
    color:#777;
}
.vslider-ptz label{
    color:#777;
}
.vslider-slider{
    width: 100%;
    height:20px;
    position: relative;
    cursor: pointer;
}
.vslider-ptz-slider{
    width: 93%;
    height:16px;
    position: relative;
    cursor: pointer;
}
.vslider-slider-bk{
    width: 100%;
    height:16px;
    /*background-color: white;*/
    background-color: #eee;
    position: absolute;
    left: 0px;
    top:2px;
    z-index: 11;
}
.vslider-slider-fr{
    height:16px;
    background: rgb(34,171,223);
    /*background-color: #e9e7bf;
    background-color: #85d5a0;*/
    position: absolute;
    left: 0px;
    top:2px;
    z-index: 12;
}
.vslider-slider-pre{
    height:20px;
    width: 5px;
    background-color: #777;
    position: absolute;
    left: 0px;
    top:0px;
    z-index: 13;
    /*border: 1px solid #777;*/

}

/*button*/
.reco-btn{
    min-width: 60px;
    padding: 5px;
    color: #555;
    cursor: pointer;
    border: 1px solid #d4d4d4;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: -webkit-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
    background: -moz-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
    background: -o-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
    background: linear-gradient(to bottom,#ffffff 0,#e6e6e6 100%);
    filter:linear-gradient(to bottom,#ffffff 0,#e6e6e6 100%);
}
/*************************/
.CheckBoxStyle4{
    width: 10px !important;
    height: 10px !important;
    border:1px solid #928e8e;
    background: white;
    position: absolute;
    left: 50%;
    margin-left: -7px;
    top: 50%;
    margin-top: -7px;
    overflow: hidden;
}
.CheckBoxStyle_Sche_All{
    left: 8px;
    top: 18px;
}
.CheckBoxStyle_Sche_Clean{
    left: 120px;
    top: -3px;
}
/***********************/
.radioslider{
    width:140px;
    height:20px;
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.radioslider .slidershow{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.radioslider .radioline{
    width:100%;
    height:10px;
    position:absolute;
    top:2px;
    background-image: url("/image/public/sliderline.png");
}
.radioslider .radiofloat{
    width:12px;
    height:12px;
    position:absolute;
    top: 3px;
    background-image: url("/image/public/sliderfloat.png");
}
.radioslider .slidertxt{
    display:none;
    height: 15px;
    position: absolute;
    top: -11px;
    left: 50%;
    background: transparent;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.radioslider .sliderevent{
    width:130px;
    height:100%;
    position:absolute;
    top:0px;
    left:5px;
    cursor:pointer;
}

/***********add mouseover css*************/
.h5Player{
    width: calc(100% - 4px);
    height: 100%;
    clear: both;
    /*margin: 0 auto;*/
}
.h5Player .divStyle{
    /*display: inline-block;*/
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    float: left;
    overflow: hidden;
    background: black;
    position: relative;
    border: 1px solid rgb(28,28,28);
    display: flex;
    justify-content: center;
    align-items: center;
}
.h5Player .CurWnd{
    border: 1px solid #00a0e8;
}
.h5Player .CurWndDiv{
    border: 0px;
}
.h5Player li{
    display: inline-block;
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    background: #eee;
    position: relative;
    background: center no-repeat #eee;
    background-image: url("../image/public/noStartPlay.png");
}
.h5Player .li_black{
    background: center no-repeat black;
}
.h5Player .li4{
    width: calc(50% - 2px);
    height: calc(50% - 2px);
}
.h5Player .li8,.h5Player .li16{
    width: calc(25% - 2px);
    height: calc(25% - 2px);
}

.h5Player .li9{
    width: calc(33.3% - 2px);
    height: calc(33.3% - 2px);
}
.h5Player .li8_Safari{
    width: calc(75% - 2px);
    height: calc(75% - 3.5px);
}
.h5Player .li8_1{
    width: calc(75% - 2px);
    height: calc(75% - 2px);
}
.h5Player li .h5canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.h5Player .noSignal{
     background-image: url("../image/public/noSignal.png");
}
.h5Player .cutStream{
     background-image: url("../image/public/disconnect.png");
}
.h5Player .noPermission{
     background-image: url("../image/public/noPermission.png");
}
.h5Player li .original{
    object-fit: contain;
    background-color: black;
}
.h5Player li .playbackFullScreen{
    object-fit: fill;
}

.h5Player li .liveview-status{
    width: 155px;
    height: 20px;
    z-index: 9999;
    position: absolute;
    top: 10px;
    right: 20px;
    background-color:transparent;
}

.h5Player li .liveview-status div{
    width: 20px;
    height: 20px;
    float: left;
    margin-left: 5px;
}

.h5Player li .liveview-status img{
    height: 20px;
}

.h5Player li .streamInfo{
    width: 150px;
    height: 80px;
    position: absolute;
    background-color:transparent;
    right: 1px;
    bottom: -15px;
    display: none;
    font-size: 12px;
    pointer-events:none;
}
.h5Player li .streamInfo span{
    color: white;
}

.h5Player li .stream-pos{
    /*width: 300px;
    height: 200px;*/
    position: absolute;
    background-color:transparent;
    /*display: none*/;
    overflow: hidden;
    word-break: break-all;
    white-space: pre-wrap;
}

.h5Player li .stream-pos span{
    display: block;
    font-size: 12px;
    color: red;
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alarmIcon{
    margin-left: -8px;
    margin-top: -8px;
}
.selPrivacyCanvas{
    position:absolute;
    top:0px;
    left: 0px;
}
.selMotionCanvas{
    position:absolute;
    top:1px;
    left: 0px;
}
.selVcaCanvas{
    position: absolute;
    top: 0px;
    left: 0px;
}
.selLineCanvas{
    position: absolute;
    top: 1px;
    left: 1px;  
}
.rubberbandDivOne{  
    position: absolute;
    z-index: 2147483649;
    border: 3px solid blue;
    cursor: move;  
}
.rubberbandDiv{  
    position: absolute;  
    border: 3px solid blue;  
    cursor: move;  
    display: none;  
    z-index: 2147483649;
}
.ZoomCanvas{
    cursor: pointer;
    position: relative;
}

.fullsreen{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*z-index: 9999;*/
}
#tipsDiv{
    -webkit-user-select: -webkit-text;
    -moz-user-select: -moz-text;
    -ms-user-select: -ms-text;
    user-select: text;
}
.selHelp,.selHelp:hover{background-image:url(/image/public/help_sel.png);}
#tipsTd{display: none;width: 40px;}
#tipsTd #tipsDiv{
    position: absolute;
    bottom: 40px;
    left: 20px;
    background: #fff;
    width: 400px;
    line-height: 2em;
    padding: 10px 30px 30px;
}



.tableContentAnpr{
    width:100%;
    min-width:550px;
    border-spacing:2px 2px;
}

.tableContentAnpr th{  
    padding:0;  
    text-align:left;
}
.tableContentAnpr tr{  
    /*cursor:pointer;*/
    height:30px;
}

.tableContentAnpr .defaultTr{  
    background: rgb(255,255,255) !important;
    border:2px solid rgb(255,255,255);
}

.tableContentAnpr .defaultTr:hover{  
    background: rgb(228,245,252) !important;
    border:2px solid rgb(255,255,255);
}

.tableContentAnpr .selectTr{  
    background: rgb(228,245,252) !important;
    border:2px solid rgb(58,202,255);
}


.anprLogsTablePage
{
    bottom:0px;
    text-align:right;
    width:100%;
    height:30px;
    font-size: 14px;
    line-height: 30px;
    background: rgb(136,136,136);
    color:black;
}

.anprLogsTableTitle
{
    bottom:0px;
    text-align:center;
    width:100%;
    height:30px;
    font-size: 14px;
    line-height: 30px;
    background: rgb(34,171,223);
    color:white;
}

.anprLogsTableDiv
{
    /*max-height: 400px;*/
    border: solid;
    border-width: 0px 1px 0px 1px;
}

.anprLogsTableBoxAll
{
    margin-left: 20px;/*same with anprLogsTableLogs margin-left*/
    bottom:0px;
    height:30px;
    line-height: 30px;
}

.anprLogsTableLogs
{
    margin-left: 20px;
    margin-right: 20px;
}

.anprLogsTableLogs .TableStyle
{
    border: 0px;
}

.anprLogsImage{
     /*margin-top: 2px; 
     margin-left: 2px; 
     margin-right: 2px;*/
     width:100%;
     height:98%;
}

.anprTd{
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    margin-bottom: 1%;
}

.anprSmallImg{
    height:100px;
}


.anprTableContent{
    min-width:400px; 
    margin-left:490px; 
    max-width:1000px; 
    min-height:400px;
}

.videoToolBar
{
    height:40px;
    position:relative;
    width: 100%;
    margin-bottom: 10px;
    /*background-color: rgb(65,70,76);*/
}

.videoToolBar .iconButton{
    cursor:pointer;
    position:absolute;
    width:35px;
    height:34px;
}

.videoToolBar .imgNode{
    height:27px;
}

.anprImgDate {
    /*transform:scale(0.8,1); 
    transform-origin:left;*/
}

.anprImgDate label{
    color:white; 
    text-align: left; 
    margin-left: 5px; 
    font-size: 12px;
}

.heatMapSearchDiv
{
    height: 540px;
    width: 94%;
    margin-left:3%;
    margin-right:3%;
    margin-top:10px;
    position: absolute;
}

.heatmap
{
    height: 400px;
    position: relative;
    text-align: center;
    width: 570px;
    margin: 10px auto 20px;
}

.tooltip 
{
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.8);
    color: white;
    font-size: 14px;
    padding: 5px;
    line-height: 18px;
    display: none;
    z-index: 99;
}

.heatmap-canvas, .heatMapTimeCanvas
{
    width: 100%;
    height:100%;
}

/*check box*/
.myCheckbox{
    cursor: pointer;
    padding: 0px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    /*margin-top: -3px;*/
    content: url("/image/setting/checkbox-unchecked.png");
}

.myCheckbox:hover{
    content: url("/image/setting/checkbox-unchecked-hover.png");
}

.myCheckbox:disabled{
    content: url("/image/setting/checkbox-unchecked-disable.png");
}

.myCheckbox:checked{
    content: url("/image/setting/checkbox-checked.png");
}

.myCheckbox:checked:disabled{
    content: url("/image/setting/checkbox-checked-disable.png");
}

.myCheckbox:indeterminate
{
    content: url("/image/setting/checkbox-partiallychecked.png");
}

.myCheckbox:indeterminate:hover
{
    content: url("/image/setting/checkbox-partiallychecked-hover.png");
}

.myCheckbox:indeterminate:disabled
{
    content: url("/image/setting/checkbox-partiallychecked-disable.png");
}

/* S-checkbox radio */
.myCheckboxRadio {
    cursor: pointer;
    padding: 0px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    content: url("/image/setting/radio-unchecked.png");
}
.myCheckboxRadio:hover{
    content: url("/image/setting/radio-unchecked-hover.png");
}
.myCheckboxRadio:checked{
    content: url("/image/setting/radio-checked.png");
}
/* E-checkbox radio */

.retrieveLock
{
    height:22px;
    width:14px;
}

.retrieveUnlock
{
    height:22px;
    width:14px;
}

.retrievePlay
{
    height:18px;
    width:18px;
}

.retrieveHightLight
{
    color:red;
}

#content /*preview.html*/
{
    /*margin:0 0 0 250px;*/
    height:100%;
    background:#000;
    z-index:0;
    position: absolute;
    left:219px;
    top:0px;
}

.ptz-preset-fixed
{
    height:250px;
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
}
.ptz-preset-auto{
    height:auto;
    width:100%;
    overflow-y:auto;
    overflow-x:hidden;
}

.ptz-video-slider-parent{
    /*width: 236px;*/   
    width: 85%;
    /*background-color: #f2f2f2;*/
    background-color: white;
}

.video-slider-parent{
    /*width: 236px;*/   
    width: auto;
    border: 1px solid #d4d4d4;
    margin: 5px;
    /*background-color: #f2f2f2;*/
}

.video-slider-parent-tmp{
    width: 85%;     
    border: 1px solid rgb(128,128,128);
    margin: 5px;
    margin-left:15px;
    /*background-color: #f2f2f2;
    background-color: white;*/
}

.ptz-area{
    position: relative;
    /*width: 238px;*/
    width: auto;
    height:138px;
    margin: 5px;
}
.ptz-table{
    /*border: 1px solid #d4d4d4;*/
    border-collapse: collapse;
    position: absolute;
    text-align:center;
}

.ptz-btn{
    width: 33.33%;
    height: 33.33%;
    line-height: 0px;
    /*background-color: #f2f2f2;*/
    background-color: white;
    cursor: pointer;
    /*border-right:5px dotted #d4d4d4;
    border-bottom:5px dotted #d4d4d4; */
    text-align: center;
}

.ptz-preset{
    width: 33.33%;
    height: 50%;
    line-height: 0px;
    background-color: rgb(224,224,224);
    border: 1px solid rgb(128,128,128);
    text-align: center;
    cursor: pointer;
}

.presetTable1{
    width: 100%;
    /*background-color: #eee;*/
    background-color: white;
}
.presetTable1 td{
    /*text-align: left;*/
    line-height: 20px;
    padding: 5px;
    color:#777;
}

.preset_num{
    font-size: 12px;    
    color: grey;     
    font-family: arial, sans-serif;
}
.preset_num_black{
    font-size: 12px;    
    color: black;     
    font-family: arial, sans-serif;
}

.preset_description_p {
    font-size: 12px;
    color: grey;
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
}
.preset_description_p_black{
    font-size: 12px;
    color: black;
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
}

.preset_description_p_display_hide{
    display:none;
}
.preset_describe_input{
    border: 0px;
    padding-left:0px;
    background-color: transparent;
    width: 60px;
    font-size: 12px;
    color:grey;
    /*-moz-user-select:none;*/
}
.preset_describe_p{
    border: 0px;
    padding-left:0px;
    background-color: transparent;
    width: 65px;
    font-size: 12px;
    color:grey;
    display:none;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select:text;
    user-select: text;
}
.preset_describe_input_black{
    border: 0px;
    padding-left:0px;
    background-color: transparent;
    width: 60px;
    font-size: 12px;
    color:black;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.preset_describe_input_display_hide{
    display:none;
}
.conmon_sty {
    cursor: pointer;
    width: 14px;
    background: center no-repeat;
    background-image: none;
    display: inline-block;
    height: 14px;
}
/*preset*/
.disableSetPreset{
    background-image: url("../image/preview/ptz/save-disable.png");
    padding-left:5px;
}
.disableDelPreset{
    background-image: url("../image/preview/ptz/del-disable.png");
    padding-left:5px;
}
.disableCallPreset{
    background-image: url("../image/preview/ptz/preset-disable.png");
    padding-left:5px;
}
.setpreset{
    background-image: url("../image/preview/ptz/save.png");
    padding-left:5px;
}
.delpreset{
    background-image: url("../image/preview/ptz/del.png");
    padding-left:5px;
}
.callpreset{
    background-image: url("../image/preview/ptz/preset.png");
    padding-left:5px;
}
.setpreset:hover{
    background-image: url("../image/preview/ptz/save-1.png");
    padding-left:5px;
}
.delpreset:hover{
    background-image: url("../image/preview/ptz/del-1.png");
    padding-left:5px;
}
.callpreset:hover{
    background-image: url("../image/preview/ptz/preset-1.png");
    padding-left:5px;
}
/*patrol*/
.disableSetPatrol{
    background-image: url("../image/preview/ptz/set-disable.png");
    padding-left:8px;
}
.disableDelPatrol{
    background-image: url("../image/preview/ptz/del-disable.png");
    padding-left:5px;
}
.disableCallPatrol{
    background-image: url("../image/preview/ptz/play-disable.png");
    padding-left:5px;
}
.setpatrol{
    background-image: url("../image/preview/ptz/set.png");
    padding-left:8px;
}
.delpatrol{
    background-image: url("../image/preview/ptz/del.png");
    padding-left:5px;
}
.callpatrol{
    background-image: url("../image/preview/ptz/play-1.png");
    padding-left:5px;
}
.callpatrol_change{
    background-image: url("../image/preview/ptz/stop-1.png");
    padding-left:5px;
}

.setpatrol:hover{
    background-image: url("../image/preview/ptz/set-1.png");
    padding-left:8px;
}
.delpatrol:hover{
    background-image: url("../image/preview/ptz/del-1.png");
    padding-left:5px;
}
/*pattem*/
.playpattem{
    background-image: url("../image/preview/ptz/play-1.png");
    padding-left:5px;
}
.playpattem_change{
    background-image: url("../image/preview/ptz/stop-1.png");
    padding-left:5px;

}
.disablePlayPattem{
    background-image: url("../image/preview/ptz/play-disable.png");
    padding-left:5px;
}
.disableDelPattem{
    background-image: url("../image/preview/ptz/del-disable.png");
    padding-left:5px;
}
.disableRecordPattem{
    background-image: url("../image/preview/ptz/normal-disable.png");
    padding-left:8px;
}
.delpattem{
    background-image: url("../image/preview/ptz/del.png");
    padding-left:5px;
}
.recordpattem{
    background-image: url("../image/preview/ptz/normal.png");
    padding-left:8px;
}
.recordpattem_change{
    background-image: url("../image/preview/ptz/normal-2.png");
    padding-left:8px;
}
.delpattem:hover{
    background-image: url("../image/preview/ptz/del-1.png");
    padding-left:5px;
}
.recordpattem:hover{
    background-image: url("../image/preview/ptz/normal-2.png");
    padding-left:8px;
}
.display-hide{
    display:none;
}
.markicon{
    padding-left: 12px;
}

.tour_set_title{
    width:100%;
    margin:auto;
    /*padding-bottom:5px;*/
}

.set_path_font{
    font-size:13px;
    width:50px;
    margin-left:12px;
    color:grey;
}

.set_content_icon{
    margin-right:10px;
}
.set_a{
    font-size:12px;
    display:inline;
    margin-left:13px;
    color:grey;
}
.tabs_div_sty{
    width:185px;
    overflow-y:auto;
    overflow-x:hidden;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #ddd;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:rgb(221, 221, 221);
    border-top:none;
}
.tour_set_tab_sty{
    width:185px;
}
.serial_num{
    font-size:12px;
    width:12px;
    color:grey;
    margin:2px;
}
.content_select{
    margin:2px;
    /*width:45px;*/
    width:50px;
    color:grey;
    height:18px;
    background: url(/image/preview/select_arrow.png) no-repeat scroll right 4px center white;
    background-size: 11px 11px !important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
}
.select_speed{
    border:1px solid grey;
    /*width:45px;*/
    width:50px;
    background-color:white;
    height:18px;
    color:grey;
    background: url(/image/preview/select_arrow.png) no-repeat scroll right 4px center white;
    background-size: 11px 11px !important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
}
.tour_content_ck{
    background:#eee;
    border:none;
    outline:none;
}
.content_input{
    border:1px solid grey;
    width:45px;
    background-color:white;
    color:grey;
    height:16px;

}
.opt_color_black{
    color:black;
}
.opt_color_grey{
    color:grey;
}
.tour_set{
    display:none;
}
.tour-save-sty{
    display:none;
}
.button {
    background: rgb(34,171,223);
    color: white;
    height: 28px;
    cursor: pointer;
    border: 1px solid #a09e9e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    font-size: 12px !important;
    width: 60px !important;
    margin-left: 33px;
    margin-bottom: 20px;
}
.ptz_fun_box{
    height:52px;
}
.ptz_fun_box_ptz{
    height:42px;
}
.borderstyle_show{
    border-bottom:1px solid #6AF;
    border-top:1px solid #6AF;
}
.borderstyle_hide{
    border:none;
    outline:none;
}
.tour_content{
    border:none;
    outline:none;
}
.fishchan_select{
    margin:2px;
   /* width:160px;*/
    width:98%;
    color:grey;
    height:20px;
    transform: unset;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
}
.fish_div{
    height: 30px;
    margin-top: 15px;
    margin-left: 10px;
    display: none;
    width:90%;
}
.fish_div_span{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align:middle;
    text-align:center;
}

.liveViewPtz{
    width: 25%;
    height: 50%;
    line-height: 0px;
    background-color: rgb(224,224,224);
    border: 1px solid rgb(128,128,128);
    text-align: center;
    cursor: pointer;
}

.liveViewPtz img{
    height:20px;
}

.noteTipNormal{
    width:12px;
    height:12px;
    background: url("../image/setting/smart_analysis_normal.png");
}

.noteTipBlue{
    width:12px;
    height:12px;
    background: url("../image/setting/smart_analysis_blue.png");
}

.notTipLabe{
    display:none;
    color: rgb(23,164,217);
}

.channel-tip{
    display:none;
}

.channel-tip div{
    width:12px;
    height:12px;
    background: url("../image/setting/tip_red.png");
}

.channel-tip label{
    color: rgb(255,30,16);
}

.warning-tip{
    display:none;
    height: 19px;
	z-index: 99;
	/*margin-top: -2px;*/
    background: white;
    position: absolute;
    border: solid #e64c49;
    border-width: 0px 1px 1px 1px;
	text-align: left !important;
}

.warning-tip label{
    float:left;
    color: #e64c49 !important;
}

.warning-input{
    border: solid #e64c49;
    border-width: 1px 1px 1px 1px;
    background: #eadcd9;
}

.warning-input input{
    border-color: #e64c49 #a9a9a9;
    background: #eadcd9;
}

.warning-input select{
    border-color: #e64c49 #a9a9a9;
    background: #eadcd9;
}

.warning-input:hover{
    border-color: #e64c49;
}

.play-btn
{
    height:18px;
    width:18px;
}

.wait-page
{
    position:relative;
    top:30%;
    height:30px;
    width:100%;
    text-align:center;
    color:#FFFFFF;
}

.wait-page-gif
{
    margin:0 auto;
    height:65px;
    width:65px;
    background: url("../image/public/wait.gif");
}

.wait-page-tip
{
    height:30px;
    width:100%;
    font-size:20px;
    color:#FFFFFF;
}

.text-hide
{
    width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
}

.index-logo
{
    height: 60px;
    background:rgb(54,61,67);
    position:relative;
    border-left:1px solid rgb(54,61,67);
}

.index-logo div
{
    height:32px;
    width:116px;
    position:absolute;
    top:10px;
    left:30px;
    background:url(/image/index/logo.png);
    background-size: 116px 32px;
}

textarea {
    outline: none;
    resize: none;
    border: 1px solid #a9a9a9;
    overflow: hidden;
    padding-left: 3px;
    white-space:pre-wrap; /* css3.0 */
    white-space:-moz-pre-wrap; /* Firefox */
    white-space:-o-pre-wrap; /* Opera 7 */
    word-wrap:break-word; /* Internet Explorer 5.5+ */
}

textarea:hover, 
textarea:active {
    border-color:#BFEFFF;
}

textarea[disabled="disabled"]{
    background:rgb(219,219,219);
}
textarea[disabled=""]{
    background:rgb(219,219,219);
}
textarea[disabled="disabled"]:hover{
    border: 1px solid #a9a9a9 !important;
    background:rgb(219,219,219);
}
.url-text {
    outline: none;

    border: 1px solid #a9a9a9;
    width: 277px;
    height: 53px;
    background-color: #fff;

    overflow: auto;
    padding-left: 3px;

    white-space:pre-wrap; /* css3.0 */
    white-space:-moz-pre-wrap; /* Firefox */
    white-space:-o-pre-wrap; /* Opera 7 */
    word-wrap:break-word; /* Internet Explorer 5.5+ */
}

.url-text:hover, 
.url-text:active {
    border-color:#BFEFFF;
}

.retr-table-page
{
    bottom:0px;
    text-align:right;
    width:100%;
    height:30px;
    font-size: 14px;
    line-height: 30px;
    background: rgb(136,136,136);
    color:black;
}

.retr-table-page .total-item
{
    margin-right: 5px;
}

.retr-table-page .total-item label
{
    color:black !important;
    margin-right:60px;
}

.retr-table-page .first-page
{
    cursor:pointer;
    margin-right: 20px;
}

.retr-table-page .pre-page
{
    cursor:pointer;
    margin-right: 10px;
}

.retr-table-page .input-page
{
    text-align:center !important;
    width:140px !important;
}

.retr-table-page .next-page
{
    cursor:pointer;
    margin-left: 10px;
    margin-right: 10px;
}

.retr-table-page .last-page
{
    cursor:pointer;
    margin-left: 5px;
    margin-right: 30px;
}

.retr-table-page .goto-page
{
    cursor:pointer;
    margin-right: 40px;
    margin-left: 5px;
}

.retr-table-page .goto-page input
{
    height:20px;
    min-width:40px !important;
}

.pb-player
{
    float:left;
    width:460px;
}

.pb-player .text-info
{
    margin-left:5px;
}

.pb-player .iframe-pic
{
    height:260px;
    width:100%;
}

.iframe-pic img
{
    width:100%;
    height:100%;
}

.ptz-limit-div {
    width: 365px;
    margin-top: 10px;
    border: 1px solid #808080;
}

.presetTable1 .ptz-limit {
    width: 33.33%;
    height: 23px;
    color: white;
    background-color: #0aa9e3;
    border: solid rgb(128,128,128);
    border-width: 0px 0px 1px 0px;
    text-align: center;
}

.ptz-limit-div tr {
    cursor: default;
}

.ptz-limit-div td:first-child div {
    padding-left: 20px;
}

.ptz-limit-div tr td:not(:first-child) {
    text-align: center;
}

.ptz-limit-div tr:nth-child(5) td {
    text-align: right; 
    padding-right: 20px;
}

.ptz-limit-div label {
    color: black;
}

.ptz-limit-div label[disabled="disabled"] {
    color: rgb(153, 153, 153);
}

.ptz-limit-set {
    background-image: url("../image/preview/ptz/save.png");
    padding-left: 5px;
}

.ptz-limit-set:hover {
    background-image: url("../image/preview/ptz/save-1.png");
    padding-left: 5px;
}

.ptz-limit-del {
    background-image: url("../image/preview/ptz/del.png");
    padding-left: 5px;
}

.ptz-limit-del:hover {
    background-image: url("../image/preview/ptz/del-1.png");
    padding-left: 5px;
}

.anpr-auto-backup-content .firstSpan {
    width: 200px;
}

.anpr-auto-backup-content .secondSpan {
    width: 260px;
}