.materials-filter { margin: 18px 0 24px; }
.materials-filter__btn {
    border: none;
    border-bottom: 1px solid #afe2e3;
    background: none;
    box-shadow: none;
    padding: 0px;
    line-height: 1;
    display: flex;
    align-items: center;
    padding: 10px 0;
    gap: 30px;
}
.js-mat-dd-title {
    color: var(--color-dark-green);
    font-family: var(--font-century);
    font-size: 21px;
    line-height: 1;
}
.materials-filter__caret {
    width: 0; height: 0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--color-blue);
}
.materials-filter__panel {
    position: absolute;
    left: 0;
    top: calc(100% + 2px);
    width: 250px;
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 0;
    font-size: 15px;
    color: #8f8f8f;
    z-index: 50;
}
.materials-filter__item {
    min-height: 14px;
    padding: 5px 10px 6px;
}
.materials-filter__item.is-checked,
.materials-filter__item:hover {
    color: #00413f;
}
.materials-filter__check {
    min-height: 20px;
    cursor:pointer;
    position: relative;
    display: block;
    padding: 0 0 0 28px;
}
.materials-filter__check:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}
.materials-filter__check:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 4px;
    transform: rotate(-55deg) skew(-20deg);
    display: block;
    width: 10px;
    height: 5px;
    border-color: var(--color-dark-green);
    border-style: solid;
    border-width: 0 0 2px 2px;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}
.materials-filter__item.is-checked .materials-filter__check:after {
    opacity: 1;
    visibility: visible;
}

.materials-filter__actions { display:flex; gap:10px; margin-top: 10px; }

.materials-filter__dropdown{ position:relative; display:inline-block;z-index: 50; }