@charset "UTF-8";

/** Filters */
@media only screen and (max-width: 768px) {
    #narrow-by-list [data-attribute="p_farbe_group"] {
        text-align: center;
    }
}

#narrow-by-list .color_filter_item {
    display: inline-block;
    text-align: center;
    margin: 0 1px 10px 0;
    line-height: 15px;
}

#narrow-by-list .color_filter_item a {
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #ccc;
    width: 48px;
    height: 48px;
    position: relative;
}

#narrow-by-list .color_filter_item a[data-selected] {
    border: 2px solid #000;
}

#narrow-by-list .color_filter_item a:hover {
    border: 2px solid #000;
}

/** black icon */
#narrow-by-list .color_filter_item a:focus .square-icon:after ,
#narrow-by-list .color_filter_item a[data-selected] .square-icon:after {
    background: url(../images/pl_icon_check.svg);
    content: "";
    height: 50%;
    width: 50%;
    position: absolute;
    z-index: 9;
    left: 11px;
    top: 11px;
}

.itemslider-wrapper .material-item.active .material-image:after,
.category-products .material-item.active .material-image:after {
    content: "";
    height: 4px;
    width: 10px;
    position: absolute;
    z-index: 9;
    left: 6px;
    top: 8px;
    transform: rotateY(0deg) rotate(-90deg);
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
}

/** inverse = white */
#narrow-by-list [data-selected] .square-icon.antraciet:after,
#narrow-by-list [data-selected] .square-icon.blauw:after,
#narrow-by-list [data-selected] .square-icon.bordeaux:after,
#narrow-by-list [data-selected] .square-icon.braun:after,
#narrow-by-list [data-selected] .square-icon.bruin:after,
#narrow-by-list [data-selected] .square-icon.bunt:after,
#narrow-by-list [data-selected] .square-icon.kleurrijk:after,
#narrow-by-list [data-selected] .square-icon.gruen:after,
#narrow-by-list [data-selected] .square-icon.groen:after,
#narrow-by-list [data-selected] .square-icon.rood:after,
#narrow-by-list [data-selected] .square-icon.zwart:after,
#narrow-by-list [data-selected] .square-icon.violette:after,
#narrow-by-list [data-selected] .square-icon.terrakotta:after,
#narrow-by-list [data-selected] .square-icon.mokka:after,
#narrow-by-list [data-selected] .square-icon.petrol:after,
#narrow-by-list [data-selected] .square-icon.olive:after,
#narrow-by-list [data-selected] .square-icon.dunkelgrau:after,
#narrow-by-list [data-selected] .square-icon.dunkelblau:after,
#narrow-by-list [data-selected] .square-icon.aubergine:after,
#narrow-by-list [data-selected] .square-icon.blau:after,
#narrow-by-list [data-selected] .square-icon.braun:after,
#narrow-by-list [data-selected] .square-icon.grün:after,
#narrow-by-list [data-selected] .square-icon.orange:after,
#narrow-by-list [data-selected] .square-icon.rot:after,
#narrow-by-list [data-selected] .square-icon.schwarz:after,
#narrow-by-list [data-selected] .square-icon.violett:after {
    -webkit-filter: invert(1);
    filter: invert(1);
}

#narrow-by-list .color_filter_item a[data-selected] + .option-name {
    font-weight: bold;
    color: #000;
}

#narrow-by-list .option-name {
    font-size: .75rem;
    line-height: 1.5em;
    display: block;
    text-align: center;
}

#narrow-by-list .option-counter {
    font-size: .75rem;
    line-height: 1.5em;
    display: block;
    text-align: center;
    color: #999;
}

#narrow-by-list .square-icon {
    display: inline-block;
    border: 2px solid #fff;
    height: 44px;
    width: 44px;
    margin: 0;
    border-radius: 50%;
    position: relative;
}


/** Colors */
.color_filter_item {
    display: inline-block;
    margin-top: 1px;
}

.square-icon {
    display: inline-block;
    border: 2px solid #ccc;
    height: 32px;
    width: 32px;
    margin: 0 5px 0 0;
    vertical-align: inherit;
    position: relative;
}

tr:hover .square-icon {
    opacity: 1;
}

.altweiss {
    background-color: #fafaf8
}

.anthrazit {
    background-color: #666666
}

.antraciet {
    background-color: #666666
}

.aqua {
    background-color: #c5e8ea
}

.beige {
    background-color: #f0ede2
}

.blau {
    background-color: #334882
}

.blauw {
    background-color: #334882
}

.bordeaux {
    background-color: #990000
}

.braun {
    background-color: #7e3906
}

.bruin {
    background-color: #7e3906
}

.bunt {
    background-color: #00c15d
}

.kleurrijk {
    background-color: #00c15d
}

.cappuccino {
    background-color: #f0ede2
}

.creme {
    background-color: #f0ede2
}

.сremefarbig {
    background-color: #f0ede2
}

.gelb {
    background-color: #ffd328
}

.geel {
    background-color: #ffd328
}

.grau {
    background-color: #cccccc
}

.grijs {
    background-color: #cccccc
}

.gruen {
    background-color: #198505
}

.grün {
    background-color: #198505
}

.groen {
    background-color: #198505
}

.orange {
    background-color: #ee9200
}

.pink {
    background-color: #ff889e
}

.rosa {
    background-color: #ff889e
}

.rot {
    background-color: #d52a1d
}

.rood {
    background-color: #d52a1d
}

.schlamm {
    background-color: #8c8374
}

.schwarz {
    background-color: #000000
}

.zwart {
    background-color: #000000
}

.silber {
    background-color: #d4d1d8
}

.violett {
    background-color: #68119a
}

.taupe {
    background-color: #a1988f
}

.terrakotta {
    background-color: #cc6600
}

.violette {
    background-color: #8d0082
}

.weiß {
    background-color: #ffffff
}

.natur {
    background-color: #d9c9b9
}

.mokka {
    background-color: #3f2a27
}

.türkis {
    background-color: #009999
}

.petrol {
    background-color: #00545e
}

.ecru {
    background-color: #f4e6cf
}

.olive {
    background-color: #445718
}

.lila {
    background-color: #cea5f8
}

.latte {
    background-color: #ccb69e
}

.hellgrau {
    background-color: #94a3a0
}

.gold {
    background-color: #cfa935
}

.dunkelgrau {
    background-color: #37404c
}

.dunkelblau {
    background-color: #041f4e
}

.aubergine {
    background-color: #8d0082
}

.wit {
    background-color: #ffffff
}