@media (max-width:1199px){
    body { max-width: 100vw; overflow: visible!important}
    .navbar-fixed-top .navbar-brand a{display: flex; align-items: flex-end!important}
    .navbar-fixed-top .navbar-brand img { width: 50px; height: auto!important}
    #header .slogan { margin-top: 0!important; }
    .auth-box {
        width: 90vw; max-width: none;max-height: 90vh; overflow: auto;
    }  

    #menuMain {
        position: fixed; left: -100%; top: 0; width: 80vw; z-index: 99; height: 100vh; overflow: auto; transition: 0.5s all ease-in-out;
    }
    #menuMain.active { left: 0; }
    #menuMain ul { display: flex; flex-direction: column; padding-bottom: 50px;}
    #menuMain ul li a { display: flex; align-items: center; font-size: 14px; flex-wrap: wrap}
    #menuMain .nameMenu { display: block; margin-left: 10px}
    #menuMain .nameMenu:first-child { margin-left: 0; margin-right: 10px}
    #menuMain ul li a .fa {position: static}
    #menuMain ul li { display: flex;  position: relative; flex-direction: column; white-space: normal}
    #menuMain ul li:hover > ul {display: none}
    #menuMain .openSub { display: flex; color: #fff; width: 30px; height: 40px; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; z-index: 2;}
    #menuMain .openSub.active .fa:before {content: "\f0d8"}
    #menuMain .openSub i {font-size: 20px!important}
    #menuMain ul li ul { position: static; width: 100%; padding-left: 15px; border-left: none!important}
    #btnMenuRes.active i:before {
        content: "\f00d" 
    }

    #wrapper { flex-direction: column; display: flex;}
    #flexBody { flex: 1; overflow: auto}
    #main-content { padding: 0; max-height: 100%; height: auto; float: none;}
    #notifications { z-index: 100;right: auto; left: -100%;width: 80vw;height: 100vh; top: 0; overflow-x: visible; transition: 0.3s all ease-in-out}
    #notifications.active {  left: 0; }
    #overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 50; background: rgba(0, 0, 0, 0.8); display: none}
    .offNofi { position: fixed; bottom: 10px; right: 10px; color: #fff; font-size: 15px;z-index: 101; background: #333; padding: 4px 5px; display: none}
    #notifications.active .offNofi { display: block; font-size: 12px;} 
    #main-content .container-fluid {padding-top: 10px}
    .table-responsive table th {min-width: 250px}
    .modal .table-responsive table th {min-width: auto}
    .w80 { width: 95vw; max-width: 100vw;}
    .noteBar >* {display: inline-flex}

    #main-content #searchForm { width: calc(100% - 15px)!important}
    #main-content #searchForm .row >*:not(:last-child) { width: 50% !important; max-width: none; flex: none; margin-bottom: 10px;}
    #main-content #searchForm .row >*.padL-0 { padding-left: 15px; padding-right: 0}
    #main-content #searchForm .collapse .row >*  {width: 50%}
    .loading-message {white-space: nowrap}
}

@media (max-width:991px){ 
    .auth-box .flex .card {width: 70%}
}

@media (max-width:767px){ 
    .w80 {width: 100vw}
    .modal form .row >*, .modal form .row >*.text-right { width: 100% !important; text-align: left!important}
    .modal-dialog { margin: 0;}
    .modal form .form-group {margin-bottom: 10px}
    .modal form table { max-width: 100%;}
}

@media (max-width:479px){ 
    .auth-box .flex {
        display: flex; flex-direction: column;
    }
    .auth-box .flex>* { width: 100%!important;}
    .auth-box .card .body { padding: 0; border: none; margin-top: 10px;}
    #menuMain { width: 85%; padding: 10px 5px;}
    #menuMain ul li a { font-size: 13px;}
    .navbar-brand {white-space: normal}
    #notifications {width: 85vw}
    .modal-body { padding: 5px;}

    #main-content .block-header .flex { flex-direction: column; align-items: flex-start!important}
    #main-content .block-header .flex .breadcrumb { margin-bottom: 10px!important; margin-right: 0!important}
    #main-content .block-header .flex .tabHead { display: table-cell; overflow-x: auto; max-width: 100vw; padding: 0!important}
    #main-content .block-header .flex .tabHead li {margin-bottom: 0}
    .navbar-fixed-top .navbar-brand {margin-right: 0}
    .navbar-fixed-top .navbar-brand a { display: flex; flex-direction: column; align-items: center!important; justify-content: center;}
    .navbar > .container, .navbar > .container-fluid { flex-wrap: nowrap; padding: 5px}
    .navbar-fixed-top .navbar-btn button { font-size: 17px;}
    #header .slogan { margin: 0; text-align: center; font-size: 18px}
    #btnMenuRes { display: flex; align-items: center; flex-direction: column; padding-right: 0;}
    #main-content .container-fluid { padding-left: 5px; padding-right: 5px; overflow: hidden}
    #main-content #searchForm .row >*.typeTime {width: 100%!important}
}