#nav,#tab,.frontPage,#footer,.body{

    margin:auto;

}









@media only screen and ( min-width: 1024px){

    #nav,#tab,.frontPage,#footer,.body,#main{

        width:1024px;

    }

}

@media only screen and ( min-width: 1201px) and ( max-width: 1500px){

    .search-lg,.pending-for-appointmant-lg,.pending-for-visit-lg,.job-pending-lg,

    .multi-service-lg,.pending-reports-lg,.completed-reports-lg,.job-pending-history-lg,

    .device-history-lg,.model-history-lg,.visit-history-lg,.installed-base-lg,.report-details-lg,

    .down-time-lg,.repair-steps-lg{

        width:85% !important;

    }

}

@media only screen and ( min-width: 1024px) and ( max-width: 1200px){

    .search-lg,.pending-for-appointmant-lg,.pending-for-visit-lg,.job-pending-lg,

    .multi-service-lg,.pending-reports-lg,.completed-reports-lg,.job-pending-history-lg,

    .device-history-lg,.model-history-lg,.visit-history-lg,.installed-base-lg,.report-details-lg,

    .down-time-lg,.repair-steps-lg{

        width:90% !important;

    }

}

@media only screen and ( min-width: 1500px){

    .search-lg,.pending-for-appointmant-lg,.pending-for-visit-lg,.job-pending-lg,

    .multi-service-lg,.pending-reports-lg,.completed-reports-lg,.job-pending-history-lg,

    .device-history-lg,.model-history-lg,.visit-history-lg,.installed-base-lg,.report-details-lg,

    .down-time-lg,.repair-steps-lg{

        width: 1300px !important;

    }

}




@media only screen and ( max-width: 1080px){
    #tab ul  {
        display: flex;
    }
    #tab ul > a {
        flex: 0 0 auto;
    }
    
    #tab ul li{
        float: none;
        min-width: auto;
        font-size: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }

    header,#nav,#tab,.frontPage,#footer,.body,#main{

        width:90%;

    }

    #header-text{ font-size:20px; }

    .body header,.body #nav,.body #tab,.body .frontPage,.body #main{

        width:100%;

    }

    

    #tab ul li div{

        width: 100%;

        height: auto;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }

    .section{

        float:none;

        margin:30px auto;

    }

    .section:nth-child(2n-1){float:none !important}

    .section:nth-child(2n){float:none !important}

    .welcome-SMT{padding-left:70px}

    .help{ min-height:80px;font-size:12px  }

    .edit-logo{

        float:none;

    }

    .myCellLeft,.myCellRight{ width:100%; }

    .generalForm .myCell,.caseForm .myCell{display: block; line-height:12px; line-break: auto;}

    .title{font-size:12px;}

    .browseFilesFirstCell{ width: 0 !important; }

    .disabledFields {

        height: 25px !important;

        max-width: 100% !important;

        background: #ccc;

        line-height: 25px;

        padding-left: 0 !important;

        text-align: left;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

        font-size: 13px;

    }

    .notesForm{ width:100% !important; }

    .notesBlock{ float: left; margin-right:20px; }

    .notesCalendar,.notesCalendar #calendar{ width: 100% !important; }

    .filter-div div{ font-size: 12px }

    

}



@media only screen and ( min-width: 768px) and ( max-width: 1080px){

    #footer div{

        font-size: 12px;

    }

}

@media only screen and ( max-width: 767px){

    

    .top-menu .myCell span{

        display:none

    }

    #header-text span{ display: none; }

    #footer div{

        width:100%;

        float:none;

        text-align: center;

    }

    .managmantSection{width:100% !important;}

    .add-sc-form{ width:100% !important;float:none !important; }

    .add-sc-form.left td:last-child{ border-right:0 }

    .filter-div div{ width: 200px !important }

    

}

@media only screen and ( max-width: 768px) and (min-width=710px){

    .filter-div div input[type=text],.filter-div div input[type=date]{ width: 90px !important }

}

@media only screen and ( max-width: 710px){

    .searchInResults,.filter-div{ width:210px !important; display: block !important; }

    .searchInResults li,.filter-div div{

        width:190px !important;

        text-align:left !important;

        float: none !important;

        font-size:12px;        

    }

    .date-tbl thead td div{ font-size:12px !important; }

    .info_top .left-table,.info_top .right-table{ float: none !important; margin: auto }

}



@media only screen and ( max-width: 650px){

    #forgot-password{

        width:70%;

    }

    .welcome-SMT{padding-left:50px}

    .help{ min-height:65px;font-size:12px }

    .gallery li div,.circle7 div{

    	margin-top:80px;

        font-size:12px;

        line-height:12px;

    }

    #header-text{font-size:20px;}

    .circle7 div{ margin-top: 60px !important; background-size:50% !important }

    .browseRecordFiles .myCell{ float:left; } 

    .notesBox{ float: left }

    .fc-header-title h2{ font-size:15px }

    

}







@media only screen and ( max-width: 500px){

    

    

    *{display: none;}

    html,body,#screen-problem,.screen-icon{

        display:block

    }

    .screen-icon{

        width:250px;

        height:250px;

        

        background-size: cover;

        margin:auto;

        

    }

    #screen-problem{

        font-weight:bolder;

        color:red;

        width:100%;

        text-align:center;

        font-size:2em;

        display:block;

    }

    body{

        background:url("../images/Fit_to_screen.png") #e5e5e5 center no-repeat;

    }

}