html[lang] dialog.legacy-custom-color-dialog,
html[lang] dialog.legacy-palette-dialog {
  box-sizing: border-box;
  max-width: calc(100vw - 12px);
  padding: 0;
  border: 1px solid #555;
  border-radius: 0;
  background: #762b5e;
  color: #fff;
  font: 12px Arial;
}
html[lang] dialog.legacy-custom-color-dialog {
  width: min(524px, calc(100vw - 12px));
  direction: ltr;
  overflow: hidden;
}
html[lang] dialog.legacy-palette-dialog {
  width: fit-content;
  direction: ltr;
}
html[lang] dialog.legacy-custom-color-dialog::backdrop,
html[lang] dialog.legacy-palette-dialog::backdrop {
  background: transparent;
}
html[lang] dialog.legacy-custom-color-dialog > .dialog-head,
html[lang] dialog.legacy-palette-dialog > .dialog-head {
  height: 30px;
  min-height: 30px;
  box-sizing: border-box;
  padding: 2px 7px;
  background: #f0f0f0;
  color: #111;
}
html[lang] dialog.legacy-custom-color-dialog > .dialog-head h2,
html[lang] dialog.legacy-palette-dialog > .dialog-head h2 {
  font: 12px Arial;
  color: #111;
  text-shadow: none;
}
html[lang] dialog.legacy-custom-color-dialog > .dialog-head button,
html[lang] dialog.legacy-palette-dialog > .dialog-head button {
  border: 0;
  background: transparent;
  color: #111;
  box-shadow: none;
}
html[lang] dialog.legacy-custom-color-dialog > .actions {
  display: none;
}
.legacy-custom-color-body {
  --color-x: 1.75px;
  --color-y: 1.875px;
  width: calc(298 * var(--color-x));
  height: calc(166 * var(--color-y));
  position: relative;
  overflow: hidden;
}
html[lang] .legacy-custom-color-body button {
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  font: 12px Arial;
  padding: 0;
}
.legacy-basic-label {
  position: absolute;
  left: calc(4 * var(--color-x));
  top: calc(4 * var(--color-y));
}
.legacy-custom-label {
  position: absolute;
  left: calc(4 * var(--color-x));
  top: calc(106 * var(--color-y));
}
.legacy-basic-colors {
  position: absolute;
  left: calc(4 * var(--color-x));
  top: calc(14 * var(--color-y));
  width: calc(140 * var(--color-x));
  height: calc(86 * var(--color-y));
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  place-items: center;
}
html[lang] .legacy-custom-color-body .legacy-basic-cell {
  width: 22px;
  height: 18px;
  border: 2px inset #ddd;
  background: var(--cell-color);
}
html[lang] .legacy-basic-cell[aria-pressed="true"] {
  outline: 1px solid #111;
  outline-offset: 2px;
}
html[lang] .legacy-custom-color-body .legacy-color-original {
  position: absolute;
  left: calc(6 * var(--color-x));
  top: calc(117 * var(--color-y));
  width: calc(15 * var(--color-x));
  height: calc(12 * var(--color-y));
  border: 2px inset #ddd;
  background: var(--cell-color);
}
.legacy-color-spectrum {
  position: absolute;
  left: calc(152 * var(--color-x));
  top: calc(4 * var(--color-y));
  width: calc(118 * var(--color-x));
  height: calc(116 * var(--color-y));
  box-sizing: border-box;
  border: 2px inset #ddd;
  cursor: crosshair;
  touch-action: none;
}
.legacy-color-luminance {
  position: absolute;
  left: calc(280 * var(--color-x));
  top: calc(4 * var(--color-y));
  width: calc(8 * var(--color-x));
  height: calc(116 * var(--color-y));
  border: 2px inset #ddd;
  box-sizing: border-box;
  cursor: crosshair;
  touch-action: none;
}
.legacy-luminance-marker {
  position: absolute;
  left: calc(289 * var(--color-x));
  color: #111;
  font: 12px Arial;
  transform: translateY(-50%);
  pointer-events: none;
}
.legacy-color-solid {
  position: absolute;
  left: calc(152 * var(--color-x));
  top: calc(124 * var(--color-y));
  width: calc(40 * var(--color-x));
  height: calc(26 * var(--color-y));
  box-sizing: border-box;
  border: 2px inset #ddd;
}
.legacy-solid-label {
  position: absolute;
  left: calc(152 * var(--color-x));
  top: calc(151 * var(--color-y));
}
html[lang] .legacy-custom-color-body .legacy-color-component {
  position: absolute;
  left: calc(var(--item-x) * var(--color-x));
  top: calc(var(--item-y) * var(--color-y));
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  font: 12px Arial;
}
.legacy-color-component > span {
  width: 35px;
}
html[lang] .legacy-color-component input {
  width: 32px;
  min-width: 0;
  height: 22px;
  min-height: 0;
  margin-top: -4px;
  padding: 1px 2px;
  border: 2px inset #ddd;
  border-radius: 0;
  background: white;
  color: black;
  box-sizing: border-box;
  font: 12px Arial;
}
html[lang] .legacy-custom-color-body .legacy-color-ok,
html[lang] .legacy-custom-color-body .legacy-color-cancel {
  position: absolute;
  top: calc(150 * var(--color-y));
  width: calc(44 * var(--color-x));
  height: calc(14 * var(--color-y));
  border: 1px solid #111;
  background: black;
  color: white;
}
.legacy-color-ok {
  left: calc(4 * var(--color-x));
}
.legacy-color-cancel {
  left: calc(52 * var(--color-x));
}
.legacy-palette-body {
  display: flex;
  gap: 5px;
  padding: 5px;
}
.legacy-palette-grid {
  display: grid;
  grid-template-columns: repeat(var(--palette-columns), 20px);
  grid-auto-rows: 20px;
  gap: 3px;
  align-content: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 8px;
  background: #801e63;
}
html[lang] .legacy-palette-grid .legacy-color-cell {
  padding: 0;
  min-height: 0;
  width: 20px;
  height: 20px;
  border: 2px ridge #ddd;
  border-radius: 5px;
  box-shadow: none;
  background: var(--cell-color);
}
.legacy-color-cell[aria-pressed="true"] {
  outline: 1px solid #111;
  outline-offset: 2px;
}
.legacy-color-cell:disabled {
  opacity: 0.45;
}
.legacy-palette-rgb {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  min-width: 50px;
  gap: 2px;
}
.legacy-palette-sample {
  min-height: 18px;
  border: 2px ridge #ddd;
}
html[lang] .legacy-palette-dialog > .actions {
  padding: 0 5px 5px;
  margin: 0;
  gap: 0;
}
html[lang] .legacy-palette-dialog > .actions button {
  min-height: 23px;
  padding: 1px 10px;
  border: 1px solid #111;
  border-radius: 0;
  background: black;
  color: white;
  font: 12px Arial;
}
.legacy-palettes-editor {
  padding: 8px;
}
.legacy-palettes-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.legacy-palettes-workspace {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
}
.legacy-palettes-workspace > .legacy-palette-grid {
  min-width: 250px;
  min-height: 180px;
  max-height: 340px;
  overflow: auto;
}
.legacy-palettes-buttons {
  display: grid;
  gap: 8px;
}
@media (max-width: 560px) {
  .legacy-custom-color-body {
    transform-origin: top left;
    --color-x: 1.1px;
    --color-y: 1.875px;
  }
  .legacy-color-component > span {
    width: 23px;
    font-size: 10px;
  }
  html[lang] .legacy-color-component input {
    width: 26px;
  }
}