summary { /* This should hide the marker */ display: block; font-size: 1.17em; font-weight: bold; margin: 0 auto 10px auto; cursor: pointer; } summary::-webkit-details-marker, summary::marker { display: none; } summary:before { border-radius: 5px; content: "[ + ]"; margin: -2px 10px 0 10px; padding: 1px 0 3px 0; text-align: center; width: 40px; } details[open] > summary:before { content: "[ − ]"; } #filters-box { padding: 10px 20px 20px 10px; margin: 10px 15px; } #filters-flex { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; align-content: flex-start; justify-content: flex-start; } fieldset, legend { display: contents !important; border: none !important; margin: 0 !important; padding: 0 !important; } .filter-column { display: inline-block; display: inline-flex; width: max-content; min-width: max-content; max-width: 16em; margin: 15px; flex-grow: 2; flex-basis: auto; flex-direction: column; } .filter-name, .filter-options { display: block; padding: 5px 10px; margin: 0; text-align: start; } .filter-options div { margin: 6px 0; } .filter-options div * { vertical-align: middle; } .filter-options label { margin: 0 10px; } #filters-apply { text-align: right; /* IE11 only */ text-align: end; /* Override for compatible browsers */ } /* Error message */ .no-results-error { text-align: center; line-height: 180%; font-size: 110%; padding: 15px 15px 125px 15px; } /* Responsive rules */ @media only screen and (max-width: 800px) { summary { font-size: 1.30em; } #filters-box { margin: 10px 0 0 0; padding: 0; } #filters-apply { text-align: center; padding: 15px; } } /* Light theme */ .light-theme #filters-box { background: #dfdfdf; } @media (prefers-color-scheme: light) { .no-theme #filters-box { background: #dfdfdf; } } /* Dark theme */ .dark-theme #filters-box { background: #373737; } @media (prefers-color-scheme: dark) { .no-theme #filters-box { background: #373737; } }