Refine: Case Study Filters

<div class="pop-up  pop-up--layout" id="popup-refine">

    <div class="refine">

        <form class="search">

            <label class="u-visually-hidden" for="search">Search the entire Understanding Patient Data site</label>

            <input class="search__input" id="search" placeholder="Search..." required type="search">

            <button class="search__submit" type="submit">

                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" title="Search">

                    <title>Search</title>

                    <use xlink:href="#svg-icon-search" />

                </svg>

            </button>

        </form>

    </div>

    <form class="refine">

        <fieldset class="refine__category">

            <legend class="refine__title">Impact of work</legend>

            <div class="refine__options">

                <input id="impact-individual-care" name="" type="checkbox">

                <label class="refine__option" for="impact-individual-care">Individual care</label>

                <input id="impact-disearch-risks-and-causes" name="" type="checkbox">

                <label class="refine__option" for="impact-disearch-risks-and-causes">Disearch risks and causes</label>

                <input id="impact-diagnosis" name="" type="checkbox">

                <label class="refine__option" for="impact-diagnosis">Diagnosis</label>

                <input id="impact-treatment-and-prevention" name="" type="checkbox">

                <label class="refine__option" for="impact-treatment-and-prevention">Treatment and prevention</label>

                <input id="impact-planning" name="" type="checkbox">

                <label class="refine__option" for="impact-planning">Planning</label>

                <input id="impact-patient-safety" name="" type="checkbox">

                <label class="refine__option" for="impact-patient-safety">Patient safety</label>

                <input id="impact-policy" name="" type="checkbox">

                <label class="refine__option" for="impact-policy">Policy</label>

            </div>

            <button class="refine__clear  button  button--tertiary  button--tiny" type="reset">Clear</button>

        </fieldset>

        <fieldset class="refine__category">

            <legend class="refine__title">Disease type</legend>

            <div class="refine__options">

                <input id="disease-asthma" name="" type="checkbox">

                <label class="refine__option" for="disease-asthma">Asthma</label>

                <input id="disease-austism" name="" type="checkbox">

                <label class="refine__option" for="disease-austism">Austism</label>

                <input id="disease-cancer" name="" type="checkbox">

                <label class="refine__option" for="disease-cancer">Cancer</label>

                <input id="disease-copd" name="" type="checkbox">

                <label class="refine__option" for="disease-copd">COPD</label>

                <input id="disease-cardiovascular-disease" name="" type="checkbox">

                <label class="refine__option" for="disease-cardiovascular-disease">Cardiovascular disease</label>

                <input id="disease-dementia" name="" type="checkbox">

                <label class="refine__option" for="disease-dementia">Dementia</label>

            </div>

            <button class="refine__clear  button  button--tertiary  button--tiny" type="reset">Clear</button>

        </fieldset>

        <button class="button  button--block  button--secondary" type="submit">Apply filters</button>

    </form>

</div>