/* ===================================================== */
/* Display settings modal - professional color picker */
/* ===================================================== */

body div.modal.display-settings-modal div.display-settings__body div.display-settings__group div.display-settings__options-list {
  background: none !important;
  padding: 0 !important;
}

body div.modal.display-settings-modal div.display-settings__body div.display-settings__group div.display-settings__options-list div.row {
  margin-left: -6px !important;
  margin-right: -6px !important;
}
body div.modal.display-settings-modal div.display-settings__body div.display-settings__group div.display-settings__options-list div.row > div {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

body div.modal.display-settings-modal div.display-settings__options-list div.options-li {
  border: 1px solid var(--cl-primary-border-color) !important;
  border-radius: var(--cl-secondary-border-radius) !important;
  padding: 14px 6px 12px 6px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
body div.modal.display-settings-modal div.display-settings__options-list div.options-li:hover {
  border-color: var(--cl-secondary-text-color) !important;
  background: var(--cl-event-hover-bg);
}

/* The swatch itself */
body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  position: relative;
}
body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.color-swatch.color-swatch_bordered {
  box-shadow: inset 0 0 0 1px var(--cl-primary-border-color);
}

/* Checkmark sits centred inside the swatch itself */
body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.color-swatch span.active-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.color-swatch span.active-check svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
/* The "Default" background swatch is white, so a white check would be invisible - use a dark check instead */
body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.color-swatch.color-swatch_bordered span.active-check svg {
  fill: #14171a;
  filter: none;
}

/* Selected card gets a subtle highlighted border + ring around the swatch, using the theme's own accent colour */
body div.modal.display-settings-modal div.display-settings__options-list div.options-li.options-li_active {
  border-color: var(--cl-primary-color) !important;
  background: var(--cl-event-hover-bg);
}
body div.modal.display-settings-modal div.display-settings__options-list div.options-li.options-li_active div.color-swatch {
  box-shadow: 0 0 0 2px var(--cl-primary-bg-color), 0 0 0 4px var(--cl-primary-color);
}

body div.modal.display-settings-modal div.display-settings__options-list div.options-li div.name b {
  font-size: 12px !important;
  font-weight: 500 !important;
}