a {
  color: #00B7FF;
}
div#app{
	position:relative;
	width:100%;
	height:100%;
	background-color: gray;
}

body {
    margin:0;
    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    background-color: #f3f5f7 !important;
}
.error{
	color:red;
	font-weight: bold;
}
#fixed-header {
	 /*margin-left:150px;
    background-color: rgba(199, 197, 197, 1);
    height: 80px;
    */
    color: rgba(44, 44, 44, 0.870588); 
    background-color: rgba(228, 238, 243, 1);
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
    box-sizing: border-box; font-family: Roboto, sans-serif; 
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.87); 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
    z-index: 1100; 
    position: fixed; 
    width: 100%; 
    top: 0px;
   
}
#fixed-header #header{
	box-sizing: border-box; 
	height: 64px; 
	padding: 5px 23px 5px 5px; 
	/*display: flex; */
	justify-content: space-between; 
	color: rgba(36, 36, 36, 1);
	margin-left: 0px;
	background: #0198d4 url('/images/smartdoorsmallwhite.png') no-repeat 1% 50%;
	z-index: 1101; 
}
#header_controls{
	float:right;
}
#fluid-body {
    margin-left:210px;
    margin-top:100px;
    /*height: 600px;*/
    min-height: -webkit-calc(100vh - 200px);
    min-height: calc(100vh - 200px);
}

#footer {
	padding-left:170px;
	padding-top:10px;
    background-color: #a0b6c4;
    height: 60px;
}
#below-footer {
	margin-left:150px;
}
#nav{
	color: rgba(45, 46, 46, 0.870588); 
	background-color: #24324c; 
	transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
	box-sizing: border-box; 
	font-family: Roboto, sans-serif; 
	box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; 
	border-top-left-radius: 0px; 
	border-top-right-radius: 0px; 
	border-bottom-right-radius: 0px; 
	border-bottom-left-radius: 0px; 
	height: 100%; 
	width: 185px; 
	position: fixed; 
	z-index: 1001; 
	left: 0px; top: 0px; 
	transform: translate(0px, 0px); 
	overflow: auto;
}
#navlist{
	margin:0;
	padding:0;
	list-style-type: none;
	margin-top:65px;
	
}
#navlist li{
	float:left;
	width:180px;
	height:50px;
}
#navlist li a{
	width:100%;
	height:100%;
	padding-top:16px;
	padding-left:60px;
	color:white;
	float:left;
}
#navlist li:hover a{
	
}



#navlist li i{
	float:left;
	font-size: 2.5em;
	color: white;
	padding:5px;
}
#navlist li:hover i{
	color: grey;
}
#navlist .login a{
	background:url('/images/icon-login.png') no-repeat 10% 50%;
}
#navlist .register a{
	background:url('/images/icon-register.png') no-repeat 10% 50%;
}

#navlist .dashboard a{
	background:url('/images/icon-dashboard.png') no-repeat 10% 50%;
}
#navlist .devices a{
	background:url('/images/icon-devices.png') no-repeat 10% 50%;
}
#navlist .guests a{
	background:url('/images/icon-guests.png') no-repeat 10% 50%;
}
#navlist .help a{
	background:url('/images/icon-help.png') no-repeat 10% 50%;
}

#registerform{
	max-width:600px;
	
}
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    color: initial;
    margin:0px;
    padding:6px;
}
a.unlock span.bgimage{
	background: transparent url(/images/padlock.png) no-repeat 1% 50%;
	padding:4px;
    padding-left:30px;
}
span.red{
	color:red;
}
span.green{
	color:green;
}
ul.pure-menu-children{
	border: 1px solid gray;
}
table.pure-table tr.pending{
	color:grey;
}
form.pure-form fieldset.bordered{
	border: 1px solid #e8e5e5;
	padding:20px;
	padding-left:40px;
	background-color: white;
	width:90%;
}
form.pure-form fieldset.bordered legend{
	width:90%;
	padding-left: 5px;
	position:relative;
	top:20px;
	
}
.isDisabled {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
#LogModal .modal-dialog{
	width:900px;
}
#LogModal .wide{
	width:1200px !important;
}
#LogModal .scrollingbox{
	max-height: 600px;
	overflow: scroll;
}
div.onlinestatus{
	width:20px;
	height:20px;
	border-radius: 10px;
}
div.online{
	background-color: #46e146;
}
div.offline{
	background-color: #f05d5d;
}
div.heartbeat_missed{
	background-color:orange;
}
tr.wifinetwork:hover{
	cursor:pointer;
	background-color: #d1d1d1;
}

a.delete{
	width:30px%;
	height:30px;
	color:white;
	float:left;
	background:url('/images/icon-delete.png') no-repeat 1% 50%;
}
.addbutton{
	
	border-radius:8px !important;
	padding:14px !important;
	float:right;
}
table.pure-table{
	background-color:white;
}
i.plusicon{
	background:url('/images/icon-plus.png') no-repeat;
	width:20px;
	Height:20px;
	float:left;
	margin-right:10px;
}
.pure-table td{
	border-left:none !important;
	border-right:none !important;
}
.pure-table thead th{
	color:#888888 !important;
}
.pure-button-primary{
	background-color: #8cc652 !important;
}
.dashboard_table{
	float:left;
	width:300px;
	margin-right:60px;
}
.userlink{
	display:block;
	height:30px;
	background:url('/images/icon-user.png') no-repeat 1% 50%;
	padding-left:30px;
	padding-top:5px;
	color:white;
	text-decoration: none;
	margin-top: 10px;
	margin-right:30px;
}

.dropdown {
    position: relative;
    display: inline-block;
    background:url('/images/icon-triangle.png') no-repeat 99% 60%;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #24324c;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* ============== CCS switch ============================*/
.switch{
  --uiSwitchSize: var(--switchSize, 64px);
  --uiSwitchBgColor: var(--switchBgColor, #f1f1f1);
  --uiSwitchBgColorActive: var(--switchBgColorActive, #4ed164);
  --uiSwitchBorderColorActive: var(--switchBorderColorActive, #fff);
  --uiSwitchBorderColorFocus: var(--switchBgColorFocus, #43b556);
  --uiSwitchButtonBgColor: var(--switchButtonBgColor, #fff);  
  
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch__label{
  display: block;
  width: 100%;
  height: 100%;
}

.switch__toggle{
  width: 0;
  height: 0;
  opacity: 0;
  
  position: absolute;
  top: 0;
  left: 0;
}

.switch__toggle:focus ~ .switch__label{
  box-shadow: 0 0 0 var(--uiSwitchThickFocus, 4px) var(--uiSwitchBorderColorFocus);
}

.switch__toggle:checked:focus ~ .switch__label{
  box-shadow: 0 0 0 var(--uiSwitchThickFocus, 4px) var(--uiSwitchBorderColorActive);
}

.switch__label:before, .switch__label:after{
  content: "";
  cursor: pointer;

  position: absolute;
  top: 0;
  left: 0;
}

.switch__label:before{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--uiSwitchBgColor);
}

.switch__label:after{
  top: 50%;
  z-index: 3;
  transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
}

/* type 1 */

.switch_type1{
  --uiSwitchBorderRadius: var(--switchBorderRadius, 40px);
  
  width: var(--uiSwitchSize);
  height: calc((var(--uiSwitchSize) / 2));
  border-radius: var(--uiSwitchBorderRadius);    
  background-color: var(--uiSwitchBgColorActive);
}

.switch_type1 .switch__label{
  border-radius: var(--uiSwitchBorderRadius);    
}

.switch_type1 .switch__label:before{
  border-radius: var(--uiSwitchBorderRadius);
  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
  transform: scale(1);
  opacity: 1;
}

.switch_type1 .switch__toggle:checked ~ .switch__label:before{
  transform: scale(0);
  opacity: .7;
}

.switch_type1 .switch__label:after{
  width: calc(var(--uiSwitchSize) / 2);
  height: calc(var(--uiSwitchSize) / 2);
  transform: translate3d(0, -50%, 0);
  
  background-color: var(--uiSwitchButtonBgColor);
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);  
}

.switch_type1 .switch__toggle:checked ~ .switch__label:after{
  transform: translate3d(100%, -50%, 0);
}

/* type 2 */

.switch_type2{
  --uiSwitchIndent: var(--switchIndent, 8px);
  --uiSwitchBorderRadius: var(--switchBorderRadius, 60px);
  
  width: var(--uiSwitchSize);
  height: calc((var(--uiSwitchSize) / 2));
  border-radius: var(--uiSwitchBorderRadius);    
  background-color: var(--uiSwitchBgColorActive);
}

.switch_type2 .switch__label{
  border-radius: var(--uiSwitchBorderRadius);    
}

.switch_type2 .switch__label:before{
  border-radius: var(--uiSwitchBorderRadius);    
  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
  transform: scale(1);
  opacity: 1;  
}

.switch_type2 .switch__toggle:checked ~ .switch__label:before{
  transform: scale(0);
  opacity: .7;
}

.switch_type2 .switch__toggle ~ .switch__label:after{
  width: calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2));
  height: calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2));
  transform: translate3d(var(--uiSwitchIndent), -50%, 0);
  
  background-color: var(--uiSwitchButtonBgColor);
  border-radius: 100%;
}

.switch_type2 .switch__toggle:checked ~ .switch__label:after{
  transform: translate3d(calc(var(--uiSwitchSize) - calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2)) - var(--uiSwitchIndent)), -50%, 0);
}

/* type 3 */

.switch_type3{
  --uiSwitchIndent: var(--switchIndent, 8px);
  
  width: var(--uiSwitchSize);
  height: calc((var(--uiSwitchSize) / 2));
  background-color: var(--uiSwitchBgColorActive);
}

.switch_type3 .switch__toggle:checked ~ .switch__label:before{
  background-color: var(--uiSwitchBgColorActive);
}

.switch_type3 .switch__label:after{
  width: calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2));
  height: calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2));
  transform: translate3d(var(--uiSwitchIndent), -50%, 0);
  background-color: var(--uiSwitchButtonBgColor);
}

.switch_type3 .switch__toggle:checked ~ .switch__label:after{
  transform: translate3d(calc(var(--uiSwitchSize) - calc((var(--uiSwitchSize) / 2) - calc(var(--uiSwitchIndent) * 2)) - var(--uiSwitchIndent)), -50%, 0);
}

/* demo styles for switch */

.switch{
  --switchSize: 50px;
  margin-top: 10px;
}

.switch_type2{
  --switchBgColorActive: #e85c3f;
  --switchBgColorFocus: #d54b2e;
}

/* ==============end CCS switch ============================*/

i.loading{
	display: block;
	width:50px;
	height:50px;
	background: transparent url(/images/Loading_icon.gif) center center no-repeat;
	
}
.alert-box {
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;  
}

.success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    display: none;
}