#div_select_ord {
  margin-left: auto; }

#filter {
  color: var(--bs-gray-900); }
  #filter .section {
    margin-bottom: 1rem; }
    #filter .section + .section {
      border-top: 1px solid #ddd; }
    #filter .section .filter-title {
      display: inline-block;
      font-weight: 600;
      padding-block: 1rem; }
    #filter .section .section-content {
      padding-inline: 4px; }
  #filter #content-sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: .5rem;
    /*@media (min-width: )*/ }
    @media (min-width: 1048px) {
      #filter #content-sizes {
        grid-template-columns: repeat(4, 48px); } }
    #filter #content-sizes button {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      border: 1px solid var(--bs-gray-200);
      border-radius: 4px;
      max-width: 48px;
      aspect-ratio: 1 / 1;
      font-size: .9rem;
      outline: 0;
      transition: all .2s; }
      #filter #content-sizes button.selected {
        border: 2px solid var(--bs-primary);
        background-color: rgba(153, 38, 240, 0.1); }
      #filter #content-sizes button:hover {
        border: 1px solid rgba(153, 38, 240, 0.5); }
      #filter #content-sizes button:focus {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(153, 38, 240, 0.5); }
  #filter #condition label {
    display: flex;
    width: fit-content;
    gap: 4px;
    cursor: pointer; }
    #filter #condition label input[type="checkbox"] {
      margin-top: 0.25rem;
      cursor: pointer; }
    #filter #condition label + label {
      margin-top: .5rem; }
  #filter button[type="reset"] {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin-top: 1rem;
    display: flex;
    color: var(--bs-primary);
    font-weight: 600;
    border-radius: .25rem; }
    #filter button[type="reset"]:focus {
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(153, 38, 240, 0.5); }