/* Responsive CSS
--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width:991px){
    .reporting-search { width: 100%; }
}
@media only screen and (max-width:767px){
    .login-page, .main{ min-height: 100%; }
    .lite-login{ height: auto; width: 92%; }
    header { padding: 20px; }
    header .logo { max-width: 65%; }
    header .logo img { max-width: 100%; height: auto; }
    header .btn.btn-primary { padding: 6px 10px; font-size: 13px; }
    header .btn.btn-primary img { max-width: 13px; margin-right: 3px; }
    .content-box { padding: 30px 20px; }
    .reporting-search { padding: 22px 20px 30px 20px; margin: 0 0 20px 0; }
    .reporting-search .btn.blue { margin-top: 0; }
    .reporting-search #Reset.btn.blue { margin-top: 15px; }
    .total-att label { font-size: 16px; }
    .content-box .inner-content { padding: 20px; margin: 0; }
    .content-box h1 { margin: 0 0 15px 0; font-size: 30px; }
    .content-box .enter-info { padding: 0 0 20px 0; line-height: 1.3; font-size: 17px; }
    .video-content iframe { max-height: 300px; }
    .video-content { margin: 0 0 20px 0; }
    .video-text { font-size: 15px; }

    /* width */
    .table-responsive::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    /* Track */
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1; 
    }
     
    /* Handle */
    .table-responsive::-webkit-scrollbar-thumb {
        background: #888; 
    }

    /* Handle on hover */
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555; 
    }

}
@media only screen and (max-width:480px){
    .login-page, .forgot-password{ padding: 15% 15px;}
    h1.login-head{ margin: 20px 0;}
    h2.head{ font-size: 16px; line-height: normal;}
}

/* Responsive CSS End
--------------------------------------------------------------------------------------------------*/