body {
    font-size: 16px;
}

.col-form-label{
    font-size: 1rem;
}

.fixed {
    position: fixed;
    z-index: 1000;
}

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open {
    position: fixed;
    width: 100%;
}

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.bottom {
    position:absolute;
    bottom: 0px;
}

var {
    font-style: inherit;
}

h4 {
    font-weight: bold;
}

.page-container-nonprint {
    min-width: 300px;
}

.updateacnmobile {
    font-size: 1.5em;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.col-xs-0_5 {
    width: 4.1%;
}

.col-xs-5_leftoffset {
    width: 44%;
    padding-left: 0;
}

.col-xs-5_rightoffset {
    width: 47.5%;
    padding-left: 0;
}
.padtop-lg {
    padding-top: 2em;
}

.padtop{
    padding-top:0.5em;
}

.padtop-sm {
    padding-top: 0.2em;
}

.margtop {
    margin-top:0.5em;
}

.padleft {
    padding-left: 3.3em !important;
}

.paduniform {
    padding-left: 15px;
    padding-right: 15px;
}
.vertical-center {
    display: flex;
    flex-direction: row;
}

.panel {
    width: 100%;
    height: 100%;
}

.accordion-heading-mobile {
    font-size: 1.35em !important;
    font-weight: bold;
    font-style: italic;
}

.app-accordion-heading {
    /*font-style: italic;*/
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

}

.app-accordion-heading span {
    vertical-align: middle;
}

.app-arrow, .app-arrow-right {
    font-size:18px;
    color: #333;
    transition: all 0.4s ease;
}

.accordion-toggle[aria-expanded="true"] .app-accordion-heading{
}

.accordion-toggle[aria-expanded="true"] .app-arrow-right {
    transform: rotateZ(90deg);
}

.accordion-toggle {
    transition: all 0.4s ease;
}

.accordion-toggle[aria-expanded="true"] .app-accordion-heading {
    /*padding-top: 1% !important;*/
}

.accordion-toggle {
    color: black !important;
}

.app-header {
    padding-top: 1% !important;
}

.app-row {
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eee;
    padding-top: 10px;
    margin: 0 5px;
}

.rentstatus {
    font-size: 1.2em;
}

.accordion-group {
    cursor:pointer;
    margin-bottom: 0.5% !important;
    padding-left: 1% !important;
    /*border-style: dashed !important;
    border-color: grey !important;
    border-bottom-style: dotted !important;*/
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.2);
    border: none;
    background: white;
}


.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
}


.waystosave {
    font-family: arial;
    font-size: 1.5em;
    color: #484848;
    padding-top: 1em;
}

.banner-title-underline {
    border-bottom: 1px solid;
}

.popover-content {
    color: black;
}

.pageheader {
    padding-top: 5px;
    padding-bottom: 5px;
}

#alertButton, #subButton, #vaButton {
    color: white;
}

#layout-logo, .layout-logo-right {
    height: 40px;
}

.occupant-slider .slider.slider-horizontal {
    width: 90%;
    margin-left: 6%;
}

.slider.slider-horizontal {
    width: 100%;
    height: 36px;
}

.slider-handle {
    top: 7px;
    width: 30px;
    height: 30px;
}

.slider.slider-horizontal .slider-tick, .slider.slider-horizontal .slider-handle {
    margin-left: -15px;
    margin-top: -5px;
}

.slider-selection {
    background: #729fcf;
}

.templateThumbnail {
    object-fit: scale-down; /* Do not scale the image */
    object-position: center; /* Center the image within the element */
    width: 100%;
    max-height: 100px;
    margin-bottom: 1rem;
}

.updownimage {
    padding-left: 1px;
    padding-right: 1px;
}

.monthlyTable .table, .annualTable .table {
    font-size: .8em;
}

#pagenavigation.affix {
    top: 66px;
    z-index: 10;
    margin-left: -15px;
}

#pagenavigationSpacer.affix-top {
    height: 0px !important;
}

#pagenavigationSpacer.affix {
    position: inherit !important;
}

.banner-blank {
    max-height: 150px;
}

#pagenavigation.affix > .affixed-banner-background {
    display: block !important;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
}

    #pagenavigation.affix > .affixed-banner-background:after {
        content: '';
        height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, .2);
        position: absolute;
    }


#pagenavigation.affix-top {
    width: 100%;
}

.pagetoolbarandbody {
    position: relative;
}

.navigation-toolbar a.btn, .pagetoolbar-nav .page-title, .pagetoolbar-iframe-spacer {
    font-size: 1.5em;
    font-weight: 300;
    width: 100%;
}
.lang-es-LA .navigation-toolbar a.btn,.lang-es-LA .pagetoolbar-nav ,.lang-es-LA .pagetoolbar-iframe-spacer  {
    font-size: 1.25em;
    font-weight: 300;
    width: 100%;
   
}
.lang-es-MX .navigation-toolbar a.btn,.lang-es-MX .pagetoolbar-nav ,.lang-es-MX .pagetoolbar-iframe-spacer  {
    font-size: 1.25em;
    font-weight: 300;
    width: 100%;
}



@media (max-width: 1100px ) {
    .navigation-toolbar a.btn, .pagetoolbar-nav .page-title {
        font-size: 1em;
    }
}

@media (max-width: 925px) {
 .lang-es-LA .navigation-toolbar a.btn,.lang-es-LA .pagetoolbar-nav  ,.lang-es-LA .pagetoolbar-iframe-spacer  {
        font-size: 1.00em !important;
    }

       .lang-es-MX .navigation-toolbar a.btn ,.lang-es-MX .pagetoolbar-nav  ,.lang-es-MX .pagetoolbar-iframe-spacer  {
            font-size: 1.00em;
        }
}

@media (max-width: 901px ) {
    .spc-helpbutton {
        margin-top: 1px !important;
    }

  
}

@media (max-width: 767px ) {
    .navigation-toolbar a.btn, .pagetoolbar-nav  {
        font-size: 1.2em;
    }
    .drc-calc-img-cl {
        min-height: 60px !important;
    }

    .rec-text {
        font-size: 1em !important;
    }
    .spcfontxs {
       font-size: 1em !important;
    }
    .glyphicon-close {
        font-size: 1.5em;
    }
}


.container.pagetoolbarandbody {
    padding-top: 66px;
}

.container-fluid.pagetoolbarandbody {
    padding-top: 66px;
}

/* Turn off the top padding when in iframe */
.iframepage .container-fluid.pagetoolbarandbody {
    padding-top: 0px;
}

.bannerClass {
}

.bannerContainer {
    position: absolute;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
    width: 100%;
}

    .pagetoolbar {
        position: relative;
    }

    .pageribbon {
        position: relative;
    }

    .pagetoolbar-iframe {
        padding-top: 0px;
    }

    .page-nav-mobile {
        margin-bottom: 5px;
    }

    .action-toolbar-col {
        padding-right: 5px;
        padding-left: 5px;
    }

    .action-toolbar {
        margin-top: 3px;
    }

        .action-toolbar .btn {
            padding: 2px 2px 2px 2px;
            border-color: transparent;
        }

            .action-toolbar .btn:hover {
                border-color: white;
            }

    .toolbarDownload {
        background: url(images/DEP/download.png) center no-repeat;
    }

    .toolbarPrint {
        background: url(images/DEP/print.png) center no-repeat;
    }

    .toolbarEmailReport {
        background: url(images/DEP/email.png) center no-repeat;
    }

    .toolbarLogin {
        background: url(images/DEP/login.png) center no-repeat;
    }

    .toolbarLanguages {
        background: url(images/DEP/languages.png) center no-repeat;
    }

    .dockedtoolbar {
        display: none;
    }

    .affix .dockedtoolbar {
        display: inherit;
    }

    .col-4_5 {
        margin-left: 37.5% !important;
    }

    .block-inline {
        display: inline-block;
    }

        .block-inline > div {
            vertical-align: middle;
        }

    .col-1_5 {
        margin-left: 12.5% !important;
    }

    .sticky-header {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
        z-index: 99;
        padding: 5px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
    }



    /*.costgallonspinner .input-group-addon {
        padding: 6px 6px !important;
    }*/

    .sumreport-tiptitle {
        background-color: #1c5e9d;
        color: white;
    }

    .sumreport-tipcontent {
        background-color: rgba(164, 186, 216, 0.4);
        color: black;
        margin-left: 2.0833333%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .sumreport-maintitle {
        font-size: 1.6em;
        font-weight: bold;
        font-family: sans-serif;
        text-align: center;
        color: gray;
    }

    .bgreport {
        background-color: #f8f1e4;
    }

    .sumreport-title {
        font-size: 1.3em;
        color: #dc1010;
        font-weight: bold;
        font-family: sans-serif;
    }

    .sumreport-savingtitle {
        font-size: 1.5em;
        color: gray;
        font-weight: bold;
        font-family: sans-serif;
        padding-bottom: 10px;
    }

    .sumreport-header {
        font-size: 2.5em;
        color: white;
        background-color: #cc2828
    }


    .sumreport-tipcontent > h4 {
        background-color: #1c5e9d;
        color: white;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: normal;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .sumreport-tipcontent > p {
        padding-left: 15px;
        padding-right: 15px;
    }


    .row-eq-height {
        display: flex;
    }

    .justflex {
        display: flex;
    }


    .flexflip {
        display: flex;
        flex-direction: column-reverse;
        min-height: 140px;
    }

    .dollarStylingOrange {
        color: darkred;
        font-size: 1.25em;
    }

    .dollarStylingRed {
        color: orangered;
        font-size: 1.5em;
        background-color: lightyellow;
    }

    .dollarStylingGreen {
        color: darkgreen;
        font-size: 1.25em;
    }

    .flexflip-row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end
    }

.drc-appliance-table td {
    padding-left: 10px;
    padding-right: 5px;
}

.drc-ch-box {
    text-align: center;
    vertical-align: middle;
}

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .flexflip {
            min-height: 0px;
            display: block;
        }

        .padtop-sm {
            display: none;
        }

        /*table td[class*='col-'], table th[class*='col-'] {
            float: left !important;
        }*/

        /*.ch-box {
            width: 14%;
        }*/
    }



    .setback-btn-close {
        padding-top: 1em;
    }

    .glyphicon.setback-detail-close {
        font-size: 1.2em;
        color: darkgray;
        border-style: ridge;
        border-width: 0.15em;
        background-color: #f8f8f8
    }



.fa-window-close {
    color: #dc3545;
    font-size: 2em;
}
.fa-window-close:hover, .fa-window-close:focus, .fa-window-close:active, .fa-window-close.active, .open > .dropdown-toggle.fa-window-close {
    color: #ce2d2d;
    background-color: #fee8e8;
}


    .hideElement {
        display: none;
    }

    .hideVisibility {
        visibility: hidden;
    }



.setbackselected {
    background-color: #2a75c2 !important;
    border-color: #9ecaed !important;
    border-width: 4px;
    box-shadow: 0 0 20px #9ecaed;
}

.setback-default {
    background-color: rgba(9, 107, 181, 0.85) !important;
}


.setback-therm {
    background-color: rgba(9, 107, 181, 0.85);
    transition: all .2s ease-in;
    overflow: hidden;
    cursor: pointer;
    color: #eee;
    height: 7.15em;
}

    .setback-therm:hover, .setback-therm:focus, .setback-therm:active, .setback-therm.active, .open > .dropdown-toggle.setback-therm {
        color: white;
        border-color: #285e8e;
        background-color: #2a75c2;
    }

    .setback-totaltext {
        font-size: 1.1em;
        background-color: #337ab7;
        color: white;
    }

    .setback-totalvalues {
        font-size: 2em;
    }

    .tour-active {
        background-color: rgba(158,158,158,0.25) !important;
    }

    .home-profile-tour-btn {
        position: absolute;
        z-index: 20;
        left: 45%;
        top: 60%;
    }


    .whspc-tabletop td {
        background-color: #ededed;
    }

    .whspc-tablebottom td {
        border-bottom: solid 2px #ededed;
    }

    .whspc-image {
        max-width: 120px;
        max-height: 120px;
    }

    .whspc-payout {
        background-color: #ededed;
        font-weight: bold;
    }

    .whspc-text {
        text-align: justify;
    }

    .whspc-update {
        margin-top: 4px;
    }

    .whspc-savings {
        font-weight: bold;
        font-size: 1.2em;
    }


    .unmute-container {
        width: 100%;
        height: 100%;
        z-index: 100;
        cursor: pointer;
        position: absolute;
        top: 0px;
    }

    .unmute-img {
        width: 30%;
        margin: auto;
        display: block;
        padding-top: 12.5%;
    }

    table.whspc-table {
        border: none !important;
    }

        table.whspc-table th {
            border-bottom: none !important;
        }

        table.whspc-table td {
            border-top: none !important;
            border-right: solid 2px #ededed;
            border-left: solid 2px #ededed;
        }

    .whspc-positive {
        color: green;
    }

    .whspc-negative {
        color: red;
    }

    .whspc-compare-warning {
        background-color: #fff0a7;
        padding-bottom: 2px;
        padding-top: 2px;
        margin-top: 2px;
        margin-bottom: 2px;
    }

    .whspc-current {
        /*background-color: #e2e2e2;*/
    }

.whspc-selected {
    border: 1px solid #9bb9ed !important;
    background: #D8E9FF;
}


    .whspc-grid {
    }

.whspc-gridrow {
    border: solid 1px #ededed;
    border-radius: 2px;
    margin-bottom: 5px;
    margin-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

        .whspc-gridrow:hover {
            background-color: #efefef;
            box-shadow: 0 2px 1px rgba(60,64,67, 0.1), 0 1px 1px 1px rgba(60,64,67, 0.05);
        }

    .whspc-gridrow.whspc-selected:hover {
        background-color: #D8E9FF;
    }

    .whspc-gridrow.whspc-current.whspc-selected {
        background: none !important;
        border: solid 1px #ededed !important;
    }

.whspc-rowselect {
    color: white;
    background-color: #005599;
    cursor: pointer;
}

    .whspc-row {
        color: black;
        background-color: #FFFFFF;
        cursor: pointer;
    }


    .col-margin-left {
        margin-left: 4.16667%
    }




    @media (max-width: 1100px ) {
        .setback-therm {
            font-size: 0.7em;
            padding-left: 0.6em;
        }

        .setback-totalvalues {
            font-size: 1.8em;
        }
    }

    @media (max-width: 950px ) {
        .setback-therm {
            font-size: 0.7em;
        }

        .setback-totalvalues {
            font-size: 1.6em;
        }
    }

    @media (max-width: 500px ) {
        .checkboxes [role="checkbox"] {
            padding-left: 2.25em !important;
        }
    }





    @media (max-width: 1100px) and (min-width: 993px) {
        .rec-text {
            font-size: 0.8em !important;
        }
    }

    @media (max-width: 1100px) and (min-width: 992px) {
        .rec-text {
            font-size: 0.8em !important;
        }
    }

    @media (max-width: 991px) and (min-width: 906px) {

        .checkboxes [role="checkbox"] {
            padding-left: 4.25em !important;
        }
    }

    @media (max-width: 905px) and (min-width: 768px) {
        .checkboxes [role="checkbox"] {
            padding-left: 3.25em !important;
        }
    }

    @media (max-width: 767px) and (min-width: 601px) {
        .drc-calc-img {
            width: 0.1% !important;
        }

        .checkboxes [role="checkbox"] {
            padding-left: 5em !important;
        }
    }

    @media (max-width: 600px) and (min-width: 500px) {
        .drc-calc-img {
            width: 0.1% !important;
        }

        .checkboxes [role="checkbox"] {
            padding-left: 3.25em !important;
        }
    }


    @media all and (max-width: 905px) and (min-width: 768px) {
        .setback-therm {
            font-size: 0.65em;
        }

        .setback-totalvalues {
            font-size: 1.4em;
        }

        #setback-calc .col-sm-1,
        #setback-calc .col-sm-3, #setback-calc .col-sm-4,
        #setback-calc .col-sm-5, #setback-calc .col-sm-6,
        #setback-calc .col-sm-7, #setback-calc .col-sm-8,
        #setback-calc .col-sm-9, #setback-calc .col-sm-10,
        #setback-calc .col-sm-11, #setback-calc .col-sm-12 {
            padding: 0;
        }
    }


    @media (max-width: 767px ) {
        #setback-calc .col-xs-offset-1 {
            margin-left: 4.3333% !important;
        }

        .setback-calc-heat, .setback-calc-cool {
            font-size: 1.5em;
        }

        .xs-spacer {
            width: 2.166666%;
            padding: 0;
        }

        .setback-therm {
            font-size: 0.7em;
        }

        .setback-calc-heatcool {
            font-size: 1.3em;
        }

        .col-margin-left {
            margin-left: 2.16666%
        }

        .setback-totalvalues {
            font-size: 1.5em;
        }

        .costgallonspinner .form-control {
            padding: 6px 2px !important;
        }
    }



.hlm-gradient {
    box-shadow: 0 0 4px rgba(0, 0, 0, .3) !important;
    border-radius: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    background-image: url("images/EasyAudit/HLMRatingGradient.png");
}

    .ef-tabs {
        padding-top: 20px;
        background: white;
    }

    .ef-active-fuel {
        background-color: lightcyan !important;
    }

    .ef-fuel-type-label {
        font-weight: bold;
    }

    .ef-fuel-icon {
        padding: 10px;
    }

    .ef-fuel-toggle-btn {
        background-color: transparent;
        border: solid 1px;
        border-color: lightgray;
    }

        .ef-fuel-toggle-btn:focus {
            outline: none !important;
        }

.hlm-your-home, .ef-your-home {
    position: relative;
}

.your-home-spacer {
    font-size: 3.5em;
}

.hlm-your-home-marker, .ef-your-home-marker {
    z-index: 2;
    position: absolute;
    top: 0px;
    text-shadow: 0px 0px 2px #000000;
}

.hlm-your-home-spacer, .ef-your-home-spacer {
    max-width: 8.3%;
}

.hlm-your-home-marker > div, .ef-your-home-marker > div {
    left: -50%;
    position: relative;
}


    .hlm-home div {
        position: absolute;
        max-width: 40px;
        max-height: 40px;
        text-align: center;
    }

    .hlm-line {
        font-size: 1.6em;
        line-height: 2;
        position: absolute;
        z-index: 1;
        margin-top: 10%;
        margin-left: 32px;
    }

    .sp-circle-overlay:hover, .sp-circle-hover:hover {
        -webkit-transition: all .3s ease-out;
        -moz-transition: all .3s ease-out;
        -o-transition: all .3s ease-out;
        transition: all .3s ease-out;
    }

    .tips-circle-overlay {
        position: relative;
        display: inline-block;
        width: 33%;
        max-width: 200px;
    }

    .tips-circle-text {
        position: absolute;
        top: 55%;
        text-align: center;
        font-size: 1.35em;
        padding-left: 10%;
        padding-right: 10%;
        width: 100%;
    }

    .tips-annual .highcharts-title, .usagedetail-annual .highcharts-title, .usagedetail-monthly .highcharts-title, .forecast-chart .highcharts-title, .differenceDetail .highcharts-title {
        display: none;
    }

.usage-body {
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.2);
    border-radius: .25rem;
    margin-bottom: 1em;
    background:white;
}

.highcharts-legend-item, .highcharts-tooltip {
    font-family: 'Noto Sans', sans-serif;
}

    .tipsCircleRebateMarker {
        background-image: url(images/Recommendation/rebate-available.png);
    }

    .rec-text-trc {
        font-size: 0.8em;
        text-align: justify;
    }

    .rec-heading-trc {
        font-size: 0.9em;
    }


    .filter-input {
        margin-left: 3px;
    }

    .sp-circle-pair-3 {
        margin-left: 12.5% !important;
    }

    .sp-circle-pair-3-1 {
        width: 25%;
    }

    .sp-circle-pair-2 {
        margin-left: 25% !important;
    }

    .sp-circle-pair-1 {
        margin-left: 37.5% !important;
    }

@media (min-width:767px) {
    .sp-circle-pair-4, .sp-circle-pair-3, .sp-circle-pair-3-1, .sp-circle-pair-2, .sp-circle-pair-1 {
        float: left;
    }
}

@media (max-width:767px) {
    .sp-circle-pair-4, .sp-circle-pair-3, .sp-circle-pair-3-1, .sp-circle-pair-2, .sp-circle-pair-1 {
        width: 100%;
    }

    .sp-circle-pair-3 {
        margin-left: 0% !important;
    }

    .sp-circle-pair-2 {
        margin-left: 0% !important;
    }

    .sp-circle-pair-1, .sp-circle-pair-3-1 {
        margin-left: 25% !important;
    }

    .sp-circle-pair-3-1 {
        width: 50% !important;
    }
}

    .apo-grid-row{
    }
    .sp-circle-pair-4{
    }

.sp-circle-label {
    color: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    text-align: center;
    margin-top: 5px;
    width: 100%;
    padding: 5px;
    min-height: 60px;
    box-shadow: 0 1px 3px rgba(140, 138, 138, 0.31), 0 1px 5px rgba(194, 194, 194, 0.59);
    transition: all ease-in .1s;
}

    .sp-circle-label:hover {
        color: #eee;
        box-shadow: 0 1px 2px rgba(60, 63, 66, 0.29), 0 2px 3px rgba(60, 63, 66, 0.29);
    }

.sp-circle-label-nohover {
    color: #fff;
    border: 1px solid transparent;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    text-align: center;
    margin-top: 5px;
    width: 100%;
    padding: 5px;
    min-height: 60px;
    transition: all ease-in .1s;
}
     

a:hover {
    text-decoration: none !important;
}


.sp-circle-overlay-nohover {
    /*margin-bottom: 20px;*/
}

.sp-circle-overlay {

    border: 1px solid transparent;
    padding: 5px;   
    border-radius: 1px;
    transition: all ease-in .1s;
    /*box-shadow: 0 1px 4px rgba(60,64,67, 0.5), 0 1px 3px 1px rgba(60,64,67, 0.15);*/
    /*border-radius: 4px;*/

    margin-bottom: 20px;
}


.sp-circle-selected .sp-circle-overlay,.sp-circle-seleced .sp-circle-overlay:hover {
    border: 1px solid #9bb9ed;
    background: #D8E9FF;
}

.sp-circle-selected .sp-circle-overlay:before, .sp-circle-overlay-nohover .sp-circle-selected:before {
    font-family: 'FontAwesome';
    top: 0;
    left: 0px;
    width: 52px;
    height: 72px;
    background: #9BB9ED;
    border-bottom: 1px solid #9BB9ED;
    border-right: 1px solid #9BB9ED;
    color: #D8E9FF;
    border-bottom-right-radius: 4px;
    position: absolute;
    font-size: 50px;
    content: "\f00c";
}



.sp-circle-overlay:hover {
    text-decoration: none !important;
    background: rgba(158, 183, 209, 0.26);
    border: 1px solid rgba(158, 183, 209, 0.5);
}

    .sp-circle-overlay, .sp-circle-overlay-nohover, .sp-circle-hover {
        padding:10px;
        cursor: pointer;
        padding-top: 3%;
        margin: auto;
        /*padding-left: 2%;
    padding-right: 2%;*/
        max-width: 210px;
        /*display:inline-block;*/
        position: relative;
    }

    .sp-circle-nohover {
        cursor: default;
    }

    .sp-circle-outer, .tips-circle-outer {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .center-circle {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    .advancedcustom {
        text-align: center;
        /*max-width: 190px;*/
    }

    .sp-circle{
        border-radius:4px;
        width: 100%;
    }

    .sp-circle, .tips-circle {
        /*-moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;*/
        overflow: hidden;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

       .tips-circle{
           border-top-left-radius:3px;
           border-bottom-right-radius:0px;
       }
    .sp-circle-selected-marker, .sp-circle-unselected-marker, .tips-circle-inner, .tips-circle-rebate {
        background-repeat: no-repeat;
        position: absolute;
        top: 0px;
        /*left: 0px;*/
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .tips-circle-inner {
        /*-moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;*/
        overflow: hidden;
        max-width: 100%;
    }

    .tips-circle-rebate {
        max-width: 100%;
    }

    .sp-circle-num {
        position: absolute;
        top: 0px;
        right: 4px;
    }

    .circle {
        width: 80%;
        height: 0;
        padding-bottom: 80%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 5%;
        margin-bottom: 20%;
        margin-left: auto;
        margin-right: auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .carousel-circle {
        -moz-border-radius: 40%;
        -webkit-border-radius: 40%;
        border-radius: 50%;
        overflow: hidden;
    }

    .welcome-text {
        text-align: justify;
        margin-bottom: 5%;
    }

    .welcome-title {
        text-align: center;
    }

    .grid-check-mark {
        position: absolute;
        top: 0px;
        left: 0px;
    }

.rec-heading span {
    border-bottom: 1px solid;
}

    .rec-grid .rec-heading {
        text-align: center;
        min-height: 2em;
    }

    .rec-list .rec-heading, .plan-list .plan-heading {
        font-size: 1.5em;
        font-weight: bold;
    }

    @media (max-width:580px) {
        .rec-grid-mobilehide {
            display: none !important;
        }

        .rec-grid-mobileshow {
            display: block !important;
        }
    }

    .cs {
    }

    .hs {
    }

    .report-title {
        margin-top: 1%;
        font-size: 1.5em;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
        color: #005599;
    }

    .table-title {
        margin-top: 1%;
        text-align: center;
        font-size: 1.5em;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
        color: #005599;
    }

    .summary-title {
        text-align: center;
        font-size: 1.8em;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
        color: #005599;
    }

    .summaryamount{
        vertical-align: middle;
        font-size:18px;
        font-weight:bold;
    }



    .sprofile-input {
        border: solid;
        border-width: 1px;
        border-color: #c4c4c4;
        padding: 1%;
        margin-top: 5px;
    }

    .nav > li > a {
        padding: 6px;
        margin-top: 2px;
    }

    .nav-list {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 0;
    }

    .heatcoolCaption {
        font-size: x-small;
        text-align: center;
        margin-top: 2%;
    }

    #wizardmodal .modal-dialog{
        max-width: 100% !important;
    }

    .wiz-nav-btn {
        margin-left: 5px;
        margin-right: 5px;
    }

    .wiz-detail-hidden {
        display: none;
    }

    .wiz-page {
        display: none;
    }

    .wiz-footer {
        display: block;
    }

    .wiz-back-btn {
        display: none;
        float: right;
    }

    .wiz-next-btn {
    }

    .wiz-run-analysis-btn {
        float: right;
    }

    .wiz-card-element {
        margin-top: 5% !important;
    }

    .wiz-loc-home-occu-element {
        margin-top: 10%;
    }

    .detail-input {
        margin-top: 1%;
        margin-bottom: 1%;
    }

    .appliance-top-bar {
        background-color: #f5f5f5;
    }

    .appliance-tabs {
        padding-right: .25em;
    }
    .size-error {
        color: #E62E00;
    }

    .wiz-card-row {
        margin-top: 5%;
    }

    .wiz-occu-slider {
        margin-top: 8%;
    }

    .wiz-element-select {
        position: absolute;
        border: 2px solid #8AC007;
    }

    .wiz-frontpage-select {
        position: absolute;
        /*border: 2px solid #8AC007;*/
    }

    .wiz-element-img {
        display: none;
        position: absolute;
    }

    .wiz-title-text {
        text-align: center;
        margin-top: 5%;
    }

    .wiz-thermostat {
        margin-left: auto;
        margin-right: auto;
    }

    .wiz-ac {
        top: 63%;
        left: 8%;
        border: 2px solid #8AC007;
        width: 14%;
        height: 18%;
    }

    .wiz-furnace {
        top: 72%;
        left: 22%;
        border: 2px solid #8AC007;
        width: 10%;
        height: 24%;
    }

    .wiz-waterheater {
        top: 72%;
        left: 33%;
        border: 2px solid #8AC007;
        width: 9%;
        height: 24%;
    }

    .wiz-freezer {
        top: 83%;
        left: 54%;
        border: 2px solid #8AC007;
        width: 12%;
        height: 13%;
    }

    .wiz-refrigerator {
        top: 45%;
        left: 45%;
        border: 2px solid #8AC007;
        width: 12%;
        height: 25%;
    }

    .wiz-lighting {
        top: 40%;
        left: 28%;
        border: 2px solid #8AC007;
        width: 10%;
        height: 10%;
    }

    .wiz-insulation {
        top: 30%;
        left: 23%;
        border: 2px solid #8AC007;
        width: 42%;
        height: 9%;
    }

    .wiz-thermo {
        top: 49.3%;
        left: 57.5%;
        border: 2px solid #8AC007;
        width: 7%;
        height: 7%;
    }

    .wiz-bottom-bar {
        margin-top: 5% !important;
    }

    .wiz-controls {
        margin-top: 2%;
    }

    .wiz-card {
        position: relative;
        display: none;
    }

    .wiz-element-selected {
        background-color: rgba(13, 200, 34, 0.46);
    }

    .wiz-progress-bar {
        margin-top: 2%;
    }

    .wiz-custom-element {
        display: none;
    }

    .wiz-target {
        background: url(images/EasyAudit/Wizard/target.gif);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .wiz-target-selected {
        background: url(images/EasyAudit/Wizard/checkmark.gif);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    /*Animated spritesheet animation classes*/
    .wiz-WaterHeater-sprite {
        width: 12.5%;
        height: 12.5%;
        background-position: 800% 0;
        background-size: 800%;
        display: block;
    }

    .wiz-WaterHeater-play {
        animation: play 0.5s steps(8);
    }

    .wiz-Furnace-sprite {
        width: 12.5%;
        height: 12.5%;
        background-position: 800% 0;
        background-size: 800%;
        display: block;
    }

    .wiz-Furnace-play {
        animation: play 0.5s steps(8);
    }

    .wiz-Compressor-sprite {
        width: 12.5%;
        height: 12.5%;
        background-position: 800% 0;
        background-size: 800%;
        display: block;
    }

    .wiz-Compressor-play {
        animation: play 0.5s steps(8);
    }

    .wiz-Refrigerator-sprite {
        width: 12.5%;
        height: 10%;
        background-position: 800% 0;
        background-size: 800%;
        display: block;
    }

    .wiz-Refrigerator-play {
        animation: play 0.5s steps(8);
    }

    .wiz-Freezer-sprite {
        width: 12.5%;
        height: 12.5%;
        background-position: 800% 0;
        background-size: 800%;
        display: block;
    }

    .wiz-Freezer-play {
        animation: play 0.5s steps(8);
    }

    .wiz-custom-cancel {
        margin-top: 5%;
    }

    .wiz-custom-done {
        margin-top: 5%;
        float: right;
    }

    .gray-selector {
        color: #ccc;
    }

.detail-section {
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
}

.well {
    border-radius: 4px;
    border: 1px solid #ddd;
}

    .sp-appliance-image img {
        max-height: 40px;
    }

    /*.appliancelist-wrapper
{
    overflow: auto;
    max-height: 350px;
}*/

    .toggle {
        /*margin-top: 3%;
        margin-bottom: 3%;*/
        margin-left: 8%;
    }

    .toggle-text {
        margin-top: 8%;
    }

    .program-therm {
        margin-top: 1%;
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
    }

    .ptherm-text {
        margin-right: 2%;
    }

    .pool-spa-row {
        margin-top: 1%;
    }

    /*select{
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 8%;
}*/

    .share-buttons {
        margin-top: 2%;
        padding-left: -15px;
    }

        .share-buttons > div {
            padding-left: 0px;
        }

.ef-date-line {
    border-left: 1px solid;
}

.ef-progress-bar-container {
    background-color: #bbbbbb;
    border-radius: 18px;
}

    .slider-cont {
        background-color: #bbbbbb;
        border-color: #2f2f2f;
        border: 1px solid;
        padding-right: 0px;
        padding-left: 0px;
        height: 30px;
    }

.ef-progress-bar-range {
    background: repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ), linear-gradient( to bottom, #eee, #999 );
    padding-right: 0px;
    padding-left: 0px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.ef-rangefont {
    font-size: 0.75em;
    display: inline-block;
}

    .ef-estfont {
        font-size: 0.75em;
    }

.ef-progress-bar, .ef-solar-progress-bar {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
}

.bucket-0-progress, .bucket-1-progress, .bucket-2-progress, .bucket-3-progress {
    width: 0%;
    height: 30px;
    position: absolute;
    left: 0px;
}

.ef-solar-progress-bar {
    background: repeating-linear-gradient( -45deg, transparent, transparent 10px, #ecb938 10px, #cea12f 20px ), linear-gradient( to bottom, #4be44b, #719e35 );
}
.ef-current-weather {
    display: inline-block;
}



    .ef-current-weather-range {
        font-size: 3em;
    }

    .ef-projected-cost {
        font-size: 5.5em;
        text-align: right;
    }

    .ef-projected-cost img{
        display: inline-block;
    }

    @media (max-width:1050px) {
        .ef-projected-cost {
            font-size: 4em;
        }
    }

    .ef-footnote {
        font-size: 0.9em;
    }

    .ef-projected-cost img {
        margin-top: 10px;
        max-width: 95px;
    }

    @media (max-width:767px) {
        .ef-projected-cost img {
            max-width: 70px;
        }
    }

    .ef-current-weather-cost {
        font-size: 4em;
    }

    .ef-current-cost {
        position: absolute;
        top: 5px;
    }

        .ef-current-cost h4 {
            margin: 0px;
        }

    .ef-date {
        padding-left: 0px;
        padding-right: 0px;
    }

        .ef-date > h4 {
            margin: 0px;
        }

    .ef-container {
        /*background-color: #144e6b;
        color: white;*/
    }

    /*.weather-widget .wicon
{
    font-size: 9em;
}

.weather-widget .wicon-sm
{
    font-size: 6.2em;
}*/

    .wi-title-underline {
        border-color: white;
        border-bottom: 1px solid;
        width: 25%;
        margin-left: auto;
        margin-right: auto;
    }

    .wi-title-underline-bold {
        border-bottom: 2px solid;
        width: 80%;
    }

    .wi-blue-title {
        color: rgb(0, 109, 180);
        font-weight: bold;
    }

    .wi-table th, .wi-table td, .wi-table tr {
        border: 0 !important;
    }

    .wi-table {
        margin-bottom: 0px;
        margin: auto;
    }

    .wicon-large {
        display: inline-block;
        font-size: 10em !important;
    }

.wi-thermostat-info-text-annual, .wi-thermostat-info-text-forecast {
    font-size: 0.7em;
}

.wi-weekly-forecast-container, .wi-widget-square4 {
    background: linear-gradient(rgba(63, 63, 63, 0.5), rgba(0, 0, 0, 0.58)), url(images/EasyAudit/energyForecastWeatherBackground.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    color: white;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(55, 55, 55, 0.84);
    box-shadow: 0px 0px 2px 1px rgba(55, 55, 55, 0.84);
}

    .wi-weekly-forecast-container h4, .wi-weekly-forecast-container h3 {
        text-transform: uppercase;
        margin-bottom: 5px;
    }

        .wi-widget-square4 h3 {
            text-transform: none;
        }

    .wi-week-saving {
        font-size: 2em;
    }

    .wi-week-saving-sm {
        font-size: 1.5em;
    }

    .wi-widget-wsaving {
        font-size: 3em;
    }

    .wi-widget-heading {
        font-size: 1.5em;
    }

    .wi-widget-heading {
        font-size: 1.5em;
    }

    .wi-widget-block {
        border-right-style: solid;
        border-right-width: 2px;
        border-right-color: transparent;
        border-left-style: solid;
        border-left-width: 2px;
        border-left-color: transparent;
    }


    .wi-widget-block-head {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-transform: uppercase;
        min-height: 3em;
        height: 100%;
    }

    .wi-widget-block-icon {
        border-top-left-radius: 5px;
        min-height: 3em;
        height: 100%;
        padding: 3px;
    }

.wi-widget-block-body {
    height: 100%;
    transition: all .2s ease-in;
}

    .wi-widget-block-body:hover {
        box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
        border-top: 1px solid #777;;
    }

    .wi-widget-block-head-text {
        padding-left: 5px;
        padding-right: 5px;
    }

    .wi-widget-block-text {
        font-size: 2.7em;
        padding-left: 2px;
        padding-right: 2px;
    }

    .wi-widget-block-text-half {
        font-size: .7em;
    }

    .wi-widget-block-body .wicon {
        font-size: 6em;
        padding-left: 2px;
        padding-right: 2px;
    }

    @media (max-width: 450px ) {
        .wi-widget-block-body .wicon {
            font-size: 3.5em;
        }

        .wi-widget-block-text-half {
            font-size: .8em;
        }
    }

    @media (max-width: 350px ) {
        .wi-widget-block-body .wicon {
            font-size: 2.4em;
        }
    }

    .weather-widget {
        color: #FFFFFF;
    }

    .spacer-row {
        height: 10px;
    }

    .solar-widget {
        color: white;
    }

    .ea-detail-savings {
        font-size: 1.8em !important;
    }

    .ef-date-row {
        margin: 0px;
    }

    #share-buttons img {
        width: 35px;
        padding: 5px;
        border: 0;
        box-shadow: 0;
        display: inline;
    }



    .extLink {
        margin-top: 1%;
        font-size: 0.9em;
    }


    .extOR {
        margin-top: 1%;
        font-size: 0.9em;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .extAccn .input-sm {
        padding-left: 2% !important;
        padding-right: 0 !important;
    }


    @keyframes play {
        100% {
            background-position: 0 0;
        }
    }
    /*End element spritesheet animation classes*/

    .ea-footer {
        min-height: 39px;
    }

        .ea-footer a img {
            margin-top: 5px;
            margin-right: 10px;
        }

    .content-header {
        text-align: left;
        font-size: 18px;
        font-weight: bold;
        padding: 4px 0 4px 10px;
        color: #074b8c;
        border-bottom: groove;
    }

    #ea-errorImage {
        background: url(images/emblem-important.png) no-repeat center;
        height: 256px;
    }

    .input-detail {
        display: none;
    }

    .strongText {
        font-weight: bold;
    }

    .boldunderline {
        font-weight: bold;
        text-decoration: underline;
    }

    .italic {
        font-style: italic;
    }

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
    /*font-size: .7rem;*/
}

.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {

}
    .ea-input-label {
    border-bottom: 1px solid rgba(0,0,0,.08);
    text-align: center;
    display: inline-block;
    width: 100%;
    padding-top: 3px;
}

        .ea-input-label > div {
            vertical-align: middle;
        }

.ea-input-title {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    text-transform: uppercase;
    height: 2em;
    font-size: 1.5em;
}

    .ea-input-content {
        padding-bottom:10px;
        margin: 1%;
    }

.backSelectedWrapper .contentBorderSet {
    background: #b8000040;
    border-radius:4px;
}

    .contentBorderNotSet {
        border: none;
    }

    .ea-gobackbtn {
        float: right;
        border-radius: 1rem;
        padding-left: 10px;
        padding-right: 10px;
    }

    .ea-titletext {
        font-size: 2em;
    }

    .ea-responsebtn {
        border-radius: 10px;
        padding-left: 0.5em;
        padding-right: 1.3em;
        margin-bottom: 4px;
        padding-top: 3px;
        padding-bottom: 3px;
        float: right;
        width: 75%;
        font-size: 1em;
    }

        .ea-responsebtn span {
            float: left;
        }

    .ea-headingtext {
        font-family: inherit;
        font-size: 1.4em;
        margin-bottom: 6px;
        padding-left: 0px;
    }

    .recommendation-row:hover {
        background-color: #edf4e4;
    }

    .ea-components {
        background: -webkit-linear-gradient(#ffffff, #ebebeb); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#ffffff, #ebebeb); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#ffffff, #ebebeb); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#ffffff, #ebebeb); /* Standard syntax */
        margin-bottom: 5px;
    }

    .legend-element {
        font-size: 0.8em;
    }

    #wi-thermometer-spc {
        margin: 7% 30%;
        width: 65px;
        height: 300px;
        position: relative;
        background: #f5f5f5;
        border: 1px solid #e3e3e3;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
        border-radius: 12px;
    }



    .detail input {
        /*margin-left: 5%;*/
        /*margin-right: 5%;
        margin-top: 2%;*/
        height: initial !important;
    }

    .detail h4 {
        width: 100%;
        height: auto;
        font-size: 16px;
        margin-bottom: 2%;
        margin-top: 2%;
        font-weight: 600;
        padding-bottom: 4px;
        padding-top: 4px;
    }

    .detail-paragraph {
        text-align: justify
    }

    .detail-right * {
        float: right;
        text-align: right;
    }

    .right {
        float: right;
    }

    .detail-list > div {
        padding-right: 2%;
    }


    .detail-checkbox-label {
        padding-top: 1%;
    }

    .ea-recimage {
        padding-right: 0px;
    }


    .checkbox input[type="checkbox"] {
        -ms-transform: scale(1.4);
        -moz-transform: scale(1.3);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        margin-left: -2px !important;
    }


input[type="checkbox"]:disabled + .toggle-group label.toggle-off {
    color: #ddd;
    background: #f3f3f3;
}
input[type="checkbox"]:disabled + .toggle-group label.toggle-on {
    color: #E3EEF5;
    background: #97BDDC;
}

.toggle, .toggle-on, .toggle-off {
    border-radius: 20rem;
}


    .toggle.btn {
        min-width: 4.7rem;
    }

    .ea-detailcontent {
        padding: 4px;
    }

    .ea-detailtext {
        font-family: inherit;
        font-size: 1.2em;
        /*padding-left: 0px;*/
    }

    /*.recSaveBoxWrapper {
    border: none;
    padding-left: 15px;
    padding-right: 15px;
}

.recSaveBoxWrapper > div {
    border: solid 1px;
    border-color: #68BD49;
    font-family: 'Franklin Gothic Heavy';
    border-radius: 17px;
}

.recSaveBoxSaveUpTo {
    font-size: 1em;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
    background-color: #68BD49 !important;
}

.recSaveBoxPerYear {
    font-size: .75em;
}*/

    .glyphicon-time {
        width: 24px;
    }

    .glyphicon-search {
        width: 24px;
    }

    #success {
        font-size: 14px;
        color: #0099FF;
    }

    #failure {
        font-size: 16px;
        color: #E62E00;
    }

    .loadingText {
        text-align: center;
    }

    .emailButton {
        width: 40%;
    }

    .sp-helpbutton {
        margin-top: 1px;
        margin-bottom: 1px;
        margin-left: auto;
        margin-right: auto;
        -webkit-background-size: 98% 98% !important;
        -moz-background-size: 98% 98% !important;
        -o-background-size: 98% 98% !important;
        background-size: 98% 98% !important;
        background: url(images/DEP/help.png) no-repeat;
    }



    .spc-helpbutton {
        margin-top: 6px;
        margin-bottom: 1px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        -webkit-background-size: 98% 98% !important;
        -moz-background-size: 98% 98% !important;
        -o-background-size: 98% 98% !important;
        background-size: 98% 98% !important;
        background: url(images/DEP/help.png) no-repeat;
    }





.plus-button {
    position: relative;
    top: -22px;
    left: calc(50% - 22px);
    border: none;
    background-color: rgb(87, 169, 87);
    font-size: 25px;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

    .plus-button:hover {
        background-color: rgb(110, 180, 110) !important;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .plus-button:hover:before, .plus-button:hover:after {
            background-color: #fff !important;
        }

    .plus-button:before, .plus-button:after {
        content: "";
        display: block;
        background-color: #EEEEEE;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .plus-button:before {
        height: 15px;
        width: 3px;
    }

    .plus-button:after {
        height: 3px;
        width: 15px;
    }


.plus-button-disabled {
    position: relative;
    top: -22px;
    left: calc(50% - 22px);
    border: none;
    font-size: 25px;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: dimgray;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

    .plus-button-disabled :hover {
        background-color: dimgray !important;
        -o-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .plus-button-disabled:before, .plus-button-disabled:after {
        content: "";
        display: block;
        background-color: #EEEEEE;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .plus-button-disabled:before {
        height: 15px;
        width: 3px;
    }

    .plus-button-disabled:after {
        height: 3px;
        width: 15px;
    }





    .right {
        float: right;
        clear: right;
        overflow: auto;
    }

    .help-sp-initial {
        margin-top: 5px;
    }

    .title-help {
        display: none;
    }

    .recommendations {
        margin-top: 5px;
    }

    .recSaveBoxSaveUpTo {
        background-color: #A0CF67;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        font-size: 1.25em;
        min-height: 15px !important;
    }

    .recSaveBoxDollarAmt {
        text-align: center;
        font-size: 1.5em;
        font-weight: bold;
        min-height: 15px !important;
    }

.recSaveBoxDollarCarbonAmt {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    min-height: 15px !important;
}

    .recSaveBoxPerYear {
        text-align: center;
        font-weight: bold;
        min-height: 15px !important;
    }

    .recSaveBoxWrapper {
        border: 1px solid lightgrey;
        border-radius: 5px;
        /*max-width: 90px;*/
        /*margin-left: -10px;
    margin-top:5px;*/
        margin-left: auto;
        margin-right: auto;
    }

        .recSaveBoxWrapper div {
            padding: 0px;
            margin: 0px;
        }

    .panelrightrow {
        border-left: 1px solid lightgray;
        padding-left: 2%;
        padding-top: 2%;
    }

    .nopadding {
        padding: 0 !important;
    }

    .ea-number-show {
        font-family: sans-serif;
        text-align: center;
        display: inline-block;
        width: 40px;
        font-size: 18px;
        font-weight: bold;
        background-color: white;
        color: black;
        padding: 3px 7px 3px 7px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0px 4px 0px 4px;
    }

    .popover {
        width: 100em;
    }

    .ko-grid {
        margin-bottom: 1em;
        width: 25em;
        border: 1px solid silver;
        background-color: White;
    }

        .ko-grid th {
            text-align: left;
            background-color: Black;
            color: White;
        }

        .ko-grid td, th {
            padding: 0.4em;
        }

        .ko-grid tr:nth-child(odd) {
            background-color: #DDD;
        }

    .slideleftbutton, .sliderightbutton, .slidecontainer {
        padding-right: 0px;
        padding-left: 0px;
    }

    .slideleftbuttonenable img {
        background: url(images/EasyAudit/BackArrow.png) no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .sliderightbuttonenable img {
        background: url(images/EasyAudit/MoreArrow.png) no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .report-iframe {
        width: 8.5in;
        display: block;
    }



    .accountMarkerNotSet img {
        background: url(images/EasyAudit/AccountNumber_question.png) no-repeat;
    }

    .accountMarkerSet img {
        background: url(images/EasyAudit/AccountNumber_check.png) no-repeat;
    }

    .homeMarkerNotSet img {
        background: url(images/EasyAudit/MarkerHomeQuest.png) no-repeat;
    }

    .homeMarkerSet img {
        background: url(images/EasyAudit/MarkerHomeCheck.png) no-repeat;
    }

    .occupantMarkerNotSet img {
        background: url(images/EasyAudit/MarkerOccupantsQuest.png) no-repeat;
    }

    .occupantMarkerSet img {
        background: url(images/EasyAudit/MarkerOccupantsCheck.png) no-repeat;
    }

    .occupantList {
        display: flex;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-left: 0px;
        /*margin-left: 10px;*/
    }

        .occupantList img {
            /*margin: -2px;*/
        }

    /*.padOccupants {
    padding-left: 9.09%;
}*/

    /*.heatCoolMarkerNotSet img {
    background: url(images/EasyAudit/MarkerHeatCoolQuest.png) no-repeat;
}

.heatCoolMarkerSet img {
    background: url(images/EasyAudit/MarkerHeatCoolCheck.png) no-repeat;
}

.thermostatMarkerNotSet img {
    background: url(images/EasyAudit/MarkerThermostatQuest.png) no-repeat;
}

.thermostatMarkerSet img {
    background: url(images/EasyAudit/MarkerThermostatCheck.png) no-repeat;
}

.waterHeaterMarkerNotSet img {
    background: url(images/EasyAudit/MarkerWaterHeaterQuest.png) no-repeat;
}

.waterHeaterMarkerSet img {
    background: url(images/EasyAudit/MarkerWaterHeaterCheck.png) no-repeat;
}

.refrigeratorMarkerNotSet img {
    background: url(images/EasyAudit/MarkerRefrigeratorQuest.png) no-repeat;
}

.refrigeratorMarkerSet img {
    background: url(images/EasyAudit/MarkerRefrigeratorCheck.png) no-repeat;
}

.insulationMarkerNotSet img {
    background: url(images/EasyAudit/Insulation_question-01.png) no-repeat;
}

.insulationMarkerSet img {
    background: url(images/EasyAudit/Insulation_check-01.png) no-repeat;
}

.lightingMarkerNotSet img {
    background: url(images/EasyAudit/Lighting_question-01.png) no-repeat;
}

.lightingMarkerSet img {
    background: url(images/EasyAudit/Lighting_check.png) no-repeat;
}

.poolSpaMarkerNotSet img {
    background: url(images/EasyAudit/MarkerPoolSpaQuest.png) no-repeat;
}

.poolSpaMarkerSet img {
    background: url(images/EasyAudit/MarkerPoolSpaCheck.png) no-repeat;
}

.modalConfirmMarkerSet {
    background: url(images/EasyAudit/MarkerNotSet.png) no-repeat;
}*/

    .text1 {
        float: left;
        font-size: 14px;
        font-weight: normal;
        color: #074b8c;
        margin: 0 auto;
        width: 100%;
    }

    .table-top-margin {
        margin-top: 10px;
    }

    .text2 {
        padding-bottom: 10px;
        font-size: 13px;
        font-weight: bold;
    }

    .occucontainer {
        margin-top: 5px;
        vertical-align: middle;
    }

    .occupants {
        font-size: 14px;
    }

.occubox {
    font-size: 200%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 100%;
    background-color: rgb(200, 200, 200) /*border: 1px solid black;; */;
}

    .textcenter {
        text-align: center;
        margin: 0px;
    }

    .aligncenter {
        text-align: center;
    }

    .homeList, .heatCoolList, .waterHeaterList, .insulationList, .lightingList {
        float: left;
        text-align: center;
        margin-bottom: 10px;
    }

    .carousel-list {
        float: left;
        text-align: center;
        margin-bottom: 10px;
    }

    .homeListImg, .heatCoolListImg, .waterHeaterListImg, .insulationListImg, .lightingListImg {
        max-height: 100px;
        border: solid;
        border-width: 3px;
        border-color: white;
    }

    .homeList img:hover, .heatCoolList img:hover, .waterHeaterList img:hover, .insulationList img:hover, .lightingList img:hover {
        background-color: #bad7f5;
    }

    .heatcheck {
        color: green;
        font-size: 210%;
    }

    .backgroundSelect img {
        background-color: #bad7f5;
    }

    .backgroundSelect {
        background-color: #bad7f5;
    }

    .thermostatControl {
        display: block;
        position: relative;
        max-width: 260px;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .ea-mobile-menu-btn {
        margin-top: 5px;
    }

    .thermHeat {
        max-height: 100px;
    }

    .thermostatControl.img {
        position: absolute;
    }

    .steps {
        /*border: 1px solid transparent;*/ /*follows #slider2 style for sizing purposes */
        width: 100%;
        position: relative;
        padding-bottom: 15%;
    }

    .tick {
        /*border: 1px solid transparent;*/ /*follows slide handle style for sizing purposes*/
        position: absolute;
        width: 1.2em;
        margin-left: -.6em;
        text-align: center;
        left: 0;
    }

    .alignRight {
        text-align: right;
    }

    .heatCategory {
        display: inline-block;
    }

    .heatCategoryRadio {
        margin-left: 2px;
    }

    .heatCategoryLabel {
    }

    .rightpanel {
    }

    .slidebutton:hover {
        background-color: grey;
    }

    .apoDatatable {
        font-size: 12px;
        border: #666 1px solid;
        width: 95%;
    }

        .apoDatatable tbody {
            font-size: 10px;
            white-space: nowrap;
            padding-left: 2px;
            padding-right: 2px;
            vertical-align: middle;
            text-align: center;
            border: none;
            padding-top: 2px;
            padding-bottom: 2px;
            font-family: Verdana, Arial, Helvetica, Sans-Serif;
        }

    .table-center {
        text-align: center;
    }

        .table-center th {
            text-align: center;
        }

        .table-center td {
            text-align: center;
        }

    .sp-input-row img {
        max-height: 70px;
    }

    /* These are dependent on the row height */
    .thermobackground {
        /* max-height: 197px !important; */
    }

    .tempsetting, .heatingSetting, .coolingSetting, .coolingSetting-noheat {
        font-size: 200%;
        display: inline-block;
        font-family: Arial;
        font-weight: bolder;
        margin-right: 0;
        position: absolute;
    }

    .templateName {
        font-size: 175%;
        font-weight: 700;
        margin-right: 10px;
    }

    .celciusSetting {
        font-size: 170%;
    }

    .heatingSetting {
        left: 25%;
        top: 34%;
    }

        .heatingSetting.celciusSetting {
            left: 24%;
        }

    .coolingSetting {
        left: 54%;
        top: 34%;
    }

        .coolingSetting.celciusSetting {
            left: 52%;
        }

    .coolingSetting-noheat {
        left: 28%;
        top: 34%;
    }

        .coolingSetting-noheat.celciusSetting {
            left: 26%;
        }

    .thermProgText {
        position: absolute;
        top: 27%;
        left: 100%;
        font-size: .75em;
    }

    .thermProgSwitch {
        position: absolute;
        top: 55%;
        left: 100%
    }

    .WI-resetBtn {
        width: 22%;
        height: 14%;
        border: none;
        background-image: url(images/DEP/thermostat-reset.png);
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
    }

.thermohotbutton, .thermohotbutton:active {
    width: 11%;
    height: 15%;
    border: none;
    border-radius:2px;
    background-image: url(images/DEP/ButtnUp.png);
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    transition: all 0.5s ease;
}

        .thermohotbutton:hover {
            background-image: url(images/DEP/ButtnUp_Red.png);
        }

.thermocoldbutton {
    border-radius: 2px;
    transition: all 0.5s ease;
    width: 11%;
    height: 15%;
    border: none;
    background-image: url(images/DEP/ButtnDown.png);
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

        .thermocoldbutton:hover {
            background-image: url(images/DEP/ButtnDown_Blue.png);
        }

    .heatingUp {
        position: absolute;
        top: 21%;
        left: 6.5%;
    }

    .heatingDown {
        position: absolute;
        top: 60%;
        left: 6.5%;
    }

    .coolingUp-noheat {
        position: absolute;
        top: 21%;
        left: 6.5%;    
    }

.coolingDown-noheat {
    position: absolute;
    top: 60%;
    left: 6.5%;
}

    .coolingUp {
        position: absolute;
        top: 21%;
        left: 83%;
    }

    .coolingDown {
        position: absolute;
        top: 60%;
        left: 83%;
    }


    .therm-resetBtn {
        left: 45%;
        top: 62%;
        line-height: 20px;
        display: inline-block;
        margin-right: 0;
        position: absolute;
        cursor: pointer;
    }

    .therm-resetBtnPos {
        position: absolute;
        top: 77%;
        left: 38%;
    }

    .therm-resetBtnPosHeat {
        position: absolute;
        top: 77%;
        left: 25%;
    }

    .therm-resetBtnPosCool {
        position: absolute;
        top: 77%;
        left: 52%;
    }

    .therm-resetBtnPosCool-noheat {
        position: absolute;
        top: 77%;
        left: 24.5%;
    }

    .therm-resetBtn {
        width: 27%;
        height: 21%;
        border: none;
        background-image: url(images/ResetTherm.png);
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
    }


    /*Thermometer classes*/
    #thermometer {
        /*margin: 7% 30%;*/
        height: 25px;
        position: relative;
        background: #f5f5f5;
        border: 1px solid #e3e3e3;
        padding-left: 1px;
        padding-right: 1px;
    }
        /*@media (max-width:650px) {
    #thermometer {
        height: 200px;
    }
}*/

        #thermometer .thermostat-track {
            top: 3%;
            border: 1px solid #e3e3e3;
            position: relative;
            background-position: 0 -1px;
            width: 60%;
            left: 0;
            height: 93%;
            margin: auto;
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
            background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
            background: -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
            background: -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
            background: -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
            background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
            background-size: 100% 2%;
        }

        #thermometer .thermostat-track2 {
            top: 3%;
            border: 1px solid #e3e3e3;
            position: relative;
            background-position: 0 -1px;
            width: 100%;
            left: 0;
            height: 93%;
            /*background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
        background: -webkit-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background: -o-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background: -ms-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background: -moz-linear-gradient(left, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
        background: linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);*/
            background-size: 100% 2%;
        }

    .thermostat-row-no-margin {
        margin: 0px;
    }

    #thermometer .thermostat-track-left, .thermostat-track-right {
        border-color: black;
        padding: 0px;
        height: 20px;
    }

    #thermometer .thermostat-track-left {
        border-right: 1px solid;
    }

        #thermometer .thermostat-track-left > div {
            background: rgb(255,0,0);
            background-color: rgba(255,0,0,0.6);
            height: 100%;
        }

    #thermometer .thermostat-track-right {
        border-left: 1px solid;
    }

        #thermometer .thermostat-track-right > div {
            background: rgb(0,255,0);
            background-color: rgba(0,255,0,0.6);
            height: 100%;
        }

    #thermometer .thermostat-progressThermometer {
        background: rgb(0,171,3);
        background: rgba(0,171,3,0.6);
        position: absolute;
        bottom: 50%;
        width: 100%;
    }

    #thermometer .thermostat-goal {
        position: relative;
        top: 0;
        left: 0%;
    }

        #thermometer .thermostat-goal .thermostat-amount {
            display: inline-block;
            font-family: Trebuchet MS;
            font-weight: bold;
            color: #00AB03;
            position: absolute;
            padding: 0px 50px 0px 0px;
            border-top: 1px solid #00AB03;
            border-left: 0;
            right: 0;
        }

    #thermometer .thermostat-amount {
        display: inline-block;
        font-family: Trebuchet MS;
        font-weight: bold;
        color: #333;
        position: absolute;
        padding: 0px 5px 0px 50px;
        border-top: 0;
        border-left: 1px solid black;
    }

    #thermometer .thermostat-progressThermometer .thermostat-amount {
        color: #00AB03;
        border-left: 0;
        border-top: 1px solid #00AB03;
    }

    #thermometer .thermostat-initialPoint {
        display: inline-block;
        font-family: Trebuchet MS;
        font-weight: bold;
        color: #333;
        bottom: 50%;
        position: absolute;
        padding: 0px 0px 0px 50px;
        border-bottom: 1px solid black;
        border-left: 0;
        left: 0;
    }

    .thermostat-savings {
        position: relative;
    }

    .thermostat-savings-negative {
        color: rgb(255,0,0);
    }

    .thermostat-savings-positive {
        color: rgb(0,255,0);
    }
    /********************* Down thermometer classes*/

    #thermometer .thermostat-progressThermometerDown {
        background: rgb(255,0,0);
        background-color: rgba(255,0,0,0.6);
        position: absolute;
        top: 50%;
        width: 100%;
    }

    #thermometer .thermostat-amountDown {
        display: inline-block;
        font-family: Trebuchet MS;
        font-weight: bold;
        color: red;
        position: absolute;
        padding: 5px 5px 0 50px;
        border-top: 0;
        border-left: 1px solid red;
        bottom: 0;
    }

    #thermometer .thermostat-progressThermometerDown .thermostat-amountDown {
        color: red;
        border-left: 0;
        border-bottom: 1px solid red;
    }


    /* Medium Width */
    @media (max-width: 1005px ) {
        .sp-input-row img {
            max-height: 60px;
        }

        .ea-input-title{
            border-radius: 0px !important;
        }

        .wi-week-saving-sm {
            font-size: 1.2em;
        }

        .weather-widget .wicon-sm {
            font-size: 4em;
        }

        /*.wi-widget-block div:nth-child(1) > div.col-xs-11
    {
        font-size: 1.3rem !important;
    }*/

        .wi-widget-highlow-sm {
            font-size: 1.5em !important;
        }

        /*.marker-header-help
    {
        padding-bottom: 0px;
    }*/

        /*.sp-helpbutton
    {
        -webkit-background-size: 98% 98%;
        -moz-background-size: 98% 98%;
        -o-background-size: 98% 98%;
        background-size: 98% 98%;
        padding-top: 2px;
    }

    .sp-helpbutton-last
    {
        padding-top: 3px;
    }*/
    }

    @media (max-width:1200px) {
        .extLink {
            width: 50%;
        }

        .extAccn {
            width: 100%;
        }
    }

    @media (max-width:1180px) {
        .wi-widget-block-text {
            font-size: 2em;
        }
    }


    @media (max-width: 850px) {
        .wi-widget-block-text {
            font-size: 1.7em;
        }
    }


    @media (max-width: 400px) {
        .wi-widget-block-text {
            font-size: 1.3em;
        }
    }



    /* Small Width */
    @media (max-width: 767px ) {
        .occubox {
            font-size: 150%;
            padding-left: 10px;
            padding-right: 10px;
        }

        .ea-input-label {
            padding-top: 0px;
        }

        .ea-input-title {
            height: 100% !important;

        }

            .ea-input-title > div {
                padding: 5px;
            }

        body {
            font-size: 12px;
        }

        .modal-dialog {
            width: 94% !important;
            overflow-y: initial !important;
        }

        .modal-body {
            padding-top: 2px;
            padding-bottom: 2px;
            overflow-y: auto;
        }

        .modal-header {
            padding-top: 5px;
            padding-bottom: 0px;
        }

        .modal-footer {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .sp-input-row img {
            max-height: 50px;
        }

        .detail h4 {
            font-size: 14px !important;
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .detail-list input {
            width: 17px;
            height: 17px !important;
            margin-left: 4%;
            margin-right: 0px;
        }

        .appliance-content > div {
            padding-right: 5px;
        }

        .detail-list {
            padding: 5px;
        }

        .form-wrap select {
            margin-bottom: 5px;
        }

        .half-one {
            padding-right: 0px;
        }

        .half-two {
            padding-left: 0px;
        }

        .hlm-header {
            font-size: 1.6em !important;
        }

        .circle {
            margin-bottom: 5%;
            width: 94%;
            padding-bottom: 94%;
        }

        h4.tips-title, h4.plan-title {
            font-size: 2em;
        }

        .marker-header > h4 {
            font-size: 1.35em !important;
        }

        .header-title > h4 {
            font-size: 1.35em !important;
        }

        .select2-container {
            width: 100% !important;
        }

        .occucontainer {
            padding: 0px !important;
        }

        .occupants {
            font-size: 1.2em;
        }

        .text1 {
            font-size: 1.2em !important;
        }

        .recSaveBoxWrapper {
            margin-top: 6px !important;
        }

        .radioStyle {
            font-size: 1.4em !important;
        }

        #thermostat {
            max-width: 175px;
        }

        .wi-widget-block-text-half {
            font-size: .8em;
        }
    }

    .modal-dialog {
        overflow-y: initial !important;
    }

    .modal-body {
        padding-top: 2px;
        padding-bottom: 2px;
        overflow-y: auto;
        max-height: calc(100vh - 210px);
    }

    .marker {
        height: 100%;
        top: 0px;
        left: 0px;
        width: 25px;
        position: absolute;
    }

        .marker:hover {
            opacity: 0.8;
        }

    .refrigeratorMarkerNotSet, .lightingMarkerNotSet, .occupantMarkerNotSet, .heatCoolMarkerNotSet, .thermostatMarkerNotSet,
    .homeMarkerNotSet, .insulationMarkerNotSet, .poolSpaMarkerNotSet, .waterHeaterMarkerNotSet, .accountMarkerNotSet, .carMarkerNotSet, .netMeterMarkerNotSet {
        background: #F5E1E1 url(images/question.png) no-repeat;
        background-position: center;
    }


    .toolbar-image-styling {
        width: 25px;
        height: 25px;
    }

    .envimpact {
        font-size: x-large;
        text-align: center;
        font-weight: bold;
        color: Green;
        background: url(images/footprint.png) no-repeat top center;
        min-height: 210px;
    }

    .envtipstitle {
        color: #039;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
        font-size: x-large;
    }

    .section-break {
        padding-top: 30px;
    }

.usage-section-title, .sp-section-title {
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
}

.usage-section-title {
    background-color: #d7dff0;
    color: #16556E;
    border-bottom: 1px solid rgba(0,0,0,.08);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.section-title {
    margin: auto;
    font-size: 2.5em;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 300;
    color: #16556E;
}

    .picture-align {
        padding-right: 36px;
    }

    .vidmissingcontent {
        font-size: 2.4em;
        color: #BD3532;
    }

    .vidimgmissingcontent {
        font-size: 1.5em;
        color: #BD3532;
    }

    .radiopooltub {
        font-weight: bold;
    }

    .radiospacing {
        margin-left: 10%;
    }


    .markerrow {
        position: relative;
    }

    .bg-ribbonwelcomealert {
        background: url(images/EasyAudit/Alerts_large.png) no-repeat center;
    }

    .bg-ribbonwelcomeplan {
        background: url(images/EasyAudit/MyPlan_large.png) no-repeat center;
    }




    .ribbon-profile-status {
        color: white;
    }


    .ribbontitle {
        font-size: 1.9em;
        font-weight: bold;
    }

    .unsubpadding {
        padding-top: 20px;
    }


    .subscripttitle {
        font-size: 1.6em;
        color: darkblue;
    }

    .glyphicon-close {
        font-size: 1.2em;
        color: darkgray;
        border-style: ridge;
        border-width: 0.15em;
        background-color: #f8f8f8
    }

    .setback-detail-close:hover, .setback-detail-close:focus, .setback-detail-close:active, .setback-detail-close.active, .open > .dropdown-toggle.setback-detail-close {
        color: #ce2d2d;
        background-color: #fee8e8;
        border-color: #e57e7e;
        border-style: ridge
    }


    .glyphicon-calendar:hover, .glyphicon-calendar:focus, .glyphicon-calendar:active, .glyphicon-calendar.active, .open > .dropdown-toggle.glyphicon-calendar, .ribbonpers {
        cursor: pointer;
    }

    .glyphicon-none:before {
        content: "\2122";
        color: transparent !important;
    }


    .suberror {
        color: red;
    }

    .subsuccess {
        color: darkgreen;
    }


    .markerbar {
    }

    .smallmarker {
        max-width: 50px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    img.banner-logo {
        display: block;
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }

    .img-border-curve{
        border-radius: 2px;
    }

    .marker-header {
        background-color: #bad7f5;
    }

    .header-title {
        background-color: #e7e7e7;
    }

    .marker-header, .header-title {
        min-width: 40px;
        margin-top: 0.25em;
    }

        .marker-header > h4, .header-title > h4 {
            width: 100%;
            height: auto;
            font-size: 16px;
            margin-bottom: 0;
            margin-top: 0px;
            font-weight: normal;
            padding-left: 2%;
            padding-bottom: 4px;
            padding-top: 4px;
        }

    h2.marker-list, h4.marker-list {
        color: #fff;
        text-align: center;
    }

    h2.title, h4.title {
        color: #074b8c;
        text-align: left;
    }

    h2.sidebar {
        width: 100%;
        height: auto;
        background-color: #e7e7e7;
        color: #074b8c;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        text-transform: uppercase;
        font-weight: normal;
    }

    img.step-icon {
        margin: auto;
    }

    hr.banner-bar {
        border: 0;
        background-color: #074b8c;
        height: 20px;
        margin-bottom: 0;
    }

    .analysis {
        background-image: url(images/EasyAudit/RunAnalysisBtn.png);
        background-position: left top;
        background-repeat: no-repeat;
        width: 133px;
        height: 20px;
        text-indent: -9999px;
        text-shadow: none;
        border-color: #fff;
        color: #fff;
        background-color: #fff;
    }

        .analysis:hover {
            background-position: left top;
        }

        .analysis:active {
            background-image: url(images/EasyAudit/RunAnalysisBtn.png);
            background-position: left top;
            background-color: #fff;
        }

    .reset {
        background-image: url(images/EasyAudit/ResetBtn.png);
        background-repeat: no-repeat;
        background-position: left top;
        width: 133px;
        height: 20px;
        text-indent: -9999px;
        text-shadow: none;
        border-color: #fff;
        color: #fff;
        background-color: #fff;
    }

        .reset:hover {
            background-position: left top;
        }

        .reset:active {
            background-image: url(images/EasyAudit/ResetBtn.png);
            background-repeat: no-repeat;
            background-color: #fff;
        }

    .ui-spinner {
        width: 100%;
        border: 1px solid #999;
        background: #fff;
    }

    .ui-spinner-box {
        width: 90%;
        height: 100%;
        float: left;
        font-size: 125%;
        border: none;
        background: none;
        padding: 0;
    }

    .ui-spinner-up,
    .ui-spinner-down {
        width: 10%;
        height: 50%;
        font-size: 0.5em;
        padding: 0;
        margin: 0;
        z-index: 100;
        text-align: center;
        vertical-align: middle;
        position: absolute;
        right: 0;
        cursor: default;
        border: 1px solid #999;
        border-right: none;
        border-top: none;
    }

    .ui-spinner-down {
        bottom: 0;
        border-bottom: 0;
    }

    .ui-spinner-pressed {
        background: #fff;
    }

    .ui-spinner-list,
    .ui-spinner-listitem {
        margin: 0;
        padding: 0;
    }

    .hr-below {
        background-color: #fff;
        margin: 0;
        height: 35px;
    }

    .topMargin {
        margin-top: 15px;
    }

    .bottomMargin {
        margin-bottom: 10px;
    }

    .leftMargin {
        margin-left: 3%;
    }

    .bottomMargin {
        margin-bottom: 15px;
    }

    .fridgeContainer {
        margin-top: 10px;
    }

    .printMargin {
        width: 8in;
    }

    #report {
        width: 785px;
    }

    .toggleTime {
        width: 324px;
        height: 43px;
        background-color: #bad7f5;
    }

        .toggleTime p {
            font-family: Open sans-serif Condensed;
            color: #074b8c;
            display: block;
            font-size: 18px;
            padding-top: 8px;
            padding-left: 15px;
        }

    .feedbackBar {
        background-color: #525252;
        color: white;
        bottom: 0px;
        height: 30px;
    }

    .feedback-toggle {
        padding: 0px;
    }

    .feedback-userinput {
        color: black;
    }

    textarea {
        resize: none;
        width: 100%;
    }

    .feedbackWrapper {
        position: fixed;
        bottom: 0px;
        background-color: #EBEBEB;
        border: 1px solid #999999;
    }

    a.fillBlock, a.fillBlock:active, a.fillBlock:hover {
        display: block;
        color: white;
        text-decoration: none;
        font-weight: bold;
        font-size: 15px;
        padding-top: 3%;
    }

a.fillLink, a.fillLink:active, a.fillLink:hover {
    padding-left:20px;
    display: block;
    line-height: 40px;
    margin-bottom: 0;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    text-align: left;
    vertical-align: middle;
}

.nav-tabs .nav-link{
    margin-right: 2px;
}

.nav-tabs > li > a {
    font-size: 1.3em;
    border: 1px solid #CECECE !important;
    border-bottom-color: transparent !important;
    background-color: #f1f7fd;
    color: #7aa5cd;
}



    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
        background-color: #bad7f5;
        color: #074b8c;
    }

    .radioStyle {
        font-size: 18px;
        color: #074b8c;
        margin-top: 15px;
    }

    .pleaseAlign {
        margin: 0 4px 4px 4px !important;
    }

    .auxButton {
        font-size: 1.1em;
        margin-top: 7px;
        margin-left: 10px;
        background-color: #f3f3f4;
        color: #074b8c;
        background-image: none;
        background-repeat: no-repeat;
        font-weight: normal !important;
    }

        .auxButton:hover {
            background-color: #f3f3f4 !important;
            color: #074b8c !important;
            font-weight: normal !important;
        }

.rightArrowTableButton {
    background-color: #A4BAD8;
    font-size: 20px;
    color: #eee;
    text-align: left;
    vertical-align: middle;
}

.rightArrowTableButton:before {
    position: absolute;
    font-size: 25px;
    font-family: 'FontAwesome';
    top: 0;
    right: 5px;
    content: "\f078";
}

.usage-toggle-table {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    padding: 0.25rem;
}

.downArrowTableButton {
    background-color: #A4BAD8;
    font-size: 20px;
    color: #eee;
    text-align: left;
    vertical-align: middle;
}

.downArrowTableButton:before {
    font-size:25px;
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    right: 5px;
    content: "\f054";
}

    .ea-toolbar {
        padding: 1px;
        margin-right: 10px;
    }

    .ea-account {
        display: block;
        font-size: 14px;
        border-bottom: solid 1px rgb(204, 204, 204);
        height: 34px;
        line-height: 1.428571429;
        padding: 6px 24px 6px 12px;
    }

    .ea-account-editable {
        background: url(images/edit.png) no-repeat right;
    }

    .ea-account-readonly {
        background-color: lightgrey;
    }

.energy-rec-container{
}

.energy-rec-img {
    width: 100%;
    border-radius: 3px;
    transition: all .3s ease;
    box-shadow: 0 1px 4px rgba(60,64,67, 0.3), 0 1px 3px 1px rgba(60,64,67, 0.15);
}

.energy-rec-img:hover{
    box-shadow: 0 2px 6px rgba(60,64,67, 0.5)
    background: #eee;
}
.energy-rec-container:hover .energy-rec-text {
    background: rgba(0, 0, 0, .8);
}

.energy-rec-text {
    min-height: 130px;
    font-size: 1.1em;
    padding: 5px;
    transition: all .3s ease;
    left: 0;
    margin-left: 15px;
    margin-right: 15px;
    display: inline;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: rgba(0, 0, 0, .5);
    color: #eee;
    position: absolute;
    bottom: 0;
    text-align: center;
}

.energy-rec-text div{
    display: table-cell;
    vertical-align: middle;
}

.rec-cover {
    position: relative;
    border-radius: 3px;
    transition: all .3s ease;
    background: #fff;
    box-shadow: 0 1px 2px rgba(60,64,67, 0.3), 0 1px 3px 1px rgba(60,64,67, 0.15);
    border: 1px solid rgba(0,0,0,.2);
}

.rec-cover:hover {
    box-shadow: 0 2px 4px rgba(60,64,67, 0.5), 0 1px 4px 1px rgba(60,64,67, 0.15);
    background: #eee;
}



.rec-cover-hover {
    cursor: pointer;
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rec-cover:hover .rec-button {
    opacity: 1;
}

@media (hover:none), (hover:on-demand) {
    .rec-cover .rec-button {
        opacity: 1;
    }
}

.rec-learn-more-row {
    position:absolute;
    width: 100%;
    bottom: 0px;
}

.rec-button:hover,
.rec-button:focus {
    background: rgb(85, 82, 100);
    border: none;
}
.rec-button {
    border: none;
    background: rgb(60, 58, 73);
    overflow: hidden;
    border-radius: 0px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    opacity: 0;
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 1em;
}




    .recommendation-box {
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }

    .recommendation-title {
        font-size: 1.5em;
        font-weight: bold;
    }

    .recommendation-text, .recommendation-proglink {
        font-size: 1em;
    }

    .mobile-dropdown a.btn {
        color: black !important;
    }

    .notification-dropdown > a {
        max-height: 37px;
    }

    .sp-occupant-tip {
        font-size: 1.25em;
    }


    .ea-footer-btn {
        margin: 10% !important;
    }

    .ea-title-mobile {
        text-align: center;
        margin: 1%;
        font-size: 1.3em;
    }

    #AnnualTouElecCostChart_container {
        height: 300px;
    }

    #AnnualTouElecUsageChart_container {
        height: 300px;
    }


    #AnnualElecCostChart_container {
        height: 300px;
    }

    #AnnualElecCostChartV2_container {
        height: 250px;
    }

    #MonthlyElecCostChart_container {
        height: 400px;
    }

    #AnnualGasCostChart_container {
        height: 300px;
    }

    #AnnualGasCostChartV2_container {
        height: 250px;
    }

    #MonthlyGasCostChart_container {
        height: 400px;
    }

    #AnnualElecUsageChart_container {
        height: 300px;
    }

    #AnnualElecUsageChartV2_container {
        height: 250px;
    }

    #AnnualGasUsageChart_container {
        height: 300px;
    }

    #AnnualGasUsageChartV2_container {
        height: 250px;
    }

    #MonthlyElecUsageChart_container {
        height: 400px;
    }

    #ElecTab img, #GasTab img {
        max-width: 30px;
    }

    #ElecTab a, #GasTab a {
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .legend-symbol {
        padding-top: 4px;
    }

        .legend-symbol > div {
            width: 16px;
            height: 12px;
        }

    .tipdetail-title {
        font-size: 2em;
    }

    .tipdetail-heading {
        font-size: 1.5em;
    }

    /* Water Heating SPC */
    #peopleInHomeSlider {
        margin-left: 6%;
        margin-right: 11%;
    }

    .le-iframeresize {
        width: 100%;
        border-style: none;
    }
    /* ------------  Instant Insights --------- */
    .ii-summaryHeader {
        font-weight: bold;
    }

    #IIElecCostChart_container, #IIGasCostChart_container {
        height: 250px;
    }

    .ii-table {
        text-align: center;
    }

        .ii-table th {
            text-align: center;
        }

        .ii-table td {
            text-align: center;
        }

    .noborder {
        border-top: none !important;
    }

    .dateformat {
        font-style: italic;
    }

    .tempdatetable > tbody > tr > td {
        padding: 1px;
    }

    .img-ii-mini {
        min-height: 20px;
        max-height: 50px;
        min-width: 20px;
    }

    .img-ii-mini-help {
        min-height: 15px;
        max-height: 20px;
        min-width: 15px;
    }

    .table-ii-mini > tbody > tr > .tempchangemonth > table {
        margin-left: 33%;
        margin-right: auto;
    }

    .table-ii-mini > tbody > tr > .tempchangeyear > table {
        margin-left: 40%;
        margin-right: auto;
    }

    .table-ii-mini > tbody > tr > td, .table-ii-mini > tbody > tr > td > a {
        vertical-align: middle !important;
        padding: 2px;
    }


    .avgtemptitle {
        font-weight: bold;
        text-align: center;
        font-size: 1.1em;
        border-style: dotted;
        border-width: thin;
        border-color: lightgray;
    }

    .caltable table {
        margin-bottom: 10px !important;
    }



    .monthtitle, .monthdropdown {
        font-weight: bold;
        text-align: center;
    }


    .identical-error {
        font-style: italic;
        font-size: 1.1em;
    }

    .weather-widget a:hover{
        text-decoration: none !important;
    }


    .wi-squareWeatherWidget, .wi-horizontalWeatherWidget {
        color: #337ab7 !important;
    }

    .wi-widgetRegularFont {
        font-size: 100%;
        text-align: center;
    }

    .wi-widgettodaysSquareFont, .wi-widgettodaysTempFont {
        text-transform: capitalize;
        font-weight: bold;
        font-size: 180%;
    }

    .wi-widget-usageCost-horizontal-div, .wi-widget-temp-horizontal-div {
        font-size: 160% !important;
    }

    .wi-widgettodaysTempFont {
        font-size: 120%;
    }



    @media (max-width: 400px) {
        .table-ii-mini td, .table-ii-mini th {
            font-size: 80%;
        }
    }


    @media (max-width: 1000px) {

        .table-ii-mini > tbody > tr > .tempchangeyear > table {
            margin-left: 30%;
        }

        .table-ii-mini > tbody > tr > .tempchangemonth > table {
            margin-left: 30%;
        }
    }


    @media (max-width: 571px) {
        .csrwidget td, .csrwidget th {
            font-size: 97%;
        }

        .detailCalendar {
            font-size: 1.3em !important;
        }

        .avgtemptitle, .calendarclose {
            font-size: 0.8em !important;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 1em !important;
        }

        .glyphicon.setback-detail-close {
            font-size: 0.8em !important;
        }

        .table-ii-mini > tbody > tr > .tempchangeyear > table {
            margin-left: 20%;
        }

        .table-ii-mini > tbody > tr > .tempchangemonth > table {
            margin-left: 20%;
        }
    }

    @media (max-width: 530px) {
        .table-ii-mini > tbody > tr > .tempchangeyear > table {
            margin-left: 0%;
        }
    }

    @media (max-width: 452px) {
        .csrwidget td, .csrwidget th {
            font-size: 88%;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 0.9em !important;
        }

        .calendarclose {
            font-size: 0.8em !important;
        }

        .table-ii-mini > tbody > tr > .tempchangeyear > table {
            margin-left: 15%;
        }
    }

    @media (max-width: 415px) {
        .csrwidget td, .csrwidget th {
            font-size: 75%;
        }

        .detailCalendar {
            font-size: 3em !important;
        }

        .avgtemptitle {
            font-size: 0.6em !important;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 0.9em !important;
        }

        .glyphicon.setback-detail-close {
            font-size: 0.5em !important;
        }
    }

    @media (max-width: 365px) {
        .csrwidget td, .csrwidget th {
            font-size: 70%;
        }

        .detailCalendar {
            font-size: 5.2em !important;
        }

        .avgtemptitle, .calendarclose {
            font-size: 0.4em !important;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 1em !important;
        }
    }

    @media (max-width: 346px) {
        .csrwidget td, .csrwidget th {
            font-size: 63%;
        }

        .detailCalendar {
            font-size: 5.2em !important;
        }

        .avgtemptitle, .calendarclose {
            font-size: 0.4em !important;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 1em !important;
        }
    }

    @media (max-width: 304px) {
        .csrwidget td, .csrwidget th {
            font-size: 43%;
        }

        .detailCalendar {
            font-size: 5.2em !important;
        }

        .avgtemptitle, .calendarclose {
            font-size: 0.4em !important;
        }

        .tempchangemonth, .tempchangeyear {
            font-size: 1em !important;
        }
    }


    .caltable {
        max-width: 450px;
        margin: 0px auto;
    }




    @media print {
        .annual-table, .monthly-table {
            font-size: 11px;
        }
    }


    .subscript-element-title {
        font-weight: 700;
        font-style: italic;
    }

    .subscript-element-content {
    }

    .inputlabel {
        font-family: Century Gothic,sans-serif;
    }

    .categoryHeading {
        padding-top: 30px;
        padding-bottom: 20px;
        font-family: Verdana,Arial,Helvetica,Sans-Serif;
        font-size: x-large;
        font-weight: 500;
        color: #059;
    }

    .panel-success {
        color: #059;
        background-color: transparent;
        border-color: transparent;
    }

    .invalidsubutil {
        color: darkblue;
        padding-top: 75px;
    }

    .font-override {
        font-family: Century Gothic,sans-serif;
    }

    .dropdown-setting {
        background-color: #fff;
        color: #059;
    }

    .check-with-label:checked + .label-for-check {
        font-weight: 600;
    }

    .ii-impact-table{
        margin-top: 10px;
    }

    .ii-impact-table tbody tr td {
        border-top: none;
        padding: 0px 4px 2px 2px;
    }

        .ii-impact-table tbody tr td.ii-summaryHeader {
            font-weight: bold;
            padding-bottom: 0px;
        }

.ii-impact-table .fa-arrow-circle-o-up {
    color: #960115;
}
.inverse .fa-arrow-circle-o-down {
    color: #960115 !important;
}
        .ii-impact-table .fa-arrow-circle-o-down {
            color: #23921E;
        }
.inverse .fa-arrow-circle-o-up {
    color: #23921E !important;
}

.ii-table, .ii-table th {
    text-align: center;
}

    .ii-arrow {
        min-width: 25px;
    }

    .copyright-text {
        font-size: 9px;
    }

    .pagefooter {
        font-size: 0.75em;
        border-top: 0.1px;
        border-top-color: #a5a39f;
        border-style: dotted;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .ribbonformat {
        font-size: smaller;
    }

    .ribbon-label {
        margin-top: 15px;
        text-align: center;
    }

    .ribbon-label-border {
        border-left: 1px solid;
        border-color: white;
    }

    .subscriptionFullColumn img {
        margin-left: auto;
        margin-right: auto;
    }

    .subscriptionFullColumn {
        /*margin-top: 2%;*/
    }

.ribbon-arrow {
    position: absolute;
    top: -20px;
    left: 45%;
    font-size: 4rem;
    z-index: 999;
    color: white;
    text-shadow: 0px 0px 2px rgba(0,0,0,1);
}

    .ribbonrowspacing {
        padding-bottom: 10px;
    }

    .subribbon {
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 15px;
    }

        .subribbon > div {
            display: none;
        }

        .subribbon a {
            color: white;
        }


    .spcfontlg {
        font-size: 2em;
    }


    .spcfontsm {
        font-size: 1.25em !important;
    }

    .spcfontxs {
        font-size: 0.7em;
    }

    .spcfonttiny {
        font-size: 1em !important;
    }

    .ribbonpers a {
        color: white;
        text-shadow: white 0px 0px 1px;
    }



    .extLink a {
        color: #0645AD !important;
    }

    .ribbonunderline {
        border-bottom: 1px solid;
        color: white;
    }


    .spcfontmd {
        font-size: 1.65em;
    }

    .totalseperator {
        border-left-style: dotted;
        border-left-width: thin;
        border-left-color: lightgray;
    }

    .spcmobiletitle {
        font-size: 1.25em;
    }

.bannerbuttons {
    color: white;
    transition: all ease-in .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.4);
}
    .bannerbuttons:hover {
        text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.75);
    }

    #CarbonRecommendations {
        display: none;
    }

    .optionfont {
        font-size: small;
    }

    .page-title {
        padding: 6px 12px;
    }

    .table-responsive > .fixed-column {
        position: absolute;
    }

    .fixed-column > tbody > tr:nth-of-type(even), .fixed-column > thead > tr {
        background-color: white;
    }

.fixed-column > tbody > tr:nth-of-type(odd) {
    background: #e8e8e8;
}

    .table-responsive > .fixed-column > tbody > tr > td:last-child, .table-responsive > .fixed-column > thead > tr > th:last-child {
        border-right: 1px solid #ddd
    }

    .btn-toolbar-centered {
        text-align: center;
    }

        .btn-toolbar-centered .btn-group {
            float: none !important;
        }



/* wrap btn arrow text in a span to add text animation on hover. */

.btn.slide.arrow:after {
    content: "\f178";
}

.btn.slide.save:after {
    content: "\f0c7";
}

.btn.slide.undo:after {
    content: "\f0e2";
}

.btn.slide.show-analysis:after {
    content: "\f080";
}
.btn.slide.send:after {
    content: "\f003";
}

.btn.slide {
    padding-left: 40px;
    padding-right: 40px;
}
.btn.slide:after {
    font-family: FontAwesome;
    right: -5px;
    top: 0;
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    opacity: 0;
    -webkit-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}

.btn.slide:hover:after {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.btn.slide:hover span {
    -webkit-transform: translateX(-8px);
    -o-transform: translateX(-8px);
    transform: translateX(-8px);
}

.btn.slide span {
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    -webkit-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
}


@media (hover:none), (hover:on-demand) {
    .btn.slide span {
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: all .6s;
        -o-transition: all .6s;
        transition: all .6s;
        -webkit-transform: translateX(-8px);
        -o-transform: translateX(-8px);
        transform: translateX(-8px);
    }

    .btn.slide:after {
        font-family: FontAwesome;
        right: 15px;
        top: 0;
        display: inline-block;
        vertical-align: middle;
        -webkit-transition: all .6s;
        -o-transition: all .6s;
        transition: all .6s;
        opacity: 1;
    }
}


    .img-ii-mini-help {
        min-height: 15px;
        max-height: 20px;
        min-width: 15px;
    }


    .loadingweeklyforecast, .loadingweeklyforecastexp {
        background-image: url("images/EasyAudit/energyForecastWeatherBackground.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }


    .drc-calc-img {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
        min-height: 100px;
    }

    .drc-calc-img-cl {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        min-width: 70px;
    }

    .drc-calc-img-ar {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 50px;
    }

    .drc-calc-img-sm {
        background-size: contain;
        background-repeat: no-repeat;
    }

    .drc-calc-img-unstacked {
        background-size: contain;
        background-repeat: no-repeat;
    }

    .dialformat {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.75;
    }

    .loadinglandingelement, .loadinglandingelementexp {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

        .loadinglandingelement div {
            width: 100%;
            max-width: 341px;
            margin: 0 auto;
        }


    .loadingweeklyforecast div {
        width: 100%;
        max-width: 448px;
        margin: 0 auto;
        opacity: 0.65;
    }



    .spcloadingtext {
        font-size: 1.7em;
    }

    .weeklyloadingtext {
        font-size: 1.7em;
        color: white;
        opacity: 1 !important;
    }

    .radio-list {
        line-height: 2em;
    }

        .radio-list label {
            font-weight: normal;
        }

        .radio-list input[type=radio] {
            display: none;
        }

        .radio-list i {
            vertical-align: middle;
            font-size: 2em;
        }

        .radio-list label input[type="radio"] ~ i.fa.fa-circle-o {
            color: #c8c8c8;
            display: inline;
        }

        .radio-list label input[type="radio"] ~ i.fa.fa-dot-circle-o {
            display: none;
        }

        .radio-list label input[type="radio"]:checked ~ i.fa.fa-circle-o {
            display: none;
        }

        .radio-list label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
            color: #7AA3CC;
            display: inline;
        }

        .radio-list label input[type="radio"]:disabled:checked ~ i.fa.fa-dot-circle-o {
            color: #b9c4cf;
            display: inline;
        }

        .radio-list label input[type="radio"]:disabled:checked ~ i.fa.fa-circle-o {
            display: none;
        }

        .radio-list label input[type="radio"]:disabled ~ i.fa.fa-circle-o {
            color: #b9c4cf;
            display: inline;
        }


    [role=radiogroup] {
        vertical-align: middle;
    }

    [role=radio] {
        display: block;
        position: relative;
        padding-left: 2em;
        line-height: 2.4em;
        cursor: default;
        font-size: 1rem;
    }

        /* This creates the visuals for the radio buttons */
        [role=radio]::before, [role=radio]::after {
            display: block;
            position: absolute;
            border-radius: 50%;
            content: '';
        }

        [role=radio]::before {
            top: 0px;
            left: 0px;
            content: '\f10c';
            font-family: FontAwesome;
            font-size: 2em;
            color: #c8c8c8;
        }

        [role=radio][aria-checked=true]::before {
            top: 0px;
            left: 0px;
            content: '\f192';
            font-family: FontAwesome;
            color: #7AA3CC;
        }

        [role=radio][aria-checked=true].disabledradio::before {
            color: #c8c8c8;
        }

        [role=radio].disabledradio {
            pointer-events: none;
        }

    .radiohorizontal {
        display: inline-block;
        padding-right: 1.4em;
    }


    .checkboxes {
        padding-top: 1em;
    }

        .checkboxes [role="checkbox"] {
            padding-left: 1.75em;
            cursor: pointer;
        }

            .checkboxes [role="checkbox"]::before,
            .checkboxes [role="checkbox"]::after {
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                content: '';
            }

            .checkboxes [role="checkbox"]::before {
                width: 25px;
                height: 25px;
                border: 1px solid hsl(0, 0%, 66%);
                background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%);
            }

            .checkboxes [role="checkbox"]:active::before {
                background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%);
            }

            .checkboxes [role="checkbox"][aria-checked="mixed"]::before,
            .checkboxes [role="checkbox"][aria-checked="true"]::before {
                border-color: hsl(216, 80%, 50%);
                background: hsl(217, 95%, 68%);
                background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%));
            }

            .checkboxes [role="checkbox"][aria-checked="mixed"]::after {
                display: block;
                width: 8px;
                border-bottom: 0.125em solid #fff;
                transform: translate(-50%, -50%) rotateZ(45deg);
                transform-origin: center center;
            }

            .checkboxes [role="checkbox"][aria-checked="mixed"]:active::after,
            .checkboxes [role="checkbox"][aria-checked="true"]::after {
                display: block;
                width: .4em;
                height: .8em;
                border: solid #fff;
                border-width: 0 .125em .125em 0;
                transform: translateY(-65%) translateX(-50%) rotate(45deg);
            }

            .checkboxes [role="checkbox"][aria-checked="mixed"]:active::before,
            .checkboxes [role="checkbox"][aria-checked="true"]:active::before {
                background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%));
            }

            .checkboxes [role="checkbox"]:focus {
                outline: none;
            }

    @media (max-width: 767px ) {
        .radio-list {
            line-height: 3em;
        }

            .radio-list i {
                vertical-align: middle;
                font-size: 3em;
            }

        .spcfonttext {
            font-size: 1.5em;
        }
    }



    input[type=text]::-ms-clear {
        display: none;
        width: 0;
        height: 0;
    }

    @media (max-width: 720px ) {
        .bannerTipsDetailNoheader #bannerImageSpacer {
            height: 242px;
        }
    }



    .btn-matrix .col-xs-4, .btn-matrix .col-4 {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 75px;
    }
    /* Decorations */
    .btn-matrix {
        background-image: url(images/compass_rose.png);
        background-size: contain;
        background-repeat: no-repeat;
    }


        .btn-matrix[disabled], .btn-matrix.disabled {
            background-image: url(images/compass_rose.png);
            background-size: contain;
            background-repeat: no-repeat;
            opacity: 0.4;
        }

    .btn-row {
        padding: 0 !important;
        margin: 0 !important;
    }


.btn-light.toggle-off {
    background-color: #cfcfcf;
}

.btn-xs {
    padding: 0.1rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.15rem;
}

    .btn-direction[disabled], .btn-direction.disabled {
        z-index: 2 !important;
        background-color: grey;
        opacity: .65;
    }

    .btn-direction {
        background: transparent;
        padding: 0px;
        border: none;
    }

        .btn-direction:focus {
            border: thick;
            outline: solid thin blue;
            opacity: 0.4;
        }

        .btn-direction:hover {
            border: thick;
            outline: solid thin blue;
            opacity: 0.4;
        }

    .onscreenpagebreak {
        display: flex;
        flex-direction: row;
    }

        .onscreenpagebreak:before, .onscreenpagebreak:after {
            content: "";
            flex: 1 1;
            border-bottom: 1px solid #000;
            margin: auto;
        }

    .solarElement {
        width: 100% !important;
    }

    .solar-img {
        max-width: 150px;
        float: left;
    }

    .solarRow {
        margin-bottom: 40px;
    }

    .modalWarning-iframe {
        margin-top: 130px !important;
    }

    .solarLegend {
        display: inline-block;
    }

    .solarLegendSquare {
        height: 30px;
        width: 30px;
        background-color: #ecb938;
        background: repeating-linear-gradient( -45deg, transparent, transparent 10px, #ecb938 10px, #cea12f 20px ), linear-gradient( to bottom, #4be44b, #719e35 );
        display: inline-block;
    }

    .legendContainer {
        text-align: center;
    }


    .positive-savings {
        color: green;
    }

    .negative-savings {
        color: red;
    }

/* Border separators should be applied to divs that are adjacent when not on a mobile device. */
@media only screen and (min-width: 767px) {
    .ea-border-right {
        border-right: 1px solid #e9e9e9;
    }

    .ea-border-left {
        border-left: 1px solid #e9e9e9;
    }
}

/* Bottom border separator should be applied for mobile devices. */
@media only screen and (max-width: 767px) {
    .ea-border-bottom {
        border-bottom: 1px solid #e9e9e9;
    }
}

.ea-border-top {
    border-top: 1px solid #e9e9e9;
}

.force-block
{
    display:block;
}

.va-image {
    font-size: 175px !important;
    opacity: .4;
}

.image-center {
    margin-right: auto;
    margin-left: auto;
}

.row-push {
    padding-bottom: 10px;
}