/* For the all posts page */

#filterSection {
    margin: 1rem 0;
    padding: 0.5rem;
    background-color: var(--azul-10);
}

#filterForm {
    width: 100%;
}

#filterForm>* {
    display: inline-block;
}

#categorySelectorDiv select {
    /* Este esta chulo, copiar https://moderncss.dev/custom-select-styles-with-pure-css/ */
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    z-index: 1;
    outline: none;
}

#categorySelectorDiv select::-ms-expand {
    /* Remove dropdown arrow in IE10 & IE11
    @link https://www.filamentgroup.com/lab/select-css.html */
    display: none;
}

#categorySelectorDiv {
    padding: 0.5em 1em;
    cursor: pointer;
    background-color: #fff;
    border: 2px solid white;
    width: 20rem;
}

#categorySelectorDiv:hover {
    border: 2px solid var(--azul);
}


#searchInput {
    padding: 0.5em 1em;
    background-color: white;
    border: none;
    border: 2px solid white;
    width: 20rem;
    float: inline-end;
}

#searchInput:hover {
    border: 2px solid var(--azul);
}

#searchInput:focus {
    outline: none;
}


@media (max-width: 800px) {
    #filterForm>* {
        display: auto;
        float: none;
        width: 100%;
        margin: 0.5rem 0;
    }
}