/********************
*  Responsive media queries *
********************/

.ui-mobile label, div.ui-controlgroup-label 
{
    font-weight: 500;
}


/* Error page styles. Should work for all media queries */
.grid-container-error {
    width: 450px;
    max-width: 450px;
    margin: 20px auto;
    text-align: center;
    display: grid;
    grid-template-columns: 100%;
}

    .grid-container-error h3 {
        color: #666666;
        font-size: 1.5rem;
    }

    .grid-container-error i {
        color: #FFCC00;
    }


 /*smaller screen devices or iframe mode*/
@media only screen and (max-width: 850px) {

  /* non mobile tabs
    ----------------------------------------------------------*/
    
    .info-bar .tab 
    {
        font-size: 1.0em;
    }
    
    .info-bar span 
    {
        font-size: 1.0em;
    }
    
    
    
    /* header
    ----------------------------------------------------------*/
    
   .display-inline { display:inline; }

    label, label.ui-input-text
    {
        font-size: 1em;
        font-weight: bold;
    }
    
    input[type="text"] 
    {
        width: 250px;
    }

    /* login */

        #loginForm {
            font-size: .85em;
            width: 230px;
            width: 100%;
            text-align: center;
        }

        #loginForm ul {
            margin: 5px 0;
            padding: 0;
        }

        #loginForm li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #loginForm a {
            background: none;
            color: #999;
            font-weight: 600;
            margin: 2px;
            padding: 0;
        }

        #loginForm a:hover {
            color: #333;
        }
        
        #loginForm .validation-error {
            display: block;
            margin-left: 15px;
        }  

    /* main layout
    ----------------------------------------------------------*/
     
    .main-content,
    .featured + .main-content {
        background-position: 10px 0;
    }

    .main-content {
        padding-top: 10px;
    }
    
    .header .content-wrapper {
         padding-top: 0px;
         text-align: center;
    }
  
     /* features */
     section.feature {
        float: none;
        padding: 10px;
        width: auto;
     }

    /* forms */
    input {
        width: 90%;
    }
    
   Label.checkboxPadding { padding-left: 0px;}
   
   .ui-checkbox Label { padding: 10px 10px 10px 35px;}
                
    input[type="text"]           { width: 230px; font-size: 0.9em} 
    
    /* -- Messages -- */
    
    .validation-summary-messages { text-align: center; padding-bottom: 10px;}
    .status-message              { text-align: center; padding: 10px 0px 0px 0px; float: none;}
    
}

/* ------- To display Logo on larger mobile/tablet devices instead of header text ----------- */

#mobileLogo {  display: none; }

@media only screen and (max-width: 750px) 
{
    /* non mobile tabs
    ----------------------------------------------------------*/
    
    .row 
    {
       font-size: 0.9em
    }
    .info-bar .tab 
    {
        font-size: 1em;
    }
    
    .info-bar span 
    {
        font-size: 1em;
    }
    
    .bookingHead h3 
    {
        font-size: 1em;
    }
    
}

@media only screen and (max-width: 850px) 
{
 .row 
    {
       font-size: 0.9em
    }
    

}


/* controls too big for portrait mode in small devices */
@media only screen and (max-width: 480px) and (orientation: portrait)
{  
    input[type="text"] 
    {
        width: 100%;
        font-size: 0.8em
    }
    
     h3 { font-size: 1.4em; }
     
    .ui-btn-text { font-size: .8em; }
    
     #loginForm {
            font-size: .85em;
            width: 200px;
     }
     
    .footer 
    {
        font-size: .8em;
        background-color: white;
    }

    .ui-footer-fixed  {background-color: white; z-index:100;}
    
    .small {width:100%!important; clear:both;}
}

/* controls too big for portrait mode in small devices */
@media only screen and (max-width: 300px) and (orientation: portrait)
{  
    input[type="text"] 
    {
        width: 200px;
        font-size: 0.8em
    }
}