@media (min-width:1301px) and (max-width:1400px) {
    .header { width: calc(100% - 250px) }
    .brand-logo, .left-side-bar { width: 250px }
    #main-container { padding-left: 270px }
}

@media (min-width:1301px) {
    .sidebar-shrink .left-side-bar, .sidebar-shrink .left-side-bar.open { left: -281px }
    .sidebar-shrink .header { width: 100% }
}

@media (max-width:1300px) {
    #main-container { padding-left: 0; padding-right: 0 }

    .header { width: 100% }

    .left-side-bar { left: -281px }
        .left-side-bar .close-sidebar { display: block }
        .left-side-bar:before { display: block; opacity: 0; visibility: hidden }
        .left-side-bar.open:before { opacity: 1; visibility: visible; display: none }
        .left-side-bar .brand-logo a { padding: 5px 15px }
            .left-side-bar .brand-logo a .svg, .left-side-bar .brand-logo a img { margin: 0 }

    .mobile-menu-overlay { display: block; opacity: 0; visibility: hidden }
        .mobile-menu-overlay.show { opacity: .6; visibility: visible }
}

@media (min-width:1199.98px) {
    .page-header, .block-title-flex { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
        .page-header .page-header-left, .block-title-flex h3 { margin-right: 1rem; }

        .page-header .nav-horizontal, .block-title-flex .block-title-right { margin-left: auto; text-align: right; }
            .page-header .nav-horizontal li, .block-title-flex .block-title-right li { margin-top: 6px; margin-bottom: 6px; }
                .page-header .nav-horizontal li:not(:first-child), .block-title-flex .block-title-right li:not(:first-child) { margin-left: 10px; }
}

@media (max-width:1199.98px) {
    .header { position: relative }
    #main-container { padding-top: 10px }

    .card-box.page-header, .block-title.block-title-flex { padding-top: 1rem; padding-bottom: 8px; }
    .page-header .nav-horizontal, .block-title-flex .block-title-right { margin-top: 1rem; }
        .page-header .nav-horizontal li, .block-title-flex .block-title-right li { margin: 8px; }

    .pagination .page-link.text, .pagination .page-link.first, .pagination .page-link.last { display: none }

    .mini-cart-container li { max-width: calc(100% / 3); flex: 1 1 calc(100% / 3); }

    .breadcrumb, .main-container { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width:991.98px) {
    .uploaded-files li { max-width: calc(100% / 4); flex: 1 1 calc(100% / 4); }

    .stok-btn-add label { padding: 5px 2px; }
        .stok-btn-add label i { display: block; margin-right: 0; }
}

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

    table.tablev2 thead,
    table.tablev2 tfoot th { display: none !important; }

    table.tablev2 td,
    table.tablev2 tfoot td { display: block !important; width: 100% !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; }

        table.tablev2 td:before,
        table.tablev2 tfoot td:before { content: attr(data-label); font-weight: 700; font-size: .875rem; display: block; text-align: left; margin-bottom: 5px; }

    table.tablev2 tbody tr:not(:last-child),
    table.tablev2 tfoot tr:not(:last-child) { border-bottom: 3px solid #dddddd; }

    table.tablev2 tfoot { background-color: transparent !important; }
}

@media (min-width:767.98px) {
}

@media (max-width:767.98px) {

    .header { position: fixed; left: 0; top: 0; -webkit-box-shadow: 0 5px 25px rgba(0,0,0,.1); box-shadow: 0 5px 25px rgba(0,0,0,.1) }
    #main-container { padding-top: 80px }

    .login-box { padding: 2rem 1rem }
    .login-header .brand-logo a img { max-width: 150px }
    .pre-loader { background-size: 43% }
    .xs-pd-20-10 { padding: 20px 10px }
    .xs-mb-20 { margin-bottom: 20px }
    .user-notification { margin-right: 5px }
        .user-notification .dropdown-menu { width: 100%; min-width: 300px }
    .user-info-dropdown .dropdown-toggle .user-name { display: none }

    .forgot-password { text-align: center }
    .error-page h1 { font-size: 150px }

    .uploaded-files li { max-width: calc(100% / 3); flex: 1 1 calc(100% / 3); }

    .forgot-password a { font-size: .875rem; font-weight: 600 }

    .mini-cart-container li { max-width: calc(100% / 2); flex: 1 1 calc(100% / 2); }
}

@media (min-width:575.98px) {
    .footer-btn .btn:not(:last-child), .search-area-btn .btn:not(:last-child) { margin-right: 10px; }

    .pnl-save-note > div { width: 70%; }
}

@media (max-width:575.98px) {

    .sidebar-shrink { overflow: hidden; }

    .btn-lg2 { font-size: 1.1rem; padding: .75rem 2rem; }

    .uploaded-files li { max-width: calc(100% / 2); flex: 1 1 calc(100% / 2); }

    .footer-btn .btn, .search-area-btn .btn { width: 100%; display: block; margin-right: 0 }

    table.dataTable > tbody > tr.child span.dtr-title { display: block; width: 100%; margin-bottom: 5px; }

    .left-side-bar { width: 100%; }
    .left-side-bar { left: -100%; }

    .pnl-save-note .btn, .pnl-customer-info .btn { margin-top: 10px; display: block; width: 100%; }
}