.tcolors {
  --current-color: transparent;
  --checkerboard-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath fill='%23CCC' d='M0 0h5v5H0zM5 5h5v5H5z'/%3E%3Cpath fill='%23fff' d='M5 0h5v5H5zM0 5h5v5H0z'/%3E%3C/svg%3E");
  --clear-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23000' d='M8 8.812 12.188 13l.812-.813L8.812 8 13 3.812 12.188 3 8 7.188 3.812 3 3 3.812 7.188 8 3 12.188l.812.812L8 8.812Z'/%3E%3C/svg%3E");
  --focus-color: #00f;
  position: relative;
}
.tcolors_dark {
  --checkerboard-l: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath fill='%233D3D3D' d='M0 0h5v5H0zM5 5h5v5H5z'/%3E%3Cpath fill='%23212121' d='M5 0h5v5H5zM0 5h5v5H0z'/%3E%3C/svg%3E");
  --clear-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23fff' d='M8 8.812 12.188 13l.812-.813L8.812 8 13 3.812 12.188 3 8 7.188 3.812 3 3 3.812 7.188 8 3 12.188l.812.812L8 8.812Z'/%3E%3C/svg%3E");
  --focus-color: #6060ff;
}
.tcolors__input {
  padding: 0 0 0 50px;
}
.tcolors.tcolors_clear-btn-visible .tcolors__input {
  padding-right: var(--padding-right);
}
.tcolors__swatch {
  background-image: var(--checkerboard-l);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 10px;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 35px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
}
.tcolors__swatch:after,
.tcolors__swatch:before {
  background: var(--current-color);
  border-radius: inherit;
  box-sizing: inherit;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tcolors__swatch:after {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.tcolors_dark .tcolors__swatch:after {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.tcolors__clear-btn {
  background-color: transparent;
  background-image: var(--clear-icon);
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  height: 20px;
  margin: 0;
  opacity: 0.4;
  padding: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 20px;
}
.tcolors__clear-btn_hidden {
  display: none;
}
.tcolors_clear-btn-visible .tcolors__clear-btn {
  visibility: visible;
}
.tcolors__clear-btn:hover {
  opacity: 0.6;
}
.tcolors-panel {
  --eye-dropper-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23000' stroke-miterlimit='10' d='M1.238 14.701c-1.02-1.013 0-2.894 0-2.894l6.116-5.93c.728-.724 2.039-.724 2.767 0 .728.722.728 2.024 0 2.893l-6.118 5.931s-1.6 1.158-2.765 0Z'/%3E%3Cpath fill='%23000' d='M7.012 4.314c.73-.731 2.191-.731 2.922 0l1.752 1.604a2.422 2.422 0 0 1 0 3.07c-.878.877-5.553-3.8-4.677-4.677l.003.003Z'/%3E%3Cpath fill='%23000' d='M9.126 6.985c-.873-.87-.873-2.03 0-2.902l2.772-2.753c.73-.726 2.04-.726 2.77 0 .73.725.73 2.03 0 2.902l-2.917 2.755c-.728.726-1.895.726-2.77 0h.145v-.002Z'/%3E%3C/svg%3E");
  --bg-color: #fff;
  --gray-color: #f0f0f0;
  --text-color: #000;
  --focus-color: #00f;
  --checkerboard-s: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none'%3E%3Cpath fill='%23CCC' d='M0 0h3v3H0zM3 3h3v3H3z'/%3E%3Cpath fill='%23fff' d='M3 0h3v3H3zM0 3h3v3H0z'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' fill='none'%3E%3Cpath fill='%23666' fill-rule='evenodd' d='M10.925 1.146a.5.5 0 0 1 0 .708l-3.89 3.889-3.889-3.89a.5.5 0 1 1 .708-.707l3.182 3.182 3.181-3.182a.5.5 0 0 1 .708 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --plus-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23000' stroke-width='.8' d='M7.945 3v10M13 7.946H3'/%3E%3C/svg%3E");
  --remove-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23000' stroke-width='.8' d='m11.497 4.426-7.071 7.071M11.574 11.497 4.503 4.426'/%3E%3C/svg%3E");
  --panel-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.2);
  --picker-shadow: 0 0 2px 0.5px rgba(0, 0, 0, 0.7);
  --gradient-picker-shadow: 0px 0px 0px 2px var(--gray-color);
  --gradient-picker-shadow-selected: 0px 0px 0px 2px var(--focus-color);
  background-color: var(--bg-color);
  border-radius: 5px;
  box-shadow: var(--panel-shadow);
  box-sizing: border-box;
  color: var(--text-color);
  cursor: default;
  font-family: tfutura, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  position: absolute;
  width: 191px;
}
.tcolors-panel_dark {
  --bg-color: #2d2d2d;
  --text-color: #fff;
  --gray-color: #545454;
  --plus-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='.8' d='M7.945 3v10M13 7.946H3'/%3E%3C/svg%3E");
  --remove-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='.8' d='m11.497 4.426-7.071 7.071M11.574 11.497 4.503 4.426'/%3E%3C/svg%3E");
  --eye-dropper-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-miterlimit='10' d='M1.238 14.701c-1.02-1.013 0-2.894 0-2.894l6.116-5.93c.728-.724 2.039-.724 2.767 0 .728.722.728 2.024 0 2.893l-6.118 5.931s-1.6 1.158-2.765 0Z'/%3E%3Cpath fill='%23fff' d='M7.012 4.314c.73-.731 2.191-.731 2.922 0l1.752 1.604a2.422 2.422 0 0 1 0 3.07c-.878.877-5.553-3.8-4.677-4.677l.003.003Z'/%3E%3Cpath fill='%23fff' d='M9.126 6.985c-.873-.87-.873-2.03 0-2.902l2.772-2.753c.73-.726 2.04-.726 2.77 0 .73.725.73 2.03 0 2.902l-2.917 2.755c-.728.726-1.895.726-2.77 0h.145v-.002Z'/%3E%3C/svg%3E");
  --panel-shadow: 0px 0px 3px hsla(0, 0%, 100%, 0.15);
  --focus-color: #6060ff;
  --checkerboard-s: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' fill='none'%3E%3Cpath fill='%233D3D3D' d='M0 0h3v3H0zM3 3h3v3H3z'/%3E%3Cpath fill='%23212121' d='M3 0h3v3H3zM0 3h3v3H0z'/%3E%3C/svg%3E");
  color-scheme: dark;
}
.tcolors-panel *,
.tcolors-panel :after,
.tcolors-panel :before {
  box-sizing: inherit;
}
.tcolors-panel__head {
  align-items: center;
  border-bottom: 1px solid var(--gray-color);
  display: flex;
  height: 36px;
  justify-content: flex-start;
  padding: 4px 10px;
}
.tcolors-panel__head_hidden {
  display: none;
}
.tcolors-panel__gradient-wrapper {
  border-bottom: 1px solid var(--gray-color);
  padding: 33px 14px 13px;
}
.tcolors-gradient {
  background: var(--current-gradient);
  cursor: copy;
  height: 12px;
  position: relative;
  touch-action: none;
}
.tcolors-gradient.tcolors-gradient_disabled {
  cursor: not-allowed;
}
.tcolors-gradient:before {
  background-image: var(--checkerboard-s);
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.tcolors-gradient:after {
  background-color: var(--gray-color);
  content: '';
  height: 6px;
  left: calc(50% - 1px);
  position: absolute;
  top: calc(100% + 2px);
  width: 2px;
}
.tcolors-gradient__marker {
  background-color: var(--bg-color);
  border-radius: 100%;
  box-shadow: var(--gradient-picker-shadow);
  cursor: pointer;
  outline: none;
  padding: 2px;
  position: absolute;
  top: -5px;
  transform: translateY(-100%) translateX(-50%);
}
.tcolors-gradient__marker:after {
  border: 4px solid transparent;
  border-top: 4px solid var(--gray-color);
  bottom: 0;
  content: '';
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) translateY(100%);
  width: 0;
}
.tcolors-gradient__marker_selected {
  box-shadow: var(--gradient-picker-shadow-selected);
  z-index: 1;
}
.tcolors-gradient__marker_selected:after {
  border-top-color: var(--focus-color);
}
.tcolors-gradient__marker-inner {
  background-color: var(--marker-color);
  border-radius: inherit;
  height: 12px;
  position: relative;
  width: 12px;
}
.tcolors-gradient__marker-inner:before {
  background: var(--checkerboard-s);
  border-radius: inherit;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.tcolors-panel__angle {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.tcolors-panel__angle-label {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}
.tcolors-panel__angle-span {
  display: block;
  font-size: 13px;
  font-weight: 400;
}
.tcolors-panel__angle-picker {
  border: 1px solid var(--gray-color);
  border-radius: 50%;
  cursor: pointer;
  height: 25px;
  margin-left: auto;
  position: relative;
  width: 25px;
}
.tcolors-panel__angle-picker:after {
  background-color: var(--text-color);
  border-radius: 100%;
  content: '';
  height: 8px;
  left: calc(50% - 4px);
  opacity: 0.6;
  position: absolute;
  top: calc(50% - 9px);
  transform: rotate(var(--angle));
  transform-origin: center 9px;
  width: 8px;
}
.tcolors-panel__angle-picker:hover:after {
  opacity: 1;
}
.tcolors-panel__area {
  --gradient-rbg-mode-inner: linear-gradient(0deg, #000, transparent);
  --gradient-hsl-mode-inner: linear-gradient(0deg, #000 0%, transparent 50%, #fff);
  background: linear-gradient(to right, #fff, hsl(var(--current-hue), 100%, 50%));
  cursor: crosshair;
  height: 191px;
  position: relative;
  width: 100%;
}
.tcolors-panel__area-inner {
  background: var(--gradient-rbg-mode-inner);
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 100%;
}
.tcolors-panel__head_hidden ~ .tcolors-panel__area {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.tcolors-panel__area_hsl {
  background: linear-gradient(
    to right,
    hsl(var(--current-hue), 0%, 50%),
    hsl(var(--current-hue), 100%, 50%)
  );
}
.tcolors-panel__area_hsl .tcolors-panel__area-inner {
  background: var(--gradient-hsl-mode-inner);
}
.tcolors-panel__area-picker {
  background-color: var(--current-color);
  border: 2px solid #fff;
  border-radius: 100%;
  box-shadow: var(--picker-shadow);
  height: 12px;
  left: -6px;
  outline: none;
  position: absolute;
  top: -6px;
  width: 12px;
}
.tcolors-panel__area-picker:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__inputs {
  padding-bottom: 8px;
  padding-top: 15px;
}
.tcolors-panel__range-outer {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 0 14px;
}
.tcolors-panel__range-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.tcolors-panel__eyedropper {
  background-color: transparent;
  background-image: var(--eye-dropper-icon);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 14px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  height: 14px;
  opacity: 0.6;
  outline: none;
  padding: 0;
  width: 14px;
}
.tcolors-panel__modes .tcolors-panel__eyedropper {
  margin: 0 6px;
}
.tcolors-panel__eyedropper:focus-visible {
  opacity: 1;
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__eyedropper:hover {
  opacity: 1;
}
.tcolors-panel__range {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 6px;
  cursor: pointer;
  height: 12px;
  margin: 0;
  outline: none;
  width: 100%;
}
.tcolors-panel__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 100%;
  box-shadow: var(--picker-shadow);
  height: 12px;
  width: 12px;
}
.tcolors-panel__range::-moz-range-thumb {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 100%;
  box-shadow: var(--picker-shadow);
  height: 12px;
  width: 12px;
}
.tcolors-panel__range:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__range::-webkit-slider-runnable-track {
  border-radius: 6px;
  box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.2);
  height: 12px;
  width: 100%;
}
.tcolors-panel__range::-moz-range-track {
  border-radius: 6px;
  box-shadow: inset 0 0 0 0.6px rgba(0, 0, 0, 0.2);
  height: 12px;
  width: 100%;
}
.tcolors-panel__range_opacity {
  background-image: var(--checkerboard-s);
}
.tcolors-panel__range_opacity::-webkit-slider-runnable-track {
  background: linear-gradient(to right, transparent 0, var(--current-color) 100%);
}
.tcolors-panel__range_opacity::-moz-range-track {
  background: linear-gradient(to right, transparent 0, var(--current-color) 100%);
}
.tcolors-panel__range_hue {
  --hue-gradient: linear-gradient(
    90deg,
    red 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    red
  );
}
.tcolors-panel__range_hue::-webkit-slider-runnable-track {
  background: var(--hue-gradient);
}
.tcolors-panel__range_hue::-moz-range-track {
  background: var(--hue-gradient);
}
.tcolors-panel__range_hue::-webkit-slider-thumb {
  background-color: hsl(var(--current-hue), 100%, 50%);
}
.tcolors-panel__range_hue::-moz-range-thumb {
  background-color: hsl(var(--current-hue), 100%, 50%);
}
.tcolors-panel__modes {
  --input-border-color: transparent;
  align-items: center;
  display: flex;
  margin-top: 12px;
  padding: 0 8px;
}
.tcolors-panel__modes:focus-within,
.tcolors-panel__modes:hover {
  --input-border-color: var(--gray-color);
}
.select-helper,
.tcolors-panel__select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-image: var(--select-arrow);
  background-position: 100%;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: 3px;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  height: 28px !important;
  line-height: 1;
  outline: none;
  padding-left: 4px;
  padding-right: 14px;
  position: relative;
}
.tcolors-panel__select_focus {
  border-color: var(--focus-color) !important;
}
.tcolors-panel__select option {
  background: var(--bg-color);
}
.tcolors-panel__modes-select {
  border-color: var(--input-border-color);
  border-radius: 0;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  font-size: 13px;
  font-weight: 400;
}
.tcolors-panel__modes-inputs {
  display: flex;
  width: 100%;
}
.tcolors-panel__input {
  -webkit-appearance: textfield;
  appearance: textfield;
  -moz-appearance: textfield;
  background: none;
  border: 1px solid var(--input-border-color);
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  height: 28px;
  line-height: 1;
  margin-left: -1px;
  outline: none;
  padding: 0 4px;
  position: relative;
  width: 100%;
}
.tcolors-panel__input:last-child,
.tcolors-panel__modes_eyedropper .tcolors-panel__input:nth-last-child(2) {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.tcolors-panel__input::-webkit-inner-spin-button,
.tcolors-panel__input::-webkit-outer-spin-button {
  display: none;
}
.tcolors-panel__angle-input {
  --input-border-color: transparent;
  width: 56px;
}
.tcolors-panel__angle-input:hover {
  --input-border-color: var(--gray-color);
}
.tcolors-panel__input_opacity {
  max-width: 35px;
}
.tcolors-panel__input:focus-visible {
  border-color: var(--focus-color);
  z-index: 10;
}
.tcolors-panel__library {
  border-top: 1px solid var(--gray-color);
  display: flex;
  flex-direction: column;
  padding: 6px 8px 12px;
}
.tcolors-panel__library-select {
  font-weight: 400;
  margin-bottom: 3px;
}
.tcolors-panel__library-select:hover {
  border-color: var(--gray-color);
}
.tcolors-panel__select:focus-visible {
  z-index: 10;
}
.tcolors-panel__tcolors {
  padding: 0 5px;
}
.tcolors-panel__tcolors .tcolors-panel__tcolors-status {
  display: none;
}
.tcolors-panel__tcolors .tcolors-panel__tcolors-wrapper,
.tcolors-panel__tcolors_status .tcolors-panel__tcolors-status {
  display: block;
}
.tcolors-panel__tcolors_status .tcolors-panel__tcolors-wrapper {
  display: none;
}
.tcolors-panel__tcolors-status {
  text-align: center;
}
.tcolors-panel__tcolors-nav-wrapper {
  position: relative;
}
.tcolors-panel__tcolors-nav-wrapper:after {
  background: linear-gradient(to left, var(--bg-color), transparent);
  content: '';
  display: block;
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.tcolors-panel__tcolors-nav-wrapper_scrolled:after {
  display: none;
}
.tcolors-panel__tcolors-nav {
  -ms-overflow-style: none;
  align-items: center;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tcolors-panel__tcolors-nav::-webkit-scrollbar {
  display: none;
}
.tcolors-panel__tcolors-nav-item {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.5px;
  opacity: 0.6;
  outline: none;
  padding: 0 1px;
  text-transform: uppercase;
}
.tcolors-panel__tcolors-nav-item:focus-visible,
.tcolors-panel__tcolors-nav-item:hover {
  opacity: 1;
}
.tcolors-panel__tcolors-nav-item_active {
  border-color: #f99761;
  opacity: 1;
  pointer-events: none;
}
.tcolors-panel__tcolors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  max-height: 65px;
  overflow: auto;
  padding: 1px;
}
.tcolors-panel__tcolors-list_gradients {
  margin: 0;
  max-height: 63px;
  overflow-y: auto;
}
.tcolors-panel__tcolors-item {
  background: none;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  height: 16px;
  outline: none;
  padding: 0;
  position: relative;
  width: 16px;
}
.tcolors-panel__tcolors-item:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__tcolors-item:after {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: inherit;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tcolors-panel_dark .tcolors-panel__tcolors-item:after {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.tcolors-panel__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 101px;
  overflow-y: auto;
  padding: 1px 6px;
}
.tcolors-panel__add-swatch {
  background: none;
  background-image: var(--plus-icon);
  background-position: 50%;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  height: 16px;
  opacity: 0.6;
  outline: none;
  padding: 0;
  width: 16px;
}
.tcolors-panel__add-swatch:hover {
  opacity: 1;
}
.tcolors-panel__add-swatch:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__swatch {
  background: none;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  height: 16px;
  outline: none;
  padding: 0;
  position: relative;
  width: 16px;
}
.tcolors-panel__swatch:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__swatch:after,
.tcolors-panel__swatch:before {
  border-radius: inherit;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tcolors-panel__swatch:before {
  background-image: var(--checkerboard-s);
  z-index: -1;
}
.tcolors-panel__swatch:after {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.tcolors-panel_dark .tcolors-panel__swatch:after {
  border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.tcolors-panel__swatch_del {
  background: transparent !important;
  background-image: var(--remove-icon) !important;
  background-position: 50%;
  background-repeat: no-repeat;
  border: none !important;
  visibility: visible !important;
}
.tcolors-panel__swatch_del:after,
.tcolors-panel__swatch_del:before {
  display: none;
}
.tcolors-panel__btns {
  border-top: 1px solid var(--gray-color);
  display: flex;
  gap: 8px;
  padding: 12px 8px;
}
.tcolors-panel__action-btn {
  border: 1px solid var(--gray-color);
  border-radius: 3px;
  color: var(--text-color);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  outline: none;
  padding: 7px 4px;
  width: 100%;
}
.tcolors-panel__action-btn:focus-visible {
  outline: 2px solid var(--focus-color);
}
.tcolors-panel__action-btn_apply {
  background-color: #ff855d;
  border-color: #ff855d;
  color: #fff;
}
.tcolors-panel__bottom-gap {
  bottom: 0;
  position: absolute;
  transform: translateY(100%);
  width: 100%;
}
.tcolors-panel__contrast {
  align-items: center;
  border-top: 1px solid var(--gray-color);
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  padding: 10px 12px;
}
.tcolors-panel__contrast-label,
.tcolors-panel__contrast-rate,
.tcolors-panel__contrast-value,
.tcolors-panel__hint {
  font-family: inherit;
  line-height: 1;
}
.tcolors-panel__contrast-label {
  font-size: 13px;
  font-weight: 400;
}
.tcolors-panel__contrast-rate,
.tcolors-panel__contrast-value,
.tcolors-panel__hint {
  font-size: 12px;
  font-weight: 700;
}
.tcolors-panel__contrast-rate {
  color: #64da8c;
  margin-left: auto;
  text-transform: uppercase;
}
.tcolors-panel__contrast-rate_fail {
  color: #ff8e8d;
}
.tcolors-panel__contrast-value {
  opacity: 0.5;
}
.tcolors-panel__hint {
  background-color: var(--text-color);
  border-radius: 100%;
  color: var(--bg-color);
  cursor: pointer;
  flex-shrink: 0;
  height: 14px;
  line-height: 16px;
  opacity: 0.2;
  text-align: center;
  width: 14px;
}
.tcolors-panel__hint:hover {
  opacity: 0.5;
}
.tcolors-panel__hint_contrast {
  margin-left: -6px;
}
.tcolors-panel__hint_gradient {
  margin-left: auto;
}
.t-tooltip {
  --x: 0;
  --y: 0;
  --pin-left: 50%;
  -webkit-font-smoothing: subpixel-antialiased;
  background-color: #000;
  border-radius: 3px;
  color: #ccc;
  font-family: tfutura, tFutura, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  left: 0;
  line-height: 16px;
  margin: 0;
  max-width: 250px;
  padding: 11px 15px;
  position: fixed;
  top: 0;
  translate: clamp(5px, calc(var(--x) - 50%), calc(100vw - 100% - 5px))
    clamp(5px, calc(var(--y) - 100%), calc(100vh - 100% - 5px));
}
.t-tooltip_bottom {
  translate: clamp(5px, calc(var(--x) - 50%), calc(100vw - 100% - 5px))
    clamp(5px, var(--y), calc(100vh - 100% - 5px));
}
.t-tooltip_clickable {
  cursor: pointer;
}
.t-tooltip:before {
  -webkit-font-smoothing: subpixel-antialiased;
  align-items: center;
  background-color: inherit;
  border-radius: inherit;
  color: inherit;
  content: var(--alt-text);
  display: flex;
  font: inherit;
  inset: 0;
  justify-content: center;
  padding: inherit;
  position: absolute;
  text-align: center;
}
.t-tooltip:after {
  border: 8px solid transparent;
  border-top-color: #000;
  bottom: -15px;
  content: '';
  left: var(--pin-left);
  position: absolute;
  transform: translateX(-8px);
}
.t-tooltip_bottom:after {
  border-bottom-color: #000;
  border-top-color: transparent;
  bottom: auto;
  top: -15px;
}