#noscript { padding: 20px 50px; margin: 20px; border: 2px solid black; text-align: center; vertical-align: middle; background-color: #FF0000 }
#deployJavaPlugin { display: none }
#header { position: absolute; width: 100%; }
#mainSpinner {
	position: absolute;
	top: 50%;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 32px;
	color: #aaa;
	text-align: center;
}
.loading { position: relative; height: 100%; }
#mainSpinner img, .loading img { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -13px; }
#main { visibility: hidden; padding-top: 100px; width: 100%; height: 100%; overflow: hidden; float: left; margin: 0; }
#menu li { width: 197px; }
#menu li.n1 { width:auto; min-width: 144px; }
#menu li.n2 { width:auto; min-width: 136px; }
#menu li.help-container { width: auto; }
#menu ul li a { font-size: 16px; overflow: hidden; padding: 0 5px 0 15px;  white-space: nowrap; }
#menu .border_right { border-right: 1px solid #003B6A; }
#menu .border_left { border-left: 1px solid #A2BAD2; }
#main.noHeader { padding-top: 40px; }
#contentwrapper { height: 100%; min-width: 1180px; position: relative; display: none; }
#contentwrapper, #main, #leftmenu, #leftmenu li {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#leftmenu_overview { height: 100%; }
#leftmenu {
	width: 280px;
	height: 100%;
	margin: 0px;
	-webkit-box-shadow: 10px 5px 8px 0px rgba(0, 0, 0, .3);
	-moz-box-shadow: 10px 5px 8px 0px rgba(0, 0, 0, .3);
	box-shadow: 10px 5px 8px 0px rgba(0, 0, 0, .3);
	background: #fff;
	position: relative;
	visibility: hidden;
	float: left;
}
#leftmenu ul.blocks {
	height: 100%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    top: 0;
    width: 100%;
	z-index:2;
}
#leftmenu ul.blocks li {
	_overflow: hidden;
}
#leftmenu ul.blocks li.tile {
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #fff;
	background-image: -webkit-linear-gradient(top, #ddd 0%, #fff 10px);
	background-image: -moz-linear-gradient(top, #ddd 0%, #fff 10px);
	background-image: -ms-linear-gradient(top, #ddd 0%, #fff 10px);
	background-image: -o-linear-gradient(top, #ddd 0%, #fff 10px);
	background-image: linear-gradient(top, #ddd 0%, #fff 10px);
}
#leftmenu ul.blocks li.tile:first-child {
	border-top: 0px !important;
	background-image: none !important;
}
#leftmenu ul.blocks li.tile:last-child {
	border-bottom: 0px !important;
}
#leftmenu a {
	display:block;
}
#leftmenu a:hover{
	text-decoration:none;
}
#leftmenu .boxtitle {
	padding: 10px 10px 10px 14px;
	color:#C3C3C4;
	font-size:24px;
	line-height:26px;
}
#leftmenu .boxtitle:focus {
	outline: none;
}
#leftmenu button {
    text-align: center;
    padding: 0;
    height: 32px;
}
#leftmenu .btn-blue {
	padding-left: 10px;
	padding-right: 10px;
}

#leftmenu button .iconfont {
	margin-right: 0px;
	line-height: 20px;
}

.singlespinner {
	margin-top: 10px;
	opacity: .4;
}
svg * {
    font-family: "icons", serif;
}

/* rotating start */
.rotating {
	-webkit-animation: spin 1s infinite linear;
	-moz-animation: spin 1s infinite linear;
	animation: spin 1s infinite linear;
	display: inline-block;
	width: auto;
	height: auto;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes spin {
	0% { -ms-transform: rotate(0deg); }
	100% { -ms-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

#dlg .defaultvsdklink .rotating {
	margin-left: 10px;
	padding-bottom: 5px;
	position: absolute;
	top: -5px;
	left: -40px;
    text-decoration: none;
}
#dlg .defaultvsdklink {
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
	display: block;
}
#dlg .applinkContainer { display: none; }
#dlg .applinks { display:inline-block; }
#dlg .applinks a { float: left; }
#dlg .applinks a.ios { margin-top: 16px; }
#dlg .applinks a.android { margin-top: 16px; }
#dlg .donotshowagain { clear: both; display:inline-block; }
#dlg .donotshowagain label { padding-left: 15px; }
#dlg #cbDoNotShowAgain { outline: none; }

/* rotating end */

.maxThis {height: 100%;}
.maxOther {height: 0px;}

.openable:before {
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
	float:left;
	content:"\e700";
}
.openable-closed:before {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	margin-left: -2px;
	margin-right: 2px;
}
.ptz { margin-left: 30px; }
.ptz td { text-indent:0px; }
.ptz button { width: 32px; }
.ptz #noapplet { max-width: 145px; }
.boxcontent { position: relative; padding-bottom: 15px; display: none; }
.boxcontent .btngroup2,
.boxcontent .btngroup3 {
	margin: 3px 0px;
}
#videocontainer, #searchcontainer {
	margin-top:10px;
	text-align:center;
}
#videocontainer { position: relative; margin-left: 295px; }
#videocontainer #video_cameo, #videocontainer canvas, #videocontainer .display  { margin: 5px 0 0 0; display: block; }
.lte-ie9 #videocontainer #video_cameo, .lte-ie9 #videocontainer canvas, .lte-ie9 #videocontainer .display { margin: 0; display: inline-block; }

#videocontainer .videooverlay { position: absolute; top: 0; display: inline-block; margin: 0; }

#searchcontainer canvas { margin: auto; }
.animated {
	-webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;
	-ms-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	transition: all 400ms linear;
}
.nocross::-ms-clear {
	/* remove the 'x' in the textboxes in IE */
	display: none;
}
#leftmenu .viewport{
	height: 200px;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
}
#leftmenu .scrollbar {
	right:0px;
}
#leftmenu .largeselect {
	/* height: 26px; */
    width: 250px;
}
#leftmenu .largeselect .selectboxit-text {
    max-width: 220px !important;
}
#leftmenu button.largeselect span {
	width:auto;
    line-height: 20px;
}
.btn-default .text {
	padding-right: 10px;
	padding-left: 10px;
	vertical-align: middle;
	line-height: 24px;
	display: inline-block;
}
.btn-default.disabled {
	cursor: default;
}

/* regions on ptz panel */
.ptz #regions { display: none; }
.regselContainer {
	margin: auto;
	width: 100px;
	height: 70px;
	position: relative;
	background-image: url(snap.jpg?JpegCam=2&JpegSize=S);
	background-size: 100% 100%;
}
.regselContainer .region {
	position: absolute;
	border: 1px solid #aaa;
	cursor: pointer;
	box-sizing: border-box;
	z-index: 1;
}
.regselContainer .region .background {
	width: 100%;
	height: 100%;
}
.regselContainer .region.active .background,
.regselContainer .region.active:hover .background {
	background-color: #ffff00;
	opacity: .3;
	z-index: 2;
}
.regselContainer .region:hover .background {
	background-color: #eee;
	opacity: .5;
}

/* search panel */
#btnResize { margin-left: 5px; }
#maximizebutton:hover { color: #222222; }
.searchbtnbar { height: 32px; padding: 5px 10px 0 0; }
#btnSearchPrev, #btnSearchNext { min-width: 40px; }
#btnSearchPrev, #btnStopSearch { margin-left: 10px; }
#searchPage { display: inline-block; min-width: 50px; text-align: center; }
#searchProgress { float: right; margin-top: 10px; }
#searchcfg { padding: 10px; }
#searchcfg .clear { padding-top: 5px; padding-bottom: 5px; }
#searchresults .result, .recordinglist .recording { padding: 5px 10px; cursor: pointer; }
#searchresults .result.snapshot { width: 120px; float: left; text-align: center; }
#searchresults .snapshot .thumbnail { width: 120px; }
#searchresults .result:hover, .recordinglist .recording:hover { background-color: #d3e7f2; }
#searchresults .overview, .recordinglist .overview { width: 100%; }
.results div:nth-child(even), .recordings div:nth-child(even) { background-color: #efefef; }
.recordinglist .recording.active { background-color: #d3e7f2; }

.recordinglist #reclistnav {
	padding-left: 10px;
	padding-right: 10px;
	height: 40px;
	text-align: center;
}
.recordinglist #reclistnav button {
	min-width: 40px;
	margin: 5px 3px;
}
.recordinglist #reclistnav #curTLPage {
	display: inline-block;
	margin-top: 14px;
	vertical-align: middle;
}
.recordinglist #reclistnav #btnRecNext, .recordinglist #reclistnav #btnRecEnd {
	float:right;
}
.recordinglist #reclistnav #btnRecPrev, .recordinglist #reclistnav #btnRecStart {
	float:left;
}
/* connection panel */
.connectionItem { margin: 10px 0 0 10px; }
.connectionItem label { padding-left: 10px !important; }

/* export panel */
#exportSettings { padding: 10px; }
#exportSettings .clear { padding: 5px 0; }
#exportButtonContainer { height: 32px; padding-right: 10px; }
#exportProgress .buttons { height: 30px; padding: 3px 10px; }
#exportProgress .buttons button { padding: 0 5px; }
#exportProgress .progressbar { width: 100px; height: 30px; display: inline-block; float: left; border-radius: 5px; border: 1px solid #c3c3c4; position: relative; }
#exportProgress .progressbarLabel { position: absolute; width: 100%; text-align: center; font-weight: bold; padding-top: 7px; }
#exportProgress .ui-progressbar-value { background: #255a86; background-color: rgba(10, 67, 113, 0.6); height: 100%; border-radius: 5px; }
#exportProgress .partCount { width: 40px; display: inline-block; line-height: 30px; margin: 0 5px; float: left; text-align: center; }
#exportProgress .progressFinished { color: green; margin: 0 5px; }
#exportProgress .progressError { color: red; margin: 0 5px; }
#exportProgress .spinner { margin: 80px 0 0 100px; }
#exportProgress .link { margin: 10px 0; padding: 5px 10px; }
.backup { margin: 10px 0 0 15px; }
#exportSettings #expectedSizeLabel { display: inline-block; }
#exportSettings #expectedSize { float: right; margin-right: 20px; }
 
/** io panel **/
.inout .boxcontent { margin-bottom: 10px; }
#inputs, #relais { margin: 0 0 20px 20px; }
.input, .relay { background-color: #ddd; border-radius: 5px; color: #404245; display: inline-block; margin: 0 0 5px 0; }
.inputNumber, .relayNumber { line-height: 32px; border-right: 1px solid #808285; width: 30px; text-align: center; display: inline-block; cursor: default; float: left; }
.inputName, .relayName { line-height: 32px; width: 155px; padding-left: 10px; display: inline-block; cursor: default; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; float: left; }
.input .iconfont { cursor: default; margin-top: 2px; }
.relay .iconfont { border: 1px solid gray; border-radius: 5px; padding: 1px 3px 3px 3px; height: 26px; vertical-align: middle; margin-right: 0; cursor: pointer; }
.input.active .iconfont, .relay.active .iconfont { color: green; text-shadow: 0 0 8px rgba(0,255,0, 1) }

/** presets panel **/
.scene { background-color: #ddd; border-radius: 5px; color: #404245; display: inline-block; margin: 0 0 5px 20px; cursor: pointer; }
.sceneNumber { line-height: 32px; border-right: 1px solid #808285; width: 30px; text-align: center; display: inline-block; }
.sceneName { line-height: 32px; width: 155px; padding-left: 10px; display: inline-block; }
.saveScene { vertical-align: middle; margin-top: -4px; }
.scene.disabled { cursor: default; background-color: #eee; color: #888; }
.scene.disabled .saveScene { color: #bbb; }
#selSceneSelectBoxItContainer { margin: 0 0 5px 20px; }
#selSceneSelectBoxIt { width: 185px; }
#btnShowScene { width: 32px; margin-left: 5px; }
.presets #progressbar { width: 223px; margin-left: 20px; height: 32px; position: relative; }
.presets .progress-label { width: 100%; text-align: center; position: absolute; top: 9px; font-weight: bold; }
.presets .ui-progressbar-value { background: #255a86; background-color: rgba(10, 67, 113, 0.6); }

/** special functions panel **/
.sf { display: block; width: 80%; margin: 5px auto; }
.sf:after { font-family: "icons", serif; content: "\e74b"; float: right; vertical-align: middle; line-height: 100%; width: 24px; font-size: 18px; margin-top: -4px; }
.sf.active { font-weight: bold; }
/*.sf.active:after { text-shadow: 0 0 8px rgba(255, 0, 0, 1) }*/

/** aux controls panel **/
#auxNumber, #showScene, #saveScene, #auxOn, #auxOff { display: block; width: 80%; margin: 5px auto; }
#auxNumber { height: 24px; border: 1px solid #c3c3c4; border-radius: 5px; color: #404245; background-color: #efefef; width: 78%; padding-right: 2%; text-align: right; }

/** controls below video **/
#controls .leftblock {
	padding: 10px 0px 0px 20px;
	float: left;
    text-align: center;
}
#controls .centerblock {
	text-align: center;
	padding: 10px;
}
#controls .rightblock {
	padding: 10px;
	float: right;
}
#controls button.running {
    color: #ff0000;
    -webkit-text-shadow: 0px 0px 8px 3px rgba(255, 0, 0, .8);
    -moz-text-shadow: 0px 0px 8px 3px rgba(255, 0, 0, .8);
    text-shadow: 0px 0px 8px 3px rgba(255, 0, 0, .8);
}
#controls .iconfont { margin-right: 0px; }
#controls .btn-grey { margin: 5px 3px 0 0; padding: 1px 8px; }
#currentTime { width: 130px; text-align: center; }
#controls .gap {
	display: inline-block;
	width: 40px;
	text-align: center;
	margin: 0px;
}
#controls #playbutton {
	width: 92px;
	height: 60px;
	margin: -5px auto 0px auto;
}
#controls #scratchctrl {
	width: 542px;
	height: 62px;
	margin: -3px auto 0px auto;
}

#controls .leftblock, #controls .rightblock { display: inline-block; }
#controls .centerblock { padding-left: 330px; }

#timelineViewport {
	max-height: 68px;
	overflow: hidden;
}

#recordingIcon {
    width: 32px;
    height: 32px;
    background-image: url('../record_disabled.gif');
}
#recordingIcon.recordingrunning {
    background-image: url('../record_on.gif');
}
#recordingIcon.recordingpending {
    background-image: url('../record_idle.gif');
}

#controls .leftblock .buttons { height: 45px; }
#controls .leftblock .buttons button {
    float: left;
    outline: none;
}

#controls .leftblock .savewarning { text-align: left; display: none; cursor: pointer; border: 2px solid #ffffff; border-radius: 5px; min-height: 30px; padding: 0 3px; }
#controls .leftblock .savewarning .saveicon { float: left; }
#controls .leftblock .savewarning .saveicon:before { content: ""; display: inline-block; }
#controls .leftblock .savewarning .savemessage { margin-left: 10px; padding-top:7px; display: inline-block; float: left; max-width: 140px; }
#controls .leftblock .savewarning.success .saveicon:before { content: "\E70C"; color: #00c000; }
#controls .leftblock .savewarning.warning .saveicon:before { content: "\E705"; color: #d0b000; }

#imgStartApp {
    height: 36px;
    width: 36px;
    margin: -3px 0 0 0;
}
#btnStartApp {
    padding: 0 !important;
    height: 33px;
    overflow: hidden;
}
#apphint { margin-top: 150px; text-align: center; }
#apphint .hint { font-size: 32px; color: #aaa; line-height: 48px; margin-bottom: 30px; }

/** videotag spinner **/

#videotag_spinner {
    margin-left: 0;
    position: relative;
}

#videotag_spinner div {
    position: absolute;
    left: 45%;
    top: -100px;
}

#videotag_spinner div img {
    width: 36px;
    height: 36px;
    animation: spin 1s infinite linear;
}
#videotag_spinner div span {
    line-height: 36px;
    color: #ccc;
    float: right;
    margin-left: 20px;
    font-size: 20px;
}

/** controls **/

.datefield {
	position: relative;
}
.datefield .txt-field {
	width: 80px;
	z-index:2;
	border-radius:5px;
	font-weight: 400;
}
/* remove the 'x' in the textboxes in IE */
.datefield .txt-field::-ms-clear, .timefield::-ms-clear {
      display: none;
}
/* remove the 'x' in the textboxes in chrome */
.datefield .txt-field::-webkit-clear-button, .timefield::-webkit-clear-button {
      display: none;
}
.datefield .btn-grey,
.datefield .ui-datepicker-trigger {
	width: 35px;
	margin-left:-15px;
	z-index:3;
	height:34px !important;
	text-align:right;
	padding-right: 10px;
	border-radius:7px;
	vertical-align: bottom;
}
.datefield .ui-datepicker-trigger .iconfont {
	font-size: 20px;
	opacity: inherit;
}
.timefield {
	width: 70px;
	font-weight: 400;
	margin-left: 10px;
	padding-right: 5px;
}

#ui-datepicker-div TH{
	background:#e1e1e2;
}
.ui-datepicker-calendar{
	margin: 0;
}
/*custom dialog */
.dlg-open object, .dlg-open applet { visibility: hidden; }
.ui-widget-overlay { top: 98px; background-color: #000; opacity: 0.6 }
.alertbox.ui-dialog { padding: 0px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.6); font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; }
.alertbox .ui-dialog-titlebar { display:none; }
.alertbox .ui-dialog-content { background-color: rgb(253, 235, 77); }
.alertbox .ui-dialog-buttonpane {margin-top: 0px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }
.alertbox .icon { float: left; font-size: 64px; }
.alertbox h2 { margin: 0px 0px 0px 80px; color: #000; font-size: 20px; }
.alertbox .msg { margin: 0px 0px 0px 80px; font-size: 12px; }
.alertbox button:focus {outline: none}
.alertbox button {padding-left: 10px; padding-right:10px; }
.alertbox.error .ui-dialog-content { color: #e20015; background-color: #FAD6DA; }
.alertbox.error h2 { color: #e20015; }
.alertbox.success .ui-dialog-content { color: #009900; background-color: #ccffcc; }
.alertbox.success h2 { color: #009900; }
.alertbox .filelocation { display: inline-block; max-width: 400px; word-wrap: break-word; }
/* border flash */
.borderflash {
    -webkit-animation: borderflash 1s 1 ease-out forwards;
    -moz-animation: borderflash 1s 1 ease-out forwards;
    animation: borderflash 1s 1 ease-out forwards;
}
@-webkit-keyframes borderflash {
    0% { border-color: #e20015; }
    100% { border-color: #ffffff; }
}
@-moz-keyframes borderflash {
    0% { border-color: #e20015; }
    100% { border-color: #ffffff; }
}
@keyframes borderflash {
    0% { border-color: #e20015; }
    100% { border-color: #ffffff; }
}