.collection-filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    background: #F3F3F3;
    padding: 15px;

    .field-container {
        flex: 0 1 calc(100% / 10);
        position: relative;
    }

    button {
        cursor: pointer;
        padding: 8px 24px;
        border: 1px solid transparent;
        line-height: 150%;
        transition: background-color .3s;
        font-size: 0.875rem;
        vertical-align: middle;
        font-family: inherit;
        height: 40px;
    }

    .sum-container {
        margin-left: auto;
    }

    .submit-button {
        background-color: #333333;
        color: white;

        &:hover {
            background-color: black;
        }
    }

    .select-button {
        background-color: white;
        color: #1A5C9E;
        border-color: #BFBFBF;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.799999999999997' height='16.799999999999997' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center right 24px;
        padding-right: 48px;
        width: 100%;
        white-space: nowrap;
        position: relative;

        &:hover {
            background-color: #F3F3F3;
        }

        .badge {
            position: absolute;
            min-width: 18px;
            height: 18px;
            border-radius: 500px;
            background: #E2001A;
            color: #fff !important;
            font-size: 11px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            top: -9px;
            left: 10px;
        }
    }

    .select-dropdown {
        background: white;
        min-width: 100%;
        position: absolute;
        z-index: 1;
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
        margin-top: 5px;
    }

    .select-dropdown > ul {
        padding: 7px 0;

        li {
            padding: 7px 20px;
            font-size: 0.875rem;
            transition: background-color .3s;
            white-space: nowrap;
            &:not(&:last-child) {
                border-bottom: 1px solid white;
            }

            &.selected {
                background-color: #F3F3F3;
                color: black;
            }

            &:hover {
                background-color: #e6e6e6;
                cursor: pointer;
            }
        }

    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    .filter-input {
        vertical-align: middle;
        display: inline-block;
        padding: 0 10px;
        background: white;
        color: #4D4D4D;
        border: 1px solid #BFBFBF;
        font: inherit;
        height: 40px;
        box-sizing: border-box;
        width: 100%;

        &:focus {
            border: 1px solid #406FCB;
            outline: none;
        }
    }

    .fulltext-container {
        flex: 1 1 30%;
    }

    a {
        color: #1A5C9E;
        transition: all .3s;

        &:hover {
            color: #10375E;
        }
    }

    label.field-label {
        font-size: 0.875rem;
    }

    .clear-btn {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-basis: 100%;

        a {
            display: flex;
            gap: 5px;
            align-items: center;
        }
    }

}