.filter-button,
.filter-clear {
    width:100%; 
    margin:0px;
    padding:5px 10px;
    border-radius:5px;
    border:1px solid #d7ddde;
    background-color:#fcfcfc;
    color:#444;
}

.filter-button i,
.filter-clear i {
    margin-right:5px;
}

.filter-button {
    max-width:288px;
}

.filter-button span {
    float:right;
    margin-left:10px;
    font-weight:600;
}

.filter-clear {
    width:auto;
    cursor:pointer;
}

.filter-box {
    padding-left:12px;
    margin:0px;
}

.filter-box > .container {
    background-color:#eff1f1;
    padding:12px 10px;
    margin:0px;
}

.filter-option {
    padding:15px 5px 15px;
    border-bottom:1px solid #d7ddde;
}

.filter-box .filter-option:first-child {
    padding-top:5px;
}

.filter-box .filter-option:last-child {
    border-bottom:none;
}

.filter-spec {
    display:flex;
    justify-content: space-between;
    align-items:center;
}

.filter-spec i,
.filter-spec h4 {
    display:block;
    margin:0px;
}

.filter-spec i {
    color:#444;
    margin-left:auto;
}

.filter-spec h4 {
    color:#444;
    padding-right:3px;
}

.filter-spec span {
    font-size:14px;
    margin-left:3px;
}

.filter-spec i::before {
    transform-origin: center center; 
    transition: transform 200ms ease-in-out;
    display:block;
}

.filter-option-close .filter-spec i::before {
    transform: rotate(-180deg);
}

.filter-option-close .filter-values {
    display:none;
}

.filter-values {
    list-style: none;
    margin:0px;
    padding:0px;
}

.filter-values li {
    font-size:12px;
    display:flex;
    flex-wrap: none;
    align-items:start;
    padding:1px 0px;
}

.filter-values li:first-child {
    padding-top:10px;
}

.filter-values li:last-child {
    padding-bottom:5px;
}

.filter-values li input {
    cursor: pointer;
    margin:auto;
}
.filter-values li label {
    padding-left:8px;
    flex-grow:1;
    cursor:pointer;
}

.filter-values li span {
    display:block;
    margin-left:auto;
}

.filter-close {
    display:none;
    font-size:28px;
    text-align:right;
    margin-right:5px;
    color:#444;
}

@media all and (max-width: 1200px) {
    .filter-display .product-list-specs {
        display:none;
    }

    .filter-display .product-list-details {
        width:100%;
    }
}


@media all and (min-width: 993px) {
    .filter-clear:hover {
        color: #942B28;
    }
}

@media all and (max-width: 992px) {

    .filter-button {
        cursor:pointer;
        max-width:220px;
    }

    .filter-box {
        position:fixed;
        width:auto;
        padding:0px;
        z-index:110;
        top:0px;
        bottom:0px;
        left:-300px;
        width:300px;
        transition:left 400ms;
        overflow-y:scroll;
        height:100vh;
    }

    .filter-mobile-show {
        left:0px;
    }

    .filter-box li {
        padding:3px 0px;
    }

    .filter-box input {
        margin:auto;
    }

    .filter-spec h4,
    .filter-spec i {
        font-size:15px;
    }

    .filter-values li:first-child {
        padding-top:15px;
    }

    .filter-values li:last-child {
        padding-bottom:10px;
    }
    
    .filter-values li {
        font-size:14px;
    }

    .filter-close {
        display:block;
    }

}