/* ---------------------------------------------------------
   1. General reset
   2. Common site styles
   3. Custom form styles
   4. Custom scroll styles
   5. Fancybox styles
   6. Calendar styles
   7. Css animations and styles by jser
   ---------------------------------------------------------*/
/* ---------------------------------------------------------
   1. General reset
   ---------------------------------------------------------*/
@import 'gdpr.css';
* { max-height: 1000000px; }
html { height: 100%; }
body {
	margin: 0;
	color: #e5e4ea;
	font: 300 16px/19px 'Roboto', Arial, Helvetica, sans-serif;
	height: 100%;
	background: #57697c;
	min-width: 1003px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
}
img { border-style: none; }
a {
	text-decoration: none;
	/*color: #003478;*/
	color: #86bad5;
}
a:hover { text-decoration: underline; }
a:active { background-color: transparent; }
header,
footer,
article,
section,
nav,
figure,
aside,
main { display: block; }
figure {
	margin: 0;
	padding: 0;
}
input,
textarea,
select {
	font: 300 18px/21px 'Roboto', Arial, Helvetica, sans-serif;
	vertical-align: middle;
	color: #86bad5;
}
form, fieldset {
	margin: 0;
	padding-top: 0;	
    padding-left: 0;	
    padding-right: 0;	
    border-style: none;
}
input[type="image"] {
	padding: 0;
	border: none;
}
input[type="email"],
input[type=search],
input[type=text],
input[type=password],
input[type=file],
input[type=submit],
textarea {
	-webkit-appearance: none;
	outline:none;
}
input::-ms-clear { display: none; }

/* Password reveal button (eye-icon). Specific to IE 10 and later.*/
input::-ms-reveal { display: none; }

[type=search] {-webkit-appearance: none;}
input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;}
::-webkit-input-placeholder {color: #86bad5;}
:-moz-placeholder {color: #86bad5;}
::-moz-placeholder {
	color: #86bad5;
	opacity: 1;
}
:-ms-input-placeholder {color: #86bad5;}
/* ---------------------------------------------------------
   2. Common site styles
   ---------------------------------------------------------*/
/* main container's styles */
#wrapper {
	min-height: 100%;
	overflow: hidden;
	padding: 0 22px 0 225px;
	position: relative;
}
.header-minimized #wrapper { padding: 0 0 0 78px; }
.header-minimized.alarm-activate #wrapper { padding: 0 0 0 203px; }
.w1 { padding: 0 0 42px; }
/* site logo styles */
.logo {
	background: url(images/logoes.png) no-repeat;
	width: 135px;
	height: 63px;
	overflow: hidden;
	text-indent: -9999px;
	display: block;
	margin: 0 auto 22px;
}

.logonobg {
    width: 170px;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    margin: 0 0 22px 0;
}

.logo a {
	display: block;
	height: 100%;
}
.header-minimized .logo {
	background-position: 0 -66px;
	width: 34px;
	height: 33px;
	margin: 0 10px 52px 8px;
}
/* page header styles */
#header {
	position: fixed;
	top: 0;
	left: 0;
	background: #2e3842;
	overflow: hidden;
	width: 190px;
	min-height: 100%;
	z-index: 100;
	padding: 23px 0 10px 13px;
}
.header-minimized #header { width: 66px; }
.alarm-activate.header-minimized #header { width: 190px; }
/* main navigation styles */
#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 17px;
	line-height: 22px;
	text-transform: capitalize;
}
#nav ul li { margin: 0 0 11px; }
#nav ul li a {
	display: block;
	padding: 7px 7px 13px 54px;
	position: relative;
	color: #86bad5;
	/* white-space: nowrap; */
    white-space:normal;
}
.header-minimized #nav ul li a {
	overflow: hidden;
	text-indent: -9999px;
}
.alarm-activate.header-minimized #nav ul li a { text-indent: 0; }
#nav ul .cameras a { padding-top: 8px }
#nav ul .hover a,
#nav ul a.active {
	background: #57697c;
	text-decoration: none;
	border-bottom: 2px solid #f47564;
	padding-bottom: 11px;
}
#nav ul a.active,
#nav ul li a:active{color: #fff;}
#nav ul li a:after {
	background: url(images/menu-icons.png) no-repeat 0 0;
	width: 35px;
	height: 40px;
	overflow: hidden;
	text-indent: -9999px;
	content: "";
	position: absolute;
	left: 12px;
	top: 0;
}
#nav ul a.active:after,
#nav ul li a:active:after { background-position: -36px 0; }
#nav ul .security a:after { background-position: 0 -52px; }
#nav ul .security a.active:after,
#nav ul .security a:active:after{ background-position: -36px -52px; }
#nav ul .cameras a:after { background-position: 0 -103px; }
#nav ul .cameras a.active:after,
#nav ul .cameras a:active:after { background-position: -36px -103px; }
#nav ul .detectors a:after { background-position: 0 -158px; }
#nav ul .detectors a.active:after,
#nav ul .detectors a:active:after { background-position: -36px -158px; }
#nav ul .automation a:after { background-position: 0 -210px; }
#nav ul .automation a.active:after,
#nav ul .automation a:active:after { background-position: -36px -210px; }
#nav ul .events a:after { background-position: 0 -262px; }
#nav ul .events a.active:after,
#nav ul .events a:active:after { background-position: -36px -262px; }
#nav ul .notifications a:after { background-position: 0 -315px; }
#nav ul .notifications a.active:after,
#nav ul .notifications a:active:after { background-position: -36px -315px; }
#nav ul .accounts a:after { background-position: 0 -368px; }
#nav ul .accounts a.active:after,
#nav ul .accounts a:active:after { background-position: -36px -368px; }
#nav ul .settings a:after { background-position: 0 -423px; }
#nav ul .settings a.active:after,
#nav ul .settings a:active:after { background-position: -36px -423px; }
#nav ul .smartHubSetup a:after { background-position: 0 -510px; }
#nav ul .smartHubSetup a.active:after,
#nav ul .smartHubSetup a:active:after { background-position: -38px -510px; }
#nav ul .logout a:after { background-position: 0 -465px; }
#nav ul .logout a.active:after,
#nav ul .logout a:active:after { background-position: -38px -465px; }
#header .btn-close {
	float: right;
	position: relative;
	font-size: 13px;
	line-height: 16px;
	color: #d0d1d3;
	padding: 0 0 0 23px;
	margin: 4px 17px 0 17px;
}
#header .btn-close:hover {
	text-decoration: none;
	color: #fff;
}
#header .btn-close:after {
	background: url(images/sprite.png) no-repeat 0 -169px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	left: 0;
	top: 4px;
	width: 19px;
	height: 9px;
	content: "";
}
#header .btn-close:hover:after,
#header .btn-close:active:after {
	background-position: 0 -149px;
	color: #fff;
}
#header .btn-close:active { color: #f47564; }
#header .btn-close span,
.header-minimized #header .btn-close span:first-child { display: none; }
#header .btn-close span:first-child,
.header-minimized #header .btn-close span { display: block; }
.header-minimized #header .btn-close {
	margin: 4px 14px 0 0;
	padding: 0 26px 0 0;
}
.header-minimized #header .btn-close:after {
	background-position: 0 -133px;
	left: auto;
	right: 0;
}
.header-minimized #header .btn-close:hover:after,
.header-minimized #header .btn-close:active:after { background-position: 0 -119px; }
/* main informative part's styles */
#main { padding: 100px 0 5px; }
/* main content header */
/*#main .header {
	z-index: 6;
	position: absolute;
	background: #57697c;
	width: 100%;
	left: 0;
	top: 0;
	height: 100px;
	padding: 49px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: padding 0.3s linear;
	-moz-transition: padding 0.3s linear;
	-webkit-transition: padding 0.3s linear;
	-o-transition: padding 0.3s linear;
}*/
    #main .header {
        z-index: 6;
        background: #57697c;
        position: fixed;
        top: 0;
        width: inherit;
        padding: 49px 0 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        transition: padding 0.3s linear;
        -moz-transition: padding 0.3s linear;
        -webkit-transition: padding 0.3s linear;
        -o-transition: padding 0.3s linear;
    }
.no-3d .header-minimized #main { padding-left: 100px; }
#main .header .holder { padding: 0 0 6px; }
#main .header:after {
	display: block;
	content: "";
	clear: both;
	border-bottom: 1px solid #617284;
	height: 1px;
	background: #495868;
	width: 100%;
}
/* page title styles */
#main .header h1 {
	overflow: hidden;
	text-transform: uppercase;
	color: #fff;
	font-size: 34px;
	line-height: 38px;
	font-weight: 400;
	margin: 0 0 5px;
}
#main .header h1 .help {
	background: url(images/sprite.png) no-repeat -113px -160px;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: top;
	margin: 0 0 0 10px;
	overflow: hidden;
	text-indent: -9999px;
}
/* Info icon styles */
#main .header .info {
	background: url(images/sprite.png) no-repeat -110px -56px;
	width: 39px;
	height: 39px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	right: 22px;
	top: 15px;
}
.icon-info {
    display:inline-block;
}
.icon-info:after {
	content: var(--icon-info-content,"?");
	display: initial;
	color: #506774;
	background-color: #b9d5e7;
	border-radius: 50%;
	width: 13px;
	height: 15px;
	padding: 0px 1px;
	font-weight: bold;
	margin-left: var(--icon-info-margin-left,5px);
	font-size: 11px;
	line-height: 15px;
	position: absolute;
	margin-top: var(--icon-info-margin-top,-16px);
	text-align: var(--icon-info-text-align,inherit);
	text-transform: var(--icon-info-text-transform,inherit);
}
.icon-info-content-i {
	--icon-info-content: "i";
	--icon-info-text-align: center;
	--icon-info-text-transform: lowercase;
	--icon-info-margin-top: 0;
}
.icon-info-register {
	--icon-info-margin-left: -23px;
}
/* Offline Info styles */
#main .header .offline {
    position: absolute;
    top: 23px;
    right: 100px;
}
/* Additional menu styles */
.menu {
	float: right;
	max-width: 500px;
	font-size: 22px;
	line-height: 25px;
	position: relative;
	text-transform: capitalize;
	margin: 5px -15px 0 0;
	list-style: none;
	padding: 0;
	z-index: 4;
}
.menu > li { position: relative; }
.menu > li > a {
	padding: 5px 31px 5px 10px;
	position: relative;
	color: #dde1e5;
	display: block;
}
.menu > li > span {
	padding: 5px 31px 5px 10px;
	position: relative;
	color: #dde1e5;
	display: block;
}
.menu > li > a:after {
	background: url(images/sprite.png) no-repeat -114px -106px;
	width: 13px;
	height: 7px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	right: 13px;
	top: 17px;
	content: "";
}
.menu > li.active>a {
	border-radius: 3px 3px 0 0;
	background: #222931;
	color: #d3d4d6;
	text-decoration: none;
}
.menu > li:hover>a { text-decoration: none; }
.menu > li.active>a:after,
.menu > li:hover>a:after { background-position: -134px -106px; }
.menu ul {
	position: absolute;
	background: #222931;
	box-shadow: 0 2px 0 0 #343f4a;
	-webkit-box-shadow: 0 2px 0 0 #343f4a;
	width: 238px;
	top: 100%;
	padding: 0 2px 5px 0;
	list-style: none;
	margin: 0;
	font-size: 16px;
	line-height: 19px;
}
.menu ul li a {
	padding: 8px 13px 9px;
	display: block;
	color: #d3d4d6;
}
.menu ul li:first-child a { padding: 9px 13px; }
.menu ul li a:after { display: none; }
.menu ul li:hover a,
.menu ul li:active a,
.menu ul li.active a {
	border-left: 2px solid #f47564;
	background: #484f59;
	text-decoration: none;
	padding-left: 11px;
	border-radius: 0;
}
.menu ul li:active a,
.menu ul li.active a {
	background: #6b4443;
	color: #dadcde;
}
.menu ul li.active a { color: #fff; }
/* main content stykes */
.content {
	overflow: hidden;
	padding: 157px 0 9px;
}
[data-page^="cameras"] .content { padding: 155px 0 16px; }
[data-page="detectors"] .content,
[data-page="settings"] .content { padding: 154px 0 15px; }
/*[data-page^="events"] .content { padding: 154px 0 15px; }*/
.alarm-activate .content { padding-top: 148px }
[data-page^="events"].alarm-activate .content { padding-top: 110px; }
[data-page="security-details"] .content,
[data-page="security-groups"] .content { padding: 201px 0 8px; }
[data-page^="overview"] .content {
    padding: 107px 0 16px;
}
.alarm-activate [data-page^="overview"] .content {
    padding: 148px 0 16px;
}
.alarm-activate #main { padding-top: 240px; }
.alarm-activate [data-page="security-details"] .content,
.alarm-activate [data-page="security-groups"] .content {
    padding: 234px 0 8px;
}
/* Cameras slideshow styles */
.camera-slides {
	background: #3e4c60;
	overflow: hidden;
	border-radius: 3px;
	margin: 0 0 24px;
	padding: 0 0 8px;
}
.camera-slides .hiden { display: none; }
.camera-slides .head {
	overflow: hidden;
	padding: 8px 13px 5px;
}
.camera-slides h2 {
	font-size: 20px;
	line-height: 23px;
	margin: 0;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
}
.camera-slides .ico-refresh {
	float: right;
	background: url(images/sprite.png) no-repeat -161px -56px;
	width: 21px;
	height: 18px;
	overflow: hidden;
	margin: 4px 3px;
	text-indent: -9999px;
}
.camera-slides .ico-refresh:hover { background-position: -162px -84px; }
.camera-slides .ico-refresh.active {
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	background-position: -162px -84px;
    -ms-animation-duration: 2s;
    -ms-animation-timing-function: linear;
    -ms-animation-name:rotate;
    -ms-animation-iteration-count: infinite; 
}
@-webkit-keyframes rotate {
	 from {-webkit-transform: rotate(0deg);}
	 to {-webkit-transform: rotate(360deg);}
	}
@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
	 to {-moz-transform: rotate(360deg);}
    }
@-ms-keyframes rotate  {
    from {-ms-transform: rotate(0deg);}
	 to {-ms-transform: rotate(360deg);}
}
.camera-slides .slide-holder {
	position: relative;
	padding: 21px 10px 11px 9px;
	border-top: 1px solid #57697c;
}
.camera-slides .slide-holder:after {
	clear: both;
	display: block;
	content: "";
}
.camera-slides .btn-next,
.camera-slides .btn-prev {
	background: url(images/sprite.png) no-repeat -97px -244px;
	position: absolute;
	left: 0;
	top: 50%;
	width: 41px;
	height: 46px;
	overflow: hidden;
	text-indent: -9999px;
	margin: -28px 0 0;
	z-index: 4;
}
.camera-slides .btn-next {
	background-position: 0 -192px;
	left: auto;
	right: 0;
}
.camera-slides .btn-prev:hover,
.camera-slides .btn-prev:active { background-position: -48px -244px; }
.camera-slides .btn-next:hover,
.camera-slides .btn-next:active { background-position: -49px -192px; }
.camera-slides .btn-next.disabled {
	background-position: -97px -192px;
	cursor: default;
}
.camera-slides .btn-prev.disabled {
	cursor: default;
	background-position: 0 -244px;
}
.camera-slides .pagination {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 0;
	bottom: -11px;
	width: 100%;
	text-align: center;
	z-index: 4;
}
.camera-slides .pagination li {
	display: inline-block;
	vertical-align: top;
	margin: 0 2px;
}
.camera-slides .pagination li a {
	background: #9199a5;
	width: 10px;
	height: 10px;
	overflow: hidden;
	border-radius: 100%;
	text-indent: -9999px;
	display: block;
}
.camera-slides .pagination li a:hover,
.camera-slides .pagination li.active a { background: #f47564; }
.camera-slides .slideset {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	z-index: 3;
}
.camera-slides .slideset .slide {
	width: 100%;
    max-width: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.camera-slides .slideset .slide .box-holder{
	width:100%;
	margin:0 auto;
	max-width:1000px;
}
.camera-box {
	float: left;
	width: 23.5%;
	margin: 0 1% 9px;
	font-size: 14px;
	line-height: 17px;
	color: #fff;
	position: relative;
}
.camera-slides .camera-box{width: 22%;}
.camera-box a {
	display: block;
	color: #fff;
	border: 1px solid #7a828a;
}
.camera-box img {
	display: block;
	height: auto;
	width: 100%;
}
.camera-box .caption {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjMjIyOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYzIyMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(28,34,40,0)), color-stop(100%, rgba(28,34,40,1)));
	background: -webkit-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -o-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -ms-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: linear-gradient(to bottom, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	position: absolute;
	left: 1px;
	bottom: 1px;
	right: 1px;
	height: 45%;
}
.camera-box .caption .frame {
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: 7px;
}

.camera-box .caption span {
    float: left;
    max-width: 49%;/*was 100%*/
    width: auto;/*was min-width: 50%*/
    text-transform: capitalize;
    word-wrap: break-word;
} 

.camera-box .caption .change {
	color: #fff;
	float: right;
	text-align:right;
	text-decoration: underline;
    padding: 0 2px;
    margin-left:2px;
    clear:right;
}
#fancybox-wrap .change { display: none !important; }
.camera-box a.hover .caption,
.camera-box a.pressed .caption {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNmE3YSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzVlNmE3YSIgc3RvcC1vcGFjaXR5PSIwLjUzIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzVlNmE3YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZTZhN2EiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(94,106,122,0)), color-stop(51%, rgba(94,106,122,0.53)), color-stop(96%, rgba(94,106,122,1)), color-stop(100%, rgba(94,106,122,1)));
	background: -webkit-linear-gradient(top, rgba(94,106,122,0) 0%, rgba(94,106,122,0.53) 51%, rgba(94,106,122,1) 96%, rgba(94,106,122,1) 100%);
	background: -o-linear-gradient(top, rgba(94,106,122,0) 0%, rgba(94,106,122,0.53) 51%, rgba(94,106,122,1) 96%, rgba(94,106,122,1) 100%);
	background: -ms-linear-gradient(top, rgba(94,106,122,0) 0%, rgba(94,106,122,0.53) 51%, rgba(94,106,122,1) 96%, rgba(94,106,122,1) 100%);
	background: linear-gradient(to bottom, rgba(94,106,122,0) 0%, rgba(94,106,122,0.53) 51%, rgba(94,106,122,1) 96%, rgba(94,106,122,1) 100%);
	height: 99%;
}
.camera-box a.hover { border-color: #86bad5; }
.camera-box a.pressed { border-color: #f47564; }
.camera-box a.hover .change,
.camera-box a.pressed .change { display: block; }
.camera-box a .change{ display:none;}
/* panel info styles */
.panel-info { overflow: hidden; }
.panel-info .box {
	float: left;
	width: 34.45%;
	padding: 0 0 0 25px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.panel-info .box:hover ul {
	background: #3e4c60;
	color: #fff;
}
.panel-info a { color: #2e3842; }
.panel-info .box:hover a { color: #fff; }
.panel-info .box:first-child {
	padding: 0;
	width: 31.1%;
}
.panel-info .box h2 {
	background: #3e4c60;
	border-bottom: 2px solid #8492a7;
	border-radius: 3px 3px 0 0;
	margin: 0;
	padding: 2px 12px 4px;
	text-transform: capitalize;
	font-weight: 300;
	color: #fff;
	font-size: 20px;
	line-height: 23px;
}
.panel-info ul {
	margin: 0;
	border-radius: 0 0 3px 3px;
	padding: 7px 12px 15px;
	font-size: 14px;
	line-height: 17px;
	color: #2e3842;
	list-style: none;
	background: #fff;
	overflow: hidden;
	text-transform: capitalize;
}
.panel-info ul li {
	float: left;
	width: 100%;
	padding: 0 0 7px;
}
.panel-info ul li .date {
	float: left;
	padding: 0 1% 0 0;
    white-space: nowrap;
}
.panel-info .title {
	float: right;
	width: 63%;
}
.panel-info .ico-cam {
	background: url(images/sprite.png) no-repeat -70px -146px;
	width: 19px;
	height: 19px;
	overflow: hidden;
	text-indent: -9999px;
	display: inline-block;
	vertical-align: top;
	margin: -2px 0 0 11px;
}
.panel-info .box:hover .ico-cam { background-position: -70px -170px; }
.panel-info .status {
	padding: 4px 9px 6px 14px;
	line-height: 24px;
}
.panel-info .status li { padding: 0 0 4px; }
.panel-info .text {
	float: left;
	width:62%;
	padding:0 0.5% 0 0;
}
.panel-info .status .title {
	width: 37.5%;
	float: left;
}
.panel-info .text:after {
	background: url(images/sprite.png) no-repeat -69px -58px;
	width: 22px;
	height: 21px;
	content: "";
	float: left;
	margin: 0 10px 0 0;
}
.panel-info .disarmed:after {
	background-position: -69px -84px;
	margin: -2px 10px 0 0;
	height: 22px;
}
.panel-info .partially:after {
	background-position: -69px -113px;
	margin: -1px 10px 0 0;
}
/* footer of the page styles */
#footer,
.thank-popup .footer,
.registration-popup .footer,
.login-popup .footer,
#sites-popup .footer{
	overflow: hidden;
	padding: 1px 10px 10px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	position: relative;
	line-height: 15px;
}
#footer {
	height: 22px;
	margin: -42px auto 0;
	z-index: 1;
	padding: 10px 0 10px 203px;
}
.header-minimized #footer { padding: 0 0 0 78px; }
#footer p,
.thank-popup .footer p,
.registration-popup .footer p,
.login-popup .footer p { margin: 0; }
#footer p a,
.thank-popup .footer p a,
.registration-popup .footer p a,
.login-popup .footer p a { color: #fff; }
/* login popup styles */
.registration-popup,
.login-popup{
	background: none;
}
.login-popup .holder {
	padding: 25px;
	width: 452px;
}
.registration-popup .logo,
.login-popup .logo, .sites-popup .logo {
	width: 239px;
	height: 112px;
	margin: 0 auto 37px;
	background-position: 0 -109px;
}
.registration-form,
.login-form {
	background: #2e3842;
	border-radius: 3px;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
	padding: 26px 34px 11px;
	/*width: 560px;*/
	margin: 0 0 19px;
	position: relative;
    overflow-x:hidden!important;
}

.login-form.inner { width: 580px; }

.login-form.inner label {
    max-width: 300px;
    word-wrap: break-word;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}
.login-form.inner div.site-name {
    float: left;
    margin: 0 0 3px;
	max-width: 540px;
}

.login-form.inner .site-name label {
	max-width: 3000px;
	float: none;
	white-space: normal;
}

.login-form:after,
.login-form .row:after,
.invitation-popup .btn-area:after {
    clear: both;
    display: block;
    content: "";
}
.registration-form .row,
.login-form .row,
.setting-date .row {
    padding: 0 0 21px;
    position: relative;
}

.registration-form label,
.login-form label {
    float: left;
    margin: 0 0 3px;
    text-transform: capitalize;
    max-width: 350px;
    /*word-wrap: break-word;
    overflow: hidden !important;
    white-space: nowrap;
    text-overflow: ellipsis;*/
}

.registration-form label {
    width: 247px;
    padding: 0 23px 0 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    margin: 0;
}
.registration-form .area,
.login-form .area {
	border-bottom: 1px solid #86bad5;
	overflow: hidden;
	position: relative;
	padding: 0 7px 3px;
	margin: 0 1px 10px;
	clear: both;
}
.registration-form .area:after,
.registration-form .area:before,
.login-form .area:after,
.login-form .area:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.registration-form .area:before,
.login-form .area:before {
	left: auto;
	right: 0;
}
.registration-form input[type="password"],
.registration-form input[type="text"],
.login-form input[type="text"],
.login-form input[type="password"] {
	outline: none;
	border: none;
	float: left;
	width: 100%;
	background: #2e3842;
}
.registration-form input[type="password"],
.registration-form input[type="text"]{
	font-size:14px;
	line-height:17px;
	color:#fff;
}
.registration-form .row.error input[type="text"],
.registration-form .row.error input[type="password"],
.login-form .row.error input[type="text"],
.login-form .row.error input[type="password"] {
	color: #ff1313;
}

    .registration-form .btn-blue,
    .login-form .btn-blue {
        background: #86bad5;
        /* width: 199px; */
        min-width:160px;
        width: auto;
        color: #2e3842;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        border: none;
        display: block;
        text-transform: capitalize;
        border-radius: 25px;
        letter-spacing: 0;
        /* padding: 0; */
        padding: 0 19px;
    }

.registration-form .info, .login-form .info, .login-form .infoServer {
    color: #ff1313;
    font-size: 14px;
    position: relative;
    margin: 7px auto 1px;
    /*position: absolute;
	left: 29px;
	right: 10px;*/
    /*bottom: 8px;*/
    text-align: center;
    display: none;
    line-height: 18px;
}

.infoUserMessage {
    color: #ff1313;
    font-size: 14px;
    position: absolute;
    left: 29px;
    right: 10px;
    text-align: center;
    display: none;
    line-height: 18px;
}

.login-form .infoServer { display: block; }
.registration-form .info:before,
.login-form .info:before,
.login-form .infoServer:before {
	background: url(images/sprite.png) no-repeat -114px -126px;
	width: 18px;
	height: 17px;
	display: inline-block;
	content: "";
	vertical-align: top;
	margin: -2px 9px 0 0;
}
.registration-form.error .info,
.login-form.error .info {
	display: block;
}
.registration-form .btn-area,
.login-form .btn-area {
	position: relative;
	width: 199px;
	margin: 0 auto 5px;
}
.registration-form .btn-area{
	margin: 0 0 -1px 246px;
}
.registration-form .btn-area .loader,
.login-form .btn-area .loader {
	position: absolute;
	left: 25px;
	top: 8px;
	display: none;
}
.login-form.loading .btn-area .loader { display: block; }
.nav-lang {
	position: absolute;
    top: 10px;
    right: 40px;
	font-size: 12px;
	line-height: 15px;
	width: 280px;
    z-index: 1200; /* above fancy-box overaly */
}
.nav-lang a {
	float: left;
	color: #fff;
}
.nav-lang:hover > a,
.nav-lang.active > a {
	color: #bbb;
	text-decoration: underline;
}
.nav-lang img {
	display: block;
	margin: 0 0 5px;
}
.nav-lang .dropdown {
	position: absolute;
	left: 0;
	bottom: -13px;
	background: #222931;
	border-bottom: 2px solid #343f4a;
	width: 237px;
	border-radius: 3px;
	font-size: 13px;
	line-height: 16px;
}
.nav-lang ul {
	padding: 11px 2px 12px 0;
	margin: 0;
	list-style: none;
	position: relative;
	border-radius: 3px;
	border-bottom: 2px solid #f37564;
}
.nav-lang .dropdown:after,
.nav-lang .dropdown:before {
	top: 100%;
	left: 40px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.nav-lang .dropdown:after {
	border-color: rgba(243, 117, 100, 0);
	border-top-color: #f37564;
	border-width: 7px;
	margin-left: -7px;
}
.nav-lang .dropdown:before {
	border-color: rgba(52, 63, 74, 0);
	border-top-color: #343f4a;
	border-width: 8px;
	margin-left: -8px;
}
.nav-lang ul li { overflow: hidden; }
.nav-lang ul li a {
	color: #d4d1d1;
	display: block;
	float: none;
	padding: 0 5px 2px 17px;
}
.nav-lang ul li a:hover,
.nav-lang ul li a:active,
.nav-lang ul li.active a {
	border-left: 2px solid #f47564;
	background: #484f59;
	color: #fff;
	text-decoration: none;
	padding-left: 15px;
}
.nav-lang ul li a:active,
.nav-lang ul li.active a { background: #6b4443; }
.login-form .register-link{
	position:absolute;
	bottom:31px;
	right:13px;
	font-size:12px;
	line-height:15px;
	color:#fff;
	text-decoration:underline;
}
.login-form .register-link.lost-pass-link {
	bottom:11px;
}

/* registration-popup */

.registration-popup .holder { width: 692px; }

.registration-popup .logo { margin-bottom: 12px; }

.registration-form {
    padding: 30px 40px 9px 18px;
    margin-bottom: 14px;
    width: 630px;
}

.registration-form .select-area { width: 360px !important; }

.registration-form .captcha-box { margin-left: auto; margin-right: auto; width: 240px; }

.registration-form .captcha-box img { vertical-align: top; }
.registration-form .captcha-box  a {display:inline-block;padding-top:10px; }

.registration-form .row:after,
.setting-date .row:after {
    content: '';
    display: block;
    clear: both;
}

.registration-form .area { padding-bottom: 1px; }

.registration-form .area,
.setting-date .input-area {
    clear: none;
    margin: 0;
}

.registration-form select {
    width: 382px;
    color: #fff;
}

.registration-form .area.has-link { padding-right: 55px; }

.registration-form input[type="password"] { position: relative; }

.popup-password .input-placeholder-text,
.registration-form .input-placeholder-text {
    font-size: 14px;
    line-height: 15px;
    color: #6c849b !important;
    position: absolute;
    top: 6px;
    left: 0;
    padding: 0 0 0 7px;
    z-index: 10;
    width: 245px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: red;
}

.registration-form .area .show-link {
    color: #fff;
    position: absolute;
    top: 3px;
    right: 5px;
    color: #d4d1d1;
    font-size: 14px;
    line-height: 15px;
    border-left: 1px solid #86bad5;
    padding: 0 0 0 8px;
}

.registration-form .check-row:after {
    content: '';
    display: block;
    clear: both;
}

.registration-form .check-holder {
    float: left;
    margin-top: 10px;
    width:100%;
}

.registration-form .check-holder label {
    font-size: 12px;
    line-height: 15px;
    color: #bebebe;
    width: auto;
    padding: 0;
    text-transform: none;
}
.registration-form .check-holder label a{
	color:#bebebe;
	font-weight:400;
	text-decoration:underline;
}
.registration-form .check-holder label a:hover{
	text-decoration:none;
}
.registration-form .already-registered, .back-link1{
	color:#bebebe;
	font-size:12px;
	line-height:15px;
	float:right;
	text-decoration:underline;
}
.registration-form .already-registered:hover, .back-link1:hover{
	text-decoration:none;
}

.registration-form .info{
	left:57px;
	padding-bottom:5px;
	padding-right:40px;
}

.registration-form .error-message,
.user-edit .error-message,
.popup-password .error-message,
.setting-msd .error-message,
.setting-date .error-message {
    position: relative;
    top: 0;
    left: 1px;
    right: 1px;
    bottom: 0;
    background: #2e3842;
    color: #f00;
    font-size: 13px;
    line-height: 14px;
    z-index: 20;
    padding: 0 0 0 8px;
    display: none;
    float: right;
    min-width: 300px;
    max-width: 380px;
    width: 100%;
    text-align: left;
    margin-top: 2px;
}

.registration-form .error .error-message,
.user-edit .error .error-message,
.setting-msd .error .error-message,
.setting-date .error .error-message { display: block; }

.user-edit .error-message {
    float:left;
    width:auto;
}
        
.setting-msd .error-message,
.setting-date .error-message {
    line-height: inherit;
}
.user-edit .error-message,
.setting-msd .error-message {
    z-index: 5;
    background: #3e4c60;
}

.setting-date .error-message {
    z-index: 5;
    background: transparent;
    float: none;
    left: 130px;
}

.user-edit .infoUserMessage {
    left: inherit;
    right: inherit;
    position: inherit;
}

.error .chk-area { border-color: #f00 !important; }

.thank-popup { width: 692px; }

.thank-popup .holder {
    background: #2e3842;
    border-radius: 3px;
    font-size: 18px;
    line-height: 24px;
    padding: 112px 80px 112px 148px;
    min-height: 215px;
    margin: 0 0 14px;
}

.thank-popup .title {
    font-size: 22px;
    line-height: 26px;
    font-weight: 300;
    display: block;
    margin: 0 0 25px -76px;
    padding: 0 0 0 76px;
    position: relative;
}

.thank-popup .title:before {
    background: url(images/icon-thank-you.png) no-repeat;
    width: 51px;
    height: 51px;
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
}

.thank-popup.error .title:before {
    background: url(images/sprite.png) no-repeat 0px -309px;
    width: 67px;
    height: 67px;
}

.thank-popup.noicon .title:before { background: none; }

.thank-popup p { margin: 0; }

/* security details style */
.security-details {
	background: #3e4c60;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	margin: 0 0 15px;
}
.security-details .head {
	background: #57697c;
	position: absolute;
	padding: 15px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 100%;
	left: 0;
	z-index: 4;
	top: 100px;
}
.alarm-activate .security-details .head { top: 133px; }
.security-details .head .holder {
	background: #2f3943;
	height: 66px;
	padding: 10px 28px;
	border-radius: 3px 3px 0 0;
}
.security-details .details {
	overflow: hidden;
	padding: 5px 28px 30px;
}
.security-details .menu-outer{
	float:left;
	width:30%;
	max-width:300px;
	margin:22px 0 0 -9px;
}

.security-details .menu-outer span:first-child
{
    font-size: 22px;
}

.popup-arm .row,
.security-details .row {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	margin: 0 0 -6px;
	text-align:center;
}
.popup-arm label,
.security-details label {
	float: left;
	color: #d4d1d1;
	font-size: 18px;
	line-height: 21px;
	margin: 18px 0;
	text-transform: capitalize;
	max-width:300px;
	width:30%;
	text-align:left;
}
.popup-arm label {
	margin: 22px 0;
	width:70%;
}
.popup-arm .frame,
.security-details .frame {
	float:left;
	position: relative; 
	width:70%; 
	max-width:750px; 
}
.popup-arm .frame {
	width:30%; 
}
.security-details .lavalamp-item{
	border: 2px solid #000;
	height: 28px;
	left: 0;
	position: absolute;
	top: 17px;
	width: 28px;
	border-radius: 6px;
}
.security-details .title-head {
	text-transform: uppercase;
	font-size: 14px;
	line-height: 17px;
	color: #d4d1d1;
	text-align: center;
	float: left;
	width:33.33%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	max-width: 250px;
	padding:0 0 0 17px;
}
.security-details .title-head.partially{ padding:0 0 0 19px;}
.security-details.hidden-partially .title-head.armed{
	padding:0 0 0 2px;
}
.security-details.hidden-partially .title-head.disarmed{ 
	padding:0; 
	margin:0 0 0 -5px;
}
.security-details .title-head img {
	display: block;
	margin: 0 auto 3px;
}
.security-details .check-area {
	position: relative;
	width:33.3%;
	max-width: 250px;
	text-align: center;
	float:left;
	z-index: 1;
}
.security-details .menu {
	float: left;
	margin: 14px 5px 0 0;
	max-width: 280px;
	left: 0;
}
.security-details .menu > li > a:after {
	right: 8px;
	top: 16px;
}
.security-details .menu > li > a { color: #fff; }
.security-details .menu ul {
	font-size: 22px;
	line-height: 25px;
}
.security-details .menu ul li:first-child a { padding: 3px 10px 7px; }
.security-details .menu ul li a:hover { padding-left: 8px; }
.security-details .menu ul li a {
	padding: 3px 10px 7px;
	color: #fff;
}
.rad-area {
    border: solid 1px transparent;
}
.rad-area.rad-focus {
   border: solid 1px #4464a0;
 }
.popup-arm .rad-area,
.security-details .rad-area {
	background: url(images/sprite.png) no-repeat -244px -137px;
	width: 32px;
	height: 32px;
	display:inline-block;
	margin:17px;
	vertical-align:top;
	float:none;
}
.popup-arm .rad-area:hover,
.security-details .rad-area:hover {
	background-position: -227px 0;
	width: 66px;
	height: 66px;
	margin:0;
}
.popup-arm .rad-checked,
.popup-arm .rad-checked:hover,
.security-details .rad-checked,
.security-details .rad-checked:hover {
	background-position: -227px -60px;
	width: 66px;
	height: 66px;
	margin:0;
}
.security-details .disarmed .rad-area:hover { background-position: -227px -233px; }
.security-details .disarmed .rad-checked,
.security-details .disarmed .rad-checked:hover { background-position: -227px -293px; }
.popup-arm .armed .rad-area:hover,
.security-details .armed .rad-area:hover { background-position: -227px -363px; }
.popup-arm .armed .rad-checked,
.popup-arm .armed .rad-checked:hover,
.security-details .armed .rad-checked,
.security-details .armed .rad-checked:hover { background-position: -228px -612px; }
.hidden-partially .partially { display: none; }
.hidden-armed .armed { display: none; }
.hidden-disarmed .disarmed { display: none; }
.hidden-partially .frame {
	position: relative;
	left: 0px;
}
.hidden-partially .row .frame { left: -13px; }
.security-details .loader {
	position: absolute;
	right: -25px;
	top: 17px;
	display: none;
}
.security-details .loading .loader { display: block; }
/* security bypass popup styles */
.popup-security {
	background: #3d4a5e;
	border-radius: 7px;
	border: 3px solid #2a3a52;
	width: 437px;
    margin: 50px 20px;
	position: relative;
	color: #e5e4ea;
	line-height: 24px;
	padding: 10px 26px 18px;
}

.terms-and-conditions .close,
.popup-arm .close,
.popup .close,
.popup-camera .close,
.popup-code .close,
.popup-pcode .close,
.popup-countdown .close,
.popup-security .close {
    background: url(images/sprite.png) no-repeat -130px -479px;
    width: 34px;
    height: 35px;
    overflow: hidden;
    text-indent: -9999px;
    position: absolute;
    right: -13px;
    top: -13px;
    z-index: 5;
}

.terms-and-conditions .close:hover,
.popup-arm .close:hover,
.popup .close:hover,
.popup-code .close:hover,
.popup-pcode .close:hover,
.popup-countdown .close:hover,
.popup-camera .close:hover,
.popup-security .close:hover { background-position: -160px -156px; }

.terms-and-conditions .close:active,
.popup-arm .close:active,
.popup .close:active,
.popup-code .close:active,
.popup-pcode .close:active,
.popup-countdown .close:active,
.popup-camera .close:active,
.popup-security .close:active {
    background-position: -160px -195px;
    color: #f47564;
}

.popup-security h2 {
    border-bottom: 1px solid #57697c;
    padding: 0 24px 12px;
    font-weight: 300;
    font-size: 25px;
    line-height: 28px;
    color: #fff;
    margin: 0 -24px 17px;
}
.popup-security .date { display: block; }
.popup-security .date span {
	background: url(images/divider.png) no-repeat 0 5px;
	padding: 0 0 0 11px;
	margin: 0 0 0 4px;
}
.popup-security .low-battery {
	display: block;
	color: #ff1313;
	text-align: center;
	margin: -4px 10px 26px 59px;
	font-weight: 400;
}
.popup-security .low-battery:before {
	content: "";
	background: url(images/sprite.png) no-repeat 0 -310px;
	display: block;
	margin: 0 auto 8px;
	width: 77px;
	height: 63px;
}
.popup-security p { margin: 0 0 24px; }
.popup-security .btn-area { overflow: hidden; }

.btn-blue {
	background: #86bad5;
	border-radius: 25px;
	padding: 0 25px;
	color: #2e3842;
	line-height: 48px;
	letter-spacing: 1px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}
.notify-edit .btn-blue {
	background: #86bad5;
	border-radius: 15px;
	padding: 0 25px;
	color: #2e3842;
	line-height: 38px;
	letter-spacing: 1px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}
.popup-security .btn-blue {
	padding: 0 33px;
	letter-spacing: 1px;
	margin: 0 32px 0 0;
}
.btn-blue:hover {
	background: #5dacd5;
	text-decoration: none;
}
.btn-blue:active { background: #10b2da; }
.popup-security .btn-area .link {
	margin: 5px 0 0;
	display: inline-block;
	vertical-align: middle;
}
.link { color: #bbb; }
.link:focus { color: #fff; }
.popup-arm,
.popup-countdown,
.popup-pcode,
.popup-email,
.popup-code {
	background: #3d4a5e;
	border-radius: 7px;
	border: 3px solid #2a3a52;
	margin: 50px 20px;
	width: 201px;
	color: #fff;
	font-size: 25px;
	position: relative;
	line-height: 28px;
	padding: 23px 68px 18px;
}
.popup-confirm {
    width: 421px;
}
.popup-resign-confirm {
    width: 650px;
    font-size: 22px;
    padding: 23px 22px 7px;
}
.popup-email {
    width: 450px;
    height: 200px;
    font-size: 20px;
    padding: 20px;
    padding-bottom: 16px;
}
.popup-arm {
	width: 301px;
	padding: 23px 38px 38px;
	background: #3e4c60;
}
.popup-countdown label,
.popup-pcode label,
.popup-code label {
	display: block;
	text-transform: capitalize;
	margin: 0 0 30px;
}

.popup-email .infoUserMessage {
    color: #ff1313;
    font-size: 15px;
    text-align: left;
    right: 20px;
    display: none;
}

.popup-countdown .area,
.popup-pcode .area,
.popup-code .area {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 194px;
    padding: 0 1px;
    margin: 0 0 40px 1px;
}
.popup-countdown .area input[type="text"],
.popup-pcode .area input[type="text"],
.popup-email .area input[type="text"],
.popup-email .area input[type="password"],
.popup-code .area input[type="text"] {
	outline: none;
	border: 0;
	background: #6b7585;
	color: #fff;
	position: relative;
	height: 58px;
	padding: 14px 7px 15px;
	float: left;
	font-size: 24px;
	line-height: 29px;
	width: 100%;
	z-index: 600;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.popup-email .area input[type="text"],
.popup-email .area input[type="password"] {
    padding: 2px;
    height: 30px;
    font-size: 21px;
}

.popup-countdown .area input[type="password"],
.popup-pcode .area input[type="password"],
.popup-code .area input[type="password"] {
    width:192px;
}

.popup-code ::-webkit-input-placeholder {color: #fff;}
.popup-code :-moz-placeholder {color: #fff;}
.popup-code ::-moz-placeholder {color: #fff;}
.popup-code :-ms-input-placeholder {color: #fff;}

.popup-arm .btn-blue,
.popup-countdown .btn-blue,
.popup-pcode .btn-blue,
.popup-code .btn-blue {
	width: 200px;
	padding: 0;
	cursor: pointer;
	border: 0;
	height: 48px;
}
.popup-arm .btn-blue {
	position: relative;
	left: 50px;
	top: 15px;
}

.popup-email .btn-area {
    position: absolute;
    bottom: 17px;
    width: 90%;
    text-align: center;
}

.popup-email .btn-blue {
    line-height: 28px;
    letter-spacing: 1px;
    font-size: 16px;
    border: 0;
    padding: 0 25px;
    margin: 0 20px 0 10px;
    cursor: pointer;
}
/* popup help styles */
.popup-help {
	margin: 25px auto;
	color: #e5e4ea;
	font-size: 21px;
	padding:0 28px 0 253px;
	overflow:hidden;
	line-height: 30px;
}
@media (max-width: 1360px){
	.popup-help{padding:0 50px 0 253px;}
	.popup-help .textarea p{ margin:0 0 0 -80px;}
	.popup-help .textarea .arrow{ margin-right:100px;}
}
.popup-help .textarea {
	float: right;
	max-width: 300px;
	width:33.33%;
	padding: 0 22px 90px 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.popup-help .textarea .icon { 
	display:block;
	margin:-7px auto 0; 
}
.popup-help .textarea p { clear: both; }
.popup-help .textarea .arrow {
	clear: both;
	background: url(images/sprite.png) no-repeat -170px -287px;
	width: 36px;
	height: 39px;
	overflow: hidden;
	text-indent: -9999px;
	float: right;
	margin: 4px 140px 2px 0;
}
.popup-help p {
	margin: 0;
	letter-spacing: 0.5px;
}
.popup-help .icon-area,
.popup-help .holder-area {
	float:left;
	width:70%;
	max-width:750px;
	background:#0e1417;
	border-radius:22px;
	padding:7px 0;
	position:relative;
	z-index:500;
	margin:85px 0 0;
}
.popup-help .holder-area {
	background:none;
	margin:0;
}
.popup-help .icon-area span{
	width:33.33%;
	float:left;
	max-width:250px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:0 19px 0 0;
	-webkit-box-sizing:border-box;
}
.popup-help .icon-area span:first-child{ padding:0 17px 0 0;}
.popup-help .icon-area span img{ 
	display:block;
	margin:0 auto;
}
.popup-help .details {
	overflow:hidden;
}
.popup-help .textbox,
.popup-help .box {
	position: relative;
	float:left;
	max-width:300px;
	width:30%;
	padding: 0 0 3px;
}
.popup-help .icon-area > span:first-child{
	position: relative;
}
.popup-help .icon-area > span:first-child:after {
	content: "";
	position: absolute;
	margin-left: -44px;
	left: 50%;
	top: -58px;
	background: url(images/sprite.png) no-repeat -167px -235px;
	width: 38px;
	height: 39px;
}
.popup-help .textbox p { margin: 0 0 27px; }
.popup-help .btn-blue {
	min-width: 147px;
	font-size: 18px;
}
/* camera list navbar styles */
.navbar {
	background: #2e3842;
	height: 39px;
	border-top: 1px solid #495868;
}
[data-page^="events"] .navbar { height: 40px; }
.navbar:before {
	background: #617284;
	height: 1px;
	content: "";
	display: block;
}
.navbar .nav {
	float: left;
	max-width: 550px;
	margin: 0;
	padding: 0;
	font-weight: 400;
	text-transform: uppercase;
	list-style: none;
}
.navbar .nav li {
	float: left;
	padding: 0 2px 0 0;
	background: url(images/divider2.png) no-repeat 100% 0;
}
.navbar .nav li a {
	color: #d2dbe5;
	font-size: 14px;
	line-height: 17px;
	padding: 11px 23px 10px;
	float: left;
	position: relative;
}
[data-page^="events"] .navbar .nav li a { padding-bottom: 11px; }
.navbar .nav li a:hover,
.navbar .nav li.active a,
.navbar .nav li a.active {
	border-bottom: 3px solid #f17463;
	padding-bottom: 7px;
	text-decoration: none;
}
[data-page^="events"] .navbar .nav li a:hover,
[data-page^="events"] .navbar .nav li.active a { padding-bottom: 8px; }
.navbar .nav .active a,
.navbar .nav a.active,
.navbar .nav li a:active {
	background: #fff;
	color: #3e4c60;
}
.navbar .nav .live a:after,
.navbar .nav .still a:after,
.navbar .nav .errors a:after {
	background: url(images/sprite.png) no-repeat -123px -390px;
	width: 26px;
	height: 26px;
	overflow: hidden;
	content: "";
	position: absolute;
	left: 20px;
	top: 5px;
	text-indent: -9999px;
}
.navbar .nav .still a:after {
	background-position: -160px -392px;
	width: 29px;
	height: 23px;
	left: 24px;
	top: 8px;
}
.navbar .nav .live.active a:after,
.navbar .nav .live a:active:after { background-position: 0 -438px; }
.navbar .nav .still.active a:after,
.navbar .nav .still a:active:after { background-position: -37px -440px; }
.navbar .nav .live a { padding: 11px 25px 10px 54px; }
.navbar .nav .still a { padding: 11px 25px 10px 62px; }
.navbar .nav .errors a:after {
	background-position: -199px -433px;
	width: 24px;
	height: 23px;
	left: 16px;
	top: 8px;
}
.navbar .nav .errors a { padding: 11px 20px 11px 52px }
.navbar .filter-menu {
	float: right;
	max-width: 300px;
	margin: 0;
	padding: 9px 10px 0 0;
	list-style: none;
}
.navbar .filter-menu > li {
	float: left;
	background: none;
	position: relative;
	padding: 0 0 0 21px;
}
.navbar .filter-menu > li > a {
	background: url(images/sprite.png) no-repeat 0 -394px;
	width: 22px;
	padding: 0;
	height: 22px;
	overflow: hidden;
	text-indent: -9999px;
	display: block;
}
.navbar .filter-menu > li > a:hover,
.navbar .filter-menu > li > a.active,
.navbar .filter-menu > li > a:active { background-position: -133px -336px; }
.navbar .filter-menu > li.grid > a {
	background-position: -34px -395px;
	width: 21px;
	height: 21px;
}
.navbar .filter-menu > li.grid > a:hover,
.navbar .filter-menu > li.grid > a.active,
.navbar .filter-menu > li.grid > a:active { background-position: -167px -337px }
.navbar .filter-menu > li.camview > a {
	background-position: -66px -395px;
	width: 26px;
	height: 21px;
}
.navbar .filter-menu > li.camview > a:hover,
.navbar .filter-menu > li.camview > a.active,
.navbar .filter-menu > li.camview > a:active { background-position: -199px -337px }
.navbar .filter-menu > li.menu-view > a {
	background: url(images/sprite.png) no-repeat -187px -549px;
	width: 28px;
	height: 20px;
}
.navbar .filter-menu > li.menu-view > a:hover,
.navbar .filter-menu > li.menu-view > a.active,
.navbar .filter-menu > li.menu-view > a:active { background-position: -187px -516px; }
.navbar .filter-menu > li.map-view > a {
	background: url(images/sprite.png) no-repeat -221px -515px;
	width: 20px;
	height: 28px;
	margin-top: -4px;
}
.navbar .filter-menu > li.map-view > a:hover,
.navbar .filter-menu > li.map-view > a.active,
.navbar .filter-menu > li.map-view > a:active { background-position: -221px -548px; }
[data-page^="events"] .navbar .filter-menu { padding: 0; }
[data-page^="events"] .navbar .filter-menu > li { padding: 0; }
[data-page^="events"] .navbar .filter-menu > li > a {
	height: 38px;
	padding: 0 10px;
	width: 27px;
}
[data-page^="events"] .navbar .filter-menu > li > a:hover,
[data-page^="events"] .navbar .filter-menu > li.active > a { background-color: #222931 !important; }
.navbar .filter-menu > li.print > a,
.navbar .filter-menu > li.print > a:hover {
	background-position: 11px -594px;
	width: 30px;
}
.navbar .filter-menu > li.download > a,
.navbar .filter-menu > li.download > a:hover {
	background-position: -39px -594px;
	width: 28px;
}
.navbar .filter-menu > li.search > a,
.navbar .filter-menu > li.search > a:hover {
	background-position: -87px -594px;
	width: 28px;
}
.navbar .filter-menu > li.ico-calendar > a,
.navbar .filter-menu > li.ico-calendar > a:hover {
	background-position: -136px -594px;
	width: 24px;
}
.navbar .menu {
	float: left;
	font-size: 15px;
	font-weight: 400;
	line-height: 18px;
	margin: 6px 0 0 6px;
	text-transform: uppercase;
	max-width: 280px;
}
.navbar .menu li { width: 58px; }
.navbar .menu li a {
	padding-left: 5px;
	padding-right: 15px;
}
.navbar .menu li a,
.navbar .menu ul li a { color: #d2dbe5; }
.navbar .menu ul {
	width: 56px;
	left: 0;
	font-size: 15px;
}
.navbar .menu > li > a:after {
	top: 10px;
	right: 8px;
}
/* Multiple cameras view styles */
.camera-area .camera-slides {
	padding-bottom: 0;
	margin: 21px 0 0
}
.camera-area .camera-slides:first-child { margin: 0; }
.camera-area .camera-slides .head { padding: 0 14px 8px }
.camera-area h2 { text-transform: capitalize; }
.camera-area h2 a {
	color: #fff;
	display: block;
	padding: 8px 14px;
}
.camera-area h2 a:after {
	background: url(images/sprite.png) no-repeat -106px -444px;
	width: 14px;
	height: 13px;
	content: "";
	float: left;
	margin: 5px 10px 0 0;
}
.camera-area h2 a:hover { text-decoration: none; }
.camera-area h2:hover a:after { background-position: -136px -444px; }
.camera-area .active h2 a:after {
	background-position: -163px -444px;
	margin-top: 7px;
}
/* cam grids styles */
.cam-grids {
	background: #3e4c60;
	border-radius: 3px;
	padding: 14px 0 16px;
	margin: 0 auto 1px;
	position: relative;
	overflow: hidden;
	letter-spacing: -0.3em;
}
.cam-grids:after {
	display: block;
	content: "";
	clear: both;
}
.cam-grids .camera-box {
	float: none;
	display: inline-block;
	letter-spacing: 0;
	vertical-align: top;
	width: 46.3%;
	margin: 2.2% 1.85% 2%;
}
.cam-grids .camera-box a { border-width: 2px; }
.cam-grids .camera-box .caption {
	left: 2px;
	right: 2px;
	bottom: 2px;
}
.cam-grids .camera-box .caption .frame {
	bottom: 8px;
	left: 1.8%;
	right: 1.8%;
}
.cam-grids.items3 {padding: 14px 0 13px;}
.cam-grids.items3 .camera-box {
	width: 29.3%;
	margin: 1.5% 2% 1.8%;
}
.cam-grids.items3 .camera-box .caption .frame {
	left: 3%;
	right: 3%;
}
.cam-grids .camera-selected,
.cam-grids .active .add-camera { display: none; }
.cam-grids .active .camera-selected { display: block; }
.cam-grids .add-camera a {
	position: relative;
	border: 2px solid #7a828a;
}
.cam-grids .add-camera em {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	color: #3e4c60;
	text-transform: capitalize;
	overflow: hidden;
	text-align: center;
	font-style: normal;
	font-size: 15px;
	line-height: 18px;
	margin: -27px 0 0;
}
.cam-grids .add-camera em:before {
	background: url(images/sprite.png) no-repeat 0 -518px;
	width: 51px;
	height: 51px;
	overflow: hidden;
	text-indent: -9999px;
	content: "";
	display: block;
	margin: 0 auto 3px;
}
.cam-grids .camera-box .add-camera a.hover em:before { background-position: -76px -518px; }
.camera-box .add-camera a.hover { border-color: #86bad5; }
.camera-box .add-camera a:active { border-color: #f47564; }
.cam-grids .camera-box .add-camera a.hover,
.cam-grids .camera-box .add-camera a:active {
	background: #bec0c4 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlYzBjNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMWE2YWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bec0c4), color-stop(100%, #a1a6ae));
	background: -webkit-linear-gradient(top, #bec0c4 0%, #a1a6ae 100%);
	background: -o-linear-gradient(top, #bec0c4 0%, #a1a6ae 100%);
	background: -ms-linear-gradient(top, #bec0c4 0%, #a1a6ae 100%);
	background: linear-gradient(to bottom, #bec0c4 0%, #a1a6ae 100%);
}
/* select camera popup styles */
.popup-camera {
	width: 634px;
	margin: 20px;
	padding:0 0 20px;
	position: relative;
	background: #303b49;
	border: 3px solid #2a3a52;
	color: #fff;
	border-radius: 7px 7px 0 0;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.6);
}
.popup-camera .head {
	background: #56657a;
	padding: 9px 23px 11px;
	color: #e5e4ea;
	margin: 0 0 23px;
}
.popup-camera .head h2 {
	font-size: 25px;
	line-height: 28px;
	margin: 0 0 9px;
	text-transform: capitalize;
	font-weight: 300;
}
.popup-camera .head p { margin: 0; }
.popup-camera .content {
	overflow: auto;
	height: 100% !important;
	padding: 0 20px 0 22px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
	width: 634px !important;
}
.popup-camera .block {
	overflow: hidden;
	border-radius: 4px;
	background: #3e4b5f;
	border: 1px solid #678ba3;
	padding: 8px 0 0;
	margin: 40px 0 0;
}
.popup-camera .block:first-child { margin: 0; }
.popup-camera .block h3 {
	border-bottom: 1px solid #57697c;
	margin: 0;
	font-weight: 300;
	font-size: 20px;
	line-height: 23px;
	padding: 0 15px 7px;
}
.popup-camera .block .holder {
	overflow: hidden;
	padding: 11px 11px 20px;
}
.popup-camera .camera-box {
	width: 31.7%;
	margin: 9px 0.8% 0;
	background: #fff;
}
.popup-camera .camera-box a.hover .caption,
.popup-camera .camera-box a.pressed .caption {
	height: 40%;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjMjIyOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYzIyMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(28,34,40,0)), color-stop(100%, rgba(28,34,40,1)));
	background: -webkit-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -o-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -ms-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: linear-gradient(to bottom, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
}
.popup-camera .camera-box a { color: #fff; }
.popup-camera .camera-box .selected {
	background: url(images/sprite.png) no-repeat;
	width: 51px;
	height: 51px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	left: -9999px;
	top: 50%;
	margin: -25px 0 0 -25px;
}
.popup-camera .camera-box a.hover .selected,
 .popup-camera .camera-box a.pressed .selected { left: 50%; }
.popup-camera .camera-box a.pressed .selected { background-position: 0 -61px; }
.popup-camera .close {
	background-position: -164px -112px;
	width: 36px;
	height: 34px;
	right: -16px;
	top: -14px;
}
.popup-camera .close:hover { background-position: -161px -156px; }
.popup-camera .close:active { background-position: -161px -195px; }
/* camera details view styles */
.camera-details {
	background: #3e4c60;
	border-radius: 3px;
	padding: 0 0 5px;
	overflow: hidden;
	margin: 0 0 -4px;
}
.camera-details .head {
	border-bottom: 1px solid #57697c;
	padding: 9px 12px 7px;
	overflow: hidden;
	position: relative;
	min-height: 23px;
}
.camera-details h2 {
	font-size: 20px;
	text-transform: capitalize;
	line-height: 23px;
	color: #fff;
	font-weight: 300;
	margin: 0;
	padding: 0 35px 0 0;
	float: left;
	position: relative;
}
.edit {
	background: url(images/sprite.png) no-repeat -221px -480px;
	width: 19px;
	height: 19px;
	overflow: hidden;
	text-indent: -9999px;
	display: inline-block;
	vertical-align: top;
	margin: 7px 0 0 22px;
}
.edit:hover,
.edit:active { background-position: -248px -480px; }
.camera-details .edit {
	position: absolute;
	right: 0;
	margin: 0;
	top: 1px;
}
.edit-area {
	border-bottom: 1px solid #86bad5;
	width: 179px;
	top: 8px;
	position: absolute;
	left: 12px;
	padding: 0 1px;
	display: none;
}
.edit-area:after,
.edit-area:before {
	position: absolute;
	width: 1px;
	height: 7px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.edit-area:before {
	left: auto;
	right: 0;
}
.edit-area input[type="text"] {
	outline: none;
	border: none;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 100%;
	padding: 2px 10px 3px;
	font-size: 14px;
	line-height: 17px;
	height: 23px;
	background: #6b7585;
}
.camera-details .edit-area{ top:5px;}
.camera-details .edit-area input[type="text"]{
	color:#fff;
	font-size:20px;
	line-height:23px;
	height:29px;
	padding: 2px 10px 4px;
}
.camera-details .active .edit-area { display: block; }
.camera-details .view-area {
	overflow: hidden;
	padding: 6px 3px 5px 13px;
}
.camera-details .cameras-list {
	float: right;
	width: 191px;
	padding: 0 0 0 17px;
}
.camera-details .camera-box {
	float: none;
	margin: 14px 0 0;
	width: 172px;
	position: relative;
}
.camera-details .camera-box:first-child { margin: 0; }
.camera-details .cameras-list .menu > li > a:after {
	background: url(images/sprite.png) no-repeat -118px -306px;
	width: 8px;
	height: 5px;
	right: 15px;
	top: 12px;
}
.camera-details .cameras-list .menu > li:hover > a:after,
.camera-details .cameras-list .menu > li.active > a:after { background-position: -132px -306px; }
.camera-details .cameras-list .menu {
	font-size: 14px;
	z-index: 5;
	line-height: 17px;
	float: left;
	margin: 0 0 8px -10px;
	text-transform: none;
}
.camera-details .cameras-list .menu > li > a { color: #fff; }
.camera-details .menu ul {
	left: 0;
	width: 100%;
	font-size: 14px;
	color: #fff;
	line-height: 17px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.camera-details .cameras-list .scroll-block {
	clear: both;
	float: left;
  	min-height:307px;
}
.camera-details .cameras-list .scrollable-area-wrapper { height: 100% !important; }
.camera-details .cameras-list .holder {
	height: 100% !important;
	overflow: auto;
	clear: both;
	width: 192px !important;
	position: relative;
}
.camera-details .viewbig {
	overflow: hidden;
	padding: 35px 0 0;
}
.camera-details .img-area-holder {
   	margin: 0 auto 32px;
	min-height:307px;
	min-width:410px;
}
.camera-details .img-area {
	border: 2px solid #7a828a;
	overflow: hidden;
}
.camera-details .img-area img {
	display: block;
	width: 100%;
	height: 100%;
   	min-height:300px;
}
.camera-details .btn-holder {
	margin: 0 auto;
	overflow: hidden; 
}
.camera-details .btn-holder .btns {
	float: left;
}
.camera-details .btn-holder .link-area{
	float:right;
	margin: 12px 2px 0;
	font-size: 14px;
	line-height: 17px;
	color: #fff;
}
.camera-details .btn-holder .link-area .popup-note{
	display:none;
	padding:8px 0;
}
.camera-details .btn-holder .link-area .popup-note:after{
	background:url(images/sprite.png) no-repeat 100% 100%;
	width:33px;
	height:33px;
	overflow:hidden;
	text-indent:-9999px;
	text-transform: capitalize;
	float:right;
	content:"";
	margin:-7px 0 0 10px;
}
.camera-details .btn-holder .link {
	float: right;
	color:#fff;
	text-decoration: underline;
	display:block;
}
.camera-details .btn-holder .link:hover,
.camera-details .btn-holder .link:active {
	color: #bbb;
	text-decoration: none;
}
.camera-details .btn-holder .link-area.active .popup-note{ display:block;}
.camera-details .btn-holder .link-area.active .link{ display:none;}
.camera-details .btn {
	font-size: 15px;
	background: #fff;
	border-radius: 25px;
	padding: 0 25px 1px;
	text-align: center;
	line-height: 40px;
	float: left;
	color: #2e3842;
	min-width: 100px;
	margin: 0 18px 5px 4px;
	text-transform: capitalize;
}
.btnOn
{
    background: #86bad5 !important;
}

.camera-details .btn:hover {
	background: #5dacd5;
	color: #3e4c60;
	text-decoration: none;
}
.camera-details .btn:active {
	background: #10b2da;
	color: #3e4c60;
}
.camera-details .camera-box a.hover .caption,
.camera-details .camera-box a.pressed .caption {
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFjMjIyOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYzIyMjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(28,34,40,0)), color-stop(100%, rgba(28,34,40,1)));
	background: -webkit-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -o-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: -ms-linear-gradient(top, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	background: linear-gradient(to bottom, rgba(28,34,40,0) 0%, rgba(28,34,40,1) 100%);
	height: 40%;
}
.camera-details .camera-box .caption .frame {
	left: 5%;
	bottom: 7px;
}
/* detectors menu view */
.detectors-view h2 {
	color: #fff;
	font-size: 20px;
	line-height: 23px;
	font-weight: 300;
	margin: 0;
	text-transform: capitalize;
	position: relative;
}
.detectors-view h2 a {
	display: block;
	color: #fff;
	padding: 9px 38px 8px;
}
.detectors-view h2 a:hover { text-decoration: none; }
.detectors-view h2 a:after {
	background: url(images/sprite.png) no-repeat -103px -444px;
	width: 13px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	left: 14px;
	top: 15px;
	content: "";
	height: 13px;
}
.detectors-view h2:hover a:after { background-position: -133px -444px; }
.detectors-view .active h2 a:after {
	background-position: -163px -444px;
	top: 16px;
}
.detectors-view h2 .icon {
	display: inline-block;
	vertical-align: top;
	margin: -3px 0 0 4px;
}
.detectors-view .block {
	background: #3e4c60;
	overflow: hidden;
	border-radius: 3px;
	margin: 24px 0 0;
}
.detectors-view .block:first-child { margin: 0; }
.detectors-view .content {
	overflow: hidden;
	padding: 4px 11px 11px 14px;
	border-top: 1px solid #57697c;
}
.detectors-view ul {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 19px;
	list-style: none;
	text-transform: capitalize;
	/*-moz-column-count: 4;
	-webkit-column-count: 4;
	column-count: 4;
	-moz-column-gap: 2%;
	-webkit-column-gap: 2%;
	column-gap: 2%;vilko*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.detectors-view ul li {
  	display:inline-block;
    width:25%;
	margin:0 0 -3px;
	overflow:hidden;
    float:left;
    text-align:left;
    margin-right:4px;
}
.detectors-view a[data-icon^="detector"]{
	background:url(images/detector3.png) no-repeat;
	padding:14px 0 3px 23px;
}
.detectors-view a[data-icon="detector2"]{
	background:url(images/detector4.png) no-repeat;
}
.detectors-view a[data-icon="detector3"]{
	background:url(images/detector2.png) no-repeat;
}
.detectors-view a[data-icon="detector4"]{
	background:url(images/detector.png) no-repeat;
}
.detectors-view a[data-icon="detector5"]{
	background:url(images/detector7.png) no-repeat;
}
.detectors-view a[data-icon="detector6"]{
	background:url(images/detector5.png) no-repeat;
}
.detectors-view ul li img {
	margin: 0 4px 3px 0;
	display: inline-block;
	vertical-align: bottom;
}
.detectors-view ul li a {
	color: #e5e4ea;
	float: left;
}
.detectors-view ul .disable a { color: #94a0a6; }
.detectors-view ul li a:hover span { text-decoration: underline; }
.detectors-view ul li span {
	display: inline-block;
	vertical-align: bottom;
}
.detectors-view ul li.error span:after {
	background: url(images/sprite.png) no-repeat -114px -126px;
	width: 18px;
	height: 17px;
	content: "";
	margin: 0 0 0 4px;
	float: right;
}
[data-page="detectors"] .navbar .filter-menu li { padding: 0 0 0 26px; }
[data-page="detectors"] .navbar .nav li a {
	padding-left: 22px;
	padding-right: 22px;
}
/* detectors map view styles */
.map-area {
	background: url(images/ico-map.png) no-repeat 50% 0;
	margin: 43px auto 10px;
	min-height: 200px;
	padding: 144px 0 20px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	line-height: 34px;
}
.map-area p { margin: 0 }
/* detector popup styles */
.popup-detectors {
	width: 426px;
	margin: 10px;
	background: #3d4a5e;
	border: 3px solid #2a3a52;
	position: relative;
	border-radius: 7px;
	color: #e5e4ea;
	box-shadow:1px 3px 2px 0 rgba(0, 0, 0, 0.6);
	-webkit-box-shadow:1px 3px 2px 0 rgba(0, 0, 0, 0.6);
}
.popup-detectors .head {
	padding: 10px 24px;
	overflow: hidden;
	position: relative;
	border-bottom: 1px solid #57697c;
}
.popup-detectors  a[data-icon="detector"],
.popup-detectors  a[data-icon="detector2"],
.popup-detectors  a[data-icon="detector3"],
.popup-detectors  a[data-icon="detector4"],
.popup-detectors  a[data-icon="detector5"],
.popup-detectors  a[data-icon="detector6"]{
	background:url(images/detector16.png) no-repeat;
	width:19px;
	height:40px;
	margin:-9px 15px 0 0;
	float:left;
	overflow:hidden;
	text-indent:-9999px;
}
.popup-detectors  a[data-icon="detector2"]{background:url(images/detector15.png) no-repeat;}
.popup-detectors  a[data-icon="detector3"]{
	background:url(images/detector14.png) no-repeat;
	width:23px;
}
.popup-detectors  a[data-icon="detector4"]{
	background:url(images/detector18.png) no-repeat;
	width:28px;
}
.popup-detectors  a[data-icon="detector5"]{background:url(images/detector17.png) no-repeat;}
.popup-detectors  a[data-icon="detector6"]{
	background:url(images/detector13.png) no-repeat;
	width:28px;
}
.popup-detectors h2 {
	font-weight: 300;
	font-size: 25px;
	line-height: 30px;
	color: #fff;
	margin: 2px 0 0;
	overflow: hidden;
}
.popup-detectors .icon {
	float: left;
	margin: -9px 23px 0 0;
	display:none;
}
.popup-detectors .icon.active{ display:block;}
.popup-detectors .icon2{ margin-top:-6px}
.popup-detectors .edit-area {
	width: 242px;
	top: 6px;
	left: 52px;
}
.popup-detectors .edit-area input[type="text"] {
	outline: none;
	border: none;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 100%;
	padding: 6px 10px;
	height: 36px;
	background: #6b7585;
	font-size: 20px;
	line-height: 27px;
	color:#fff;
}
.popup-detectors .active .edit-area { display: block; }
.popup-detectors .holder {
	overflow: hidden;
	padding: 19px 22px;
}
.popup-detectors .content { 
	min-height: 110px;
	padding:0;
}
.popup-detectors .date { display: block; }
.popup-detectors .date span {
	background: url(images/divider.png) no-repeat 0 3px;
	display: inline-block;
	vertical-align: top;
	padding: 0 0 0 11px;
	margin: 0 0 0 4px;
}
.popup-detectors .btn-area { overflow: hidden; }
.popup-detectors .btn-blue {
	margin: 0 33px 0 0;
	min-width: 150px;
	font-size:18px;
}
.popup-detectors .link {
	margin: 5px 0 0;
	display: inline-block;
	vertical-align: middle;
}
/* events listing styles */
.events-list { overflow: hidden; }
.events-list .block {
	background: #3e4c60;
	margin: 23px 0 0;
	border-radius: 3px;
}
.events-list .block:first-child { margin: 1px 0 0; }
.events-list h2,
.event-results h2,
.event-details h2 {
	color: #fff;
	font-size: 20px;
	line-height: 23px;
	font-weight: 300;
	margin: 0;
	text-transform: capitalize;
	position: relative;
}
.events-list h2 a,
.event-details h2 a {
	display: block;
	color: #fff;
	padding: 8px 39px 8px;
}
.events-list h2 a:hover,
.event-details h2 a:hover { text-decoration: none; }
.events-list h2 a:after,
.event-details h2 a:after {
	background: url(images/sprite.png) no-repeat -103px -444px;
	width: 13px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	left: 14px;
	top: 13px;
	content: "";
	height: 13px;
}
.events-list h2 a span {
	color: #889297;
	font-size: 16px;
	display: inline-block;
	vertical-align: top;
	margin: 1px 0 0 17px;
}
.events-list h2:hover a:after,
.event-details h2:hover a:after { background-position: -133px -444px; }
.events-list .active h2 a:after,
.event-details .active h2 a:after {
	background-position: -163px -444px;
	top: 14px;
}
.events-list ul {
	margin: 0;
	padding: 8px 13px 15px 0;
	color: #e5e4ea;
	list-style: none;
	border-top: 1px solid #57697c;
}
.events-list ul li {
	overflow: hidden;
	padding: 8px 0 7px 13px;
}
.events-list ul li.connected{
	border-left:3px solid #f47564;
}
.events-list .date {
	float: left;
	width: 110px;
	padding: 2px 10px 0 0;
}
.events-list .title {
	display: block;
	font-weight: 300;
	padding: 2px 0 0;
	overflow: hidden;
}
.events-list a { color: #e5e4ea; }
.events-list .ico-cam,
.event-results .ico-cam {
	background: url(images/sprite.png) no-repeat -70px -170px;
	width: 19px;
	height: 19px;
	overflow: hidden;
	text-indent: -9999px;
	display: inline-block;
	vertical-align: top;
	margin: -2px 0 0 10px;
}
/* Calendar styles */
.calendar-area {
	background: #222931;
	padding: 11px 10px;
	position: absolute;
	right: 0;
	/*width: 200px;*/
	border-radius: 3px 0 0 3px;
	/*top: 41px;*/
}
.calendar-area:after,
.search-form:after {
	position: absolute;
	right: 0;
	top: -3px;
	height: 4px;
	background: #222931;
	content: "";
	width: 44px;
}
.calendar-area .head-area {
	background: #f37564;
	padding: 3px 25px 4px;
	overflow: hidden;
	font-weight: 400;
	color: #fff;
	font-size: 14px;
	line-height: 17px;
	position: relative;
	text-align: center;
}
.calendar-area .next,
.calendar-area .prev {
	background: url(images/sprite.png) no-repeat -12px -480px;
	width: 7px;
	height: 13px;
	position: absolute;
	right: 10px;
	top: 5px;
	overflow: hidden;
	text-indent: -9999px;
}
.calendar-area .prev {
	background-position: 0 -480px;
	right: auto;
	left: 10px;
}
.calendar {
	background: #fff;
	box-shadow: 0 2px 0 2px rgba( 0,0,0,0.4);
	-webkit-box-shadow: 0 2px 0 2px rgba( 0,0,0,0.4);
	overflow: hidden;
	margin: 0;
	list-style: none;
	padding: 10px 9px 9px;
}
.calendar li {
	font: 14px/24px Arial, Helvetica, sans-serif;
	float: left;
	text-align: center;
	position: relative;
	width: 24px;
	margin: 1px;
	color: #959595;
	background: #ececec;
}
.calendar .event {
	width: 24px;
	line-height: 20px;
}
.calendar .event a { border: 2px solid #f37564; }
.calendar li a {
	color: #000;
	background: #ececec;
	display: block;
}
.calendar li a:hover {
	text-decoration: none;
	background: #eec6c0;
}
.calendar li a:active {
	background: #f37564;
	color: #fff;
}
.calendar .head {
	background: #3e4c60;
	font-size: 12px;
	color: #fff;
}
/* search form styles */
.search-form {
	background: #222931;
	border-radius: 3px;
	padding: 9px 7px 8px 9px;
	position: absolute;
	width: 203px;
	right: -44px;
	top: 41px;
}
.search-form:after {
	right: 44px;
	width: 48px;
}
.search-form .area {
	border-bottom: 1px solid #86bad5;
	float: left;
	width: 168px;
	position: relative;
	padding: 0 1px;
}
.search-form .area:after,
.search-form .area:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.search-form .area:before {
	left: auto;
	right: 0;
}
.search-form .input {
	outline: none;
	border: none;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 100%;
	padding: 4px 10px;
	color: #fff;
	height: 25px;
	font-size: 14px;
	line-height: 17px;
	background: #575c62;
}
.search-form ::-webkit-input-placeholder {color: #fff;}
.search-form :-moz-placeholder {color: #fff;}
.search-form ::-moz-placeholder {color: #fff;}
.search-form :-ms-input-placeholder {color: #fff;}
.search-form .close {
	background: url(images/sprite.png) no-repeat -177px -480px;
	width: 11px;
	height: 11px;
	margin: 7px 0 0 0;
	overflow: hidden;
	text-indent: -9999px;
	float: right;
}
.search-form .close:hover,
.search-form .close:active { background-position: -200px -480px; }
/* event result styles */
.event-results {
	border-radius: 3px;
	background: #3e4c60;
	overflow: hidden;
	margin: 1px 0 20px;
}
.event-results .clear {
	font-size: 14px;
	line-height: 17px;
	color: #fff;
	text-decoration: underline;
	position: absolute;
	right: 0;
	top: 6px;
}
.event-results .clear:hover { text-decoration: none; }
.event-results h2 strong { font-weight: 400; }
.event-results .head {
	overflow: hidden;
	padding: 9px 12px 7px;
	border-bottom: 1px solid #57697c;
}
.event-results h2 {
	padding: 0 98px 0 0;
	text-transform: none;
	float: left;
	position: relative;
}
.event-results ul {
	margin: 0;
	padding: 13px 13px 11px;
	list-style: none;
}
.event-results ul li { padding: 5px 0 12px; }
.event-results .date {
	float: left;
	width: 171px;
	color: #e5e4ea;
	padding: 0 15px 0 0;
}
.event-results .date span {
	background: url(images/divider.png) no-repeat 0 3px;
	padding: 0 0 0 11px;
	margin: 0 0 0 4px;
	display: inline-block;
	vertical-align: top;
}
.event-results .ico-cam { margin: -3px 0 0; }
/* event details styles */
.event-details {
	margin: -39px 0 0;
	overflow: hidden;
}
.event-details .block {
	background: #3e4c60;
	overflow: hidden;
	clear: both;
	border-radius: 3px;
	margin: 0 0 21px;
}
.event-details .head {
	overflow: hidden;
	padding: 8px 21px 10px 14px;
}
.event-details .active .head { padding: 8px 21px 6px 14px; }
.event-details .head .area { overflow: hidden; }
.event-details h2 {
	float: left;
	text-transform: none;
	margin: 0 32px 0 0
}
.event-details h2 a { padding: 0 0 0 25px; }
.event-details h2 a:after {
	left: 1px;
	top: 5px;
}
.event-details .active h2 a:after { top: 6px; }
.event-details .head .time {
	float: right;
	color: #e5e4ea;
	margin: 3px 0 0 10px;
}
.event-details .icon {
	float: left;
	margin: 2px 38px 0 0;
}
.event-details .btn-more {
	background: #fff;
	border-radius: 14px;
	float: left;
	color: #3e4c60;
	line-height: 23px;
	font-size: 13px;
	font-weight: 400;
	padding: 0 12px 2px 12px;
	margin: 0 14px 0 0;
	text-transform: capitalize;
}
.event-details .btn-more:hover {
	text-decoration: none;
	background: #5dacd5;
}
.event-details .btn-more:active { background: #10b2da; }
.event-details .details {
	overflow: hidden;
	position: relative;
	padding: 20px 18px 14px 15px;
	border-top: 1px solid #57697c;
}
.event-details .img-big {
	border: 5px solid #f47564;
	overflow: hidden;
	margin: -6px 0 15px;
	position: relative;
}
.event-details .img-big .slide {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.event-details .img-big img {
	display: block;
	width: 100%;
	height: auto;
}
.event-details .thumbnails {
	position: relative;
	padding: 0 40px 14px 0
}
.event-details .thumbnails .thumb-mask {
	margin: 0 -5px;
	position: relative;
	overflow: hidden;
}
.event-details .thumbnails ul {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100% !important;
	white-space: nowrap;
	letter-spacing: -4px;
}
.event-details .thumbnails ul li {
	display: inline-block;
	width: 25% !important;
	padding: 0 7px 0 4px;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.event-details .thumbnails ul li a {
	border: 2px solid #7a828a;
	display: block;
	position: relative;
}
.event-details .thumbnails .overlay {
	border: 2px solid #f47564;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	display: none;
	content: "";
}

.event-details .thumbnails li.videoClipLink 
{
	background: url(images/playbutton.png) no-repeat center scroll;
    background-size: 70%;
}

li.videoClipLink  img
{
    opacity: 0.5;
}

.event-details .thumbnails ul li:hover a { border-color : #FF9933; }
.event-details .thumbnails ul li:hover .overlay { 
	display: block; 
	border-color : #FF9933;                                      
}
.event-details .thumbnails ul li.active a { border-color : #f47564; }
.event-details .thumbnails ul li.active .overlay { display: block; }
.event-details .thumbnails ul li img {
	display: block;
	width: 100%;
	height: auto;
}
.event-details .btns {
	display: table;
	position: absolute;
	right: -18px;
	height: 98px;
	top: 50%;
	margin: -55px 0 0;
}
.event-details .btns > .holder {
	display: table-cell;
	vertical-align: middle;
}
.event-details .btn-next,
.event-details .btn-prev {
	background: url(images/sprite.png) no-repeat -97px -244px;
	width: 41px;
	height: 46px;
	overflow: hidden;
	text-indent: -9999px;
	display: block;
	margin: 0 0 4px;
}
.event-details .btn-next { background-position: 0 -192px; }
.event-details .btn-prev:hover,
.event-details .btn-prev:active { background-position: -48px -244px; }
.event-details .btn-next:hover,
.event-details .btn-next:active { background-position: -49px -192px; }
.event-details .btn-next.disabled {
	background-position: -97px -192px;
	cursor: default;
}
.event-details .btn-prev.disabled {
	cursor: default;
	background-position: 0 -244px;
}
.event-details .previous-event {
	font-size: 22px;
	line-height: 25px;
	position: relative;
	float: left;
	margin: 0 0 31px;
	word-spacing: 1px;
	color: #fff;
}
.event-details .previous-event:after {
	content: "";
	background: url(images/sprite.png) no-repeat 0 -661px;
	width: 12px;
	height: 22px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin: 4px 10px 0 0;
}
.event-details .previous-event:hover { text-decoration: none; }
.event-details .previous-event:hover:after,
.event-details .previous-event:active:after { background-position: -29px -661px; }
.event-details .details p { margin: 0 0 10px; }
.event-details .hidden { display: none; }
/* alarm styles */
.alarm-header,
.alarm-activate .navbar { display: none; }
.alarm-activate .navbar {
    display: none!important;
}
.alarm-activate .alarm-header { display: block;}
.alarm-activate .alarm-header{
	border: none;
	color: #fff;
	padding: 32px 12px 20px 25px;
	height: 88px;
	top:0;
	position:fixed;
	right: 22px;
	left:225px;
	min-width: 719px;
	z-index:10;
	background: #db2e2e url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiMmUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZDIwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #db2e2e), color-stop(100%, #9d2020));
	background: -webkit-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: -o-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: -ms-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: linear-gradient(to bottom, #db2e2e 0%, #9d2020 100%);
}
.alarm-activate #main .alarm-header h1{
	font-size: 40px;
	line-height: 43px;
	word-spacing: 4px;
	font-weight: 400;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.alarm-activate .alarm-header .textbox .time{
	display: block;
	font-size: 20px;
	line-height: 30px;
	padding: 0 10px 0 0;
}
.alarm-activate .alarm-header .textbox .time span{
	float: left;
	width: 100px;
	margin: 0 10px 0 0;
    font-weight: 400;
}
.alarm-activate #main .header {
	/*background: #db2e2e url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiMmUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZDIwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #db2e2e), color-stop(100%, #9d2020));
	background: -webkit-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: -o-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: -ms-linear-gradient(top, #db2e2e 0%, #9d2020 100%);
	background: linear-gradient(to bottom, #db2e2e 0%, #9d2020 100%);*/
    background:transparent;
	border: none;
	color: #fff;
	padding: 32px 14px 20px 35px;
    width:auto;
    height:auto;
	/*height: 140px;*/
}
.alarm-activate #main .header:after,
.alarm-activate #main .header .holder { display: none; }
.alarm-activate .btn-alarm-div { display: block; }
.btn-alarm-div { display: none; }
.btn-alarm-div { padding-bottom: 10px; }
.alarm-activate .btn-alarm {
	background: #db2e2e url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiMmUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZTIwMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #db2e2e), color-stop(100%, #9e2020));
	background: -webkit-linear-gradient(top, #db2e2e 0%, #9e2020 100%);
	background: -o-linear-gradient(top, #db2e2e 0%, #9e2020 100%);
	background: -ms-linear-gradient(top, #db2e2e 0%, #9e2020 100%);
	background: linear-gradient(to bottom, #db2e2e 0%, #9e2020 100%);
	display: block;
	padding: 9px 28px 13px 67px;
	font-weight: 400;
	font-size: 17px;
	margin: -2px 0 0 -13px;
	line-height: 20px;
	color: #fff;
}
.alarm-activate .alarm-header .textbox {
	float: left;
	width: 50%
}
.alarm-activate #main .header h1 {
	font-size: 40px;
	line-height: 43px;
	word-spacing: 4px;
	font-weight: 400;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.alarm-activate .alarm-header .btn-area {
	float: right;
	max-width: 50%;
	padding: 7px 10px 0 0;
}
.alarm-activate .btn-disarm,
.alarm-activate .btn-rearm {
	background: #eecaca;
	color: #2e3842;
	padding: 0 20px;
	display: inline-block;
	vertical-align: middle;
	line-height: 41px;
	border-radius: 25px;
	text-transform: capitalize;
	font-size: 15px;
	margin: 0 0 0 5px;
}
.alarm-activate .btn-disarm { margin: 3px 0 0 15px; }
.alarm-activate .btn-rearm {
	background: #86bad5;
	font-size: 24px;
	line-height: 27px;
	padding: 19px 33px 20px;
	border-radius: 35px;
}
.alarm-activate .btn-disarm:hover,
.alarm-activate .btn-rearm:hover {
	background: #5dacd5;
	text-decoration: none;
}
.alarm-activate .btn-disarm:active,
.alarm-activate .btn-rearm:active { background: #10b2da; }

.alarm-header .textbox a { color: #fff; }
/* system settings page */
/* Settings date styles*/
.setting-date .input-area {
    border-bottom: 1px solid #86bad5;
    overflow: hidden;
    position: relative;
    padding: 0 3px 3px;
    margin: -2px 3px 3px 1px;
    float: left;
    width: 366px;
}
.setting-date .input-area:after,
.setting-date .input-area:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.setting-date .input-area:before {
	left: auto;
	right: 0;
}
.setting-date input[type="text"] {
    outline: none;
    border: none;
    height: 21px;
    float: left;
    width: 100%;
    color: #d4d1d1;
    font-size: 18px;
    line-height: 21px;
    padding: 0px 0px 0px 4px;
    background: none;
}
.setting-date .area .input-placeholder-text{
	text-align:center;
	top:0;
	left:0;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0 3px;
}
.setting-date, .setting-msd {
	border-radius: 3px;
	background: #3e4c60;
	overflow: hidden;
	line-height: 21px;
	font-size: 18px;
	padding: 12px 13px;
	margin: 1px 0 0;
	color: #fff;
}
section.setting-msd legend {
    color: #fff;
}
.setting-date .block, .setting-msd .block {
	overflow: hidden;
	border-top: 1px solid #263646;
	padding: 36px 1px 23px
}
.setting-msd .block:first-child {
	border: none;
	padding: 10px 1px 37px;
}
.setting-date .block:first-child {
	border: none;
    padding-top: 16px;
}
.setting-date .title, .setting-msd .title {
    float: left;
    text-transform: capitalize;
    width: 170px;
    padding: 0 8px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.setting-msd .title {
    width: 220px;
}

.setting-msd .block:first-child .title { padding: 7px 8px 0 0; }
.setting-date select {
	width: 356px;
	margin: -10px 0 0;
}

.setting-msd select {
	width: 380px;
	margin: -10px 0 0;
}

.setting-date .area, .setting-msd .area { overflow: hidden; }
.setting-date .list {
	margin: 0;
	padding: 1px 0 0 1px;
	list-style: none;
	overflow: hidden;
}
.setting-date .list li {
	overflow: hidden;
	padding: 0 0 12px;
}
.setting-date .rad-area {
	background: url(images/sprite.png) no-repeat -44px -480px;
	width: 20px;
	height: 20px;
}
.setting-date .rad-checked { background-position: -76px -480px; }
.setting-date .label {
	display: block;
	color: #d4d1d1;
	overflow: hidden;
}
.setting-date .btn-blue {
	width: 200px;
	margin: 0 19px 0 0;
	height: 48px;
	line-height: 48px;
	border: 0;
	cursor: pointer;
    border-radius: 25px;
}
.setting-date input[type="reset"] {
	background: none;
	border: 0;
	color: #bbb;
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	line-height: 18px;
	padding: 0;
	cursor: pointer;
}
.setting-date input[type="reset"]:hover { text-decoration: underline; }
.setting-date input[type="reset"]:active,
.setting-date input[type="reset"].active {
	color: #fff;
	margin: 0;
	text-decoration:underline;
}
.setting-date .btn-holder {
	overflow: hidden;
	padding: 31px 9px 19px;
}
/* System settings user list styles */
.user-list { overflow: hidden; }
.user-list .btn-blue {
	font-size: 14px;
	line-height: 39px;
	min-width: 127px;
	letter-spacing: 0;
	margin: 0 0 18px;
}
.user-list ul {
	margin: 0;
	padding: 1px;
	background: #3e4c60;
	border-radius: 3px;
	list-style: none;
}
.user-list ul li {
	position: relative;
	margin: 1px 0 0;
}
.user-list ul li:after {
	background: #263646;
	position: absolute;
	left: 15px;
	right: 15px;
	height: 1px;
	top: -1px;
	content: "";
	clear: both;
}
.user-list ul li > a{
	text-decoration:none; 
	display:block;
	padding: 16px 100px 20px 14px;
}
.user-list ul li a:hover { background: #505c6e; }
.user-list ul li:first-child {margin: 0;}
.user-list ul li:first-child > a{
	padding: 16px 100px 20px 14px;
	border-radius: 3px 3px 0 0;
}
.user-list ul li:first-child:after { display: none; }
.user-list .img-area {
	border: 3px solid #263646;
	float: left;
	margin: 4px 32px 0 0;
	background: url(images/bg-users.png) no-repeat #3e4c60;
}
.user-list .img-area.female { background-position: 0 -114px; }
.user-list li > a:hover .img-area { background: url(images/bg-users.png) no-repeat 0 -228px #9fa6af }
.user-list li > a:hover .img-area.female { background-position: 100% 100%; }
.user-list .img-area img {
	display: block;
	width: 100%;
	height: auto;
    max-width: 114px;
    min-width: 114px;
}
.user-list .textbox {
	overflow: hidden;
	font-size: 18px;
	line-height: 21px;
	color: #d4d1d1;
}
.user-list .title {
	display: block;
	font-size: 20px;
	line-height:22px;
	margin: 0 0 16px;
	font-weight: 400;
	color:#86bad5;
	text-transform: capitalize;
}
.user-list .title em {
	font-style: normal;
	font-size: 14px;
}
.user-list .textbox span {
	display: block;
	margin: 0 0 14px;
}
.user-list .textbox a { color: #d4d1d1; }
.user-list .textbox .phone:after,
.user-list .textbox .email:after {
	background: url(images/sprite.png) no-repeat -58px -661px;
	content: "";
	float: left;
	width: 20px;
	height: 21px;
	margin: 2px 11px 0 0;
}
.user-list ul li:last-child { border-radius: 0 0 3px 3px; }
.user-list .textbox .email:after {
	background-position: -88px -660px;
	margin: 0 11px 0 0;
}
.user-list .textbox .invitationState {
    color: orange;
    font-size: 14px;
    margin-bottom: 0;
}

.user-list ul li .item-delete,
.user-list ul li .item-resign {
    position: absolute;
    right: 19px;
    bottom: 24px;
    color: #bbb;
    font-size: 15px;
    line-height: 17px;
    padding: 0 !important;
    background: none !important;
}

.item-delete:after,
.item-resign:after {
    background: url(images/sprite.png) no-repeat -119px -660px;
    width: 12px;
    height: 15px;
    margin: -1px 0 0 9px;
    content: "";
    float: right;
}

.item-delete:active,
.item-delete.active,
.item-resign:active,
.item-resign.active {
    color: #fff;
    text-decoration: underline;
}

.item-delete:hover:after,
.item-resign:hover:after { background-position: -119px -679px; }

.item-delete:active:after,
.item-delete.active:after
.item-resign:active:after,
.item-resign.active:after { background-position: -140px -660px; }

/* User edit styles */
.user-edit { overflow: hidden; }
.user-edit h2 {
	margin: 0 0 17px;
	font-size: 22px;
	line-height: 25px;
	font-weight: 300;
	text-transform: capitalize;
}
.user-edit h2 a {
	padding: 0 0 0 23px;
	color: #fff;
	position: relative;
}
.user-edit h2 a:after {
	background: url(images/sprite.png) no-repeat 0 -661px;
	width: 12px;
	height: 20px;
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
}
.user-edit h2 a:hover { text-decoration: none; }
.user-edit h2 a:hover:after,
.user-edit h2 a:active:after { background-position: -29px -661px; }
.user-edit .userNameCheck {
    overflow: hidden;
    border-radius: 3px;
    background: #3e4c60;
    padding: 30px 20px 30px 14px;
}
.user-edit .holder {
	overflow: hidden;
	border-radius: 3px;
	background: #3e4c60;
	padding: 10px 20px 32px 14px;
}
.user-edit .block {
	padding: 23px 0 11px;
	border-top: 1px solid #263646;

    white-space: nowrap;
}
.user-edit .block:after{
	display:block;
	clear:both;
	content:"";
}
.user-edit .block:first-child {
	border: 0;
	padding: 19px 0 11px;
}
.user-edit .textarea {
	float: left;
    width: 480px;
    margin: 0 48px 0 0;
}
.user-edit h3,
.camera-settings h3 {
	margin: 0 0 10px;
	text-transform: capitalize;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	color: #86bad5;
}
.user-edit .row a.fancy-opener,
.user-edit h3 a {
	color: #fff;
	text-decoration: underline;
	font-size: 15px;
	margin: 2px 0 0 7px;
	display: inline-block;
	vertical-align: top;
	line-height: 18px;
}
.user-edit .row a.fancy-opener:hover,
.user-edit h3 a:hover {
    text-decoration: none;
}
.user-edit .row a.fancy-opener {
    padding-left: 20px;
    margin: 10px 15px 0 0;
}

.user-devices-info {
    padding-left: 17px;
    vertical-align: bottom;
}

.userCodeCheckButton,
#newUserCheckButton {
    line-height: 30px;
    letter-spacing: 1px;
    font-size: 17px;
    border: 0;
    padding: 0 30px;
    margin: 0 15px 0 30px;
    cursor: pointer;
}

#changeUsernameButton {
    line-height: 25px;
    letter-spacing: 0.5px;
    font-size: 16px;
    border: 0;
    padding: 0 15px;
    margin: 0 0 0 10px;
    cursor: pointer;
}

.userCodeChangeButton {
    line-height: 26px;
    letter-spacing: 1px;
    font-size: 17px;
    border: 0;
    margin: 3px 15px 0 0;
    cursor: pointer;
}

.userChangePasswordButton {
    line-height: 26px;
    letter-spacing: 0.5px;
    font-size: 16px;
    border: 0;
    cursor: pointer;
}

.user-edit .row .chk-area {
    margin-bottom: -3px;
    /*margin-top: 10px;*/
}

.user-edit .photo-area {
    /*float: left;*/
    display: inline-block;
    margin: 16px 0 0;
    width: 120px;
}

.user-edit .photo-area a {
	float: right;
	font-size: 12px;
	line-height: 15px;
	text-transform: capitalize;
	color: #fff;
	margin: 0 1px 0 0;
	text-decoration:none;
}
.user-edit .photo-area a span {
	display: none; 
	text-decoration:underline;
}
.user-edit .photo-area a span:first-child { 
	display: block;
	text-decoration:none;
}
.user-edit .change-photo a span { display: block; }
.user-edit .change-photo a span:first-child { display: none; }
.user-edit .photo-area a:hover span:first-child { text-decoration: underline; }
.user-edit .photo-area a:hover span { text-decoration: none; }
.user-edit .img-area {
	background: url(images/bg-users.png) no-repeat;
	position: relative;
	border: 3px solid #263646;
	overflow: hidden;
	margin: 0 0 4px;
}
.user-edit .img-area a {
	display: block;
	position: relative;
	z-index: 1;
	min-width: 114px;
	min-height: 114px;
	margin: 0;
}
.user-edit .add .img-area { background-position: 0 -114px; }
.user-edit .img-area:hover { background-position: 0 -228px; }
.user-edit .add .img-area.add:hover { background-position: 0 100%; }
.user-edit .img-area:after {
	position: absolute;
	background: url(images/sprite.png) no-repeat -273px -510px;
	width: 20px;
	height: 20px;
	left: 6px;
	content: "";
	top: 6px;
}
.user-edit .img-area:hover:after { background-position: -273px -543px; }
.user-edit .img-area:active:after { background-position: -273px -580px; }
.user-edit .img-area img {
	width: 100%;
	/*display: none;*/
	height: auto;
}
.user-edit .change-photo .img-area img { display: block; }
.user-edit .invitationState {
    display: block;
    margin: 25px 0 5px 0;
    max-width: 200px;
    font-size: 15px;
    color: orange;
}
.user-edit .row { padding: 10px 0 3px; }
.user-edit .row:after {
	clear:both;
	display:block;
	content:"";
}
    .user-edit .row .label {
        float: left;
        font-size: 18px;
        line-height: 21px;
        color: #fff;
        text-transform: capitalize;
        width: 150px;
        margin: 10px 15px 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
#NewUserForm .row.email .label,
#EditUserForm .row.email .label {
    white-space: normal;
}
#NewUserForm textarea,
#EditUserForm textarea {
    width: 585px;
}
#NewUserForm .securityDetails ul.user-info .title,
#EditUserForm .securityDetails ul.user-info .title {
    width: 245px;
}
.user-edit h3 + .row {
    padding: 0;
}
.user-edit h3 + .row .label { margin-top: 12px; }
.user-edit .row .label span {
	color: #fa5959;
	display: inline-block;
	vertical-align: top;
}
.user-edit .area,
.user-edit .dropdown-menu {
    border-bottom: 1px solid #86bad5;
    float: left;
    width: 286px;
    position: relative;
    padding: 0 10px 2px;
    margin: 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-edit .dropdown-menu,
.select-box{
	margin-top:1px;
	padding:0 11px 6px;
	width:284px;
	font-size:18px;
	line-height:22px;
}
.select-box a{
	padding:0;
	float: left;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 260px;
	line-height:21px;
	white-space: nowrap;
}
.select-box{ margin-top:-2px;}
.user-edit .email .area,
.user-edit .phone .area {
	padding: 0 32px 3px 7px;
	width: 267px;
	position:relative;
	background: url(images/icons.png) no-repeat 100% 2px;
}
.user-edit .phone .area { background-position: 100% -57px; }
.user-edit .area:after,
.user-edit .area:before,
.user-edit .dropdown-menu:after,
.user-edit .dropdown-menu:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.user-edit .area:before,
.user-edit .dropdown-menu:before {
	left: auto;
	right: 0;
}
.user-edit .area-holder {
	float: left;
	width: 311px;
}
    .user-edit .area-holder .input-placeholder-text {
        /*background: #3e4c60;vilko*/
        background:transparent;
        left: 8px;
        right: 8px;
        margin: 2px 0 0;
        height: 23px;
        z-index: 1;
    }
.user-edit .area-holder .info-area {
	overflow: hidden;
	clear: both;
	font-size: 12px;
	line-height: 15px;
	padding: 9px 4px;
}
.user-edit .area-holder .info-area.add { padding: 13px 0 3px; }
.user-edit .area-holder .info-area a {
	float: right;
	color: #fff;
}
.user-edit .area-holder .info-area .label {
	overflow: hidden;
	font-size: 12px;
	line-height: 15px;
	margin: 0;
	width: auto
}
.user-edit .area-holder .info-area a:first-child { float: left; }
.user-edit select { width: 287px; }
.user-edit .select-area {
	margin: 2px 0 0;
	font-size: 18px;
	line-height: 21px;
}
.user-edit .select-area .select-opener { right: 9px; }
.user-edit input[type="text"],
.user-edit input[type="password"],
.user-edit input[type="email"] {
	outline: none;
	border: none;
	float: left;
	width: 100%;
	background: #3e4c60;
	color: #d4d1d1;
	padding:0;
}
.user-edit ::-webkit-input-placeholder {color: #d4d1d1;}
.user-edit :-moz-placeholder {color: #d4d1d1;}
.user-edit ::-moz-placeholder {color: #d4d1d1;}
.user-edit :-ms-input-placeholder {color: #d4d1d1;}
.user-edit .user-info {
	margin: 0;
	padding: 9px 25px 0;
	list-style: none;
}
.user-edit .user-info li {
	overflow: hidden;
	padding: 0 0 14px;
}
.user-edit .user-info .title {
	display: inline-block;
	font-size: 18px;
	line-height: 21px;
	vertical-align: middle;
	color: #fff;
	width: 149px;
	margin: 1px 9px 0 0
}
.user-edit .user-info li:first-child .title { margin-top: -1px; }
.user-edit .user-info .title span { font-size: 14px; }
.user-edit .user-info .notifications {
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
}
.user-edit .user-info .notifications a {
	background: url(images/sprite.png) no-repeat -166px -660px;
	width: 21px;
	height: 21px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin: 0 25px 0 0;
}
.user-edit .user-info .notifications .email { background-position: -86px -660px; }
.user-edit .user-info .notifications .push {
	background: url(images/menu-icons.png) no-repeat 0px -227px;
	background-size: 50px;
}
.user-edit .user-info .notifications .phone { background-position: -58px -660px; }
.user-edit .btn-area {
	overflow: hidden;
	padding: 0 50px 0 0;
}
.user-edit .btn-area .btn-blue,
.popup-notify .btn-area .btn-blue,
.camera-settings .btn-area .btn-blue,
.popup-upload .btn-area .btn-blue,
.popup-notifications .btn-blue,
.setting-msd .btn-area .btn-blue
 {
	height: 48px;
	width: 200px;
	border: 0;
	cursor: pointer;
	margin: 0 28px 0 0;
    border-radius: 25px;
}
.user-edit .btn-area input[type="reset"],
.camera-settings .btn-area input[type="reset"],
.popup-notify .btn-area input[type="reset"],
.popup-upload .btn-area input[type="reset"],
.popup-notifications input[type="reset"],
.setting-msd .btn-area input[type="reset"],
.invitation-popup .btn-area input[type="reset"]
 {
	background: none;
	border: 0;
	color: #bbb;
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	line-height: 18px;
	padding: 0;
	cursor: pointer;
	margin: 3px 0 0;
}
.user-edit .btn-area input[type="reset"]:hover,
.camera-settings .btn-area input[type="reset"]:hover,
.popup-notify .btn-area input[type="reset"]:hover,
.popup-upload .btn-area input[type="reset"]:hover,
.popup-notifications input[type="reset"]:hover,
.invitation-popup .btn-area input[type="reset"]:hover
{
    text-decoration: underline;
}
.user-edit .btn-area input[type="reset"]:active,
.camera-settings .btn-area input[type="reset"]:active,
.popup-notify .btn-area input[type="reset"]:active,
.popup-upload .btn-area input[type="reset"]:active,
.popup-notifications input[type="reset"]:active,
.user-edit .btn-area input[type="reset"].active,
.camera-settings .btn-area input[type="reset"].active,
.popup-notify .btn-area input[type="reset"].active,
.popup-upload .btn-area input[type="reset"].active,
.popup-notifications input[type="reset"].active,
.invitation-popup .btn-area input[type="reset"].active
{
	color: #fff;
	margin: 0;
	text-decoration:underline;
}
.user-edit .btn-area .frame {
	display: inline-block;
	vertical-align: middle;
	width: 584px
}
.user-edit .btn-area .item-delete
{
	display: inline-block;
	vertical-align: middle;
	position: relative;
	right: 0;
	bottom: 0;
	font-size:15px;
	margin: 4px 0 0;
	color:#bbb;
}
.user-edit .btn-area .item-delete:after{ margin-top:1px;}
.user-edit .btn-area .item-delete:active{ color:#fff;}
.user-edit .notify {
	text-decoration: underline;
	color: #fff;
	font-size: 18px;
	line-height: 21px;
	text-transform: capitalize;
	display: inline-block;
	vertical-align: top;
	margin: 40px 0 54px;
}
.user-edit .notify:hover { text-decoration: none; }
.user-edit .dropdown-menu .select-opener {
	background: url(images/sprite.png) no-repeat -114px -106px;
	position: absolute;
	height: 7px;
	width: 0px;
	right: 7px;
	overflow:hidden;
	text-indent:-9999px;
	top: 7px;
}

.select-opener {
	background: url(images/sprite.png) no-repeat -114px -106px;
	position: absolute;
	height: 7px;
	width: 13px;
	right: 9px;
	overflow:hidden;
	text-indent:-9999px;
	top: 7px;
}

.user-edit .dropdown-menu:active .select-opener,
.user-edit .dropdown-menu:hover .select-opener { background-position: -134px -106px; }
/* System settings cameras styles */
.camera-settings {
	border-radius: 3px;
	background: #3e4c60;
	padding: 9px 21px 9px 13px;
	font-size: 18px;
	line-height: 21px;
}
.camera-settings .block {
	border-top: 1px solid #263646;
	overflow: hidden;
	padding: 37px 0 22px;
}
.camera-settings .block:first-child {
	border: 0;
	padding: 20px 0 25px;
}
.camera-settings .block h3 {
	text-transform: none;
	margin: 0 0 6px;
}
.camera-settings .block:first-child h3 { margin: 0 0 11px; }
.camera-settings .list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #d4d1d1;
}
.camera-settings .list li {
	overflow: hidden;
	padding: 0 0 12px;
}
.camera-settings .list .label,
.camera-settings .item-select .label {
	display: block;
	overflow: hidden;
}
.camera-settings .row {
	overflow: hidden;
	margin: 0 0 23px;
}
.camera-settings .row .title,
.camera-settings .row .label {
	float: left;
	width: 210px;
	margin: 7px 10px 0 0;
	color: #fff;
}
.camera-settings .area-holder .title {
	width: auto;
	display: block;
	overflow: hidden;
	margin: 5px 0 0 8px;
}
.camera-settings select { width: 282px; }
.camera-settings .select-area .select-opener { right: 7px; }
.camera-settings .area-holder {
	width: 360px;
	float: left;
}
.camera-settings .item-select {
	float: left;
	padding: 8px 10px 0 0;
}
.camera-settings .item-select:first-child { width: 170px; }
.camera-settings .item-select .label {
	width: auto;
	float: none;
	display: block;
	margin: 0;
	color:#d4d1d1;
}
.camera-settings .area {
	border-bottom: 1px solid #86bad5;
	overflow: hidden;
	position: relative;
	padding: 0 3px 3px;
	margin: -2px 3px 3px 1px;
	float: left;
	width: 40px;
}
.camera-settings .area:after,
.camera-settings .area:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.camera-settings .area:before {
	left: auto;
	right: 0;
}
.camera-settings input[type="text"] {
	outline: none;
	border: none;
	height: 21px;
	float: left;
	width: 100%;
	color: #d4d1d1;
	font-size: 18px;
	text-align: center;
	line-height: 21px;
	padding:0;
	background: none;
}
.camera-settings .area .input-placeholder-text{
	text-align:center;
	top:0;
	left:0;
	width:100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0 3px;
}
.camera-settings .ico-less,
.camera-settings .ico-more {
	background: url(images/sprite.png) no-repeat -273px -449px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin: 0 4px 0 0;
}
.camera-settings .ico-more { background-position: -273px -510px; }
.camera-settings .ico-more:hover { background-position: -273px -543px; }
.camera-settings .ico-more:active { background-position: -273px -580px; }
.camera-settings ::-webkit-input-placeholder {color: #d4d1d1;}
.camera-settings :-moz-placeholder {color: #d4d1d1;}
.camera-settings ::-moz-placeholder {color: #d4d1d1;}
.camera-settings :-ms-input-placeholder {color: #d4d1d1;}
.camera-settings .btn-area,
.popup-notify .btn-area {
	overflow: hidden;
	padding: 26px 0 0;
}
/* popup edit notifications styles */
.popup-notify {
	background: #3d4a5e;
	border: 3px solid #2a3a52;
	margin: 20px;
	border-radius: 6px;
	position: relative;
	width: 633px;
	max-height: 612px;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.6);
}
.popup-notify .close {
	background-position: -163px -112px;
	top: -14px;
}
.popup-notify:after {
	clear: both;
	display: block;
	content: "";
}
.popup-notify .head {
	background: #56657b;
	border-radius: 3px 3px 0 0;
	overflow: hidden;
	padding: 9px 25px 8px 21px;
}
.popup-notify .head .textbox {
	float: left;
	width: 45%;
}
.popup-notify .head h2 {
	font-weight: 300;
	font-size: 25px;
	color:#fff;
	line-height: 28px;
	margin: 0 0 57px;
}
.popup-notify .addnav {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 17px;
	text-transform: capitalize;
}
.popup-notify .addnav li {
	float: left;
	padding: 0 7px 0 9px;
	background: url(images/divider3.png) no-repeat 0 3px;
}
.popup-notify .addnav li:first-child {
	background: none;
	padding-left: 2px;
}
.popup-notify .addnav li a { color: #e5e4ea; }
.popup-notify .head .info {
	float: right;
	text-align: right;
	width: 50%;
	color: #d4d1d1;
	padding: 9px 0 0;
}
.popup-notify .head .info a { color: #d4d1d1; }
.popup-notify .head .info .text { overflow: hidden; }
.popup-notify .head .img {
	float: right;
	border: 3px solid #263646;
	margin: 3px 0 0 8px;
    background: url(images/bg-users.png) no-repeat;
    background-size: cover;
}
.popup-notify .head .info .title {
	display: block;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	margin: 0 0 11px;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.popup-notify .head .info span {
	display: block;
	margin: 0 0 8px;
	line-height: 23px;
}
.popup-notify .head .info .email:after,
.popup-notify .head .info .phone:after {
	background: url(images/sprite.png) no-repeat -58px -661px;
	width: 20px;
	height: 20px;
	float: right;
	margin: 0 3px 0 8px;
	content: "";
}
.popup-notify .head .info .email:after {
	background-position: -88px -660px;
	height: 21px;
}
.popup-notify .scroll-area {
	position: relative;
	padding: 33px 0 0 21px;
	overflow: hidden;
}
.popup-notify .scrollable-area {
	height: 357px;
	position: relative;
	overflow: auto;
	padding: 0 13px 0 0;
}
.popup-notify .block {
	border: 1px solid #678ba3;
	border-radius: 3px;
	margin: 0 0 23px;
	width: 590px;
}
.popup-smart-home .block,
.popup-vdbs .block,
.popup-cameras .block {
    margin: 0 0 15px;
}
.popup-notify .block:after,
.popup-notify .block .head-area:after {
	clear: both;
	display: block;
	content: "";
}
.popup-notify .block .head-area {
	border-bottom: 1px solid #4b5a6e;
	padding: 3px 25px 1px 11px;
}
.popup-notify .block .frame {
	overflow: hidden;
	padding: 14px 22px 13px
}
.popup-notify h3 {
	font-size: 20px;
	color: #fff;
	font-weight: 300;
	padding: 3px 40px;
	overflow: hidden;
	position: relative;
	margin: 0;
	line-height: 28px;
}
.popup-smart-home h3,
.popup-vdbs h3,
.popup-cameras h3 {
    padding: 3px 15px;
}
.popup-notify h3:after {
	position: absolute;
	left: 10px;
	top: 3px;
	background: url(images/sprite.png) no-repeat 0 -748px;
	width: 21px;
	content: "";
	height: 27px;
}
.popup-smart-home h3:after,
.popup-vdbs h3:after,
.popup-cameras h3:after {
    background: none;
    width: 0;
}
.popup-notify h3.sos:after {
	background-position: -38px -745px;
	height: 30px;
	left: 9px;
	top: 1px;
	width: 22px;
}
.popup-notify h3.status:after {
	background-position: -83px -745px;
	left: 8px;
	top: 1px;
	height: 28px;
	width: 22px;
}
.popup-notify h3.trouble:after {
	background-position: -120px -746px;
	left: 8px;
	top: 2px;
	width: 28px;
	height: 28px;
}
.popup-notify h3.safety:after {
	background-position: -167px -746px;
	left: 8px;
	top: 1px;
	width: 21px;
	height: 28px;
}
.popup-notify h3.maintenance:after {
	background-position: -241px -748px;
	left: 8px;
	top: 2px;
	width: 28px;
	height: 28px;
}
.popup-notify h3.cloudrelated:after {
    background-position: -278px -745px;
    left: 8px;
    top: 2px;
    width: 32px;
    height: 26px;
}
.popup-notify .title {
	display: block;
	font-weight: 300;
	font-size: 16px;
	line-height: 19px;
	color:#fff;
	margin: 0 0 10px;
}
.popup-notify .list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.popup-notify .list li {
	float: left;
	width: 149px;
	padding: 0 25px 0 0;
}
.popup-notify .list label {
	float: left;
	background: url(images/sprite.png) no-repeat -58px -661px;
	overflow: hidden;
	width: 21px;
	height: 21px;
	margin: 5px 9px 0 0;
	text-indent: -9999px;
}
.popup-notify .list label.chat {
	background-position: -166px -661px;
	margin: 5px 11px 0 0;
}
.popup-notify .list label.email {
	background-position: -88px -660px;
	margin: 5px 7px 0 0;
}
.popup-notify .list label.push {
	background: url(images/menu-icons.png) no-repeat 0px -227px;
	background-size: 50px;
}
.popup-notify .list .chk-area {
	background: url(images/sprite.png) no-repeat -155px -695px;
	width: 66px;
	height: 33px;
	border: 0;
	margin: 0;
}
.popup-notify .list .chk-area:hover { background-position: -227px -696px; }
.popup-notify .list .chk-checked { background-position: 0 -697px; }
.popup-notify .list .chk-checked:hover { background-position: -76px -697px; }
.popup-notify .menu {
	font-size: 16px;
	line-height: 19px;
	margin: 1px -15px 0 0;
}
.popup-notify .menu > li > a:after { top: 12px; }
.popup-notify .menu ul{ width:150px;}
.popup-notify .menu > li > a { 
	padding: 5px 35px 5px 10px;
	color:#d4d1d1;
}
.popup-notify .btn-area { padding: 26px 21px; }

/* popup password styles */
.popup-password {
    background: #3d4a5e;
    width: 490px;
    margin: 50px 20px;
    border: 3px solid #2a3a52;
    border-radius: 7px;
    position: relative;
    padding: 20px 15px 15px;
    line-height: 21px;
    overflow-x: hidden !important;
    font-size: 18px;
    color: #fff;
}

.popup-password .row {
    padding: 0 0 15px;
    position: relative;
}
.popup-password .row:after {
    content: '';
    display: block;
    clear: both;
}
.popup-password .row.error input[type="password"] {
    color: #ff1313;
}

.popup-password label {
	float: left;
    padding: 4px 5px 0 0;
    margin: 0;
    width: 210px;
    font-size: 16px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: capitalize;
}

.popup-password .area {
    border-bottom: 1px solid #86bad5;
	overflow: hidden;
	position: relative;
    padding: 1px 6px;
    clear: none;
    margin: 0;
    margin-bottom: 3px;
}
.popup-password .area:after,
.popup-password .area:before {
    position: absolute;
    width: 1px;
    height: 9px;
    background: #86bad5;
    content: "";
    left: 0;
    bottom: 0;
}
.popup-password .area:before {
    left: auto;
    right: 0;
}
.popup-password .error .area { border-color: #db2e2e; }
.popup-password .error .area:after,
.popup-password .error .area:before { background: #db2e2e; }

.popup-password input[type="password"] {
    width: 100%;
    outline: none;
    border: none;
    float: left;
    background: #3d4a5e;
    position: relative;
    line-height: 19px;
    color: #fff;
}
.popup-password .input-placeholder-text {
    width: 260px;
}

.popup-password .infoUserMessage {
    display: block;
    position: relative;
    left: 0;
    right: 0;
}

.popup-password .btn-area {
    text-align: center;
    position: relative;
    margin-top: 9px;
}
.popup-password .btn-blue {
    line-height: 28px;
    letter-spacing: 0;
    font-size: 16px;
    border: 0;
    padding: 0 25px;
    margin: 0 20px 0 10px;
    cursor: pointer;
}

/* popup upload photo styles */
.popup-upload {
	background: #3d4a5e;
	width: 365px;
	padding: 25px 32px 15px 30px;
	border-radius: 6px;
	margin: 0 auto;
	position: relative;
	border: 3px solid #2a3a52;
}
.popup-upload h2 {
	color: #fff;
	font-size: 25px;
	line-height: 28px;
	margin: 0 4px 31px;
	text-transform: capitalize;
	font-weight: 300;
}
.popup-upload .img-area {
	border: 2px solid #7a828a;
	overflow: hidden;
}
.popup-upload .img-area img {
	width: 100%;
	height: auto;
	display: block;
}
.popup-upload .btn-area {
	overflow: hidden;
	padding: 27px 0 10px;
}
/* Notifications styles */
.notifications-area {
	background: #3e4c60;
	overflow: hidden;
	padding: 21px 4px 67px;
	border-radius: 3px;
	margin:15px 0 0;
}
.notifications-area ul {
	margin: 0;
	list-style: none;
	overflow: hidden;
	padding: 0;
}
.notifications-area ul li {
	float: left;
	position: relative;
	border: 3px solid #263646;
	width: 154px;
	height: 154px;
	display: table;
	margin: 0 16px 34px;
}
.notifications-area ul li:hover{
	border-color:#f47564;
	text-decoration:none;
}
.notifications-area ul li.active{background:#373e47}
.notifications-area .title a:hover{ text-decoration:none;}
.notifications-area .number {
	background: #f47564;
	border-radius: 3px;
	font-size:14px;
	font-weight:400;
	padding: 0 3px 2px;
	line-height: 18px;
	color: #fff;
	min-width: 20px;
	position: absolute;
	text-align: center;
	right: 18px;
	top: 14px;
}
.notifications-area ul li a {
	display: table-cell;
	vertical-align: middle;
	width:100%;
	padding: 17px 0 35px;
}
.notifications-area ul li img {
	display: block;
	margin: 0 auto;
}
.notifications-area .title {
	text-align: center;
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0 5px;
	bottom: 18px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
	text-transform: capitalize;
}
.notifications-area .title a { color: #fff; }
/* notifications edit styles  */
.notify-edit {
	overflow: hidden;
	padding: 4px 0 0;
}
.notify-edit h2 {
	font-weight: 300;
	margin: 0 0 14px;
	font-size: 22px;
	line-height: 25px;
	color: #fff;
	overflow: hidden;
}
.notify-edit h2 a { color: #fff; }
.notify-edit h2 a:hover { text-decoration: none; }
.notify-edit h2 a:before,
.notify-edit h2 a:after {
	float: left;
	background: url(images/sprite.png) no-repeat 0 -661px;
	content: "";
	width: 12px;
	height: 19px;
	margin-top:5px;
	padding-right:9px;
}
.notify-edit h2 a:hover:before { background-position: -29px -661px; }
.notify-edit h2 a:after {
	background-position: 0 -748px;
	width: 21px;
	height: 27px;
	padding-right:8px;
	margin:0;
}
.notify-edit .content-holder {
	border-radius: 3px;
	background: #3e4c60;
	overflow: hidden;
	padding: 23px 0 0;
}
.notify-edit .search-bar {
	overflow: hidden;
	padding: 0 15px 28px 16px;
	width: 503px;
}
.notify-edit .search-bar .area,
.notify-edit .area,
.popup-notifications .phone-area .area,
.setting-msd fieldset .area {
	border-bottom: 1px solid #86bad5;
	position: relative;
	padding: 0 10px 2px;
	margin: 0 1px 10px;
	float: none;
	width: 481px;
	display: block;
	overflow:hidden;
}
 .setting-msd fieldset .area
 {
     width: 180px;
 }
 .notify-edit .search-bar .area{
	overflow:visible;
	height:29px;
	border-bottom-color:#57697c; 
	box-shadow:0 1px 0 0 #86bad5;
	-webkit-box-shadow:0 1px 0 0 #86bad5;
}
.notify-edit .search-bar .area:after,
.notify-edit .search-bar .area:before,
.notify-edit .area:after,
.notify-edit .area:before,
.popup-notifications .phone-area .area:after,
.popup-notifications .phone-area .area:before,
.setting-msd fieldset .area:after,
.setting-msd fieldset .area:before
 {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	z-index:1;
	bottom: 0;
}
.notify-edit .search-bar .area:after,
.notify-edit .search-bar .area:before{
	bottom:-1px;
}
.notify-edit .search-bar .area:before,
.notify-edit .area:before,
.popup-notifications .phone-area .area:before,
.setting-msd fieldset .area:before
 {
	left: auto;
	right: 0;
}
.notify-edit .search-bar .area.parent-focus{ background:#7f8d9b;}
.notify-edit .search-bar .area.parent-focus .search{color:#d4d1d1;}
.notify-edit .search-bar .search {
	float: left;
	width: 454px;
	background: none;
	border: 0;
	color: #889297;
	height: 23px;
	line-height:23px;
	padding: 3px 0;
}
.notify-edit .search-bar .input-placeholder-text{
	top:0;
	left:0;
}
.notify-edit .search-bar input[type="submit"] {
	background: url(images/sprite.png) no-repeat 0 -788px;
	width: 22px;
	height: 22px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	float: right;
	cursor: pointer;
	border: 0;
	margin: 4px 0 0 0;
}
.notify-edit .block {
	padding: 37px 17px;
	position: relative;
	margin: 0 0 1px;
	-webkit-transition:background 0.5s linear;
	-moz-transition:background 0.5s linear;
	-o-transition:background 0.5s linear;
	transition:background 0.5s linear;
}
.notify-edit .block:first-child { padding: 17px 17px 39px; }
.notify-edit .block:after {
	background: #263646;
	position: absolute;
	left: 16px;
	right: 15px;
	top: -1px;
	height: 1px;
	overflow: hidden;
	text-indent: -9999px;
	content: "";
}
.notify-edit .block.new-user { background: #586c88; }
.notify-edit .block .frame { overflow: hidden; }
.notify-edit .info-area {
	float: left;
	width: 120px;
	margin: 13px 39px 0 0;
}
.notify-edit .img-area {
	background: url(images/bg-users.png) no-repeat;
	position: relative;
	border: 3px solid #263646;
	overflow: hidden;
	margin: 0 0 5px;
}
.notify-edit .img-area a {
	display: block;
	position: relative;
	z-index: 1;
	min-width: 114px;
	min-height: 114px;
}
.notify-edit .img-area img { display: block; }
.notify-edit .add .img-area { background-position: 0 -114px; }
.notify-edit .img-area:hover { background-position: 0 -228px; }
.notify-edit .add .img-area:hover { background-position: 0 100%; }
.notify-edit .info-area .title {
	display: block;
	font-weight:400;
	width:100px;
	line-height: 16px;
	text-transform: capitalize;
}
.notify-edit .info-area .title a{
	display: block;
	width: 100%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	padding:0 0 2px;
}
.notify-edit .info-area .delete {
	background: url(images/sprite.png) no-repeat -119px -660px;
	width: 12px;
	overflow: hidden;
	text-indent: -9999px;
	float: right;
	margin: 1px 3px 0 5px;
	height: 15px;
}
.notify-edit .info-area .delete:hover { background-position: -119px -679px; }
.notify-edit .info-area .delete:active {
	color: #fff;
	text-decoration: underline;
	background-position: -140px -660px;
}
.notify-edit .row {
	padding: 0 0 7px;
	overflow: hidden;
}
.notify-edit .block:hover{background:#505c6e;}
.notify-edit .row:first-child { padding: 0 0 17px; }
.notify-edit input[type="text"],
.notify-edit input[type="email"] {
	background: none;
	border: 0;
	float: left;
	width: 244px;
	height: 24px;
	padding: 2px 0 0;
	color: #d4d1d1;
}
.notify-edit .input-placeholder-text{
	top:0;
	left:0;
	margin: 8px 0 0 39px;
}
.notify-edit .search-bar .input-placeholder-text{
	margin: 8px 0 0 12px;
}
.notify-edit .area {
	float: left;
	width: 335px;
	padding: 3px;
}
.notify-edit .area .icon {
	background: url(images/sprite.png) no-repeat -57px -661px;
	width: 21px;
	height: 21px;
	margin: 0 13px 0 0;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
}
.notify-edit .area.comments .icon {
	background-position: -166px -661px;
	margin: 4px 13px 0 3px
}
.notify-edit .area.email .icon {
	background-position: -88px -660px;
	margin: 1px 13px 0 2px;
}
.notify-edit .link {
	float: right;
	position: relative;
	margin: 5px 7px 0 0;
}
.notify-edit .link a { color: #d4d1d1; }
.notify-edit .link:after {
	position: absolute;
	left: -11px;
	top: 4px;
	background: url(images/divider3.png) no-repeat;
	padding: 0 0 0 15px;
	content: "";
	width: 2px;
	height: 13px;
}
.notify-edit .row .chk-area,
.automation .utilities .list .chk-area {
	background: url(images/sprite.png) no-repeat -155px -695px;
	width: 66px;
	height: 33px;
	border: 0;
	margin: 0 0 0 26px;
}
.notify-edit .row .chk-area:hover,
.automation .utilities .list .chk-area:hover { background-position: -227px -696px; }
.notify-edit .row .chk-checked,
.automation .utilities .list .chk-checked { background-position: 0 -697px; }
.notify-edit .row .chk-checked:hover,
.automation .utilities .list .chk-checked:hover { background-position: -76px -697px; }
.notify-edit .row-note:after {
	clear: both;
	display: block;
	content: "";
}
.notify-edit .row-note label {
	float: left;
	max-width: 500px;
	color: #d4d1d1;
	font-size: 13px;
	line-height: 16px;
	margin: -2px 0 0 5px;
}
.notify-edit .row-note .tooltip {
	position: relative;
	display: inline-block;
	vertical-align: top;
	color: #d4d1d1;
	font-size: 13px;
	line-height: 16px;
}
.notify-edit .row-note .tooltip em {
	background: url(images/sprite.png) no-repeat -113px -160px;
	width: 16px;
	height: 16px;
	margin: 0 0 0 2px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
}
.notify-edit .row-note .tooltip:hover .tip { display: block; }
.notify-edit .tip {
	position: absolute;
	left: -29px;
	bottom: 26px;
	background: #222931;
	border-bottom: 2px solid #343f4a;
	width: 311px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 16px;
	display: none;
	z-index:600;
}
.notify-edit .tip .tip-frame {
	padding: 8px 11px;
	margin: 0;
	list-style: none;
	position: relative;
	border-radius: 4px;
	display: block;
	border-bottom: 2px solid #f37564;
}
.notify-edit .tip:after,
.notify-edit .tip:before {
	top: 100%;
	left: 40px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.notify-edit .tip:after {
	border-color: rgba(243, 117, 100, 0);
	border-top-color: #f37564;
	border-width: 7px;
	margin-left: -7px;
}
.notify-edit .tip:before {
	border-color: rgba(52, 63, 74, 0);
	border-top-color: #343f4a;
	border-width: 8px;
	margin-left: -8px;
}
.notify-edit .select { width: 342px; }
.notify-edit ::-webkit-input-placeholder {color: #d4d1d1;}
.notify-edit :-moz-placeholder {color: #d4d1d1;}
.notify-edit ::-moz-placeholder {color: #d4d1d1;}
.notify-edit :-ms-input-placeholder {color: #d4d1d1;}
.notify-edit .select-area {
	height: 25px;
	letter-spacing: 1px;
	width: 342px !important;
}
.notify-edit .select-area .center{ 
	font-size:18px;
	line-height:21px;
	letter-spacing:normal;
}
/* popup notification styles */
.popup-notifications {
	width: 487px;
	background: #3d4a5e;
	margin: 0 auto;
	border: 3px solid #2a3a52;
	position: relative;
	box-shadow: 0 2px 3px 2px rgba(0,0,0,0.60);
	-webkit-box-shadow: 0 2px 3px 2px rgba(0,0,0,0.60);
	border-radius: 6px;
}
.popup-notifications h2 {
	border-bottom: 1px solid #57697c;
	padding: 9px 27px 12px;
	font-size: 25px;
	line-height: 28px;
	color: #fff;
	margin: 0;
	font-weight: 300;
}
.popup-notifications h2:after {
	background: url(images/sprite.png) no-repeat -114px -126px;
	width: 18px;
	height: 17px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin: 8px 10px 0 0;
	content: "";
}
.popup-notifications .textbox {
	overflow: hidden;
	padding: 20px 35px 0 24px;
	color: #e5e4ea;
	line-height: 24px;
}
.popup-notifications .textbox p { margin: 0 0 15px; }
.popup-notifications .phone-area {
	overflow: hidden;
	padding: 17px 27px 30px;
}
.popup-notifications .phone-area label {
	background: url(images/sprite.png) no-repeat -198px -662px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	text-indent: -9999px;
	float: left;
	margin: 3px 11px 0 0;
}
.popup-notifications .phone-area .area {
	border-color: #f3e613;
	float: left;
	padding: 0 1px;
	margin: 0;
	width: 340px;
}
.popup-notifications .phone-area .area input[type="text"] {
	background: #6a6f6a;
	height: 21px;
	border: 0;
	width: 310px;
	color: #f3e613;
	font-size: 16px;
	line-height: 21px;
	padding: 1px 15px 3px;
}
.popup-notifications .btn-area {
	overflow: hidden;
	padding: 20px 0;
}
.popup-notifications .phone-area .area:before,
.popup-notifications .phone-area .area:after { background: #f3e613; }
.popup-notifications .btn-blue {
	width: 221px;
	letter-spacing: 0;
	margin: 0 70px 0 0
}
/* automation styles */
.automation {
	overflow: hidden;
}
/* utilities styles */
.automation .utilities {
	float: left;
	/*width: 70.4%;*/
    width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.automation .utilities .holder {
	overflow: hidden;
	background: #3e4c60;
	border-radius: 3px;
    margin-top: 10px;
}
.automation .utilities .frame {
	padding: 19px 13px 9px;
	overflow: hidden;
}
.automation h2 {
	border-bottom: 1px solid #57697c;
	padding: 11px 13px 9px;
	margin: 0;
	overflow: hidden;
	font-weight: 300;
	font-size: 20px;
	text-transform: uppercase;
	color:#fff;
}
.automation .utilities .list {
	float: right;
	width: 217px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.automation .utilities .list:first-child {
	float: left;
	width: 250px;
}
.automation .utilities .list li {
	overflow: hidden;
	padding: 0 0 18px;
}
.automation .utilities .list:first-child li { padding: 0 0 17px; }
.automation .utilities .list .label,
.automation .utilities .list .title {
	display: inline-block;
	vertical-align: middle;
	font-size: 18px;
	line-height: 21px;
	color: #fff;
	width: 162px;
	padding: 0 7px 0 0;
}
.automation .utilities .list .title { width: 139px; }
.automation .utilities .list .chk-area {
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	float: none;
}
.automation .utilities .btn-blue {
	line-height: 32px;
	font-size: 13px;
	padding: 0 13px;
	letter-spacing: 0;
	color:#3e4c60;
}

.btn-new {
	float: left;
	background: #fff;
	border-radius: 16px;
	font-weight: 400;
	color: #3d454b;
	font-size: 13px;
	line-height: 23px;
	padding: 0 12px 2px 10px;
	margin: 0 0 0 5px;
}

.btn-new:hover {
	background: #5dacd5;
	color: #3e4c60;
	text-decoration: none;
}

.btn-new:active {
	background: #10b2da;
	color: #3e4c60;
}

/* ---------------------------------------------------------
   3. custom forms styles
   ---------------------------------------------------------*/
/* hide original element */
.jcf-hidden {
	display: block !important;
	position: absolute !important;
	left: -9999px !important; /* change to right: -9999px on RTL sites */
}
/* custom checkbox styles */
.chk-area {
	margin: -1px 6px 0 0;
	width: 14px;
	float: left;
	height: 14px;
	background: #3e4c60;
	border: 2px solid #263646;
}
.registration-form .chk-area{
	margin: 0 10px 0 0;
}
.chk-checked {
	background: url(images/sprite.png) no-repeat -188px -618px;
	margin: -2px 5px 0 0;
	border: 0;
	width: 19px;
	height: 20px;
}

.chk-checked.chk-disabled
{
    opacity: 0.5;
}

.registration-form .chk-checked{
	margin:-2px 9px 0 0;
}

.chk-area.chk-disabled:not(.chk-checked) { 
    margin: -1px 6px 0 0;
	width: 14px;
	float: left;
	height: 14px;
	background: #3e4c60;
	border: 2px solid #364656;
}
.jcf-label-disabled { color: #ccc; }
/* custom radio styles */
.rad-area {
	background: url(images/sprite.png) no-repeat -44px -480px;
	margin: 1px 11px 0 0;
	float: left;
	width: 20px;
	height: 20px;
}
.rad-checked { background-position: -76px -480px }
.rad-disabled { background-position: -234px -830px; }
/* custom select styles */
.select-area {
	border-bottom: 1px solid #86bad5;
	position: relative;
	overflow: hidden;
	cursor: default;
	height: 26px;
	float: left;
}
.registration-form .select-area{
	font-size:14px;
	line-height:17px;
}
.select-disabled { border-color: #889297; }
.select-area:after,
.select-area:before {
	position: absolute;
	width: 1px;
	height: 9px;
	background: #86bad5;
	content: "";
	left: 0;
	bottom: 0;
}
.select-area:before {
	left: auto;
	right: 0;
}
.select-disabled:after,
.select-disabled:before { background: #889297; }
.select-area .center {
	white-space: nowrap;
	padding: 3px 15px 3px 12px;
	color: #d4d1d1;
}
.registration-form  .select-area .center {
	color: #fff;
}
.select-disabled .center { color: #889297; }
.select-area .select-opener {
	background: url(images/sprite.png) no-repeat -114px -106px;
	position: absolute;
	height: 7px;
	width: 13px;
	right: 12px;
	top: 8px;
}
.group-opener {
	/*background: url(images/sprite.png) no-repeat -102px -438px;*/
    margin-left: 15px;
    font-size: smaller;
}
a.group-opener:hover {
    text-decoration: none;
}
.select-disabled .select-opener { background-position: -229px -591px }
.select-active .select-opener,
.select-area:hover .select-opener { background-position: -134px -106px; }
.select-disabled .select-opener,
.select-disabled:hover .select-opener { background-position: -229px -591px }
.select-options {
	position: absolute;
	overflow: hidden;
	background: #222931;
	z-index: 2000;
}
.select-options .drop-holder {
	overflow: hidden;
	height: 1%;
	border-bottom: 2px solid #252e3a;
}
.select-options ul,
.user-edit .dropdown-menu ul {
	list-style: none;
	overflow: hidden;
	padding: 5px 0 10px;
	margin: 0;
	font-size:18px;
	line-height:21px;
	border-bottom: 2px solid #252e3a;
}
.user-edit .dropdown-menu a{
	color:#d4d1d1;
	display:block;
	padding:0 15px 0 0;
}
.user-edit .dropdown-menu a:hover{ text-decoration:none;}
.user-edit .dropdown-menu ul,
.select-box .selection-drop{
	position:absolute;
	left:0;
	width:100%;
	background:#222931;
	top:29px;
	z-index:500;
	display:none;
	border-bottom:2px solid #252e3a;
	padding:2px 0;
}
.select-box .selection-drop{ top:28px;}
.user-edit .dropdown-menu:hover ul{ display:block;}
.select-options ul li,
.drodown-menu ul li {
	width: 100%;
	float: left;
}
.select-options ul a,
.user-edit .dropdown-menu ul li a,
.select-box .selection-drop label {
	text-decoration: none;
	padding: 0 10px;
	line-height: 32px;
	display: block;
	cursor: default;
	color: #dadcde;
	font-size: 16px;
	height: 1%;
}
.user-edit .dropdown-menu ul li a{ cursor:pointer;}
.select-options .item-selected a,
.user-edit .dropdown-menu ul li a:hover,
.select-box .selection-drop label:hover {
	text-decoration: none;
	background: #484f59;
	color: #fff;
	padding: 0 8px;
	border: solid;
	border-width: 0 2px;
	border-color: #484f59 #222931 #484f59 #f47564;
}
.select-box .selection-drop .chk-area{margin:7px 12px 0 2px;}
.select-box .selection-drop .chk-checked{ margin:5px 11px 0 2px;}
/* ---------------------------------------------------------
   4. Custom scroll styles
   ---------------------------------------------------------*/
.scrollable-area-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.scrollable-area-wrapper .vscrollbar {
	position: absolute;
	top: 0;
	right: 5px;
	width: 7px;
}
.scrollable-area-wrapper .vscroll-up,
.scrollable-area-wrapper .vscroll-down {
	background: #777;
	width: 20px;
	height: 20px;
	float: left;
	display: none;
}
.scrollable-area-wrapper .vscroll-slider {
	background: #86bad5;
	width: 7px;
	float: left;
	border-radius: 5px;
}
.js-hidden {
	display: block !important;
	left: -9999px !important;
	position: absolute !important;
	top: -9999px !important;
}
/* ---------------------------------------------------------
   5. Fancybox styles styles
   ---------------------------------------------------------*/
#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotate;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
		background: url("images/sprite.png") no-repeat 161px -56px;
}
#fancybox-loading{
	float: right;
	background: url(images/sprite.png) no-repeat -161px -56px;
	width: 21px;
	height: 18px;
	overflow: hidden;
	margin: 4px 3px;
	text-indent: -9999px;
}
@-webkit-keyframes rotate {
	 from {-webkit-transform: rotate(0deg);}
	 to {-webkit-transform: rotate(360deg);}
	}
	@-moz-keyframes rotate {
	 from {-moz-transform: rotate(0deg);}
	 to {-moz-transform: rotate(360deg);}
}
#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}
#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}
#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px; /* should be 20px */
	z-index: 1101;
	outline: none;
	display: none;
}
.add-camera #fancybox-wrap { padding-bottom: 0; }
#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: none;
}
#fancybox-content {
	width: 0;
	height: 0;
	padding: 0;
	outline: none;
	position: relative;
	overflow: hidden;
	z-index: 1102;
	border: 0px solid #fff; /* border-width should be zero */
}
    #fancybox-content div.holder {
        /**/overflow:hidden!important;
    }
    #fancybox-hide-sel-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 1101;
    }
#fancybox-close {
	background: url(images/sprite.png) no-repeat -164px -112px;
	overflow: hidden;
	text-indent: -9999px;
	position: absolute;
	width: 36px;
	height: 34px;
	right: -13px;
	cursor: pointer;
	z-index: 1103;
	display:none !important;
	top: -11px;
}
#fancybox-close:hover { background-position: -161px -156px; }
#fancybox-close:active { background-position: -161px -195px; }
#fancybox-error {
	color: #444;
	font: normal 12px/20px Arial;
	padding: 14px;
	margin: 0;
}
#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
}
#fancybox-frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
#fancybox-left,
#fancybox-right {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 35%;
	cursor: pointer;
	outline: none;
	background: transparent url(images/fancybox/blank.gif);
	z-index: 1102;
	display: none;
}
#fancybox-left { left: 0px; }
#fancybox-right { right: 0px; }
#fancybox-left-ico,
#fancybox-right-ico {
	position: absolute;
	top: 50%;
	left: -9999px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	cursor: pointer;
	z-index: 1102;
	display: block;
}
#fancybox-left-ico {
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -30px;
}
#fancybox-right-ico {
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -60px;
}
#fancybox-left:hover,
#fancybox-right:hover { visibility: visible; /* IE6 */ }
#fancybox-left:hover span { left: 20px; }
#fancybox-right:hover span {
	left: auto;
	right: 20px;
}
.fancybox-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	width: 20px;
	height: 20px;
	z-index: 1001;
	display: none;
}
#fancybox-bg-n {
	top: -20px;
	left: 0;
	width: 100%;
	background-image: url(images/fancybox/fancybox-x.png);
}
#fancybox-bg-ne {
	top: -20px;
	right: -20px;
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -162px;
}
#fancybox-bg-e {
	top: 0;
	right: -20px;
	height: 100%;
	background-image: url(images/fancybox/fancybox-y.png);
	background-position: -20px 0px;
}
#fancybox-bg-se {
	bottom: -20px;
	right: -20px;
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -182px;
}
#fancybox-bg-s {
	bottom: -20px;
	left: 0;
	width: 100%;
	background-image: url(images/fancybox/fancybox-x.png);
	background-position: 0px -20px;
}
#fancybox-bg-sw {
	bottom: -20px;
	left: -20px;
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -142px;
}
#fancybox-bg-w {
	top: 0;
	left: -20px;
	height: 100%;
	background-image: url(images/fancybox/fancybox-y.png);
}
#fancybox-bg-nw {
	top: -20px;
	left: -20px;
	background-image: url(images/fancybox/fancybox.png);
	background-position: -40px -122px;
}
#fancybox-title {
	font-family: Helvetica;
	font-size: 12px;
	z-index: 1102;
}
.fancybox-title-inside {
	padding-bottom: 10px;
	text-align: center;
	color: #333;
	background: #fff;
	position: relative;
}
.fancybox-title-outside {
	padding-top: 10px;
	color: #fff;
}
.fancybox-title-over {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	text-align: left;
}
#fancybox-title-over {
	padding: 10px;
	background-image: url(images/fancybox/fancy_title_over.png);
	display: block;
}
.fancybox-title-float {
	position: absolute;
	left: 0;
	bottom: -20px;
	height: 32px;
}
#fancybox-title-float-wrap {
	border: none;
	border-collapse: collapse;
	width: auto;
}
#fancybox-title-float-wrap td {
	border: none;
	white-space: nowrap;
}
#fancybox-title-float-left {
	padding: 0 0 0 15px;
	background: url(images/fancybox/fancybox.png) -40px -90px no-repeat;
}
#fancybox-title-float-main {
	color: #FFF;
	line-height: 29px;
	font-weight: bold;
	padding: 0 0 3px 0;
	background: url(images/fancybox/fancybox-x.png) 0px -40px;
}
#fancybox-title-float-right {
	padding: 0 0 0 15px;
	background: url(images/fancybox/fancybox.png) -55px -90px no-repeat;
}
/* IE6 */
.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_close.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_nav_left.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_nav_right.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-title-over {
	background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_title_over.png', sizingMethod='scale');
	zoom: 1;
}
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_title_left.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_title_main.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_title_right.png', sizingMethod='scale');
}
.fancybox-ie6 #fancybox-bg-w,
.fancybox-ie6 #fancybox-bg-e,
.fancybox-ie6 #fancybox-left,
.fancybox-ie6 #fancybox-right,
#fancybox-hide-sel-frame { height: expression(this.parentNode.clientHeight + "px");
}
#fancybox-loading.fancybox-ie6 {
	position: absolute;
	margin-top: 0;
 top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
}
#fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale');
}
/* IE6, IE7, IE8 */
.fancybox-ie .fancybox-bg { background: transparent !important; }
.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_n.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_ne.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_e.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_se.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_s.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_sw.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_w.png', sizingMethod='scale');
}
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/fancybox/fancy_shadow_nw.png', sizingMethod='scale');
}
/* ---------------------------------------------------------
   6. Calendar styles
   ---------------------------------------------------------*/
.datepicker {
	background: #fff;
	padding: 0 9px 9px;
}
.calendar-holder,
#ui-datepicker-div {
	width: 187px;
	overflow: hidden;
	font-size: 12px;
	border: 1px solid #b2b2b2;
	border-radius: 3px;
	padding: 2px;
	background: #fff;
}

#ui-datepicker-div{padding: 0;border:0;}
#ui-datepicker-div{
	padding:0 9px 9px;
	border-radius:0;
	margin:5px 0 0 -8px;
}
.ui-datepicker-header {
	background: none repeat scroll 0 0 #f37564;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	overflow: hidden;
	padding: 3px 25px 4px;
	position: relative;
	margin: 0 -9px 10px;
	text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
	background: no-repeat scroll -12px -480px transparent;
	height: 13px;
	overflow: hidden;
	position: absolute;
	right: 10px;
	text-indent: -9999px;
	cursor: pointer;
	top: 5px;
	width: 7px;
}
.ui-datepicker-prev {
	background-position: 0 -480px;
	left: 10px;
	right: auto;
}
.ui-datepicker-calendar,
.ui-datepicker-calendar thead,
.ui-datepicker-calendar tbody,
.ui-datepicker-calendar row {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	margin: 0;
	overflow: hidden;
	font: 14px/24px Arial, Helvetica, sans-serif;
	font-weight: 400;
}
.ui-datepicker-calendar th {
	padding: 1px;
	text-align:center;
}
.ui-datepicker-calendar th span {
	background: #3e4c60;
	color: #fff;
	display: block;
	font-size: 12px;
}
.ui-datepicker-calendar td { padding: 1px; }
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
	display: block;
	background: #ececec;
	color: #000;
	position: relative;
	text-align: center;
	width: 24px;
}
.ui-datepicker-calendar td a:hover {
	background: #eec6c0;
	text-decoration: none;
}
.ui-datepicker-calendar td a:active {
	background: #f37564;
	color: #fff;
}
.ui-datepicker-calendar td .ui-state-highlight {
	border: 1px solid #fdf1a6;
	background: #fcfbf1;
}
.ui-datepicker-calendar td .ui-state-active {
	border: 2px solid #f37564;
	background: #ececec;
	line-height: 20px;
	width: 20px;
    color: #000000;
}
/* ---------------------------------------------------------
   7. CSS animations and Styles by jser
   ---------------------------------------------------------*/
:focus { outline: -webkit-focus-ring-color auto 5px; }
#fancybox-wrap {
	transform: scale(0.5);
	-ms-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-o-transform: scale(0.5);
	opacity: 0;
}
.fancy-transition #fancybox-wrap {
	transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
	-o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fancy-hidden #fancybox-wrap{
	transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
}
.fancy-loaded #fancybox-wrap {
	transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	opacity: 1;
}
.blur-active #wrapper,
.blur-active #footer { -webkit-filter: blur(10px); }
.popup-holder {
	height: 0;
	overflow: hidden;
	position: relative;
}
#main .js-hidden .header,
#main .js-hidden .head { position: absolute; }
[data-block="holder"] { position: relative; }
[data-page] {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
	
    backface-visibility: visible;
    transform: initial;
    transform-style: flat;

    -webkit-backface-visibility: visible;
    -webkit-transform: initial;
    -webkit-transform-style: flat;

    -moz-backface-visibility: visible;
    -moz-transform: initial;
    -moz-transform-style: flat;
}

/* update */
[data-page].subactive{
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}
[data-page].active { z-index: 1; }
.datepicker a { color: #fff; }
.nextpage {
	-webkit-animation: nextpage .6s ease both;
	-moz-animation: nextpage .6s ease both;
	animation: nextpage .6s ease both;
}
@-webkit-keyframes nextpage {
	from {-webkit-transform: translateX(100%);}
}
@-moz-keyframes nextpage {
	from {-moz-transform: translateX(100%);	}
}
@keyframes nextpage {
	from {transform: translateX(100%);}
}
.prevpage {
	-webkit-animation: prevpage .7s ease both;
	-moz-animation: prevpage .7s ease both;
	animation: prevpage .7s ease both;
}
@-webkit-keyframes prevpage {
	to {
		opacity: 0;
		-webkit-transform: scale(.8);
	}
}
@-moz-keyframes prevpage {
	to {
		opacity: 0;
		-moz-transform: scale(.8);
	}
}
@keyframes prevpage {
	to {
		opacity: 0;
		transform: scale(.8);
	}
}
.prevpage-reverse {
	-webkit-animation: prevpage-reverse .6s ease both;
	-moz-animation: prevpage-reverse .6s ease both;
	animation: prevpage-reverse .6s ease both;
}
@-webkit-keyframes prevpage-reverse {
	from {-webkit-transform: translateX(0);}
	to {-webkit-transform: translateX(100%);}
}
@-moz-keyframes prevpage-reverse {
	from {-moz-transform: translateX(0);}
	to {-moz-transform: translateX(100%);}
}
@keyframes prevpage-reverse {
	from {transform: translateX(0);}
	to {transform: translateX(100%);}
}
.nextpage-reverse {
	-webkit-animation: next-reverse .7s ease both;
	-moz-animation: next-reverse .7s ease both;
	animation: next-reverse .7s ease both;
}
@-webkit-keyframes next-reverse {
	from {opacity: 0;-webkit-transform: scale(.8);}
	to {opacity: 1;-webkit-transform: scale(1);}
}
@-moz-keyframes next-reverse {
	from {opacity: 0;-moz-transform: scale(.8);}
	to {opacity: 1;-moz-transform: scale(1);}
}
@keyframes next-reverse {
	from {opacity: 0;transform: scale(.8);}
	to {opacity: 1;transform: scale(1);}
}
.error-box {
	-webkit-animation: errorbox 0.75s ease both;
	-moz-animation: errorbox 0.75s ease both;
	animation: errorbox 0.75s ease both;
    overflow:hidden!important;
}
@-webkit-keyframes errorbox {
	from {left: 0;}
	10% {left: -25px;}
	20% {left: 25px;}
	30% {left: -25px;}
	40% {left: 25px;}
	50% {left: -25px;}
	60% {left: 25px;}
	70% {left: -25px;}
	80% {left: 25px;}
	90% {left: -25px;}
	to {left: 0;}
}
@-moz-keyframes errorbox {
	from {left: 0;}
	10% {left: -25px;}
	20% {left: 25px;}
	30% {left: -25px;}
	40% {left: 25px;}
	50% {left: -25px;}
	60% {left: 25px;}
	70% {left: -25px;}
	80% {left: 25px;}
	90% {left: -25px;}
	to {left: 0;}
}
@keyframes errorbox {
	from {left: 0;}
	10% {left: -25px;}
	20% {left: 25px;}
	30% {left: -25px;}
	40% {left: 25px;}
	50% {left: -25px;}
	60% {left: 25px;}
	70% {left: -25px;}
	80% {left: 25px;}
	90% {left: -25px;}
	to {left: 0;}
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item {
	pointer-events: none;
	z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-ms-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;
}
.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width;
}
.isotope .isotope-item {
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}
.popup-overlay{
	background: #000;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 300;
	float: left;
}
#security-help.popup{
	z-index: 301;
	width:100% !important;
	left:0 !important;
	background:none;
}
[data-page^="automation"] .content{padding-top: 102px;}
[data-page^="settings"] .content{padding-top: 148px;}
[data-page^="followers"] .content{padding-top: 148px;}
[data-page^="system-users"] .content{padding-top: 148px;}
[data-page^="notifications"] .content{ padding-top:105px;}
.alarm-activate [data-page^="automation"] .content{padding-top: 148px;}
.alarm-activate [data-page^="notifications"] .content{padding-top:134px;}
.alarm-activate [data-page^="notifications"] .content .notify-edit{padding-top:17px;}
.popup{padding: 10px;}
.notification-autocomlete{
	position: absolute;
	z-index: 2;
	background:#222931;
	width:501px;
	margin:3px 0 0 -10px;
	border-bottom:2px solid #343f4a;
	max-height: 192px;
	overflow: auto;
}
.notification-autocomlete a,
.notification-autocomlete ul li{
	color:#d3d4d6;
	line-height:32px;
	font-size:16px;
	font-weight:100;
	display:block;
	padding:0 12px;
}
.notification-autocomlete a:hover,
.notification-autocomlete ul li:hover{
	border-left:2px solid #f47564;
	border-right:2px solid #222931;
	background:#484f59;
	text-decoration:none;
	padding:0 10px;
}
.notification-autocomlete ul{ margin:0; padding:0; list-style:none;}
.notification-autocomlete ul li{ overflow:hidden;} 
.notification-autocomlete ul li strong{ font-weight:300;}
body > #ui-datepicker-div{padding: 0;margin: 0;}

.followers>.block{
	border:0;
}
.followers .popup-notify{
	background:none;
	border:0;
	-webkit-box-shadow:none;
	box-shadow:none;
	max-height: none;
	margin:0;
	padding:33px 0 0px;
}
.followers .popup-notify .block{
	padding:0;
	margin:0 0 17px;
}
.followers .popup-notify .addnav{
	overflow:hidden;
	margin:0 0 12px;
}
.followers .popup-notify .btn-area{
	padding: 49px 21px 20px 9px;
}
.followers .user-edit .block:first-child{
	margin:0 0 5px;
}

#divOperationError {
    min-height:82px;
    background-color: #741C1C;
    border:1px solid #617284;
    position: fixed;
    z-index:1200;
    display: flex;
    align-content: center;
}

#divOperationError span.icon {
    position: absolute;
    left:12px;
    top:50%;
    margin-top: -31px;
    width:66px;
    height:62px; 
    background: transparent url(images/sprite.png) no-repeat 0px -311px;
}

#divOperationError div.messageText {
    text-align: left;
    padding: 12px;
    margin-left: 84px;
}

#divOperationSuccess
{
    color: #ffffff;
    min-height: 48px;
    max-width: 600px;
    position:fixed;
    left:50%;
    top:50%;
    z-index:1200;
    background: #495868 url(images/icon-thank-you.png) no-repeat;
    background-position: 10px 12px;
    text-align:left;
    border:1px solid #617284;
    line-height: normal;
    padding-left: 70px;
    padding-top: 28px;
    padding-right: 12px;
}

#divOperationSuccess .title {
    margin-bottom:14px;
}

iframe {
    display: block;
    margin: 0px auto;
    border: none;
}

div.slide iframe {
    display: none;
}

div.slide.active iframe {
    display: block;
}

.nolink
{
    cursor: default;
}

div.msPrivacy div.camheader {
    margin-bottom: 12px;
}

div.msPrivacy .camheader span {
    font-weight: bold;
}

div.msPrivacy span.msList {
    font-weight: bold;
}

div.msPrivacy .row span.label {
    text-overflow: ellipsis;
    overflow: hidden;
}

.zwHA .frame {
    border-bottom: solid 1px #57697C;
}

.zwHA .name {
    font-weight: bolder;
    float: left;
    width: 30%;
    overflow: hidden;
    margin-right: 10px;
    position:relative;
    text-overflow:ellipsis;
}

.zwHA .info {
    clear:both;
    float: left;
    font-style: italic;
}

.zwHA .control {
    float: right;
}

.zwHA .group
{
   	border-bottom: 1px solid #57697c;
	padding: 11px 13px 9px;
	margin: 0;
	overflow: hidden;
	font-weight: 300;
	font-size: 20px;
	color:#fff;
}

.zwHA .group .control {
    color: #86BAD5;
}

.zwHA .group .control a {
    color: #fff;
}

#haDevList {
	float: left;
	width: 75%
}

#haDevList ul {
	margin: 0;
	margin-top: 8px;
	padding: 0;
	font-size: 16px;
	list-style: none;
	text-transform: capitalize;
	-moz-column-count: 2;
	-moz-column-gap: 2%;
	-moz-transform-style: preserve-3d;
	-webkit-column-count: 2;
	-webkit-column-gap: 2%;
	-webkit-transform-style: preserve-3d;
	column-count: 2;
	column-gap: 2%;
	transform-style: preserve-3d;
    display: inline;
}
#haDevList ul li {
  	display:inline-block;
    width:49%;
}
#haDevList ul li .select-area{
    min-width: 200px !important;
    overflow: hidden;
    text-overflow:ellipsis;
    display:block;
}
#haDevList ul label {
  	float:left;
	margin-right: 10px;
	margin-top: 7px;
}
[data-page="automation"] .content{
	min-height: 100px;
}

.zwHA .ico-refresh {
	float: right;
	background: url(images/sprite.png) no-repeat -161px -56px;
	width: 21px;
	height: 18px;
	overflow: hidden;
	margin: 4px 3px;
	text-indent: -9999px;
}
.zwHA .ico-refresh:hover { background-position: -162px -84px; }
.zwHA .ico-refresh.active {
	-webkit-animation-name: rotate;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	-moz-animation-name: rotate;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	background-position: -162px -84px;
}

.select-options.options-overflow .drop-holder .scrollable-area-wrapper{
    width:100%!important;
}

.control .chk-area{
	float: right;
	border-radius: 50%;
	width: 39px;
	height: 40px;
	background: #fff;
	border:2px solid #fff;
	position: relative;
	margin: 0;
	-webkit-box-shadow: 0 0 18px 0 rgba(255,255,255,0.8);
	-moz-box-shadow: 0 0 18px 0 rgba(255,255,255,0.8);
	box-shadow: 0 0 18px 0 rgba(255,255,255,0.8);
}
.control .chk-area:before{
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	background: url(images/sprite.png) no-repeat -142px -787px;
	width: 18px;
	height: 28px;
	margin: -13px 0 0 -9px;
}
.control .jcf-class-style.chk-checked.chk-area,
.control .jcf-class-style{
	background: none;
	width: 65px;
	height: 33px;
	border-radius: 30px;
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.control .jcf-class-style.chk-checked.chk-area{background: #10b2da;}
.control .jcf-class-style:before{display: none;}
.control .chk-area.chk-checked:before{background-position: -73px -786px;}
.control .chk-area.chk-checked{
	width: 39px;
	height: 40px;
	background: none;
	margin: 0;
	border:2px solid #57697c;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.zwHA .slider-box{
	float: left;	
	/*width: 500px;*/
    width:40%;
}
.zwHA .slider-box .box{
	float: left;
	margin-top: 0px;
}

.slider-box .box a:hover{
	opacity: 0.8;
	-webkit-box-shadow:inset 0 0 6px 0 rgba(80,99,120,0.4);
	-moz-box-shadow:inset 0 0 6px 0 rgba(80,99,120,0.4);
	box-shadow:inset 0 0 6px 0 rgba(80,99,120,0.4);
}

.msdLink {
    margin-left: 8px;
}

.msdLink .btn-blue {

}

.loginFooterImg {
  margin: 10px;
  height: 106px;
}

.qrImg {
  margin: 10px;
  height: 106px;
}

.setting-msd fieldset {
    margin: 8px 8px 8px 0px;
    border: 2px solid #57697C;
    padding: 8px;    
    border-radius: 4px;
    width: 440px;
}

.setting-msd legend {
    padding: 2px;    
}

#browserNotSupported {
text-align:center;
margin-bottom:37px;
color: #ff1313;
}

.security-details .select-area
{
    border-bottom: none;
    font-size: 22px;
    min-width: 280px;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}

.security-details .select-area::after,
.security-details .select-area::before 
{
    background-color: transparent;
}

input[type="number"].align-right {
    text-align: right; 
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

time.date::first-letter {
    text-transform: capitalize;
}

.drop-list .option-even a span{
    overflow:hidden;
    display:block;
    text-overflow:ellipsis;
}

.partitions-error {
    color:#ff0000;
}
 
.login-dropdown .select-area {
    border-bottom: none;
    position:relative;
    cursor:pointer;
    color:#0000ff;
     text-decoration:underline;
}

.login-dropdown .select-opener {
    height:0px;

}
.login-dropdown .select-area:after, .select-area:before {
    position:relative;
}

.login-dropdown .select-area .center {
padding-left :0px;
cursor: pointer;
    text-decoration: underline;
    color: #ffffff;
}

#datetime_time {
    width: 470px;
}

section.setting-date span.select-area,
section.user-edit span.select-area,
section.registration-form span.select-area {
    text-overflow: ellipsis;
    padding-right: 20px;
}

section.registration-form span.select-area a.select-opener {
    right: 2px
}

.fix-first-visible-child-margin{ margin: 1px 0 0 !important; }

.siteInvitationPending {
    margin-left: 5px;
    font-size: 14px;
    /*font-style: italic;*/
    font-weight: bold;
    color: grey;
    float:right;
}

.row.invitation-popup{
    text-align: center;
}

.invitation-popup .btn-area {
    display: inline;
    margin:auto;
}

.invitation-popup .btn-blue{
    display:inherit;
}

.invitation-popup .btn-area input[type="reset"]
{
    margin-left:20px;
}

/*#sites-popup .login-form{
    width: 400px;
}*/
.input-placeholder-text {
    /*width: 200px;*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: red;
}
.input-placeholder-text-details {
    display: block;
    float:right;
    font-size: 10px;
    position: absolute;
    top: -40%;
    width: auto;
    right: 0;
    color: #fff;
    z-index: 99999;
}
/*.registration-form .error-message:before,
.user-edit .error-message:before {
    width:0;
    height:0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #db2e2e;
}
.registration-form .error-message, .user-edit .error-message, .setting-msd .error-message {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    color: #db2e2e;
    font-size: 14px;
    line-height: 15px;
    display: none;
    width: auto;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #db2e2e;
    margin-right: -40px;
}
.error-message::after {
    content: attr(title);
    position: fixed;
    z-index: 9999;
    min-width: 300px;
    border-style: solid;
    margin-left: 8px;
    border-width: 0px 0px 0px 2px;
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    line-height: 14px;
    color: #db2e2e;
    padding: 0px 4px;
    text-align: left;
    margin-top: -7px;
    border-color: #db2e2e;
}vilko*/
.registration-form .error .area,
.login-form .error .area {
    border-color: #db2e2e;
}

    .registration-form .error .area:after,
    .registration-form .error .area:before,
    .login-form .error .area:after,
    .login-form .error .area:before {
        background: #db2e2e;
       
    }
.group:after {
    content: "";
    display: table;
    clear: both;
}

.row.h3 .label {
    font-size: 18px;
    line-height: 21px;
    font-weight: 400;
    color: #86bad5;
    width: auto;
}

.row.h3 .area-holder {
    margin-top: 13px;
}

.novertspace {
    padding-top: 0px !important;
}
.tooltipElipsis {
    position: absolute;
    left: 0;
    color: #fff;
    font-size: 12px;
    font-style:italic;
    top: -20px
}

.required:after {
    content: " *";
    /* font-weight: bold; */
    /* color: red; */
    color: #fa5959;
}

.row.form-section {
    border-top: solid 1px white;
    width: auto;
    padding-left: 20px;
    margin-right: -20px;
    font-size: smaller;
}

.form-section .radio-label {
    display: block;
    float: left;
    text-align: left;
    width: 550px;
}

br.clear {
    clear: both;
}

.form-section .radio-group {
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.radio-error-message {
    color: #ff1313;
    display: none;
}
#failures ul {
	list-style: none;
}

#failures div.name {
	width:  200px;
	display: inline-block;
}

#failures div.control {
	position: relative;
	display: inline-block;
}
.arm-fail {
	display: block
}

.registration-form label {
    display: block;
}

.openMobileMessage {
    display: none;
}

.appDownloadContainer {
    width: calc(100% + 100px);
    border-top: solid 1px #4673c1;
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    margin-left: -70px;
}

.downloadAppImg {
    margin-top: 20px;
    height: 50px;
}
.visible-mobile {
    font-weight:bold;
    display:none;
}
/* Mobile specific overrides */
@media only screen and (max-width: 600px) {
    .appDownloadContainer {
        width:100%;
        margin-left: 0;
    }
    .downloadAppImg {
        height: 43px;
    }
    body {
        min-width: 300px;
    }
    
    .registration-popup .logo {
        margin-top: 20px;
    }

    .registration-form {
        width: auto;
    }
    .registration-form .info {
    left:auto;
        }
    .registration-form .already-registered {
        margin: 5px 30px 0 0;
    }

    .row.invitation-popup {
        padding-bottom: 0;
    }

    .login-form .btn-area {
        width: auto;
    }

    .invitation-popup .btn-area {
        display: block;
    }

    .login-form .btn-blue {
        display: block;
    }

    .invitation-popup .btn-area input[type="reset"] {
        margin-left: 0;
        margin-top: 20px;
    }

    .registration-popup .holder {
        width: 100%;
    }

    .registration-form label {
        float: none;
        width: auto;
        padding: 0;
        display: block;
        text-align: left;
    }

    .thank-popup {
        width: 100%;
    }

    #fancybox-content,
    #fancybox-wrap {
        padding: 0;
        left: 0 !important;
        width: 100% !important;
        top: 50px !important;
    }

    .thank-popup .title:before {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }

    .thank-popup .holder {
        padding: 20px;
        background: #1f252b;
    }

    .row.form-section {
        width: 85vw;
    }

    .form-section .radio-label {
        width: 80%;
    }

    .registration-form .area,
    .setting-date .input-area {
        width: 85vw;
    }

    .registration-form .select-area {
        width: 85vw !important;
    }

    .registration-form .area.has-link {
        width: 70vw;
    }

    .registration-form .check-holder {
        float: none;
    }

    .goToLogin {
        display: none;
    }

    .openMobileMessage {
        display: block;
    }

    .nav-lang {
        width: auto !important;
        right: auto;
        left: 20px;
    }

    .registration-popup .logo {
        margin-top: 80px;
    }

    .languageSelection {
        color: #000;
        background-color: #fff;
    }
    .visible-mobile {
        display:block;
    }

    .hidden-mobile {
        display: none;
    }

    .registration-form .area:after, .registration-form .area:before, .login-form .area:after, .login-form .area:before {
        width: 0px !important;
    }

    .registration-form, .login-form {
        background: none;
    }

    .registration-form input[type="password"], .registration-form input[type="text"], .login-form input[type="text"], .login-form input[type="password"] {
        background: #1f252b;
    }

    .registration-form .area, .login-form .area, .select-area {
        border-color: #7a7b7e;
    }

    .select-area:after, .select-area:before {
        width: 0px !important;
    }

    .registration-form .btn-blue, .login-form .btn-blue {
        background: #333f4c;
        border-radius: 0;
        color: #45a372;
        font-weight: bold;
    }

    .registration-form .btn-blue, .login-form .btn-blue {
        padding: 0;
        width: 100%;
    }

    .registration-form, .login-form {
        font-size: 16px;
        color: #e6e6e7;
    }

    .row.form-section {
        padding-left: 0;
        border-top-width: 0;
    }

    .registration-form .captcha-box {
        margin-left: auto;
        margin-right: auto;
        width: 290px;
    }

    .registration-form .btn-area, .login-form .btn-area {
        margin-left: auto;
        margin-right: auto;
    }

    .registration-form .already-registered {
        float: none;
        margin: 0;
    }
    
    .mobile-centered {
        text-align: center;
    }
}


/* Customized Url */

.customized-url {
    display: inline-block;
    max-width: 460px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-icon-info { display: inline-block; }

.url-icon-info:after {
    content: "i";
    display: inline-block;
    color: #506774;
    background-color: #b9d5e7;
    border-radius: 50%;
    width: 14px;
    height: 15px;
    font-weight: bold;
    margin-left: 5px;
    font-size: 11px;
    line-height: 15px;
    position: absolute;
    margin-top: -18px;
    text-align: center;
    padding-right: 1px;
}

.terms-and-conditions {
	width: 600px;
	margin: 20px;
    padding: 0 0 20px;
    position: relative;
}

.terms-and-conditions .holder {
    background: #3d4a5e;
    border-radius: 6px;
    font-size: 18px;
    line-height: 24px;
    padding: 25px 30px 10px;
    overflow: hidden;
}

.terms-and-conditions .title {
	text-align: center;
    font-size: 23px;
    line-height: 26px;
    font-weight: 300;
    border-bottom: 1px solid #000000;
    display: block;
    margin: 0 0 30px 0;
    padding: 0 0 15px 0;
    position: relative;
}

.terms-and-conditions p {
    text-align: left;
    margin: 10px 0;
}

.terms-and-conditions #tc-accept-btn { text-align: center; }

.terms-and-conditions .errorMessage {
    color: #ff1313;
    display: none;
    line-height: 18px;
}