/*
Description: filter.tpl styles
*/

@media only screen and (min-width: 320px) {

    body.ith-filter-visible .listRefine .filter-options,
    .listRefine .filter-options {
        position: fixed;
        left: -160%;
        top: 0;
        width: 80%;
        min-width: 300px;
        height: 100%;
        box-shadow: 10px 0 25px 0 rgb(0 0 0 / 10%);
        background-color: #E5E5E5;
        z-index: 999999;
        padding: 25px 40px;
        overflow: auto;

        -webkit-transition: all 350ms ease;
        -moz-transition: all 350ms ease;
        -ms-transition: all 350ms ease;
        -o-transition: all 350ms ease;
        transition: all 350ms ease;
    }

    body.ith-filter-visible .listRefine .filter-options,
    .ith-filter-visible .listRefine .filter-options {
        left: 0;
    }

    .listRefine .filter-options .ith-filter-container {
        padding: 0;
        background: transparent;
        margin: 0;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div {
        width: 100%;
        padding: 0;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>button.btn,
    .listRefine .filter-options .ith-active-filter-container .active-filter li h7 {
        width: auto;
        background-color: transparent;
        border: 0;
        outline: none;
        font-size: 24px;
        color: #474747;
        padding-left: 0;
        padding-right: 0;
        padding: 7px 5px;
        margin-bottom: 7px;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>button.btn .caret {
        display: none;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu {
        background-color: transparent;
        position: relative;
        box-shadow: none;
        border: 0;
        display: block;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a,
    .listRefine .filter-options .ith-filter-flow .dropdown-menu a {
        font-size: 14px;
        color: #474747;
        padding-left: 0;
        padding-right: 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .listRefine .filter-options .ith-filter-flow .dropdown-menu a:hover,
    .listRefine .filter-options .ith-filter-flow .dropdown-menu a:focus {
        background-color: transparent;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.check {
        flex: 0 0 80%;
        white-space: normal;
        display: flex;
        align-items: center;
        position: relative;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.check input[type="checkbox"] {
        margin: 0 10px 0 0;
        position: relative;
        z-index: 2;
        opacity: 0;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.check label {
        hyphens: auto;
        width: 85%;
        vertical-align: middle;
        margin-bottom: 0;
        left: -26px;
        position: relative;
        padding-left: 26px;
        cursor: pointer;
        z-index: 3;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.check label:after {
        content: '\f0c8';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
        font-family: 'Font Awesome 5 Pro';
        z-index: 1;
        line-height: normal;
        cursor: pointer;
        color: #8c8c8c;
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.check>input[type="checkbox"]:checked+label:after {
        content: '\f14a';
    }

    .listRefine .filter-options .ith-filter-container.ith-filter-flow>div>ul.dropdown-menu>li>a>.ith-count {
        font-size: 14px;
        background-color: #535353cf;
        color: white;
        padding: 0;
        border-radius: 15px;
        flex: 1;
        text-align: center;
        line-height: 20px;
        height: 20px;
        max-width: 32px;
    }

    .ith-filter-container span.count {

        font-size: 14px;
        background-color: #535353cf;
        color: white;
        padding: 0;
        border-radius: 15px;
        flex: 1;
        text-align: center;
        line-height: 20px;
        height: 20px;
        max-width: 32px;
    }

    .listRefine .filter-options .ith-active-filter-container {
        margin-bottom: 40px;
    }

    .listRefine .filter-options .ith-active-filter-container .active-filter li {
        width: 100%;
        float: none;
        margin-top: .5em;
    }

    .listRefine .filter-options .ith-active-filter-container .active-filter li a,
    .listRefine .filter-options .ith-active-filter-container>a {
        line-height: normal;
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 0 24px;
        align-items: center;
        justify-content: flex-start;
        color: #282828;
        margin-bottom: 7px;
    }

    .listRefine .filter-options .ith-active-filter-container .active-filter li a:focus,
    .listRefine .filter-options .ith-active-filter-container .active-filter li a:active,
    .listRefine .filter-options .ith-active-filter-container .active-filter li a:hover,
    .listRefine .filter-options .ith-active-filter-container>a:focus,
    .listRefine .filter-options .ith-active-filter-container>a:active,
    .listRefine .filter-options .ith-active-filter-container>a:hover {
        text-decoration: none;
    }

    .listRefine .filter-options .ith-active-filter-container .active-filter li a i,
    .listRefine .filter-options .ith-active-filter-container>a>i {
        flex: 0 0 18px;
        line-height: normal;
        font-size: 16px;
        vertical-align: middle;
        margin-left: -24px;
        color: #db5e5e;
        margin-right: 6px;
    }

    .listRefine .filter-options .ith-active-filter-container a.remove {
        color: #e20018;
    }

    .listRefine .filter-options .ith-active-filter-container>a {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        margin-top: 20px;
        padding-top: 10px;
        color: rgba(67, 67, 67, 0.5);
        padding-left: 0;
    }

    .listRefine .filter-options .ith-active-filter-container>a>i {
        display: none;
    }

    .listRefine .filter-options .ith-active-filter-container .active-filter li a>span {
        color: #474747;
        flex: 0 0 85%;
    }

    body .listRefine .filter-options .close-filter {
        display: none;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 32px;
        cursor: pointer;
    }

    body.ith-filter-visible .listRefine .filter-options .close-filter {
        display: block;
    }

    .refineParams .options .btn-group button,
    .refineParams .options .btn-group {
        width: auto !important;
    }
}

@media only screen and (min-width: 768px) {

    body.ith-filter-visible .listRefine .filter-options,
    .listRefine .filter-options {
        width: 50%;
    }
}

@media only screen and (min-width: 991px) {
    body .listRefine .filter-options .close-filter {
        font-size: 25px;
    }

    body.ith-filter-visible .listRefine .filter-options,
    .listRefine .filter-options {
        padding: 25px 60px;
    }

    body.ith-filter-visible .listRefine .filter-options,
    .listRefine .filter-options {
        width: 20%;
    }
}