#ap-color-window-container #draggable-popup #popup-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1em;
}

#ap-color-window-container .block-container {
  margin-top: 1em;
}

#ap-color-window-container .block-label {
  font-size: 0.9em;
}

#ap-color-window-container .slider-container {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.4em;
}

#ap-color-window-container .slider-image {
  width: 0.8em;
  height: 0.8em;
  background-repeat: no-repeat;
  background-size: 0.8em;
}

#ap-color-window-container .slider-image.gamma {
  background-image: url("../../assets/buttons/gamma.svg");
}

#ap-color-window-container .slider-image.brightness {
  background-image: url("../../assets/buttons/brightness.svg");
}

#ap-color-window-container .slider-image.contrast {
  background-image: url("../../assets/buttons/contrast.svg");
}

#ap-color-window-container .slider-image.red {
  background-image: url("../../assets/buttons/red.svg");
}

#ap-color-window-container .slider-image.green {
  background-image: url("../../assets/buttons/green.svg");
}

#ap-color-window-container .slider-image.blue {
  background-image: url("../../assets/buttons/blue.svg");
}

#ap-color-window-container .slider {
  -webkit-appearance: none;
  width: 90%;
  height: 0.3em;
  background: #5a6268;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 0.3em;
}

#ap-color-window-container .slider:hover {
  opacity: 1;
}

#ap-color-window-container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.9em;
  height: 0.9em;
  background: #6c757d;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 0 3px 1px #2e353af2;
  transition: background-color 0.3s;
}

#ap-color-window-container .slider::-webkit-slider-thumb:hover,
#ap-color-window-container .slider.changed::-webkit-slider-thumb {
  background: #20a8d8;
}

#ap-color-window-container .slider::-moz-range-thumb {
  -moz-user-select: none;
  appearance: none;
  width: 0.9em;
  height: 0.9em;
  background: #6c757d;
  border: none;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0 0 3px 1px #2e353af2;
}

#ap-color-window-container .slider::-moz-range-thumb:hover,
#ap-color-window-container .slider.changed::-moz-range-thumb {
  background: #20a8d8;
}

#ap-color-window-container .color-correction-actions {
  display: flex;
  gap: 1em;
  margin-top: 1.5em;
  justify-content: flex-end;
}

#ap-color-window-container button {
  width: 100%;
  padding: 0.3em;
  cursor: pointer;
  border-radius: 3px;
  background-color: #515b65;
  text-align: center;
  font-size: 0.8em;
  transition: background-color 0.3s;
  margin-top: 1.4em;
}

/* presets' style below */

#ap-color-window-container #presets-header {
  display: grid;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.1em 0.3em 0.1em;
  border-bottom: 1px solid var(--secondary);
  height: 1.5em;
  font-weight: bold;
  gap: 1em;
  grid-template-columns: 43% 13% 10%;
}

#ap-color-window-container #presets-container {
  padding: 0.5em 1em;
  background: #212427;
  border-radius: 5px;
  margin-top: 1rem;
  height: 15.5rem;
  font-size: 0.9em;
}

#ap-color-window-container #presets-container.cube {
  height: 20rem;
}

#ap-color-window-container .presets-header-save {
  width: 1em;
  height: 1em;
  opacity: 0.5;
  transition: opacity 0.3s;
  cursor: pointer;
}

#ap-color-window-container .presets-header-save.disabled {
  pointer-events: none;
  opacity: 0.3;
}

#ap-color-window-container .presets-header-save:hover {
  opacity: 0.8;
}

#ap-color-window-container #presets-body {
  overflow-y: auto;
  max-height: 88%;
  overflow-x: hidden;
}

#ap-color-window-container #presets-body .preset {
  margin-top: 0.25em;
  display: grid;
  grid-template-columns: 59% 15% 11%;
  align-items: center;
  gap: 1em;
  padding: 0.2em;
  border-radius: 5px;
  transition: background-color 0.2s;
  cursor: pointer;
  position: relative;
  height: 1.4em;
  font-size: 0.9em;
}

#ap-color-window-container #presets-body .preset:hover,
#ap-color-window-container #presets-body .preset.selected {
  background-color: #494e60;
  transition: background-color 0.2s;
}

#ap-color-window-container #presets-body .preset .preset-name {
  width: 5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
}

#ap-color-window-container #presets-body .preset .preset-action {
  justify-self: center;
}

#ap-color-window-container #presets-body .preset .preset-action.delete {
  width: 1.1em;
  opacity: 0.6;
  transition: opacity 0.2s;
}

#ap-color-window-container #presets-body .preset .preset-action:hover {
  opacity: 1;
  transition: opacity 0.2s;
}

#ap-color-window-container #presets-body .preset .name-input {
  border-radius: 3px;
  outline: none;
  border: none;
  background-color: #2e353a;
  color: white;
  height: 1.1em;
  padding-left: 0.35em;
  width: 9em;
}