#filters a {
    color: inherit;
    text-decoration: none;
}

#filters input[data-attribute] {
    display: none;
}

#filters input:not([disabled])+label {
    cursor: pointer;
}

#filters input[type="checkbox"]+label {
    background: url('../images/checkbox-off.svg') no-repeat top left;
    background-size: 18px;
    padding-left: 2em;
    max-width: 120px;
    min-width: 120px;
    vertical-align: top;
}

#filters input[type="checkbox"]:checked+label {
    background-image: url('images/checkbox-on.svg');
}

#filters input[type="radio"]+label {
    background: url('../images/radio-off.svg') left 10px no-repeat;
    background-size: 14px;
    line-height: 1em;
    padding-left: 1.5em;
    padding-right: 1em;
    min-width: 120px;
    vertical-align: top;
    color: #333;
}

.icon-filter {
    background: transparent;
    padding: 0.5em 0.3em;
}


#filters input[type="radio"]:checked+label {
    background-position: left 15px;
    background-image: url('images/radio-on.svg');
}

.frame-type-catalog_pi1 #filters input[type="radio"]+label {
    background-position: left 15px !important;
}

#filters input[type="radio"]+label:hover {
    color: #000;
}

#filters .active-filter-option {
    display: inline-block;
    margin-right: .5em;
}

ul.filtertype,
.filtercontainer {
    position: relative;
    border-bottom: 1px solid #bdbdbd;
}

.filtercontainer {
    background: #F7F7F7
}

ul.filtertype label {
    font-weight: 300;
}

.filtercontainer {
    font-size: 2em;
    padding: 0;
}

.activefiltervalue {
    font-size: .5em;
}

.glyphicon {
    background: black;
    color: #fff;
    padding: .5em;
    border-radius: 100%;
    font-size: 8px;
    margin-left: .4em;
}

#filters {
    height: 6em;
    background: #eee;
    margin-bottom: 7em;
}

ul.filtertype {
    display: flex;
    width: 100%;
}

ul.filtertype::after,
.filtercontainer::after {
    left: auto;
    right: -4000px;
}

ul.filtertype li {
    flex: 1 1 auto;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    vertical-align: top;
    text-align: center;
}

ul.filtertype li {
    min-height: 43px;
}


.filtertype li ul,
.filtertype li ul li {
    text-align: left;
}

.filtertype li li {
    padding: .2em 0em;
    border-right: none;
    border-bottom: none;

}

ul.filtertype li label {
    padding: .5em .5em;
    margin-bottom: 0;
}

ul.filtertype li label {
    /*max-width: 125px;*/
    /*white-space: nowrap;*/
    overflow: hidden;
    line-height: 1em;
    padding: .5em .40em .5em;
    /*max-height: 37px;*/
    font-weight: 400;

}

ul.filtertype li li label {
    max-width: none;
    white-space: inherit;
    overflow: auto;
    min-height: 28px;
    max-height: none;
    padding: .8em .4em
}


ul.filtertype li label {
    cursor: pointer;
}

label:empty {
    display: none !important;
}

/*ul.filtertype li:nth-child(1):hover,
ul.filtertype li:nth-child(1).active {
    border-left-color: #eeeeee;
}*/


ul.filtertype li:hover li,
ul.filtertype li.active li {
    background: none;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    font-weight: 600;
    color: #000;
    flex: 0 0 auto;
}

/*ul.filteropties::before,
ul.filteropties::after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -4000px;
    width: 4000px;
    background: #eeeeee;
    border-bottom: 1px solid #bdbdbd;
    border-top: 1px solid #bdbdbd;
    z-index: 1;
}

ul.filteropties::after {
    left: auto;
    right: -4000px;
}*/

.filterlabel.disabled {
    opacity: .3;
    cursor: default
}

.filterlabel.disabled label {
    cursor: inherit;
}

.backendlayout-2_columns_25_75 .maincontent-wrap {
    order: 2;
}

.backendlayout-2_columns_25_75 .subcontent-wrap {
    order: 1;
}



@media (min-width:992px) {

    #filters {
        background: transparent;
        height: auto;
        margin-top: 40px;
    }

    .filtercontainer {
        background: transparent;
    }

    .filterlabel {
        border-bottom: 1px solid #bdbdbd;
    }

    .backendlayout-2_columns_25_75 .maincontent-wrap {
        order: 2;
    }

    .backendlayout-2_columns_25_75 .subcontent-wrap {
        order: 1;
    }

    ul.filtertype {
        background-color: #f8f8f8;
        flex-direction: column;
        padding-left: 0;
        border: 0;
    }

    ul.filtertype li.filterlabel > label{
        padding: 0.8em 0.6em;
    }

    ul.filtertype > li label, 
    .frame-type-catalog_pi1 ul.filtertype li label {
        font-size: 1em;
    }

    ul.filtertype > li ul.filteropties li label, 
    .frame-type-catalog_pi1 ul.filtertype > li ul.filteropties li label {
        font-size: 0.9em;
        font-weight: normal;
    }

    ul.filtertype li.active label {
        color: #db0c16;
    }

    ul.filtertype li.active li {
        border: 0;
    }
    ul.filtertype li.active ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding-left: 0;
    }

    ul.filtertype li ul {
        display: none;
        border-top: 1px solid #bdbdbd;
    }

    ul.filtertype li.active,
    .frame-type-catalog_pi1 .catalog #filters ul li {
        /*background: url('../images/down.svg') center calc(100% - 5px) no-repeat;*/
        background: none;
        background-size: 10px;
        padding: 0;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 10px;
        line-height: 1em;

    }
    .frame-type-catalog_pi1 .catalog #filters ul.filtertype li.filterlabel {
        background: url('../images/down.svg') calc(100% - 10px) 20px no-repeat;
        background-size: 10px;
    }
    .frame-type-catalog_pi1 .catalog #filters ul.filtertype li.filterlabel.active {
        background: url('../images/up.svg') calc(100% - 10px) 20px no-repeat;
        background-size: 10px;
    }

    [lang=fr] ul.filtertype li.active {
        background: none;
    }

    /*ul.filtertype::before, ul.filtertype::after, .filtercontainer::before, .filtercontainer::after {
        content:'';
        display: block;
        position: absolute;
        top: 0;
        bottom: -1px;
        left: -4000px;
        width: 4000px;
        background: #eeeeee;
        border-bottom: 1px solid #bdbdbd;
    }

    ul.filtertype::after,.filtercontainer::after {
        left: 0;
        right: -4000px;
        z-index: -1;
    }

    ul.filtertype::before, ul.filtertype::after {
        border-bottom: none;
    }

    .filtercontainer::before, .filtercontainer::after {
        background: #F7F7F7;
    }*/
    .fake_mobile {
        display: none;
    }

}

@media (max-width:992px) {

    .icon-filter:before {
        display: none;
    }

    .icon-filter:after {
        font-size: 1em;
        margin-left: -.5em;
    }

    #filters {
        height: auto;
        border-bottom: 0;
        margin-bottom: 1em;
        border-top: none;
        background: none;
    }

    .filtercontainer::before,
    .filtercontainer::after {
        border-top: 1px solid #bdbdbd;
        top: -1px;
    }
    .fake_mobile {
        display: block;
        position: inherit;
        background: #eee url('../images/down.svg') calc(100% - 10px) 30px no-repeat;
        background-size: 10px;
        padding: 1em;
        border: 1px solid #ddd;
        margin-bottom: 0px;
        font-weight: 400;
        color: #000;
    }

    .fake_mobile input {
        display: none;
    }

    ul.filteropties::before,
    ul.filteropties::after {
        display: none;
    }

    ul.filtertype,
    .filtercontainer {
        border-bottom: none;
        background: none;
    }

    .filtercontainer {
        padding: .2em 0;
    }

    ul.filtertype {
        /*        position: relative;
                width: 50%;*/
        display: inherit;
    }

    #filters ul {
        background: #f7f7f7;
    }

    .icon-filter {
        display: none;
    }

    #filters .active-filter-option {
        background: #eee;
        border-radius: 5px;
        padding: 0 5px;
        line-height: 1em;
        background: #ccc;
    }

    #filters ul#active-filters {
        border: none;
        background: none;
    }

    ul.filtertype li {
        display: none;
        text-align: left;
        padding: 0em;
        border-top: 1px solid #999;
        background: #eee url(images/right.svg) calc(100% - 10px) center no-repeat;
        background-size: 5px;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    ul.filtertype li:nth-child(1):hover,
    ul.filtertype li:nth-child(1).active {
        border-left: 1px solid #ddd;
    }

    ul.filtertype.open li {
        display: block;
    }

    ul.filtertype li:focus,
    ul.filtertype li:hover {
        background: #aaa;
    }

    .filterlabel.disabled {
        display: none !important;
    }

    .glyphicon {
        margin-left: .5em;

    }

    ul.filtertype li label {
        margin-bottom: 0;
        padding: 1em;
    }

    ul.filtertype li:focus label,
    ul.filtertype li:hover label {
        color: #db0c16;
    }

    ul.filtertype li ul {
        width: 0;
        max-width: 0px;
        /*        right: auto;*/
        /*        position: absolute;
                left: 100%;
                top: 49px;*/
        display: none;
        z-index: 999;
        border-bottom: 1px solid #ddd;
    }

    ul.filtertype li:hover ul,
    ul.filtertype li:focus ul {
        width: 100%;
        max-width: none;
        display: block;
        min-height: 100%;
    }


    #filters input[type="radio"]+label {
        background: #f7f7f7;
        border-top: 1px solid #ddd;
        display: block;
        margin-bottom: 0;
        max-width: none;
        text-align: left;
    }
    .frame-type-catalog_pi1 #filters input[type="radio"]:checked + label,
    #filters input[type="radio"]:checked+label {
        color: #db0c16 !important;
        background-image:unset !important;
    }
    .frame-type-catalog_pi1 ul.filtertype li label {
        padding: 0.8em 0;
    }
    ul.filtertype li ul li {
        background: #f7f7f7;
        text-align: center;
        border-bottom: none;
        padding: 0 0 0 0;
        border-right: 1px solid #ddd;
    }
    .frame-type-catalog_pi1 .catalog #filters ul li {
        width: 100%;
        height: auto;
        padding: 0.4em;
        margin-bottom: 0.4em;
        margin-right: 0;
    }
    .frame-type-catalog_pi1 .catalog #filters ul li label{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .frame-type-catalog_pi1 .catalog #filters ul li label span{
        padding: .2em .5em;
        width: 18px;
        height: 18px;
    }
    .frame-type-catalog_pi1 .catalog #filters ul#active-filters {
        justify-content: start;
    }
}
@media (max-width: 1300px) {
  .frame-type-catalog_pi1 .catalog #filters ul li:hover,
  .frame-type-catalog_pi1 #filters input[type="radio"] + label {
        background-color: #f8f8f8;
    }
  .frame-type-catalog_pi1 #filters input[type="radio"]:checked + label {
        background-image: url('../images/radio-on.svg');
    }
}