﻿/* Responsive */
.logo-header {
    width: 110px;
    height: 116px;
    /** background: #929292; Removed Background property to align Header Logo with Ergon Retail site, by B.Petersen 2 July 2020**/
    /*margin-left: -55px; Added margin-left properties to align Header Logo with Ergon Retail site, by B.Petersen 3 July 2020**/
}   
  
@media (max-width:991px)
{
    .logo-header {
        height: 100%;
        width: auto;
        position: absolute;
        /*margin-left: 0px;
        /**Added margin-left properties to align Header Logo with Ergon Retail site, by B.Petersen 3 July 2020**/
        /*top: 75px;*/
    }
    .logo-site {
        position: absolute;
        height: 61px;
        width: 50px;
        margin-left: 0px;
        /** left: 0px; Removed left property to align Header Logo with Ergon Retail site, by B.Petersen 3 July 2020**/
        top: 73px; /**Altered top property to align Header Logo with Ergon Retail site, by B.Petersen 3 July 2020**/
        /**Added Top properties to align Header Logo with Ergon Retail site, by B.Petersen 2 July 2020**/
    } 
    .title-icon-container
    {
        display: none;
    } 
    .application-name,.application-description
    {
        margin-left:70px;
    }
    .border
    {
        padding:0px;
    }
    .border-gap
    {
        display:inline-block;
    }
    #errors_container
    {
        padding:0px;
    }    
    #errors_container
    {
        padding-bottom:10px;
    }    
    .nav-accessible
    {
        min-width: 30px;
        border-left:none;
    }    
}
@media (max-width:767px)
{
    body {
        background:#ededed;
    }
    .container-fluid-0
    {
        padding:0;
        margin:0;
    }
    /******************************************************** Header elements ********************************************************/
    #header-container
    {
        margin:0;
    }
    /******************************************************** Main body ********************************************************/
    #main-container{ width: 320px; margin:auto;}
    #errors-container{left: 0;width:100%;}
    #navbar-container, #content-container{top:0;left:0;margin-top:0px;}
    #navbar-container{float:left;width:85px;height:100%;}
    #content-container{float:left;background-color:transparent;width:235px; min-height: 720px;margin-bottom:15px;}
    footer{ width: 320px; margin:auto;}

    /******************************************************** Top nav ********************************************************/
    #navbar{position: relative;height:800px;width:85px;margin-left:-40px;padding-top:0px;}
    #navbar ul{white-space:nowrap;}
    #navbar li 
    {
        margin: 0;
        list-style: none;
        position: static;
        top: 0;
        display:inline-block;
        height:120px;
        border-bottom:1px solid #256e30;
        border-right:none;
    }
    #navbar li:last-child
    {
        border-bottom:none;
    }
    #navbar li, #navbar a
    {        
        width: 85px;        
        display: block;        
    }


    /******************************************************** Form ********************************************************/
    .question-container{border: 1px solid #e7e8ea;background-color: #f1f2f5;float: left;width:100%;}
    .formbody-content{padding:0px;background-color:transparent;}
    .button-container        
    {
        padding-top:15px;
        padding-bottom:15px;
        width:235px; 
        height:55px   
    }
    .button-container-large
    {
        width:320px; 
        margin-left:-85px;
    }
    .label-container{float: left;font-size: 1.0em;color: #333;text-align: right;width:100%;min-height:60px;}
    .label-help{font-size: 0.8em;color: #333;text-align: right;}
    .input-container{ float: right;width:80px;}
    .input-textbox{border:1px solid #ccc;background-color: #e4e6eb;font-size: 1.3em;height: 30px;width: 100%;}       
    /* plus and minus buttons */
    .plus-minus-button
    {
        width:40px;
    }
    
    /******************************************************** Results Graph ********************************************************/
    #YourResultsContent{width:320px;background-color:#fff;}
    #ContentLeft{float:left;background-color:transparent;width:230px;}
    #ContentRight{float:left;margin-left:10px;width:100%;margin-top:15px; padding-bottom:15px;margin-left:-85px;background-color:transparent;}    
    #results-graph
    {   
        clear:both;
        float:left;
        height:720px;
        width:150px;    /* sets width of bar graph */
        background-color:#fff;
    }
    #results-graph li
    {   
        height:120px;
        border-right:0;
        width:100%;        
    }
    #results-graph div {min-height:120px;min-width:60px;height:120px;}
    .graph-font{position:relative;font-size:1.5em;text-align:right;vertical-align:middle;bottom:0;height:120px;line-height:120px;width:65px;float:right;
        padding-right:5px;}   
             
    /* results category total */
    #results-total
    {
        float:right;
        height:720px;
        background: #fff;
        background-color: rgba(255,255,255,0.7);    
        margin-bottom:0px;
        width:80px; 
    }
    #results-total li
    {    
        list-style:none;
        float:left;
        width:80px;
        border-right:none;
        min-height:120px;             
    }    
    .subtotal-font{font-size:1.0em;font-weight:bold;color:#244926;text-align:center;position:absolute;line-height:120px;width:80px;}
    
    /* results total per day */
    #results-totalperday
    {
        float:left;
        height:120px;
        display:inline-block;
        background: #E4F2E6;  
        width:320px;
        margin-left:-85px;   
        margin-bottom:0px;
    }
    #results-totalperday li
    {    
        list-style:none;
        float:left;
        min-height:60px;
    }
    #results-totalperday li:nth-child(1) {width:0px;}
    #results-totalperday li:nth-child(2) {width:0px;}
    #totalPerDayLabel, .total-font-label {width:320px;}
    #totalPerDay, .total-font-value {width:320px;font-size:2.0em;} 
    .total-font{font-size:1.0em;font-weight:bold;color:#244926;position:absolute;text-align:right;line-height:60px;padding-right:20px;}
    
    .results-button-container
    {
        background-color:#ededed;
        padding-top:15px;
        margin-left:-85px;
        width:320px; 
        height:55px   
    }    
    
    /******************************************************** Results - recommendation ********************************************************/
    /* Email results */
    .emailreport-title label
    {
        width:100%;
    }
    .input-textbox-email{width: 342px;height: 35px;}
    
}