.JobResults *:before,
.JobResults *:after {
    speak: none;
}

.JobResults--noJs {
    display: none;
}

.no-js .JobResults--noJs {
    display: block;
    background: yellow;
}

/**
 * Grid / layout
 */

.JobResults__header {
    margin-bottom: 1em;
}

@media (min-width: 769px) {
    .JobResults__wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .JobResults__filter {
        width: 29%;
        font-size: 90%;
    }

    .JobResults__list {
        width: 69%;
    }
}

.JobResults__filter {
    display: none;
    padding: 1em .5em .5em;
    border-radius: .5em;
    background: #edeef0;
}

.JobResults__filter form {
    margin-bottom: 0;
}

.JobResults__filter fieldset {
    min-width: inherit; /** Fix to keep fieldsets in the box */
    position:  relative;
    padding: .5em 1em;
    background: #fff;
    box-shadow: 0 -12px #fff;
}

.JobResults__filter legend {
    font-size: 15px;
    cursor: pointer;
    display: block;
    position: relative;
    width: 100%;
}

.JobResults__filter legend:before {
    content: "";
    position:  absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMzLjE3IDE3LjE3bC05LjE3IDkuMTctOS4xNy05LjE3LTIuODMgMi44MyAxMiAxMiAxMi0xMnoiLz48cGF0aCBkPSJNMCAwaDQ4djQ4aC00OHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) no-repeat 100% 0;
    background-size: 16px;
    cursor: pointer;
}

fieldset.JobResults__filterpanel--visible legend:before {
    bottom: auto;
    height: 16px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0IDE2bC0xMiAxMiAyLjgzIDIuODMgOS4xNy05LjE3IDkuMTcgOS4xNyAyLjgzLTIuODN6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+);
}

.JobResults__filter .fe-checkboxgroup li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.JobResults__filter button.submit {
    width: 100%;
    background: #898f9c;
}

.has-js .JobResults__filter button.submit {
    display: none;
}

@media (min-width: 768px) {
    .JobResults__filter {
        display: block;
    }
}

/**
 * Pager
 */

.JobList .pbuic-pager a,
.JobList .pbuic-pager span {
    height: auto;
    padding: .5em 1em;
    border: 0;
    line-height: inherit;
}

.JobList .pbuic-pager .pgr-next a,
.JobList .pbuic-pager .pgr-next span,
.JobList .pbuic-pager .pgr-previous a,
.JobList .pbuic-pager .pgr-previous span {
    padding: .5em 1em;
    background: transparent;
}

.JobList .pbuic-pager .pgr-active span {
    color: #fff;
    background: #ff6b00;
}

.JobList .pbuic-pager a:hover {
    background-color: #fff;
}

/**
 *  Fixed filter button positions, depending on scroll position
 */

.fix-filterButtons .JobResults__filter form {
    padding-bottom: 73px;
}

.fix-filterButtons div.submit {
    position: fixed;
    bottom: 0;
    width: 25%;
    min-width: 270px;
    max-width: 370px;
    height: 4.5em;
    margin: 0 -2%;
    padding: 1em 0 1em 2%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: -14px 0px 24px -8px rgba(0, 0, 0, 0.35);
}

.fix-filterButtons div.submit:before {
    content: "";
    background: white;
    height: 4.5em;
    width: 1000px;
    margin-left: -1000px;
    position: fixed;
    left: auto;
    bottom:0;
}

/**
 * Toggle filter button
 */

.JobResults__toggleFilterButton {
    display: none;
    position: relative;
    width: 100%;
    color: #000;
    background-color: #edeef0;
}

@media (max-width: 768px) {
    .JobResults__toggleFilterButton {
        display: block;
    }

    .filterOpen .JobResults__filter {
        display: block;
    }

    .JobResults__toggleFilterButton:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 99%;
        display: block;
        z-index: 10;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMzLjE3IDE3LjE3bC05LjE3IDkuMTctOS4xNy05LjE3LTIuODMgMi44MyAxMiAxMiAxMi0xMnoiLz48cGF0aCBkPSJNMCAwaDQ4djQ4aC00OHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) no-repeat 50% 50%;
        background-size: 2em;
    }

    .filterOpen .JobResults__toggleFilterButton:after {
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0IDE2bC0xMiAxMiAyLjgzIDIuODMgOS4xNy05LjE3IDkuMTcgOS4xNyAyLjgzLTIuODN6Ii8+PHBhdGggZD0iTTAgMGg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+);
    }
}

/**
 * Form element tweaks
 */

.has-js .JobResults .proFormList li {
    display: none;
}

.has-js .JobResults .JobResults__filterpanel--visible .proFormList li,
.has-js .JobResults li.JobResults__option--checked {
    display: block;
}

.JobResults__filter .proFormList {
    font-size: 14px;
    overflow: hidden;
}

.JobResults__filter .proFormList:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    width: 3em;
}

.JobResults__filter .JobResults__filterpanel--visible .proFormList {
    display: block;
    font-size: inherit;
}

.JobResults__filter .proFormList li {
    margin-bottom: 0;
}

.JobResults__filter .proFormList input {
    position: absolute;
    left: -999em;
    margin-top: .85em;
}

.JobResults__filter .proFormList label {
    display: block;
    padding: .3em 0;
    white-space: normal;
    line-height: 1.2;
    color: #999;
}

.JobResults__filter .JobResults__filterpanel--visible .proFormList input {
    position: static;
}

.JobResults__filter .JobResults__filterpanel--visible .proFormList label {
    padding: .7em 0 .7em 1.3em;
    color: #000;
}

.JobResults__filter .JobResults__filterpanel--visible .proFormList label:after {
    display: none;
}

@media screen and (min-width: 640px) {
    .JobResults__filter .JobResults__filterpanel--visible .proFormList label {
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .JobResults__filter .JobResults__filterpanel--visible .proFormList input {
        margin-top: .55em;
    }
}