/*
	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);*/
}
.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 .Disable{  
}
.tableContent .Disable td{ 
	color:rgb(200,200,200);
}
.tableContent td{  
	padding:0;  
	border:solid rgb(209,209,209); 
	border-width: 0px 2px 0px 2px;
	text-align:center;
	word-break: break-all;
	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;
	
}
.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%;
	/*background:url(/image/playback/timebar/time_scale.png) no-repeat;
	background-size: 100% 100%;*/
}

.timeBar .timeScale{
	height:20px;
	width:100%;
	position:absolute;
	/*background:url(/image/playback/timebar/time_scale.png) no-repeat;
	background-size: 100% 100%;*/
}
.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:-10px;
	position:absolute;
	text-align: center;
	display:none;
}

.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 .record{
	height: 30px;
	width:100%;
	position: absolute;
	top: 15px;
}
.timeBar .record .evt{
	background:rgb(255, 0, 0);
	height:100%;
	position: absolute;
}

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

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

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

.timeBar .event .motion{
	background:rgb(82, 202, 78);
	height: 7px;
	position: absolute;
	top: 5px;
}
.timeBar .event .alarm{
	height: 6px;
	background:rgb(253, 104, 39);
	position: absolute;
	top: 12px;
}
.timeBar .event .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: 10001;
}
.vslider-slider-fr{
	height:16px;
	background: rgb(34,171,223);
	/*background-color: #e9e7bf;
	background-color: #85d5a0;*/
	position: absolute;
	left: 0px;
	top:2px;
	z-index: 10002;
}
.vslider-slider-pre{
	height:20px;
	width: 5px;
	background-color: #777;
	position: absolute;
	left: 0px;
	top:0px;
	z-index: 10003;
	/*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*************/
.fully_display{
	position: absolute;
	display: none;
	padding: 10px;
	background-color:rgb(24,165,218);
	box-shadow: 5px 5px 5px #e7e7e7;
	z-index:100;
	border-radius:5px 5px 5px 5px;
}
.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 li .original{
	object-fit: contain;
	background-color: black;
}
.h5Player li .playbackFullScreen{
	object-fit: fill;
}
.h5Player li .imageMotion{
	width: 35px;
	height: 35px;
	z-index: 9999;
	position: absolute;
	top: 10px;
	right: 35px;
	background-color:transparent;
	display: none;
}
.h5Player li .imageRecord{
	width: 35px;
	height: 35px;
	z-index: 9999;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color:transparent;
	display: none;
}
.h5Player li .imageVca{
	width: 35px;
	height: 35px;
	z-index: 9999;
	position: absolute;
	top: 6px;
	right: 60px;
	background-color:transparent;
	display: none;
}
.h5Player li .streamInfo{
	width: 150px;
	height: 80px;
	z-index: 1;
	position: absolute;
	background-color:transparent;
	right: 1px;
    bottom: -15px;
	display: none;
	font-size: 12px;
}
.h5Player li .streamInfo span{
	color: white;
}

.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");
}

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

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

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

.retrieveHightLight
{
	color:red;
}