/* Reset css */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Styles */
body {
    background: #ECF3F9;
    font-family: arial, sans-serif;
    font-size: 16px;
}

a {
    color: #333;
    text-decoration: none;
}

.only-sml {
    display: none;
}

.only-lrg {
    display: block;
}

.wrapper {
    width: 1024px;
    background: #fff;
    margin: auto;
    position: relative;
    -webkit-box-shadow: 0 0 17px 9px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 0 17px 9px rgba(0, 0, 0, 0.16);
    -o-box-shadow: 0 0 17px 9px rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 17px 9px rgba(0, 0, 0, 0.16);
    padding-bottom: 50px;
}

    .wrapper:after {
        content: '';
        display: block;
        background: url(../img/footer-bg.png) no-repeat bottom center;
        width: 100%;
        height: 73px;
        position: absolute;
        bottom: -45px;
    }

    /* Header */
    .wrapper .header {
        background: url(../img/top-backgroundimg.png) no-repeat top;
        background-size: 100%;
        width: 100%;
    }

        .wrapper .header .logo-content {
            width: 100%;
            margin-bottom: 20px;
            padding: 40px 0 0 130px;
            box-sizing: border-box;
        }

            .wrapper .header .logo-content .logo {
                background: url(../img/logo-oximatic.png) no-repeat;
                text-indent: -999999px;
                width: 297px;
                height: 93px;
            }

        .wrapper .header .language-selector {
            margin-left: 90%;
        }

        .wrapper .header .nav {
            margin-top: 40px;
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }

            .wrapper .header .nav .nav-item.logged {
                display: none;
            }

.item-nav.item {
    border-bottom: 2px solid blue;
}

.wrapper .header .nav .nav-item {
    width: 16.67%;
    padding: 7px 0;
    border-top: 1px solid #009fcf;
    background: rgb(246, 248, 249);
    background: -moz-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0);
    box-sizing: content-box;
    text-align: center;
    border-right: 1px solid #009fcf;
}

    .wrapper .header .nav .nav-item.last {
        border-right: none;
    }

    .wrapper .header .nav .nav-item:hover {
        background: #003479;
        color: #fff;
    }

.wrapper .header .banner-header {
    width: 100%;
    height: auto;
}

.info-user {
    text-align: center;
    display: block;
    margin-top: 10px;
}

.info-user-text {
    display: inline-block;
    vertical-align: middle;
    width: 68%;
    padding: 15px 0;
}

.info-user .name-user, .info-user .code-user {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}

.info-user .button-container {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: 31%;
}

.button-info {
    display: inline-block;
    vertical-align: top;
    margin: 15px;
    border-radius: 5px;
    border: 1px solid #d7d7d7;
    padding: 10px;
    background: #fafafa;
    cursor: pointer;
}

    .button-info:hover {
        background: #e5f7fd;
    }

.button-day {
    display: inline-block;
    vertical-align: top;
    margin: 15px;
    border-radius: 5px;
    border: 2px solid #000;
    padding: 15px 9px;
    background: #e5f7fd;
    cursor: pointer;
    border-radius: 50%;
    min-width: 30px;
    text-align: center;
}

    .button-day.active {
        background: #4bc587;
    }

    .button-day:hover {
        background: #41a773;
    }

.button-day-selected {
    border-color: #79d3f5;
}

.button-prog-selected {
    background: #ccc;
}

/* Content */
.wrapper .section-1 {
    padding: 10px 3%;
}

    .wrapper .section-1 > .title {
        font-size: 20px;
        margin: 0 0 10px 0;
        color: #383550;
        cursor: pointer;
        border: 1px solid #eee;
        background: #fafaf;
        border-radius: 5px;
    }

        .wrapper .section-1 > .title .accordion-selector {
            display: block;
            width: 96%;
            padding: 2%;
        }

    .wrapper .section-1 .content-section {
        box-sizing: border-box;
        background: #fafafa;
        width: 100%;
        border: 1px solid #eeefef;
        position: relative;
    }

        /* Nav */
        .wrapper .section-1 .content-section .nav-content {
            background: #fff;
            border-bottom: 1px solid #ebeced;
        }

            .wrapper .section-1 .content-section .nav-content .logo-content-app {
                display: inline-block;
                vertical-align: top;
                width: 15%;
            }

                .wrapper .section-1 .content-section .nav-content .logo-content-app img {
                    width: 100%;
                    height: auto;
                    max-width: 85px;
                    display: block;
                    margin: 12% auto 0;
                }




            .wrapper .section-1 .content-section .nav-content .settings-power {
                display: inline-block;
                vertical-align: top;
                width: 25%;
            }

            .wrapper .section-1 .content-section .nav-content .settings {
                display: inline-block;
                vertical-align: top;
                text-align: right;
                width: 84%;
            }

                .wrapper .section-1 .content-section .nav-content .settings .settings-list-item {
                    display: inline-block;
                    width: 17%;
                    text-align: center;
                }

                    .wrapper .section-1 .content-section .nav-content .settings .settings-list-item a {
                        padding: 20px 0;
                        display: block;
                        color: #6c6d6f;
                    }

                    .wrapper .section-1 .content-section .nav-content .settings .settings-list-item.active a {
                        border-bottom: 3px solid #79d3f5;
                        font-weight: bold;
                    }

                .wrapper .section-1 .content-section .nav-content .settings .icon {
                    display: inline-block;
                    width: 9.3%;
                    height: 50px;
                    text-align: center;
                }

                    .wrapper .section-1 .content-section .nav-content .settings .icon a {
                        display: inline-block;
                        vertical-align: middle;
                        margin: 8px;
                        border-radius: 5px;
                        border: 1px solid #d7d7d7;
                        padding: 10px;
                        background: #fafafa;
                        cursor: pointer;
                    }

                    .wrapper .section-1 .content-section .nav-content .settings .icon img {
                        height: 20px;
                    }

                    .wrapper .section-1 .content-section .nav-content .settings .icon a:hover {
                        background: #e5f7fd;
                    }

                .wrapper .section-1 .content-section .nav-content .settings .button-program {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 8px;
                    border-radius: 5px;
                    border: 1px solid #d7d7d7;
                    padding: 20px;
                    background: #fafafa;
                    cursor: pointer;
                    color: #6c6d6f;
                }

                    .wrapper .section-1 .content-section .nav-content .settings .button-program:hover {
                        background: #e5f7fd;
                    }

        /* Content */
        .wrapper .section-1 .content-section .info {
            padding: 50px;
            display: block;
            text-align: center;
            font-size: 18px;
            color: #fff;
            background-color: #aeaeae;
            margin-bottom: 5px;
        }

        .wrapper .section-1 .content-section .content {
            bottom: 0;
            width: 100%;
            display: block;
        }

            .wrapper .section-1 .content-section .content .boxes {
            }

                .wrapper .section-1 .content-section .content .boxes .box {
                    display: inline-block;
                    vertical-align: top;
                    width: 19.3%;
                    background-color: #fff;
                    border: 1px solid #ebeced;
                    height: 260px;
                    margin-left: 0%;
                    /*color: #6c6d6f; color principal texto status*/
                    color: #adadad;
                    font-size: 14px;
                }

                    .wrapper .section-1 .content-section .content .boxes .box.first-col {
                        margin-bottom: 20px;
                    }

                    .wrapper .section-1 .content-section .content .boxes .box.first {
                        margin-left: 0;
                    }

                    .wrapper .section-1 .content-section .content .boxes .box.last {
                    }
/* login */
.wrapper .login.cuadro {
    margin: 50px 0 100px;
}

.wrapper .login .two-column-login {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin: 0 2%;
}

    .wrapper .login .two-column-login .title {
        font-size: 20px;
        display: block;
        width: 100%;
        text-align: center;
        color: #52b8d1;
    }

.wrapper .login .login-box {
    width: 50%;
    text-align: center;
    margin: 15px auto;
}

.wrapper .login label {
    margin: 10px 0;
    display: block;
}

.wrapper .login h3 {
    margin: 10px 0;
    display: block;
    font-weight: bold;
    color: #888888;
}

.wrapper .login button {
    color: #fff;
    border-radius: 5px;
    border: none;
    padding: 5px 15px 5px 15px;
    background: #579BD8;
    width: 37%;
    display: block;
    text-align: center;
    margin: 10px auto;
}

.wrapper .login.recovery .placeholderemail {
    margin: 10px 0 0 0;
}

.wrapper .login.recovery button {
    display: block;
}

.wrapper .login .login-text {
    color: #888888;
}

.wrapper .login .forgot-password {
    margin-top: 20px;
    display: block;
    text-align: center;
    color: #579BD8;
}

.wrapper .register-dist,
.wrapper .register-inst,
.wrapper .register-user {
    padding: 3%;
}

    .wrapper .register-dist .form-element,
    .wrapper .register-inst .form-element,
    .wrapper .register-user .form-element {
        margin: 5px 0;
    }

    .wrapper .register-dist button,
    .wrapper .register-inst button,
    .wrapper .register-user button {
        color: #fff;
        border-radius: 5px;
        border: none;
        padding: 5px 15px 5px 15px;
        background: #579BD8;
        width: 20%;
        display: inline-block;
        text-align: center;
        margin: 10px auto;
    }

/* info */

.wrapper .section-1 .content-section .content .boxes .box .content-box.additional-info {
    position: relative;
}

.wrapper .section-1 .content-section .content .boxes .box.oxy .content-box.additional-info .icon .number .big-number, .wrapper .section-1 .content-section .content .boxes .box.ion .content-box.additional-info .icon .number .big-number {
    font-size: 25px;
    min-width: 60px;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number.displayrojo, .wrapper .section-1 .content-section .settings-content .settings-detail .number.displayrojo {
    border-color: #c32927;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number.displayamarillo, .wrapper .section-1 .content-section .settings-content .settings-detail .number.displayamarillo {
    border-color: #FCC516;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number.displayverde, .wrapper .section-1 .content-section .settings-content .settings-detail .number.displayverde {
    border-color: #138902;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number.displaygris, .wrapper .section-1 .content-section .settings-content .settings-detail .number.displaygris {
    border-color: #ccc;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number.displayblanco, .wrapper .section-1 .content-section .settings-content .settings-detail .number.displayblanco {
    border-color: #F1F1F1;
}


.wrapper .section-1 .content-section .content .boxes .box.second-col.oxy .content-box.additional-info .icon .number, .wrapper .section-1 .content-section .content .boxes .box.second-col.ion .content-box.additional-info .icon .number {
    width: 30%;
    padding: 30px 0px 30px 0px;
}

.wrapper .section-1 .content-section .content .boxes .box .info-link {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
}

    .wrapper .section-1 .content-section .content .boxes .box .info-link .info-content {
        position: relative;
    }

        .wrapper .section-1 .content-section .content .boxes .box .info-link .info-content .additional-info-text {
            position: absolute;
            top: -27px;
            width: 150px;
            left: -102px;
            background: rgba(0, 0, 0, 0.6);
            padding: 5px;
            border-radius: 5px;
            color: #fafafa;
            display: none;
        }

/* generic*/
.wrapper .section-1 .content-section .content .boxes .box .content-box .icon {
    display: inline-block;
    margin: 20px 5%;
}

    .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .titlenumber {
        display: inline-block;
        vertical-align: middle;
    }

    .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number {
        display: inline-block;
        vertical-align: middle;
    }

    .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .circle-icon {
        border: 4px solid #adadad;
        border-radius: 110px;
        display: block;
        width: 100%;
        position: relative;
        left: 80%;
        padding: 14px;
        box-sizing: border-box;
        transform: translateX(-50%);
    }

.wrapper .section-1 .content-section .content .boxes .box .content-box .text {
    margin-top: 10px;
}

    .wrapper .section-1 .content-section .content .boxes .box .content-box .text .title {
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
    }

    .wrapper .section-1 .content-section .content .boxes .box .content-box .text .status {
        text-align: center;
    }

    .wrapper .section-1 .content-section .content .boxes .box .content-box .text .description {
        margin-top: 20px;
        padding: 0 5%;
    }

/* temperature */
.wrapper .section-1 .content-section .content .boxes .box .content-box .icon.temperature {
    width: 100%;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number {
    border: 4px solid; /*#adadad*/
    border-radius: 110px;
    padding: 30px 15px;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .temp-decrease, .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .temp-increase {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: 20px;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .temp-decrease {
    background: url(../img/icons/icon-decrease.png) no-repeat top center;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .temp-increase {
    background: url(../img/icons/icon-increase.png) no-repeat top center;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number .big-number {
    font-size: 40px;
    display: inline-block;
    vertical-align: top;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number .small-content {
    display: inline-block;
    vertical-align: top;
}

    .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number .small-content .small-number, .wrapper .section-1 .content-section .content .boxes .box .content-box .icon .number .small-content .small-image {
        display: block;
    }

.wrapper .section-1 .content-section .content .boxes .box .content-box .text .description p {
    font-style: italic;
    text-align: center;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .text .description.temperature:before {
    display: inline-block;
    width: 21px;
    height: 29px;
    content: '';
    background: url(../img/icons/icon-small-thermometer.png) no-repeat top left;
    vertical-align: top;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .text .description.temperature p {
    display: inline-block;
    max-width: 80%;
    vertical-align: top;
}

/* light */
.toggle-light {
    display: block;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .icon.on .circle-icon {
    border: 4px solid #6ed1f5;
}

.statusresume .two-column {
    display: inline-block;
    vertical-align: top;
    width: 48%;
}

    .statusresume .two-column p {
        margin-bottom: 5px;
    }

    .statusresume .two-column.second {
        text-align: left;
    }

/* pump program */
.wrapper .section-1 .content-section .content .boxes .box .content-box .text .description.motor:before {
    display: inline-block;
    width: 21px;
    height: 29px;
    content: '';
    background: url(../img/icons/icon-small-motor.png) no-repeat top left;
    vertical-align: top;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .text .description.motor p {
    display: inline-block;
    max-width: 80%;
    vertical-align: top;
}

/* pump box */
.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon {
    display: block;
    margin: 15px auto 10px;
}

.wrapper .section-1 .content-section .content .boxes .box .content-box .block-img {
    display: block;
    margin: auto;
}

/* Second Column edit settings button */
.wrapper .section-1 .content-section .content .blue-button {
}

.wrapper .section-1 .content-section .content .actual-info .button-config .progress-info {
    display: block;
    width: 100%;
}

    .wrapper .section-1 .content-section .content .actual-info .button-config .progress-info .max {
        width: 48%;
        display: inline-block;
        text-align: right;
        margin-top: 0.5rem;
    }

    .wrapper .section-1 .content-section .content .actual-info .button-config .progress-info .min {
        width: 48%;
        display: inline-block;
        text-align: left;
        margin-top: 0.5rem;
    }

.wrapper .section-1 .content-section .content .boxes .box .content-box .button-config {
    text-transform: uppercase;
}

.wrapper .section-1 .content-section .content .button-config .title-button {
    text-align: center;
    color: #6c6d6f;
    margin-top: 15px;
}

.wrapper .section-1 .content-section .content .actual-info .button-config .progress-bar {
    width: 100%;
}

.wrapper .section-1 .content-section .content .actual-info .button-config .edit-settings {
    padding: 5px 5%;
    background: #f1f1f2;
    color: #a1a3a6;
    display: block;
    margin: auto;
    max-width: 80%;
    font-size: 12px;
    text-align: center;
    border: 1px solid #e9eaeb;
    margin-top: 10px;
}

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number {
    border: 4px solid; /*#74cea1*/
    border-radius: 110px;
    padding: 18px 12px;
    display: block;
    width: 25%;
    margin: 0 auto 10px;
}

    .wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number .big-number {
        font-size: 30px;
        display: inline-block;
        vertical-align: top;
    }

    .wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number .small-content {
        display: inline-block;
        vertical-align: top;
        font-size: 18px;
    }

        .wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number .small-content .small-number {
            display: block;
        }

    /* PH */
    .wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number .big-number {
        font-size: 30px;
        text-align: center;
    }

.wrapper .section-1 .content-section .content .boxes .box.second-col .content-box .icon .number {
    border: 4px solid; /*#74cea1*/
    border-radius: 110px;
    padding: 36px 6px 33px 7px;
    min-width: 90px;
    text-align: center;
}

.wrapper .section-1 .content-section .content .actual-info .progress-bar-container {
    margin: auto;
    width: 100%;
    display: block;
    margin: 25px 0;
}

.wrapper .section-1 .content-section .content .actual-info .value-progress-bar {
    text-align: center;
    display: block;
    width: 100%;
    margin: 5px 0;
}

/* REDOX */

/* programs */
.wrapper .section-1 .content-section .programs-content {
    background-color: #fff;
}

    .wrapper .section-1 .content-section .programs-content .programs-configuration {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        border-right: 1px solid #d9dadb;
    }

        .wrapper .section-1 .content-section .programs-content .programs-configuration .programs-configuration-list {
            min-height: 400px;
        }

        .wrapper .section-1 .content-section .programs-content .programs-configuration .programs-configuration-list-item {
            display: block;
            width: 100%;
        }

            .wrapper .section-1 .content-section .programs-content .programs-configuration .programs-configuration-list-item a {
                width: 88.5%;
                display: block;
                padding: 10px;
                border-left: 5px solid #fff;
                color: #6c6d6f;
                border-bottom: 1px dashed #d7d7d7;
            }

                .wrapper .section-1 .content-section .programs-content .programs-configuration .programs-configuration-list-item a.active {
                    border-left: 5px solid #89d7f6;
                    background: #e5f7fd;
                }

    .wrapper .section-1 .content-section .programs-content .programs-detail {
        display: inline-block;
        width: 64%;
        vertical-align: top;
        padding: 2%;
    }

        .wrapper .section-1 .content-section .programs-content .programs-detail .title {
            font-size: 18px;
            color: #6c6d6f;
            font-weight: bold;
            padding: 0 0 15px 0;
        }

        .wrapper .section-1 .content-section .programs-content .programs-detail .subtitle {
            color: #6c6d6f;
            line-height: 150%;
        }

        .wrapper .section-1 .content-section .programs-content .programs-detail .actual-info {
            margin: 30px 0;
            padding: 1.5%;
            display: inline-block;
            vertical-align: middle;
            width: 25%;
            min-height: 170px;
        }

        .wrapper .section-1 .content-section .programs-content .programs-detail .actual-info-details {
            display: inline-block;
            vertical-align: top;
            width: 67%;
            padding: 1.5%;
        }

            .wrapper .section-1 .content-section .programs-content .programs-detail .actual-info-details .info-settings {
                border-radius: 5px;
                border: 1px solid #d7d7d7;
                padding: 10px;
                background: #fafafa;
                max-width: 172px;
                text-align: center;
                color: #6c6d6f;
                vertical-align: central;
            }

.wrapper .section-1 .content-section .settings-content .settings-detail .actual-info-details .info-settings.no-borders {
    border: none;
    background: none;
}

.wrapper .section-1 .content-section .programs-content .programs-detail .actual-info-details .title {
    padding: 15px 0;
}

.wrapper .section-1 .content-section .programs-content .programs-detail .number {
    border: 4px solid #74cea1;
    border-radius: 110px;
    padding: 30px 30px 30px 20px;
    max-width: 50px;
    margin: 0 auto;
}

    .wrapper .section-1 .content-section .programs-content .programs-detail .number .big-number {
        font-size: 40px;
    }

/* settings */

.wrapper .section-1 .content-section .settings-content .settings-half-panel {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}


.wrapper .section-1 .content-section .settings-content,
.wrapper .section-1 .content-section .programs-content {
    background-color: #fff;
}

    .wrapper .section-1 .content-section .settings-content .settings-configuration,
    .wrapper .section-1 .content-section .programs-content .settings-configuration {
        display: inline-block;
        width: 29.5%;
        vertical-align: top;
        border-right: 1px solid #d9dadb;
    }

        .wrapper .section-1 .content-section .settings-content .settings-configuration .settings-configuration-list,
        .wrapper .section-1 .content-section .programs-content .settings-configuration .settings-configuration-list {
            min-height: 400px;
        }

        .wrapper .section-1 .content-section .settings-content .settings-configuration .settings-configuration-list-item,
        .wrapper .section-1 .content-section .programs-content .settings-configuration .settings-configuration-list-item {
            display: block;
            width: 100%;
        }

        .wrapper .section-1 .content-section .settings-content .settings-configuration .settings-configuration-list a,
        .wrapper .section-1 .content-section .programs-content .settings-configuration .settings-configuration-list a {
            width: 88.5%;
            display: block;
            padding: 5%;
            border-left: 5px solid #fff;
            color: #6c6d6f;
            border-bottom: 1px dashed #d7d7d7;
        }

        .wrapper .section-1 .content-section .settings-content .settings-configuration .settings-configuration-list-item a.active,
        .wrapper .section-1 .content-section .programs-content .settings-configuration .settings-configuration-list-item a.active {
            border-left: 5px solid #89d7f6;
            background: #e5f7fd;
        }

    .wrapper .section-1 .content-section .settings-content .settings-detail,
    .wrapper .section-1 .content-section .programs-content .prog-detail {
        display: inline-block;
        width: 64%;
        vertical-align: top;
        padding: 2%;
    }




        .wrapper .section-1 .content-section .settings-content .settings-detail .title,
        .wrapper .section-1 .content-section .programs-content .prog-detail .title {
            font-size: 18px;
            color: #6c6d6f;
            font-weight: bold;
            padding: 0 0 15px 0;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .subtitle,
        .wrapper .section-1 .content-section .programs-content .prog-detail .subtitle {
            color: #6c6d6f;
            line-height: 150%;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .actual-info,
        .wrapper .section-1 .content-section .programs-content .prog-detail .actual-info {
            margin: 30px 0;
            padding: 1.5% 4%;
            display: inline-block;
            vertical-align: middle;
            width: 25%;
            border: 1px solid #aeaeae;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .actual-info-details,
        .wrapper .section-1 .content-section .programs-content .prog-detail .actual-info-details {
            display: inline-block;
            vertical-align: middle;
            width: 45%;
            padding: 1.5%;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .temp-info {
            vertical-align: middle;
            margin-left: 10%;
            width: 39%;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .temp-save {
            vertical-align: middle;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .onoff-checkbox {
            text-align: right;
        }

        /*Solamente para el horario de los canales*/
        .wrapper .section-1 .content-section .settings-content .settings-detail.channel-settings-window .actual-info-details {
            width: 100%;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .actual-info-details .info-settings,
        .wrapper .section-1 .content-section .programs-content .prog-detail .actual-info-details .info-settings {
            max-width: 172px;
            text-align: center;
            color: #6c6d6f;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .save-button,
        .wrapper .section-1 .content-section .programs-content .prog-detail .save-button {
            display: block;
            text-align: center;
            margin: 35px auto 0;
            border-radius: 5px;
            padding: 13px 15px;
            cursor: pointer;
            background: #e5f7fd;
            border: 1px solid #666;
            width: 30%;
        }

            .wrapper .section-1 .content-section .settings-content .settings-detail .save-button:hover,
            .wrapper .section-1 .content-section .programs-content .prog-detail .save-button:hover {
                background: #e5f7fd;
            }

        .wrapper .section-1 .content-section .settings-content .settings-detail .actual-info-details .title,
        .wrapper .section-1 .content-section .programs-content .prog-detail .actual-info-details .title {
            padding: 15px 0;
        }

        .wrapper .section-1 .content-section .settings-content .settings-detail .number,
        .wrapper .section-1 .content-section .programs-content .prog-detail .number {
            border: 4px solid #74cea1;
            border-radius: 110px;
            padding: 30px 30px 30px 20px;
            max-width: 50px;
            margin: 30px auto 0px auto;
        }

            .wrapper .section-1 .content-section .settings-content .settings-detail .number .big-number,
            .wrapper .section-1 .content-section .programs-content .prog-detail .number .big-number {
                font-size: 40px;
            }

/* admin users */

.miniboxes {
    padding: 0 20%;
    margin: auto;
}

.minibox {
    text-transform: uppercase;
    vertical-align: middle;
    margin: 4px;
    min-height: 40px;
    width: 19%;
    font-weight: 600;
    padding: 10px;
    font-size: 14px;
    display: inline-block;
    border: 1px solid #666;
    color: #666;
    cursor: pointer;
    text-align: center;
}

    .minibox.red {
        border: 1px solid #FF0000;
    }

.MenuHighlight {
    background: linear-gradient(to bottom, #e7f0f9 0%,#8EAFE8 15%,#8ECAE8 51%) !important;
    color: #ffffff;
}

    .MenuHighlight a {
        color: #ffffff !important;
    }

.usersliststyle {
    box-shadow: 0 0 10px #888888;
    color: #888888;
    background-color: white;
    padding: 2px;
    display: inline-block;
    margin: auto;
    font-weight: 400;
    margin-bottom: 45px;
}

    .usersliststyle h4 {
        font-weight: bold;
        font-size: 18px;
        border-bottom: 2px solid #579BD8;
        color: #888888;
        margin-bottom: 15px;
        padding: 2%;
    }

    .usersliststyle th {
        font-weight: bold;
        text-transform: uppercase;
        color: #888888;
        font-size: 14px;
    }

    .usersliststyle tr {
        border-bottom: 1px solid #e7f0f9;
        font-size: 14px;
    }

    .usersliststyle table, .usersliststyle th, .usersliststyle td {
        padding: 4px;
        margin-left: 4px;
        margin-right: 4px;
        color: #888888;
        font-size: 14px;
    }

        .usersliststyle table a {
            color: #337ab7;
            text-decoration: none;
        }

            .usersliststyle table a:hover {
                text-decoration: underline;
            }

.title-user-admin {
    font-size: 30px;
    text-align: center;
    padding: 20px 0;
}

/* Footer */
.wrapper .footer {
    display: block;
    width: 100%;
}

    .wrapper .footer .footer-img {
        margin: auto;
        width: 100%;
        max-width: 327px;
        display: block;
    }

.programaactivo {
    background-color: #d3ebfe !important;
    color: #FFF;
}

.programaactivoamarillo {
    background-color: #FCC516 !important;
    color: #000;
}

.programaactivorojo {
    background-color: #c32927 !important;
    color: #FFF;
}

.programaactivoverde {
    background-color: #66FF50 !important;
    color: #FFF;
}

.botonprograma:hover {
    background: #e5f7fd;
}

.popup {
    position: fixed;
    margin: auto;
    top: 50%;
    z-index: 5;
    max-width: 1090px;
    background-color: #fff;
    margin-top: 35px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: none;
    padding: 2%;
}

.greybackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2;
    display: none;
}

.popup label {
    display: inline-block;
    width: 64%;
    vertical-align: top;
    padding: 2%;
    font-size: 18px;
    color: #6c6d6f;
    font-weight: bold;
    padding: 0 0 15px 0;
}

.popup input {
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
    margin: 0px;
    font-size: 12px;
    color: #6c6d6f;
    /*font-weight: bold;*/
    /*padding: 0 0 15px 0;*/
}

.halfline {
    width: 50%;
}

.fullline {
    width: 100%;
}

.popup .fullline {
    display: inline-block;
    vertical-align: middle;
    padding: 100px;
    margin: 0px;
    font-size: 12px;
    color: #6c6d6f;
    font-weight: bold;
    padding: 0 0 15px 0;
}

.programname {
    font-size: 18px;
    color: #6c6d6f;
    font-weight: bold;
}

.programdesc {
    padding: 8px;
    display: block;
    vertical-align: middle;
}

.activeprogram {
    background: #79d3f5;
}

.generic-big-number {
    font-size: 30px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    border: 0;
    color: #adadad;
}

.settings-detail input, .info-schedhour input {
    text-align: center;
    background: #f0f0f0;
    border-radius: 5px;
    color: #000;
    padding: 10px 0px;
    border: 1px solid #aeaeae;
}

.settings-detail.ph-settings input,
.settings-detail.rx-settings input,
.settings-detail.cu-settings input,
.settings-detail.cl-settings input,
.settings-detail .grey-input {
    text-align: center;
    background: #aeaeae;
    border-radius: 5px;
    color: #fff;
    padding: 10px 0px;
    font-size: 18px;
    border: none;
}

.formhours {
    max-width: 60px;
}


.settings-detail .info-settings, .active-check {
    position: relative;
}

    .settings-detail .info-settings input[type=checkbox], .active-check input[type=checkbox] {
        position: absolute;
        width: 135px;
        height: 40px;
        opacity: 0;
    }

        .settings-detail .info-settings input[type=checkbox] + label, .active-check input[type=checkbox] + label {
            background: #999;
            width: 135px;
            height: 40px;
            display: inline-block;
            padding: 0 0 0 0px;
            background: url(../img/icons/off.png) no-repeat top center;
        }

        .settings-detail .info-settings input[type=checkbox]:checked + label, .active-check input[type=checkbox]:checked + label {
            background: #0080FF;
            width: 135px;
            height: 40px;
            display: inline-block;
            padding: 0 0 0 0px;
            background: url(../img/icons/on.png) no-repeat top center;
        }

    .settings-detail .info-settings.ion-per-check input[type=checkbox] + label {
        background: url(../img/icons/ion.png) no-repeat top center;
    }

    .settings-detail .info-settings.ion-per-check input[type=checkbox]:checked + label {
        background: url(../img/icons/per.png) no-repeat top center;
    }

.active-check {
    position: relative;
}

    .active-check input[type=checkbox] {
        background: #999;
        width: 135px;
        height: 40px;
        display: inline-block;
        padding: 0 0 0 0px;
        background: url(../img/icons/off.png) no-repeat top center;
    }

        .active-check input[type=checkbox]:checked {
            background: #0080FF;
            width: 135px;
            height: 40px;
            display: inline-block;
            padding: 0 0 0 0px;
            background: url(../img/icons/on.png) no-repeat top center;
        }

.generalinfo-settings .tempunit-check {
    position: relative;
}

    .generalinfo-settings .tempunit-check input[type=checkbox] {
        position: absolute;
        width: 135px;
        height: 40px;
        opacity: 0;
    }

        .generalinfo-settings .tempunit-check input[type=checkbox] + label {
            background: #999;
            width: 135px;
            height: 40px;
            display: inline-block;
            padding: 0 0 0 0px;
            background: url(../img/icons/fahrenheit.png) no-repeat top center;
        }

        .generalinfo-settings .tempunit-check input[type=checkbox]:checked + label {
            background: #0080FF;
            width: 135px;
            height: 40px;
            display: inline-block;
            padding: 0 0 0 0px;
            background: url(../img/icons/celsius.png) no-repeat top center;
        }


#InstallerDiag .info-installer {
    vertical-align: top;
    text-align: right;
}


/*principal*/

.manual-screen .displayverde {
    background-color: #138902;
    color: #FFF;
}


.manual-screen .displayrojo {
    background-color: #c32927;
    color: #FFF;
}

.manual-screen .displayamarillo {
    background-color: #FCC516;
    color: #000;
}

.manual-screen .displaygris {
    background-color: #c1c1c1;
    color: #5d5d5d;
}

.manual-screen .displayblanco {
    background-color: #F1F1F1;
    color: #000;
}

/*Estilos de configuración manual*/
.manual-screen {
    position: relative;
}

    .manual-screen img {
        width: 100%;
        height: auto;
    }

    .manual-screen .manual-image {
        width: 50px;
    }

    .manual-screen .manual-image-col {

    }


.manual-microdos-col {
    display: inline-block;
    vertical-align: top;
    text-align: start;
    width: 15%;
    margin: 0 4%;
}

.manual-button {
    background-color: #c1c1c1;
    border-radius: 5px;
    border: 1px #5d5d5d solid;
    padding: 5px 10px;
    text-transform: uppercase;
    font-weight: normal;
    color: #5d5d5d;
}

.manual-button2 {
    /*background-color: #AAA;*/
    border-radius: 5px;
    border: #000 solid 2px;
    padding: 5px 5px;
    text-transform: uppercase;
    font-weight: normal;
}

.manual-relative {
    position: absolute;
}

.manual-fullline {
    padding: 15px 5px;
    position: relative;
    width: 100% !important;
    margin: 7px 0;
}

.manual-Oxy {
    top: 14.5%;
    left: 15%;
}

.manual-oxyled1 {
    max-width: 17px;
    top: 12%;
    left: 21.3%;
}

.manual-oxyled2 {
    max-width: 17px;
    top: 20%;
    left: 21.3%;
}

.manual-ionled1 {
    max-width: 17px;
    top: 12%;
    left: 71.1%;
}

.manual-ionled2 {
    max-width: 17px;
    top: 20%;
    left: 71.1%;
}

.manual-RxValue {
    top: 38%;
    left: 10%;
}

.manual-PhValue {
    top: 51%;
    left: 10%;
}

.manual-ClValue {
    top: 64%;
    left: 10%;
}

.manual-Pump {
    top: 85.5%;
    left: 13%;
}

.manual-Decal {
    top: 85.5%;
    left: 24%;
}

.manual-Temp {
    top: 63%;
    left: 44.9%;
}

.manual-Ion {
    top: 16%;
    left: 76%;
}

.manual-Aux1 {
    top: 22%;
    left: 90%;
}

.manual-Light {
    top: 34%;
    left: 89.6%;
}

.manual-Aux2 {
    top: 45%;
    left: 90%;
}

.manual-Heat {
    top: 85%;
    left: 85%;
}

.manual-Flow {
    top: 84.8%;
    left: 67%;
}

.manual-bidon1 {
    top: 34%;
    left: 83%;
}

.manual-bidon2 {
    top: 49%;
    left: 83%;
}

.manual-bidon3 {
    top: 64%;
    left: 83%;
}

.manual-blue1 {
    top: 36%;
    left: 75%;
}

.manual-blue2 {
    top: 51%;
    left: 75%;
}

.manual-blue3 {
    top: 66%;
    left: 75%;
}

.manual-refresh {
    top: 6%;
    left: 80%;
    background: #fafafa;
}

.manual-gray-alert {
    background-color: #AAA;
    color: #FFF;
}

.manual-red-alert {
    background-color: #c32927;
    color: #FFF;
}

.manual-green-alert {
    background-color: #66FF50;
    color: #000;
}



.schedhour {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin-top: 40px;
}

.schedhour-ch {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin-top: 40px;
}

    .schedhour .title, .schedhour-ch .title {
        width: 100%;
    }

    .schedhour .info-schedhour input,
    .schedhour-ch .info-schedhour input {
        width: 26%;
        display: inline-block;
        vertical-align: top;
    }

.prog-detail .programs-headers-buttons {
    width: 30%;
    vertical-align: middle;
    display: block;
}

.save-settings-area {
    width: 20%;
    display: inline-block;
    vertical-align: middle;
}

.save-settings-button {
    display: block;
    text-align: center;
    margin: 35px auto 0;
    border-radius: 5px;
    padding: 13px 15px;
    cursor: pointer;
    background: #e5f7fd;
    border: 1px solid #666;
    width: 30%;
    font-weight: bold;
}

.registrationerror {
    color: red;
    font-size: 20px;
    margin: 60px;
}

.third {
    width: 32% !important;
}

.half {
    width: 50% !important;
}

.nl {
    margin-top: 20px;
}

.col-xs-2 {
    width: 16%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-5 {
    width: 41%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-12 {
    width: 100%;
}


/* Slider jquery ui styles */
.ui-slider-horizontal {
    height: 0;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -0.5em;
        border-radius: 100px;
        background: #4bc587;
        width: 0.8em;
        height: 0.8em;
    }

.slider-container .min-slider,
.slider-container .max-slider {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    padding: 4% 0;
    border: 1px solid #dddddd;
    border-radius: 100px;
    text-align: center;
}

.slider-container .slider-handle {
    width: 50%;
    display: inline-block;
    vertical-align: middle;
    opacity: 1 !important;
}


@media only screen and (max-width:767px) {
    .only-sml {
        display: block;
    }

    .only-lrg {
        display: none;
    }


    /* login */
    .wrapper .login .two-column-login {
        width: 96%;
        display: block;
    }

    .wrapper .login .login-box {
        width: 100%;
    }

    .wrapper .login .forgot-password {
        margin-bottom: 30px;
    }

    .wrapper .login button {
        width: 100%;
    }
}