.filters {
  display: block;
  padding: 0;
}

.filters summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  color: #dbeafe;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.filters summary::-webkit-details-marker {
  display: none;
}

.filters summary small {
  color: #71869b;
  font-size: 10px;
  font-weight: 600;
}

.filters summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: #102339;
  color: #bfdbfe;
  font-size: 16px;
}

.filters[open] summary::after {
  content: "–";
}

.filters form {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr) auto auto;
  gap: 12px;
  align-items: end;
  padding: 0 20px 20px;
}

@media (max-width: 950px) {
  .filters form {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .topbar-actions {
    display: contents;
  }

  .topbar-actions form {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .topbar-actions > .nav-link {
    grid-row: 2;
    padding: 8px 10px;
    border: 1px solid #26384a;
    border-radius: 8px;
    background: #0c1825;
    text-align: center;
  }

  .topbar-actions > .nav-link:nth-of-type(1) {
    grid-column: 1;
  }

  .topbar-actions > .nav-link:nth-of-type(2) {
    grid-column: 2;
  }

  .notify-button {
    grid-column: 1 / -1;
    grid-row: 3;
    max-width: none;
    width: 100%;
    min-height: 40px;
    white-space: nowrap;
  }

  .filters[open] summary {
    margin-bottom: 0;
  }

  .filters form {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    scrollbar-width: none;
  }

  .summary-grid::-webkit-scrollbar {
    display: none;
  }

  .notify-test:not([hidden]) {
    display: none;
  }
}