/* Выбор клана и подсказка ника (media/js/kodg-pick.js). Цвета — из темы сайта. */
.kp{position:relative}
.kp-hidden{display:none !important}
.kp-face{position:relative}
.kp-face .kp-in{padding-left:var(--kp-pad,12px);padding-right:30px}
.kp-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;pointer-events:none}
.kp-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;width:24px;height:24px;padding:0;border:0;
  background:none;color:var(--k-muted,#777);font-size:20px;line-height:1;cursor:pointer}
.kp.has .kp-x{display:block}
.kp-x:hover{color:var(--k-accent,#c00)}
.kp-list{position:absolute;z-index:40;left:0;right:0;margin:2px 0 0;padding:0;list-style:none;max-height:340px;overflow:auto;
  background:var(--k-panel,#fff);border:1px solid var(--k-border,#ddd);border-radius:5px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.kp-list[hidden]{display:none}
.kp-list li{display:flex;align-items:center;gap:6px;padding:7px 12px;cursor:pointer;font-size:14px;color:var(--k-text,#222)}
.kp-list li.on,.kp-list li:hover{background:var(--k-panel3,#eef2f6)}
.kp-list li.kp-none{color:var(--k-muted,#777);cursor:default}
.kp-list li.kp-none:hover{background:none}
.kp-list b{font-weight:600}
.kp-al{width:12px;height:15px;flex:none}
.kp-kl{width:24px;height:15px;flex:none;border-radius:2px}
.kp-lv{color:var(--k-muted,#777);font-size:12px}
.kp-n{margin-left:auto;color:var(--k-muted,#777);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}