/* ====================================================================================================================== */
/* ==================================================== theme.css ===================================================== */
/* ====================================================================================================================== */
/* Waiting control */


 /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
/* @group Toolbar */
body {
	-webkit-text-size-adjust:95%;
	background:#333;
}

body .ui-li .ui-li-desc {
 white-space: normal;
 }
 
 div[data-role="content"]{
	padding-bottom:15px; 
 }
 
 
.toolbar {
	font-size:14px;
}
 

/* @group Info */
.info {
	position:absolute;
	top:50px;
	right: 0;
	left:0px;
    background: #404142;
    text-align: center;
    color: #fff;
    padding: 15px;
}
.progress {
	position:absolute;
	top:300px;
	margin-top:20px;
	left:0px;
	right:0px;
	width:auto;
	height:auto;
    background: transparent;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #f09030;
    font-weight: bold;
}
/* @end */
   
/* @group Mini Label */
ul li small {
    color: #64c114;
    font: 17px "Helvetica Neue", Helvetica;
    text-align: right;
   
    white-space: nowrap;
    overflow: hidden;
    display: block;
    width: 23%;
    float: right;
    padding: 0;
}
ul li.arrow small {
    padding: 0 15px;
}
ul li small.counter {
	position:absolute;
	right:5%;
    font-size: 17px;
    line-height: 13px;
    font-weight: bold;
    background: rgba(0,0,0,.15);
    color: #fff;
    -webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	-khtml-border-radius: 11px;
	border-radius: 11px;
    padding: 5px 10px 5px 10px;
    display: block;
    width: auto;
    margin-top: -32px;
    -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	-khtml-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	box-shadow: rgba(255,255,255,.1) 0 1px 0;
}
ul li.arrow small.counter {
    margin-right: 15px;
}
/* @end */

ul li input[type="text"],
ul li input[type="password"],
ul li input[type="tel"],
ul li input[type="number"],
ul li input[type="search"],
ul li input[type="email"],
ul li input[type="url"],
ul li textarea,
ul li select {
    color: #aaa;
    background: transparent url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
    border: 0;
    padding: 2px;
    margin-left: 0px;
    width: 100%;
}

/* @group Edge to edge */
#jqt ul.edgetoedge {
    border-width: 1px 0;
    margin: 0;
    padding: 0;
}
/*
ul.edgetoedge {
	position:relative;
	right: 0;
	left:0px;
	overflow:hidden;
    border-width: 1px 0;
	padding-top:10px;
	padding-bottom:10px;
}
*/
ul.edgetoedge li {
	background: #444;
    border-bottom: 2px solid #000;
    border-top: 1px solid #8a8b8d;
    margin-bottom: -6px;
	padding-top:2px;
	padding-bottom:2px;
	/*padding:2px;*/
}
li.arrow{
/*
	margin-left:10px;
	margin-right:10px; 
	padding-left:10px;
	padding-right:10px;
	*/
}

.noarrow{
	background: transparent url(data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}

ul.edgetoedge li.arrow {
    background-color: #404142 !important;
    background-image: url(../img/chevron.png) !important;
    background-position: right center;
    background-repeat: no-repeat;
}

ul.edgetoedge li.sep {
 
    border-bottom: 1px solid #111113;
    border-top: 1px solid #666;
    color: #3e9ac3;
    font-size: 12px;
    margin: 1px 0 0 0;
}
/*
ul.edgetoedge li em {
    font-weight: normal;
    font-style: normal;
}
*/
textarea.label{
	min-width:160px; 
	rows:2;
	background:#666;
}

em.time{
	font-weight: bold;
    font-style: normal;
	margin-left:5px;
	margin-top:15px;
	font-size: 12px;
	vertical-align:top;
}
/* @end */


input[type='submit'] {
	 
    display: block;
    font-size: inherit;
    font-weight: inherit;
    padding: 0px;
}

/*-------------------------*/

 

.the_menu {
	display:block;
}
.the_menu li a {
	font-weight:bold;
	text-decoration:none; 
}

.the_menu li a:hover {
	font-weight:bold;
	color: #CE8924;
}
	 
.zoom_menu li{
	width:60px;
	height:30px;
}

/* ====================================================================================================================== */
/* ==================================================== digivod.css ===================================================== */
/* ====================================================================================================================== */


.tdSelected{
	background:#667766;  
	opacity:.3;
}

.td0{
	background:transparent;  
	opacity:1;
}


.moveNext{text-decoration: none;}
.movePrev{	text-decoration: none;}

.messagePopup
{
	background:#585656;
	padding:10px;
}


.renderer {
    position: absolute;
    width: 100%;
    height: 100%;
}

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

.styled-select > option{
	margin:4px;
	line-height:26px;
}
.styled-select:hover option:hover{
	color: #ff0000;
}

#wrapper td {
    vertical-align: middle;
    text-align: center;
}

#ptzControlBar {
    position: absolute;
    z-index: 999;
    left: 0px;
    right: 0px;
}

.ptzMarker {
    position: absolute;
    top: 0%;
    left: 0px;
    margin-left: -12px;
    margin-top: -10px;
    z-index: 1;
    display: none;
}

#centerMarker {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    margin-left: -7px;
    margin-top: -7px;
}

#preset {
    position: fixed;
    top: 45px;
    height: 150px;
    right: 1px;
    z-index: 11;
    overflow: auto;
    background: #444;
    opacity: .8
}
/* -------------------------------------- System State -------------------------------------*/

.systemstate-block{
    color:white;
	padding: 2% 5%;
	font-weight:semibold;
	border: 1px solid white;
	margin:3px;
	margin-bottom:10px;
}
.systemstate-name
{
  margin-left:5px;
}
.systemstate-count
{
  float:right;
}
.systemstate-disabled
{
	opacity:.15;
}
.systemstate-header
{
	color:white;
	font-size:20px;
	text-align:center;
}

.multicolumns
{
	float:left;
	width:50%;
}

.OkGreen 
{
    background: -webkit-linear-gradient(right, green , #5cae5c); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, green, #5cae5c); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, green, #5cae5c); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, green , #5cae5c); /* Standard syntax (must be last) */
}
.ErrorRed 
{
    background: -webkit-linear-gradient(right, red, #ff8282); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, red, #ff8282); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, red, #ff8282); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, red, #ff8282); /* Standard syntax (must be last) */
}
.DisabledBlue 
{
    background: -webkit-linear-gradient(right, blue, #8282ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, blue, #8282ff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, blue, #8282ff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, blue, #8282ff); /* Standard syntax (must be last) */
}
.ChangedOrange 
{
    background: -webkit-linear-gradient(right, orange, #ffd485); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, orange, #ffd485); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, orange, #ffd485); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, orange, #ffd485); /* Standard syntax (must be last) */
}


/*--------------------------------------- Buttons ----------------------------------------- */
 
span.counter {
	right:5%;
    font-size: 17px;
    line-height: 13px;
    font-weight: bold;
    background: rgba(0,0,0,.15);
    color: #fff;
    -webkit-border-radius: 11px;
	-moz-border-radius: 11px;
	-khtml-border-radius: 11px;
	border-radius: 11px;
    padding: 5px 10px 5px 10px;
    display: block;
    width: auto;
    -webkit-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	-moz-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	-khtml-box-shadow: rgba(255,255,255,.1) 0 1px 0;
	 box-shadow: rgba(255,255,255,.1) 0 1px 0;
}

#btnOk {
    position: absolute;
    bottom: 5px;
    display: block;
    z-index: 100;
    padding: 0 28px;
    margin-bottom: 5px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    background: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
                           -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/btnOk.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/btnOk.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/btnOk.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/btnOk.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/btnOk.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/btnOk.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/btnOk.png) !important; /*IE9*/
    background-repeat: no-repeat;
    background-position: 50% 50%;	
}

.btnOk {
    position: absolute;
    bottom: 5px;
    display: block;
    z-index: 100;
    padding: 0 28px;
    margin-bottom: 5px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    background: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
                           -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/btnOk.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/btnOk.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/btnOk.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/btnOk.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/btnOk.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/btnOk.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/btnOk.png) !important; /*IE9*/
    background-repeat: no-repeat;
    background-position: 50% 50%;	
}

.cancel {
    position: relative;
    display: block;
    z-index: 100;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/Cancel.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/Cancel.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/Cancel.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/Cancel.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/Cancel.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/Cancel.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/Cancel.png) !important;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#alertFilterPopup
{
	background-color:#373737;
}

#alertFilterPopup.active
{
	background-color:#FA9C00;
}

#btnEnablePtz {
    position: relative;
    display: inline-block;
    z-index: 1;
    margin-right: 2px;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/btn-ptz.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/btn-ptz.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/btn-ptz.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/btn-ptz.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/btn-ptz.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/btn-ptz.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/btn-ptz.png) !important; /* IE9 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#btnClosePtz 
{
    position: relative;
    display: inline-block;
    z-index: 1; 
	 
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/Cancel.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/Cancel.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/Cancel.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/Cancel.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/Cancel.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/Cancel.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/Cancel.png) !important; /* IE9 */
    background-repeat: no-repeat !important;
    background-position: 50% 50%;
}

#btnClosePtz.active
{
	background-color: #FA9C00;
} 

.btnBackward 
{
    position: relative;
    display: inline-block;
    z-index: 1;
    margin-right: 2px;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: #444;
    background-image: url(../img/back.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/back.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/back.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/back.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/back.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/back.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/back.png) !important; /* IE9 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.btnBackward.active
{
	background-color: #FA9C00;
}


.btnRefresh {
    position: relative;
    display: inline-block;
    z-index: 1;
    right: 2px;
    margin-right: 2px;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/refresh.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/refresh.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/refresh.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/refresh.png), -khtml-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/refresh.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/refresh.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/refresh.png) !important; /* IE9 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.btnRefresh.active 
{
    background-color: #FA9C00;
}

#btnIoPortsRefresh {
    position: relative;
    display: inline-block;
    z-index: 1;
    right: 2px;
    margin-right: 2px;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/refresh.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/refresh.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/refresh.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/refresh.png), -khtml-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/refresh.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/refresh.png), linear-gradient(top, #555, #333);
    background-image: url(../img/refresh.png); /* IE9 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#btnIoPortsRefresh.active 
{
 background-color: #FA9C00;
}


#btnShowAlertPanel {
    position: relative;
    display: inline-block;
    z-index: 1;
	margin-top: 1px;
    margin-right: 2px;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: #444;
    background-image: url(../img/Alert.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/Alert.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/Alert.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/Alert.png), -khtml-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/Alert.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/Alert.png), linear-gradient(top, #555, #333);
    background-image: url(../img/Alert.png); /* IE9 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#btnShowAlertPanel.active 
{
 background-color: #FA9C00;
}

#btnHideAlertPanel 
{
    position: relative;
    display: inline-block;
    z-index: 1; 
	 
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/Cancel.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)) !important; /* Saf4+, Chrome */
    background-image: url(../img/Cancel.png), -webkit-linear-gradient(top, #555, #333) !important; /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/Cancel.png), -moz-linear-gradient(top, #555, #333) !important; /* FF3.6 */
    background-image: url(../img/Cancel.png), -ms-linear-gradient(top, #555, #333) !important; /* IE10 */
    background-image: url(../img/Cancel.png), -o-linear-gradient(top, #555, #333) !important; /* Opera 11.10+ */
    background-image: url(../img/Cancel.png), linear-gradient(top, #555, #333) !important;
    background-image: url(../img/Cancel.png) !important; /* IE9 */
    background-repeat: no-repeat !important;
    background-position: 50% 50%;
}

#btnHideAlertPanel.active
{
	background-color: #FA9C00;
} 


#btnZoomIn {
    position: relative;
    display: inline-block;
    z-index: 1; 
	 
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-color: #444;
    background-image: url(../img/ptz_in.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/ptz_in.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/ptz_in.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/ptz_in.png), -ms-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/ptz_in.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/ptz_in.png), linear-gradient(top, #555, #333);
    background-image: url(../img/ptz_in.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* #btnZoomIn.active 
{
    background-color: #FA9C00;
} */

#btnZoomOut {
    position: relative;
    display: inline-block;
    z-index: 1; 
	 
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/ptz_out.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/ptz_out.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/ptz_out.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/ptz_out.png), -ms-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/ptz_out.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/ptz_out.png), linear-gradient(top, #555, #333);
    background-image: url(../img/ptz_out.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* #btnZoomOut.active
{
     background-color: #FA9C00;
} */

.active {
    background-color: #FA9C00;
}

#btnPresets {
    position: relative;
    display: inline-block;
	 
    z-index: 1;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/ptz_preset.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/ptz_preset.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/ptz_preset.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/ptz_preset.png), -ms-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/ptz_preset.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/ptz_preset.png), linear-gradient(top, #555, #333);
    background-image: url(../img/ptz_preset.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.btnPresets 
{
    position: relative;
    display: inline-block;
	 
    z-index: 1;
    padding: 0 28px;
    height: 30px;
    border: 1px solid #222;
    border-top: 1px solid #fff;
    border-color: rgba(255, 255, 255, .3);
    border-bottom: 1px solid #888;
    background-color: #444;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background-image: url(../img/ptz_preset.png), -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* Saf4+, Chrome */
    background-image: url(../img/ptz_preset.png), -webkit-linear-gradient(top, #555, #333); /* Chrome 10+, Saf5.1+ */
    background-image: url(../img/ptz_preset.png), -moz-linear-gradient(top, #555, #333); /* FF3.6 */
    background-image: url(../img/ptz_preset.png), -ms-linear-gradient(top, #555, #333); /* IE10 */
    background-image: url(../img/ptz_preset.png), -o-linear-gradient(top, #555, #333); /* Opera 11.10+ */
    background-image: url(../img/ptz_preset.png), linear-gradient(top, #555, #333);
    background-image: url(../img/ptz_preset.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

 
#btnPresets.active 
{
    background-color: #FA9C00;
}


/*----------------------------------------Player ------------------------------------------*/


table.buttons2rows {
    border: 0px;
    display: none;
}

table.buttons2rows td {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.buttons1row { border: 0px; }

table.buttons1row td {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table td.filler {
    padding-left: 5px;
    padding-right: 5px;
}

@media only screen and (max-width: 621px) {
    table.buttons2rows { display: table; }

    table.buttons1row { display: none; }
}
 
/*  @media only screen and (max-width: 1200px) {
    .alert-panel-rel { display: none; }
	.alert-panel-rel { display: block; }
} */
 
 
 
.ioPortButtonActive { background-color: #e4ba85; }

.btnPlayerGoto {
    display: block;
    width: 40px;
    height: 27px;
    background-image: url(../img/buttons/Watch.png);
}

.btnPlayerGoto.btnActive { background-image: url(../img/buttons/WatchOver.png); }

.btnPlayerForward {
    display: block;
    width: 40px;
    height: 27px;
    background-image: url(../img/buttons/Forward40x27.png);
}

.btnPlayerForward.btnActive { background-image: url(../img/buttons/ForwardOver40x27.png); }

.btnPlayerForward.btnDown { background-image: url(../img/buttons/ForwardDown40x27.png); }

.btnPlayerLive {
    display: block;
    width: 40px;
    height: 27px;
    background-image: url(../img/buttons/Live40x27.png);
}

.btnPlayerLive.btnActive { background-image: url(../img/buttons/LiveOver40x27.png); }

.btnPlayerLive.btnDown { background-image: url(../img/buttons/LiveDown40x27.png); }

.btnPlayerPause {
    display: block;
    width: 40px;
    height: 27px;
    background-image: url(../img/buttons/Pause.png);
}

.btnPlayerPause.btnActive { background-image: url(../img/buttons/PauseOver.png); }

.btnPlayerPause.btnDown { background-image: url(../img/buttons/PauseDown.png); }

.btnPlayerBackward {
    display: block;
    background-image: url(../img/buttons/Backward40x27.png);
    width: 40px;
    height: 27px
}

.btnPlayerBackward.btnActive { background-image: url(../img/buttons/BackwardOver40x27.png); }

.btnPlayerBackward.btnDown { background-image: url(../img/buttons/BackwardDown40x27.png); }

.btnPlayerNextAlert {
    display: block;
    background-image: url(../img/buttons/NextAlert.png);
    width: 40px;
    height: 27px
}

.btnPlayerNextAlert.btnActive { background-image: url(../img/buttons/NextAlertOver40x27.png); }

.btnPlayerPrevAlert {
    display: block;
    background-image: url(../img/buttons/PrevAlert.png);
    width: 40px;
    height: 27px
}

.btnPlayerPrevAlert.btnActive { background-image: url(../img/buttons/PrevAlertOver.png); }

.btnPlayerSkipSingle_Prev {
    display: block;
    background-image: url(../img/buttons/SkipSingleBackward.png);
    width: 40px;
    height: 27px
}

.btnPlayerSkipSingle_Prev.btnActive { background-image: url(../img/buttons/SkipSingleBackwardOver.png); }

.btnPlayerSkipSingle {
    display: block;
    background-image: url(../img/buttons/SkipSingleForward.png);
    width: 40px;
    height: 27px
}

.btnPlayerSkipSingle.btnActive { background-image: url(../img/buttons/SkipSingleForwardOver.png); }

.btnPlayerSkip_-10 {
    display: block;
    background-image: url(../img/buttons/Backward10.png);
    width: 40px;
    height: 27px
}

.btnPlayerSkip_-10.btnActive { background-image: url(../img/buttons/Backward10Over.png); }

.btnPlayerSkip_10 {
    display: block;
    background-image: url(../img/buttons/Forward10.png);
    width: 40px;
    height: 27px
}

.btnPlayerSkip_10.btnActive { background-image: url(../img/buttons/Forward10Over.png); }

/**
 *
 * Main container
 *
 */
#addToHomeScreen {
	z-index:9999;
	-webkit-user-select:none;
	-webkit-box-sizing:border-box;
	width:240px;
	font-size:15px;
	padding:12px 14px;
	text-align:left;
	font-family:helvetica;
	background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
	border:1px solid #505050;
	-webkit-border-radius:8px;
	-webkit-background-clip:padding-box;
	color:#333;
	text-shadow:0 1px 0 rgba(255,255,255,0.75);
	line-height:130%;
	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
}

#addToHomeScreen.addToHomeIpad {
	width:268px;
	font-size:18px;
	padding:14px;
}

/**
 *
 * The 'wide' class is added when the popup contains the touch icon
 *
 */
#addToHomeScreen.addToHomeWide {
	width:296px;
}

#addToHomeScreen.addToHomeIpad.addToHomeWide {
	width:320px;
	font-size:18px;
	padding:14px;
}

/**
 *
 * The balloon arrow
 *
 */
#addToHomeScreen .addToHomeArrow {
	position:absolute;
	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
	border-width:0 1px 1px 0;
	border-style:solid;
	border-color:#505050;
	width:16px; height:16px;
	-webkit-transform:rotateZ(45deg);
	bottom:-9px; left:50%;
	margin-left:-8px;
	-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
	-webkit-border-bottom-right-radius:2px;
}


/**
 *
 * The balloon arrow for iPad
 *
 */
#addToHomeScreen.addToHomeIpad .addToHomeArrow {
	-webkit-transform:rotateZ(-135deg);
	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
	-webkit-box-shadow:inset -1px -1px 0 #fff;
	top:-9px; bottom:auto; left:50%;
}


/**
 *
 * Close button
 *
 */
#addToHomeScreen .addToHomeClose {
	-webkit-box-sizing:border-box;
	position:absolute;
	right:4px;
	top:4px;
	width:18px;
	height:18px; line-height:14px;
	text-align:center;
	text-indent:1px;
	-webkit-border-radius:9px;
	background:rgba(0,0,0,0.12);
	color:#707070;
	-webkit-box-shadow:0 1px 0 #fff;
	font-size:16px;
}


/**
 *
 * The '+' icon, displayed only on iOS < 4.2
 *
 */
#addToHomeScreen .addToHomePlus {
	font-weight:bold;
	font-size:1.3em;
}

 
#alertFilterPopup select
{
	background: #333;
	color: white;
	padding:5px;
	font-size:16px;
	padding-left:10px;
	padding-top:5px;
}
  

/* ====================================================================================================================== */
/* ==================================================== add2Home.css ==================================================== */
/* ====================================================================================================================== */

#addToHomeScreen .addToHomeShare {
	display:inline-block;
	width:18px;
	height:15px;
	background-repeat:no-repeat;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAQAAABDj1eZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdJREFUKFNtkLtLw1AYxS/qJLhXVKr2ZRulUNtiqgSb3CziICI6ucTFVYcOnaQOFRwUnNTRwUWXgpP/QdHNUEQUHGxofYBTlRs83iZNjKTncOGe7/vx3QchXUWn6FL3jhfKUdCCr5zuifV5oDiHQM+c+CIhiiCSWNu08iq9oHXKLAiqrgR4UXqlOEYZt++ExEL0wW7+OW0G10muLv9gmqfe5FAWKmTMYQYiFL7PYwyLOD8lSjNh2gdnPzMII4QUBxc4OothbAF7GCBKQ0YbSWyPQsIhqvetS+y0ygGMo/KFZfviDvR4AhwgZU9dGYnA0J/6ndc15i3ouYIMcVVUcEXIoOxCeRCfwP8sXBSdjtpUv/1QW+K16kCCIUC4id9Fa0JtkluwVkSfqPL6RwfSDA0aNlx7k/bWgViB7bMS2/1vk5sdsZLN/ALSuL3tylO4RAAAAABJRU5ErkJggg==);
	background-size:18px 15px;
	text-indent:-9999em;
	overflow:hidden;
}


/**
 *
 * The touch icon (if available)
 *
 */
#addToHomeScreen .addToHomeTouchIcon {
	display:block;
	float:left;
	-webkit-border-radius:6px;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
		inset 0 0 2px rgba(255,255,255,0.9);
	background-repeat:no-repeat;
	width:57px; height:57px;
	-webkit-background-size:57px 57px;
	margin:0 12px 0 0;
	border:1px solid #333;
	-webkit-background-clip:padding-box;
}
  
 /**
 *
 * The 'share' icon for retina display
 *
 */
@media all and (-webkit-min-device-pixel-ratio: 2) {
	#addToHomeScreen .addToHomeShare {
		background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
	}
}


/* ====================================================================================================================== */
/* ==================================================== lquery.mobile.simpledialog.css ==================================================== */
/* ====================================================================================================================== */

/*
 * jQuery Mobile Framework : plugin to provide a simple Dialog widget.
 * Copyright (c) JTSage
 * CC 3.0 Attribution.  May be relicensed without permission/notifcation.
 * https://github.com/jtsage/jquery-mobile-simpledialog
 */

/* Shared Styles */

.ui-simpledialog-header h4 { margin-top: 5px; margin-bottom: 5px; text-align: center; }
.ui-simpledialog-container { border: 5px solid #111 !important; width:85%; max-width:500px;}
.ui-simpledialog-screen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.ui-simpledialog-hidden { display: none; }
.ui-simpledialog-input { width: 85% !important; display: block !important; margin-left: auto; margin-right: auto;}
.ui-simpledialog-screen-modal { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.ui-simpledialog-subtitle { text-align: center; }
.ui-simpledialog-controls .buttons-separator {min-height: .6em;}
.ui-simpledialog-controls .button-hidden { display:none; }

.ui-dialog .ui-simpledialog-container { border: none !important; }
.ui-dialog-simpledialog .ui-content { padding: 5px !important;}

.invisible { visibility:hidden }