body {
    font-family: 'Open Sans', Arial;
    color: black;
    margin: 0;
    background-color: #f5f5f5;
}

.page-header {
    padding-top: 80px;
    padding-left: 350px;
    height: 300px;
    width: 450px;
}

    .page-header.logged-out {
        padding-top: 30px;
        padding-left: 50px;
    }

html {
    height: 102%; /*This is to avoid jumping when a scrollbar appears. Now the scroll bar is always there :o)  */
}

fieldset {
    border-width: 0px;
}

label {
    margin-right: 18px;
    width: 100px;
    display: inline-block;
}
.consent-description label {
    width: initial;
}
.custom-button {
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
    font-size: 16px;
    border-width: 0px;
    min-width: 127px;
    /*margin-left: 12px;*/
    margin-top: 20px;
}

.consent-button {
    margin-left: 0px;
}

.consent-remember {
    height: 50px;
}

.login_error_message {
    text-align: right;
    color: #b41907;
    vertical-align: top;
    display: inline-block;
    height: 1px;
}

.login_error_message ul {
    list-style-type: none;
}

#forgot_password_validation div {
    height: auto;
}

.forgot_password_button {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 30px;
    cursor: pointer;
    font-size: 16px;
    border-width: 0px;
}

.float_right {
    float: right;
}

.float_left {
    float: left;
}

.display-inline {
    display: inline;
}

.padding_left {
    padding-left: 25px;
}

.consent-group-buttons  {
    margin-bottom: 20px;
}

.consent-scopecheck {
    height: fit-content;
}

.list-style-none {
    list-style-type: none;
}

.form-group {
    padding-top: inherit;
}

a.logout{
    text-decoration: none;
    color: #b41907;
}

a {
    text-decoration: none;
    color: black;
}

.footer {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
    font-size: 12px;
}

    .footer div {
        display: inline-block;
        margin-right: 20px;
    }

    .footer a {
        text-decoration: none;
        color: #808080;
    }

        .footer a:hover {
            color: #c2180f;
        }

input {
    height: 28px;
    border: solid 1px #808080;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 16px;
    border-radius: 4px;
    font-family: 'Open Sans', Arial;
}

    input[type="radio"] { /*TO AVOID BORDER AROUND RADIO BUTTONS IN IE*/
        border: 0px !important;
    }

    input:-webkit-autofill { /*TO AVOID YELLOW BACKGROUND IN AUTO FILL*/
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }

.displayNone {
    display: none;
}


.all_data_container {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    margin-bottom: 20px;
    border-radius: 4px;
    -webkit-box-shadow: 2px 2px 0px 0px rgba(221,220,215,1);
    -moz-box-shadow: 2px 2px 0px 0px rgba(221,220,215,1);
    box-shadow: 2px 2px 0px 0px rgba(221,220,215,1);
}

    .all_data_container .topband {
        height: 55px;
    }

        .all_data_container .topband table {
            width: 100%;
            height: 45px;
            padding-left: 18px;
            padding-right: 8px;
            padding-top: 10px;
        }



/***************** TOP NAVIGATION *******************************/

#navigation_container {
    min-width: 1200px;
    width: 100%;
    background-color: #dddcd7;
    height: 100px;
    resize: horizontal;
}

.navigation_bottom {
    height: 6px;
    width: 100%;
    background: #515151;
    background: -moz-linear-gradient(top, #515151 0%, #ffffff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #515151), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #515151 0%, #ffffff 100%);
    background: -o-linear-gradient(top, #515151 0%, #ffffff 100%);
    background: -ms-linear-gradient(top, #515151 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #515151 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#ffffff', GradientType=0 );
    z-index: 2;
    position: relative;
    opacity: 0.5;
}

.navigation_table {
    width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

.navigation_item {
    font-size: 24px;
    width: 196px;
    vertical-align: bottom;
}

.navigation_welcome {
    font-size: 12px;
    width: 240px;
    text-align: right;
    vertical-align: top;
    padding-top: 6px;
}

#logo {
    padding-left: 18px;
    padding-bottom: 6px;
    cursor: pointer;
}

#welcomeText {
    display: inline-block;
    color: #c2180f;
}

#welcomeText > div {
    display: inline-block;
    color: #c2180f;
}

.logout {
    display: inline-block;
    border-left: 1px solid #c2180f;
    padding-left: 10px;
    cursor: pointer;
}

.welcome {
    display: inline-block;
    padding-right: 10px;
}

.logout:hover {
    opacity: 0.5;
}

.tap {
    text-align: center;
    border-bottom: solid 5px #c2180f;
    border-bottom-color: transparent;
    margin-bottom: -3px;
}

    .tap a:hover {
        border-bottom: solid 5px #c2180f;
        border-bottom-color: transparent;
        color: #c2180f;
        cursor: pointer;
    }

.tap_selected {
    border-bottom: solid 5px #c2180f;
}

    .tap_selected a {
        color: #c2180f;
    }

/*************** LOGIN *******************/
.login {
    padding-top: 80px;
    padding-left: 350px;
    height: 300px;
}

    .login input {
        width: 260px;
    }

    .login form {
        width: fit-content;
        width: -moz-fit-content;
    }
.login button {
    margin-top: 10px;
    margin-left: 0;
}

.login_error {
    width: 200px;
    text-align: right;
    color: #b41907;
    vertical-align: top;
}

.login-btn-container {
    width: auto;
    float: left;
}
    .login-btn-container div:first-child {
        padding-right: 20px;
    }

    .link_div {
        display: inline-block;
        font-size: 12px;
        padding-top: 14px;
        min-width: 120px;
    }

    .link_div:hover {
        color: #c2180f;
    }


/************************************************************/
/*************** FORGOT PASSWORD *******************/
.form-container {
    max-width: 500px;
}
    .form-container button {
        float: right;
    }
.form-container label {
    min-width: 180px;
}

.form-container .login_error_message {
    height: auto;
}

/************************************************************/
/***************** THERMOSTAT *******************************/
/************************************************************/
.label_thermostats {
    font-size: 12px;
    color: #808080;
}

.thermostat_hover {
    display: inline-block;
    height: 590px;
    width: 293px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 60px;
}

    .thermostat_hover:hover {
        background-color: #fbc078;
        color: white;
    }

        .thermostat_hover:hover .buttonDetails {
            visibility: visible;
        }

.thermostat_div {
    display: inline-block;
    height: 450px;
}

.thermostat_not_linked {
    display: inline-block;
    height: 590px;
    width: 293px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 60px;
}

.away_mode_on {
    background-color: #e9e8e3;
}


.thermostat_header {
    font-size: 16px;
    padding-top: 20px;
    height: 30px;
}

.thermostat {
    background: url(../Images/Thermostat.png) no-repeat;
    height: 459px;
    width: 293px;
    color: White;
    padding-right: 60px;
    padding-left: 58px;
    padding-top: 100px;
    padding-bottom: 100px;
}

.thermostat_serious_error {
    background: url(../Images/Thermostat_blended.png) no-repeat;
    height: 459px;
    width: 293px;
    padding-left: 58px;
    padding-right: 60px;
    padding-top: 100px;
    padding-bottom: 100px;
    color: White;
}

.thermostat_text {
    height: 150px;
}

.thermostat_buttons {
    height: 60px;
}

.thermostat_error {
    height: 40px;
    padding-left: 10px;
    text-align: left;
}

.thermostat_snakes {
    font-size: 12px;
}

.background_yellow {
    background-color: #ffd966;
    color: #000000;
}

.degrees {
    font-size: 42px;
    text-align: left;
    padding-left: 8px;
}

.holdtext {
    font-size: 12px;
    text-align: left;
    padding-left: 8px;
}

.thermostat_hold_button_text {
    font-size: 12px;
    height: 40px;
}

.thermostat_hold_text {
    font-size: 12px;
    color: #808080;
    text-align: right;
    padding-right: 4px;
    width: 100px;
}

.hold_hour_counter {
    margin-top: 10px;
    width: 30px;
    border-top: solid 1px white;
    border-bottom: solid 1px white;
}

.hold_labels_time_disabled {
    color: #857563;
}

.td_hold_text {
    width: 80px;
    height: 100px;
    padding-top: 20px;
}

.thermostat_confirmed {
    padding-top: 60px;
    padding-left: 100px;
    padding-bottom: 60px;
}

    .thermostat_confirmed th {
        font-size: 20px;
        height: 80px;
        text-align: left;
    }

    .thermostat_confirmed td {
        height: 60px;
    }

    .thermostat_confirmed label {
        font-size: 60px;
        text-align: center;
    }

/************ GROUPS ******************/

.group {
    color: white;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666666),color-stop(1, #333333));
    background-image: -o-linear-gradient(bottom, #666666 0%, #333333 100%);
    background-image: -moz-linear-gradient(bottom, #666666 0%, #333333 100%);
    background-image: -webkit-linear-gradient(bottom, #666666 0%, #333333 100%);
    background-image: -ms-linear-gradient(bottom, #666666 0%, #333333 100%);
    background-image: linear-gradient(to bottom, #666666 0%, #333333 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
    height: 52px;
    padding-left: 18px;
}

    .group table {
        width: 100%;
        height: 52px;
        padding-right: 8px;
    }

.awaymode_on {
    background: url(../Images/awaymode_on.png);
    width: 69px;
    height: 27px;
    cursor: pointer;
}

.awaymode_off {
    background: url(../Images/awaymode_off.png);
    width: 69px;
    height: 27px;
    cursor: pointer;
}

.group_items {
    display: inline-block;
}

.group_input_btn {
    padding-top: 5px;
    display: inline-block;
    width: 400px;
}


.group_thermostat {
    display: inline-block;
    text-align: center;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    outline: none;
}

.group_away_mode {
    display: inline-block;
    color: white;
    border: solid 2px red;
    float: right;
}

.group_new_thermostats {
    display: none;
}

.group_new_thermostats_header {
    height: 52px;
    padding-left: 18px;
    border-radius: 4px;
    color: white;
    background: #fbbe78;
    background: -moz-linear-gradient(top, #fbbe78 0%, #fbac3b 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fbbe78), color-stop(100%, #fbac3b));
    background: -webkit-linear-gradient(top, #fbbe78 0%, #fbac3b 100%);
    background: -o-linear-gradient(top, #fbbe78 0%, #fbac3b 100%);
    background: -ms-linear-gradient(top, #fbbe78 0%, #fbac3b 100%);
    background: linear-gradient(to bottom, #fbbe78 0%, #fbac3b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbbe78', endColorstr='#fbac3b', GradientType=0 );
}

.group_new_thermostats table {
    height: 52px;
}

.group_new_thermostats_content {
    border-left: solid 8px #fbbe78;
    border-right: solid 8px #fbbe78;
    border-bottom: solid 8px #fbbe78;
}

/*************************** ACCOUNT ************************/

.account {
    display: inline-block;
    padding-top: 30px;
    padding-left: 70px;
}

    .account th {
        font-size: 24px;
        color: black;
    }

    .account td {
        height: 40px;
    }

    .account select {
        height: 30px;
    }

.new_pwd_label {
    font-size: 12px;
}

    .new_pwd_label:hover {
        cursor: pointer;
    }

.new_pwd_div_container {
    vertical-align: top;
    display: inline-block;
}


/************ Thermostat details *****************/

.thermostat_div_small {
    display: inline-block;
    background-color: #f5f5f5;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    height: 426px;
    margin-bottom: -5px;
}

.degrees_small {
    padding-left: 10px;
    padding-right: 40px;
    font-size: 60px;
    color: black;
}

.small_thermostat_temp_text {
    padding-left: 10px;
    vertical-align: top;
    color: black;
}

.thermostatDetails {
    padding-bottom: 10px;
}


.thermostatData {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
    margin-top: 20px;
    width: 840px;
}

.details_energydata {
    height: 36px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 4px;
}

#energyAccordionTable {
    padding-left: 8px;
}




.details_text {
    font-size: 12px;
    color: #808080;
}


.thermostatDataNumbers {
    width: 50px;
    text-align: right;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
}

.thermostatDataName {
    padding: 2px;
}

.thermostatMessages {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 8px;
    padding-left: 18px;
    height: 35px;
    outline: 0;
}

    .thermostatMessages table {
        height: 35px;
        width: 100%;
    }

.thermostatMessagesHighlight {
    background-color: #ffd966;
}


/************ Schedule *****************/


.schedulecontainer_header {
    padding-top: 10px;
    height: 50px;
}

    .schedulecontainer_header table {
        float: right
    }

.schedulecontainer_footer {
    padding: 10px;
    height: 20px;
}

.schedule_group {
    height: 40px;
    padding: 10px;
}


.div_arrow {
    display: inline-block;
    float: right;
}

.schedule {
    border-left: solid 8px #e9e8e3;
    border-right: solid 8px #e9e8e3;
    padding-left: 10px;
    padding-right: 10px;
}

.event_bottom_line {
    border-bottom: solid 8px #e9e8e3;
}

.div_events {
    display: inline-block;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 20px;
}

.event_am {
    width: 38px;
    height: 60px;
    background: url(../Images/switch_toggle_up.png);
}

.event_pm {
    width: 38px;
    height: 60px;
    background: url(../Images/switch_toggle_down.png);
}

.button_event_off {
    border: solid 1px #333333;
    padding: 5px;
}


.event_splitter {
    margin-top: 50px;
    background-color: #808080;
    width: 100%;
    height: 1px;
}


/*  COPY SCHEDULE */

.copy_schedule_container {
    border-left: solid 8px #e9e8e3;
    border-right: solid 8px #e9e8e3;
    border-bottom: solid 8px #e9e8e3;
    margin-bottom: 10px;
}

.copy_schedule_container_table {
    width: 100%;
    height: 100%;
    text-align: left;
    padding-right: 20px;
    padding-left: 50px;
    padding-top: 10px;
}

.copy_schedule_container th {
    padding-top: 30px;
    float: left;
}

.copy_schedule_container_td {
    padding-top: 20px;
    padding-bottom: 20px;
}

.copy_schedule_thermostat {
    border: 2px solid white;
    background: url(../Images/Thermostat_small.png) no-repeat;
    height: 157px;
    width: 96px;
    border-radius: 4px;
    cursor: pointer;
}

.copy_schedule_thermostat_chk {
    width: 50px;
    height: 50px;
    margin-left: 26px;
    margin-top: 56px;
    background: url(../Images/green_checkmark.png) no-repeat;
}

.copy_schedule_thermostat_name {
    display: inline-block;
    width: 100px;
    text-align: center;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
    word-wrap: break-word;
}

.new_schedule_table {
    margin-left: 20px;
}

.new_schedule_events_text {
    height: 50px;
    /*border-top:solid 2px  #808080;*/
}

.new_schedule_table_buttons {
    width: 100%;
    padding-right: 20px;
}


/************** Master & Supporter *************/

.master_supporter {
    display: inline-block;
    padding-left: 70px;
}

    .master_supporter th {
        font-size: 24px;
        color: black;
    }

    .master_supporter td {
        height: 40px;
    }

.search_result_table {
    padding: 20px;
}

    .search_result_table th {
        text-align: left;
        width: 300px;
    }

.search_result_header {
    font-size: 12px;
    color: #808080;
}

.line {
    background-color: #808080;
    height: 1px;
    width: 100%;
}


/************** Master Statistics *************/

.master_statistics {
    padding: 0 70px 50px 70px;
}

    .master_statistics table {
        width: 100%;
    }

        .master_statistics table th {
            font-size: 24px;
            color: black;
            text-align: center;
        }

        .master_statistics table td {
            height: 40px;
            text-align: center;
        }
        .master_statistics table td {
            height: 40px;
            text-align: center;
        }

        .master_statistics a.button {
            float: none;
            padding: 5px;
        }
.master_statistics h2{
    margin-top: 0;
    font-size:24px;
}

.welcome-page {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

    .welcome-page a {
        text-decoration: underline;
    }

/************************* For Non-Mobile Devices *****************************/
@media only screen and (min-width: 769px) {
    .forgot_password_button { width: 47.5% }
}

/************************* For Mobile Devices *****************************/
@media only screen and (max-width: 768px) {

    .footer {
        width: 100%
    }

    .footer div {
        width: 24%;
        text-align: center;
        margin-right: 0px;
    }

    /* Top Navigation */
    .all_data_container {
        width: 100%;     
    }

    #navigation_container {
        min-width: 100%;
    }

    .navigation_table {
        width: 100%;
    }

    /* Login */
    .login {
        height: 100%;
        padding-left: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-right: 20px;
    }
    .welcome {
        padding-right: 0;
    }

    .logout {
        border-left-width: 0;
    }
    a.logout {
        display: block;
    }

     label {
         width: 100%;
     }

    .login input {
        width: auto
    }

    .float_right {
        float: none;
    }
    
    .account {
        padding-left: 20px;
        padding-right: 20px;
    }

    .account .page-header {
        padding: 0;
        width: auto;
        height: auto;
    }

    .forgot_password_button {
        margin-top: 10px
    }

    .login-btn-container {
        width: 100%;
    }

    input[type="checkbox"] {
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        padding: 10px;
    }
}

.errors-container ul {
    padding: 0;
    text-align: left;
}