/* Typography */
body
{
    background-color: #ccc;    
    font-family: 'Gotham SSm 4r','Gotham SSm A','Gotham SSm B', 'Montserrat', Helvetica,sans-serif;
    font-size:14px;
}
.calculator-background
{
    position: fixed;
    background-size: cover;
    background-position: top center;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.aircond
{
    background-image: url('../_images/backgrounds/Ergon_Air-Conditioning_Calculator.jpg');
}
.dryer
{
    background-image: url('../_images/backgrounds/Ergon_ClothesDryer_Calculator.jpg');
}
.hotwater
{
    background-image: url('../_images/backgrounds/Ergon_HotWater_Calculator.jpg');
}
.lighting
{
    background-image: url('../_images/backgrounds/Ergon_Lighting_Calculator_R.jpg');
}
.poolpump
{
    background-image: url('../_images/backgrounds/Ergon_PoolPump_Calculator_R.jpg');
}
.refrigerator
{
    background-image: url('../_images/backgrounds/Ergon_Refrigerator_Calculator.jpg');
}
.tariff 
{
	background-image: url('../_images/backgrounds/Ergon_Tariff_Comparison_Calculator.jpg');
}
footer * 
{
    font-family: 'Gotham SSm 4r','Gotham SSm A','Gotham SSm B', 'Montserrat', Helvetica,sans-serif;
}
.slim-footer-nav-section *
{
    font-family: 'Gotham SSm 4r','Gotham SSm A','Gotham SSm B', 'Montserrat', Helvetica,sans-serif;
}
.font-large
{
    font-size: 1.8em;
}
.font-medium
{
    font-size: 1.3em;
}
.font-small
{
    font-size: 0.8em;
}
.disclaimer
{
    line-height: 2.5em;
}
.note
{
    padding-top:11px;
}
/* IE 8 hack to enable font smoothing */
/* https://gist.github.com/DanielWright/1370958 */
.dontuse {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop);
    zoom: 1;
}
/******************************************************** Header elements ********************************************************/
#header-container {
    font-family: Roboto Slab,Times New Roman,Times,serif;
    padding-top: 50px; /**Increased fromn 20px to 50px to align Header-Contaner with Ergon Retail site, by B.Petersen 2 July 2020**/
    font-weight: 700;
    max-width: 870px;
    margin: auto;
}
.application-description-container
{
    max-width: 760px;
    min-height: 170px;
    margin:auto;
}
    .container-blue
    {
        background-color: #00a2d3;
    }
    .content-blue, .icon-blue, a.link-blue, a.link-blue:hover
    {
        color: #19265b;
    }
    .container-green
    {
        background-color: #34aa45;
    }
    .content-green, .icon-green, a.link-green, a.link-green:hover
    {
        color: #223a2a;
    }  
    .container-orange
    {
        background-color:#df7a3f;
    }
    .content-orange, .icon-orange, a.link-orange, a.link-orange:hover
    {
        color:#641e1a;
    }    
    
.application-name
{
    padding: 25px;
    font-size: 2.5em;
    padding-bottom:0px;
}
.application-description
{
    padding: 25px;
    padding-top:0px;
    color: #fff;
    font-weight:normal;
    font-size:14px;
}
.title-icon-container
{
    float:left;
    width:180px;
    height:170px;  
    text-align:center;  
    display:table;   
}
.title-icon
{
    font-size:80px; 
    display: table-cell;
    vertical-align:middle;    
}
.logo-site {
    margin-left: -55px;
    float: left;
    position: absolute;
    top: 59px; /**Altered Top properties to align Header Logo with Ergon Retail site, by B.Petersen  3 July 2020**/
    /**Added Top & Position properties to align Header Logo with Ergon Retail site, by B.Petersen 2 July 2020**/
}
.nav-accessible
{
    min-width: 200px;
    float:right;
    display:block;
    height:auto;
    border-right:0;
    border-left:solid #636363 2px;
    width:12%;
}
.accessible-content
{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
/******************************************************** Main body ********************************************************/
#main-container
{
    max-width:760px;
    margin:auto;
}
#errors-container
{
    width: 600px;    
}
#errors_container
{
    margin-top:20px;  
    padding-bottom:7px;  
}
#navbar-container, #content-container
{
    position: relative;
}
#content-container
{
    width: 600px;
    min-height: 450px;    
}
.content-container
{
    background-color:#fff;
    padding:10px;
}
.loader
{
    width: 100%;
    height: 400px;
    background: #fff url(../img/loader.gif) no-repeat center;
}
.formbody-content
{
    background-color: #fff;
    clear: both;
    padding: 20px;
    padding-top:0px;    
    padding-bottom:0px;   
}
footer
{
    max-width:760px;
    margin:auto;
    background-color:#323232;
    text-align:center;
    color:#fff;
    padding:10px;
}
footer a{
    color:#fff;
}
footer .list-inline {
    font-size:0.9em;
}
footer .logo-tagline{
    font-size:0.7em;
    line-height:40px;
}
footer .copyright {
    font-size:0.9em;
}

/******************************************************** Containers ********************************************************/
.border
{
    background-color:#ededed;
    padding:10px;    
}
.border-gap
{
    margin-top:15px;
    display:block;
}
.border-sub
{
    background:#c6c6c6;
    padding:20px;
}
.border-tip
{
    padding:20px;
    display: inline-block;
    width:100%;
}
.border-white
{
    background-color:#fff !important;
}
.result-option-container
{
    background-color: #404040;  
    padding: 20px; 
}
/******************************************************** Errors ********************************************************/
#errors_container
{
    background-color:#eee;
    padding:10px\0;
}
.error-link, .error-link:hover
{
    color:#e10000;
    text-decoration:none;
}
.error-heading
{
    margin-bottom:16px;
}
#errors_container p
{
    display:block;
    padding-left:10px;
    padding-right:10px;
}

/******************************************************** Results ********************************************************/
.your-savings-title
{   
    font-family: Roboto Slab,Times New Roman,Times,serif; 
    font-size:18px;
    font-weight:bold;
    margin-top:20px;
    margin-bottom:20px;
    color:#323232;
}
.tariff-assessment-title
{   
    font-family: Roboto Slab,Times New Roman,Times,serif; 
    font-size:18px;
    font-weight:bold;
    margin-top:20px;
    margin-bottom:20px;
    color: #641e1a;
}
.result-option-group
{
    font-size:14px;
    font-weight:bold;
    padding:10px;   
    color: #fff;
}
.result-option-group a
{
    text-decoration: underline;
    color: #fff;
}
.result-option
{
    font-size:14px;
    font-weight:bold;
    padding:20px;   
    padding-bottom:14px; 
    margin-top:10px;
    background-color: #404040;
    color: #fff;
}
.result-option a
{
    text-decoration: underline;
    color: #fff;
}
.result-option-tariff
{
    font-weight:normal;
}
.result-option-red
{
    background-color:#e3473a;
    color:#fff;
}
.result-option-green
{
    background-color:#223a2a;
    color:#fff;
}
.result-option-light 
{
	background-color: #C6C6C6;
	color: #323232;
}
.result-option-lightgreen
{
    background-color:#aeddb5;
    color:#404040;   
    text-align:right;
}
.cost-title
{
    font-weight:normal;
}
.cost
{
    font-size:20px;
    font-weight:bold;
}
.cost-orange
{
    font-size:20px;
    font-weight:bold;
    text-align: right;
    vertical-align: middle;
    color: #df7a3f !important;
}
.cost-orange:before
{
    content: "$  ";
}
.saving-title
{
    font-weight:normal;
}
.saving
{
    font-size:20px;
    font-weight:bold;
}
.result-savings
{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    text-align: right;
    padding: 10px;
    background-color: #df7a3f !important;
    color:#641e1a;
    font-size: 18px;
    font-weight: bold;
}
.result-savings:before 
{    
    content: "$  ";
    position: relative;
}
.result-savings-title
{
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    text-align: right;
    padding: 10px 10px 10px 0px;
    background-color: #df7a3f !important;
    color:#641e1a;
    font-size: 18px;
    font-weight: bold;
}
.result-savings-title:before
{
    content: "\e662";
    position: absolute;
    display: block;
    padding-left: 10px;
    right: 1;
    width: 45px;
    height: 45px;
    top: 0;
    z-index: 1;
    text-align: left;
    line-height: 45px;
    pointer-events: none;
    font-family: ergon-icons;
	font-size: 24px;
	background: transparent;
}
.result-detail
{
    padding: 6px;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: rgba(0, 0, 0, 0.2);   
}
.result-detail-title
{
    padding-left: 20px;
    padding-right: 20px;
    color: #641e1a;
    font-weight: bold;
}
.result-detail-heading
{
    font-weight: bold;
}
.result-detail-heading-center
{
    font-weight: bold;
    text-align: center;
}
.result-detail-total
{
    padding: 6px;
    background-color: #c6c6c6;
    font-weight: bold;
    font-size: 16px;
}
.result-detail-cost
{
    text-align: center;
}
.result-detail-cost:before
{
    content: "$";
    float: left;
}
/******************************************************** Tips ********************************************************/
#tips_container
{
    font-family: Roboto Slab,Times New Roman,Times,serif; 
    margin-top:10px !important;
    background-color:#c6c6c6;
}
.tip
{    
    font-size:18px;
    display:inline-block;
    min-height:90px;
    padding:10px;    
    position:relative;
    width:100%;    
}
.tip-icon
{
    font-size:80px;
    width: 100px;
    float:left;
}
.tip-blurb
{
    color:#404040;
    font-weight:bold;
}
.tip-blurb:hover
{
    color:#404040;
}
.tip-blurb-plain
{
    font-weight:normal;
    display:block;
    text-decoration:none;
    color:#fff;
}
.cta-box-arrow {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    background: #404040;
    color: #fff;
    right: -20px;
    bottom: -20px;    
}
.cta-box-arrow:hover {
    text-decoration: none;
    background: #929292;
    color: #FFF !important;
}

.cta-box-arrow-orange {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    background-color:#df7a3f;
    color: #fff;
    right: -20px;
    bottom: -20px;    
}
.cta-box-arrow-orange:hover {
    text-decoration: none;
    background: #FF984F;
    color: #FFF !important;
}
/******************************************************** Forms ********************************************************/
.form-blurb
{
    display:block;
    text-align:right;
    padding-top:10px;
    color:#777;
}
.form-heading-container
{
    background-color:#c6c6c6;
    color:#323132;
    font-size:1.0em;
    font-weight:bold;
    line-height:34px;
    min-height:34px;
    padding-left:20px;
    clear:both;
}
.question-container
{
    padding:20px;
}
.two-column
{
    display:inline-block;
    width:40%;
    vertical-align:top;
}
.three-column
{
    display:inline-block;
    width:30%;
    vertical-align:top;
}
.radio input
{
    display:block;
    height:15px;
    min-width:25px;
}
.sq-form-field {
    display: block;
    max-width: 100%;
    color: #323232;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #CCCCCC;
    height: 42px;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
select.sq-form-field {
    height: 42px;
    line-height: 42px;
}
.form-input .form-label
{
    display:block;
}
.mandatory
{
    color: #e10000;
    font-weight: bold;
    font-size: 1.3em;
    position: relative;
}
.button-group
{
    display:inline-block;
    margin-top:20px;
    width:100%;
}
.call-to-action {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
}
.call-to-action:before {
    content: "\e602";
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    top: 0;
    z-index: 1;
    color: white;
    text-align: center;
    line-height: 36px;
    pointer-events: none;
    font-family: ergon-icons;
	text-align: center;
	font-size: 16px;
	background: black;
    background: rgba(0, 0, 0, 0.5);
}
.call-to-action input[type=submit] {
    text-transform:uppercase;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 56px 10px 20px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 36px;
    float: right;
    max-width: 100%;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border:none;
}

.blue-button
{
    background-color:#2c5697 !important;
}
.green-button
{
    background-color:#368e43 !important;
}
.orange-button
{
    background-color:#df7a3f !important;
}
.gray-button
{
    background-color:#c6c6c6 !important;
}
.white-button
{
    background-color:White !important;
}
.add-bill-button {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
}
.add-bill-button:before {
    content: "\e618";
    position: absolute;
    right: 1;
    width: 36px;
    height: 36px;
    top: 0;
    z-index: 1;
    color: black;
    text-align: center;
    line-height: 36px;
    pointer-events: none;
    font-family: ergon-icons;
	font-size: 20px;
	background: white;
    background: rgba(0, 0, 0, 0.25);
}
.add-bill-button input[type=button] {
    text-transform: none;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 20px 10px 56px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 36px;
    float: left;
    max-width: 100%;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border:none;
}
.remove-bill-button {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width:100%;
}
.remove-bill-button:before {
    content: "\e66c";
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    top: 0;
    z-index: 1;
    color: black;
    text-align: center;
    line-height: 36px;
    pointer-events: none;
    font-family: ergon-icons;
	text-align: center;
	font-size: 20px;
	background: rgba(162, 162, 162, 1);
	/*background: rgba(0, 0, 0, 0.25);*/
}
.remove-bill-button input[type=button] {
    text-transform: none;
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 56px 10px 20px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 36px;
    float: right;
    max-width: 100%;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border:none;
}
.remove-bill-button-small {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 36px;
    height: 36px;
}
.remove-bill-button-small:before {
    content: "\e66c";
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    top: 0;
    z-index: 1;
    color: black;
    text-align: center;
    line-height: 36px;
    pointer-events: none;
    font-family: ergon-icons;
	text-align: center;
	font-size: 20px;
    /*background: rgba(0, 0, 0, 0);*/
}
.remove-bill-button-small input[type=button] {
    text-transform: none;
    background: rgba(0, 0, 0, 0);
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    position: relative;
    height: 36px;
    float: right;
    max-width: 100%;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border:none;
}
.separator 
{
    height:1px;
    background: rgba(0, 0, 0, 0.2);
}
.separator-white
{
    height:1px;
    background: rgba(255, 255, 255, 1);
}
.separator-black
{
    height:1px;
    background-color: black;
}
.tariff-bill-entry 
{
    padding: 0px 15px 0px 15px;
}   
.tariff-bill-period 
{
    display: inline-block;
    padding-top: 14px; 
}   
.sq-form-field[disabled=disabled] {
    display: block;
    max-width: 100%;
    color: #323232;
    background-color: transparent;
    background-image: none;
    border: 1px solid #CCCCCC;
    height: 42px;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.Bill2Period 
{
}

.panel .accordion-toggle 
{
    text-decoration: none;
    color: Black;
}
.panel .accordion-toggle:before {
    font-size: 25px;
    vertical-align: -3px;
}

.panel .accordion-toggle:not(.collapsed):before {
    content: "▾";
    margin-right: 0px;
}
.panel .accordion-toggle.collapsed:before {
    content: "▸";
    margin-right: 0px;
}

.container-maroon
{
    background-color: #641e1a;
}
.content-maroon, .icon-maroon
{
    color: white;
}
a.link-maroon, a.link-maroon:hover
{
    color:#df7a3f;
}
.form-question {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
}
/******************************************************** Assumptions ********************************************************/
.assumptions
{
    background-color:#fff;
    padding:20px;
}
.assumption-title
{
    border-top: 1px solid #ccc;
    padding-top:15px;
    text-transform:uppercase;
    font-weight:bold;
    margin-bottom:10px;
}
.assumptions summary
{
    font-weight:bold;
}