/* Label colors (T51, schema 40). Loaded after portal.css and the portal theme, so these win over theme chip colors. */

/* Map pins: a labeled pin is filled with its label color; the outer ring keeps the follow-up status color (--c). */
.p-pin.p-pin-label { background: var(--lc, var(--c, #1f4e79)); }

/* Label chips (My leads, lead page, map pop-ups): white icon and text on the label color. */
html .p-ll-chip.p-ll-col { background: var(--lc); color: #fff; }

/* A label's icon in a small circle of its color (lists in the label pop-up). */
.p-ll-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lc); }
.p-ll-opt .p-ll-ico .p-ll-svg, .p-ll-ico .p-ll-svg { width: 14px; height: 14px; color: #fff; }

/* Color swatches */
.p-ll-colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.p-ll-sw { position: relative; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--lc); box-shadow: 0 0 0 1px rgba(16, 24, 40, .25); cursor: pointer; }
.p-ll-sw:hover { transform: scale(1.08); }
.p-ll-sw.on { box-shadow: 0 0 0 3px var(--lc); }
.p-ll-sw.on::after { content: ''; position: absolute; left: 50%; top: 45%; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg); }
.p-ll-sw:focus-visible { outline: 2px solid var(--navy, #1f4e79); outline-offset: 4px; }

/* Upload leads: "Label these leads" (review step and the past-upload pop-up) */
.p-ul-label { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line, #e4e7ec); border-radius: 10px; }
.p-ul-label h3 { margin: 0 0 4px; font-size: 1rem; }
.p-ul-label > p { margin: 0 0 8px; }
.p-ul-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.p-ul-colors { margin-top: 10px; }
.p-ul-colors > p { margin: 0 0 4px; }
.p-ul-dlg .p-dialog-in { max-width: 520px; }
.p-ul-dlg form > p { margin: 0 0 10px; }
@media (max-width: 480px) {
  .p-ll-sw { width: 38px; height: 38px; }
}