.searchfilterwrapper {
    margin-block-end: 1.5rem;
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 100%;
    z-index: 1;

    /* Used in ppro only so hide for main search */
    .filter-header {
        display: none;
    }
}

.searchFilters {
    border: 1px solid;
    padding: 1.5rem .75rem 0;
}

.filterOptionsSection {
    margin-block-end: 1.5rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    .u-date,
    .u-select {
        border-radius: 2px;
        height: 35px;
        padding-block: 0;
        padding-inline: .375rem 0;
    }

    .u-date {
        padding-inline: .375rem;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.filterOptionsSection:has(.u-select) .filter {
    position: relative;
}

.searchFilters.isLoading .searchFilters-resetFilters,
.searchFilters.isLoading .filterOptionsSection {
    display: none;
}

.filterOptionsSection:has(.u-select) .filter::after {
    align-items: center;
    background-color: #fff;
    content: '\e91f';
    display: flex;
    font-family: 'Imagenweb';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: calc(100% - 6px);
    inset-block-start: 3px;
    inset-inline-end: 4px;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    speak: none;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    width: 30px;
}

.filterRow  {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-block-end: .75rem;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.filterLabel {
    cursor: pointer;
    flex-grow: 1;
    overflow: hidden;
    padding-inline-end: .375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filterValue {
    overflow: hidden;
    text-overflow: ellipsis;
}

.filterRow  .filterLabel + .filterValue {
    flex-shrink: 0;
}

.ratingFilter-star {
    align-items: center;
    display: flex;
}

.u-link.ratingFilter:hover {
    text-decoration: none;
}

.searchFilters-resetFilters {
    margin-block-end: 1.5rem;
}

.dateFilter-toGroup::before,
.dateFilter-fromGroup::before {
    content: "\e905";
    font-family: 'Imagenweb';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dateFilter-toGroup,
.dateFilter-fromGroup {
    margin-block-end: .75rem;
    position: relative;

    &::before {
        inset-inline-end: 10px;
        inset-block-start: 38px;
        opacity: .5;
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }
}

.filterTitle {
    display: inline-block;
    margin-block-end: .75rem;
    overflow: hidden;
    padding-block-end: 0;
    position: relative;
    text-overflow: ellipsis;
    transition: padding-block-end .4s cubic-bezier(.645, .045, .355, 1) .4s;
    width: 100%;
}

.filterTitle .u-label {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
    white-space: nowrap;
}

/* Padding bottom here allows space for the input to transition down and open */
.filterTitle.active {
    padding-block-end: 48px;
    transition:padding-block-end .4s cubic-bezier(.645, .045, .355, 1) 0s;
}

.filterSearchInput {
    display: flex;
    font-size: 1.2rem;
    inset-block: 0;
    inset-inline-end: 0;
    justify-content: flex-end;
    max-height: 35px;
    position: absolute;
    transition: top .4s cubic-bezier(.645, .045, .355, 1) .4s;
    width: 100%;
}

.filterTitle.active .filterSearchInput {
    inset-block-start: 30px;
    transition: top .4s cubic-bezier(.645, .045, .355, 1) 0s;
}

.u-inputTxt--filterSearchInput {
    font-size: .8rem;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    max-height: 0;
    opacity: 0;
    padding-block: 0;
    padding-inline: .375rem;
    text-transform: lowercase;
    transition: width .5s cubic-bezier(.645, .045, .355, 1) 0s, opacity .45s cubic-bezier(.645, .045, .355, 1) 0s, max-height .3s cubic-bezier(.645, .045, .355, 1) .3s;
    width: 0;
}

.filterTitle:not(.active) .u-inputTxt--filterSearchInput {
    max-height: 0;
    width: 0;
}

.filterTitle.active .u-inputTxt--filterSearchInput {
    opacity: 1;
    max-height: 35px;
    width: 100%;
    transition: width .6s cubic-bezier(.645, .045, .355, 1) 0.1s, opacity 0.2s cubic-bezier(.645, .045, .355, 1) 0.2s, max-height 0.4s cubic-bezier(.645, .045, .355, 1) 0s
}

.filterSearchIcon {
    backface-visibility: hidden;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    inset-inline-end: 5px;
    inset-block-start: calc(50%);
    padding: 0;
    pointer-events: all;
    position: absolute;
    transform: translateY(calc(-50% - .375rem)) translateX(0);
    transition: opacity .45s cubic-bezier(.645, .045, .355, 1) 0s, color .45s cubic-bezier(.645, .045, .355, 1) 0s, transform .6s cubic-bezier(.645, .045, .355, 1);
}

.filterTitle.active .filterSearchIcon {
    transform: translateY(-50%) translateX(-.375rem);
    transition: transform .6s cubic-bezier(.645, .045, .355, 1);
}

.filterTitle.active .filterSearchIcon {
    pointer-events: none;
}

.filterTitle.active .u-inputTxt--filterSearchInput:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: -3px;
    border-radius: 2px;
}

/* confusing UI if the IE clear icon is visible */
.u-inputTxt--filterSearchInput::-ms-clear {
    height: 0;
    width : 0;
}

.filterRow--additive {
    position: relative;
    align-items: center;

    .filterLabel {
        min-height: 21px;
        height: 100%;
        line-height: 21px;
    }
}

.u-chk-filter {
    opacity: 0;
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    inset-block-start: 2px;
    cursor: pointer;
    inset-inline-start: -1px;
}

.u-chk-filter:checked + .u-label-chk::before {
    border-color: transparent;
}

.u-chk-filter:hover + .u-label-chk::before {
    /* ToDo: Replace with CSS variable when we have a global palette of colors */
    border-color: #428bca;
}

.u-chk-filter:checked + .u-label-chk::after {
    border-color: transparent;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.u-label-chk {
    padding-inline-start: 25px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;

    &::before,
    &::after {
        position: absolute;
        cursor: pointer;
        inset-block-start: 2px;
        width: 18px;
        height: 18px;
        inset-inline-start: 1px;
        border-radius: 4px;
    }

    &::before {
        content: '';
        /* ToDo: Replace with CSS variable when we have a global palette of colors */
        border: 2px solid #86b4db;
        -webkit-transition: all .8s cubic-bezier(.175, .885, .320, 1.275);
        transition: all .8s cubic-bezier(.175, .885, .320, 1.275);
    }

    &::after {
        content: "\e952";
        background-color: #428bca;
        color: #fff;
        font-family: "Imagenweb";
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transition: all .2s;
        transition: all .2s;
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        font-size: 10px;
        text-align: center;
        inset-block-end: 0;
        line-height: 14px;
        /* ToDo: Replace with CSS variable when we have a global palette of colors */
        border: 2px solid #428bca;
    }
}

.formSubmit--rangeFilter {
    inset-block-start: -1.5rem;
    position: relative;
}

.formSubmit--rangeFilter + .searchFilters-clearFilter {
    position: relative;
    inset-block-start: -1.5rem;
    margin-block-end: 1.5rem;
}

.filterTitle.u-label {
    margin-block-end: 0;
}

/* landscape smartphones, iPhone480px */
@media all and (min-width:30em) {}

/* portrait e-readers (Nook/Kindle), smaller tablets 600px or 640px wide. */
@media all and (min-width:36.063em) {

    .filterOptionsSection .u-date {
        font-size: .9rem;
    }
}

/* Galaxy S5 */
@media (min-width:37.5em) {}

/* portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
@media (min-width:44.063em) {}

/*  portrait iPad 768px */
@media (min-width: 48em) {

    .btn--searchFilter,
    .searchfilterwrapper {
        width: 325px;
    }

    .btn--searchFilter {
        grid-area: 2 / 1 / 3 / 2;
    }

    .searchfilterwrapper {
        grid-area: 3 / 1 / 4 / 2;
    }

    .filterSearchInput {
        font-size: 1rem;
    }
}

/* tablet, landscape iPad, lo-res laptops and desktops */
@media (min-width: 56.25em) {

    .searchfilterwrapper {
        order: 3;
    }
}

/* small desktops 1000px */
@media (min-width:62.5em) {}

/* big landscape tablets, laptops, and desktops */
@media (min-width:68.75em) {}

/* custom 1 */
@media (min-width: 80.25em) {}

/* custom 1.5 */
@media (min-width:92.25em) {}

/* hi-res laptops and desktops */
@media (min-width:100.25em) {}

/* largest */
@media (min-width:117em) {}