@import "fonts.css";
@import "common.css";
@import "components/data-table.css";
@import "components/footer_v3.css";
@import "components/header.css";
@import "components/pagination.css";
@import "components/filters-modal.css";
@import "components/filters-panel.css";
@import "components/column-selector.css";
@import "components/saved-filters.css";
@import "components/search-bar.css";
@import "components/filter-actions.css";
@import "components/signin-banner.css";
@import "components/screenshot-modal.css";
@import "components/table-settings.css";
@import "components/links-modal.css";
@import "components/query-save-modal.css";

main {
  display: flex;
}

.page-content {
  margin: 2rem;
  overflow-x: hidden;
  gap: 1rem;
  width: 100%;
}

.content-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.content-header-left {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex: 1;
  width: 100%;
}

#search-bar {
  flex: 1;
  min-width: 14rem;
}

#filter-actions {
  flex: 1;
  width: 100%;
}

#table {
  width: 100%;
  overflow-x: auto;
}

.panel-close-icon {
  margin-left: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.filters-icon {
  fill: none;
  stroke: var(--color-text);;
}

.filter-panel-collapse-icon {
  stroke: var(--color-text);
  fill: var(--color-text);
  stroke-width: 0.5;
}

.filter-collapse-icon {
  stroke: none;
  fill: var(--color-text);
}

@media (width < 768px) {
  .page-content {
    margin: 1.25rem;
  }
}

@media (width < 576px) {
  .content-header {
    gap: 0.5rem;
    flex-direction: column;
  }

  .content-header-left {
    gap: 0.5rem;
  }

  #search-bar {
    min-width: unset;
  }

  .page-content {
    padding-bottom: 0;
  }
}