@media (max-width: 320px) {
    .modal-img {
        height: 125px;
    }
}

@media (max-width: 767px) {
    .modal-body {
        padding: 20px;
    }

    .modal-img {
        height: 210px;
    }
}
@media (max-width: 1024px) {
    .modal-img {
        height: 330px;
    }
}
    @media (min-width: 480px) {

        .inline-elements > ul {
            margin: 0;
            display: inline-block;
        }

            .inline-elements > ul > li {
                display: inline-block;
                width:auto;
                margin: 0 10px 5px 0px;
            }

            .inline-elements > ul:last-child {
                margin-left: 85px;
            }

        form input[type="submit"], form input[type="button"].general-btn {
            display: inline-block;
            width: auto;
        }

        .tab-wrap .nav-tabs > li > a {
            padding: 15px 15px;
            font-size: 18px;
        }

        .inline-items.filter-items > ul > li {
            display: inline-block;
        }

        .inline-items.filter-items input {
            width: 92px;
        }

        .inline-items.filter-items > ul > li .vdp-datepicker input {
            width: 100px;
        }

        >
        .inline-items.date-list > ul > li, .statistics-box .inline-items > ul > li {
            display: inline-block;
        }

        .inline-items.date-list .vdp-datepicker input[type="text"] {
            width: 100px;
        }

        .col-wrapper {
            min-height: 100px;
        }
    }

    @media (min-width: 768px) {
        .right-panel {
            padding-left: 200px;
        }

        .nav-active .left-panel {
            left: -180px;
        }

        .d-sm-block {
            display: block !important;
        }

        .nav-trigger.navbar-pos-search {
            top: 7px;
            line-height: 43px;
        }

        .inline-elements-block {
            margin: 0;
        }

            .inline-elements-block .dropdown-menu {
                width: 335px;
                left: auto;
                right: 0;
                transform: translate(0, 0);
                -webkit-transform: translate(0, 0);
                -moz-transform: translate(0, 0);
            }

        .logo-holder {
            padding: 10px 0px;
        }

        .text-sm-left {
            text-align: left !important;
        }

        .text-sm-right {
            text-align: right !important;
        }

        .modal-footer .btn {
            width: auto;
        }

            .modal-footer .btn + .btn {
                margin-left: 5px;
                margin-top: 0;
            }

        .mt-sm-2 {
            margin-top: 20px !important;
        }

        .label-block {
            margin: 0;
        }

        .production-form ul.col-5-li li {
            width: 19.6%;
        }

        .fig-wrap {
            max-width: 50px;
        }

        #dashboard-recent-purchase .w-160 {
            width: 160px;
        }

        #dashboard-recent-purchase .inline-items > ul > li {
            display: inline-block;
        }

        .round-filter-box .form-control {
            width: 150px;
            padding: 2px 10px;
        }
    }

    @media (min-width: 992px) {
        body {
            font-size: 15px;
        }

        header {
            padding: 60px 0;
        }

        .right-col h3 {
            font-size: 22px;
        }

        .right-col {
            margin-top: 0px;
            text-align: right;
        }

        .tab-contents h4 {
            font-size: 18px;
        }

        .tab-contents h5 {
            font-size: 14px;
        }

        .tab-wrap .nav-tabs > li > a {
            padding: 15px 60px;
            font-size: 22px;
        }

        .select-group {
            /*margin-top: 70px;**/
        }

        .select-wrap .bootstrap-select.btn-group .dropdown-toggle .caret {
            right: 70px;
        }

        .label-wrap {
            width: 25%;
            float: left;
            text-align: right;
            margin: 9px 0 0px;
        }

        .input-wrap {
            width: 75%;
            float: left;
            padding: 0 0 0 15px;
        }

        .radio-col .label-wrap {
            width: 45%;
        }

        .radio-col .input-wrap {
            width: 55%;
        }

        .pay-form .label-wrap {
            width: 33%;
            text-align: left;
        }

        .pay-form .input-wrap {
            width: 67%;
        }

        .inline-form .label-wrap {
            width: 41%;
            margin: 0;
        }

        .inline-form .input-wrap {
            width: 59%;
            position: relative;
        }

        .select-group .label-wrap {
            width: 31%;
        }

        .select-group .input-wrap {
            width: 69%;
        }


        .radio-col .one-time .label-wrap {
            width: 14%;
        }

        .one-time {
            margin-bottom: 0;
        }

        .promotion-time .label-wrap {
            width: 27%;
        }

        .promotion-time .input-wrap {
            width: 73%;
        }

        #ctl00_ContentPlaceHolder1_divNoCustomer {
            margin-left: 30px;
        }
        /******** art approval tab added *********/
        .pay-form .approval-tab .label-wrap {
            width: 10%;
        }

        .pay-form .approval-tab .input-wrap {
            width: 90%;
        }

        .pay-form .approval-tab .tag-block .label-wrap {
            width: 16%;
        }

        .pay-form .approval-tab .tag-block .input-wrap {
            width: 84%;
        }

        .approval-tab-contents input[type="submit"].preview-btn {
            margin-left: 11.2%;
        }

        .tab-wrap .inner-tab .nav-tabs > li > a {
            padding: 10px 38px;
            font-size: 15px;
        }

        .title-col {
            width: 12%;
            float: left;
        }

        .desc-col {
            width: 88%;
            float: left;
            padding-left: 15px;
        }

        .seo-tab form .col-group input[type="submit"] {
            margin-left: 13.2%;
            padding: 7px 23px;
        }

        .col-group {
            margin: 0 15px 10px 30px;
        }

        .inline-form {
        }
        /******** artwork ****/
        .art-cols {
            padding: 10px 10px 10px 10px;
        }

            .art-cols .inline-elements {
                margin: 0;
                display: inline-block;
            }

            .art-cols .pagination-wrap {
                text-align: right;
            }

        .form-wrap .btn-sm {
            width: auto;
            margin-bottom: 0;
        }

        .art-link-placeholder {
            margin-top: 0;
        }

        .pay-form .approval-tab .row.with-cust-no .label-wrap {
            width: 64%;
        }

        .pay-form .approval-tab .row.with-cust-no .input-wrap {
            width: 36%;
        }

        .pay-form .approval-tab .row.with-cust-no select.form-control {
            margin: 0;
        }

        .production-inputs {
            padding-right: 0px;
        }

        .approval-tab-contents.tab-contents label.vue-js-switch {
            margin: 5px 0 0;
        }
        /*** styles for new-header ****/
        .main-header .logo-wrap {
            padding: left;
        }

        .right-wrap {
            border: none;
        }

            .right-wrap > ul {
                text-align: right;
            }

                .right-wrap > ul > li {
                    padding: 38px 15px;
                    font-size: 20px;
                    position: relative;
                }

                    .right-wrap > ul > li:first-child {
                        border-left: rgba(0, 0, 0, 0.06) 1px solid;
                    }

                    .right-wrap > ul > li > a > i {
                        font-size: 30px;
                    }

            .right-wrap .dropdown-menu {
                min-width: 390px;
                right: 0;
            }

            .right-wrap .logout-drop.dropdown-menu {
                min-width: 162px;
                left: auto;
                right: 0;
            }

        .production-form > ul > li {
            width: 24.6%;
            padding: 0 5px;
        }

        .pay-form .production-form .label-wrap {
            width: 30%;
        }

        .pay-form .production-form .input-wrap {
            width: 70%;
        }

        .pay-form .art-com-details-modal .label-wrap {
            width: 42%;
            padding-top: 11px;
        }

        .pay-form .art-com-details-modal .input-wrap {
            width: 58%;
        }

        .pay-form .garment-info-wrap .label-wrap {
            width: 12%;
        }

        .pay-form .garment-info-wrap .input-wrap {
            width: 88%;
        }

        .pay-form .art-info-wrap .label-wrap {
            width: 25%;
        }

        .pay-form .art-info-wrap .input-wrap {
            width: 75%;
        }

        .pay-form .dim-cols .label-wrap {
            width: 10%;
            padding-top: 13px;
        }

        .pay-form .dim-cols .input-wrap {
            width: 90%;
        }

        .pay-form .art-com-details-modal .top-row .label-wrap {
            width: 40%;
            text-align: right;
        }

        .pay-form .art-com-details-modal .top-row .input-wrap {
            padding-left: 6px;
        }

        .pay-form .art-com-details-modal .comp-art-wrap .label-wrap {
            width: 17%;
        }

        .pay-form .art-com-details-modal .comp-art-wrap .input-wrap {
            width: 83%;
        }

        .order-modal.art-com-details-modal.inner-modal-wrap .modal-dialog {
            width: 600px;
        }

        .POArtStatus-table .table > thead:first-child > tr:first-child > th {
            width: 60px;
        }

        .pay-form .art-com-details-modal.salesid-modal .label-wrap {
            width: 10%;
        }

        .pay-form .art-com-details-modal.salesid-modal .input-wrap {
            width: 90%;
        }

        .inline-items.text-lg-center {
            text-align: center;
        }

        .inline-items.text-lg-right {
            text-align: right;
        }


        .pay-form .production-form .rejects-cols .label-wrap {
            width: 36%;
        }

        .pay-form .production-form .rejects-cols .input-wrap {
            width: 64%;
        }

        .text-md-right {
            text-align: right !important;
        }

        .order-modal.art-com-details-modal .modal-dialog {
            width: 90%;
        }

        .big-upload-box {
            margin: 35px 0 15px 30px;
        }

        .bg-info-light, .bg-info {
            min-height: 151px;
        }

        .sticky-cols-4 {
            position: -webkit-sticky;
            position: -moz-sticky;
            position: -ms-sticky;
            position: -o-sticky;
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .bordered-btn {
            letter-spacing: 1px;
        }

        .auth-wrap h2 {
            font-size: 24px;
            line-height: 38px;
        }
    }

    @media (min-width: 1200px) {
        .container {
            width: 1200px;
        }

        .order-modal .modal-dialog {
            width: 850px;
        }

        .label-wrap {
            width: 32%;
            float: left;
            text-align: right;
            margin: 9px 0 0px;
        }

        .input-wrap {
            width: 68%;
            float: left;
            padding: 0 0 0 15px;
        }

        .radio-col .label-wrap {
            width: 47%;
            text-align: left;
        }

        .radio-col .input-wrap {
            width: 48%;
            padding-left: 0;
        }

        .select-group .label-wrap {
            width: 27%;
        }

        .select-group .input-wrap {
            width: 73%;
        }

        .inline-form {
            padding-left: 148px;
        }

        .general-form {
            padding-right: 165px;
        }

        .tab-contents hr {
            margin: 10px 0 0;
        }

        .tab-contents.approval-tab-contents {
            padding: 5px 10px 0px;
        }
        /******** art approval tab added *********/
        .pay-form .approval-tab .input-wrap {
            width: 90%;
        }

        .approval-tab-contents .table-wrap {
            padding-right: 160px;
        }

        .tag-block {
            padding-right: 160px;
        }

        .full-width .label-wrap {
            width: 15%;
        }

        .full-width .input-wrap {
            padding: 0 0 0 20px;
            width: 85%;
        }

        .large-modal-wrap.order-modal.art-com-details-modal .modal-dialog {
            width: 90%;
            max-width: 90%;
        }

        .chart-cols {
            overflow-y: inherit;
            padding: 0;
        }

        .art-comp-wrap {
            width: 320px;
        }

        .tab-contents .select-art .form-control {
            max-width: 120px;
        }

        .form-control.fixed-width-input {
            width: 139px;
        }

        .statistics-box .form-control {
            width: 95px;
        }

        .fig-wrap {
            max-width: 70px;
        }

        .w-90-modal.order-modal.art-com-details-modal .modal-dialog {
            width: 90%;
            max-width: 90%;
        }

        .modal-95-width .modal-dialog {
            width: 95%;
            max-width: 95%;
        }

        .order-modal .modal-header .close {
            top: -20px;
            right: -20px;
        }

        .large-modal-wrap .modal-dialog {
            max-width: 1000px;
        }
    }

    /*table responsive*/
    .table-responsive {
        min-height: .01%;
        overflow-x: auto;
        margin: 0;
    }

    .datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
        background-color: #0c9080;
        background-image: -moz-linear-gradient(to bottom,#0c9080,#44b4a6);
        background-image: -ms-linear-gradient(to bottom,#0c9080,#44b4a6);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#0c9080),to(#44b4a6));
        background-image: -webkit-linear-gradient(to bottom,#0c9080,#44b4a6);
        background-image: -o-linear-gradient(to bottom,#0c9080,#44b4a6);
        background-image: linear-gradient(to bottom,#0c9080,#44b4a6);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c9080', endColorstr='#44b4a6', GradientType=0);
    }

    @media (min-width: 768px) {
        .table-wrap .big-font-table.table > thead > tr > th, .table-wrap .big-font-table.table > tbody > tr > td, .table-wrap .big-font-table.table > tfoot > tr > td, .big-font-table .send-btn, .tab-contents .big-font-table .form-control {
            vertical-align: top;
            font-size: 14px;
        }
    }