body {
    font-size: 16px;
}

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

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

.bi-icon-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 2.5em;
}

.bi-stack-1x, .bi-stack-2x {
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.bi-stack-2x {
    font-size: 2em;
}

.bi-stack-1x {
    line-height: inherit;
}

.bi-2x {
    font-size: 2em;
}

/* 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-header-expand {
    color: grey;
    font-style: italic;
    font-size: 1.0em !important;
    align-self: center;
}

.appliance-type-description{
text-align:center;
font-size:larger;
font:bolder;
}

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

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

.accordion-toggle {
    color: black !important;
    padding-left: 1% !important;
    display: block;
}

.accordion-toggle:not(.collapsed) {
    background-color: grey;
}

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

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

.hidden-spacer{
    height:0;
}
.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;
    }
}

.tab-content.card-body.no-word-wrap {
    word-wrap: normal;
    word-break: normal;
}

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

.container-fluid.pagetoolbarandbody {
    padding-top: 66px;
    padding-left: 0px;
    padding-right: 0px;
    //word-break:break-word;
}

.word-break {
    word-break: break-word;
}
/* 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, .audioContainer {
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    position: absolute;
    top: 0px;
}



.unmute-img, .audio-child {
    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 {
        top: 0;
        left: 0px;
        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: "\2714";
    }



.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, .ef-demand-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;
 
}

.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: 'bootstrap-icons';
        top: 0;
        right: 5px;
        content: "\f282";
        font-weight: 900;
    }

.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: 'bootstrap-icons';
        top: 0;
        right: 5px;
        content: "\f285";
        font-weight: 900;
    }

.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;
    }

.bootstrap-touchspin{
    flex-wrap:nowrap;
}

.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 .bi-arrow-up-circle {
        color: #960115;
        font-size: 1.25em;
    }

.inverse .bi-arrow-down-circle {
    color: #960115 !important;
    font-size: 1.25em;
}

.ii-impact-table .bi-arrow-down-circle {
    color: #23921E;
    font-size: 1.25em;
}

.inverse .bi-arrow-up-circle {
    color: #23921E !important;
    font-size: 1.25em;
}

.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: -30px;
    left: 40%;
    font-size: 3.5rem;
    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: "\f138";
}

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

.btn.slide.undo:after {
    content: "\f117";
    font-weight: bold;
}

.btn.slide.show-analysis:after {
    content: "\f17b";
}

.btn.slide.send:after {
    content: "\f003";
}

.btn.slide {
    padding-left: 40px;
    padding-right: 40px;
}

    .btn.slide:after {
        font-family: 'bootstrap-icons';
        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: 'bootstrap-icons';
        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;
}

#weeklyForecast td {
    background-color: transparent;
    color: white;
}

.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: 2.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: '\f28a';
        font-family: 'bootstrap-icons';
        font-size: 2em;
        color: #c8c8c8;
    }

    [role=radio][aria-checked=true]::before {
        top: 0px;
        left: 0px;
        content: '\f518';
        font-family: 'bootstrap-icons';
        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;
    }
}


@media (min-width:1182px) {
    .tips-circle-text {
        font-size: 0.95em;
    }
}

@media (min-width:1257px) {
    .tips-circle-text {
        font-size: 1.05em;
    }
}

@media (min-width:1600px) {
    .tips-circle-text {
        font-size: 1.35em;
    }
}



.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;
}

.fa-spin-2x {
    -webkit-animation: fa-spin 1.3s infinite linear;
    animation: fa-spin 1.3s infinite linear;
}

.bi-list::before {
    font-weight: bold !important;
}

.pagebody {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.evquestion td {
    color: white;
}

.vjs-poster img {
    width: 100%;
}