/*
YUI 3.7.3 (build 5687)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#333333;background:#d9d9d9}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
*:focus {outline: none;}

a {
  color: #777;
  outline: none;
  text-decoration: none;
  font-family: arial, helvetica, verdana;
}
a:hover {}

a.linkMain {
  color: #E30613;
}
a.linkMain:hover {
  color: #5E5A5B;
}

body {
  font: 14px arial, helvetica, verdana;
}

.left {float: left;}
.right {float: right;}
.dedo {cursor: pointer;}
.help {cursor: help;}
.clear {clear: both;}
.hide {display: none;}
.show {display: block;}
.error {color: #e10000;}

.top40{margin-top: 40px;}
.top20{margin-top: 20px;}

.enlace {color: #fa202d;text-decoration: none;}
.enlace:hover {color: #000;text-decoration: none;}

.enlaceText {color: #5E5A5B;text-decoration: none;}
.enlaceText:hover {color: #fa202d;text-decoration: none;}

.no-seleccionable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.dis {color: #888;}
.disOpacity {
  opacity: 0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

.error_list { color: red; list-style: none; }
.error_list li{
  color: #cc0000;
  text-decoration: none;
  font-size: 16px;
  font-family: arial, helvetica;
  padding-right: 35px;
}

#general {
  min-width: 1260px;
}

.project-title {
  color: #E30613;
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #E30613;
  font-size: 2em;
  margin: 0.5em 0;
}
.project-title span {
  color: #595959;
  font-size: 80%;
}

.boton {
  border: 0;
  height: 28px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica;
  font-weight: normal;
  padding: 0 8px 1px;
  background: #E30613;
  cursor: pointer;
  text-align: center;
  border: 1px solid #E30613;
  border-radius: 4px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

.boton.boton-disabled {
  pointer-events: none;
  background: #aaaaaa;
  border-color: #aaaaaa;
}

div.boton, a.boton, span.boton {
  padding-top: 5px;
  height: 22px;
  display: inline-block;
}

.boton:hover {
  text-decoration: none;
  background: #5E5A5B;
  border: 1px solid #5E5A5B;
}

.boton:active {
  
}

.botonAlternate, .botonAlternateMini {
  border: 0;
  height: 28px;
  color: #555;
  font-size: 14px;
  font-family: arial, helvetica;
  font-weight: normal;
  padding: 0 8px 1px;
  background: #ccc;
  cursor: pointer;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

div.botonAlternate, a.botonAlternate {
  padding-top: 5px;
  height: 22px;
  display: inline-block;
}

div.botonAlternateMini, a.botonAlternateMini {
  height: 14px;
  display: inline-block;
  padding: 5px 5px 7px 5px;
  margin: 5px 0 5px 5px;
}

.botonAlternate:hover {
  text-decoration: none;
  border: 1px solid #fa202d;
  background: #fa202d;
}

.botonAlternate:active {
  background: #fa202d;
  color: #fff;
}

#gc {
  width: 1240px;
  margin: 40px auto 0 auto;
  /*border: 1px #000 dotted;*/
}

#content404 {
  position:absolute;
  top: 200px;
  left: 50%;
  width:800px;
  text-align: center;
  margin-left: -400px;
}

#content404 h1 {
  text-align: center;
}

#header {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 50px;
  box-shadow: 0 1px 4px 0 rgba(4,61,93,.15);
}

#header #project-logo {
  padding-right: 15px;
  height: 100%;
  font-size: 20px;
  font-weight: bold;
  user-select: none;
  box-sizing: border-box;
  vertical-align: text-bottom;
  display: flex;
  align-items: center;
}
#header #project-logo a {
  outline: 0;
}
#header #project-logo #current-page {
  font-size: .80em;
  display: inline-block;
}
#header #project-logo #current-page .separator {
  color: #E30613;
}
#header #project-logo #current-page .page-name {
  margin-left: 3px;
  color: #5E5A5B;
}

#header #project-main-menu {
  padding-left: 0.5em;
  display: flex;
  justify-content: flex-end;
}
#header #project-main-menu .comp-navbar {
  display: flex;
  align-items: center;
}
#header #project-main-menu .comp-navbar ul li {
  display: inline-block;
}
#header #project-main-menu .comp-navbar ul li .navbar-item {
  margin: 0 2px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#header #userOptionsFlecha {
  height: 0;
  border-color: transparent transparent #1a1a1a;
  border-style: dashed dashed solid;
  border-width: 0 10px 10px;
  font-size: 0;
  position: absolute;
  right: +24px;
  top: 40px;
  width: 0;
  opacity:0.9;
  filter:alpha(opacity=90);
  z-index: 10001;
}
#header #userOptions {
  height: 75px;
  background-color: #1a1a1a;
  position: absolute;
  right: +10px;
  top: 50px;
  width: 200px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity:0.90;
  filter:alpha(opacity=90);
  z-index: 9000;
  padding: 20px;
  overflow: hidden;
}
#header #userOptions li.datos {
  font-size: 14px;
  color: #eeeeee;
  margin-bottom: 15px;
  width: 100%;
}

#menu {
  width: 920px;
  margin: 0 auto auto 290px;
  height: 80px;
  font-size: 18px;
  color: #777;
}

#menu ul li {
  float: left;
  margin-right: 40px;
  font-size: 36px;
  cursor: pointer;
}

#menu ul li a{
  font-size: 36px;
}

#menu ul li a:hover {
  color: #333;
}

#menu ul li.selected a {
  color: #333;
}

#menuLateral {
  width: 250px;
  min-height: 500px;
  float: left;
}

#menuLateral ul {
  padding-top: 40px;
}

#menuLateral ul li {
  border-left: 8px #d9d9d9 solid;
  height: 28px;
  font-size: 24px;
  color: #777;
  padding-left: 15px;
  margin: 18px 0;
  cursor: pointer;
}

#menuLateral ul li.selected {
  border-left: 8px solid #5E5A5B;
  color: #333;
}

#menuLateral ul li.selected a {
  color: #333;
}

#menuLateral ul li a {
  font-size: 24px;
  color: #777;
}

#menuLateral ul li a:hover {
  color: #333;
}

#contentWrapper {
  clear: both;
}

#return-page-container {
  position: relative;
}
#return-page-container #return-page-content {
  position: absolute;
  top: -45px;
  left: 0;
}
#return-page-container #return-page-content a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E30613;
}
#return-page-container #return-page-content a:hover {
  color: #5E5A5B;
}
#return-page-container #return-page-content a img {
  margin-right: 5px;
}


#content {
  width: 900px;
  min-height: 500px;
  float: left;
  border-left: 1px solid #aaa;
  padding-left: 50px;
  margin-left:-2px;
}

#ui-datepicker-div {
  font-size: 10px;
  width: 200px;
  border: 0;
  display:none;
  background-color: #333;
}

.ui-datepicker-trigger {
  cursor: pointer;
  float: inherit;
}

img.ui-datepicker-trigger {
  vertical-align: text-bottom;
}

.datepicker-hide-year .ui-datepicker-year{
  display:none;
}

div.growlUI {
  display:none;
}
div.growlUI h1, div.growlUI h2 {
  color: #ff0000;
  padding: 5px 5px 5px 75px;
  text-align: left;
}

.messagesList {
  clear: both;
}
.messagesList ul {
  list-style: none;
  padding: 10px 0 0 0;
}

.messagesList ul li {
  text-decoration: none;
  font-size: 14px;
  font-family: arial, helvetica;
  padding-left: 25px;
  padding-top: 4px;
  height: 18px;
}

.messagesList ul li._error, .errorMsg {
  background: url('/images/icoError.png') 0 2px no-repeat transparent;
  color: #cc0000;
}

.messagesList ul li._error a, .messagesList ul li._error a:hover {
  color: #cc0000;
}

.messagesList ul li._warning, .warningMsg {
  background: url('/images/icoWarning.png') 0 2px no-repeat transparent;
  color: #D9D9D9;
}

.messagesList ul li._info, .infoMsg {
  background: url('/images/icoInfo.png') 0 2px no-repeat transparent;
  color: #D9D9D9;
}

.messagesList ul li._success, .successMsg {
  background: url('/images/icoSuccess.png') 0 2px no-repeat transparent;
  color: #00cc00;
}

/* HOME */
#menuHome {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 420px;
  margin-top: -180px;
  margin-left: -275px;
}
    
#menuHome ul {
  list-style: none;
  padding: 0;
}
#menuHome ul li.item {
  float:left;
  margin: 10px;
  background-color: #E30613;
  text-align:center;
}

#menuHome ul li.item.single {
  width: 160px;  
}

#menuHome ul li.item.double {
  width: 250px;
}

#menuHome ul li.item:active {
  /*background-color: #00adc2;*/
}

#menuHome ul li.last {
  margin-right: 0;
}

#menuHome ul li.item .app {
  height: 124px;
  clear: both;
}

#menuHome ul li.item .app_title {
  font-family: arial, helvetica;
  color: #ffffff;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-align:center;
  height: 30px;
  clear:both;
}

#menuHome ul li.item .app_coming_soon {
  font-family: arial, helvetica;
  color: #1A1A1A;
  font-size:12px;
}

#menuHome ul li.inactivo {
  opacity:0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

#content .box .title, #st .page.title, #scenes .title, #pattern .title {
  font-size: 16px;
  border-bottom: 1px solid #aaaaaa;
  min-width: 100px;
  max-width: 610px;
  text-transform: uppercase;
  padding-bottom: 2px;
  margin-bottom: 20px;
}

#content .box .title.titleWidth, #scenes .title.titleWidth, #pattern .title.titleWidth {
  max-width: none;
}

#content .box .title.titleWithSelect {
  display: flex;
  justify-content: space-between;
  text-transform: none;
}

#content .box .title .boton, #scenes .title .boton, #pattern .title .boton {
  text-transform: none;
  float: right;
  margin-top: -12px;
}

#content .box .titleMaximum {
  max-width: none;
}

#content .boxSeparator {
  margin-top: 40px;
}

#slider-range {
  font-size: 10px;
  background: none;
  background-color: #bbb;
  border:0;
  height: 14px;
  padding:0;
}
#slider-range .ui-state-default {
  background: none;
  background-color: #808080;
}

.controles .ui-slider {
  position: relative;
}

#slider-range .ui-slider-handle {
  margin-top: 5px;
  padding:0;
  height: 14px;
  border: 0;
}

#slider-range  .ui-widget {
  font-size: 10px;
}

#slider-range  .ui-slider-handle {
  top:-5px;
}

/* SCENES */

#st {
  position:absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  height: 420px;
  margin-top: -210px;
  margin-left: -480px;
}

#st .page.title {
  margin-bottom: 5px;
  max-width: calc(100% - 20px); // NOTE - 20px is scene box margin-right
}

#st .scenesTop {
  height: 40px;
}
#st .scenesTop .title {
  color: #ccc;
  font-size: 26px;
  padding-top: 10px;
}
#st .scenesTop .mode {
  padding-right: 20px;
}

#st .SceneBox {
  position: relative;
  width: 300px;
  height: 150px;
  margin: 0 20px 20px 0;
  float: left;
  box-sizing: border-box;
  color: #E30613;
  border: 1px solid #E30613;
  background-color: #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

#st .last {
  margin-left: 0;
}

#st .SceneBox .title {
  color: #E30613;
  font-size: 20px;
  text-align: center;
  height: 40px;
  padding-top: 5px;
  overflow: hidden;
}
#st .SceneBox .middleActions {
  height: 59px;
}
#st .SceneBox .bottomActions {
  height: 20px;
}
#st .SceneBox .modeNEW {
  margin-left: 132px;
  padding-top: 10px;
}
#st .SceneBox .modePlay {
  margin-left: 130px;
  padding-top: 5px;
}
#st .SceneBox .scenePlay {
  position: absolute;
  top: 50px;
  left: 125px;
  z-index: 1;
}
#st .SceneBox .sceneSpinner {
  display: none;
  position: absolute;
  top: 50px;
  left: 120px;
  z-index: 1;
  font-size: 46px;
  color: #5f5f5f; // Same than play icon
}
#st .SceneBox .actionScene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#st .SceneBox .actionScene .sceneEdit {
  position: absolute;
  top: 1px;
  right: 1px;
}
#st .SceneBox .actionScene .sceneDelete {
  position: absolute;
  bottom: 1px;
  right: 1px;
}
#st .SceneBox .actionScene .sceneTimer {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 14px;
  margin: 0px;
  padding-top: 0px;
  padding-left: 26px;
  height: 25px;
  display: flex;
  align-items: center;
  width: 40px;
}
#st .SceneBox .actionScene .sceneTimerON {
  background: url('/images/scenes/clock_.png') left top no-repeat transparent;
  color: #E30613;
}
#st .SceneBox .actionScene .sceneTimerOFF {
  background: url('/images/scenes/clock.png') left top no-repeat transparent;
  color: #666;
}

.text_main_color {
  color: #E30613;
}

.custom-scrollbar
{
  height: auto;
  padding-right:52px;
  min-height: 80vh;
  max-height: 80vh;
}

.only-scrollbar {
  padding-right: 0;
  min-height: initial;
  max-height: initial;
}

.vertical-custom-scrollbar-margin {
  height: 20px;
}


/* Page - Worked hours */
#error-statistics {
  display: none;
}

#loading-statistics {
  position: absolute;
  width: calc(100% - 52px);
  height: 70%;
}
#loading-statistics div {
  margin-top: calc(35% - 20px)!important;
  margin-left: calc(50% - 20px) !important;
}

.worked-hours-pie {
  margin: 3em auto 2em auto;
  max-width: 400px;
}

/* Icons box */
.icons_box {
  display: flex;
  justify-content: center;
}

/* Paginator */
.pagination {
  list-style: none;
}
.pagination li {
  display: inline;
}

.pagination .pagination-link {
  color: #999;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}
.pagination .pagination-link.active {
  cursor: pointer;
  pointer-events: auto;
  color: #E30613;
}

/* Paginator - Fault History */
.pagination.pagination-faultHistory {
  clear: left;
  float: right;
  margin-top: 10px;
}

/* Modal Replicate Config */
#modal_replicate_config {
  width: 100%;
  margin-top: 20px;
  height: 330px;
}

#modal_replicate_config .custom-scrollbar {
  min-height: 0;
}

#modal_replicate_config #modal_replicate_config-bottom {
  width: 100%;
  padding-top: 20px;
}

#modal_replicate_config #modal_replicate_config-bottom #modal_replicate_config-message {
  float: left;
  line-height: 28px;
}

#modal_replicate_config #modal_replicate_config-bottom #modal_replicate_config-buttons {
  float: right;
}

#modal_replicate_config #modal_replicate_config-bottom #modal_replicate_config-buttons img.loading {
  height: 25px;
  width: 25px;
  float: right;
  margin: 1px 10px 0 19px;

}

#modal_replicate_config #configurations {
  width: 230px; 
  overflow: hidden;
  border-right: 2px solid #E30613;
  padding-top: 10px;
  height: 315px; /* #modal_replicate_config #tree height + #modal_replicate_config .devices_top_row height */
}

#modal_replicate_config #tree {
  overflow: hidden;
  float: right;
  padding-top: 10px; /* Same than #modal_replicate_config #configurations */
  color: #333;
  width: 240px;
  height: 290px;
}

#modal_replicate_config #configurations .no_configurations,
#modal_replicate_config .no_devices,
#modal_replicate_config .devices_top_row {
  position: relative;
  color: #dfe9e9;
  margin: -10px auto 10px;
  text-align: right;
  width: 100%;
  text-transform: uppercase;
  cursor: pointer;
}

#modal_replicate_config .devices_top_row {
  width: 240px;
  height: 20px;
  overflow: hidden;
  margin: 0 50px 0 0;
  float: right;
}

#modal_replicate_config .devices_top_row .select_all {
  float: right;
}

#modal_replicate_config .devices_top_row .devices_counter{
  float: left;
  text-transform: none;
}

#modal_replicate_config #configurations .no_configurations,
#modal_replicate_config .no_devices {
  overflow: hidden;
  margin: 0;
  padding-top: 10px; /* Same than #modal_replicate_config #configurations */
  text-align: center;
  cursor: default;
  width: 300px;
}

#modal_replicate_config #configurations .no_configurations {
  text-align: center;
  width: 260px;
  padding-top: 0;
}

#modal_replicate_config #tree li.instalacion .item {
  color: #dfe9e9; /* Modal color */
}

#modal_replicate_config #tree ul.zones li.zone div.nombre {
  cursor: pointer;
}

#modal_replicate_config #tree ul.dropInstalation li.instalacion {
  width: 240px;
}

#modal_replicate_config #tree ul.dropInstalation li.instalacion .item {
  width: 240px;
  padding-left: 10px;
}

#modal_replicate_config #tree ul.zones {
  width: 230px;
  margin-left: 10px;
}

#modal_replicate_config #tree ul.zones .nombre {
  width: calc(100% - 17px);
}

#modal_replicate_config #tree ul.devices {
  margin-left: 10px;
  width: 220px;
}

#modal_replicate_config #tree ul.devices .device_wrapper {
  cursor: pointer;
}

#modal_replicate_config #tree ul.devices .device_wrapper img {
  float: left;
  margin: 7px 0 0 10px;
  border: 1px solid #E30613;
}

#modal_replicate_config #tree ul.devices .device_wrapper .nombreDevice {
  padding-left: 10px;
  width: calc(100% - 45px);
}

#modal_replicate_config #configurations .configuration_wrapper {
  height: 20px;
  line-height: 22px;
  margin-bottom: 10px;
}

#modal_replicate_config #configurations img.check {
  float: left;
  margin-right: 10px;
}

/* Maintenance page */
#page-maintenance #content .box .title .boton {
  margin-top: 0;
  margin-left: 10px;
}

/* Device Limit Message */
.deviceLimitMessage {
  margin-bottom: 15px;
  color: orange;
}

@import 'scrollPanel.css';