.fl-controls-button {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
  place-items: center;
  gap: 8px;
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius);
  background-color: var(--fl-controls-platter-bg-color);
  color: var(--fl-controls-platter-color);
  min-height: var(--fl-controls-target-size);
}

.fl-controls-button-group {
  display: flex;
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius);
  background-color: var(--fl-controls-panel-bg-color);
  min-height: 30px;
}
.fl-controls-button-group > * {
  flex-grow: 1;
  display: grid;
  place-content: center;
  border-color: transparent;
  background-color: var(--fl-controls-panel-bg-color);
  border-radius: var(--fl-controls-radius);
}
.fl-controls-button-group > *.is-selected {
  background-color: var(--fl-controls-platter-bg-color);
}
.fl-controls-button-group > *:focus {
  outline: none;
}
.fl-controls-button-group > *:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
}

.fl-controls-grid-table {
  --col-count: 2;
  --radius: var(--fl-controls-radius);
  display: grid;
  grid-template-columns: repeat(var(--col-count), minmax(0, 1fr));
  grid-auto-rows: minmax(0, var(--fl-controls-target-size));
  gap: 1px;
  background-color: var(--fl-controls-outline-color);
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--radius);
}
.fl-controls-grid-table.with-heading {
  grid-template-rows: 24px;
}
.fl-controls-grid-table > * {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  color: var(--fl-controls-color);
  background-color: var(--fl-controls-bg-color);
}
.fl-controls-grid-table > *:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.fl-controls-grid-table > *:first-child:first-child {
  border-top-left-radius: var(--radius);
}
.fl-controls-grid-table > *:first-child:last-child {
  border-top-right-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child:first-child {
  border-bottom-left-radius: var(--radius);
}
.fl-controls-grid-table > *:last-child:last-child {
  border-bottom-right-radius: var(--radius);
}
.fl-controls-grid-table > *.heading-row {
  background-color: var(--fl-controls-platter-bg-color);
  color: var(--fl-controls-platter-color);
}
.fl-controls-grid-table > * > *:where(label), .fl-controls-grid-table > * > * label {
  display: flex;
  gap: 8px;
  padding: 0 8px;
}
.fl-controls-grid-table > * > *:is(input, select, textarea),
.fl-controls-grid-table > * > * :is(input, select, textarea) {
  align-self: stretch;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  margin: 0 !important;
  background-color: transparent;
  min-height: 0 !important;
  max-height: var(--fl-controls-target-size);
}
.fl-controls-grid-table > * > * :only-child {
  min-width: 100%;
}
.fl-controls-dialog {
  box-sizing: border-box;
  transform-origin: center top;
  transition-property: scale, overlay, display;
  transition-duration: 0.35s;
  transition-timing-function: ease-in-out;
  transition-behavior: allow-discrete;
}
.fl-controls-dialog.fl-appearance-none {
  background: transparent;
  padding: 0;
  border: none;
}
.fl-controls-dialog.fl-appearance-none[open] {
  scale: 1;
}
@starting-style {
  .fl-controls-dialog.fl-appearance-none {
    scale: 0;
  }
}
.fl-controls-dialog.fl-appearance-none::backdrop {
  background: transparent;
}
.fl-controls-dialog.fl-appearance-panel {
  --radius: 8px;
  --fg-color: var(--fl-controls-panel-color);
  --bg-color: var(--fl-controls-panel-bg-color);
  background: var(--bg-color);
  padding: 0;
  border: 1px solid var(--fl-controls-outline-color);
  place-content: start stretch;
  border-radius: var(--radius);
  scale: 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0);
  overflow: visible;
}
.fl-controls-dialog.fl-appearance-panel:not(.uses-view-transitions) {
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
.fl-controls-dialog.fl-appearance-panel[open] {
  scale: 1;
  display: grid;
  place-content: start stretch;
  box-shadow: 0px 1.7px 1.1px -15px rgba(0, 0, 0, 0.022), 0px 3.9px 2.5px -15px rgba(0, 0, 0, 0.033), 0px 6.7px 4.3px -15px rgba(0, 0, 0, 0.04), 0px 10.3px 6.6px -15px rgba(0, 0, 0, 0.047), 0px 15.2px 9.7px -15px rgba(0, 0, 0, 0.053), 0px 22.3px 14.3px -15px rgba(0, 0, 0, 0.06), 0px 33.5px 21.4px -15px rgba(0, 0, 0, 0.067), 0px 53.4px 34.1px -15px rgba(0, 0, 0, 0.078), 0px 100px 64px -15px rgba(0, 0, 0, 0.1);
}
@starting-style {
  .fl-controls-dialog.fl-appearance-panel[open] {
    scale: 0;
  }
}
.fl-controls-dialog.fl-appearance-panel::backdrop {
  background: transparent;
}
body div.fl-color-picker-toolbar {
  color: black;
  color: var(--fg-color);
  align-items: center;
}
body div.fl-color-picker-toolbar button {
  color: var(--fg-color);
  padding: 0;
}
body div.fl-color-picker-toolbar input[type=text] {
  background: transparent !important;
  border: none;
  outline: none;
  padding: 0;
  box-shadow: none;
  height: auto;
  min-height: none;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
body div.fl-color-picker-toolbar input[type=text]:focus, body div.fl-color-picker-toolbar input[type=text]:focus-visible {
  border-width: 0px !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
body div.fl-color-picker-toolbar :is(.picker-input-wrap, button) {
  --size: 32px;
  height: var(--size);
  min-height: var(--size);
  border-radius: calc(var(--size) / 2);
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
body div.fl-color-picker-toolbar :is(.picker-input-wrap, button):focus-visible, body div.fl-color-picker-toolbar :is(.picker-input-wrap, button):focus-within {
  border: none !important;
  box-shadow: none !important;
  outline-color: transparent !important;
  background: var(--bg-color, lightgrey);
}
body div.fl-color-picker-toolbar .picker-input-wrap {
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin: 2px 0;
  padding: 0;
  gap: 5px;
}
body div.fl-color-picker-toolbar .picker-input-wrap > input {
  flex-grow: 1;
}

.fl-controls-drag-thumb {
  --color: transparent;
  --size: 20px;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) / 2);
  border: 2px solid rgb(240, 240, 240);
  box-shadow: 0 0 0 2px var(--color), 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: var(--color) !important;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 !important;
  translate: -50% -50%;
}
.fl-controls-drag-thumb:hover {
  background-color: var(--color) !important;
  border: 2px solid rgb(240, 240, 240);
  box-shadow: 0 0 0 2px var(--color), 0 0 6px rgba(0, 0, 0, 0.1);
}
.fl-controls-drag-thumb:focus {
  outline: none;
  background-color: var(--color) !important;
}
.fl-controls-drag-thumb:focus-visible {
  --color: red;
  background-color: var(--color) !important;
}

.fl-controls-color-eyedropper {
  --size: 30px;
  --inner-size: 24px;
  display: grid;
  place-content: center;
  width: var(--size);
  height: var(--size);
  background: none;
  border-radius: calc(var(--size) / 2);
  border: none;
  box-shadow: none;
}

.fl-controls-color-swatch {
  --size: 30px;
  --radius: var(--fl-controls-radius);
  --color: transparent;
  --background: linear-gradient(90deg, var(--color), var(--color) );
  --checker-color: var(--fl-controls-checker-color-a);
  --checker-size: 8px;
  --half: calc( var(--checker-size) / 2 );
  --neg-half: calc( 0px - var(--half) );
  --checkers-bg: var(--background),
  			   linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
  			   linear-gradient(135deg, var(--checker-color) 25%, transparent 25%),
  			   linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
  			   linear-gradient(135deg, transparent 75%, var(--checker-color) 75%);
  --bg-size: 100% 100%,
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size);
  --bg-position: 0 0, 0 0, var(--half) 0, var(--half) var(--neg-half), 0px var(--half);
  height: var(--size);
  width: var(--size);
  box-sizing: border-box !important;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0.5%, 0.2);
  border-radius: var(--radius);
  background: var(--checkers-bg);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-color: var(--fl-controls-checker-color-b);
  border: none;
  outline: none;
  display: grid;
  place-content: center;
}
.fl-controls-color-swatch:is(button, a) {
  cursor: pointer;
}
.fl-controls-color-swatch:hover, .fl-controls-color-swatch:focus, .fl-controls-color-swatch:active {
  background-color: var(--fl-controls-checker-color-b);
  border: none;
}
.fl-controls-color-swatch:focus-visible {
  box-shadow: inset 0 0 0 2px var(--fl-controls-accent-color);
}
.fl-controls-color-swatch.mix-swatch {
  transition: scale 0.15s, border-radius 0.15s;
  scale: 1;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
.fl-controls-color-swatch.mix-swatch:hover {
  scale: 1.25;
  filter: brightness(99%);
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0.5%, 0.2), 0 8px 16px hsla(0, 0%, 0.5%, 0.2);
  z-index: 1;
  border-radius: 6px;
}

.removable-swatch-wrap {
  display: grid;
  aspect-ratio: 1/1;
}
.removable-swatch-wrap > * {
  grid-area: 1/1/-1/-1;
}
.removable-swatch-wrap .remove-swatch-button {
  --color: black;
  display: grid;
  place-content: center;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: transparent;
  background-color: transparent;
  translate: 50% -50%;
  z-index: 1;
  transition-duration: 0.25s;
  transition-property: scale, opacity;
  opacity: 0;
  scale: 0;
  pointer-events: none;
}
.removable-swatch-wrap .remove-swatch-button span {
  --fill: color-mix( in srgb, rgb(79, 79, 79) 25%, var(--color) );
  display: grid;
  place-content: center;
  background: var(--fl-controls-platter-bg-color);
  color: var(--fl-controls-dim-color);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  scale: 0.75;
  transition: scale, box-shadow, color, background, translate;
  transition-duration: 0.15s;
  transition-delay: 0.1s;
  box-shadow: inset 0 0 0 1.5px var(--fl-controls-dim-color);
}
.removable-swatch-wrap .remove-swatch-button span svg {
  scale: 1.25;
  transition-duration: 0.15s;
  transition-property: scale;
}
.removable-swatch-wrap .remove-swatch-button:hover, .removable-swatch-wrap .remove-swatch-button:focus-visible {
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.removable-swatch-wrap .remove-swatch-button:hover span, .removable-swatch-wrap .remove-swatch-button:focus-visible span {
  scale: 1;
  color: var(--fill);
  background: color-mix(in srgb, white 90%, var(--color));
  background-color: white;
  box-shadow: inset 0 0 0 2px var(--fill), 0 0 0 1.5px white, 0 3px 10px rgba(0, 0, 0, 0.25);
}
.removable-swatch-wrap .remove-swatch-button:hover span svg, .removable-swatch-wrap .remove-swatch-button:focus-visible span svg {
  scale: 1.25;
}
.removable-swatch-wrap:hover .remove-swatch-button, .removable-swatch-wrap:focus-within .remove-swatch-button, .removable-swatch-wrap:focus-visible .remove-swatch-button {
  pointer-events: auto;
  opacity: 1;
  scale: 1;
}
.removable-swatch-wrap:hover .remove-swatch-button span, .removable-swatch-wrap:focus-within .remove-swatch-button span, .removable-swatch-wrap:focus-visible .remove-swatch-button span {
  translate: 0% 0%;
}

.fl-controls-picker-bottom-tabs {
  display: flex;
  justify-content: center;
  background: var(--platter-bg-color);
  box-shadow: inset 0 1px 0 0px var(--outline-color);
}
.fl-controls-picker-bottom-tabs > * {
  font-size: 13px;
  color: var(--fg-color);
  flex-grow: 1;
  border: none;
  border-radius: 0;
  display: grid;
  place-content: center;
}
.fl-controls-picker-bottom-tabs > *.is-selected {
  box-shadow: 0 0px 0 1px var(--outline-color);
}
.fl-controls-picker-bottom-tabs > *:focus-visible, .fl-controls-picker-bottom-tabs > *:focus, .fl-controls-picker-bottom-tabs > *:hover {
  color: var(--fg-color);
  outline: none !important;
  border: none !important;
  box-shadow: inset 0 0 0 2px #00A0D0 !important;
}

.fl-controls-swatch-group {
  --radius: 0;
  background: var(--bg-color);
  display: grid;
  grid-auto-rows: var(--fl-controls-target-size);
  border-radius: var(--radius);
}
.fl-controls-swatch-group .fl-controls-swatch-group-heading {
  grid-column: 1/-1;
  background: var(--bg-color);
  color: var(--fg-color);
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
}
.fl-controls-swatch-group .fl-controls-swatch-group-heading > span {
  flex-grow: 1;
}
.fl-controls-swatch-group .fl-controls-color-swatch {
  --size: auto;
  border-radius: 0;
  aspect-ratio: 1/1;
  box-shadow: inset 0 0 0 1.5px color(srgb 0.5 0.5 0.5 / 0.1);
  transition: box-shadow 0.15s;
  cursor: pointer;
}
.fl-controls-swatch-group .fl-controls-color-swatch:hover {
  filter: brightness(95%);
}
.fl-controls-swatch-group .fl-controls-color-swatch:focus-visible {
  filter: brightness(95%);
  box-shadow: inset 0 0 0 1.5px white;
}
.fl-controls-swatch-group.fl-appearance-swatches {
  --size: 44px;
  grid-template-columns: repeat(auto-fit, var(--size));
  grid-auto-rows: var(--size);
}
.fl-controls-swatch-group.fl-appearance-list {
  --size: 30px;
  grid-template-columns: var(--size) 1fr;
  grid-auto-rows: var(--size);
  gap: 5px 8px;
}
.fl-controls-swatch-group.fl-appearance-list > button {
  cursor: pointer;
}
.fl-controls-swatch-group.fl-appearance-list .fl-controls-color-swatch {
  --size: inherit;
}

.colorscale {
  background: black;
}
.colorscale .fl-controls-color-swatch {
  --text-color: black;
  transition-duration: 0.25s;
  transition-property: scale, border-radius, color, box-shadow;
  font-size: 10px;
  color: transparent !important;
  box-shadow: transparent;
}
.colorscale .fl-controls-color-swatch:hover, .colorscale .fl-controls-color-swatch:focus-visible {
  z-index: 1;
  scale: 1.75;
  border-radius: 20px;
  color: var(--text-color) !important;
  box-shadow: 0 0 0px 1.5px white;
}
.fl-controls-color-input {
  --outline-color: var(--fl-controls-outline-color);
  --radius: 6px;
  background: var(--fl-controls-panel-bg-color);
  border-radius: var(--radius);
  border: 1px solid var(--outline-color);
  justify-self: end;
}
.fl-controls-color-input > :first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.fl-controls-color-input > :last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.fl-controls-color-input > button {
  border: none;
  background: transparent;
  cursor: move;
}
.fl-controls-color-input > button:hover {
  filter: brightness(96%);
}

.fl-color-picker:has(.picker-mount) {
  width: auto !important;
  min-width: 50px !important;
  flex: 1 0 auto;
}
.fl-color-picker:has(.picker-mount) .picker-mount {
  flex-grow: 1;
  display: flex;
}
.fl-controls-gradient-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) var(--fl-controls-target-size);
  grid-auto-rows: minmax(var(--fl-controls-target-size), min-content);
  gap: 8px;
  padding: 16px;
}
.fl-controls-gradient-picker .span-cols {
  grid-column: 1/-1;
}
.fl-controls-gradient-picker :is(button) {
  background-color: var(--fl-controls-platter-bg-color);
}
.fl-controls-gradient-picker :is(button):hover {
  background-color: var(--fl-controls-platter-bg-color);
  filter: brightness(96%);
}
.fl-controls-gradient-picker .gradient-meta select, .fl-controls-gradient-picker .gradient-meta button {
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range {
  --size: var(--fl-controls-target-size);
  --thumb-size: var(--fl-controls-target-size);
  --thumb-half-size: calc( var(--thumb-size) / 2 );
  --half-size: calc( var(--size) / 2 );
  --bg-color: var(--fl-controls-panel-bg-color);
  border-radius: var(--half-size);
  overflow: hidden;
  min-height: var(--size);
  display: flex;
  grid-column: 1/-1;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap {
  width: var(--half-size);
  background: grey;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap:first-child {
  border-top-left-radius: var(--half-size);
  border-bottom-left-radius: var(--half-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .range-endcap:last-child {
  border-top-right-radius: var(--half-size);
  border-bottom-right-radius: var(--half-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper {
  flex-grow: 1;
  position: relative;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button {
  --color: transparent;
  --half-thumb-size: calc( var(--thumb-size) / 2 );
  position: absolute;
  top: var(--half-size);
  left: 0;
  margin-left: calc(0px - var(--half-thumb-size));
  margin-top: calc(0px - var(--half-thumb-size));
  display: grid;
  place-content: center;
  width: var(--thumb-size);
  height: var(--thumb-size);
  min-width: 0;
  min-height: 0;
  background: transparent;
  border-radius: var(--half-size);
  box-shadow: none;
  border: none;
  padding: 0;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button > span {
  display: block;
  pointer-events: none;
  background: var(--color);
  box-shadow: 0 0 0 4px white, 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: var(--thumb-half-size);
  transition: scale 0.25s, box-shadow;
  scale: 0.5;
  width: var(--half-thumb-size);
  height: var(--half-thumb-size);
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:focus, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button.is-selected, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:hover {
  outline: none;
  border: none;
  box-shadow: none;
  z-index: 9;
}
.fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:focus > span, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button.is-selected > span, .fl-controls-gradient-picker .fl-controls-gradient-stop-range .fl-controls-gradient-stops-wrapper > button:hover > span {
  scale: 1;
  box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.2);
}
.fl-controls-gradient-picker :is(input[type]) {
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius) !important;
  width: 100% !important;
}
.fl-controls-gradient-picker .stop-remove-button {
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius);
  padding: 0;
  width: var(--fl-controls-target-size);
}
.fl-controls-gradient-picker .placeholder {
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--fl-controls-radius);
  background: var(--fl-controls-platter-bg-color);
}
.fl-controls-media-modal-dialog {
  position: relative;
  --inset: 30px;
  top: var(--inset);
  left: var(--inset);
  right: var(--inset);
  bottom: var(--inset);
  width: calc(100% - var(--inset) * 2);
  height: calc(100% - var(--inset) * 2);
  border: none;
}
.fl-controls-media-modal-dialog .media-modal {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fl-controls-media-modal-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px) saturate(200%);
}
.fl-controls-title-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  place-items: center start;
  min-height: var(--fl-builder-target-size);
  border-radius: inherit;
  padding: 0 6px;
  border: none;
}
.fl-controls-title-card .card-visual {
  --size: auto;
  background: #e0e0e0;
  aspect-ratio: 1/1;
  height: var(--size);
  display: flex;
  place-content: center;
  place-items: center;
  place-self: center;
}
.fl-controls-title-card .card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: inherit;
  max-width: 100%;
}
.fl-controls-title-card .card-text .card-title {
  font-size: 13px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.fl-controls-title-card .card-text .card-description {
  font-size: 11px;
  color: inherit;
}
.fl-controls-title-card.is-selected {
  background: var(--fl-builder-accent-color);
  color: white;
}
.fl-controls-title-card.has-issues {
  --color: hsl( 25, 98.11%, 44.66% );
  color: var(--color);
  box-shadow: 0 0 0 1px var(--color);
  background: hsl(25, 100%, 96%);
}
.fl-controls-title-card.has-issues .card-visual {
  color: var(--color);
  background: transparent;
}
.fl-controls-series {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fl-controls-series ul.fl-controls-series-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-controls-series ul.fl-controls-series-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  --background: var(--fl-controls-panel-bg-color);
  background: var(--background);
  transition: background 0.15s;
}
.fl-controls-series ul.fl-controls-series-list li:hover {
  --background: color-mix( in srgb, var(--fl-controls-panel-bg-color) 96%, black );
  background: var(--background);
}
.fl-controls-series ul.fl-controls-series-list li > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions {
  display: flex;
  place-content: end;
  place-items: stretch;
  padding-left: 5px;
  pointer-events: none;
  opacity: 0;
  gap: 1px;
  transition-property: opacity, display;
  transition-behavior: allow-discrete;
  transition-duration: 0.25s;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions div {
  margin-right: auto;
}
.fl-controls-series ul.fl-controls-series-list li .fl-series-item-actions button {
  background: var(--background);
  border: none;
  padding: 0 6px;
  display: flex;
  place-content: center;
  place-items: center;
  pointer-events: auto;
}
.fl-controls-series ul.fl-controls-series-list li:hover .fl-series-item-actions, .fl-controls-series ul.fl-controls-series-list li:focus-within .fl-series-item-actions {
  opacity: 1;
}
.fl-controls-series .fl-series-toolbar {
  display: flex;
  justify-content: end;
}
.fl-controls-series .fl-series-toolbar div:empty {
  flex-grow: 1;
}
.fl-controls-series .fl-series-toolbar button {
  border: none;
  padding: 0 4px;
  display: flex;
  place-content: center;
  place-items: center;
  background: inherit;
  min-height: 0;
  min-width: 0;
}
.fl-controls-series .fl-series-toolbar button:hover {
  filter: brightness(96%);
}
.fl-controls-series .fl-series-empty {
  padding: 36px;
  display: flex;
  place-content: center;
}
.fl-controls-series .fl-series-add-button {
  position: relative;
  display: flex;
  flex-direction: column;
  background: inherit;
}
.fl-controls-series .fl-series-add-button > button {
  flex-grow: 1;
  display: flex;
  place-items: center;
  place-content: center;
  border-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu {
  background: var(--fl-controls-panel-bg-color);
  box-shadow: var(--fl-controls-input-shadow), 0 0 40px hsla(0, 0%, 10%, 0.1);
  border-radius: var(--fl-controls-radius);
  position: absolute;
  top: 24px;
  left: auto;
  right: 0;
  background: var(--fl-controls-input-bg-color);
  min-width: 120px;
  min-height: var(--fl-controls-target-size);
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li {
  display: contents;
  border-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li:first-child button {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu li:last-child button {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu button {
  height: var(--fl-controls-target-size);
  background: var(--fl-controls-panel-bg-color);
  display: flex;
  place-content: center;
  place-items: center;
}
.fl-controls-series .fl-series-add-button ul.fl-series-add-button-menu button:hover {
  filter: brightness(96%);
}
.fl-controls-series.fl-appearance-cards {
  --radius: 8px;
}
.fl-controls-series.fl-appearance-cards .fl-controls-series-list {
  gap: 5px;
}
.fl-controls-series.fl-appearance-cards .fl-controls-series-list li {
  background: var(--fl-controls-input-bg-color);
  border: 1px solid var(--fl-controls-outline-color);
  border-radius: var(--radius);
  min-height: 44px;
  align-items: center;
}
.fl-controls-series.fl-appearance-cards .fl-series-toolbar {
  --size: 24px;
  gap: 5px;
  height: var(--size);
}
.fl-controls-series.fl-appearance-cards .fl-series-toolbar button {
  min-width: var(--size);
  padding: 0 8px;
  background: var(--fl-controls-platter-bg-color);
  border-radius: calc(var(--size) / 2);
}
.fl-controls-series.fl-appearance-cards .fl-series-placeholder {
  min-height: 52px;
}
.fl-controls-series.fl-appearance-cards .fl-series-empty {
  border-radius: var(--radius);
  background: var(--fl-controls-platter-bg-color);
  box-shadow: var(--fl-controls-input-shadow);
}
.fl-controls-series.fl-appearance-compact {
  --radius: var(--fl-controls-radius);
  background: var(--fl-controls-input-bg-color);
  box-shadow: var(--fl-controls-input-shadow);
  border-radius: var(--radius);
  gap: 0;
}
.fl-controls-series.fl-appearance-compact > :first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact > :last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact > *:not(:last-child) {
  border-bottom: 1px solid var(--fl-controls-outline-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list {
  gap: 1px;
  background: var(--fl-controls-outline-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list li {
  min-height: var(--fl-controls-target-size);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list li:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.fl-builder-ui-skin--dark .fl-controls-series.fl-appearance-compact .fl-controls-series-list li {
  background: var(--fl-controls-platter-bg-color);
}
.fl-controls-series.fl-appearance-compact .fl-controls-series-list .fl-series-placeholder {
  min-height: var(--fl-builder-target-size);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar {
  height: 24px;
  gap: 0;
  background: var(--fl-controls-heading-bg-color);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar button {
  background: inherit;
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar > :first-child {
  border-top-left-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact .fl-series-toolbar > :last-child {
  border-top-right-radius: var(--radius);
}
.fl-controls-series.fl-appearance-compact .fl-series-empty {
  background: var(--fl-controls-input-bg-color);
  border-radius: inherit;
}

.fl-series-item-editor {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.fl-series-item-editor .fl-series-item-editor-content {
  flex-grow: 1;
  padding: 16px;
}
.fl-series-item-editor .fl-series-item-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--fl-controls-target-size);
  align-items: center;
  gap: 3px;
}
.fl-series-item-editor .fl-series-item-fields li {
  display: contents;
}
.fl-series-item-editor .fl-series-item-editor-toolbar {
  display: flex;
  min-height: 50px;
  gap: 5px;
  padding: 10px 16px;
  place-content: end;
}
.fl-series-item-editor .fl-series-item-editor-toolbar button {
  padding: 0 10px;
  background: var(--fl-controls-platter-bg-color);
  border-radius: var(--fl-controls-radius);
}
.fl-controls-gradient-picker-dialog {
  width: 320px;
}

.fl-gradient-stops-control {
  display: grid;
  position: relative;
  min-height: var(--fl-builder-target-size);
  align-items: center;
}
.fl-gradient-stops-control .stop {
  --size: 16px;
  --half-size: calc( var(--size) / 2 );
  --neg-half-size: calc( 0px - var(--half-size ) );
  width: var(--size);
  height: var(--size);
  border-radius: var(--half-size);
  margin-left: var(--neg-half-size);
  margin-top: var(--neg-half-size);
  position: absolute;
  left: 0;
  top: 50%;
  background: red;
  border: 2px solid var(--fl-builder-panel-bg-color);
}
.fl-gradient-stops-control .track {
  background: grey;
  grid-column: 1/-1;
  grid-row: 1/-1;
  height: 6px;
}
.fl-controls-background-gallery-dialog {
  place-content: start stretch !important;
}
.fl-controls-background-gallery-dialog .bg-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 24px;
  place-content: start;
  overflow: auto !important;
}
.fl-controls-background-gallery-dialog .bg-gallery-section {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  gap: 24px;
}
.fl-controls-background-gallery-dialog .bg-gallery-section .bg-gallery-section-title {
  grid-column: 1/-1;
  font-size: 16px;
  margin: 0;
}
.fl-controls-background-gallery-dialog .bg-gallery-item {
  display: grid;
  border-radius: var(--fl-controls-radius);
  scale: 1;
  transition: scale 0.15s;
  cursor: pointer;
}
.fl-controls-background-gallery-dialog .bg-gallery-item:hover {
  scale: 1.05;
}
.fl-controls-section {
  --outline: var(--fl-controls-outline-color);
  background: var(--fl-controls-panel-bg-color);
  color: var(--fl-controls-panel-color);
  border-top: 1px solid var(--outline);
}
.fl-controls-section .fl-controls-section-title-bar {
  display: flex;
  background: var(--fl-controls-platter-bg-color);
  min-height: var(--fl-controls-target-size);
  box-shadow: inset 0 -1px 0 0px var(--outline);
}
.fl-controls-section .fl-controls-section-title-bar .fl-controls-section-title {
  display: flex;
  align-items: center;
  background: var(--fl-controls-panel-bg-color);
  border-right: 1px solid var(--outline);
  padding: 0 16px;
  gap: 16px;
}
.fl-controls-section .fl-controls-section-content {
  display: grid;
  place-content: start stretch;
  gap: 16px;
  padding: 24px 16px;
}
.fl-range-input:where(input[type=range]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  inline-size: 100%;
  min-height: var(--fl-builder-target-size);
  margin: 0;
  --track-size: 18px;
  --thumb-size: 18px;
  --thumb-color: black;
  --track-color: lightgrey;
  --thumb-ring: var(--bg-color);
  --thumb-shadow: 0 0 0 2px var(--thumb-ring);
}
.fl-range-input:where(input[type=range]):focus-visible {
  outline: none;
}
.fl-range-input:where(input[type=range]):focus-visible::-webkit-slider-thumb {
  box-shadow: var(--thumb-shadow), 0 0 0 4px var(--accent-color);
}
.fl-range-input:where(input[type=range]):focus-visible::-moz-range-thumb {
  box-shadow: var(--thumb-shadow), 0 0 0 4px var(--accent-color);
}
.fl-range-input:where(input[type=range])::-webkit-slider-runnable-track {
  background: var(--track-color);
  block-size: var(--track-size);
  border-radius: calc(var(--track-size) / 2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.fl-range-input:where(input[type=range])::-moz-range-track {
  background: var(--track-color);
  block-size: var(--track-size);
  border-radius: calc(var(--track-size) / 2);
}
.fl-range-input:where(input[type=range])::-webkit-slider-thumb {
  border: none;
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-block: calc(0px - (var(--thumb-size) / 2 - var(--track-size) / 2)); /* Centers thumb on the track */
  background-color: var(--thumb-color);
  box-shadow: var(--thumb-shadow);
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: calc(var(--thumb-size) / 2);
}
.fl-range-input:where(input[type=range])::-moz-range-thumb {
  border: none;
  background-color: var(--thumb-color);
  box-shadow: var(--thumb-shadow);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  border-radius: calc(var(--thumb-size) / 2);
}
.fl-range-input:where(input[type=range]):focus {
  background-color: transparent !important;
}
.fl-range-input:where(input[type=range]).hue-slider {
  --hue: 0;
  --sat: 100;
  --sat-perc: clamp( 25%, calc( var(--sat) * 1% ), 95% );
  --thumb-color: hsl( var(--hue), var(--sat-perc), 50%);
  --track-color: -webkit-linear-gradient(left,
  	hsl(0,var(--sat-perc), 50%),
  	hsl(30, var(--sat-perc), 50%),
  	hsl(60, var(--sat-perc), 50%),
  	hsl(90, var(--sat-perc), 50%),
  	hsl(120, var(--sat-perc), 50%),
  	hsl(150, var(--sat-perc), 50%),
  	hsl(180, var(--sat-perc), 50%),
  	hsl(210, var(--sat-perc), 50%),
  	hsl(240, var(--sat-perc), 50%),
  	hsl(270, var(--sat-perc), 50%),
  	hsl(300, var(--sat-perc), 50%),
  	hsl(330, var(--sat-perc), 50%),
  	hsl(360, var(--sat-perc), 50%)
  );
}
.fl-range-input:where(input[type=range]).sat-slider {
  --hue: 360;
  --sat: 50%;
  --thumb-color: hsl( var(--hue), var(--sat), 50%);
  --track-color: -webkit-linear-gradient(left, hsl( var(--hue), 0%, 50%), hsl( var(--hue), 100%, 50%) );
}
.fl-range-input:where(input[type=range]).light-slider {
  --hue: 360;
  --sat: 50%;
  --brightness: 0%;
  --thumb-color: hsl( var(--hue), var(--sat), var(--brightness));
  --track-color: linear-gradient( to left, hsl( var(--hue), var(--sat), 0%), hsl( var(--hue), var(--sat), 50%), hsl( var(--hue), var(--sat), 100%) );
}
.fl-range-input:where(input[type=range]).whiteness-slider {
  --hue: 360;
  --whiteness: 0%;
  --thumb-color: hwb( var(--hue) clamp( 0, var(--whiteness), 50 ) 3 );
  --track-color: linear-gradient( to left, hwb( var(--hue) 0% 0% ), hwb( var(--hue) 100% 0% ) );
}
.fl-range-input:where(input[type=range]).alpha-slider {
  --hue: 360;
  --sat: 50%;
  --brightness: 0%;
  --thumb-color: hsl( var(--hue), var(--sat), var(--brightness) );
  --checker-color: #dedede;
  --checker-size: 8px;
  --slider-direction: 90deg;
  --half: calc( var(--checker-size) / 2 );
  --neg-half: calc( 0px - var(--half) );
  --track-bg: linear-gradient(
  				var(--slider-direction),
  				hsl( var(--hue) calc( var(--sat) + 0% ) 50% / 0 ),
  				hsl( var(--hue) calc( var(--sat) + 0% ) 50% / 1 )
  			),
  			linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
  			linear-gradient(135deg, var(--checker-color) 25%, transparent 25%),
  			linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
  			linear-gradient(135deg, transparent 75%, var(--checker-color) 75%);
  --bg-size: 100% 100%,
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size),
  			var(--checker-size) var(--checker-size);
  --bg-position: 0 0, 0 0, var(--half) 0, var(--half) var(--neg-half), 0px var(--half);
}
.fl-range-input:where(input[type=range]).alpha-slider::-webkit-slider-runnable-track {
  background-image: var(--track-bg);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-color: #f3f3f3;
}
.fl-range-input:where(input[type=range]).alpha-slider::-moz-range-track {
  background-image: var(--track-bg);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-color: #f3f3f3;
}
@property --fl-controls-radius {
  inherits: true;
  initial-value: 8px;
  syntax: "<length>";
}
@property --fl-controls-target-size {
  inherits: true;
  initial-value: 36px;
  syntax: "<length>";
}
@property --fl-controls-hue {
  inherits: true;
  initial-value: 210;
  syntax: "<number>";
}
:root {
  --fl-controls-radius: 6px;
  --fl-controls-target-size: 36px;
  --fl-controls-hue: 210;
  --fl-controls-color: black;
  --fl-controls-bg-color: white;
  --fl-controls-input-color: var(--fl-controls-color);
  --fl-controls-input-bg-color: var(--fl-controls-bg-color);
  --fl-controls-panel-color: var(--fl-controls-color);
  --fl-controls-panel-bg-color: hsl( var(--fl-controls-hue), 25%, 99% );
  --fl-controls-platter-color: var(--fl-controls-color);
  --fl-controls-platter-bg-color: hsl( var(--fl-controls-hue), 23%, 95% );
  --fl-controls-heading-color: var(--fl-controls-color);
  --fl-controls-heading-bg-color: hsl( var(--fl-controls-hue), 25%, 98% );
  --fl-controls-accent-color: hsl( var(--fl-controls-hue), 100%, 41% );
  --fl-controls-outline-color: hsl( var(--fl-controls-hue), 26%, 86% );
  --fl-controls-input-shadow: 0 0 0 1px var(--fl-controls-outline-color);
  --fl-controls-focus-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
  --fl-controls-selected-color: hsl( 194deg 100% 34% ) !important;
  --fl-controls-dim-color: hsl(var(--fl-controls-hue), 12%, 55%);
  /* Tab dividers */
  --fl-controls-divider-color: hsl( var(--fl-controls-hue), 26%, 80% );
  --fl-controls-divider-width: 1px;
  --fl-controls-checker-color-a: hsl(var(--fl-controls-hue), 0%, 87%);
  --fl-controls-checker-color-b: hsl(var(--fl-controls-hue), 0%, 95%);
}

:where(.fl-builder-ui-skin--dark) {
  --fl-controls-color: white;
  --fl-controls-bg-color: black;
  --fl-controls-input-color: var(--fl-controls-color);
  --fl-controls-input-bg-color: var(--fl-controls-bg-color);
  --fl-controls-panel-color: var(--fl-controls-color);
  --fl-controls-panel-bg-color: hsl( var(--fl-controls-hue), 14%, 16% );
  --fl-controls-platter-color: var(--fl-controls-color);
  --fl-controls-platter-bg-color: hsl( var(--fl-controls-hue), 14%, 11% );
  --fl-controls-heading-color: var(--fl-controls-color);
  --fl-controls-heading-bg-color: hsl( var(--fl-controls-hue), 14%, 16% );
  --fl-controls-outline-color: hsl( var(--fl-controls-hue), 11%, 25% );
  --fl-controls-input-shadow: 0 0 0 1px var(--fl-controls-outline-color);
  --fl-controls-focus-shadow: inset 0 0 0 1.5px var(--fl-controls-accent-color);
  --fl-controls-dim-color: hsl(var(--fl-controls-hue), 12%, 55%);
  --fl-controls-divider-color: hsl( var(--fl-controls-hue), 11%, 23% );
  --fl-controls-checker-color-a: hsl(var(--fl-controls-hue), 0%, 35%);
  --fl-controls-checker-color-b: hsl(var(--fl-controls-hue), 0%, 25%);
}