html {
	background-color: #272B30;
}
/* Default font size */
body.touch {
	font-size: 16px;
}
body.config {
	font-size: 14px;
}
body {
	margin-bottom: 40px; 
}
/* Always display scroll bar to avoid horizontal jumps of the content 
body {
  overflow-y: scroll;
}
body.modal-open {
  overflow-y: none;
}
*/

/* Bootstrap slider */
.slider.slider-horizontal {
	margin-left:0.5em;
	width: 90%;
	height:2em;
}
.slider.slider-horizontal .slider-track {
    height: 6px;
    margin-top: -3px;
}
.slider-handle {
	background: #3e444c;
	top:6px
}
.slider-track {
	background:transparent;
}
.slider-track-high {
	background:#ffffff;
	opacity: 0.3;
}
.slider-selection {
	background:#ffffff;
}

/* Min and plus buttons */
.btn-slider {
	border:none;
	width:30px;
	height:30px;
	opacity:0.1;
	outline:none;
	background:none;
	background-size:25px;
	background-repeat: no-repeat;
	background-position: center; 
}
.btn-slider.btn-min {
	margin-right:4px !important;
	background-image:url('/img/icon-min.png') !important;	
}
.btn-slider.btn-plus {
	background-image:url('/img/icon-plus.png') !important;	
}

/* Temperature */
.txt-temp-current {
	font-weight:bold;
}

input.form-control {
	background-color:#7a8288;
}

/* Top navigation */
.navbar-brand {
	background-image: url("/img/icon-cube.png");
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 32px auto;
    padding-left: 55px;
}

/* Sidebar navigation */
body {
  padding-top: 61px;  
}
#sidebar {
  height: 100%;
  padding-right: 0;
}
#sidebar .nav {
  width: 95%;
}
#sidebar li {
  border:0 #f2f2f2 solid;
  border-bottom-width:1px;
}

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -61.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -61.6%;
  }
  .row-offcanvas-right.active {
    right: 61.6%;
  }
  .row-offcanvas-left.active {
    left: 61.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 61.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

/* Filters */
a.filter {
	cursor: pointer;
	background-size:26px;
	background-repeat:no-repeat;
	background-position:center;
}



.typefilters a.filter span {
	display:none;
}


/* Clickable row */
.row-toggle {
	cursor: pointer;
	user-select: none;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently not supported by any browser */
}

/* Buttons */
.btn-toggle {
	border:none;
	width:44px;
	height:44px;
	margin-right:5px;
	opacity:0.3;
	outline:none;
	background:none;
	background-size:44px;
}
.btn-toggle:hover, .btn-toggle:focus, .btn-toggle:active, .btn-toggle:active:focus {
	outline:none;
}
.btn-toggle.btn-on {
	opacity:1;
}
.toggle.icon-0, .filter.icon-0, .node-icon.icon-0 {
	background-image:url('/img/icon-0.png') !important;	
}
.toggle.icon-1, .node-icon.icon-1 {
	background-image:url('/img/icon-1.png') !important;	
}
.toggle.icon-2, .node-icon.icon-2 {
	background-image:url('/img/icon-2.png') !important;	
}
.toggle.icon-3, .node-icon.icon-3 {
	background-image:url('/img/icon-3.png') !important;	
}
.toggle.icon-4, .node-icon.icon-4 {
	background-image:url('/img/icon-4.png') !important;	
}
.toggle.icon-5, .node-icon.icon-5 {
	background-image:url('/img/icon-5.png') !important;	
}
.toggle.icon-6, .node-icon.icon-6 {
	background-image:url('/img/icon-6.png') !important;	
}
.toggle.icon-7, .node-icon.icon-7 {
	background-image:url('/img/icon-7.png') !important;	
}
.toggle.icon-8, .node-icon.icon-8 {
	background-image:url('/img/icon-8.png') !important;	
}
.toggle.icon-9, .node-icon.icon-9 {
	background-image:url('/img/icon-9.png') !important;	
}
/* Only show R,G,B,W icons in outputs config, otherwise we show RGB icon */
#configOutputs .toggle.icon-10 {
	background-image:url('/img/icon-10.png') !important;	
}
#configOutputs .toggle.icon-11 {
	background-image:url('/img/icon-11.png') !important;	
}
#configOutputs .toggle.icon-12 {
	background-image:url('/img/icon-12.png') !important;	
}
#configOutputs .toggle.icon-13 {
	background-image:url('/img/icon-13.png') !important;	
}
.toggle.icon-10, .toggle.icon-11, .toggle.icon-12, .toggle.icon-13, .node-icon.icon-10, .node-icon.icon-11, .node-icon.icon-12, .node-icon.icon-13 {
	background-image:url('/img/icon-rgb.png') !important;
}
.toggle.icon-100 {
	background-image:url('/img/icon-100-open.png') !important;	
}
.toggle.icon-100.btn-on, .node-icon.icon-100, .filter.icon-100 {
	background-image:url('/img/icon-100-closed.png') !important;	
}
.toggle.icon-101, .node-icon.icon-101 {
	background-image:url('/img/icon-101.png') !important;	
}
.toggle.icon-102, .node-icon.icon-102 {
	background-image:url('/img/icon-102.png') !important;	
}
.btn-toggle.btn-disabled {
	background-color: darkred;
	border-radius: 16px;
}
.toggle.icon-201, .filter.icon-201, .node-icon.icon-201 {
	background-image:url('/img/icon-scene.png') !important;
}
.toggle.icon-202, .filter.icon-202, .node-icon.icon-202 {
	background-image:url('/img/icon-prog.png') !important;
}
.toggle.icon-203, .filter.icon-203, .node-icon.icon-203 {
	background-image:url('/img/icon-203.png') !important;
}
.toggle.icon-204, .filter.icon-204, .node-icon.icon-204 {
	background-image:url('/img/icon-204.png') !important;
}
.toggle.icon-204-readonly, .filter.icon-204-readonly, .node-icon.icon-204-readonly {
	background-image:url('/img/icon-204-readonly.png') !important;
}
.toggle.icon-204-cooling, .filter.icon-204-cooling, .node-icon.icon-204-cooling {
	background-image:url('/img/icon-204-cooling.png') !important;
}
.toggle.icon-205, .filter.icon-205, .node-icon.icon-205 {
	background-image:url('/img/icon-205.png') !important;
}
.toggle.icon-206, .filter.icon-206, .node-icon.icon-206 {
	background-image:url('/img/icon-206.png') !important;
}
.toggle.icon-208, .filter.icon-208, .node-icon.icon-208 {
	background-image:url('/img/icon-208.png') !important;
}
.filter.icon-updown {
	background-image:url('/img/icon-updown.png') !important;
}
.temp-current {
	text-align:center;
	font-size:1.5em;
}
.touch-item {
	display:table;
}
.touch-left {
	display:table-cell;
	white-space:nowrap
}
.touch-right {
	display:table-cell;
	width:99%;
	padding-left:0.5em;
}
.btn-toggle.btn[disabled] {
	opacity:0.3;
}
.btn-toggle.btn[disabled].btn-on {
	opacity:1;
}

/* Group counters */
.list-group-item.active > .badge.badge-success, .badge.badge-success {
	background:#62c462;	
}
.badge.badge-danger {
	background:#ee5f5b;
}

/* select */
select.form-control {
	background-color: #7a8288;
}

/* vertical margins */
.vmargin { margin-top: 1em; }

/* loading spinner */
@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

/* footer */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 42px;
  padding-top:5px;
  background-color: #3A3F44;
  z-index:999;
  border: 1px solid rgba(0,0,0,0.6);
}

/* audio */
.group-audio .slider.slider-horizontal {
  margin-top:1.8em;
  margin-bottom:1em;
  width:95%;
}
.group-audio .btn-slider {
  	margin-top:1em;
}
.group-audio .input-group .bootstrap-select {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
  display: table;
  table-layout: fixed;
}
.group-audio .audio-extra {
	width:50px;
	height:50px;
	margin-bottom:-50px;
	float:right;
	background-color:#ffffff;
}

#loading {
	display:block;
	width:32px;
	height:32px;
	background-image:url('/img/icon-cube.png');
	background-size:32px;
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
.loading {
	display:inline-block;
	vertical-align:middle;
	width:32px;
	height:32px;
	background-image:url('/img/icon-cube.png');
	background-size:32px;
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
#Container .mix { display:block; }
/* The side navigation menu */
.sidenav {
	display:none;
    height: 100%; /* 100% Full-height */
    width: 280px;
    position: fixed; /* Stay in place */
    z-index: 9999; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: rgb(58, 63, 68);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px; /* Place content 50px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 36px;
    margin-left: 50px;
}
.sidenav a.closebtn:hover {
	text-decoration:none;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {/*font-size: 18px;*/}
} 
/* Temp config button */
.tempconfig { 
	opacity:0.3;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#3A3F44;
    opacity: 1; /* Firefox */
}
.footer-nav {
	font-size:26px;
}
.footer-nav a {
	margin-left:1em;
}
/* Fix for handling mouseup event on disabled input */
input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
}
input.disabled:focus {
	box-shadow: none;
	border-color:#000;
}
.navbar-brand .touch-title {
	display:block;
	margin-top:-4px;
	font-size:70%;
	opacity:0.7;
}
.navbar-brand {
	line-height:20px;
	padding-top:15px;
}
.btn-rgbcolor {
	width:44px;
	height:44px;
	border-radius:50%;
	float:right;
	margin-top:-10px;
	text-indent:-999px;
}
textarea.form-control {
	background-color: #7a8288;
}