.efficient-homes .toggle-box { 
    padding: 1rem 0 .5rem 0; 
    margin-top: 1.5rem;
    }

.section.toggle-box{ padding-bottom: 0; }
.section.toggle-box .toggle-content-wrapper{ overflow-x: auto; }




.city-info-wrapper{
    margin: 1rem 0 2rem 0;
    line-height: 1.25rem;
    }
.city-info-wrapper div:first-child{ display: none; }




.water-saved-section .feedback .water-border{
    display: grid;
    gap: 1rem;
    align-items: center;
    grid-template-columns: min-content auto;
    line-height: 2rem;
    justify-content: center;
    }
.water-saved-section .feedback .water-border .water-reduction-value{ 
    font-size: 1.4rem;
    line-height: 1.75rem; 
    }   
.water-saved-section .feedback .water-border img{ 
    width: 4rem;
    height: 4rem;
    background-color: #fff;
    border-radius: 50%;
    padding: .5rem;
    }
.water-saved-section-wrapper .water-saved-graph-wrapper { padding-bottom: 1rem; }
.water-saved-graph .bar-wrapper, .water-saved-graph-wrapper .full-bar{
    height: 2rem;
    position: relative;
    }
.water-saved-graph-wrapper .full-bar{ 
    width: 100%; 
    background-color: #4faded;
    margin-bottom: .5rem;
    }    
.water-saved-graph .bar-wrapper .bar{
    position: absolute;
    height: 100%;
    }    




.household-section-wrapper .img-right-wrapper img{ width: 8rem; }
.city-section-wrapper .img-right-wrapper img{ width: 8rem; }

.city-section-wrapper .compliance-slider-wrapper{ padding: .5rem 0 1.5rem; }





.water-categories-graph .bar-wrapper{
    height: 2rem;
    position: relative;
    }
.water-categories-graph .bar-wrapper .bar{
    position: absolute;
    height: 100%;
    cursor: pointer;
    }    
.water-categories-graph .bar-wrapper .bar:hover{ filter: brightness(70%); }    
.water-categories-graph .key-wrapper {
    margin: .4rem 0 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, auto));
    gap: .25rem .75rem;
    }
.water-categories-graph .key-item-wrapper{
    display: grid;
    grid-template-columns: min-content auto;
    gap: .5rem;
    line-height: 1.25rem;
    }   
.water-categories-graph .key-wrapper .key-block{
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    }


#results{ padding-top: 1rem; }
#upgrade-info-panel .img-right-wrapper img.round{ background-color:#fff; }

#upgrade-info-panel .img-right-wrapper.small img, 
#add-remove-upgrade-panel .img-right-wrapper.small img { width: 10rem; }

#new-game-button.large{ margin: 1rem auto 4rem auto; }
#new-game-button.large img{ padding: 0 8px; }

#continue-wrapper h3.hint-button{ padding-top: .5rem; }




@media print, (min-width:580px) {


    .efficient-homes .toggle-box{ padding: 1.5rem 0 2rem 0; }


    #choose-compliance-wrapper .img-right-wrapper img { width: 10rem; }

    @keyframes pulse-scale {
        0% { transform: scale(.8); }
        100% { transform: scale(1); } 
        }  

    #results{ padding-top: 2rem; }

    .water-saved-section .feedback .water-border{ padding: 2rem 5rem; }
    .water-saved-section .feedback .water-border .water-reduction-value{ 
        font-size: 1.75rem;
        line-height: 2.25rem;
        text-align: center;
        }   
    .water-saved-section .feedback .water-border img {
        width: 5rem;
        height: 5rem;
        }  


    .water-saved-graph-wrapper h3{ margin-bottom: 1rem; }
    .water-saved-section-wrapper .water-saved-graph-wrapper { padding-bottom: 2rem; }
    .water-saved-graph .bar-wrapper, .water-saved-graph-wrapper .full-bar{ height: 3rem; }
    
    .water-saved-section .feedback{ margin: 3rem 0 4rem 0; }

    .water-categories-graph .bar-wrapper{ height: 2.5rem; }

    .save-compare-section-wrapper { margin: 2rem 0; }

    .city-info-wrapper{
        display: grid;
        gap: 1rem;
        grid-template-columns: 5rem auto;
        align-items: center;
        }
    .city-info-wrapper div:first-child{ display: block; }
    

}  


@media print {
  
    .section.toggle-box { padding-bottom: .5rem; }
   
    .city-section-wrapper .compliance-slider-wrapper { display: none; }
    .water-saved-graph-wrapper{ break-inside: avoid; }
   
    #sticky-upgrades-added-feedback-wrapper{ display: none; }   

    #action-feedback-wrapper{ display: none; }
   
    #efficientHomes.toggle-box { padding: .75rem 0; }

    .water-saved-section .feedback, 
    #water-saved-section .feedback .water-border {
        margin: 0;
        padding: 0;
        justify-content: left;
        }
    .water-saved-graph .bar-wrapper, .water-saved-graph-wrapper .full-bar, 
    .water-categories-graph .bar-wrapper { height: 2rem; }
    .water-saved-section-wrapper .water-saved-graph-wrapper { padding: 0;}


}