#buttonResetPanel
{
    background-image: url("../Pix/Layout/resetPanelButtonBackground.png");
    background-repeat: no-repeat;
    background-position: 7px 8px;
    background-color:transparent;
    margin-bottom:10px;
    position:relative;

    border:0px;
    cursor:pointer;
    
    width: 35px;
    height: 35px;
    border-radius: 3px;
    background-color: #2ba300;
    }
    
 #buttonResetPanel:hover
{
    background-color: #2e7a13;   
    
    }   
    
.buttonResetPanelLabel
{
    font-size: 0.8em;
    font-size: 1.2em;
    line-height: 1.5em;
    color: #515151;
    margin-left:15px;
    position:absolute;
    top:10px;
    top:5px;
    }    
    


.applicationPanel
{
    margin-left:auto;
    margin-right:auto;
    position:relative;
    padding:20px;

    min-width: 280px;
    max-width: 724px;
    min-height: 507px;   
    border-width: 3px;
    border-style: solid;
    border-color: rgba(36,35,35, 0.5);
    background-color: rgba(255,255,255, 0.9);
}
    
.applicationPanel .box
{    
    
    }

.applicationPanel .content
{
    position:relative;
    }
  


#chooser
{    
    min-width:200px;
    display:flex;
    flex-direction: column;
    }
    
 
    
#chooser .row
{
    display:flex;
    flex-direction: row;
    }    
    
@media (max-width: 500px)
{
    #chooser .row
    {    
        flex-direction: column;
        
        }
} 
    
#chooser .hint
{
    padding-top: 12px;
    margin-right: 15px;

    font-size: 0.8em;

    line-height: 1.5em;
    color: #515151;
    
    flex: 0 1 20%;
    }
    
#chooser .line
{
    margin-bottom:30px;
    margin-top:20px;
    margin-right:0px;

    height:1px;
    border-bottom:1px solid #cccccc;
    
    flex:0 1 100%;
    }    


#chooser .letterChooser
{
 
    background-color: #2ba300;

    padding-top:10px;
    padding-bottom:10px;
    
    flex: 0 2 80%;
    
    display: flex;
    flex-direction: row;

    }
   
    
#chooser .shellStep
    {
        flex: 0 1 20%;
        
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: baseline;
        align-items:flex-start;

        }
        

    
#chooser .letterChooser .shellStep label
{   
    transform: rotate(-90deg);
    transform-origin: 0 0;

    color: #ffffff;
    font-size:16px;
    font-weight:normal;
    margin-top:50px;
    padding-top:15px;
    margin-left:0px;

    }     
    

    
    
#chooser .letterChooser .stepIndicator
{


    font-size:72px;
    font-weight:bold;
    color: #ffffff;
    position:relative;
    top:-10px;
    top:-15px;
    right:8px;
    } 
    
       
@media (max-width: 360px)
{
    #chooser .letterChooser .stepIndicator
    {    
        padding-right:0px;
        position:relative;
        right:5px;
        }
}  

#chooser .letterChooser .box
{
    flex: 0 1 80%;
    
    min-width:120px;
    max-width:375px;
    max-width:100%;
    margin-left:0px;
    margin-right:10px;

    background-color: #ffffff;
    box-shadow: inset 2px 2px 7px 0px #cacaca;  
    
    display:flex;
    justify-content: center;

}



#chooser .letterChooser .content
{    
    padding-top:10px;
    padding-bottom:6px;
    padding-left:10px;
    width:376px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    }
    
    
@media (max-width: 670px)
{
    #chooser .letterChooser .content
    {    
        width:336px;
        
        }
} 
    
@media (max-width: 610px)
{
    #chooser .letterChooser .content
    {    
        width:296px;
        
        }
} 

@media (max-width: 550px)
{
    #chooser .letterChooser .content
    {    
        width:256px;
        
        }
} 

@media (max-width: 500px)
{
    #chooser .letterChooser .content
    {    
        width:336px;
        
        }
} 

@media (max-width: 480px)
{
    #chooser .letterChooser .content
    {    
        width:296px;
        
        }
} 


@media (max-width: 440px)
{
    #chooser .letterChooser .content
    {    
        width:256px;
        
        }
} 

@media (max-width: 400px)
{
    #chooser .letterChooser .content
    {    
        width:216px;
        
        }
} 

@media (max-width: 360px)
{
    #chooser .letterChooser .content
    {    
        width:176px;
        
        }
} 



#chooser .letterChooser .content .tile
{
    margin-bottom: 5px;
    margin-right: 5px;
    height:35px;

    
    background-color: #2ba300;

    flex: 0 1 35px; 
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    cursor: pointer;
    }
    
#chooser .letterChooser .content .tile:hover
{
    background-color: #2e7a13;   
    }       

#chooser .letterChooser .content .tile .letter
{
    font-family:'Fira Sans', Arial;
    color:#FFFFFF;
    font-size:0.9em;

    text-align:center;     
    
    }
    
#chooser .letterChooser.disabled 
{    
    background-color: #878787;
    }

#chooser .letterChooser.disabled .stepIndicator
{    

    }

#chooser .letterChooser.disabled .content .tile
{
    cursor:default;  
    background-color: #878787; 
    }    

#chooser .letterChooser.disabled .content .tile.active
{   
    background-color: #505050;   
}

   

#chooser .keywordChooser
{

    background-color: #2ba300;

    padding-top:10px;
    padding-bottom:10px;
    
    height:85px;
    
    flex: 0 2 80%;    
        
    display: flex;
    flex-direction: row;
}    
    
#chooser .keywordChooser .shellStep label
{ 

    transform: rotate(-90deg);
    transform-origin: 0 0;

    color: #ffffff;
    font-size:16px;
    font-weight:normal;
    margin-top:50px;
    padding-top:15px;
    }        
    
#chooser .keywordChooser .stepIndicator
{   

    font-size:72px;
    font-weight:bold;
    color: #ffffff;

    position:relative;
    top:-10px;
    top:-15px;
    right:8px;
    }    
  
@media (max-width: 360px)
{
    #chooser .keywordChooser .stepIndicator
    {    
        padding-right:0px;
        position:relative;
        right:5px;
        }
}  



#chooser .keywordChooser .sandglass
{
    position:absolute;
    top:0px;
    background-image: url("../../Pix/Layout/Sandglass.gif");    
    background-repeat: no-repeat;
    background-position: center center;
    width:100%;
    height:70px;
    display:none;    
    }
    
   

    
#chooser .keywordChooser .box
{
    flex: 0 1 80%;
    
    min-width:120px;
    max-width:375px;
    max-width:100%;
    margin-left:0px;
    margin-right:10px;  

    background-color: #ffffff;
    
    display:flex;
    justify-content: center;

    border:1px solid #427e9d;  
    }
    



#chooser .keywordChooser .content
{        
    margin-left:0px; 
    margin-right:0px;
    height:inherit; 
    width:100%;     
    overflow:hidden;
}

#chooser .keywordChooser .content .alignment
{

    height:inherit;
    width:100%;
    vertical-align:middle;    
    line-height: 1em;      
    }

#chooser .keywordChooser .content select
{
   width:100%;
   padding:20px;

   min-width:150px; 
   font-size:1.1em;
   
   
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border:none;
   border-radius: 0;
   background-color: #ffffff;
   border: 1px solid #bbb;
   background-image:url(../Pix/Layout/select-arrow.png);

   background-position: right;
   background-repeat: no-repeat;
    }  

select::-ms-expand {
    display: none;
}

#chooser .keywordChooser.disabled 
{        
    background-color: #878787;  
}



#output
{ 
    min-width: 280px;
    max-width: 724px;   
     
    font-size:0.8em;
    line-height:1.2em; 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;                                 
    display:none;
    margin-bottom:-15px;
    margin-right:0px;

    }

#output .note
{
    margin-bottom:10px;
    color: #515151;
    }
    
#output .line
{
    margin-bottom:15px;
    margin-top:25px;
    margin-right:0px;
    min-width: 240px;
    max-width: 719px;
    height:1px;
    border-bottom:1px solid #cccccc;
    }     

#output .information
{    
    }

#output .information .header
{
    width:100%;
    height:29px;
    height:40px;
    margin-bottom: 15px;
    background-color: #2ba300;
    
    display:flex;
    justify-content:flex-start;
    align-items:center;
    }
    
#output .information .header .content
{

    color: #FFFFFF;
    padding-left:10px;
    }    
    
#output .information .doubleColumn .box
{    
    margin-right:0px;
    margin-bottom:15px;  
    
    display:flex;  
    }    

@media (max-width: 500px)
{
    #output .information .doubleColumn .box
    {    
        flex-direction:column;
        }
} 
    
#output .information .doubleColumn .box .rightColumn
{    
    flex:0 1 25%;
    }
    

       
    
#output .information .doubleColumn .box .rightColumn .box
{
    padding: 10px;
    border:1px solid #cfcfcf;
    margin-bottom:15px;
    }
    

 #output .information .doubleColumn .box .rightColumn .box:last-child
 {
     margin-bottom:0px;
     }             

#output .information .doubleColumn .box .rightColumn .content img
{
    margin-top:0px;
    margin-bottom:10px;
    width:120px;
    height:120px;  
    display:block;
    margin-left:auto;
    margin-right:auto;
    } 
    
#output .information .doubleColumn .box .rightColumn .content .caption
{
    text-align:center;
    line-height:1.5em;
    overflow:hidden;  
    }     

#output .information .doubleColumn .box .rightColumn .content h3
{
    font-size: 0.9em;
    color: #2ba300;  
    }

#output .information .doubleColumn .box .rightColumn .content, #output .information .doubleColumn .box .leftColumn .content
{
    line-height:1.5em;
    overflow:hidden;  
    width:100%;
    }    

#output .information .doubleColumn .box .leftColumn
{
    
    flex:1 0 50%;
    margin-right:20px;
    padding: 10px;
    
    bordeR:1px solid #cfcfcf;
    }  
    
@media (max-width: 500px)
{
    #output .information .doubleColumn .box .leftColumn
    {    
        margin-right:0px;
        margin-bottom:15px;
        }
}        
    
#output .information .doubleColumn .box .leftColumn .content
{
    } 
    
    
/* Information singleColumn */

#output .information .singleColumn .box
{    
    
    padding: 10px;
    bordeR:1px solid #cfcfcf;
    margin-right:0px;   
    margin-bottom:15px;
    }    

#output .information .singleColumn .content img
{
    width:25px;
    height:35px;
    margin-right:5px;     
}

#output .information .singleColumn .content .description
{    
    margin-right:80px;
}
    
            
    
#output .information .appendix .header
{
    position:relative;    
    cursor:pointer;
    margin-bottom:15px;
    padding-right:10px;
    }
    

#output .information .appendix .header .centerRight
{
    background-image: url("../Pix/Layout/DetailHeaderCenterRight.png");
    background-size:21px 21px;
    background-repeat: no-repeat;
    background-position: right; 
    
    width:inherit;
    height: 29px;
    }

 
#output .information .appendix .header .centerRight.open
{
    background-image: url("../Pix/Layout/DetailHeaderCenterRightOpen.png");    
    }    
 
  
#output .information .appendix .header .content
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    color: #FFFFFF;
    height:inherit;
    padding-left:10px;
    } 
    
#output .information .appendix .header .sandglass
{
    position:absolute;
    top:-20px;
    background-image: url("../../Pix/Layout/Sandglass.gif");    
    background-repeat: no-repeat;
    background-position: center center;
    width:100%;
    height:70px;
    display:none;    
    }    
    
#output .information .appendix .slider
{
    display: none;
    }     
    
.foot 
{
    width:100%;
    color:#5c5c5c;
    font-size: 0.8em;
    text-decoration:none;  
    display:block;
    text-align:right;
    margin: 0px 0px 10px 0px;
    padding-top:5px;

}

.foot:hover{
    text-decoration:underline;
}