/* css for tab panel tables responsive */
@media screen and (max-width:1500px) {
    p, li {
        font-size: 14.5px;
    }

    .help legend {
        font-size: 15px;
    }
    .form-custom-label {
        font-size: 15px;
    }
}

@media screen and (max-width:1400px) {
    .cart-title span {
        padding: 7px 10px 6px;
        font-size: 15px;
    }

    h3.inner-text {
        font-size: 18px;
    }
}

@media screen and (max-width:1300px) {
    #tblPrescription input {
        width: 47px;
        padding: 3px 3px 3px 7px;
    }
}

@media screen and (max-width:1199px) {
    .col-lg-6.clsFrameMeasurements {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        flex: none;
    }

    ul.table-ul li div {
        height: 60px;
        width: 25%;
        float: left;
        border-bottom: 1px solid #b7b7b7;
        font-size: 11px;
    }

    #tblPrescription .form-control {
        font-size: 11px;
        padding: 2px 4px;
        margin: 0 auto;
        height: auto !important;
    }

    #tblFrameMeasurements td, #tblFrameMeasurements th {
        font-size: 11px;
        padding: 5px;
    }

    #tblFrameMeasurements .form-control {
        padding: 2px 5px;
        font-size: 11px;
    }

    #tblFrameMeasurements select.form-control:not([size]):not([multiple]) {
        height: auto;
    }

    ul.table-ul li {
        width: 100%;
        margin: 0;
        padding: 0;
        float: left;
        display: block;
        text-align: center;
    }

    .mobile-title {
        background: #D3D3D3;
    }

    .li-block img {
        transform: rotate(270deg);
    }
}
/* 04-01 css for fixed information for tab forms */

span.mobile-close {
    display: none;
}

.fading-div-btn {
    display: none;
}

.fading-div-btn-1 {
    display: none;
}

@media screen and (max-width:1199px) {
    .fixed-in-mobile {
        position: fixed;
        z-index: 9;
        top: 0;
        width: 100%;
        padding: 0;
        right: 0;
        max-width: 100%;
    }

    .fading-div, .fading-div-1 {
        background: #f1f1f1;
        padding: 3px 0 1px;
    }

    .frame-div-absolute {
        position: static !important;
    }

    .fixed-in-mobile h3.inner-title {
        font-size: 12px;
        margin-bottom: 4px !important;
        padding-bottom: 4px;
    }

    .fixed-in-mobile .slider {
        padding: 19px 40px 14px 30px;
        margin: 0 0 4px 0;
        height: 22px;
    }

    .fixed-in-mobile .ui-slider .ui-slider-label {
        top: -21px;
        margin-left: -15px;
        font-size: 9px;
    }

    .fixed-in-mobile .ui-slider-decrease, .fixed-in-mobile .ui-slider-increase {
        top: 10px;
    }

    .fixed-in-mobile .palette-help-content p {
        font-size: 11px;
        line-height: 15px;
    }

    #palette-balance .palette-help-content {
        width: 100%;
    }

    #palette-balance .palette-help-content p {
        padding: 0px;
    }

    .palette-help-image {
        margin: 3px 0;
    }

    .fixed-in-mobile .palette-help-image img {
        max-height: 55px;
    }

    .fading-div-outer {
        position: relative;
    }

    .fixed-in-mobile .ui-slider-horizontal {
        height: 5px;
    }

        .fixed-in-mobile .ui-slider-horizontal .ui-slider-handle {
            top: -5px;
        }

    .fixed-in-mobile .ui-slider-decrease, .fixed-in-mobile .ui-slider-increase {
        top: 7px;
    }

    .fading-div-btn, .fading-div-btn-1 {
        display: inline-block;
        position: fixed;
        right: 0;
        top: 280px;
        background: rgba(16, 110, 190,1);
        padding: 5px;
        color: #fff;
        z-index: 99;
    }

    .palette-help-content {
        float: left !important;
        width: 50%;
    }

    .palette-help-image {
        float: left !important;
        width: 50%;
    }

    .palette-help {
        display: block;
        overflow: hidden;
    }

    .fading-div-1 {
        position: relative;
    }

    .mobile-close {
        position: absolute;
        top: 0;
        right: 0;
        background: #007AC2;
        width: 20px;
        height: 20px;
        color: #fff;
        text-shadow: none;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        z-index: 99;
    }

    span.mobile-close {
        display: block;
    }
}


/* media query for width */
.form-actions {
    text-align: center;
}

    .form-actions .btn-push {
        display: inline-block;
    }

img.img-responsive {
    max-width: 100%;
}

@media screen and (max-width:1360px) {
    p, li, body {
        font-size: 13.5px;
    }

    ul#tabs li {
        margin-right: 5px;
    }

    .nav-tabs li a {
        padding: 8px 12px 8px;
    }

        .nav-tabs li a.active:before {
            top: 40px;
        }
}

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

    .header-btn {
        left: 45%;
    }
}

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

    .custom-middle-width {
        width: calc(100% - 560px);
    }

    .custom-middle-width-checkout {
        width: calc(100% - 280px);
        margin: 0 0px 0 20px;
    }

    .custom-side-width {
        width: 260px;
    }
}

@media screen and (max-width:1200px) {
    .custom-middle-width {
        width: calc(100% - 520px);
    }

    .custom-middle-width-checkout {
        width: calc(100% - 260px);
    }

    .custom-side-width {
        width: 240px;
    }

    p, li, body {
        font-size: 14px;
    }

    ul.sidebar-menu.sidebar-bottom li a {
        font-size: 14px;
    }

    .header-btn {
        margin-left: 0;
    }

    .navbar-brand {
        margin: 0;
    }

    .metalic-btn-img {
        min-width: 98px;
        font-size: 13px;
        height: 36.2px !important;
    }

    li.material-bg.btn-with-links .btn-push {
        min-width: 79px;
        font-size: 11px;
        height: 34px !important;
    }

    .nav-tabs li a {
        padding: 8px 10px 8px;
    }
}

@media screen and (max-width:1100px) {
    .form-custom-label {
        padding-top: 9px;
        font-size: 13px;
    }
    .form-control {
        font-size: 13px;
    }
    .form-custom-label {
        padding-top: 5px;
        font-size: 12px;
    }
    ul.drop-menu {
        left: -77px;
    }

    li.material-bg.btn-with-links .btn-push {
        min-width: 70px;
        font-size: 10px;
        height: 30px !important;
    }
    .normal-btn {
       padding: 8px 10px !important;
     font-size: 13px;
    }
    .cart-title span {
        font-size: 14px;
    }

    ul.sidebar-menu.sidebar-bottom li a {
        font-size: 12px;
    }

    .b-r-5 {
        margin-right: 5px;
    }

    h1, .h1 {
        font-size: 23px;
    }

    .metalic-btn-img {
        min-width: 95px;
        font-size: 12px;
        height: 35.5px !important;
    }

    h1.main-title:after {
        width: 85px;
        border-bottom: 3px solid #007AC2;
    }

    .nav-tabs li a {
        padding: 6px 8px 6px;
        font-size: 12px;
    }

    ul#tabs li {
        margin-right: 4px;
    }

    .nav-tabs li a.active:before {
        top: 33px;
    }

    .sidebar-form .form-label {
        font-size: 14px;
    }

    li.nav-item {
        margin-right: 4px;
    }

    .card-header h4 {
        font-size: 14px;
    }
}

@media screen and (max-width: 991px) {
    h3.inner-text {
        font-size: 15px;
    }
    .p-o-label {
        padding-top: 6px !important;
    }
    .form-actions .btn-push {
        margin-bottom: 9px;
    }

    .header-btn {
        position: static;
        left: 47%;
        transform: none;
    }

    .custom-middle-width {
        width: 100%;
        margin: 15px 0;
    }

    .custom-middle-width-checkout {
        width: 100%;
        margin: 15px 0 0 0 !important;
    }

    .custom-side-width {
        width: 100%;
    }
}
/*----------- responsive menu css --------*/
@media screen and (max-width: 991px) {
    a.metalic-btn-img {
        padding: 15px 2px;
        font-size:12px;
    }

    .clsProducts .card {
        margin: 15px 0;
        background: #f1f1f1;
    }
    table.td-mobile-div {
        float: left !important;
        margin: 10px 0;
    }

    a.navbar-brand {
        width: auto;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    ul.drop-menu {
        left: 0;
    }

    a.navbar-brand img {
        width: 150px;
        margin: 2px 0;
    }

    a.header-btn img {
        width: 114px;
    }

    .menu-image {
        display: none !important;
    }

    li.nav-item span {
        text-align: left;
        display: block;
        border-bottom: 1px solid;
        padding: 2px 0 7px;
    }

    ul.navbar-nav li.nav-item:last-child span {
        border-bottom: 0;
    }

    .navbar-collapse {
        position: absolute;
        top: 40px;
        background: #fff;
        width: 100%;
        z-index: 9;
        box-shadow: 0 2px 24px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.22);
    }
}

/*----------- responsive menu css end  --------*/

/*----------- responsive sidebar  --------*/
@media screen and (max-width: 991px) {
    .main-content-divide {
        margin-top: 5px;
    }

    .mini-submenu {
        display: block !important;
        margin-bottom: 10px;
    }

    .sidebar-block-container {
        width: auto;
        position: fixed;
        z-index: 99;
        left: 0;
        top: 177px;
    }

    .sidebar-block {
        position: absolute;
        z-index: 999;
        width: 300px;
    }

    #slide-submenu {
        color: #fff;
        padding: 6px 10px;
        width: 35px;
        height: 35px;
        border-radius: 0;
        position: absolute;
        right: -35px;
        background: #007AC2;
    }

    #slide-submenu {
        display: inline-block;
    }

    .list-group {
        display: none;
    }
}

@media screen and (max-width: 770px) {
    div.help {
        margin: 20px 0 15px;
    }

    .next-tab {
        margin-right: 5px;
    }

    .clsProducts .card {
        margin: 15px 0;
        background: #f1f1f1;
    }

    .normal-btn {
        padding: 7px 10px 7px !important;
        font-size: 13px;
    }

    ul.sidebar-menu li a {
        padding: 7px 10px;
    }

    #tblFrameMeasurements td, #tblFrameMeasurements th {
        font-size: 12px;
    }

    ul.table-ul li div {
        font-size: 13px;
    }

    .animation-ribbon {
        transform: none;
    }

    .navbar-brand img {
        width: 100px;
    }

    .palette-help-image {
        float: none;
        text-align: center;
        margin: 10px 0;
    }

    .flash-message {
        position: absolute;
        top: -51px;
        right: 0;
        border-radius: 0;
        padding: 5px;
        font-size: 12.5px;
    }

    .ribbon-span {
        padding: 2px 0px;
        font-size: 13px;
        width: 100%;
        display: block;
    }

    .ribbon {
        padding: 2px 0px;
        position: static;
        max-width: 100%;
    }

    .main-content-title {
        height: auto;
    }

    .transparent-title {
        position: static;
    }

    .alert-dismissible .close {
        top: -9px;
        right: -7px;
        border: 1px solid;
        padding: 0;
        height: 20px;
        width: 20px;
        line-height: 18px;
        border-radius: 100%;
        background: #000;
        text-shadow: none;
        color: #fff;
    }

    .clearfix-form-group {
        margin-bottom: 0;
    }


    p, li {
        font-size: 14px;
    }

    h1, .h1 {
        font-size: 15px;
    }

        h1.main-title:after {
            width: 59px;
            border-bottom: 2px solid #007AC2;
        }

    .right-side-content {
        padding: 10px;
    }

    ul.footer-menu li a {
        font-size: 12px;
    }

    li.pipe {
        padding: 0 2px;
    }

    h3.inner-title {
        font-size: 18px;
    }

        h3.inner-title:after {
            width: 46px;
        }

    .card-header h4 {
        margin: 5px 0;
        background: transparent;
        text-shadow: none;
        font-weight: bold;
        /*color: rgba(16, 110, 190,1) !important;*/ /*Comment by roshni 06-02-2024*/
        border-bottom: 1px solid;
        padding: 0 0 5px;
        font-size: 15px;
    }

    /*.card-body {
        padding: 0;
    }*/

    .card-header {
        background-color: transparent;
    }

    h4.panel-title a {
        display: block;
        background: rgba(16, 110, 190,1);
        color: #fff !important;
        padding: 10px;
        font-size: 16px;
        font-weight: normal;
    }
}


@media screen and (max-width:575px) {
    h3.inner-text {
        font-size: 13px;
        line-height: 18px;
    }
    .order-date-span {
        font-size: 12px;
        position: relative;
        top: -6px;
    }

    #tblWebOrderHistory_wrapper.dataTables_wrapper, div#dvRxJobStatusPrint .dataTables_wrapper {
        overflow-x: auto !important;
    }

    ul.table-ul li div {
        height: 65px;
    }

    .td-mobile-div td, .td-mobile-div td input, .td-mobile-div, .td-mobile-div tr, .td-mobile-div tbody {
        display: block;
        width: 100% !important;
    }

    select.form-control:not([size]):not([multiple]) {
        height: auto;
    }

    .form-control {
        font-size: 13px;
    }

    .sidebar-form-padding {
        padding: 15px 10px;
    }

    .sidebar {
        max-height: 384px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .li-block.left-td br, .li-block.right-td br {
        display: none;
    }

    .li-block.right-td select, .li-block.left-td select {
        margin-bottom: 3px !important;
    }

    ul.top-listing li {
        font-size: 13px;
    }

    .container-full {
        padding: 0 13px !important;
    }

    table#tblPrescription td, table#tblPrescription th {
        padding: 5px 20px;
        font-size: 12px;
    }

    .form-actions .btn-push {
        margin-bottom: 0px;
    }
}
/* media query for between */

@media(min-width:767px) and (max-width:991px) {
    li.material-bg.btn-with-links .btn-push {
        margin: 7px 12px;
    }

    .checkout-btn {
        position: static;
    }
}

/* media query for height */
@media screen and (max-height:600px) {
}
@media(min-width:1115px) and (max-width:1460px) {
    .form-custom-label {
        font-size: 14px;
    }
.photocromic-label,.finished-label {
        padding-top: 2px;
    }
    .p-o-label {
        padding-top: 1px !important;
        font-size: 13px;
    }
}
@media(min-width:991px) and (max-width:1115px) {
    .form-custom-label {
        font-size: 13px;
    }
    .photocromic-label, .finished-label {
        padding-top: 0;
    }
    .sidebar-form .form-label {
        font-size: 12px;
    }
}
@media(min-width:991px) and (max-width:1080px) {
table.selection-grid th, table.selection-grid td {
      font-size: 9px;
}
    a#reset-minus, a#reset-plus {
        padding: 8px 7px !important;
    }
}

@media screen and (min-width:991px) {
    .custom-middle-width {
        min-height: 700px;
    }
}