.content-block.main-button-container {
  position: absolute;
  bottom:100px;
  width:100%;
}
.content-block.secondary-buttons-container {
  position: absolute;
  bottom:0px;
  padding: 0 20px;
  width:100%;
  border:solid 0px red !important;
}
.content-block-form {
  margin: 10px 3%;
  padding: 0;
  width:94%;
  border:solid 0px red;
}
.content-block-privacity {
  margin: 0 3% 0 3%;
  padding: 0;
  width:94%;
  border:solid 0px red;
}
.content-block-privacity p {
  text-align:justify;
  font-family:arial;
}
.content-block-form .item-form {
  margin: 0 0 15px 0;
}
.main-button {
  border: 3px solid #67beff;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  border-radius: 8px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  padding: 10px 0;
  margin: 0;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28px;
  font-family: inherit;
  cursor: pointer;
  outline: 0;
  
  background: url('../../img/bg-button.png') #0072bb repeat top; /* For browsers that do not support gradients */
  background: url('../../img/bg-button.png') repeat top -webkit-linear-gradient(left,#0072bb, #28abff, #0072bb); /* For Safari 5.1 to 6.0 */
  background: url('../../img/bg-button.png') repeat top -o-linear-gradient(left,#0072bb, #28abff, #0072bb); /* For Opera 11.1 to 12.0 */
  background: url('../../img/bg-button.png') repeat top -moz-linear-gradient(left,#0072bb, #28abff, #0072bb); /* For Firefox 3.6 to 15 */
  background: url('../../img/bg-button.png') repeat top linear-gradient(to right,#0072bb, #28abff, #0072bb); /* Standard syntax */
}
.secondary-buttons-container .secondary-buttons {/*luis*/
  width:100%;
  border:solid 0px red;
}
.secondary-buttons-container .secondary-buttons .btn1 {
  width:49.8%;
}
.secondary-buttons-container .secondary-buttons .btn2 {
  width:49.8%;
}
.page img {/*Full Banner*/
  width:100%;
  height:100%; 
}
.page label {
  width:100%;
  color:#252525;
  font-size:16px;
}
.page input {
  width:100%;
  color:#088dd7;
  font-size:20px;
  background: transparent;
  border: 0;
  border:solid 1px #79c4ff;
}
.page input:disabled {
  width:100%;
  color:#088dd7;
  font-size:20px;
  background: transparent;
  margin-top:2px;
  padding-top:0px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:5px;
  border: 0;
  border-bottom:solid 1px #79c4ff;
}
.page textarea {
  width:96%;
  height:130px;
  font-family: arial;
  color:#088dd7;
  font-size:20px;
  background: transparent;
  margin-top:2px;
  padding:5px;
  border: 0;
  border:solid 1px #79c4ff;
}
.page input.uuid {
  font-size:15px;
}
.left-arrow {
  /*background: url('../../img/left-arrow.png') no-repeat;
  background-size: 12px 19px;
  background-position: 0 0;
  padding:3px 0 0 16px;*/
  color:#088dd7;
  font-size:12px;
  border:solid 0px red;
}
.right-arrow {
  /*background: url('../../img/right-arrow.png') no-repeat;
  background-size: 12px 19px;
  background-position: right 0;
  padding:3px 16px 0 0;*/
  color:#088dd7;
  font-size:12px;
  border:solid 0px red;
}
.page .qr-message {
  width:100%;
  color:#fff;
  font-family:arial;
  font-size:12px;
  text-align:center;
  background: #008eff;
  margin-top:50%;;
  padding:10px 0;
  border:solid 0px #79c4ff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.facebook-card .card-header {
    display: block;
    padding: 10px;
}
.facebook-card .facebook-avatar {
    float: left;
}
.facebook-card .facebook-name {
    margin-left: 44px;
    font-size: 14px;
    font-weight: 500;
}
.facebook-card .facebook-date {
    margin-left: 44px;
    font-size: 13px;
    color: #8e8e93;
}
.facebook-card .card-footer {
    background: #fafafa;
}
.facebook-card .card-footer a {
    color: #81848b;
    font-weight: 500;
}
.facebook-card .card-content img {
    display: block;
}
.facebook-card .card-content-inner {
    padding: 15px 10px;
}

.cycle-slideshow { width: 100% }
.cycle-slideshow img { width: 100%; height: auto }


.logotipo_login{
    margin-top: 15px;
    text-align: center;
    border:solid 0px red;
}
.logotipo_login .logo{
    width:300px;
    height:154px;
}
.content-block .inputUser,
.content-block .inputPassword{
    width:95% !important;
    height:40px;
    margin-bottom:8px;
    border: 0px !important;
    color:#fff !important; 
    padding-left:5% !important;
	font-size: 17px;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.content-block .btnLogin{
    float:left;
    width:100% !important;
    height:auto !important;
    padding:10px 0;
    border: 0px !important;
    color:#fff !important; 
    font-size: 27px;
    font-weight:bold;
    text-align: center;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    background: #fe363e !important; /* For browsers that do not support gradients */
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* Standard syntax */
    background: linear-gradient(to right, #fe363e,#925099,#2a69f2) !important; 
}
.content-block .icon-user{
    background:#205792 url(../../img/icon-user.png) no-repeat 95% 6px;
    background-size: 30px 30px;
	font-size: 17px;
}
.content-block .icon-password{
    background:#205792 url(../../img/icon-password.png) no-repeat 95% 6px;
    background-size: 30px 30px;
}
.content-block .btnLogin .icon-login{
    float:left;
    position:absolute;
    left:30px;
    width:35px;
    height:37px;
    background:url(../../img/icon-login.png) no-repeat left top !important;
    background-size: 35px 37px !important;
    border:solid 0px red;
    z-index:10000;
}
.content-block .btnAccept {
    float:left;
    width:100% !important;
    height:auto !important;
    padding:10px 0;
    border: 0px !important;
    color:#fff !important; 
    font-size: 27px;
    font-weight:bold;
    text-align: center;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    background: #fe363e !important; /* For browsers that do not support gradients */
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* Standard syntax */
    background: linear-gradient(to right, #fe363e,#925099,#2a69f2) !important; 
}
.content-block .btnAccept .icon-accept{
    float:left;
    position:relative;
    left:10px;
    width:35px;
    height:37px;
    background:url(../../img/icon-accept.png) no-repeat left top !important;
    background-size: 35px 37px !important;
    border:solid 0px red;
    z-index:10000;
}

.content-block .btnBackDashboard{
    float:left;
    width:100% !important;
    height:auto !important;
    padding:10px 0;
    border: 0px !important;
    color:#fff !important; 
    font-size: 27px;
    font-weight:bold;
    text-align: center;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    background: #fe363e !important; /* For browsers that do not support gradients */
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Opera 11.1 to 12.0 */
    background: -o-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* For Fx 3.6 to 15 */
    background: -moz-linear-gradient(left,#fe363e,#925099,#2a69f2) !important;
    /* Standard syntax */
    background: linear-gradient(to right, #fe363e,#925099,#2a69f2) !important; 
}
.content-block .btnBackDashboard .icon-accept{
    float:left;
    position:relative;
    left:10px;
    width:35px;
    height:37px;
    background:url(../../img/icon-accept.png) no-repeat left top !important;
    background-size: 35px 37px !important;
    border:solid 0px red;
    z-index:10000;
}

#navtitle{
	color: #ffffff !important;
}

.navbar-custom{
	color: #67beff !important;
}

.zonas{
    width:100%;
    height:70%;
    overflow:auto; 
    border:solid 0px red;
}
.zonas .row{
    margin:2% 0 2% 2%;
}
.zonas .item{
    float:left;
    width: 48%;
    background:#b5d3f4;
    cursor: pointer;
    margin:0 2% 2% 0;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.zonas .item:hover{
        background:#d3e3f4;
}
.zonas .item .icon-zone{
    float:left;
    margin-left: 10%;
    width:100%;
    height:100%;
    border:solid 0px orange;
}
.zonas .item .icon{
    float: left;
    width:100%;
    height:33.3% !important;
    border-left: solid 1px white;
}
.zonas .item .icon img{
    float: left;
    position: relative;
    width:100%;
    height:100%;
    z-index: 1;
}
.zonas .item .icon span{
    float: left;
    position: relative;
    width:100%;
    margin-top:-70%;
    font-size:3vw;
    font-weight:bold;
    color:#28507d;
    text-align: center;
    border:solid 0px red;
    z-index: 2;
	text-overflow:clip;
	overflow: auto;
}

.zonas .item .caption{
    width:100%;
    font-size:2.3vh;
    color:#28507d;
    text-align: center;
    border-top: solid 1px white;
    padding: 5px 0 5px 0;
/*    background: #a6c6ea;*/
    
    text-overflow: clip;

    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}
.zonas .item .caption-temp{
    width:100%;
    font-size:12px;
    color:#fff;
    text-align: center;
    padding: 2px 0 5px 0;
/*    background: #a6c6ea;*/
    
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.zonainfo img{
	height: 30% !important;
	width: 70%;
	padding-left: 45px;
}
.arrow{
	position: fixed;
	bottom: 120px;
        width:100%;
        height:auto;
        text-align: center;
        border:solid 0px red;
}
.arrow img{
    width:40px;
    height:25px;
    cursor:pointer;
}

.zonas-scroller{
        float:left;
        width:100%;
        height:auto;
        overflow:auto; 
        background:#b5d3f4;
        border-bottom:solid 1px white;
}
.zonas-scroller .item{
        float:left;
        width:20%;
        height:auto; 
        background:#b5d3f4;
        cursor: pointer;
        border:solid 0px red;
}
.zonas-scroller .no-border{
        border:none !important;
}
.zonas-scroller .item:hover{
        background:#d3e3f4;
}
.zonas-scroller .item .icon-item{
    float:left;
    position:relative;
    width:100%;
    height:100%; 
    border:solid 0px red;
    z-index:1;
}
.zonas-scroller .item .caption{
    float:left;
    position:relative;
    margin:-15% 0 0 0;
    padding: 0 3px;
    width:90%;
    height:20px;
    font-size:2vh;
    color:#fff;
    text-align: center;
    z-index:2;
    border:solid 0px orange;
    
    text-overflow: ellipsis;

    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}
.zonas-scroller .item .icon-on-off{
    float:right;
    position:relative;
    margin:-118% 0 0 0;
    width:30%;
    height:30%; 
    border:solid 0px orange;
    z-index:3;
}

.icon-positions{
	float:right;
    position:relative;
    margin:-96% 7% 0 0;
    width:15%;
    height:15%; 
    z-index:10;
	border:solid 1px orange;
}

.zonas-scroller .item .icon-position1{
    float:right;
    position:relative;
    margin:-96% 7% 0 0;
    width:15%;
    height:15%; 
    border:solid 0px orange;
    z-index:10;
}

.zonas-scroller .item .icon-position2{
    float:right;
    position:relative;
    margin:-86% 7% 0 0;
    width:15%;
    height:15%; 
    border:solid 0px orange;
    z-index:10;
}

.zonas-scroller .item .icon-position3{
    float:right;
    position:relative;
    margin:-46% 7% 0 0;
    width:15%;
    height:15%; 
    border:solid 0px orange;
    z-index:10;
}

.zonas-scroller .item .right-line{
    position:relative;
    z-index: 10;
    float:right;
    margin: -200px 0 0 0;
    width:1px;
    height:200px;
    background:#fff;
}


.areas{
        width:100%;
        height:60%;
        overflow:auto; 
        border:solid 0px red;
}
.areas .row{
        margin:10px;
}
.areas .item{
    float:left;
    width:100%;
    height:auto; 
    margin-bottom: 10px;
    background:#b5d3f4;
    cursor: pointer;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.areas .item:hover{
        background:#d3e3f4;
}
.areas .item .icon-on-off{
    float:left;
    margin:0 0 0 0;
    padding: 0;
    width:15%;
    height:15%; 
    border:solid 0px orange;
}
.areas .item .caption{
    float:left;
    margin:5% 0 0 0;
    width:45%;
    font-size:3vh;
    color:#28507d;
    border:solid 0px orange;
}
.areas .item .icon-temperature{
    float:left;
    margin:0 0 0 0;
    padding: 0;
    width:15%;
    height:15%; 
    border:solid 0px orange;
}
.areas .item .caption2{
    float:left;
    margin:5% 0 0 0;
    width:20%;
    font-size:3vh;
    font-weight:bold;
    color:#28507d;
    border:solid 0px orange;
}
.areas .btn-add-area {
    float:left;
    width:100%;
    border:solid 0px red;
}
.areas .btnAdd{
    float:left;
    width:100% !important;
    height:auto !important;
    padding:15px 0;
    border: 0px !important;
    color:#fff !important; 
    font-size: 27px;
    font-weight:bold;
    text-align: center;
    background:#b5d3f4;
  
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.areas .btnAdd .icon-add{
    float:left;
    position:relative;
    left:35px;
    width:35px;
    height:37px;
    background:url(../../img/icon-add.png) no-repeat left top !important;
    background-size: 35px 37px !important;
    border:solid 0px red;
    z-index:10000;
}

.modos{
        width:100%;
        height:62%;
        overflow:auto; 
        border:solid 0px red;
}
.modos .row{
        margin:10px;
}
.modos .item{
        float:left;
        width:100%;
        height:auto; 
        margin-bottom: 15px;
        background:#b5d3f4;
        cursor: pointer;
        
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}
.modos .item:hover{
        background:#d3e3f4;
}
.modos .item .icon-item{
    float:left;
    position:relative;
    width:100%;
    height:100%; 
    border:solid 0px red;
    z-index:1;
}
.modos .item .icon-temperature{
    float:right;
    position:relative;
    margin:-100% 0% 0 0;
    width:35%;
    height:35%; 
    border:solid 0px orange;
    z-index:10;
}
.modos .item .caption{
    float:left;
    position:relative;
    margin:-20% 0 0 0;
    width:100%;
    font-size:3.5vw;
    color:#043870;
    text-align: center;
    border:solid 0px orange;
    z-index:20;
}
.modos .item .grade-caption{
    float:left;
    position:relative;
    margin:-60% 0 0 0;
    width:100%;
    height:100%; 
    font-size:6vw;
    text-align:center;
    color:#043870;
    font-weight:bold;
    border:solid 0px red;
    z-index:30;
}

.modos .item-mode{
    float:left;
    text-align: center;
}
.modos .item-mode img{
    position:relative;
    margin-top:-15px;
    width: 60%;
    height:60%;
    z-index: 0;
}

.modos .item-mode .checkbox-block{
    float:left;
    margin-top:-55px;
    width:100%;
    height: auto;
    border:solid 0px blue;
}
.modos .item-mode .checkbox-block .label{
    float:left;
    width:100%;
    height: auto;
    font-size:14px;
    color:#28507d;
    text-align:center;
}
.modos .item-mode .checkbox-block .checkbox{
    margin:0 auto;
}

.modos .item-mode .combo-block{
    float:left;
    position: relative;
    margin-top:-55px;
    width:100%;
    height: auto;
    border:solid 0px blue;
    z-index:100;
}
.modos .item-mode .combo-block .label{
    float:left;
    width:100%;
    height: auto;
    font-size:14px;
    color:#28507d;
    text-align:center;
}
.modos .item-mode .combo-block .combo{
    width:95%;
    font-size: 18px;
    padding: 10px 0 10px 5%;
    margin:0 auto;
    background:#d3e3f4;
    color:#043870;
    border:none;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.modos .item-mode .textbox-block{
    float:left;
    position: relative;
    margin-top:-55px;
    width:100%;
    height: auto;
    border:solid 0px blue;
    z-index:100;
}
.modos .item-mode .textbox-block .label{
    float:left;
    width:100%;
    height: auto;
    font-size:14px;
    color:#28507d;
    text-align:center;
}
.modos .item-mode .textbox-block .textbox{
    width:60%;
    font-size: 18px;
    padding: 10px 0 10px 5%;
    margin:0 auto;
    background:#d3e3f4;
    color:#043870;
    border:none;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.modos .item-mode .textbox-block span{
    width:40%;
    font-size: 18px;
    color:#043870;
}

.modos .item-slider{
    float:left;
    border:solid 1px red;
}
.modos .item-mode .temp-slider{
    float:left;
    position:relative;
    margin-top:15px;
    width: 100%;
    height: 200px;
    border:solid 0px red;
    z-index: 1;
}
.modos .item-mode .temp-slider .temp-actual{
    position:relative;
    margin:-20% auto 0 auto;
    width: 30%;
    height: auto;
    font-size:11px;
    color:#85a7ce;
    border:solid 0px red;
    z-index: 2;
}
.modos .item-mode .temp-slider .temp-min{
    float:left;
    position:relative;
    margin:0 0 0 5%;
    width: 30%;
    height: auto;
    font-size:11px;
    color:#85a7ce;
    border:solid 0px red;
    z-index: 3;
}
.modos .item-mode .temp-slider .temp-max{
    float:right;
    position:relative;
    margin:0 5% 0 0;
    width: 30%;
    height: auto;
    font-size:11px;
    color:#85a7ce;
    border:solid 0px red;
    z-index: 4;
}

.title-screen{
    width:100%;
    margin-top:10px;
    font-size:18px;
    font-weight:bold;
    color:#28507d;
    text-align:center;
    text-transform:uppercase;
    
    text-overflow: ellipsis;

    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}
.title-screen2{
    font-size:14px;
    font-weight:bold;
    color:#28507d;
    text-align:center;
    padding:5px 5px;
    background: #d3e3f4;
    text-transform:uppercase;
    border-bottom:solid 1px white;
    
    text-overflow: ellipsis;

    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}

.wether-info{
	position: fixed;
	bottom: 10%;
        width:100%;
        height:auto;
        text-align: center;
        font-size: 2.5vh;
        color:#043870;
        border:solid 0px red;
}
.wether-info span{
/*        font-size: 18px;*/
/*        font-weight: bold;*/
}

.wether-info span.bold{
        font-weight: bold;
}
.wether-info img{
    position:relative;
    top:3px;
    width:15px;
    height:20px;
}

.zonafooter{
	position: fixed;
	bottom: 0px;
        width:100%;
        height:100px;
        text-align: center;
        border:solid 0px red;
}
.zonafooter img{
    width:118px;
    height:100px;
}



.dashfooter img{
	height: 30% !important;
	position: relative;
	top: 65px;
}

.content-block.secondary-buttons-container-dash {
  position: absolute;
  bottom:0px;
  padding: 14vh 20px;
  width:100%;
  border:solid 0px red !important;
}

.knob{
	font-size: 42px !important;
}