.hne-event-filters {
    .filter-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .label {
            color: var(--wp--preset--color--gray-text);
            font-size: var(--wp--preset--font-size--p-4-manrope);
            font-style: normal;
            font-weight: 500;
            line-height: 133.333%;
            letter-spacing: 0.36px;
            text-transform: uppercase;
            margin-right: 40px;
        }

        select {
            color: var(--wp--preset--color--gray-placeholder);
            font-size: 1rem;
            font-style: normal;
            font-weight: 500;
            line-height: 135.714%;
            border-radius: 0;
            border: 1px solid var(--wp--preset--color--separator-gray);
            padding: 10px 13px 10px 13px;
            min-width: 258px;
        }
    }
    .dropdowns {
        display: flex;
        align-items: center;
        column-gap: 12px;
    }
    .keyword-search {
        display: flex;
        column-gap: 16px;

        .keyword-search-container {
            display: flex;
            border: 1px solid var(--wp--preset--color--haverhill-orange-bright);
            align-items: center;
            padding-right: 13px;
            input {
                border: none;
                font-size: 1rem;
                padding: 4px 13px 4px 13px;
                height: 30px;
                width: 288px;
                margin-right: 8px;
                position: relative;
                appearance: none;
                &::placeholder {
                    font-size: 14px;
                }
            }
            &:after {
                content: '';
                background-image: url("data:image/svg+xml, %3Csvg%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path=%22url(%23clip0_693_2661)%22%3E%0A%3Cpath%20d=%22M15.7333%2014.4444L11.5778%2010.2889C11.5333%2010.2444%2011.5111%2010.2222%2011.4667%2010.2C13.3556%207.71111%2013.1556%204.13333%2010.8889%201.86667C8.4%20-0.622222%204.35556%20-0.622222%201.86667%201.86667C-0.622222%204.35556%20-0.622222%208.4%201.86667%2010.8889C4.13333%2013.1556%207.71111%2013.3556%2010.2%2011.4667C10.2222%2011.5111%2010.2667%2011.5556%2010.2889%2011.5778L14.4444%2015.7333C14.8%2016.0889%2015.3778%2016.0889%2015.7333%2015.7333C16.0889%2015.3778%2016.0889%2014.8%2015.7333%2014.4444ZM3.06667%209.68889C1.24444%207.86667%201.24444%204.88889%203.06667%203.06667C4.88889%201.24444%207.86667%201.24444%209.68889%203.06667C11.5111%204.88889%2011.5111%207.86667%209.68889%209.68889C7.86667%2011.5111%204.88889%2011.5333%203.06667%209.68889Z%22%20fill=%22%23F15F22%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id=%22clip0_693_2661%22%3E%0A%3Crect%20width=%2216%22%20height=%2216%22%20fill=%22white%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A");
                background-repeat: no-repeat;
                width: 22px;
                height: 22px;
                display: block;
                transform: translateY(2px);
            }
        }
    }

    button {
        display: flex;
        align-items: center;
        color: var(--wp--preset--color--white);
        cursor: pointer;
        text-decoration: none;
        background-color: var(--wp--preset--color--haverhill-orange-bright);
        border-radius: 60px;
        border: 2px solid var(--wp--preset--color--haverhill-orange-bright);
        padding: 7px 20px;
        font-size: var(--wp--preset--font-size--nav-button-text);
        font-weight: 700;
        letter-spacing: 0.78px;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 1;
        &:hover {
            color: var(--wp--preset--color--gray-text);
            background-color: transparent;
        }
        &.reset {
            border-color: var(--wp--preset--color--separator-gray);
            background-color: var(--wp--preset--color--separator-gray);
            &:hover {
                color: var(--wp--preset--color--white);
                background-color: var(--wp--preset--color--gray-dark);
                border-color: var(--wp--preset--color--gray-dark);
            }
        }
    }
}