.container {
  display: grid;
  grid-template-columns: 528px 1fr;
  /* Left: 500px, Middle: 2/3 of remaining, Right: rest */
  gap: 6px;
  /* This adds space between your columns */
  height: 100%;
  overflow: hidden;
}

.left-column {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 100%;
  /* max-width: 535px; */
}

.data {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 100%;
}

/* Fullscreen */
.visualization-pane-container {
  width: 100%;
  height: 100%;
  border-left: 2px solid var(--borders-color-border-1);
  box-sizing: border-box;
  position: relative;
}

.full-screen-explore-container {
  position: relative;
  display: grid;
  /* grid-template-columns: 66% 1fr; */
  grid-template-columns: 50% 1fr;
  background: #fefefe;
  flex-grow: 1;
}


.filter-table-container {
  /* position: absolute;
  top: 5%;
  left: 5%;
  z-index: 100;
  width: 33%;
  */
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}


.filter-data-table-fixed-header tr {
  background-color: #f9f9f9;
}
.umap-container {
  /* margin: 6px 12px; */
  /* max-width: 515px; */
  margin-top: 6px;
  margin-left: 12px;
  height: 100%;
  overflow-y: hidden;
  min-height: 0;
  /* position: relative; */
}

.tab-tables {
  margin: 6px 12px;
  height: 100%;
  overflow-y: hidden;
  min-height: 0;
}

/* LEFT COLUMN */
/* FIRST ROW: Dataset summary */

.summary {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* margin: 6px 12px; */
  margin-top: 6px;
  margin-left: 12px;
  padding: 6px;
  /* height: 148px; */
  border: 1px solid lightgray;
  border-radius: 5px;
}

.heading {
  margin: 0;
  font-size: 1.17em;
  /* margin-block-start: 1em; */
  margin-block-end: .75em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* justify-content: center; */
}

.heading a {
  margin-left: 12px;
}

.scope-card {
  display: flex;
  flex-direction: column;
}

.scope-card .scope-selector {
  margin: 0 6px;
}

.scope-card .metadata-label {
  font-size: 0.8em;
  color: #666;
  /* font-weight: bold; */
}

.dataset-card {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.scope-version-warning {
  margin: 6px 0;
  padding: 6px;
  border: 1px solid red;
  border-radius: 6px;
}

.scope-version-warning .warning-header {
  color: red;
  font-weight: bold;
}

.left-pane-button.warning-button {
  stroke: red !important;
  color: red !important;
}

/* SECOND ROW: UMAP */

.scatters {
  position: relative;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 6px;
}

/* THIRD ROW: hovered data point */
.hovered-point {
  display: flex;
  flex-direction: column;
  padding: 6px;
  max-width: 500px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.container .hovered-point .key {
  font-weight: bold;
}

.container .hovered-point .value {
  margin-left: 10px;
}


/* Filters and data table */
.filters-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid lightgray;
  padding: 12px;
  margin-top: 6px;
  margin-right: 12px;
  border-radius: 5px;
}

/* lets make consistent input styling */
.filters-container input[type="text"],
.filters-container .filter-description {
  padding: 3px;
  margin: 0 6px;
  border-radius: 3px;
  border-width: 1px;
}

.filters-container select {
  border-radius: 3px;
}

.filters-container button {
  margin-left: 0.3em;
  margin-top: 1px;
  border: 1px solid gray;
  padding: 2px 6px;
  border-radius: 5px;
}

.filters-container .new-tag input {
  width: 60px;
}

.filters-container .search-box input {
  /* height: 24px; */
  width: 300px;
}

.filters-container .search-box select {
  width: 358px;
}

.clusters-select {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.cluster-react-select {
  width: 400px;
}

.column-filter .filter-cell.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
.column-filter .column-react-select {
  width: 250px;
}

.search-input-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.filters-container .new-cluster-label {
  width: 200px;
}

.filters-container .update-cluster-label {
  width: 250px;
}

.filters-container .filter-row {
  display: flex;
  flex-direction: row;
  /* border: 1px solid gray; */
  background-color: #f9f9f9;
  border-radius: 4px;
  align-items: center;
}

.filters-container .filter-row.active {
  background-color: #e6e6e6;
}

.filters-container .column-filter select {
  max-width: 120px;
}

@media screen and (max-width: 1515px) {
  .filters-container .search-box input {
    /* height: 24px; */
    width: 150px;
  }

  .filters-container .search-box select {
    width: 158px;
  }

  .filters-container .clusters-select select {
    width: 160px;
  }

  .filters-container .update-cluster-label {
    width: 150px;
  }

  .filters-container .new-cluster-label {
    width: 100px;
  }
}


@media (prefers-color-scheme: dark) {
  .filters-container .filter-row {
    background-color: #333;
    color: #fff;
  }

  .filters-container .filter-row.active {
    background-color: #555;
  }
    .filter-data-table-fixed-header tr {
      background-color: #333;
    }

  .full-screen-explore-container {
    background: #111
  }

  .visualization-pane-container {
    border-left: 2px solid var(--borders-color-border-3);
  }
}


.filters-container .filter-cell {
  flex-grow: 1;
  padding: 4px;
  text-align: left;
  display: flex;
  gap: 6px;
}

.filters-container .filter-cell.left,
.filters-container .filter-cell.right {
  flex: 2;
  /* Makes left and right cells take twice the space of the middle cell */
}

.filters-container .filter-cell.middle {
  flex: 1;
    /* Middle cell takes the base flex size */
}

.filters-container .bulk {
  cursor: pointer;
}

.filters-container .bulk.active {
  border: 1px solid black;
}

.filters-container .embeddings-controls {
  gap: 12px;
}

.filters-container .filter-mode.active {
  font-weight: bold;
  opacity: 1;
  filter: blur(0px);
}

.filters-container .filter-mode {
  opacity: .25;
  font-size: .85em;
  filter: blur(.5px);
}

.filter-table.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}

.tags-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

.tag-button.selected {
  border: 2px solid black;
}

/* .new-tag {
  margin: 6px 0;
}

.new-tag form {
  display: inline;
  width: 160px;
  border: 1px solid lightgray;
  padding: 7px;
} */



/* .tab-neighbors .deselect {
  display: inline-block;
  margin: 5px;
  width: 32px;
} */


/* RIGHT COLUMN */
/* FIRST ROW: Selector */

/* SECOND ROW: Clusters */


.slide-bar {
  padding: 6px;
  /* height: 100%; */
}

@media screen and (max-width: 1024px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    margin-top: 5px;
  }

  .left-column {
    flex-grow: 1
  }
.data {
    height: 50%;
    width: 100%;
    flex-grow: 1;
    overflow-y: visible;
  }

  .hovered-point {
    height: 150px;
    max-width: 500px;
  }
}

@media screen and (max-width: 425px) {
  .container {
    width: 100%;
    padding: 5px;
  }

  .cluster {
    width: 100%;
    padding: 5px;
  }

  .summary {
    height: auto;
  }

  .filters-container {
    height: auto;
    margin-top: 40px;
  }
}

.full-screen-explore-container {
  height: 100%;
}

