/* Those are the default styles */
.logonMainTable
{
    height: 100%;
    width: 100%;
}

.LogonFrame
{
    vertical-align: middle; /* @WSF-435 */    
    height: 420px; 
    width: 700px;   
}

/* @WSF-404 beg */
.LogonFooterStyle
    {
        text-align:left;
        width: 91%;
    }
/* @WSF-404 end */

#language-picker
{
    float: right; margin-top: 5px;
}

.logonTableData
{        
    vertical-align: middle;    
} 
 
/* global Styles for width between 651px and 1400px. */
@media (min-width: 631px) and (max-width: 1400px) 
{        
    .LogonFrame
    {
        height: 95%;
        width: 95%;   
    }
       
    #language-picker .x-btn-noicon .x-btn-small .x-btn-text
    {
        height: 1.2em;
    }  
}

/* Disable background for tooltip */
@media (min-width: 1px)
{    
    .x-tip-tr
    {  
        background-image:none !important;
        background-color:#E9F2FF !important;
    }

    .x-tip-tc
    {  
        background-image:none !important;
        background-color:#E9F2FF !important;
    }

    .x-tip-tl
    {  
        background-image:none !important;
        background-color:#E9F2FF !important;
    }

    .x-tip-bc
    {  
        background-image:none !important;
        background-color:#E9F2FF !important;
    }

    .x-tip-br
    {  
        background-image:none !important;
        background-color:#E9F2FF !important;
    }

}

/* Styles for 1024 screens */
@media (min-width: 631px) and (max-width: 1050px)
{
    #language-picker .x-btn button
    {
        font-size: 15px;
    }
    
    
    .cls-ToolTip
    {
        font-size: 12px;
    }
}

/* Styles for 1280 screens */
@media (min-width: 1051px) and (max-width: 1400px)
{
    #language-picker .x-btn button
    {
        font-size: 18px;
    }
    
    .cls-ToolTip
    {
        font-size: 14px;
    }
    
    .LogonFrame
    {
        width: 90%;
    }        
}

/* Styles for 1920 screens */
@media (min-width: 1401px) and (max-width: 1980px) and (max-height: 1120px)
{
    .LogonFrame
    {
        height: 90%;
        width: 85%;   
    }
   
    #language-picker .x-btn button
    {
        font-size: 20px;
    }
    
    .cls-ToolTip
    {
        font-size: 15px;
    }
           
    #language-picker .x-btn-noicon .x-btn-small .x-btn-text
    {
        height: 1.3em;
    }  
}

/* This area holds the minimum and maximum where the white area will be locked.*/

/* This will lock the height of the frame when height is too small. */
@media (min-width: 631px) and (max-height: 500px)
{
    .LogonFrame
    {
        height: 475px;        
    }   
}

/* This will lock the height of the frame when height is too big. */
@media (min-width: 631px)  and (min-height: 750px)
{
    .LogonFrame
    {
        height: 712.5px;        
    }   
}

/* This will lock the frame when width is too big and height is minimum 108px. */
@media (min-width: 1980px) and (min-height: 1080px) 
{
    .LogonFrame
    {
        height: 900px;  
        width: 1400px;      
    }   
}

/* This will lock the frame when width is too big but the height is less than 1080px. */
@media (min-width: 1980px) and (max-height: 1080px) 
{
    .LogonFrame
    {     
        height: 800px;
        width: 1678px;      
    }   
     
    #language-picker .x-btn button
    {
        font-size: 20px;
    }
    
    .cls-ToolTip
    {
        font-size: 15px;
    }
           
    #language-picker .x-btn-noicon .x-btn-small .x-btn-text
    {
        height: 1.3em;
    }  
}


/* Fixed styles for the maximum size of the Login page */ 
@media (min-width: 1980px) and (min-height: 1080px) 
{
     /* The picture of the safe, both for regular and one with link */ 
    .cls-Login-Image
    {
        width: 198px;
        height: 220px; 
    }
}

/* Global for small screens */
@media only screen and (max-width: 630px)
{
    .LogonFrame
    {
        margin-top: 7px;
        margin-bottom: 7px;
        height: auto;
        width: 100%;   
    }
    
    .logonTableData
    {
        vertical-align: top;        
        text-align:justify;
    }    
       
    #language-picker
    {
        margin-top: 2px;
    }
    
    #language-picker .x-btn button
    {
        font-size: 14px;
    }
    
    #language-picker .x-btn-noicon .x-btn-small .x-btn-text
    {
        height: 1.3em;
    }  
}

/* portrait stylesheet */
@media only screen and (max-width: 360px)
{                      
    .LogonFooterStyle
    {
        text-align:left;
        width: 82%;
    }
}