.levels-filter {
  position: absolute;
  pointer-events: none;
}

.levels-dialog {
  width: min(430px, 92vw);
  padding: 20px;
  border: 1px solid #535c66;
  border-radius: 8px;
  background: #292c30;
  color: #f0f2f4;
}

.levels-dialog::backdrop {
  background: #12141759;
  backdrop-filter: none;
}

.levels-dialog h1 {
  margin: 0;
  font-size: 20px;
}

#levelsLayerName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 2px 0 14px;
}

.levels-dialog fieldset {
  display: grid;
  grid-template-columns: minmax(66px, auto) minmax(48px, 1fr) 36px;
  align-items: center;
  gap: 8px 10px;
  border: 1px solid #535c66;
  border-radius: 4px;
  padding: 8px 11px 10px;
  margin: 0 0 11px;
}

.levels-dialog legend {
  color: #d5dce4;
  padding: 0 4px;
}

#levelsHistogram {
  grid-column: 1 / -1;
  width: 100%;
  height: 54px;
  background: #191c20;
  border: 1px solid #485159;
}

.levels-dialog label {
  margin: 0;
  color: #e2e7eb;
}

.levels-dialog input[type="range"] {
  height: 12px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  accent-color: #89b5eb;
}

.levels-dialog output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.levels-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.levels-actions .levels-preview {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}

#adjustLevels.levels-applied {
  color: #93c7ff;
}