@media screen and (min-width: 600px){
    .nav-btn-more, .cell-title, [data-hidden-menu], .nav-link-icon, .btn-delete-extended-xs span, .visible-xs {display: none;}
}

@media screen and (min-width: 768px){
    .s1 { width: 8.3333%; }
    .s2 { width: 16.6667%; }
    .s20p { width: 20%; }
    .s3 { width: 25%; }
    .s4 { width: 33.3333%; }
    .s5 { width: 41.6667%; }
    .s6 { width: 50%; }
    .s7 { width: 58.3333%; }
    .s8 { width: 66.6667%; }
    .s9 { width: 75%; }
    .s10 { width: 83.3333%; }
    .s11 { width: 91.6667%; }
    .s12 { width: 100%; }

    [data-show-content="invoices"] {display: none;}
    [data-btn="show-order-items"] span {display: none;}
    [data-hidden-content="invoices"] {display: block;}

    .hidden-s {display: none;}
}

@media screen and (min-width: 1024px){
    .m1 { width: 8.3333%; }
    .m2 { width: 16.6667%; }
    .m20p { width: 20%; }
    .m3 { width: 25%; }
    .m4 { width: 33.3333%; }
    .m5 { width: 41.6667%; }
    .m6 { width: 50%; }
    .m7 { width: 58.3333%; }
    .m8 { width: 66.6667%; }
    .m9 { width: 75%; }
    .m10 { width: 83.3333%; }
    .m11 { width: 91.6667%; }
    .m12 { width: 100%; }
}

@media screen and (min-width: 1280px){
    .lg1 { width: 8.3333%; }
    .lg2 { width: 16.6667%; }
    .lg20p { width: 20%; }
    .lg3 { width: 25%; }
    .lg4 { width: 33.3333%; }
    .lg5 { width: 41.6667%; }
    .lg6 { width: 50%; }
    .lg7 { width: 58.3333%; }
    .lg8 { width: 66.6667%; }
    .lg9 { width: 75%; }
    .lg10 { width: 83.3333%; }
    .lg11 { width: 91.6667%; }
    .lg12 { width: 100%; }
}

@media screen and (min-width: 1600px){
    .xlg1 { width: 8.3333%; }
    .xlg2 { width: 16.6667%; }
    .xlg20p { width: 20%; }
    .xlg3 { width: 25%; }
    .xlg4 { width: 33.3333%; }
    .xlg5 { width: 41.6667%; }
    .xlg6 { width: 50%; }
    .xlg7 { width: 58.3333%; }
    .xlg8 { width: 66.6667%; }
    .xlg9 { width: 75%; }
    .xlg10 { width: 83.3333%; }
    .xlg11 { width: 91.6667%; }
    .xlg12 { width: 100%; }
}

@media screen and (max-width: 767px){
aside {right: auto; left: -100%; box-shadow: none;}
aside.visible {right: auto; left: 0; z-index: 12;}
.order-invoices-wrap {padding: 10px;}
[data-hidden-content="invoices"] {margin-top: 10px;}
.comment-item {padding-left: 0; padding-right: 0;}
.delivery-info {padding: 10px; background-color: #f2f2f2;}
[name="status"] + .ss-main, [data-btn="show-order-items"] {width: 100%;}
.btn-small {padding: 10px;}
.order-title {display: flex; align-items: baseline; flex-wrap: wrap;}
}

@media screen and (max-width: 599px){
    .logo {height: 40px; margin-right: 10px;}
    .balance-item {margin-left: 10px;}
    nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 4px 19px 0px rgba(0, 0, 0, .2);
        z-index: 11;
    }
    .nav-link {justify-content: center;flex-direction: column;padding: 10px;}
    .nav-list {/* flex-wrap: wrap; */}
    .nav-item.hidden {display: none;}
    .nav-item {
        flex-grow: 1;
        padding: 0;
        width: 25%;
    }
    .nav-btn-more button {
        border: 0;
        background-color: transparent;
        margin: auto;
        width: 100%;
    }
    .nav-link:hover {background-color: transparent;}
    .nav-link-title {font-size: 11px;border: 0;}
    .nav-link-icon {display: block; width: 26px; height: 26px; margin: 0 auto 5px; background-repeat: no-repeat; background-size: contain; background-position: center center; flex-shrink: 0;}
    .icon-bills, .menu-opened .active .icon-bills {background-image: url('images/bills.svg')}
    .icon-analytics, .menu-opened .active .icon-analytics {background-image: url('images/analytics.svg')}
    .icon-expense, .menu-opened .active .icon-expense {background-image: url('images/expense.svg');flex-shrink: 0;}
    .icon-menu {background-image: url('images/more.svg')}
    .icon-orders {background-image: url('images/orders.svg')}
    .active .icon-bills {background-image: url('images/bills-active.svg')}
    .active .icon-analytics {background-image: url('images/analytics-active.svg')}
    .active .icon-expense {background-image: url('images/expense-active.svg');flex-shrink: 0;}
    .active .icon-menu {background-image: url('images/more-active.svg')}
    .active .icon-orders {background-image: url('images/orders-active.svg')}
    .nav-link.active {
        color: #00a372;
    }
    .menu-opened a.nav-link.active {color: #000;}
    header .user-menu {display: none;}

    .form-group {
        flex-wrap: wrap;
        margin-right: 0;
        margin-left: 0;
    }

    .form-item {
        flex-grow: 1 !important;
        width: 100%;
        margin-bottom: 14px;
        padding: 0;
    }
    .form-group .btn-export {margin-left: 0;}
    .wrap {max-width: 100%; padding-left: 10px; padding-right: 10px;}
    h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    header {
        margin-bottom: 15px;
    }

    /* adaptive table = AdapTable :) */

    .adaptable thead {display: none;}
    .adaptable tr, .adaptable td {display: block;}
    .adaptable tr {
        margin: 0 -10px;
        padding: 10px 0;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: -1px;
        position: relative;
    }

    .adaptable td {
        border: 0;
        padding-top: 0;
    }

    .adaptable tr:hover td {
        background-color: transparent;
    }

    .adaptable .td-checkbox {padding: 0;}

    .adaptable .checkbox {
        position: absolute;
        right: 0;
    }

    .cell-title {
        color: #777;
        width: 130px;
        display: inline-block;
    }
    .adaptable td.small {width: auto;}

    .month-group {padding-top: 15px; padding-bottom: 15px; margin-top: 15px;}
    .month-inner {margin-left: -10px; margin-right: -10px;}
    .month-table-wrap {border-right: 0; padding-right: 10px; padding-left: 10px; margin-bottom: 20px; width: 100%;}
    .month-table-wrap-inner {margin: 0;}
    .month-table-wrap table {max-width: none; margin: 0 -10px; width: calc(100% + 20px);}
    .month-balance {width: auto; padding-left: 10px;}

    header.fullscreen {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 100;
    }

    [data-hidden-menu] {visibility: hidden; opacity: 0; transition: .2s all ease-in-out; overflow-y: auto; left: 0; right: 0; bottom: 0; top: 0; position: fixed; z-index: 10; background-color: #fff; display: flex; flex-direction: column; padding: 10px;}
    [data-hidden-menu].visible {visibility: visible; opacity: 1;}
    .hidden-nav-link {
        display: block;
        padding: 10px 0;
        text-decoration: none;
        color: #000;
    }
    .current-user-name {font-size: 17px; font-weight: 700; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ebebeb;}
    .current-user-logout {padding: 10px 0; margin-top: auto;}
    .month-table-wrap td:first-child {
        width: 150px;
    }

    .btn-delete-extended-xs {width: auto; padding: 7px; padding-left: 40px; background-position-x: 10px; height: auto;}
    .cell-delete .btn-delete-extended-xs {margin-left: 10px;}
    .cell-delete {width: auto;}

    [data-touchclick] .btn-delete{display: none;}
    [data-touchclick].active .btn-delete {display: inline-block; visibility: visible;}

    .popup-header p {font-size: 20px;}
    .popup-dark {padding: 15px;}
    .popup-header, .popup-body {padding-left: 15px; padding-right: 15px;}

    .input-group > * {width: 100%;}
    .input-group > *:not(:last-child) {margin-right: 0;}

    .order-action-buttons {flex-wrap: wrap;}
    [data-btn="add-alert"] {visibility: visible; width: 100%; display: flex; align-items: center; text-align: left;margin-top: 10px;  padding: 5px; font-size: 13px; background-color: #fddfdf; color: #c00;}

    .aside-footer .btn-primary {width: 100%;}
    .label-incomplete {display: inline-flex; justify-content: center; min-height: 40px; align-items: center;}
    .is-incomplete [data-btn="show-order-items"] {width: calc(100% - 60px);}
}