/* Disabled Color:          #ddd            */
/* Icon Blue:               #169fe6         */
/* Icon Hover Blue:         #0C81DA         */


.controller-name {
    margin-bottom: 0;
    line-height: 19px;
}

.controller-desc {
    margin-left: 0;
    padding-left: 0;
    font-size: smaller;
    color: #999;
    text-transform: capitalize;
}

.b-station-image {
    float: left;
    -webkit-box-shadow: 3px 3px 3px #888;
    -ms-box-shadow: 3px 3px 3px #888;
    box-shadow: 3px 3px 3px #888;
    position: relative;
    padding: 0;
    min-width: 10px;
    min-height: 10px;
    border-radius: 12px;
}

.station-image {
    width: 100%;
    border-radius: 9px;
}

.b-station-body {
    padding: 0;
    float: right;
}

.row-highlight {
    background-color: #f8f8f8;
}

.station.row {
    /*padding: T, R, B, L*/
    padding: 8px 0 8px 10px;
    margin-bottom: 20px;
}

.program.row,
.auxiliary.row {
    /*padding: T, R, B, L*/
    padding: 8px 0 8px 0;
    margin-bottom: 10px;
    font-family: SMRTScape-Bold, Sans-Serif;
    font-size: 16px;
}

.program-name {
    margin-top: 2px;
    margin-bottom: 0px;
}

div.station-name {
    padding-left: 6px;
    font-family: SMRTScape-Bold, Sans-Serif;
    font-size: 16px;
}


/*************************************************************/
/** Station, Program, and Controller On/off                 **/
/*************************************************************/

div.stations.stations-container,
div.programs.programs-container {
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
}

div.programs.programs-container {
    padding-bottom: 1px;
    margin-bottom: 12px;
    padding-top: 11px;
}

div.station-controls,
div.program-controls,
div.auxiliary-controls {
    margin-top: -3px;
    text-align: right;
}

div.station-run-time,
div.auxiliary-run-time {
    border-top: 1px solid gainsboro;
    margin-top: 11px;
    padding-right: 0;
    padding-top: 2px;
}

    div.station-run-time span,
    div.auxiliary-run-time span {
        font-family: SMRTScape, Sans-Serif;
        font-size: 14px;
    }

input.run-time-minutes,
input.test-stations-minutes {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 2px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 7px;
}

input.test-stations-minutes {
    margin-top: 0;
}

@media screen and (max-width: 992px) {

    div.station-run-time span,
    div.auxiliary-run-time span,
    input.run-time-minutes {
        font-size: 88%;
    }

        input.run-time-minutes.minutes {
            width: 48px;
        }
}

@media screen and (max-width: 480px) {
    div.station-run-time,
    div.auxiliary-run-time {
        padding-left: 0;
    }
}

button.btn-schedule-on,
button.btn-station-on,
button.btn-program-on,
button.btn-auxiliary-on,
button.btn-auxiliary-off,
button.btn-test-stations,
button.btn-controller-off {
    float: right;
    height: 40px;
    width: 40px;
    padding: 0;
    border: none;
    outline: none;
    background-color: transparent;
}

button.btn-auxiliary-off {
    margin-left: 5px;
}

button.btn-controller-off,
button.btn-auxiliary-off {
    background: url(../Images/button-stop-a.png) no-repeat;
    background-size: 100%;
}


button.btn-station-on,
button.btn-station-on:focus,
button.btn-station-on:active,
button.btn-program-on,
button.btn-program-on:focus,
button.btn-program-on:active,
button.btn-schedule-on,
button.btn-schedule-on:focus,
button.btn-schedule-on:active,
button.btn-auxiliary-on,
button.btn-auxiliary-on:focus,
button.btn-auxiliary-on:active,
button.btn-test-stations {
    background: url(../Images/button-play-a.png) no-repeat;
    background-size: 100%;
}

    button.btn-station-on:hover,
    button.btn-program-on:hover,
    button.btn-schedule-on:hover,
    button.btn-auxiliary-on:hover,
    button.test-all-stations:hover {
        background: url(../Images/button-play-h.png) no-repeat;
        background-size: 100%;
    }

button.btn-controller-off:hover,
button.btn-auxiliary-off:hover {
    background: url(../Images/button-stop-h.png) no-repeat;
    background-size: 100%;
}

button.btn-station-on:disabled,
button.btn-schedule-on:disabled,
button.btn-program-on:disabled,
button.btn-auxiliary-on:disabled,
button.test-all-stations:disabled {
    background: url(../Images/button-play-d.png) no-repeat;
    background-size: 100%;
}

button.btn-controller-off:disabled,
button.btn-auxiliary-off:disabled {
    background: url(../Images/button-stop-d.png) no-repeat;
    background-size: 100%;
}


button.btn-test-stations {
    float: none;
    width: 31px;
    height: 31px;
    margin-right: 5px;
    border: none;
    outline: none;
    background-color: transparent;
}

div.test-all-stations-container {
    text-align: center;
    padding-top: 4px;
    margin-bottom: -26px;
    height: 38px;
    background-color: #efefef;
    border-radius: 15px;
}

div.station.row.spacer {
    margin-bottom: 9px;
}

div.test-all-stations {
    font-size: 13px;
    height: 30px;
    margin: 0 auto;
}

#btn-test-stations {
    background: url(../Images/SchedStaTest_d.png) no-repeat;
    background-position: -75px 0;
    background-size: 100px;
    height: 28px;
    width: 28px;
}

a.test-all-stations.disabled:link,
a.test-all-stations.disabled:visited,
a.test-all-stations.disabled:hover,
a.test-all-stations.disabled:active,
a.test-all-stations.disabled:disabled,
a.test-all-stations.disabled[disabled] {
    color: #ddd;
    pointer-events: none;
    cursor: default;
}

/*************************************************************/
/** Test All Stations Icon - Begin ***************************/
/*************************************************************/
.test-stations-icon,
.test-stations-icon-on,
.test-stations-icon-spinner {
    height: 20px;
    position: relative;
    display: inline-block;
    padding-top: 3px;
    width: auto;
    margin-right: 5px;
    margin-left: 41px;
}

    .test-stations-icon:before {
        content: "";
        width: 28px;
        height: 28px;
        background: url(../Images/SchedStaTest_100_d.png) no-repeat;
        display: inline-block;
        position: absolute;
        margin-right: 10px;
        background-position: -75px 0;
        margin-left: -37px;
        margin-top: -6px;
    }

    .test-stations-icon-on:before {
        content: "";
        width: 28px;
        height: 28px;
        background: url(../Images/SchedStaTest_100_a.png) no-repeat;
        display: inline-block;
        position: absolute;
        margin-right: 10px;
        background-position: -75px 0;
        margin-left: -37px;
        margin-top: -6px;
    }

    .test-stations-icon-spinner:before {
        content: "";
        width: 28px;
        height: 28px;
        background: url(../Images/loader-cb-t.gif) no-repeat;
        display: inline-block;
        position: absolute;
        margin-left: -26px;
    }
/*************************************************************/
/** Test All Stations Icon - Begin ***************************/
/*************************************************************/


/*************************************************************/
/** Irrigation Details                                      **/
/*************************************************************/
div.controller-name-text {
    display: inline-block;
}

div.controller-name-text {
    display: inline-block;
}

div.station-name-text {
    display: inline-block;
}

div.running-mode {
    font-size: 12px;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

    .btn-default:focus,
    .btn-default.focus {
        color: #333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

div.running-mode > a {
    /* t,r,b,l */
    padding: 0 4px 0 4px;
    display: inline-block;
    min-width: 60px;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    background-color: #f2f5f6;
    background-color: #f4f5f5;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
    background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);*/
}

    div.running-mode > a:hover {
        background-color: #e6e6e6;
        border-color: #adadad;
        background-color: #d9dddd;
        /*background-image: -webkit-gradient(linear, left top, left bottom, from(#d9dddd), to(#c6c3c3));
        background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
        background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d9dddd, endColorstr=#c6c3c3);*/
    }

    div.running-mode > a:focus {
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    div.running-mode > a:active {
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px #000000;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        box-shadow: inset 0 3px 5px #000000;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        background-color: #e6e6e6;
        border-color: #adadad;
    }

        div.running-mode > a:active:hover,
        div.running-mode > a:active:focus {
            background-color: #d4d4d4;
            border-color: #8c8c8c;
        }

    div.running-mode > a.disabled:hover,
    div.running-mode > a[disabled]:hover,
    div.running-mode > a.disabled:focus,
    div.running-mode > a[disabled]:focus {
        background-color: #fff;
        border-color: #ccc;
    }


div.running-mode > a {
    color: green;
}

div.running-mode.running-mode-off > a {
    color: red;
}

.running-mode-dialog {
    margin-top: 15%;
}

.running-mode-label {
    font-size: 14px;
    color: black;
}

.running-mode-select {
    padding-left: 5px;
    padding-right: 5px;
}

.running-mode-dialog .error {
    color: red;
    font-size: 12px;
}

.master-valve-status {
    font-size: 12px;
}


/* Enable New Features Button */
div.controller .btn-enable-new-features,
div.controller .btn-resolve-pin-conflict {
    padding: 1px 5px;
    margin: 5px 0 0 1px;
    height: 22px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-enable-new-features > i,
.btn-resolve-pin-conflict > i {
    padding-right: 5px;
}

#addNewFeaturesModal .modal-dialog {
    max-width: 600px;
}

#addNewFeaturesModal .help-text {
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 18px;
}

div.add-features-sc {
    display: inline-block;
}

    div.add-features-sc a.smart-id-tooltip {
        margin-left: 0;
        margin-right: 5px;
    }

@media (min-width: 768px) {
    .running-mode-dialog.modal-sm {
        width: 500px;
    }
}

/* Capture all mobile devices */
@media (max-width: 414px) {

    .modal.running-mode-modal {
        bottom: unset;
        top: 50px;
    }
}

@media (max-width: 375px) {

    .running-mode-modal select.running-mode-select {
        font-size: 9px;
    }

    div.running-mode-dialog .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 320px) {

    .running-mode-modal select.running-mode-select {
        font-size: 11px;
    }
}

@media (max-width: 375px) {

    .running-mode-modal select.running-mode-select {
        font-size: 11px;
    }
}

@media (max-width: 412px) {

    .running-mode-modal select.running-mode-select {
        font-size: 11px;
    }
}

@media (max-width: 414px) {

    .running-mode-modal select.running-mode-select {
        font-size: 16px;
    }
}

@media screen and (max-width: 992px) {

    div.station-name-text {
        max-width: 84%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 768px) {

    div.station-name-text {
        max-width: 79%;
    }

    div.auxiliary-controls {
        margin-top: 5px;
    }
}

@media screen and (max-width: 600px) {

    div.station-name-text {
        max-width: 64%;
    }
}

@media screen and (max-width: 414px) {

    div.stations.stations-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    div.station-status {
        font-size: 12px;
    }

    div.program,
    div.auxiliary,
    div.station-name {
        margin-right: 0;
    }

    div.station-name-text {
        font-size: 10px;
        max-width: 74%;
        margin-left: 0;
        margin-top: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 390px) {

    a.test-all-stations {
        font-size: 90%;
    }

    div.station-name-text {
        max-width: 70%;
    }
}

@media screen and (max-width: 360px) {
    div.station-name-text {
        max-width: 62%;
    }
}

@media screen and (max-width: 320px) {
    div.station-name-text {
        max-width: 58%;
    }
}

/*********************************************************/
/**** Accordion Icons - Begin ****************************/
/*********************************************************/
.ui-accordion h3.programs-heading,
.ui-accordion h3.stations-heading {
    padding-top: 7px;
}

.header-icon {
    width: 37px;
    height: 20px;
    position: relative;
    display: inline-block;
    padding-top: 3px;
}

    .header-icon:after {
        content: " ";
        width: 28px;
        height: 28px;
        background: url(../Images/SchedStaTest_d.png) no-repeat;
        background-size: 100px;
        display: inline-block;
        position: absolute;
        margin-right: 10px;
    }

    .header-icon em {
        display: none;
    }

h3.ui-accordion-header.ui-state-active .header-icon:after {
    background: url(../Images/SchedStaTest_a.png) no-repeat;
    background-size: 100px;
}

.program-icon:after {
    background-position: 0 0;
}

.station-icon:after,
h3.ui-accordion-header.ui-state-active .station-icon:after {
    background-position: -38px 0;
}
/*********************************************************/
/**** Accordion Icons - End ******************************/
/*********************************************************/

/*********************************************************/
/**** Edit Station page - Begin **************************/
/*********************************************************/
.edit-station-image {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    box-shadow: 3px 3px 10px #888;
    /*border: 1px solid lightgray;*/
    border-radius: 7px;
}

div.edit-station-row,
div.edit-program-row {
    padding-left: 20px;
    padding-right: 20px;
}

i.note-text.station-image-note-text {
    padding-left: 0;
    color: gray;
    font-size: 11px;
}

div.image-btn-group {
    margin-top: 20px;
}

.edit-station-row .row {
    margin-bottom: 0;
}

.edit-station-image-group {
    padding-left: 0;
}

/*********************************************************/
/**** Edit Station page - End ****************************/
/*********************************************************/

@media screen and (max-width: 330px) {
    .form-control.schedule-zone-description {
        font-size: 12px;
    }
}

.pull-right-controllerstatus {
    float: right !important;
    padding-right: 16px;
    padding-top: 5px;
    font-size: 12px;
}