/* ============================================================
   AIpraatplaat — Zoekopdracht (menu · grote weergave · timer-chip)
   Warm, papier-achtig; coral accent. Geen gradients/schaduw-ornament.
   ============================================================ */

/* het zoekicoontje gloeit/kleurt zodra er een opdracht actief is */
.tb-btn.t-search.search-active {
  color: var(--accent-coral-hex, #d97757);
  background: rgba(217,119,87,0.16);
}
.tb-btn.t-search.search-active:hover { background: rgba(217,119,87,0.26); }

/* ---------- setup-menu (boven de werkbalkknop) ---------- */
.zoek-setup { padding: 22px 26px; }
.zoek-setup .zm-section-h:first-child { margin-top: 0; }
.hwin-foot .hbtn:disabled { opacity: 0.45; cursor: default; }
.zoek-menu {
  position: absolute; z-index: 70; width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  background: var(--paper, #faf6ef); border: 1px solid var(--line-soft, rgba(43,39,34,0.12));
  border-radius: var(--r-xl, 18px); box-shadow: var(--shadow-soft, 0 12px 34px rgba(43,39,34,0.14));
  padding: 16px; display: none; flex-direction: column;
}
.zoek-menu.show { display: flex; }
.zm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.zm-section-h { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin: 16px 0 7px; }
.zm-hint { font-size: 12px; line-height: 1.45; color: var(--ink-muted); margin: 0 0 10px; text-wrap: pretty; }
/* segmented control */
.zm-seg { display: flex; gap: 6px; background: var(--paper-warm, #f5ecdb); border-radius: 12px; padding: 4px; }
.zm-seg-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 8px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: background var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft); }
.zm-seg-btn .zm-seg-ic { display: grid; place-items: center; }
.zm-seg-btn .zm-seg-ic svg { width: 14px; height: 16px; }
.zm-seg-btn:hover { color: var(--ink); }
.zm-seg-btn.on { background: var(--paper, #faf6ef); color: var(--ink); box-shadow: 0 1px 3px rgba(43,39,34,0.12); }
.zm-seg-btn.on .zm-seg-ic { color: var(--accent-coral-hex, #d97757); }
/* memo koppelen */
.zm-memo { margin: 4px 0 2px; }
.zm-memo-toggle { display: inline-flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 1px dashed var(--line-soft, rgba(43,39,34,0.22)); background: transparent; border-radius: 12px; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: background var(--dur-fast,140ms) var(--ease-soft), border-color var(--dur-fast,140ms) var(--ease-soft); }
.zm-memo-toggle:hover { background: var(--paper-warm, #f5ecdb); color: var(--ink); }
.zm-memo-ic { position: relative; display: grid; place-items: center; color: var(--ink); }
.zm-memo-ic > svg { width: 19px; height: 19px; }
.zm-memo-clip { position: absolute; right: -6px; bottom: -5px; width: 14px; height: 14px; display: grid; place-items: center; background: var(--accent-coral-hex, #d97757); color: #fff; border-radius: 50%; border: 1.5px solid var(--paper, #faf6ef); }
.zm-memo-clip svg { width: 9px; height: 9px; }
.zm-memo.open .zm-memo-toggle { border-style: solid; border-color: var(--accent-coral-hex, #d97757); color: var(--ink); }
.zm-memo-panel { display: none; padding: 10px 2px 2px; }
.zm-memo.open .zm-memo-panel { display: block; }
.zm-memo-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); margin: 8px 0 6px; }
.zm-memo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.zm-memo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-soft, rgba(43,39,34,0.14)); border-left: 4px solid var(--mc, #f4e4a3); background: #fff; border-radius: 9px; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; color: var(--ink); }
.zm-memo-chip:hover { background: var(--paper-warm, #f5ecdb); }
.zm-memo-title, .zm-memo-body { width: 100%; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); background: #fff; border: 1px solid var(--line-soft, rgba(43,39,34,0.16)); border-radius: 10px; padding: 9px 11px; margin-bottom: 7px; }
.zm-memo-body { resize: vertical; min-height: 56px; line-height: 1.4; }
.zm-memo-title:focus, .zm-memo-body:focus { outline: none; border-color: var(--accent-coral-hex, #d97757); }
.zm-memo-make { width: 100%; font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink); background: var(--paper-warm, #f5ecdb); border: none; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.zm-memo-make:hover:not(:disabled) { background: rgba(217,119,87,0.16); color: var(--accent-coral-hex, #d97757); }
.zm-memo-make:disabled { opacity: 0.4; cursor: default; }
.zm-memo-linked { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #fff; border: 1px solid var(--line-soft, rgba(43,39,34,0.14)); border-left: 4px solid var(--mc, #f4e4a3); border-radius: 10px; }
.zm-memo-linked-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; background: var(--mc, #f4e4a3); }
.zm-memo-linked-txt { flex: 1 1 auto; min-width: 0; }
.zm-memo-linked-txt b { display: block; font-size: 13px; color: var(--ink); }
.zm-memo-linked-txt span { display: block; font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zm-memo-unlink { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--ink-muted); }
.zm-memo-unlink svg { width: 13px; height: 13px; }
.zm-memo-unlink:hover { background: rgba(43,39,34,0.06); color: var(--ink); }
.zm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; flex: 0 0 auto; }
.zm-eyebrow { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.zm-x { width: 28px; height: 28px; display: grid; place-items: center; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ink-muted); }
.zm-x svg { width: 16px; height: 16px; }
.zm-x:hover { background: rgba(43,39,34,0.06); color: var(--ink); }

.zm-inputrow { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.zm-dice { flex: 0 0 auto; width: 42px; border: 1px solid var(--line-soft, rgba(43,39,34,0.14)); background: var(--paper-warm, #f5ecdb); border-radius: 12px; cursor: pointer; color: var(--ink); display: grid; place-items: center; transition: transform var(--dur-fast,140ms) var(--ease-soft), background var(--dur-fast,140ms) var(--ease-soft); }
.zm-dice svg { width: 22px; height: 22px; }
.zm-dice:hover { background: rgba(217,119,87,0.14); color: var(--accent-coral-hex,#d97757); }
.zm-dice:active { transform: rotate(-12deg) scale(0.94); }
.zm-input, .zm-select {
  width: 100%; font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-soft, rgba(43,39,34,0.16)); border-radius: 12px; padding: 10px 12px;
}
.zm-input { flex: 1 1 auto; }
.zm-input:focus, .zm-select:focus { outline: none; border-color: var(--accent-coral-hex, #d97757); }
.zm-input::placeholder { font-style: italic; color: rgba(43,39,34,0.34); }
.zm-select { margin-bottom: 14px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736b5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px;
}

.zm-timer { margin-bottom: 16px; }
.zm-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.zm-label svg { width: 15px; height: 15px; }
.zm-stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-warm, #f5ecdb); border-radius: 999px; padding: 4px; }
.zm-step {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1; color: var(--ink);
  background: var(--paper, #faf6ef); display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(43,39,34,0.10);
  transition: background var(--dur-fast,140ms) var(--ease-soft), color var(--dur-fast,140ms) var(--ease-soft);
}
.zm-step:hover:not(:disabled) { background: var(--accent-coral-hex, #d97757); color: #fff; }
.zm-step:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.zm-tval { min-width: 64px; text-align: center; font-family: var(--font-mono, monospace); font-size: 17px; font-weight: 700; color: var(--ink); }
.zm-tval.none { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-muted); }

.zm-foot { display: flex; flex: 0 0 auto; margin-top: 14px; }
.zm-start {
  flex: 1 1 auto; font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: #fff;
  background: var(--accent-coral-hex, #d97757); border: none; border-radius: 12px; padding: 11px 16px; cursor: pointer;
  transition: transform var(--dur-fast,140ms) var(--ease-soft), opacity var(--dur-fast,140ms) var(--ease-soft);
}
.zm-start:hover:not(:disabled) { transform: translateY(-1px); }
.zm-start:disabled { opacity: 0.42; cursor: default; }

/* ---------- grote opdracht in beeld ---------- */
.zoek-overlay {
  position: absolute; inset: 0; z-index: 58; display: none; align-items: center; justify-content: center;
  padding: 6vmin; background: rgba(43,39,34,0.30); backdrop-filter: blur(3px);
}
.zoek-overlay.show { display: flex; }
.zo-card {
  width: min(900px, 92%); background: var(--paper, #faf6ef); border-radius: var(--r-2xl, 24px);
  box-shadow: 0 24px 70px rgba(43,39,34,0.28); padding: clamp(28px, 5vmin, 56px); text-align: center;
}
.zo-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-coral-hex, #d97757); margin-bottom: 18px; }
.zo-text { font-family: var(--font-serif, Newsreader), serif; font-size: clamp(26px, 4.2vmin, 46px); line-height: 1.22; color: var(--ink, #2b2722); margin: 0 0 26px; text-wrap: pretty; }
.zo-timer { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono, monospace); font-size: clamp(26px, 4vmin, 40px); font-weight: 700; color: var(--ink); padding: 8px 20px; border-radius: 999px; background: var(--paper-warm, #f5ecdb); margin-bottom: 28px; }
.zo-timer .zo-clock { display: grid; place-items: center; color: var(--accent-coral-hex, #d97757); }
.zo-timer .zo-clock svg { width: 26px; height: 26px; }
.zo-timer.done { background: rgba(177,74,82,0.14); color: #b14a52; }
.zo-card { text-align: center; }
.zo-card-wide { width: min(1040px, 94%); text-align: left; }
.zo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.zo-card:not(.zo-card-wide) .zo-acts { justify-content: center; }
.zo-spacer { flex: 1 1 auto; }
.zo-min {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #fff;
  background: var(--ink, #2b2722); border: none; border-radius: 12px; padding: 12px 22px; cursor: pointer;
  transition: transform var(--dur-fast,140ms) var(--ease-soft);
}
.zo-min svg { width: 20px; height: 20px; }
.zo-min:hover { transform: translateY(-1px); }
.zo-tbtn {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--ink);
  background: var(--paper-warm, #f5ecdb); border: none; border-radius: 11px; padding: 11px 16px; cursor: pointer;
  transition: background var(--dur-fast,140ms) var(--ease-soft);
}
.zo-tbtn:hover { background: rgba(217,119,87,0.16); color: var(--accent-coral-hex, #d97757); }
.zo-disc {
  display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: #fff;
  background: var(--accent-coral-hex, #d97757); border: none; border-radius: 12px; padding: 12px 22px; cursor: pointer;
  transition: transform var(--dur-fast,140ms) var(--ease-soft);
}
.zo-disc:hover { transform: translateY(-1px); }
.zo-stop { background: transparent; border: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer; padding: 11px 14px; border-radius: 10px; }
.zo-stop:hover { color: #b14a52; background: rgba(177,74,82,0.08); }
.zo-stopwarn { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: #b14a52; }

/* gekoppelde memo in de opdracht-kaart */
.zo-memo { text-align: left; background: var(--mc, #f4e4a3); border-radius: 6px 6px 16px 6px; padding: 18px 20px; margin: 0 auto 22px; max-width: 560px; box-shadow: 0 6px 18px rgba(43,39,34,0.12); }
.zo-card-wide .zo-memo { margin-left: 0; }
.zo-memo-title { font-family: var(--font-serif, Newsreader), serif; font-size: 21px; font-weight: 500; color: #2b2722; margin-bottom: 7px; }
.zo-memo-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: rgba(43,39,34,0.88); white-space: pre-wrap; word-break: break-word; }
.zo-memo-body b, .zo-memo-body strong { font-weight: 700; }
/* invoer-badge */
.zo-inputbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--paper-warm, #f5ecdb); border-radius: 999px; padding: 6px 14px 6px 11px; margin-bottom: 22px; }
.zo-inputbadge svg { width: 13px; height: 16px; color: var(--accent-coral-hex, #d97757); }

/* notitie-overzicht (bespreken) — als Kort antwoord, met pin-icoon */
.zo-notes { margin: 6px 0 18px; }
.zo-notes-head { display: flex; align-items: center; margin-bottom: 12px; }
.zo-notes-count { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.zo-notes-empty { font-size: 14px; color: var(--ink-muted); margin: 8px 0; }
.zo-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.zo-note-card { display: flex; gap: 11px; background: #fff; border: 1px solid var(--line-soft, rgba(43,39,34,0.1)); border-radius: 14px; padding: 14px; }
.zo-note-pin { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: none; border-radius: 10px; cursor: pointer; color: var(--pc, #e8453c); background: color-mix(in srgb, var(--pc, #e8453c) 12%, #fff); transition: transform var(--dur-fast,140ms) var(--ease-soft), background var(--dur-fast,140ms) var(--ease-soft); }
.zo-note-pin svg { width: 18px; height: 22px; }
.zo-note-pin:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--pc, #e8453c) 22%, #fff); }
.zo-note-main { flex: 1 1 auto; min-width: 0; }
.zo-note-by { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--accent-coral-hex, #d97757); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.zo-note-txt { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--ink); text-wrap: pretty; word-break: break-word; }
.zo-note-empty { font-size: 13px; font-style: italic; color: var(--ink-muted); }

/* ============================================================
   DEELNEMERSPINS OP DE HOSTPLAAT
   ============================================================ */
.hpin { position: relative; width: 22px; height: 27px; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(43,39,34,0.35)); transform-origin: 50% 100%; transition: transform 120ms var(--ease-soft, ease); }
.hpin:hover { transform: scale(1.18); z-index: 5; }
.hpin svg { display: block; }
.hpin-note { position: absolute; top: -5px; right: -7px; width: 14px; height: 14px; display: grid; place-items: center; background: var(--ink, #2b2722); color: #fff; border-radius: 50%; border: 1.5px solid #fff; }
.hpin-note svg { width: 9px; height: 9px; }
.hpin-ping::after { content: ""; position: absolute; left: 50%; top: 44%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--pc, #e8453c); animation: hpinPing 1.1s var(--ease-soft, ease) 2; }
@keyframes hpinPing { 0% { width: 10px; height: 10px; opacity: 0.9; } 100% { width: 64px; height: 64px; opacity: 0; } }
.hpin-pop { position: absolute; z-index: 120; display: none; max-width: 280px; min-width: 180px; background: var(--paper, #faf6ef); border: 1px solid var(--line-soft, rgba(43,39,34,0.12)); border-radius: 14px; box-shadow: 0 14px 40px rgba(43,39,34,0.22); padding: 13px 14px; }
.hpin-pop.show { display: flex; gap: 10px; align-items: flex-start; }
.hpin-pop-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; margin-top: 3px; }
.hpin-pop-body { flex: 1 1 auto; min-width: 0; }
.hpin-pop-who { font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--accent-coral-hex, #d97757); margin-bottom: 3px; }
.hpin-pop-note { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: var(--ink); word-break: break-word; text-wrap: pretty; }
.hpin-pop-empty { font-style: italic; color: var(--ink-muted); }
.hpin-pop-x { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: none; background: transparent; border-radius: 6px; cursor: pointer; color: var(--ink-muted); }
.hpin-pop-x svg { width: 13px; height: 13px; }
.hpin-pop-x:hover { background: rgba(43,39,34,0.06); color: var(--ink); }

/* zoekopdracht-push in de werkbalk krijgt het coral accent */
.tb-btn.tb-pushlive.tb-pushlive-search { color: var(--accent-coral-hex, #d97757); background: rgba(217,119,87,0.16); }
.tb-btn.tb-pushlive.tb-pushlive-search:hover { background: rgba(217,119,87,0.26); }

/* ---------- timer-chip rechtsboven (na minimaliseren) ---------- */
.zoek-chip {
  position: absolute; top: 18px; right: 18px; z-index: 59; display: none; align-items: center; gap: 10px;
  font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 700; color: var(--ink);
  background: var(--paper, #faf6ef); border: 1px solid var(--line-soft, rgba(43,39,34,0.12));
  border-radius: 999px; padding: 9px 16px 9px 13px; cursor: pointer; box-shadow: var(--shadow-soft, 0 8px 24px rgba(43,39,34,0.10));
  transition: transform var(--dur-fast,140ms) var(--ease-soft), border-color var(--dur-fast,140ms) var(--ease-soft);
}
.zoek-chip.show { display: inline-flex; }
.zoek-chip:hover { transform: translateY(1px); border-color: var(--accent-coral-hex, #d97757); }
.zoek-chip .zc-ic { display: grid; place-items: center; color: var(--accent-coral-hex, #d97757); }
.zoek-chip .zc-ic svg { width: 18px; height: 18px; }
.zoek-chip .zc-label { font-family: var(--font-sans); font-weight: 600; font-size: 13px; }
.zoek-chip.with-timer .zc-label { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 18px; }
.zoek-chip.done { border-color: #b14a52; color: #b14a52; }
.zoek-chip.done .zc-ic { color: #b14a52; }

@media (prefers-reduced-motion: reduce) {
  .zm-dice:active { transform: none; }
}

/* deelnemerspins staan altijd vóór de hotspot-contour, ook tijdens een zoekopdracht;
   klikken opent dus de pin-notitie en niet de hotspot eronder */
.hpin { z-index: 6; }
.hpin:hover { z-index: 7; }

/* bespreken: hint i.p.v. notitie-overzicht — de host klikt de pins zelf aan */
.zo-discuss-hint {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 11px 14px;
  border-radius: var(--r-md, 12px); background: rgba(217,119,87,0.10);
  color: var(--ink-soft, #5c574e); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; text-wrap: pretty;
}
.zo-discuss-hint > span:first-child { display: inline-flex; color: var(--accent-coral-hex, #d97757); flex: 0 0 auto; }
.zo-discuss-hint svg { width: 20px; height: 20px; }

/* ============ GEKOPPELDE LINK in de opdracht-kaart ============ */
.zo-link { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; padding: 8px 11px; width: 100%; border: 1px solid rgba(43,39,34,0.16); border-radius: 11px; background: var(--plaat-sky, #e3ecf0); font: inherit; cursor: pointer; text-align: left; }
.zo-link-ic { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.6); color: var(--ink, #2b2722); }
.zo-link-ic svg { width: 14px; height: 14px; }
.zo-link-lab { font-weight: 700; font-size: 13.5px; color: var(--ink, #2b2722); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zo-link-host { font-size: 12px; color: var(--ink-muted, #7a7064); margin-left: auto; padding-right: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zo-link-go { flex: 0 0 auto; color: var(--ink-soft, #4a433a); display: grid; place-items: center; }
.zo-link-go svg { width: 14px; height: 14px; }