#filter-container-toggle .fa-angle-double-left {
    transition: transform .35s ease-in-out;
}

#filter-wrapper:not(.show) #filter-container-toggle .fa-angle-double-left {
    transform: rotate(180deg);
}

#filter-container-toggle {
    background: white;
    padding: 1rem;
    align-self: start;
    box-shadow: 3px -3px 3px #96969640, 3px 3px 3px #96969640;
    border-radius: 0 .5rem .5rem 0;
    width: 50px;
    border: none;
    position: sticky;
    top: 20px;
    margin-bottom: 10rem;
}

.filterIcon {
    margin-right: 10px;
    display: inline-flex;
}

@media (min-width: 768px) {
    #filter-wrapper {
        padding-top: 1.5rem;
        padding-right: 2.75rem;
    }

    #filter-container-toggle {
        display: none;
    }
}

@media (max-width: 768px) {
    #results-container {
        border: none;
    }

    #results-container .stretch-to-right-border {
        margin-right: 0 !important;
        padding-right: 1.5rem !important;
    }

    #filter-wrapper {
        position: absolute;
        z-index: 1;
        display: flex;
        margin-top: 6rem;
        padding-right: 10px;
        height: 100%;
        transition: transform .35s ease-in-out;
        transform: translate(calc(-100% + 55px));
    }

    #filter-wrapper.show {
        transform: translate(0);
    }

    .filter-container {
        background: white;
        padding: 1rem;
        box-shadow: 3px -3px 4px #96969650, -3px 3px 4px #96969650;
        position: sticky;
        top: 20px;
        align-self: start;
        margin-bottom: 9rem;
        border-radius: 0 0 1rem 0;
        max-height: calc(100vh - 40px);
    }

    .padding-0-md {
        padding: 0;
    }
}