/*max-width: 320px (điện thoại di động, hiển thị chiều dọc)
max-width: 480px (điện thoại di động, hiển thị chiều ngang)
max-width: 600px (máy tính bảng, hiển thị chiều dọc)
max-width: 800px (máy tính bảng, hiển thị chiều ngang)
max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).*/


    /*---------
    @media all and (min-width: 300px ) and (max-width:600px) {
    ----------*/
    @media all and (min-width: 300px ) and (max-width:768px) {
        /*Popup Default*/
        .gctPop-up {
            max-width: 97%
        }
        /*MasterPage*/
       

        .clsFooterVersion, .clsFooterSlogan {
            line-height: 15px;
            text-align: center;
            padding-top: 3px;
            font-size: 8.5pt;
        }

        .clsFooterVersion {
            width: 110px;
        }

        .clsFooterSlogan {
            width: 185px;
        }
        /*Home*/
        .clsSubTextIcon {
            line-height: 20px;
            font-size:10pt
        }
        /*User Profile */
        .clsTableAlertManagement > tbody > tr > td {
            padding: 10px 7px !important;
        }
        .clsTableAlertManagement #tblZoning td {
            padding: 5px 0;
        }

        /*---------
        Car Info
        --------*/
        .qs-car-info table {
            width: 90% !important;
        }

        .clsHotPlateInfo table {
            width: 90% !important;
        }

        /*--------
        MHH
        ------*/
        .clsPopupSelectRadius {
            width: 90% !important;
        }
        /* More Option Popup*/

        .clsPopupButtonMoreOption {
            width: 90% !important;
        }
        /*Grid View*/
        .clsTableRecordItem, .lpq-report-grid-item {
            height: 80px !important
        }

        .clsCarImageList img {
            max-width: 88px;
            max-height: 58px
        }

        .clsTableRecordItem > div:nth-child(1) {
            width: 30%;
        }

        .clsTableRecordItem > div:nth-child(2) div, .lpq-report-grid-item > div:nth-child(3) div {
            line-height: 22px !important;
        }

        .clsPlateNumber {
            font-size: 13pt;
        }

        td.clsCarImageList {
            padding: 7px 5px;
        }

        .clsDivMoreButton {
            right: 70px !important;
        }

        .clsDivMoreButton, .clsDivFlagButton, .clsDivFlagButton1, .clsMoreButtonOnly {
            line-height: 80px !important;
            width: 70px !important;
        }

        /*-----------
        License PLate Scan
        ------------*/
        .ImgIconStatus {
            width: 30px !important;
            right: 8px !important;
        }
        /*---------------
        Stakeout--------*/
        /*.clsDivTabInner > div {*/
        .tabContain {
            width: 100px !important;
        }

        .tabLable {
            width: 75px !important;
        }

        .clsDivSlideVisits {
            width:calc(100% - 16px) !important;
        }

        .cssScannedItem div:nth-child(1) {
            width: 22% !important;
        }


        /*--------------
        Popup Audit
        -------------*/

        .clsDivAuditting {
            max-height: 400px;
        }

            .clsDivAuditting table {
                width: 100%;
            }

        /*--------
        Locate Abalysis
        ----------*/
        .clsSpanResultLocate {
            font-size: 10pt !important
        }
    }
    /*---------
   @media all and (min-width: 400px ) {
    ----------*/
    @media all and (min-width: 470px ) and (min-height:600px) {
        /*Home*/
        img.ImageIcon, img.ImageIcon_Menu {
            height: 77px;
            width: 77px;
        }

        .clsSubTextIcon, .clsSubTextIcon_Menu {
            font-size: 16pt;
            line-height: 22pt;
            padding-top: 5px;
        }        
        .clsNameUserLoginTopBar {
            width: 80%;
        }
    }
    /*-------
    max-width: 320px (điện thoại di động, hiển thị chiều dọc)
    -----------*/
    @media all and (max-width: 320px ) {
        /*Default*/
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            font-size: 10.5pt;
        }

        input[type="button"], input[type="submit"] {
            font-size: 9pt;
            height: 32px;
            padding: 0 20px
        }

        .clsTitle {
            height: 27px;
            line-height: 27px;
            font-size: 11pt;
        }
        .clsTitle.long {          
            font-size: 10pt;
        }
            .clsTitle .line {
                right: 37px;
                top: 6px;
                height:15px
            }
            .clsTitle .arrow {
              
                right: 10px;
                top: 7px;              
               
            }
                .clsTitle .arrow img {
                    height: 12px;
                }
            input[type="text"], input[type="password"], input[type="date"], input[type="time"], textarea, select {
                height: 20px;
                font-size: 10pt !important;
            }
        select {
             height: 30px; 
            padding: 0 5px;
        }
        select {
            background-size: 14px 9px;
         
        }
        .pnl-Criteria > div > table tr td {
            /*padding: 6px 0;*/
            font-size: 11pt;
        }
        /*MasterPage*/
        .clsHeaderMaster .clsSubTitle {
            padding: 5px 10px;
        }
        .clsDivIconMenu {
            width: 55%;
        }

            .clsDivIconMenu table tr td {
                font-size: 10pt;
                padding-bottom: 5px;
            }

        img.ImageIcon_Menu {
            height: 35px;
            width: 35px;
        }

        .clsSubTextIcon_Menu {
            font-size: 10pt;
            line-height: 13pt;
        }

        .clsHeaderMaster .clsTitlePage span {
            font-size: 18pt !important;
        }

        .clsLogoutImage_Menu {
            height: 20px
        }
        .clsBodyMaster {
        overflow:auto
        }
        .clsDivAuditting {
            max-height: 312px;
        }
            .clsDivAuditting table td:nth-child(1) {
                min-width: 110px;
            }
            .clsDivAuditting table td:nth-child(2), .clsDivAuditting table td:nth-child(3) {
                padding-left: 0
            }
        /*------
        Login
        ------------*/
        .clsLogoLoginPage img, .clsLogoRegisetrUser img {    
            min-width: 150px;
        }      
        /*Home*/
        .clsLblSystemUser {
            padding-bottom: 30px !important;
        }
        .clsLblSystemUser div, .clsLblSystemUser span {
            line-height: 30px;
            font-size: 18pt !important
        }
        img.ImageIcon {
            height: 35px;
            width: 35px;
        }
        .clsLogoLoginPage {
        padding-top:40px
        } .clsSubTextIcon {
            font-size: 10pt;
            line-height: 13pt;
        }

        .clsDivLoginInfoTop {
            /*line-height: 25px;*/
            /*height:25px*/
        }

        .clsLogoutImage {
            height: 17px;
            width: 15px;
            margin-top: 3px;
        }

        .clsLogOutText {
            font-size: 10pt;
        }
        .clsButtonHeader > div {
            margin-left: 15px;
            font-size: 9pt;
        }

        .clsNameUserLoginTopBar {
            font-size: 10pt;
        }

        .clsDivNotificatiobHotListAlert {
            line-height: 10px;
        }

            .clsDivNotificatiobHotListAlert span {
                font-size: 9pt;
            }
        /*----------
        User Profile
        -------------*/
        .clsTableUserInfo td {
            padding: 3px !important;
        }

        .clsOnOff {
            margin: 5px auto;
        }
        .clsTableAlertManagement > tbody > tr > td {
            padding: 10px 7px;           
        }
        /*Locate Analysis*/
        .txtInclined a {
            margin-left: 5px;
        }

        .LineContain {
            height: 127px;
        }

        /*---------
        Car Info
        --------*/
        .qs-car-info table div {
            font-size: 15pt !important;
        }

        .clsHotPlateInfo table div {
            font-size: 15pt !important;
        }
        /*--------
        Mobile Hit Hunter
        ---------*/
        .clsDivSlideHitMap div {
            line-height: 35px !important
        }

        .clsDivSlideHitMap img {
            height: 29px !important
        }
        .clsHitTypeNote > div > span {
            font-size: 8pt !important;
        }
        #pnlMHHMapping #lblTotal {
            font-size: 8.5pt;
            white-space:pre-wrap
        }
        /*-----------------
        License Plate Query
        -------------------*/
        .clsTxtPlateNumber {
            font-size: 16pt !important
        }

        .clsTxtDate, .clsTxtTime {
            height: 20px !important;
            width: 96px !important
        }

        .clsTableTimeRange {
            margin: 5px auto;
        }

        .clsTableCriteria tr td {
            /*line-height: 30px !important;*/
        }
     
        .clsTableSaveSearch input[type="text"] {
            width: 120px;
        }
        .clsTableSearchPlate td {
            padding: 10px 0 0 !important;
        }
        .clsTableSearchPlate tr:last-child td {
            padding-bottom: 10px !important;
        }
        /*--------
        Locate Abalysis
        ----------*/
        .clsSpanResultLocate {
            font-size: 9pt !important;
            font-weight: normal !important;
        }
        /*Stakeout*/
        .clsDivSlideVisits {
        width:calc(100% - 16px) !important
        }
    }
    

    @media all and (max-height: 570px) {

        /*master*/
        .clsHeaderMaster {
        height:60px
        }
            .clsHeaderMaster .clsTitlePage {
            line-height:30px
            }
            .clsHeaderMaster .clsSubTitle {
                padding: 5px 15px;
            }
        .clsSubTitle > table td {
        
        }
        .clsDivSlideVisits, .clsDivSlideVisits, .clsDivSlideHitMap, .clsDivIconMenu {
            top: 60px;
            bottom: 40px;
            bottom:0
        }
        .clsHeaderMaster .clsTitlePage span {
            font-size: 15pt !important;
        }
        .clsFooterMaster .clsTableButtonBottom, .clsFooterMaster {
            height: 40px
        }
            .clsFooterMaster .clsTableButtonBottom td {
                padding:0
            }
        .clsDivAuditting {
        max-height:300px
        }
        .clsHitTypeNote > div > span {
            font-size: 8pt !important;           
        }
        #pnlMHHMapping #lblTotal {
            font-size: 8.5pt;
            white-space: pre-wrap
        }
    }

@media all and (min-width: 767px ) {
    .clsContent {
        width: calc(100% - 40px)
    }
}

@media all and (orientation:landscape) and (min-width: 1366px ) {
    .TableHomeMenuLayout > div {
        width: 33%;
        height: 49%;
    }
    .clsContent {
        width: 70%
    }
}
@media all and (orientation:landscape) and (min-width: 1024px ) {
    .TableHomeMenuLayout > div {
        width: 33%;
        height: 49%;
    }
}

@media all and (min-width: 1024px ) {
    body {
        background-image: url("../../images/masterpage/Vigilant_LEARN_RegularUser_Desktop.png?v=7.0.083118");
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .clsLogoLoginPage img {
    width:300px
    }   
}