@media only screen and (max-width: 550px) { 
    .mobile-mats .rowText, #mobile-list-container .qtyInfo, .cust-quantity-scroller-label .rowText{font-size: .8rem !important}
    .select-mat-button .icon-right-open, .select-qty-button .icon-right-open{float: none;}

    .rowSelected .rowText{margin-left: 0; }
    .material-scroller-label{min-height: 80px; padding-left: 0 !important}
    .mat-description, .button-div{padding-left: 0;}
    #mobileMaterialScrollerWrapper li img{margin-top: 4px !important; width: 35px;}
    .matName{display: block;}
    .mat-description{padding-left: 17px !important;}
    .button-div{margin-left: 16px !important}
    .scrollerPrice{font-size: .9rem}
}


@media only screen and (max-width: 46.125em) { 
    body{padding: 0}
    .material-filters{display: none;}
    .mobile-mat-list{
        position: absolute;
        top: 0;
        left:0;
        z-index: 30;
        background-color: white;
        width: 100%
    }
    .mobile-mat-list .dlc-mats{margin: 0; border:none}
    .mobile-mats{display: block !important;}

    .back-to-product{
        padding-top:10px;
        padding-bottom:10px;
        text-align: left;
        background: #fff
    }
    .back-to-product a{text-decoration: none;}
    .mat-and-filter{
        background: #fafafa;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        float: left;
        width: 100%;
    }
    .mobile-filter-toggle{display: none; padding-bottom: 1.5rem}
    .title-filter-link{float: left; width: 100%; padding-bottom: 10px;}
    .mat-and-filter a.filter-link{
        text-decoration: none;
        color: #333;
        float: right;
        display: block;
        margin-top: 15px;
    }
    .mat-filters, .property-filters, .filter-link .icon-angle-up, .mat-colors .icon-minus, .special-properties .icon-minus{display: none;}
    .mat-and-filter h2{margin: 11px 0 0 0; float: left; font-size: 1.2rem;}
    .mobile-filter-cats{
        display: block;
        padding: 15px;
        text-align: left;
        text-decoration: none;
        border: 1px solid #ccc;
        background: #f0f0f0;
        color: #333;
        clear: both;
    }
    .mobile-filter-cats:hover{background: #f6f6f6; text-decoration: none; color:#333;}
    .mobile-filter-cats i{float: right;}
    .mobile-filter-cats:first-of-type{border-bottom: none;}
    .mobile-filter-cat-expanded ul.filter-ul{
        background: #fff;
        border: 1px solid #ccc;
        border-top: none;
        text-align: left;
        padding: 0;
        margin: 0;
    }
    .mobile-filter-cat-expanded ul.filter-ul li{list-style: none;}
    .mobile-filter-cat-expanded ul.filter-ul li a{
        display: block;
        text-decoration: none;
        line-height: 2rem;
        padding: 5px 15px;
        border-bottom: 1px solid #eee;
    }
    .mobile-filter-cat-expanded ul.filter-ul li a:hover{background: #fafafa;}
    a.filter-no-border{border: none !important}
    .selected-filters{
        text-align: left;
        border: 1px solid #ccc;
        border-top: none;
        padding: 15px;
        margin: 0
    }
    .selected-filters li{
        display: inline;
        list-style: none;
    }
    .selected-filters a{text-decoration: none;}

    #mobileMaterialScrollerWrapper{
        margin: 0;
        padding: 0;
        height: auto;
        overflow-y:hidden;
        border: none;
        border-top: 1px solid #ccc;
        text-align: left;
    }
    #mobileMaterialScrollerWrapper li img{margin-top: 2px;}
    .material-scroller-label{padding: 20px;}
    #mobileMaterialScrollerWrapper .rowText a:link, #materialScrollerWrapper .rowText a:visited, #materialScrollerWrapper .matName{color: #0072b7}
    .mat-description{clear: both; padding: 10px 0 0 5px; line-height: 1.2rem;}
    .material-scroller-label input, .material-scroller-label img, #materialScrollerWrapper .rowText{float: left;}
    .material-scroller-label img{margin-right: 15px}
    .button-div{margin:1rem 0 0 5px;}
    .button-div .button{margin-bottom: 0}
    .mobile-mats .rowText{font-size: .9rem}
    #mobileMaterialScrollerWrapper .rowText{width: auto; margin-left: 5px; float: left;}

    #matInfoHover{display: none !important;}
    .matching li:hover{background: #fafafa;}

    .customQty i.show-for-small-only{display: inline !important;}

}